diff options
Diffstat (limited to 'alpinejs/packages/alpinejs/src/directives/x-if.js')
-rw-r--r-- | alpinejs/packages/alpinejs/src/directives/x-if.js | 43 |
1 files changed, 43 insertions, 0 deletions
diff --git a/alpinejs/packages/alpinejs/src/directives/x-if.js b/alpinejs/packages/alpinejs/src/directives/x-if.js new file mode 100644 index 0000000..8cbb030 --- /dev/null +++ b/alpinejs/packages/alpinejs/src/directives/x-if.js @@ -0,0 +1,43 @@ +import { evaluateLater } from '../evaluator' +import { addScopeToNode } from '../scope' +import { directive } from '../directives' +import { initTree } from '../lifecycle' +import { mutateDom } from '../mutation' + +directive('if', (el, { expression }, { effect, cleanup }) => { + let evaluate = evaluateLater(el, expression) + + let show = () => { + if (el._x_currentIfEl) return el._x_currentIfEl + + let clone = el.content.cloneNode(true).firstElementChild + + addScopeToNode(clone, {}, el) + + mutateDom(() => { + el.after(clone) + + initTree(clone) + }) + + el._x_currentIfEl = clone + + el._x_undoIf = () => { clone.remove(); delete el._x_currentIfEl } + + return clone + } + + let hide = () => { + if (! el._x_undoIf) return + + el._x_undoIf() + + delete el._x_undoIf + } + + effect(() => evaluate(value => { + value ? show() : hide() + })) + + cleanup(() => el._x_undoIf && el._x_undoIf()) +}) |