2019-02-13 22:26:57 -05:00
|
|
|
var on = require("./events/on");
|
2014-10-14 11:42:36 +02:00
|
|
|
|
2014-10-14 08:19:44 +02:00
|
|
|
module.exports = {
|
2014-10-14 11:42:36 +02:00
|
|
|
outerHTML: function(oldEl, newEl) {
|
2019-02-13 22:26:57 -05:00
|
|
|
oldEl.outerHTML = newEl.outerHTML;
|
|
|
|
|
this.onSwitch();
|
2014-10-14 08:19:44 +02:00
|
|
|
},
|
|
|
|
|
|
2014-10-14 11:42:36 +02:00
|
|
|
innerHTML: function(oldEl, newEl) {
|
2019-02-13 22:26:57 -05:00
|
|
|
oldEl.innerHTML = newEl.innerHTML;
|
2018-04-09 23:36:32 -04:00
|
|
|
|
|
|
|
|
if (newEl.className === "") {
|
2019-02-13 22:26:57 -05:00
|
|
|
oldEl.removeAttribute("class");
|
|
|
|
|
} else {
|
|
|
|
|
oldEl.className = newEl.className;
|
2018-04-09 23:36:32 -04:00
|
|
|
}
|
|
|
|
|
|
2019-02-13 22:26:57 -05:00
|
|
|
this.onSwitch();
|
2014-10-14 08:19:44 +02:00
|
|
|
},
|
|
|
|
|
|
2017-12-19 15:56:48 -05:00
|
|
|
switchElementsAlt: function(oldEl, newEl) {
|
2019-02-13 22:26:57 -05:00
|
|
|
oldEl.innerHTML = newEl.innerHTML;
|
2017-12-19 15:56:48 -05:00
|
|
|
|
|
|
|
|
// Copy attributes from the new element to the old one
|
|
|
|
|
if (newEl.hasAttributes()) {
|
2019-02-13 22:26:57 -05:00
|
|
|
var attrs = newEl.attributes;
|
2017-12-19 15:56:48 -05:00
|
|
|
for (var i = 0; i < attrs.length; i++) {
|
2019-02-13 22:26:57 -05:00
|
|
|
oldEl.attributes.setNamedItem(attrs[i].cloneNode());
|
2017-12-19 15:56:48 -05:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2019-02-13 22:26:57 -05:00
|
|
|
this.onSwitch();
|
2017-12-19 15:56:48 -05:00
|
|
|
},
|
|
|
|
|
|
2018-03-20 10:52:55 -04:00
|
|
|
// Equivalent to outerHTML(), but doesn't require switchElementsAlt() for <head> and <body>
|
|
|
|
|
replaceNode: function(oldEl, newEl) {
|
2019-02-13 22:26:57 -05:00
|
|
|
oldEl.parentNode.replaceChild(newEl, oldEl);
|
|
|
|
|
this.onSwitch();
|
2018-03-20 10:52:55 -04:00
|
|
|
},
|
|
|
|
|
|
2014-10-14 08:19:44 +02:00
|
|
|
sideBySide: function(oldEl, newEl, options, switchOptions) {
|
2019-02-13 22:26:57 -05:00
|
|
|
var forEach = Array.prototype.forEach;
|
|
|
|
|
var elsToRemove = [];
|
|
|
|
|
var elsToAdd = [];
|
|
|
|
|
var fragToAppend = document.createDocumentFragment();
|
|
|
|
|
var animationEventNames =
|
|
|
|
|
"animationend webkitAnimationEnd MSAnimationEnd oanimationend";
|
|
|
|
|
var animatedElsNumber = 0;
|
2014-10-14 08:19:44 +02:00
|
|
|
var sexyAnimationEnd = function(e) {
|
2019-02-13 22:26:57 -05:00
|
|
|
if (e.target !== e.currentTarget) {
|
|
|
|
|
// end triggered by an animation on a child
|
|
|
|
|
return;
|
|
|
|
|
}
|
2014-10-14 08:19:44 +02:00
|
|
|
|
2019-02-13 22:26:57 -05:00
|
|
|
animatedElsNumber--;
|
|
|
|
|
if (animatedElsNumber <= 0 && elsToRemove) {
|
|
|
|
|
elsToRemove.forEach(function(el) {
|
|
|
|
|
// browsing quickly can make the el
|
|
|
|
|
// already removed by last page update ?
|
|
|
|
|
if (el.parentNode) {
|
|
|
|
|
el.parentNode.removeChild(el);
|
2014-10-14 08:19:44 +02:00
|
|
|
}
|
2019-02-13 22:26:57 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
elsToAdd.forEach(function(el) {
|
|
|
|
|
el.className = el.className.replace(
|
|
|
|
|
el.getAttribute("data-pjax-classes"),
|
|
|
|
|
""
|
|
|
|
|
);
|
|
|
|
|
el.removeAttribute("data-pjax-classes");
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
elsToAdd = null; // free memory
|
|
|
|
|
elsToRemove = null; // free memory
|
|
|
|
|
|
|
|
|
|
// this is to trigger some repaint (example: picturefill)
|
|
|
|
|
this.onSwitch();
|
|
|
|
|
}
|
|
|
|
|
}.bind(this);
|
2014-10-14 08:19:44 +02:00
|
|
|
|
2019-02-13 22:26:57 -05:00
|
|
|
switchOptions = switchOptions || {};
|
2014-10-14 08:19:44 +02:00
|
|
|
|
|
|
|
|
forEach.call(oldEl.childNodes, function(el) {
|
2019-02-13 22:26:57 -05:00
|
|
|
elsToRemove.push(el);
|
2014-10-14 08:19:44 +02:00
|
|
|
if (el.classList && !el.classList.contains("js-Pjax-remove")) {
|
|
|
|
|
// for fast switch, clean element that just have been added, & not cleaned yet.
|
|
|
|
|
if (el.hasAttribute("data-pjax-classes")) {
|
2019-02-13 22:26:57 -05:00
|
|
|
el.className = el.className.replace(
|
|
|
|
|
el.getAttribute("data-pjax-classes"),
|
|
|
|
|
""
|
|
|
|
|
);
|
|
|
|
|
el.removeAttribute("data-pjax-classes");
|
2014-10-14 08:19:44 +02:00
|
|
|
}
|
2019-02-13 22:26:57 -05:00
|
|
|
el.classList.add("js-Pjax-remove");
|
2014-10-14 08:19:44 +02:00
|
|
|
if (switchOptions.callbacks && switchOptions.callbacks.removeElement) {
|
2019-02-13 22:26:57 -05:00
|
|
|
switchOptions.callbacks.removeElement(el);
|
2014-10-14 08:19:44 +02:00
|
|
|
}
|
|
|
|
|
if (switchOptions.classNames) {
|
2019-02-13 22:26:57 -05:00
|
|
|
el.className +=
|
|
|
|
|
" " +
|
|
|
|
|
switchOptions.classNames.remove +
|
|
|
|
|
" " +
|
|
|
|
|
(options.backward
|
|
|
|
|
? switchOptions.classNames.backward
|
|
|
|
|
: switchOptions.classNames.forward);
|
2014-10-14 08:19:44 +02:00
|
|
|
}
|
2019-02-13 22:26:57 -05:00
|
|
|
animatedElsNumber++;
|
|
|
|
|
on(el, animationEventNames, sexyAnimationEnd, true);
|
2014-10-14 08:19:44 +02:00
|
|
|
}
|
2019-02-13 22:26:57 -05:00
|
|
|
});
|
2014-10-14 08:19:44 +02:00
|
|
|
|
|
|
|
|
forEach.call(newEl.childNodes, function(el) {
|
|
|
|
|
if (el.classList) {
|
2019-02-13 22:26:57 -05:00
|
|
|
var addClasses = "";
|
2014-10-14 08:19:44 +02:00
|
|
|
if (switchOptions.classNames) {
|
2019-02-13 22:26:57 -05:00
|
|
|
addClasses =
|
|
|
|
|
" js-Pjax-add " +
|
|
|
|
|
switchOptions.classNames.add +
|
|
|
|
|
" " +
|
|
|
|
|
(options.backward
|
|
|
|
|
? switchOptions.classNames.forward
|
|
|
|
|
: switchOptions.classNames.backward);
|
2014-10-14 08:19:44 +02:00
|
|
|
}
|
|
|
|
|
if (switchOptions.callbacks && switchOptions.callbacks.addElement) {
|
2019-02-13 22:26:57 -05:00
|
|
|
switchOptions.callbacks.addElement(el);
|
2014-10-14 08:19:44 +02:00
|
|
|
}
|
2019-02-13 22:26:57 -05:00
|
|
|
el.className += addClasses;
|
|
|
|
|
el.setAttribute("data-pjax-classes", addClasses);
|
|
|
|
|
elsToAdd.push(el);
|
|
|
|
|
fragToAppend.appendChild(el);
|
|
|
|
|
animatedElsNumber++;
|
|
|
|
|
on(el, animationEventNames, sexyAnimationEnd, true);
|
2014-10-14 08:19:44 +02:00
|
|
|
}
|
2019-02-13 22:26:57 -05:00
|
|
|
});
|
2014-10-14 08:19:44 +02:00
|
|
|
|
|
|
|
|
// pass all className of the parent
|
2019-02-13 22:26:57 -05:00
|
|
|
oldEl.className = newEl.className;
|
|
|
|
|
oldEl.appendChild(fragToAppend);
|
2014-10-14 08:19:44 +02:00
|
|
|
}
|
2019-02-13 22:26:57 -05:00
|
|
|
};
|
