iLoveElysia/pjax
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

Add replaceNode switch #141

Merged
BehindTheMath merged 3 commits from feature/add-replace-node-switch into master 2018-03-20 09:52:56 -05:00
Conversation 6 Commits 3 Files Changed 4 +36 -2
4 changed files with 36 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -262,6 +262,7 @@ Callbacks are bound to Pjax instance itself to allow you to reuse it (ex: `this.
- `Pjax.switches.outerHTML`: default behavior, replace elements using outerHTML - `Pjax.switches.outerHTML`: default behavior, replace elements using outerHTML
- `Pjax.switches.innerHTML`: replace elements using innerHTML and copy className too - `Pjax.switches.innerHTML`: replace elements using innerHTML and copy className too
- `Pjax.switches.replaceNode`: replace elements using replaceChild
- `Pjax.switches.sideBySide`: smart replacement that allows you to have both elements in the same parent when you want to use CSS animations. Old elements are removed when all children have been fully animated ([animationEnd](http://www.w3.org/TR/css3-animations/#animationend) event triggered) - `Pjax.switches.sideBySide`: smart replacement that allows you to have both elements in the same parent when you want to use CSS animations. Old elements are removed when all children have been fully animated ([animationEnd](http://www.w3.org/TR/css3-animations/#animationend) event triggered)
###### Create a switch callback ###### Create a switch callback

7
index.d.ts vendored
View File

@@ -1,4 +1,6 @@
declare class Pjax { declare class Pjax {
options: Pjax.IOptions;
constructor(options?: Partial<Pjax.IOptions>); constructor(options?: Partial<Pjax.IOptions>);
static switches: { static switches: {
@@ -91,7 +93,7 @@ declare class Pjax {
* } * }
* </pre> * </pre>
*/ */
[key: string]: Function; [key: string]: Function | Pjax.IOptions;
} }
declare namespace Pjax { declare namespace Pjax {
@@ -180,7 +182,8 @@ type ElementFunction = (el: Element) => void;
declare enum DefaultSwitches { declare enum DefaultSwitches {
innerHTML = "innerHTML", innerHTML = "innerHTML",
ouetrHTML = "outerHTML", ouetrHTML = "outerHTML",
sideBySide = "sideBySide" sideBySide = "sideBySide",
replaceNode = "replaceNode"
} }
export = Pjax; export = Pjax;

6
lib/switches.js
View File

@@ -26,6 +26,12 @@ module.exports = {
this.onSwitch() this.onSwitch()
}, },
// Equivalent to outerHTML(), but doesn't require switchElementsAlt() for <head> and <body>
replaceNode: function(oldEl, newEl) {
oldEl.parentNode.replaceChild(newEl, oldEl)
this.onSwitch()
},
sideBySide: function(oldEl, newEl, options, switchOptions) { sideBySide: function(oldEl, newEl, options, switchOptions) {
var forEach = Array.prototype.forEach var forEach = Array.prototype.forEach
var elsToRemove = [] var elsToRemove = []

24
tests/lib/switches.js Normal file
View File

@@ -0,0 +1,24 @@
var tape = require("tape")
var switches = require("../../lib/switches")
var noop = require("../../lib/util/noop")
tape("test replaceNode switch", function(t) {
var replaceNode = switches.replaceNode
var doc = document.implementation.createHTMLDocument()
var container = doc.createElement("div")
container.innerHTML = "<p>Original Text</p>"
doc.body.appendChild(container)
var p = doc.createElement("p")
p.innerHTML = "New Text"
replaceNode.bind({
onSwitch: noop
})(doc.querySelector("p"), p)
t.equals(doc.querySelector("div").innerHTML, "<p>New Text</p>", "Elements correctly switched")
t.end()
})