Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature: DOM Observer #8

Merged
merged 17 commits into from
Feb 9, 2024
Merged

Feature: DOM Observer #8

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
9220398
feat: add DOM observer
jorenrui Feb 6, 2024
833a1bd
feat: add entity init and initChildren
jorenrui Feb 6, 2024
742f058
feat: add dom observer to mini
jorenrui Feb 6, 2024
efdab2d
refactor: remove logger
jorenrui Feb 6, 2024
80e861d
fix: elements setter and dispose child elements on remove node
jorenrui Feb 6, 2024
d3a892d
style: run prettier
jorenrui Feb 6, 2024
247318d
feat: add observer demo site
jorenrui Feb 6, 2024
c3cac78
feat: add observer html link
jorenrui Feb 6, 2024
c5816c7
fix: ignore non-element node types
jorenrui Feb 6, 2024
e3936f4
refactor: update obj null check
jorenrui Feb 6, 2024
eb1631a
refactor: relocate remove event listener
jorenrui Feb 6, 2024
dea52ab
fix: update code updates to el. variables
jorenrui Feb 6, 2024
73b7c8a
refactor: remove unused variable
jorenrui Feb 6, 2024
b88428c
fix: only add el to engine if parent uuid is present
jorenrui Feb 6, 2024
fee22b1
refactor: update observer demo
jorenrui Feb 6, 2024
1c425c0
chore: add todo
jorenrui Feb 6, 2024
6d910a9
feat: clean up unused variables after entity dispose
jorenrui Feb 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions demo/observer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mini Demo Observer</title>
<script src="/dist/minijs.umd.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-40">
<button class="px-2 py-1 bg-gray-200 rounded-md text-base">Add Item</button>

<ol class="mt-8 list-decimal ml-4">
<li>
<button
:mouseenter="isHovered = true"
:mouseleave="isHovered = false"
:class="isHovered ? 'bg-red-200' : ''"
:click="this.parentNode.parentNode.removeChild(this.parentNode)"
>
list item (click to delete)
</button>
</li>
<li>
<button
:click="this.parentNode.parentNode.removeChild(this.parentNode)"
>
list item (click to delete)
</button>
</li>
<li>
<button
:click="this.parentNode.parentNode.removeChild(this.parentNode)"
>
list item (click to delete)
</button>
</li>
<li>
<button
:click="this.parentNode.parentNode.removeChild(this.parentNode)"
>
jorenrui marked this conversation as resolved.
Show resolved Hide resolved
list item (click to delete)
</button>
</li>
<li><em>&hellip;More will be added after 3 seconds&hellip;</em></li>
</ol>

<script>
const listEl = document.querySelector('ol')
const listItemsEl = [
'<li><button :click="this.parentNode.parentNode.removeChild(this.parentNode)">list item (click to delete)</button></li>',
'<li><button :mouseover="this.parentNode.parentNode.removeChild(this.parentNode)">Hover over me and I\'ll disappear</button></li>',
'<li><p :click="alert(\'See your console logs\')" :mouseenter="console.log(\'mouseenter on p\')" :mouseleave="console.log(\'mouseleave on p\'); this.parentNode.parentNode.removeChild(this.parentNode)">Just a text. Click on me to alert! Hover then leave me to disappear</p></li>',
jorenrui marked this conversation as resolved.
Show resolved Hide resolved
]

document.querySelector('body > button').onclick = function () {
const listItemEl =
listItemsEl[Math.floor(Math.random() * listItemsEl.length)]
listEl.insertAdjacentHTML('beforeend', listItemEl)
}

// Insert 3 DOM nodes at once after 3 seconds
setTimeout(function () {
listEl.removeChild(listEl.lastElementChild)

const listItemEl =
listItemsEl[Math.floor(Math.random() * listItemsEl.length)]
listEl.insertAdjacentHTML('beforeend', listItemEl)

const listItemEl2 =
listItemsEl[Math.floor(Math.random() * listItemsEl.length)]
listEl.insertAdjacentHTML('beforeend', listItemEl2)

const listItemEl3 =
listItemsEl[Math.floor(Math.random() * listItemsEl.length)]
listEl.insertAdjacentHTML('beforeend', listItemEl3)
}, 3000)
</script>
</body>
</html>
Loading
Loading