diff options
Diffstat (limited to 'node_modules/montage/ui/component.js')
-rwxr-xr-x | node_modules/montage/ui/component.js | 292 |
1 files changed, 278 insertions, 14 deletions
diff --git a/node_modules/montage/ui/component.js b/node_modules/montage/ui/component.js index 30d59c22..90612f83 100755 --- a/node_modules/montage/ui/component.js +++ b/node_modules/montage/ui/component.js | |||
@@ -395,9 +395,12 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
395 | @function | 395 | @function |
396 | @param {Component} childComponent The childComponent | 396 | @param {Component} childComponent The childComponent |
397 | */ | 397 | */ |
398 | addChildComponent: { | 398 | _addChildComponent: { |
399 | value: function(childComponent) { | 399 | value: function(childComponent) { |
400 | this.childComponents.push(childComponent); | 400 | if (this.childComponents.indexOf(childComponent) == -1) { |
401 | this.childComponents.push(childComponent); | ||
402 | childComponent._cachedParentComponent = this; | ||
403 | } | ||
401 | } | 404 | } |
402 | }, | 405 | }, |
403 | /** | 406 | /** |
@@ -406,9 +409,22 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
406 | */ | 409 | */ |
407 | attachToParentComponent: { | 410 | attachToParentComponent: { |
408 | value: function() { | 411 | value: function() { |
412 | this._cachedParentComponent = null; | ||
413 | |||
414 | var parentComponent = this.parentComponent; | ||
415 | |||
416 | if (parentComponent) { | ||
417 | parentComponent._addChildComponent(this); | ||
418 | } | ||
419 | } | ||
420 | }, | ||
421 | |||
422 | detachFromParentComponent: { | ||
423 | value: function() { | ||
409 | var parentComponent = this.parentComponent; | 424 | var parentComponent = this.parentComponent; |
425 | |||
410 | if (parentComponent) { | 426 | if (parentComponent) { |
411 | parentComponent.addChildComponent(this); | 427 | parentComponent.removeChildComponent(this); |
412 | } | 428 | } |
413 | } | 429 | } |
414 | }, | 430 | }, |
@@ -425,6 +441,7 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
425 | 441 | ||
426 | if (ix > -1) { | 442 | if (ix > -1) { |
427 | childComponents.splice(ix, 1); | 443 | childComponents.splice(ix, 1); |
444 | childComponent._cachedParentComponent = null; | ||
428 | } | 445 | } |
429 | 446 | ||
430 | if (element && element.parentNode) { | 447 | if (element && element.parentNode) { |
@@ -479,6 +496,85 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
479 | enumerable: false, | 496 | enumerable: false, |
480 | value: null | 497 | value: null |
481 | }, | 498 | }, |
499 | |||
500 | /** | ||
501 | * Remove all bindings and starts buffering the needsDraw. | ||
502 | * @function | ||
503 | */ | ||
504 | cleanupDeletedComponentTree: { | ||
505 | value: function() { | ||
506 | this.needsDraw = false; | ||
507 | this.traverseComponentTree(function(component) { | ||
508 | Object.deleteBindings(component); | ||
509 | component.canDrawGate.setField("componentTreeLoaded", false); | ||
510 | component.blockDrawGate.setField("element", false); | ||
511 | component.blockDrawGate.setField("drawRequested", false); | ||
512 | component.needsDraw = false; | ||
513 | }); | ||
514 | } | ||
515 | }, | ||
516 | |||
517 | originalContent: { | ||
518 | value: null | ||
519 | }, | ||
520 | |||
521 | _newContent: { | ||
522 | enumerable: false, | ||
523 | value: null | ||
524 | }, | ||
525 | |||
526 | content: { | ||
527 | get: function() { | ||
528 | return Array.prototype.slice.call(this._element.childNodes, 0); | ||
529 | }, | ||
530 | set: function(value) { | ||
531 | var components = [], | ||
532 | childNodes; | ||
533 | |||
534 | this._newContent = value; | ||
535 | this.needsDraw = true; | ||
536 | |||
537 | if (typeof this.contentWillChange === "function") { | ||
538 | this.contentWillChange(value); | ||
539 | } | ||
540 | |||
541 | // cleanup current content | ||
542 | components = this.childComponents; | ||
543 | for (var i = 0, component; (component = components[i]); i++) { | ||
544 | component.detachFromParentComponent(); | ||
545 | component.cleanupDeletedComponentTree(); | ||
546 | } | ||
547 | |||
548 | if (value instanceof Element) { | ||
549 | findAndDetachComponents(value); | ||
550 | } else { | ||
551 | for (var i = 0; i < value.length; i++) { | ||
552 | findAndDetachComponents(value[i]); | ||
553 | } | ||
554 | } | ||
555 | |||
556 | // find the component fringe and detach them from the component tree | ||
557 | function findAndDetachComponents(node) { | ||
558 | var component = node.controller; | ||
559 | |||
560 | if (component) { | ||
561 | component.detachFromParentComponent(); | ||
562 | components.push(component); | ||
563 | } else { | ||
564 | var childNodes = node.childNodes; | ||
565 | for (var i = 0, childNode; (childNode = childNodes[i]); i++) { | ||
566 | findAndDetachComponents(childNode); | ||
567 | } | ||
568 | } | ||
569 | } | ||
570 | |||
571 | // not sure if I can rely on _cachedParentComponent to detach the nodes instead of doing one loop for dettach and another to attach... | ||
572 | for (var i = 0, component; (component = components[i]); i++) { | ||
573 | this._addChildComponent(component); | ||
574 | } | ||
575 | } | ||
576 | }, | ||
577 | |||
482 | /** | 578 | /** |
483 | Description TODO | 579 | Description TODO |
484 | @function | 580 | @function |
@@ -486,6 +582,9 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
486 | deserializedFromSerialization: { | 582 | deserializedFromSerialization: { |
487 | value: function() { | 583 | value: function() { |
488 | this.attachToParentComponent(); | 584 | this.attachToParentComponent(); |
585 | if (this._element) { | ||
586 | this.originalContent = Array.prototype.slice.call(this._element.childNodes, 0); | ||
587 | } | ||
489 | } | 588 | } |
490 | }, | 589 | }, |
491 | 590 | ||
@@ -892,11 +991,13 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
892 | // TODO: get a spec for this, what attributes should we merge? | 991 | // TODO: get a spec for this, what attributes should we merge? |
893 | for (i = 0; (attribute = attributes[i]); i++) { | 992 | for (i = 0; (attribute = attributes[i]); i++) { |
894 | attributeName = attribute.nodeName; | 993 | attributeName = attribute.nodeName; |
895 | if (attributeName === "id") { | 994 | if (attributeName === "id" || attributeName === "data-montage-id") { |
896 | continue; | 995 | continue; |
996 | } else { | ||
997 | value = (template.getAttribute(attributeName) || "") + " " + | ||
998 | attribute.nodeValue; | ||
897 | } | 999 | } |
898 | value = (template.getAttribute(attributeName) || "") + " " + | 1000 | |
899 | attribute.nodeValue; | ||
900 | template.setAttribute(attributeName, value); | 1001 | template.setAttribute(attributeName, value); |
901 | } | 1002 | } |
902 | 1003 | ||
@@ -921,7 +1022,10 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
921 | if (this._templateElement) { | 1022 | if (this._templateElement) { |
922 | this._replaceElementWithTemplate(); | 1023 | this._replaceElementWithTemplate(); |
923 | } | 1024 | } |
924 | this._element.removeAttribute("id"); | 1025 | // TODO: removeAttribute only here for backwards compatibility |
1026 | if (!this._element.getAttribute("data-montage-id")) { | ||
1027 | this._element.removeAttribute("id"); | ||
1028 | } | ||
925 | 1029 | ||
926 | // This will schedule a second draw for any component that has children | 1030 | // This will schedule a second draw for any component that has children |
927 | var childComponents = this.childComponents; | 1031 | var childComponents = this.childComponents; |
@@ -949,8 +1053,30 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
949 | */ | 1053 | */ |
950 | _draw: { | 1054 | _draw: { |
951 | value: function() { | 1055 | value: function() { |
1056 | var contents = this._newContent, | ||
1057 | element; | ||
1058 | |||
952 | this._canDrawTable = {}; | 1059 | this._canDrawTable = {}; |
953 | this._canDrawCount = 0; | 1060 | this._canDrawCount = 0; |
1061 | |||
1062 | if (contents) { | ||
1063 | element = this._element; | ||
1064 | |||
1065 | element.innerHTML = ""; | ||
1066 | |||
1067 | if (contents instanceof Element) { | ||
1068 | element.appendChild(contents); | ||
1069 | } else { | ||
1070 | for (var i = 0, content; (content = contents[i]); i++) { | ||
1071 | element.appendChild(content); | ||
1072 | } | ||
1073 | } | ||
1074 | |||
1075 | this._newContent = null; | ||
1076 | if (typeof this.contentDidChange === "function") { | ||
1077 | this.contentDidChange(); | ||
1078 | } | ||
1079 | } | ||
954 | } | 1080 | } |
955 | }, | 1081 | }, |
956 | /** | 1082 | /** |
@@ -1134,10 +1260,101 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon | |||
1134 | value: function(pointer, demandingComponent) { | 1260 | value: function(pointer, demandingComponent) { |
1135 | return true; | 1261 | return true; |
1136 | } | 1262 |