From a3024011a91d3941f81481dd4d600e9684eb0fd4 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 2 Feb 2012 00:11:51 -0800 Subject: upgrading to Montage v0.6 Signed-off-by: Valerio Virgillito --- .../montage/ui/repetition.reel/repetition.js | 243 ++++++++++++--------- 1 file changed, 142 insertions(+), 101 deletions(-) (limited to 'node_modules/montage/ui/repetition.reel/repetition.js') diff --git a/node_modules/montage/ui/repetition.reel/repetition.js b/node_modules/montage/ui/repetition.reel/repetition.js index a50c4823..3405a3d7 100755 --- a/node_modules/montage/ui/repetition.reel/repetition.js +++ b/node_modules/montage/ui/repetition.reel/repetition.js @@ -33,15 +33,6 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul value: false, enumerable: false }, -/** - Description TODO - @type {Property} - @default {Boolean} false - */ - USE_FLATTENING: { - enumerable: false, - value: false - }, /** Description TODO @@ -94,6 +85,7 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul if (this._contentController) { Object.deleteBinding(this, "objects"); Object.deleteBinding(this, "selectedIndexes"); + Object.deleteBinding(this, "selections"); } this._contentController = value; @@ -107,7 +99,8 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul // And bind what we need from the new contentController var objectsBindingDescriptor, - selectedIndexesBindingDescriptor; + selectedIndexesBindingDescriptor, + selectionsBindingDescriptor; objectsBindingDescriptor = { boundObject: this._contentController, @@ -120,11 +113,17 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul boundObjectPropertyPath: "selectedIndexes" }; + selectionsBindingDescriptor = { + boundObject: this._contentController, + boundObjectPropertyPath: "selections" + }; + // If we're ready for bindings...go ahead an install // TODO: Look at changing this once the new serialization has been implemented if (this._hasBeenDeserialized) { Object.defineBinding(this, "objects", objectsBindingDescriptor); Object.defineBinding(this, "selectedIndexes", selectedIndexesBindingDescriptor); + Object.defineBinding(this, "selections", selectionsBindingDescriptor); } else { // otherwise we need to defer it until later; we haven't been deserialized yet if (!this._controllerBindingsToInstall) { @@ -133,6 +132,7 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul this._controllerBindingsToInstall.objects = objectsBindingDescriptor; this._controllerBindingsToInstall.selectedIndexes = selectedIndexesBindingDescriptor; + this._controllerBindingsToInstall.selections = selectionsBindingDescriptor; } } @@ -161,7 +161,7 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul }, set: function(value) { if (logger.isDebug) { - logger.debug(this, " set objects:", value.length, value, "same objects?", value === this._objects); + logger.debug(this, " set objects:", (value ? value.length : null), value, "same objects?", value === this._objects); } this._objects = value; @@ -173,6 +173,7 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul if (this._isComponentExpanded) { this._refreshItems(); } + }, modify: function(modificationType, newValue, oldValue) { this.selectedIndexes = null; @@ -223,7 +224,7 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul Description TODO @private */ - _childComponentsCount: { + _iterationChildComponentsCount: { enumerable: false, serializable: true, value: null @@ -278,14 +279,6 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul /** Description TODO @private -*/ - _iterationFragment: { - enumerable: false, - value: null - }, -/** - Description TODO - @private */ _refreshingItems: { value: false @@ -322,7 +315,7 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul // or well I'm trying a flag right if (neededItemCount > 0) { // _addItem might be completly synchrounous since we cache both template and deserializer so we need to set this before adding any item otherwise it will trigger a draw after every iteration template instantiation. - this._expectedChildComponentsCount += (this._childComponentsCount||1) * neededItemCount; + this._expectedChildComponentsCount += (this._iterationChildComponentsCount||1) * neededItemCount; this.canDrawGate.setField("iterationLoaded", false); // Need to add more items for (i = 0; i < neededItemCount; i++) { @@ -363,10 +356,8 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul // for clarity sake this._itemsToAppend.push(this._currentItem); index = items.length + this._itemsToAppend.length - 1; - self._canDraw = false; - componentsCount = this._childComponentsCount; - + componentsCount = this._iterationChildComponentsCount; this._iterationTemplate.instantiateWithComponent(this, function() { if (componentsCount === 0) { if (++self._childLoadedCount === self._expectedChildComponentsCount) { @@ -374,11 +365,10 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul } } else { childComponents = self.childComponents; - componentStartIndex = index * self._childComponentsCount; + componentStartIndex = index * self._iterationChildComponentsCount; componentEndIndex = componentStartIndex + componentsCount; for (var i = componentStartIndex; i < componentEndIndex; i++) { childComponent = childComponents[i]; - childComponent.element.id = childComponent.element.id + "-" + index; childComponent.needsDraw = true; childComponent.loadComponentTree(function() { if (++self._childLoadedCount === self._expectedChildComponentsCount) { @@ -395,13 +385,14 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul */ _deleteItem: {value: function() { - var deletedItem, itemIndex, removedComponents, childComponents = this.childComponents, childComponentsCount = this._childComponentsCount, + var deletedItem, itemIndex, removedComponents, childComponents = this.childComponents, childComponentsCount = this._iterationChildComponentsCount, itemsToAppendCount = this._itemsToAppend.length; if (itemsToAppendCount > 0) { // We caught the need to remove these items before they got inserted // just don't bother appending them deletedItem = this._itemsToAppend.pop(); - this._deletedItems.push(deletedItem); + // TODO: make _deletedItems usable in _addItem + //this._deletedItems.push(deletedItem); if (--itemsToAppendCount <= this._nextDeserializedItemIx) { this._nextDeserializedItemIx = itemsToAppendCount; } @@ -416,7 +407,7 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul this._childLoadedCount -= childComponentsCount; this._expectedChildComponentsCount -= childComponentsCount; for (var i = 0, l = removedComponents.length; i < l; i++) { - this.cleanupDeletedComponentTree(removedComponents[i]); + removedComponents[i].cleanupDeletedComponentTree(); } } else { this._childLoadedCount--; @@ -435,61 +426,51 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul @param {Function} callback The callback method. */ expandComponent: {value: function expandComponent(callback) { - var self = this, - childComponents = this.childComponents, - childComponent; + this._setupIterationTemplate(); + this._isComponentExpanded = true; + if (callback) { + callback(); + } + }}, - this.setupIterationSerialization(); - this._childComponentsCount = childComponents.length; + _setupIterationTemplate: { + value: function() { + var element = this._element, + childComponents = this.childComponents, + childComponent; - if (this._childComponentsCount > 0) { - this._templateId = childComponents[0]._suuid || childComponents[0].uuid; - this._iterationTemplate = Template.templateWithComponent(this); - } else { - this._iterationTemplate = Template.create().initWithComponent(this); - } + this.setupIterationSerialization(); + this._iterationChildComponentsCount = childComponents.length; + this._iterationChildCount = element.childNodes.length; + this._iterationChildElementCount = element.children.length; - // just needed to create the iteration Template, so we get rid of it. - this.removeIterationSerialization(); + if (this._iterationChildComponentsCount > 0) { + this._templateId = childComponents[0]._suuid || childComponents[0].uuid; + this._iterationTemplate = Template.templateWithComponent(this); + } else { + this._iterationTemplate = Template.create().initWithComponent(this); + } + this._iterationTemplate.optimize(); + this._removeOriginalContent = true; - while ((childComponent = this.childComponents.shift())) { - if (childComponent.needsDraw) { - childComponent.needsDraw = false; + if (logger.isDebug) { + logger.debug(this._iterationTemplate.exportToString()); } - } - this.childComponents = []; - this._iterationFragment = this.element.ownerDocument.createDocumentFragment(); + // just needed to create the iteration Template, so we get rid of it. + this.removeIterationSerialization(); - if (this.USE_FLATTENING) { - this._iterationTemplate.flatten(function() { - if (logger.debug) { - logger.debug(self, "Flattened version: " + self._iterationTemplate.exportToString()); - } - self._isComponentExpanded = true; - // if objects property was set before we could add the items do it now (we needed the iteration template in place) - if (self.objects && (self.objects.length !== self._items.length)) { - self._refreshItems(); - } + while ((childComponent = childComponents.shift())) { + childComponent.needsDraw = false; + } - if (callback) { - callback(); - } - }); - } else { - this._isComponentExpanded = true; - // if objects property was set before we could add the items do it now (we needed the iteration template in place) if (this.objects && (this.objects.length !== this._items.length)) { this._refreshItems(); } - - if (callback) { - callback(); - } } + }, - }}, - + // called on iteration instantiation templateDidLoad: {value: function() { var range = document.createRange(), item = this._deserializedItem; @@ -499,6 +480,31 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul item.fragment = range.extractContents(); }}, + contentWillChange: { + value: function(content) { + this._refreshingItems = true; + this.reset(); + } + }, + + contentDidChange: { + value: function() { + this._refreshingItems = false; + this._setupIterationTemplate(); + this._skipCurrentDraw = true; + } + }, + + reset: { + value: function() { + this._items = []; + this._itemsToAppend = []; + this._nextDeserializedItemIx = 0; + this._itemsToRemove = []; + this._deletedItems = []; + } + }, + deserializedFromTemplate: {value: function deserializedFromTemplate() { this.setupIterationDeserialization(); if (this._isComponentExpanded) { @@ -535,11 +541,6 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul */ prepareForDraw: { value: function() { - - this._iterationChildCount = this.element.childNodes.length; - this._iterationChildElementCount = this.element.childElementCount; - - this.element.innerHTML = ""; this._refreshSelectionTracking(); } }, @@ -584,11 +585,36 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul this._selectedIndexes = value; + if (this._isComponentExpanded) { this.needsDraw = true; } } }, + + + // parse array with same length as objects but contains true / false(falsy) + // only applicable if contentController is used with the Repetition + selections: { + get: function() { + if(this.contentController) { + return this.contentController.selections; + } + return null; + }, + set: function(v) { + if(this.contentController) { + this.contentController.selections = v; + } + }, + modify: function(v) { + if(this.contentController) { + this.contentController.selections = this.selections; + } + } + }, + + /** Description TODO @private @@ -889,11 +915,21 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul activatableElementCount, iterationElement; + if (this._removeOriginalContent) { + this._removeOriginalContent = false; + repetitionElement.innerHTML = ""; + // even if there were items to remove we don't need to do that anymore. + if (this._skipCurrentDraw) { + this._skipCurrentDraw = false; + return; + } + } + // Before we remove any nodes, make sure we "deselect" them //but only for single element iterations if (1 === this._iterationChildElementCount) { - iterationElements = this.element.children; + iterationElements = repetitionElement.children; if (this._activeIndexesToClearOnDraw && this._activeIndexesToClearOnDraw.length > 0) { @@ -929,6 +965,7 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul } + // Remove items pending removal if (this._itemsToRemove.length && this._itemsToRemove.length > 0) { rangeToRemove = document.createRange(); @@ -939,7 +976,6 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul rangeToRemove.setEnd(repetitionElement, iItem.end); rangeToRemove.extractContents(); - //TODO do we need to do anything with the bindings that are attached? } this._itemsToRemove = []; } @@ -962,8 +998,8 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul //now that the item has been appended, we add it to our items array this._items.push(iItem); // Tell childComponents that are associated with this new item - componentStartIndex = (itemCount + i) * this._childComponentsCount; - componentEndIndex = componentStartIndex + this._childComponentsCount; + componentStartIndex = (itemCount + i) * this._iterationChildComponentsCount; + componentEndIndex = componentStartIndex + this._iterationChildComponentsCount; } repetitionElement.appendChild(addFragment); @@ -978,7 +1014,7 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul // basically we have a couple of ways to attack this; leaving it like this for now prior to optimization if (null !== this.selectedIndexes && this.selectedIndexes.length > 0 && 1 === this._iterationChildElementCount) { - iterationElements = this.element.children; + iterationElements = repetitionElement.children; selectionCount = this.selectedIndexes.length; selectableElementCount = Math.min(selectionCount, iterationElements.length); @@ -1058,7 +1094,29 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul usefulBindingDescriptor.boundObjectPropertyPath = modifiedBoundObjectPropertyPath; usefulType = type.replace(/objectAtCurrentIteration/, 'objects.' + currentIndex); - } else { + } else { + return null; + } + } else if(bindingDescriptor && bindingDescriptor.boundObjectPropertyPath.match(/selectionAtCurrentIteration/)) { + if (this._currentItem) { + currentIndex = this._items.length + this._nextDeserializedItemIx - 1; + usefulBindingDescriptor = {}; + var descriptorKeys = Object.keys(bindingDescriptor); + var descriptorKeyCount = descriptorKeys.length; + var iDescriptorKey; + for (var i = 0; i < descriptorKeyCount; i++) { + iDescriptorKey = descriptorKeys[i]; + usefulBindingDescriptor[iDescriptorKey] = bindingDescriptor[iDescriptorKey]; + } + + //TODO not as simple as replacing this, there may be more to the path maybe? (needs testing) + + var modifiedBoundObjectPropertyPath = bindingDescriptor.boundObjectPropertyPath.replace(/selectionAtCurrentIteration/, 'selections.' + currentIndex); + usefulBindingDescriptor.boundObjectPropertyPath = modifiedBoundObjectPropertyPath; + + usefulType = type.replace(/selectionAtCurrentIteration/, 'selections.' + currentIndex); + + } else { return null; } } @@ -1085,31 +1143,14 @@ var Repetition = exports.Repetition = Montage.create(Component, /** @lends modul @param {Property} deserializer TODO */ deserializeIteration: {value: function(deserializer) { - var item = this._itemsToAppend[this._nextDeserializedItemIx++], - newChildComponents = deserializer.get("childComponents"); + var item = this._itemsToAppend[this._nextDeserializedItemIx++]; this._deserializedItem = item; item.element = deserializer.get("element"); this.eventManager.registerEventHandlerForElement(this, item.element); if (logger.debug) { - logger.debug(this._montage_metadata.objectName + ":deserializeIteration", "childNodes: " + item.range); + logger.debug(this._montage_metadata.objectName + ":deserializeIteration", "childNodes: " , item.element); } - }}, - - /** - Remove all bindings and starts buffering the needsDraw. - @function - @param {Property} rootComponent The root component of the tree do cleanup. - */ - cleanupDeletedComponentTree: {value: function(rootComponent) { - rootComponent.needsDraw = false; - rootComponent.traverseComponentTree(function(component) { - Object.deleteBindings(component); - component.canDrawGate.setField("componentTreeLoaded", false); - component.blockDrawGate.setField("element", false); - component.blockDrawGate.setField("drawRequested", false); - component.needsDraw = false; - }); }} }); -- cgit v1.2.3