Change internals of classesPersister

The assumption that the classes you want to
persist will always have parity with the elements
that have those classes, at that point, won't
always be true.

Because of that, this changes the way elements
with those classes are stored, to be in a map
between classes and the elements with them (at
that point).

Also includes an extra test for a scenario where
more than one updating component is in the page
with classes that need to persist through updates.
This commit is contained in:
Tom Byers
2022-02-16 15:56:52 +00:00
parent 41ee340b45
commit 3a86bd1685
2 changed files with 61 additions and 13 deletions

View File

@@ -19,33 +19,39 @@
// this can be removed in favour of a CSS-only solution.
var classesPersister = {
_classNames: [],
_$els: [],
_classesTo$ElsMap: {},
addClassName: function (className) {
if (this._classNames.indexOf(className) === -1) {
this._classNames.push(className);
}
},
remove: function () {
// Store references to any elements with class names to persist
this._classNames.forEach(className => {
var $elsWithClassName = $('.' + className).removeClass(className);
// store elements for that className at the same index
this._$els.push($elsWithClassName);
if ($elsWithClassName.length > 0) {
this._classesTo$ElsMap[className] = $elsWithClassName;
}
});
},
replace: function () {
this._classNames.forEach((className, index) => {
var $el = this._$els[index];
var className;
// Avoid updating elements that are no longer present.
// elements removed will still exist in memory but won't be attached to the DOM any more
if (global.document.body.contains($el.get(0))) {
$el.addClass(className);
}
});
for (className in this._classesTo$ElsMap) {
this._classesTo$ElsMap[className].each((idx, el) => {
// Avoid updating elements that are no longer present.
// elements removed will still exist in memory but won't be attached to the DOM any more
if (global.document.body.contains(el)) {
$(el).addClass(className);
}
});
}
// remove references to elements
this._$els = [];
this._classesTo$ElsMap = {};
}
};