diff options
author | Armen Kesablyan | 2012-05-17 14:01:38 -0700 |
---|---|---|
committer | Armen Kesablyan | 2012-05-17 14:01:38 -0700 |
commit | 6c8f3525b839e82cf43df43700a0160ee2c5458f (patch) | |
tree | 3fb801fa54b759c5568d75bb467e02652ce77c3e /node_modules/montage/ui/component.js | |
parent | e8ae5db7ce7023b638375cbc27a3f7b7a2f77b23 (diff) | |
parent | 342c97ac9b727b22a7b0bfefca4d2a168bc3055b (diff) | |
download | ninja-6c8f3525b839e82cf43df43700a0160ee2c5458f.tar.gz |
Merge branch 'refs/heads/dom-architecture' into binding
Conflicts:
css/ninja.css
scss/imports/scss/_toolbar.scss
Signed-off-by: Armen Kesablyan <armen@motorola.com>
Diffstat (limited to 'node_modules/montage/ui/component.js')
-rwxr-xr-x | node_modules/montage/ui/component.js | 163 |
1 files changed, 108 insertions, 55 deletions
diff --git a/node_modules/montage/ui/component.js b/node_modules/montage/ui/component.js index 9d963ada..8a8f5739 100755 --- a/node_modules/montage/ui/component.js +++ b/node_modules/montage/ui/component.js | |||
@@ -270,7 +270,7 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
270 | aParentNode, | 270 | aParentNode, |
271 | eventManager = this.eventManager; | 271 | eventManager = this.eventManager; |
272 | if (anElement) { | 272 | if (anElement) { |
273 | while ((aParentNode = anElement.parentNode) !== null && eventManager.eventHandlerForElement(aParentNode) == null) { | 273 | while ((aParentNode = anElement.parentNode) != null && eventManager.eventHandlerForElement(aParentNode) == null) { |
274 | anElement = aParentNode; | 274 | anElement = aParentNode; |
275 | } | 275 | } |
276 | return aParentNode ? eventManager.eventHandlerForElement(aParentNode) : this._alternateParentComponent; | 276 | return aParentNode ? eventManager.eventHandlerForElement(aParentNode) : this._alternateParentComponent; |
@@ -539,6 +539,7 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
539 | */ | 539 | */ |
540 | cleanupDeletedComponentTree: { | 540 | cleanupDeletedComponentTree: { |
541 | value: function() { | 541 | value: function() { |
542 | Object.deleteBindings(this); | ||
542 | this.needsDraw = false; | 543 | this.needsDraw = false; |
543 | this.traverseComponentTree(function(component) { | 544 | this.traverseComponentTree(function(component) { |
544 | Object.deleteBindings(component); | 545 | Object.deleteBindings(component); |
@@ -551,12 +552,12 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
551 | value: null | 552 | value: null |
552 | }, | 553 | }, |
553 | 554 | ||
554 | _newContent: { | 555 | _newDomContent: { |
555 | enumerable: false, | 556 | enumerable: false, |
556 | value: null | 557 | value: null |
557 | }, | 558 | }, |
558 | 559 | ||
559 | content: { | 560 | domContent: { |
560 | get: function() { | 561 | get: function() { |
561 | if (this._element) { | 562 | if (this._element) { |
562 | return Array.prototype.slice.call(this._element.childNodes, 0); | 563 | return Array.prototype.slice.call(this._element.childNodes, 0); |
@@ -565,12 +566,16 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
565 | } | 566 | } |
566 | }, | 567 | }, |
567 | set: function(value) { | 568 | set: function(value) { |
568 | var components = [], | 569 | var components, |
569 | childNodes; | 570 | componentsToAdd = []; |
570 | 571 | ||
571 | this._newContent = value; | 572 | this._newDomContent = value; |
572 | this.needsDraw = true; | 573 | this.needsDraw = true; |
573 | 574 | ||
575 | if (this._newDomContent === null) { | ||
576 | this._shouldClearDomContentOnNextDraw = true; | ||
577 | } | ||
578 | |||
574 | if (typeof this.contentWillChange === "function") { | 579 | if (typeof this.contentWillChange === "function") { |
575 | this.contentWillChange(value); | 580 | this.contentWillChange(value); |
576 | } | 581 | } |
@@ -584,7 +589,7 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
584 | 589 | ||
585 | if (value instanceof Element) { | 590 | if (value instanceof Element) { |
586 | findAndDetachComponents(value); | 591 | findAndDetachComponents(value); |
587 | } else { | 592 | } else if (value) { |
588 | for (var i = 0; i < value.length; i++) { | 593 | for (var i = 0; i < value.length; i++) { |
589 | findAndDetachComponents(value[i]); | 594 | findAndDetachComponents(value[i]); |
590 | } | 595 | } |
@@ -596,7 +601,7 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
596 | 601 | ||
597 | if (component) { | 602 | if (component) { |
598 | component.detachFromParentComponent(); | 603 | component.detachFromParentComponent(); |
599 | components.push(component); | 604 | componentsToAdd.push(component); |
600 | } else { | 605 | } else { |
601 | var childNodes = node.childNodes; | 606 | var childNodes = node.childNodes; |
602 | for (var i = 0, childNode; (childNode = childNodes[i]); i++) { | 607 | for (var i = 0, childNode; (childNode = childNodes[i]); i++) { |
@@ -606,12 +611,16 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
606 | } | 611 | } |
607 | 612 | ||
608 | // not sure if I can rely on _cachedParentComponent to detach the nodes instead of doing one loop for dettach and another to attach... | 613 | // not sure if I can rely on _cachedParentComponent to detach the nodes instead of doing one loop for dettach and another to attach... |
609 | for (var i = 0, component; (component = components[i]); i++) { | 614 | for (var i = 0, component; (component = componentsToAdd[i]); i++) { |
610 | this._addChildComponent(component); | 615 | this._addChildComponent(component); |
611 | } | 616 | } |
612 | } | 617 | } |
613 | }, | 618 | }, |
614 | 619 | ||
620 | _shouldClearDomContentOnNextDraw: { | ||
621 | value: false | ||
622 | }, | ||
623 | |||
615 | /** | 624 | /** |
616 | Description TODO | 625 | Description TODO |
617 | @function | 626 | @function |
@@ -988,7 +997,7 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
988 | enumerable: false, | 997 | enumerable: false, |
989 | value: function _drawIfNeeded(level) { | 998 | value: function _drawIfNeeded(level) { |
990 | var childComponent, | 999 | var childComponent, |
991 | oldDrawList; | 1000 | oldDrawList, i, childComponentListLength; |
992 | this._treeLevel = level; | 1001 | this._treeLevel = level; |
993 | if (this.needsDraw && !this._addedToDrawCycle) { | 1002 | if (this.needsDraw && !this._addedToDrawCycle) { |
994 | rootComponent.addToDrawCycle(this); | 1003 | rootComponent.addToDrawCycle(this); |
@@ -999,7 +1008,9 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
999 | if (this._drawList !== null && this._drawList.length > 0) { | 1008 | if (this._drawList !== null && this._drawList.length > 0) { |
1000 | oldDrawList = this._drawList; | 1009 | oldDrawList = this._drawList; |
1001 | this._drawList = []; | 1010 | this._drawList = []; |
1002 | while ((childComponent = oldDrawList.shift())) { | 1011 | childComponentListLength = oldDrawList.length; |
1012 | for (i = 0; i < childComponentListLength; i++) { | ||
1013 | childComponent = oldDrawList[i]; | ||
1003 | if (drawLogger.isDebug) { | 1014 | if (drawLogger.isDebug) { |
1004 | drawLogger.debug("Parent Component " + (this.element != null ? this.element.id : "") + " drawList length: " + oldDrawList.length); | 1015 | drawLogger.debug("Parent Component " + (this.element != null ? this.element.id : "") + " drawList length: " + oldDrawList.length); |
1005 | } | 1016 | } |
@@ -1014,6 +1025,44 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
1014 | } | 1025 | } |
1015 | } | 1026 | } |
1016 | }, | 1027 | }, |
1028 | |||
1029 | _updateComponentDom: { | ||
1030 | value: function() { | ||
1031 | var component, composer, length, i; | ||
1032 | if (this._firstDraw) { | ||
1033 | |||
1034 | if (this.parentComponent && typeof this.parentComponent.childComponentWillPrepareForDraw === "function") { | ||
1035 | this.parentComponent.childComponentWillPrepareForDraw(this); | ||
1036 | } | ||
1037 | |||
1038 | this._prepareForDraw(); | ||
1039 | |||
1040 | if (this.prepareForDraw) { | ||
1041 | this.prepareForDraw(); | ||
1042 | } | ||
1043 | |||
1044 | // Load any non lazyLoad composers that have been added | ||
1045 | length = this.composerList.length; | ||
1046 | for (i = 0; i < length; i++) { | ||
1047 | composer = this.composerList[i]; | ||
1048 | if (!composer.lazyLoad) { | ||
1049 | composer._load(); | ||
1050 | } | ||
1051 | } | ||
1052 | |||
1053 | // Will we expose a different property, firstDraw, for components to check | ||
1054 | this._firstDraw = false; | ||
1055 | } | ||
1056 | |||
1057 | if (this._newDomContent !== null || this._shouldClearDomContentOnNextDraw) { | ||
1058 | if (drawLogger.isDebug) { | ||
1059 | logger.debug("Component content changed: component ", this._montage_metadata.objectName, this.identifier, " newDomContent", this._newDomContent); | ||
1060 | } | ||
1061 | this._performDomContentChanges(); | ||
1062 | } | ||
1063 | } | ||
1064 | }, | ||
1065 | |||
1017 | /** | 1066 | /** |
1018 | Description TODO | 1067 | Description TODO |
1019 | @private | 1068 | @private |
@@ -1042,7 +1091,11 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
1042 | template.setAttribute(attributeName, value); | 1091 | template.setAttribute(attributeName, value); |
1043 | } | 1092 | } |
1044 | 1093 | ||
1045 | element.parentNode.replaceChild(template, element); | 1094 | if (element.parentNode) { |
1095 | element.parentNode.replaceChild(template, element); | ||
1096 | } else { | ||
1097 | console.warn("Warning: Trying to replace element ", element," which has no parentNode"); | ||
1098 | } | ||
1046 | 1099 | ||
1047 | this.eventManager.unregisterEventHandlerForElement(element); | 1100 | this.eventManager.unregisterEventHandlerForElement(element); |
1048 | this.eventManager.registerEventHandlerForElement(this, template); | 1101 | this.eventManager.registerEventHandlerForElement(this, template); |
@@ -1108,31 +1161,30 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
1108 | Description TODO | 1161 | Description TODO |
1109 | @private | 1162 | @private |
1110 | */ | 1163 | */ |
1111 | _draw: { | 1164 | _performDomContentChanges: { |
1112 | value: function() { | 1165 | value: function() { |
1113 | var contents = this._newContent, | 1166 | var contents = this._newDomContent, |
1167 | oldContent = this._element.childNodes[0], | ||
1114 | element; | 1168 | element; |
1115 | 1169 | ||
1116 | this._canDrawTable = {}; | 1170 | if (contents || this._shouldClearDomContentOnNextDraw) { |
1117 | this._canDrawCount = 0; | ||
1118 | |||
1119 | if (contents) { | ||
1120 | element = this._element; | 1171 | element = this._element; |