-
-
Notifications
You must be signed in to change notification settings - Fork 124
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Define AlpineMorpher and MorphdomMorpher classes with morph() methods.
- Instantiate one of the morphers in the {% unicorn_scripts %} templatetag and
pass it to Unicorn.init()
- Update the message sender to use component.morpher.morph()- Loading branch information
Showing
11 changed files
with
163 additions
and
132 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 0 additions & 62 deletions
62
django_unicorn/static/unicorn/js/morphdom/2.6.1/options.js
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,13 @@ | ||
| import morphdom from "./morphdom/2.6.1/morphdom.js"; | ||
| import {getMorphdomOptions} from "./morphdom/2.6.1/options.js"; | ||
|
|
||
|
|
||
| export function getMorphFn(morpherName) { | ||
| if (morpherName === "morphdom") { | ||
| return morphdomMorph; | ||
| } | ||
| if (morpherName === "alpine") { | ||
| if (typeof Alpine === "undefined" || !Alpine.morph) { | ||
| throw Error(` | ||
| Alpine morpher requires Alpine to be loaded. Add Alpine and Alpine Morph to your page. E.g., add the following to your base.html: | ||
| <script defer src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script> | ||
| <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script> | ||
| `); | ||
| } | ||
| return alpineMorph; | ||
| import { MorphdomMorpher} from "./morphers/morphdom.js"; | ||
| import { AlpineMorpher } from "./morphers/alpine.js"; | ||
|
|
||
| export function getMorpher(morpherName, morpherOptions) { | ||
| const MorpherClass = { | ||
| morphdom: MorphdomMorpher, | ||
| alpine: AlpineMorpher, | ||
| }[morpherName]; | ||
| if (MorpherClass) { | ||
| return new MorpherClass(morpherOptions); | ||
| } | ||
| throw Error(`No morpher found for: ${morpherName}`); | ||
| } | ||
|
|
||
|
|
||
| function morphdomMorph(el, newHtml, reloadScriptElements) { | ||
| morphdom(el, newHtml, getMorphdomOptions(reloadScriptElements)); | ||
| } | ||
|
|
||
| function alpineMorph(el, newHtml) { | ||
| return Alpine.morph(el, newHtml); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| export class AlpineMorpher { | ||
| constructor(options) { | ||
| // Check if window has Alpine and Alpine Morph | ||
| if (!window.Alpine || !window.Alpine.morph) { | ||
| throw Error(` | ||
| Alpine morpher requires Alpine to be loaded. Add Alpine and Alpine Morph to your page. | ||
| See https://www.django-unicorn.com/docs/custom-morphers/#alpine for more information. | ||
| `); | ||
| } | ||
| this.options = options; | ||
| } | ||
|
|
||
| morph(dom, htmlElement) { | ||
| return window.Alpine.morph(dom, htmlElement, this.getOptions()); | ||
| } | ||
|
|
||
| getOptions() { | ||
| return { | ||
| key(el) { | ||
| if (el.attributes) { | ||
| const key = | ||
| el.getAttribute("unicorn:key") || | ||
| el.getAttribute("u:key") || | ||
| el.id; | ||
| if (key) { | ||
| return key; | ||
| } | ||
| } | ||
| return el.id | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import morphdom from "../morphdom/2.6.1/morphdom.js"; | ||
|
|
||
|
|
||
| export class MorphdomMorpher { | ||
| constructor(options) { | ||
| this.options = options; | ||
| } | ||
|
|
||
| morph(dom, htmlElement) { | ||
| return morphdom(dom, htmlElement, this.getOptions()); | ||
| } | ||
|
|
||
| getOptions() { | ||
| const reloadScriptElements = this.options.RELOAD_SCRIPT_ELEMENTS || false; | ||
| return { | ||
| childrenOnly: false, | ||
| // eslint-disable-next-line consistent-return | ||
| getNodeKey(node) { | ||
| // A node's unique identifier. Used to rearrange elements rather than | ||
| // creating and destroying an element that already exists. | ||
| if (node.attributes) { | ||
| const key = | ||
| node.getAttribute("unicorn:key") || | ||
| node.getAttribute("u:key") || | ||
| node.id; | ||
|
|
||
| if (key) { | ||
| return key; | ||
| } | ||
| } | ||
| }, | ||
| // eslint-disable-next-line consistent-return | ||
| onBeforeElUpdated(fromEl, toEl) { | ||
| // Because morphdom also supports vDom nodes, it uses isSameNode to detect | ||
| // sameness. When dealing with DOM nodes, we want isEqualNode, otherwise | ||
| // isSameNode will ALWAYS return false. | ||
| if (fromEl.isEqualNode(toEl)) { | ||
| return false; | ||
| } | ||
|
|
||
| if (reloadScriptElements) { | ||
| if (fromEl.nodeName === "SCRIPT" && toEl.nodeName === "SCRIPT") { | ||
| // https://github.com/patrick-steele-idem/morphdom/issues/178#issuecomment-652562769 | ||
| const script = document.createElement("script"); | ||
| // copy over the attributes | ||
| [...toEl.attributes].forEach((attr) => { | ||
| script.setAttribute(attr.nodeName, attr.nodeValue); | ||
| }); | ||
|
|
||
| script.innerHTML = toEl.innerHTML; | ||
| fromEl.replaceWith(script); | ||
|
|
||
| return false; | ||
| } | ||
| } | ||
|
|
||
| return true; | ||
| }, | ||
| onNodeAdded(node) { | ||
| if (reloadScriptElements) { | ||
| if (node.nodeName === "SCRIPT") { | ||
| // https://github.com/patrick-steele-idem/morphdom/issues/178#issuecomment-652562769 | ||
| const script = document.createElement("script"); | ||
| // copy over the attributes | ||
| [...node.attributes].forEach((attr) => { | ||
| script.setAttribute(attr.nodeName, attr.nodeValue); | ||
| }); | ||
|
|
||
| script.innerHTML = node.innerHTML; | ||
| node.replaceWith(script); | ||
| } | ||
| } | ||
| }, | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.