Skip to content

Bunch of fixes with the substitution #1766

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thibaultzanini wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Bunch of fixes with the substitution #1766

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0793521
Fix old code related to afc0f7ca13cda35e6bc77cb6997a702e54bc64ca
thibaultzanini Sep 10, 2016
cf094c1
Fix an issue within the substitution that could occurs when the switc…
thibaultzanini Sep 10, 2016
bf7206c
Add quick workaround for bad result from the method extractDomArgument.
thibaultzanini Sep 10, 2016
3c283f8
Fix an issue that could block a component to exit the DOM within the …
thibaultzanini Sep 10, 2016
351d8ed
Little optimisation.
thibaultzanini Sep 10, 2016
9eddecc
Fix an issue when the value of the property domContent changes before…
thibaultzanini Sep 10, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 33 additions & 21 deletions ui/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1350,57 +1350,61 @@ var Component = exports.Component = Target.specialize(/** @lends Component.proto
get: function () {
if (this._element) {
return Array.prototype.slice.call(this._element.childNodes, 0);
} else {
return null;
}

return null;
},
set: function (value) {
var components,
var components = this.childComponents,
componentsToAdd = [],
i,
component;
component,
i;

if (!this._elementsToAppend) {
this._elementsToAppend = [];
} else if (this._elementsToAppend.length) {
this._elementsToAppend.clear();
}

if (!this._componentsPendingBuildOut) {
this._componentsPendingBuildOut = [];
} else if (this._componentsPendingBuildOut.length) {
this._componentsPendingBuildOut.clear();
}

this._newDomContent = value;
this.needsDraw = true;

if (this._newDomContent === null) {
this._shouldClearDomContentOnNextDraw = true;
}

//@benoit this method should be probably before we really change the content.
if (typeof this.contentWillChange === "function") {
this.contentWillChange(value);
}

// cleanup current content
components = this.childComponents;
if (value) {
if (!this._componentsPendingBuildOut) {
this._componentsPendingBuildOut = [];
}
for (i = components.length - 1; i >= 0; i--) {
if (this._componentsPendingBuildOut.indexOf(components[i]) === -1) {
this._componentsPendingBuildOut.push(components[i]);
}
this._componentsPendingBuildOut.push(components[i]);
}
} else {
this._componentsPendingBuildOut = [];
for (i = components.length - 1; i >= 0; i--) {
components[i]._shouldBuildOut = true;
}
}

if (value instanceof Element) {
this._elementsToAppend.push(value);
this._findAndDetachComponents(value, componentsToAdd);

} else if (value && value[0]) {
for (i = 0; i < value.length; i++) {
this._elementsToAppend.push(value[i]);
this._findAndDetachComponents(value[i], componentsToAdd);
}
}

// not sure if I can rely on _parentComponent to detach the nodes instead of doing one loop for dettach and another to attach...
for (i = 0; (component = componentsToAdd[i]); i++) {
this.addChildComponent(component);
Expand Down Expand Up @@ -2076,6 +2080,8 @@ var Component = exports.Component = Target.specialize(/** @lends Component.proto
}
}
this._disposeArray(oldDrawList);
} else if (this._componentsPendingBuildOut) {
this._releaseChildComponentsPendingBuildOut();
}
}
},
Expand Down Expand Up @@ -3125,17 +3131,18 @@ var Component = exports.Component = Target.specialize(/** @lends Component.proto

_buildOut: {
value: function () {
var self = this;

if (this._currentBuildAnimation) {
this._currentBuildAnimation.cancel();
this._currentBuildAnimation = this.buildOutSwitchAnimation;
} else {
this._updateActiveBuildAnimations();
this._currentBuildAnimation = this.buildOutInitialAnimation;
}
if (this._element && this._element.parentNode && this._element.parentNode.component) {

if ((this.parentComponent) || (this._element && this._element.parentNode && this._element.parentNode.component)) {
if (this._currentBuildAnimation) {
var self = this;

this._currentBuildAnimation.play();
this._currentBuildAnimation.finished.then(function () {
var parent = self.parentComponent;
Expand All @@ -3144,16 +3151,21 @@ var Component = exports.Component = Target.specialize(/** @lends Component.proto
self.detachFromParentComponent();
self.buildInAnimationOverride = null;
self.buildOutAnimationOverride = null;

if (self._element.parentNode.component) {
self._element.parentNode.removeChild(self._element);
}

self._isElementAttachedToParent = false;
parent.dispatchEventNamed("buildOutEnd", true, true);
}, function () {});

}, Function.noop);

} else {
this.detachFromParentComponent();
this.buildInAnimationOverride = null;
this.buildOutAnimationOverride = null;

if (this._isElementAttachedToParent) {
if (this._element.parentNode && this._element.parentNode.component) {
this._element.parentNode.removeChild(this._element);
Expand All @@ -3178,7 +3190,7 @@ var Component = exports.Component = Target.specialize(/** @lends Component.proto
this.dispatchEvent(event);
this._inDocument = true;
if (this.parentComponent) {
this.parentComponent._childWillEnterDocument();
this.parentComponent._releaseChildComponentsPendingBuildOut();
}
if (this.__shouldBuildIn) {
this._buildIn();
Expand All @@ -3190,7 +3202,7 @@ var Component = exports.Component = Target.specialize(/** @lends Component.proto
}
},

_childWillEnterDocument: {
_releaseChildComponentsPendingBuildOut: {
value: function () {
if (this._componentsPendingBuildOut) {
while (this._componentsPendingBuildOut.length) {
Expand Down
46 changes: 28 additions & 18 deletions ui/substitution.reel/substitution.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,19 +157,20 @@ exports.Substitution = Slot.specialize( /** @lends Substitution.prototype # */ {
return this._switchValue;
},
set: function (value) {

if (this._switchValue === value || this._isSwitchingContent) {
return;
if (typeof value === "number") {
value = value.toString();
}

this._switchValue = value;

// switchElements is only ready after the first draw
// At first draw the substitution automatically draws what is in
// the switchValue so we defer any content loading until the first
// draw.
if (!this._firstDraw && !this.isDeserializing) {
this._loadContent(value);

if (this._switchValue !== value) {
this._switchValue = value;

// switchElements is only ready after the first draw
// At first draw the substitution automatically draws what is in
// the switchValue so we defer any content loading until the first
// draw.
if (!this._firstDraw && !this.isDeserializing) {
this._loadContent(value);
}
}
}
},
Expand Down Expand Up @@ -200,6 +201,16 @@ exports.Substitution = Slot.specialize( /** @lends Substitution.prototype # */ {
_loadContent: {
value: function (value) {
var typeOfValue = typeof value;

// Fixme: [workaround] we need a better logic here.
// the method extractDomArgument(name) (used in enterDocument)
// keeps a pointer to the original element and not the "new" one (_templateElement).
if (this._switchComponents[value] &&
this._switchComponents[value].element !== this._switchElements[value]) {

this._switchElements[value] = this._switchComponents[value].element;
}

this.content = this._switchElements[value] || null;

if ((typeOfValue === "string" || typeOfValue === "number") && !this._switchComponentTreeLoaded[value]) {
Expand All @@ -209,14 +220,13 @@ exports.Substitution = Slot.specialize( /** @lends Substitution.prototype # */ {
},

contentDidChange: {
value: function (newContent, oldContent) {
Slot.prototype.contentDidChange.call(this, newContent, oldContent);
value: function () {
Slot.prototype.contentDidChange.call(this);

if (this._drawnSwitchValue) {
if (this._switchComponents[this._drawnSwitchValue]) {
this._switchElements[this._drawnSwitchValue] = this._switchComponents[this._drawnSwitchValue].element;
}
if (this._drawnSwitchValue && this._switchComponents[this._drawnSwitchValue]) {
this._switchElements[this._drawnSwitchValue] = this._switchComponents[this._drawnSwitchValue].element;
}

this._drawnSwitchValue = this._switchValue;
}
},
Expand Down