diff options
66 files changed, 6115 insertions, 297 deletions
diff --git a/css/ninja.css b/css/ninja.css index ba434f42..5a25cc84 100644 --- a/css/ninja.css +++ b/css/ninja.css | |||
@@ -80,7 +80,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co | |||
80 | 80 | ||
81 | #topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; } | 81 | #topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; } |
82 | 82 | ||
83 | #bottomPanelContainer { background: transparent; min-height: 80px; max-height: 50%; overflow: auto; } | 83 | #bottomPanelContainer { background: transparent; height: 150px; min-height: 80px; max-height: 50%; overflow: auto; } |
84 | 84 | ||
85 | .panelContainer { display: block; -webkit-box-orient: vertical; position: relative; } | 85 | .panelContainer { display: block; -webkit-box-orient: vertical; position: relative; } |
86 | 86 | ||
@@ -236,7 +236,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co | |||
236 | 236 | ||
237 | #toolPropertiesPanel { height: 32px; margin: 0px; } | 237 | #toolPropertiesPanel { height: 32px; margin: 0px; } |
238 | 238 | ||
239 | #timelinePanel { height: 116px; } | 239 | #timelinePanel { height: 100%; } |
240 | 240 | ||
241 | .treeComponent { -webkit-user-select: none; font-size: 11px; margin-left: 20px; cursor: default; color: white; } | 241 | .treeComponent { -webkit-user-select: none; font-size: 11px; margin-left: 20px; cursor: default; color: white; } |
242 | 242 | ||
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'); | ||