From d22262e5a7054b97779dc5f1ff92a89d8e830029 Mon Sep 17 00:00:00 2001 From: Behind The Math Date: Tue, 13 Mar 2018 23:56:58 -0400 Subject: [PATCH 1/3] Add replaceNode switch --- README.md | 1 + lib/switches.js | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/README.md b/README.md index 3070ca1..e0e0cfd 100644 --- a/README.md +++ b/README.md @@ -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.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) ###### Create a switch callback diff --git a/lib/switches.js b/lib/switches.js index 737febb..cdacc0e 100644 --- a/lib/switches.js +++ b/lib/switches.js @@ -26,6 +26,12 @@ module.exports = { this.onSwitch() }, + // Equivalent to outerHTML(), but doesn't require switchElementsAlt() for and + replaceNode: function(oldEl, newEl) { + oldEl.parentNode.replaceChild(newEl, oldEl) + this.onSwitch() + }, + sideBySide: function(oldEl, newEl, options, switchOptions) { var forEach = Array.prototype.forEach var elsToRemove = [] -- 2.49.1 From b66d1c02a98529022221233d79ffa92ac3ac7020 Mon Sep 17 00:00:00 2001 From: Behind The Math Date: Tue, 13 Mar 2018 23:57:06 -0400 Subject: [PATCH 2/3] Add test for replaceNode() --- tests/lib/switches.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 tests/lib/switches.js diff --git a/tests/lib/switches.js b/tests/lib/switches.js new file mode 100644 index 0000000..1752cb8 --- /dev/null +++ b/tests/lib/switches.js @@ -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 = "

Original Text

" + 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, "

New Text

", "Elements correctly switched") + + t.end() +}) -- 2.49.1 From d615b79a7a304f3a69e40d367c2d6a66cceaaf15 Mon Sep 17 00:00:00 2001 From: Behind The Math Date: Sat, 17 Mar 2018 22:06:39 -0400 Subject: [PATCH 3/3] Update TS definitions --- index.d.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/index.d.ts b/index.d.ts index f7e8ccc..ed9b993 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,4 +1,6 @@ declare class Pjax { + options: Pjax.IOptions; + constructor(options?: Partial); static switches: { @@ -91,7 +93,7 @@ declare class Pjax { * } * */ - [key: string]: Function; + [key: string]: Function | Pjax.IOptions; } declare namespace Pjax { @@ -180,7 +182,8 @@ type ElementFunction = (el: Element) => void; declare enum DefaultSwitches { innerHTML = "innerHTML", ouetrHTML = "outerHTML", - sideBySide = "sideBySide" + sideBySide = "sideBySide", + replaceNode = "replaceNode" } export = Pjax; -- 2.49.1