diff options
Diffstat (limited to 'js')
61 files changed, 6016 insertions, 289 deletions
diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js new file mode 100644 index 00000000..1d0ad776 --- /dev/null +++ b/js/components/editable.reel/editable.js | |||
@@ -0,0 +1,250 @@ | |||
1 | /* ComputedStyleSubPanel.js */ | ||
2 | var Montage = require("montage").Montage, | ||
3 | Component = require("montage/ui/component").Component; | ||
4 | |||
5 | |||
6 | /* | ||
7 | |||
8 | EDITABLE - Methods | ||
9 | - startEdit | ||
10 | - stopEdit | ||
11 | - value | ||
12 | - | ||
13 | - _suggest | ||
14 | - _suggestNext | ||
15 | - _suggestPrev | ||
16 | - _clearSuggest | ||
17 | - _accept | ||
18 | - _revert | ||
19 | - _setCaret | ||
20 | |||
21 | */ | ||
22 | |||
23 | |||
24 | exports.Editable = Montage.create(Component, { | ||
25 | hasTemplate: { value: false }, | ||
26 | |||
27 | _element : { value : null }, | ||
28 | element : { | ||
29 | get : function() { | ||
30 | return this._element; | ||
31 | }, | ||
32 | set : function(el) { | ||
33 | this._element = el; | ||
34 | this._element.addEventListener('keydown', this, false); | ||
35 | this._element.addEventListener('input', this, false); | ||
36 | |||
37 | if(this.startOnEvent) { | ||
38 | this._element.addEventListener(this.startOnEvent, this, false); | ||
39 | } | ||
40 | |||
41 | } | ||
42 | }, | ||
43 | _readOnly : { | ||
44 | value: false | ||
45 | }, | ||
46 | readOnly : { | ||
47 | get : function() { return this._readOnly; }, | ||
48 | set : function(makeReadOnly) { | ||
49 | var action = makeReadOnly ? 'add' : 'remove'; | ||
50 | |||
51 | this._element.classList[action](this.readOnlyClass); | ||
52 | |||
53 | if(this.isEditable) { | ||
54 | this.stop(); | ||
55 | } | ||
56 | this._readOnly = makeReadOnly; | ||
57 | } | ||
58 | }, | ||
59 | _isEditable : { | ||
60 | value : false | ||
61 | }, | ||
62 | isEditable : { | ||
63 | get : function() { | ||
64 | return this._isEditable; | ||
65 | }, | ||
66 | set: function(makeEditable) { | ||
67 | if(this._readOnly && makeEditable) { return false; } | ||
68 | this._isEditable = makeEditable; | ||
69 | } | ||
70 | }, | ||
71 | _isDirty : { | ||
72 | value: false | ||
73 | }, | ||
74 | isDirty : { | ||
75 | get : function() { | ||
76 | return this._isDirty; | ||
77 | }, | ||
78 | set : function(setDirty) { | ||
79 | if(setDirty) { | ||
80 | this._isDirty = true; | ||
81 | this._sendEvent('dirty'); | ||
82 | } else { | ||
83 | this._isDirty = false; | ||
84 | } | ||
85 | } | ||
86 | }, | ||
87 | value : { | ||
88 | get: function() { | ||
89 | return this._element.textContent; | ||
90 | }, | ||
91 | set: function(str) { | ||
92 | this._element.textContent = str; | ||
93 | } | ||
94 | }, | ||
95 | |||
96 | ///// Pre Edit Value | ||
97 | ///// Value stored when editing starts | ||
98 | ///// Useful for reverting to previous value | ||
99 | |||
100 | _preEditValue : { | ||
101 | value : null | ||
102 | }, | ||
103 | start : { | ||
104 | value: function() { | ||
105 | if(!this._readOnly) { | ||
106 | this._isEditable = this._element.contentEditable = true; | ||
107 | this._element.classList.add(this.editingClass); | ||
108 | |||
109 | ///// Save the preEditValue | ||
110 | this._preEditValue = this.value; | ||
111 | |||
112 | if(this.selectOnStart) { | ||
113 | this.selectAll(); | ||
114 | } | ||
115 | |||
116 | if(this.stopOnBlur) { | ||
117 | console.log('adding mousedown event listener'); | ||
118 | ///// Simulate blur on editable node by listening to the doc | ||
119 | document.addEventListener('mouseup', this, false); | ||
120 | } | ||
121 | |||
122 | this._sendEvent('start'); | ||
123 | } | ||
124 | |||
125 | } | ||
126 | }, | ||
127 | stop : { | ||
128 | value: function() { | ||
129 | this._isEditable = this._element.contentEditable = false; | ||
130 | this._element.classList.remove(this.editingClass); | ||
131 | |||
132 | this._sendEvent('stop'); | ||
133 | |||