diff options
Diffstat (limited to 'node_modules/montage/ui/repetition.reel')
-rwxr-xr-x | node_modules/montage/ui/repetition.reel/repetition.js | 127 |
1 files changed, 106 insertions, 21 deletions
diff --git a/node_modules/montage/ui/repetition.reel/repetition.js b/node_modules/montage/ui/repetition.reel/repetition.js index 3405a3d7..acc03747 100755 --- a/node_modules/montage/ui/repetition.reel/repetition.js +++ b/node_modules/montage/ui/repetition.reel/repetition.js | |||
@@ -15,7 +15,8 @@ var Montage = require("montage").Montage, | |||
15 | Component = require("ui/component").Component, | 15 | Component = require("ui/component").Component, |
16 | Template = require("ui/template").Template, | 16 | Template = require("ui/template").Template, |
17 | logger = require("core/logger").logger("repetition"), | 17 | logger = require("core/logger").logger("repetition"), |
18 | Gate = require("core/gate").Gate; | 18 | Gate = require("core/gate").Gate, |
19 | ChangeTypeModification = require("core/event/mutable-event").ChangeTypes.MODIFICATION; | ||
19 | /** | 20 | /** |
20 | @class module:"montage/ui/repetition.reel".Repetition | 21 | @class module:"montage/ui/repetition.reel".Repetition |
21 | @extends module:montage/ui/component.Component | 22 | @extends module:montage/ui/component.Component |
@@ -26,6 +27,26 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul | |||
26 | */ | 27 | */ |
27 | hasTemplate: {value: false}, | 28 | hasTemplate: {value: false}, |
28 | 29 | ||
30 | didCreate: { | ||
31 | value: function() { | ||
32 | this.addEventListener("change@objects", this._onObjectsChange, false); | ||
33 | } | ||
34 | }, | ||
35 | |||
36 | _onObjectsChange: { | ||
37 | enumerable: false, | ||
38 | value: function(event) { | ||
39 | if(event._event.propertyChange !== ChangeTypeModification) { | ||
40 | this.selectedIndexes = null; | ||
41 | this._mappedObjects = null; | ||
42 | |||
43 | if (this._isComponentExpanded) { | ||
44 | this._refreshItems(); | ||
45 | } | ||
46 | } | ||
47 | } | ||
48 | }, | ||
49 | |||
29 | /** | 50 | /** |
30 | @private | 51 | @private |
31 | */ | 52 | */ |
@@ -149,20 +170,38 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul | |||
149 | serializable: true, | 170 | serializable: true, |
150 | value: null | 171 | value: null |
151 | }, | 172 | }, |
173 | |||
174 | _mappedObjects: { | ||
175 | enumerable: false, | ||
176 | serializable: true, | ||
177 | value: null | ||
178 | }, | ||
152 | /** | 179 | /** |
153 | Description TODO | 180 | Description TODO |
154 | @type {Function} | 181 | @type {Function} |
155 | @default null | 182 | @default null |
156 | */ | 183 | */ |
157 | objects: { | 184 | objects: { |
185 | dependencies: ["indexMap"], | ||
158 | enumerable: false, | 186 | enumerable: false, |
159 | get: function() { | 187 | get: function() { |
160 | return this._objects; | 188 | if (!this.indexMap) { |
189 | return this._objects; | ||
190 | } else { | ||
191 | if (this._objects && !this._mappedObjects) { | ||
192 | this._mappedObjects = this.indexMap.map(function(value) { | ||
193 | return this._objects.getProperty(value); | ||
194 | }, this); | ||
195 | } | ||
196 | return this._mappedObjects; | ||
197 | } | ||
161 | }, | 198 | }, |
162 | set: function(value) { | 199 | set: function(value) { |
163 | if (logger.isDebug) { | 200 | if (logger.isDebug) { |
164 | logger.debug(this, " set objects:", (value ? value.length : null), value, "same objects?", value === this._objects); | 201 | logger.debug(this, " set objects:", (value ? value.length : null), value, "same objects?", value === this._objects); |
165 | } | 202 | } |
203 | |||
204 | this._mappedObjects = null; | ||
166 | this._objects = value; | 205 | this._objects = value; |
167 | 206 | ||
168 | // Objects have changed, clear the selectedIndexes, if we're managing our own selection | 207 | // Objects have changed, clear the selectedIndexes, if we're managing our own selection |
@@ -174,13 +213,6 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul | |||
174 | this._refreshItems(); | 213 | this._refreshItems(); |
175 | } | 214 | } |
176 | 215 | ||
177 | }, | ||
178 | modify: function(modificationType, newValue, oldValue) { | ||
179 | this.selectedIndexes = null; | ||
180 | |||
181 | if (this._isComponentExpanded) { | ||
182 | this._refreshItems(); | ||
183 | } | ||
184 | } | 216 | } |
185 | }, | 217 | }, |
186 | /** | 218 | /** |
@@ -238,7 +270,31 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul | |||
238 | serializable: true, | 270 | serializable: true, |
239 | value: null | 271 | value: null |
240 | }, | 272 | }, |
241 | /* Format: {firstNode, lastNode}*/ | 273 | |
274 | _indexMap: { | ||
275 | enumerable: false, | ||
276 | value: null | ||
277 | }, | ||
278 | |||
279 | indexMap: { | ||
280 | get: function() { | ||
281 | return this._indexMap; | ||
282 | }, | ||
283 | set: function(value) { | ||
284 | if (value === this._indexMap) { | ||
285 | return; | ||
286 | } | ||
287 | |||
288 | this._mappedObjects = null; | ||
289 | this._indexMap = value; | ||
290 | |||
291 | if (this._isComponentExpanded) { | ||
292 | this._refreshItems(); | ||
293 | } | ||
294 | |||
295 | //TODO react to modifications to the indexMap? | ||
296 | } | ||
297 | }, | ||
242 | 298 | ||
243 | /** | 299 | /** |
244 | Description TODO | 300 | Description TODO |
@@ -297,9 +353,16 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul | |||
297 | 353 | ||
298 | var objectCount = this._objects ? this._objects.length : 0, | 354 | var objectCount = this._objects ? this._objects.length : 0, |
299 | itemCount = this._items.length + this._itemsToAppend.length, | 355 | itemCount = this._items.length + this._itemsToAppend.length, |
300 | neededItemCount = objectCount - itemCount, | 356 | neededItemCount, |
301 | i; | 357 | i; |
302 | 358 | ||
359 | |||
360 | if (this._objects && this.indexMap) { | ||
361 | objectCount = this.indexMap.length; | ||
362 | } | ||
363 | |||
364 | neededItemCount = objectCount - itemCount; | ||
365 | |||
303 | // TODO: this needs to be here because the repetition might be ready to draw during a call to _addItem (if all modules are already loaded). | 366 | // TODO: this needs to be here because the repetition might be ready to draw during a call to _addItem (if all modules are already loaded). |
304 | // The problem is that when the gate is open, and the repetition hasn't ask to be drawn, the _canDraw = true will never happen and it will not happen when needsDraw = true afterwards. This kind of sucks because it means the needsDraw=true and the opening of the Gate needs to be in the correct order. | 367 | // The problem is that when the gate is open, and the repetition hasn't ask to be drawn, the _canDraw = true will never happen and it will not happen when needsDraw = true afterwards. This kind of sucks because it means the needsDraw=true and the opening of the Gate needs to be in the correct order. |
305 | // needsDraw should do _canDraw = true if the gate was opened, but we need to be careful since _canDraw=true only works if there was a previous _canDraw=false. | 368 | // needsDraw should do _canDraw = true if the gate was opened, but we need to be careful since _canDraw=true only works if there was a previous _canDraw=false. |
@@ -356,6 +419,7 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul | |||
356 | // for clarity sake | 419 | // for clarity sake |
357 | this._itemsToAppend.push(this._currentItem); | 420 | this._itemsToAppend.push(this._currentItem); |
358 | index = items.length + this._itemsToAppend.length - 1; | 421 | index = items.length + this._itemsToAppend.length - 1; |
422 | |||
359 | self._canDraw = false; | 423 | self._canDraw = false; |
360 | componentsCount = this._iterationChildComponentsCount; | 424 | componentsCount = this._iterationChildComponentsCount; |
361 | this._iterationTemplate.instantiateWithComponent(this, function() { | 425 | this._iterationTemplate.instantiateWithComponent(this, function() { |
@@ -433,6 +497,11 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul | |||
433 | } | 497 | } |
434 | }}, | 498 | }}, |
435 | 499 | ||
500 | // we don't want to reinitialize the ownerComponent again | ||
501 | templateDidDeserializeObject: { | ||
502 | value: null | ||
503 | }, | ||
504 | |||
436 | _setupIterationTemplate: { | 505 | _setupIterationTemplate: { |
437 | value: function() { | 506 | value: function() { |
438 | var element = this._element, | 507 | var element = this._element, |
@@ -440,6 +509,7 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul | |||
440 | childComponent; | 509 | childComponent; |
441 | 510 | ||
442 | this.setupIterationSerialization(); | 511 | this.setupIterationSerialization(); |
512 | this.setupIterationDeserialization(); | ||
443 | this._iterationChildComponentsCount = childComponents.length; | 513 | this._iterationChildComponentsCount = childComponents.length; |
444 | this._iterationChildCount = element.childNodes.length; | 514 | this._iterationChildCount = element.childNodes.length; |
445 | this._iterationChildElementCount = element.children.length; | 515 | this._iterationChildElementCount = element.children.length; |
@@ -473,11 +543,17 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul | |||
473 | // called on iteration instantiation | 543 | // called on iteration instantiation |
474 | templateDidLoad: {value: function() { | 544 | templateDidLoad: {value: function() { |
475 | var range = document.createRange(), | 545 | var range = document.createRange(), |
476 | item = this._deserializedItem; | 546 | item = this._deserializedItem, |
477 | 547 | children = item.element.childNodes, | |
478 | range.selectNodeContents(item.element); | 548 | i; |
549 | |||
550 | item.fragment = document.createDocumentFragment(); | ||