@twobirds/microcomponents 0.0.85 → 0.0.88
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -3
- package/assets/documentation/MC.md +23 -42
- package/assets/test/{my-tag.css → myButton.css} +4 -4
- package/assets/test/test.html +1 -1
- package/dist/MC.d.ts +5 -5
- package/dist/MC.d.ts.map +1 -1
- package/dist/MC.js +17 -21
- package/dist/MC.min.js +17 -21
- package/dist/MC.ts +25 -34
- package/dist/elements.min.js +1 -1
- package/dist/formValues.min.js +1 -1
- package/dist/microcomponents.min.js +1 -1
- package/dist/observables.min.js +1 -1
- package/package.json +2 -2
- package/public/MC.d.ts +5 -5
- package/public/MC.d.ts.map +1 -1
- package/public/MC.js +17 -21
- package/public/MC.js.map +1 -1
- package/public/MC.min.js +17 -21
- package/public/MC.ts +25 -34
- package/public/documentation/MC.md +23 -42
- package/public/elements.min.js +1 -1
- package/public/formValues.min.js +1 -1
- package/public/microcomponents.min.js +1 -1
- package/public/observables.min.js +1 -1
- package/public/src/MC.d.ts +5 -5
- package/public/src/MC.d.ts.map +1 -1
- package/public/src/MC.js +17 -21
- package/public/src/MC.js.map +1 -1
- package/public/src/MC.ts +25 -34
- package/public/src/test/test/grandparent.js +1 -1
- package/public/src/test/test/testform.js +1 -1
- package/public/src/test/test.js +22 -30
- package/public/src/test/test.js.map +1 -1
- package/public/src/test/test.ts +59 -72
- package/public/test/MC.d.ts +5 -5
- package/public/test/MC.d.ts.map +1 -1
- package/public/test/MC.js +17 -21
- package/public/test/MC.min.js +17 -21
- package/public/test/MC.ts +25 -34
- package/public/test/elements.min.js +1 -1
- package/public/test/formValues.min.js +1 -1
- package/public/test/microcomponents.min.js +1 -1
- package/public/test/{my-tag.css → myButton.css} +4 -4
- package/public/test/observables.min.js +1 -1
- package/public/test/test/grandparent.js +1 -1
- package/public/test/test/testform.js +1 -1
- package/public/test/test.html +1 -1
- package/public/test/test.js +22 -30
- package/public/test/test.js.map +1 -1
- package/public/test/test.ts +59 -72
- package/public/typedoc/assets/search.js +1 -1
- package/public/typedoc/classes/MC.DC.html +3 -3
- package/public/typedoc/classes/MC.MC.html +2 -2
- package/public/typedoc/classes/MC.McBase.html +2 -2
- package/public/typedoc/functions/MC.autoload.html +1 -1
- package/public/typedoc/functions/MC.off.html +1 -1
- package/public/typedoc/functions/MC.on.html +1 -1
- package/public/typedoc/functions/MC.one.html +1 -1
- package/public/typedoc/functions/MC.trigger.html +1 -1
- package/public/typedoc/functions/elements.defineCE.html +1 -1
- package/public/typedoc/functions/elements.getCE.html +1 -1
- package/public/typedoc/functions/formValues.formValues.html +1 -1
- package/public/typedoc/functions/observables.observe.html +1 -1
- package/public/typedoc/index.html +14 -3
- package/public/typedoc/interfaces/MC.HTMLMcElement.html +2 -2
- package/public/typedoc/modules/MC.html +1 -1
- package/public/typedoc/modules/elements.html +1 -1
- package/public/typedoc/modules/formValues.html +1 -1
- package/public/typedoc/modules/observables.html +1 -1
- package/public/typedoc/types/observables.Observable.html +1 -1
- package/src/MC.ts +25 -34
- package/src/test/test.ts +59 -72
- package/public/McEvent._ts +0 -96
- package/public/src/McEvent._ts +0 -96
- package/src/McEvent._ts +0 -96
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>MC | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="MC.html">MC</a></li></ul><h1>Module MC</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>MC | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="MC.html">MC</a></li></ul><h1>Module MC</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/6593bf37545783e81ede8f50b4aaaf984198c72a/src/MC.ts#L1">src/MC.ts:1</a></li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><h3 class="tsd-index-heading uppercase">Index</h3><section class="tsd-index-section"><h3 class="tsd-index-heading">Classes</h3><div class="tsd-index-list"><a href="../classes/MC.DC.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-128"></use></svg><span>DC</span></a>
|
|
2
2
|
<a href="../classes/MC.MC.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-128"></use></svg><span>MC</span></a>
|
|
3
3
|
<a href="../classes/MC.McBase.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-128"></use></svg><span>Mc<wbr/>Base</span></a>
|
|
4
4
|
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Interfaces</h3><div class="tsd-index-list"><a href="../interfaces/MC.HTMLMcElement.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-256"></use></svg><span>HTMLMc<wbr/>Element</span></a>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>elements | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="elements.html">elements</a></li></ul><h1>Module elements</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>elements | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="elements.html">elements</a></li></ul><h1>Module elements</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/6593bf37545783e81ede8f50b4aaaf984198c72a/src/elements.ts#L1">src/elements.ts:1</a></li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><h3 class="tsd-index-heading uppercase">Index</h3><section class="tsd-index-section"><h3 class="tsd-index-heading">Functions</h3><div class="tsd-index-list"><a href="../functions/elements.defineCE.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-64"></use></svg><span>defineCE</span></a>
|
|
2
2
|
<a href="../functions/elements.getCE.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-64"></use></svg><span>getCE</span></a>
|
|
3
3
|
</div></section></section></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>Micro Components</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>formValues | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="formValues.html">formValues</a></li></ul><h1>Module formValues</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>formValues | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="formValues.html">formValues</a></li></ul><h1>Module formValues</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/6593bf37545783e81ede8f50b4aaaf984198c72a/src/formValues.ts#L1">src/formValues.ts:1</a></li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><h3 class="tsd-index-heading uppercase">Index</h3><section class="tsd-index-section"><h3 class="tsd-index-heading">Functions</h3><div class="tsd-index-list"><a href="../functions/formValues.formValues.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-64"></use></svg><span>form<wbr/>Values</span></a>
|
|
2
2
|
</div></section></section></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>Micro Components</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>observables | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="observables.html">observables</a></li></ul><h1>Module observables</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>observables | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="observables.html">observables</a></li></ul><h1>Module observables</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/6593bf37545783e81ede8f50b4aaaf984198c72a/src/observables.ts#L1">src/observables.ts:1</a></li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><h3 class="tsd-index-heading uppercase">Index</h3><section class="tsd-index-section"><h3 class="tsd-index-heading">Type Aliases</h3><div class="tsd-index-list"><a href="../types/observables.Observable.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2097152"></use></svg><span>Observable</span></a>
|
|
2
2
|
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Functions</h3><div class="tsd-index-list"><a href="../functions/observables.observe.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-64"></use></svg><span>observe</span></a>
|
|
3
3
|
</div></section></section></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>Micro Components</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Observable | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="../modules/observables.html">observables</a></li><li><a href="observables.Observable.html">Observable</a></li></ul><h1>Type Alias Observable</h1></div><div class="tsd-signature"><span class="tsd-kind-type-alias">Observable</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span><br/><span> </span><span class="tsd-kind-property">bind</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">DocumentFragment</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ShadowRoot</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span> </span><span class="tsd-kind-property">callbacks</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Function</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">; </span><br/><span> </span><span class="tsd-kind-property">notify</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span> </span><span class="tsd-kind-property">observe</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">cb</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Callback</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Observable | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="../modules/observables.html">observables</a></li><li><a href="observables.Observable.html">Observable</a></li></ul><h1>Type Alias Observable</h1></div><div class="tsd-signature"><span class="tsd-kind-type-alias">Observable</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span><br/><span> </span><span class="tsd-kind-property">bind</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">DocumentFragment</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ShadowRoot</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span> </span><span class="tsd-kind-property">callbacks</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Function</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">; </span><br/><span> </span><span class="tsd-kind-property">notify</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span> </span><span class="tsd-kind-property">observe</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">cb</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Callback</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/6593bf37545783e81ede8f50b4aaaf984198c72a/src/observables.ts#L184">src/observables.ts:184</a></li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>Micro Components</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
package/src/MC.ts
CHANGED
|
@@ -6,17 +6,6 @@ const isBrowser = new Function(
|
|
|
6
6
|
'try {return this===window;}catch(e){ return false;}'
|
|
7
7
|
);
|
|
8
8
|
|
|
9
|
-
// get HTMLElement native event names
|
|
10
|
-
function getNativeEventNames( domNode: HTMLElement ): string[] {
|
|
11
|
-
let nativeEventNames: Array<string> = [];
|
|
12
|
-
if (isBrowser()) {
|
|
13
|
-
Object.keys(HTMLElement.prototype)
|
|
14
|
-
.filter((key) => /^on/.test(key))
|
|
15
|
-
.forEach((eventName) => nativeEventNames.push(eventName));
|
|
16
|
-
}
|
|
17
|
-
return nativeEventNames;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
9
|
export interface HTMLMcElement extends HTMLElement {
|
|
21
10
|
_mc: LooseObject;
|
|
22
11
|
}
|
|
@@ -90,12 +79,14 @@ function off( domNode: Node, eventName: string, handler: EventListenerOrEventLis
|
|
|
90
79
|
domNode.removeEventListener( getMcEventName(eventName), handler );
|
|
91
80
|
}
|
|
92
81
|
|
|
93
|
-
function on( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once: boolean = false ) {
|
|
82
|
+
function on( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once: boolean = false ): EventListenerOrEventListenerObject {
|
|
94
83
|
domNode.addEventListener( getMcEventName(eventName), handler, { capture: false, once });
|
|
84
|
+
return handler;
|
|
95
85
|
}
|
|
96
86
|
|
|
97
|
-
function one( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ) {
|
|
87
|
+
function one( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ): EventListenerOrEventListenerObject {
|
|
98
88
|
on(domNode, eventName, handler, true );
|
|
89
|
+
return handler;
|
|
99
90
|
}
|
|
100
91
|
|
|
101
92
|
// create and dispatch custom event
|
|
@@ -168,18 +159,18 @@ function autoAttachListeners(element: MC | DC) {
|
|
|
168
159
|
withoutOnOne = key.replace(/^on[e]{0,1}/, ''), // preserves upper/lowercase for non-native events
|
|
169
160
|
nativeEventName = withoutOnOne.toLowerCase(); // lowercase for native event names
|
|
170
161
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
on( target, withoutOnOne, listener, once );
|
|
162
|
+
if ( ('on' + nativeEventName) in target ) { // it is a native HTML event
|
|
163
|
+
let listener = (ev: Event) => {
|
|
164
|
+
that[key]( ev );
|
|
165
|
+
}
|
|
166
|
+
// console.log( 'AAL: attach native event listener', nativeEventName, 'to', target );
|
|
167
|
+
target.addEventListener( nativeEventName, listener );
|
|
168
|
+
} else { // it is a customEvent
|
|
169
|
+
// console.log( 'AAL: attach custom event listener', '_mc' + withoutOnOne , 'to key', key, 'in', element );
|
|
170
|
+
let listener = (ev: CustomEvent) => {
|
|
171
|
+
that[key]( ev );
|
|
172
|
+
}
|
|
173
|
+
on( target, withoutOnOne, listener as EventListenerOrEventListenerObject, once );
|
|
183
174
|
}
|
|
184
175
|
});
|
|
185
176
|
}
|
|
@@ -236,11 +227,11 @@ class DC extends McBase {
|
|
|
236
227
|
}
|
|
237
228
|
|
|
238
229
|
on( eventName: string, handler: EventListenerOrEventListenerObject ) {
|
|
239
|
-
on( this.target, eventName, handler );
|
|
230
|
+
return on( this.target, eventName, handler );
|
|
240
231
|
}
|
|
241
232
|
|
|
242
233
|
one( eventName: string, handler: EventListenerOrEventListenerObject ) {
|
|
243
|
-
one( this.target, eventName, handler );
|
|
234
|
+
return one( this.target, eventName, handler );
|
|
244
235
|
}
|
|
245
236
|
|
|
246
237
|
trigger( eventName: string, data: any = {}, bubble: string = 'l') {
|
|
@@ -248,13 +239,6 @@ class DC extends McBase {
|
|
|
248
239
|
}
|
|
249
240
|
|
|
250
241
|
/* DOM traversal */
|
|
251
|
-
parent(): DC | null {
|
|
252
|
-
let
|
|
253
|
-
target: HTMLElement = (this as DC).target;
|
|
254
|
-
if (!isDOM(target)) return null;
|
|
255
|
-
return (target.closest('[data-mc]') as HTMLMcElement)?._mc as DC || null;
|
|
256
|
-
}
|
|
257
|
-
|
|
258
242
|
ancestors(): DC[] | null {
|
|
259
243
|
let
|
|
260
244
|
currentNode: HTMLElement | null = (this as DC)?.target as HTMLMcElement,
|
|
@@ -271,6 +255,13 @@ class DC extends McBase {
|
|
|
271
255
|
return result.length ? result : null;
|
|
272
256
|
}
|
|
273
257
|
|
|
258
|
+
closest(): DC | null {
|
|
259
|
+
let
|
|
260
|
+
target: HTMLElement = (this as DC).target;
|
|
261
|
+
if (!isDOM(target)) return null;
|
|
262
|
+
return (target.closest('[data-mc]') as HTMLMcElement)?._mc as DC || null;
|
|
263
|
+
}
|
|
264
|
+
|
|
274
265
|
children(): DC[] | null {
|
|
275
266
|
let target: any = (this as any)?.target;
|
|
276
267
|
if (!isDOM(target)) return null;
|
package/src/test/test.ts
CHANGED
|
@@ -40,83 +40,70 @@ class Translator extends DC {
|
|
|
40
40
|
|
|
41
41
|
(that.Translation as Observable).bind(translationTargetObject);
|
|
42
42
|
|
|
43
|
-
that.target.setAttribute('language', 'en');
|
|
44
|
-
|
|
45
43
|
(that.Language as Observable).notify();
|
|
46
44
|
}
|
|
47
45
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
class MyButton extends DC {
|
|
49
|
+
#template: string = '{lang.click} {counter}';
|
|
50
|
+
|
|
51
|
+
#languages = {
|
|
52
|
+
en: {
|
|
53
|
+
click: 'click me',
|
|
54
|
+
},
|
|
55
|
+
de: {
|
|
56
|
+
click: 'klick mich',
|
|
57
|
+
},
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
Dom: LooseObject = {};
|
|
61
|
+
|
|
62
|
+
constructor(target: HTMLElement) {
|
|
63
|
+
super(target);
|
|
64
|
+
|
|
65
|
+
// render
|
|
66
|
+
target.innerHTML = this.#template;
|
|
67
|
+
|
|
68
|
+
// state
|
|
69
|
+
this.Dom = { counter: 0 };
|
|
70
|
+
|
|
71
|
+
// state: convert all props defined so far into observables
|
|
72
|
+
observe(this);
|
|
73
|
+
|
|
74
|
+
// add translator
|
|
75
|
+
DC.add(
|
|
76
|
+
target,
|
|
77
|
+
'Translator',
|
|
78
|
+
new Translator(target, this.#languages, target)
|
|
79
|
+
);
|
|
80
|
+
|
|
81
|
+
// bind Dom to target
|
|
82
|
+
(this.Dom as Observable).bind(this.target);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
onClick(ev: Event) {
|
|
86
|
+
// console.log('button.myButton onClick()');
|
|
87
|
+
const c = this.Dom.counter++;
|
|
88
|
+
ev.stopPropagation();
|
|
89
|
+
(this.target as HTMLElement).classList.remove('clicked');
|
|
90
|
+
(this.target as HTMLElement).classList.add( this.Dom.counter > 9 ? 'overClicked' : 'clicked' );
|
|
56
91
|
}
|
|
57
92
|
}
|
|
58
93
|
|
|
94
|
+
function makeButton(): HTMLMcElement {
|
|
95
|
+
const button = document.createElement('button');
|
|
96
|
+
button.classList.add('myButton');
|
|
97
|
+
DC.add( button, 'MyButton', new MyButton(button) );
|
|
98
|
+
return button as unknown as HTMLMcElement;
|
|
99
|
+
}
|
|
100
|
+
|
|
59
101
|
defineCE(
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
class MyTag extends DC {
|
|
63
|
-
#template: string = '<button>{lang.click} {counter}</button>';
|
|
64
|
-
|
|
65
|
-
#languages = {
|
|
66
|
-
en: {
|
|
67
|
-
click: 'click me',
|
|
68
|
-
},
|
|
69
|
-
de: {
|
|
70
|
-
click: 'klick mich',
|
|
71
|
-
},
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
Dom: LooseObject = {};
|
|
75
|
-
|
|
76
|
-
constructor(target: HTMLElement) {
|
|
77
|
-
super(target);
|
|
78
|
-
|
|
79
|
-
let that = this; // minifier help
|
|
80
|
-
|
|
81
|
-
// render
|
|
82
|
-
target.innerHTML = this.#template;
|
|
83
|
-
|
|
84
|
-
// add translator
|
|
85
|
-
DC.add(
|
|
86
|
-
target,
|
|
87
|
-
'translator',
|
|
88
|
-
new Translator(target, that.#languages, target)
|
|
89
|
-
);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
oneInit(ev: CustomEvent) {
|
|
93
|
-
let that = this;
|
|
94
|
-
|
|
95
|
-
// state
|
|
96
|
-
that.Dom = { counter: 0 };
|
|
97
|
-
|
|
98
|
-
// state: convert all props defined so far into observables
|
|
99
|
-
observe(that);
|
|
100
|
-
|
|
101
|
-
// bind Dom to target
|
|
102
|
-
(that.Dom as Observable).bind(that.target);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
onClick(ev: CustomEvent) {
|
|
106
|
-
const that = this,
|
|
107
|
-
c = that.Dom.counter++;
|
|
108
|
-
(ev.detail.data as PointerEvent).stopPropagation();
|
|
109
|
-
(that.target as HTMLElement).classList.remove('clicked');
|
|
110
|
-
(that.target as HTMLElement).classList.add(
|
|
111
|
-
that.Dom.counter > 9 ? 'overClicked' : 'clicked'
|
|
112
|
-
);
|
|
113
|
-
}
|
|
114
|
-
},
|
|
115
|
-
['language']
|
|
102
|
+
'make-button',
|
|
103
|
+
makeButton
|
|
116
104
|
);
|
|
117
105
|
|
|
118
|
-
let
|
|
119
|
-
fragment = new DocumentFragment();
|
|
106
|
+
let fragment = new DocumentFragment();
|
|
120
107
|
|
|
121
108
|
/*
|
|
122
109
|
stress test
|
|
@@ -127,7 +114,7 @@ let start = new Date().getTime(),
|
|
|
127
114
|
|
|
128
115
|
// create 1000 elements
|
|
129
116
|
for (let x = 0; x < max; x++) {
|
|
130
|
-
fragment.append(
|
|
117
|
+
fragment.append( (getCE('make-button') as Function)());
|
|
131
118
|
}
|
|
132
119
|
|
|
133
120
|
let end = new Date().getTime();
|
|
@@ -145,7 +132,7 @@ setTimeout(() => {
|
|
|
145
132
|
// console.clear();
|
|
146
133
|
|
|
147
134
|
console.log(
|
|
148
|
-
'%c \n\nStress Test:\n\n %cInstancing %s
|
|
135
|
+
'%c \n\nStress Test:\n\n %cInstancing %s buttons containing %s MCs: %c %s ms.',
|
|
149
136
|
'font-weight: bold; color: black;',
|
|
150
137
|
'font-weight: normal;',
|
|
151
138
|
max,
|
|
@@ -156,7 +143,7 @@ setTimeout(() => {
|
|
|
156
143
|
|
|
157
144
|
//document.body.appendChild(new MyTag());
|
|
158
145
|
|
|
159
|
-
let element = document.querySelector('
|
|
146
|
+
let element = document.querySelector('button');
|
|
160
147
|
|
|
161
148
|
console.log(
|
|
162
149
|
"\n\n%cInspect this tag:%c \n( ...to see the inner structure in the '._mc' property )\n\n %O %c %s",
|
|
@@ -185,5 +172,5 @@ setTimeout(() => {
|
|
|
185
172
|
);
|
|
186
173
|
|
|
187
174
|
// will trigger the event on all micro components contained in <my-tag>
|
|
188
|
-
( element as HTMLMcElement)._mc?.trigger('doSomething');
|
|
175
|
+
( element as unknown as HTMLMcElement )._mc?.trigger('doSomething');
|
|
189
176
|
}, 1000);
|
package/public/McEvent._ts
DELETED
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var isBrowser=new Function("try {return this===window;}catch(e){ return false;}");
|
|
4
|
-
|
|
5
|
-
let nativeEventNames: Set<string> = new Set();
|
|
6
|
-
|
|
7
|
-
// HTMLElement native event names
|
|
8
|
-
if ( isBrowser() ){
|
|
9
|
-
Object.keys( HTMLElement.prototype ).filter( key => /^on/.test(key) ).forEach( eventName => nativeEventNames.add( eventName ) );
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
function isDOM(element: { [key:string]: any } ) {
|
|
13
|
-
return element && element instanceof HTMLElement;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
interface McEvent {
|
|
17
|
-
data: any;
|
|
18
|
-
bubble: string;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
class McEvent{
|
|
22
|
-
|
|
23
|
-
#type: string;
|
|
24
|
-
#stopped: boolean = false;
|
|
25
|
-
#immediateStopped: boolean = false;
|
|
26
|
-
|
|
27
|
-
constructor( type: string, data: any = {}, bubble: string = 'l' ){
|
|
28
|
-
// bubble standard = local only, options = any combination of'uld' characters: up to root, local, down
|
|
29
|
-
this.#type = type;
|
|
30
|
-
this.data = data;
|
|
31
|
-
this.bubble = bubble;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
get type(): string {
|
|
35
|
-
return this.#type;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
get stopped(): boolean {
|
|
39
|
-
return this.#stopped;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
get immediateStopped(): boolean {
|
|
43
|
-
return this.#immediateStopped;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
stopPropagation(){
|
|
47
|
-
this.#stopped = true;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
stopImmediatePropagation(){
|
|
51
|
-
this.stopPropagation();
|
|
52
|
-
this.#immediateStopped = true;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
// get all microcomponents from a list of HTMLElements
|
|
58
|
-
function getMicroComponents( elements: any[], search: string): any[] {
|
|
59
|
-
let mcValues: any[] = [];
|
|
60
|
-
|
|
61
|
-
elements.forEach( e => {
|
|
62
|
-
if (e) {
|
|
63
|
-
if (e instanceof HTMLElement) {
|
|
64
|
-
const _mc = ( e as any )?._mc;
|
|
65
|
-
if ( !search && _mc ) {
|
|
66
|
-
mcValues = mcValues.concat(Object.values(( e as any )._mc));
|
|
67
|
-
}
|
|
68
|
-
else if ( search && _mc && _mc[search] ) {
|
|
69
|
-
mcValues.push( _mc[search] );
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
});
|
|
74
|
-
return mcValues;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
// get all ancestor DOM nodes up to the document root
|
|
78
|
-
function traverseNodes(node: { [key:string]: any }, search: string, firstonly = true): any[] {
|
|
79
|
-
let mcValues: any[] = [];
|
|
80
|
-
while (node) {
|
|
81
|
-
if (node._mc) {
|
|
82
|
-
if (!search) {
|
|
83
|
-
mcValues = mcValues.concat(Object.values(node._mc));
|
|
84
|
-
}
|
|
85
|
-
else if (search && node._mc[search]) {
|
|
86
|
-
mcValues.push(node._mc[search]);
|
|
87
|
-
}
|
|
88
|
-
if (firstonly)
|
|
89
|
-
return mcValues;
|
|
90
|
-
}
|
|
91
|
-
node = node.parentNode;
|
|
92
|
-
}
|
|
93
|
-
return mcValues;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
export { McEvent };
|