diff options
67 files changed, 3666 insertions, 77 deletions
diff --git a/css/ninja.css b/css/ninja.css index e3d560ab..d1cf44c6 100755 --- a/css/ninja.css +++ b/css/ninja.css | |||
@@ -118,9 +118,9 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co | |||
118 | 118 | ||
119 | #sceneBar { height: 70px; background-color: #474747; } | 119 | #sceneBar { height: 70px; background-color: #474747; } |
120 | 120 | ||
121 | #mainContainer .rulerTop { display: none; background: gray url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; border-right: 11px solid black; } | 121 | #mainContainer .rulerTop { display: none; background: gray url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; } |
122 | 122 | ||
123 | .rulerLeft { display: none; background: gray url("../images/temp/ruler-left.png"); width: 16px; border-bottom: 11px solid black; } | 123 | .rulerLeft { display: none; background: gray url("../images/temp/ruler-left.png"); width: 16px; } |
124 | 124 | ||
125 | #stateBar { height: 20px; background-color: #282828; margin-bottom: 0px; } | 125 | #stateBar { height: 20px; background-color: #282828; margin-bottom: 0px; } |
126 | 126 | ||
@@ -869,6 +869,8 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 | |||
869 | 869 | ||
870 | .InkBottleTool { background-image: url("../images/tools/Tool-FillColor.png"); } | 870 | .InkBottleTool { background-image: url("../images/tools/Tool-FillColor.png"); } |
871 | 871 | ||
872 | .bindingTool { background-image: url("../images/tools/binding.png"); } | ||
873 | |||
872 | .blueDiv { background: blue; opacity: 0.2; } | 874 | .blueDiv { background: blue; opacity: 0.2; } |
873 | 875 | ||
874 | ::-webkit-scrollbar { width: 11px; height: 11px; } | 876 | ::-webkit-scrollbar { width: 11px; height: 11px; } |
@@ -931,4 +933,12 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 | |||
931 | 933 | ||
932 | .montage-invisible { display: none; } | 934 | .montage-invisible { display: none; } |
933 | 935 | ||
936 | .panels .panel { display: none; } | ||
937 | |||
938 | .panels .panel.ws-binding { display: none; -webkit-box-flex-group: 2; } | ||
939 | |||
940 | body.ws-binding .panel.ws-binding { display: -webkit-box; } | ||
941 | |||
942 | body.ws-default .panel.default { display: -webkit-box; -webkit-box-flex-group: 1; } | ||
943 | |||
934 | /*77*/ | 944 | /*77*/ |
diff --git a/images/cursors/binding.png b/images/cursors/binding.png new file mode 100644 index 00000000..16e84574 --- /dev/null +++ b/images/cursors/binding.png | |||
Binary files differ | |||
diff --git a/images/panels/horizontal-resize.png b/images/panels/horizontal-resize.png new file mode 100644 index 00000000..7b2cf8a5 --- /dev/null +++ b/images/panels/horizontal-resize.png | |||
Binary files differ | |||
diff --git a/images/tools/binding.png b/images/tools/binding.png new file mode 100644 index 00000000..33545ee1 --- /dev/null +++ b/images/tools/binding.png | |||
Binary files differ | |||
diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js index 103e418f..88b93b2c 100644 --- a/js/components/editable.reel/editable.js +++ b/js/components/editable.reel/editable.js | |||
@@ -93,12 +93,43 @@ exports.Editable = Montage.create(Component, { | |||
93 | } | 93 | } |
94 | } | 94 | } |
95 | }, | 95 | }, |
96 | |||
97 | _value : { value: null }, | ||
96 | value : { | 98 | value : { |
97 | get: function() { | 99 | get : function() { return this._value; }, |
98 | return this._element.textContent; | 100 | set : function(value) { |
99 | }, | 101 | if(value === this._value) { return; } |
100 | set: function(str) { | 102 | |
101 | this._element.textContent = str; | 103 | var node = this._getFirstTextNode(); |
104 | node.textContent = value; | ||
105 | |||
106 | this._value = value; | ||
107 | } | ||
108 | }, | ||
109 | _getFirstTextNode : { | ||
110 | value : function(el) { | ||
111 | ///// optional el argument specified container element | ||
112 | var e = el || this._element, | ||
113 | nodes = e.childNodes, node; | ||
114 | |||
115 | if(nodes.length) { | ||
116 | for(var i=0; i<nodes.length; i++) { | ||
117 | if(nodes[i].nodeType === 3) { | ||
118 | ///// found the first text node | ||
119 | node = nodes[i]; | ||
120 | break; | ||
121 | } | ||
122 | } | ||
123 | } | ||
124 | |||
125 | ///// Text node not found | ||
126 | if(!node) { | ||
127 | node = document.createTextNode(''); | ||
128 | e.appendChild(node); | ||
129 | } | ||
130 | |||
131 | |||
132 | return node; | ||
102 | } | 133 | } |
103 | }, | 134 | }, |
104 | 135 | ||
@@ -207,6 +238,8 @@ exports.Editable = Montage.create(Component, { | |||
207 | ///// Text input has changed values | 238 | ///// Text input has changed values |
208 | handleInput : { | 239 | handleInput : { |
209 | value : function(e) { | 240 | value : function(e) { |
241 | this.value = this._getFirstTextNode().textContent; | ||
242 | |||
210 | if(!this.isDirty) { | 243 | if(!this.isDirty) { |
211 | this.isDirty = true; | 244 |