kempo-ui 0.0.9 → 0.0.11
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/dist/src/components/Card.js +3 -3
- package/dist/src/components/Dialog.js +11 -11
- package/dist/src/components/Icon.js +1 -1
- package/dist/src/components/Toggle.js +15 -14
- package/dist/src/components/Tree.js +11 -3
- package/docs/components/accordion.html +34 -123
- package/docs/components/card.html +43 -58
- package/docs/components/collapsible.html +38 -159
- package/docs/components/content-slider.html +36 -183
- package/docs/components/dialog.html +38 -303
- package/docs/components/focus-capture.html +42 -79
- package/docs/components/hybrid-component.html +36 -73
- package/docs/components/icon.html +43 -123
- package/docs/components/import.html +43 -40
- package/docs/components/light-component.html +37 -61
- package/docs/components/persistant-collapsible.html +40 -85
- package/docs/components/photo-viewer.html +39 -187
- package/docs/components/resize.html +40 -141
- package/docs/components/shadow-component.html +41 -54
- package/docs/components/show-more.html +42 -94
- package/docs/components/side-menu.html +41 -124
- package/docs/components/sortable.html +38 -95
- package/docs/components/split.html +41 -113
- package/docs/components/table.html +34 -271
- package/docs/components/tableControls.html +54 -56
- package/docs/components/tableCustomFields.html +54 -92
- package/docs/components/tableFetchRecords.html +52 -91
- package/docs/components/tableFieldSortHide.html +54 -54
- package/docs/components/tablePagination.html +54 -79
- package/docs/components/tableRecordEditing.html +54 -123
- package/docs/components/tableRecordFiltering.html +52 -65
- package/docs/components/tableRecordHiding.html +53 -58
- package/docs/components/tableRecordSearching.html +54 -54
- package/docs/components/tableRecordSelection.html +55 -55
- package/docs/components/tableRowControls.html +55 -58
- package/docs/components/tableSorting.html +54 -52
- package/docs/components/tabs.html +45 -148
- package/docs/components/tags.html +40 -73
- package/docs/components/theme-switcher.html +38 -87
- package/docs/components/timestamp.html +40 -45
- package/docs/components/toast.html +32 -318
- package/docs/components/toggle.html +41 -120
- package/docs/components/tree.html +41 -146
- package/docs/index.html +56 -209
- package/docs/src/components/Card.js +3 -3
- package/docs/src/components/Dialog.js +11 -11
- package/docs/src/components/Icon.js +1 -1
- package/docs/src/components/Toggle.js +15 -14
- package/docs/src/components/Tree.js +11 -3
- package/docs/utils/debounce.html +31 -33
- package/docs/utils/drag.html +31 -44
- package/docs/utils/formatTimestamp.html +31 -69
- package/docs/utils/init.js +1 -0
- package/docs/utils/propConverters.html +26 -82
- package/docs/utils/toTitleCase.html +31 -26
- package/docs/utils/watchWindowSize.html +8 -98
- package/package.json +1 -1
- package/src/components/Card.js +3 -0
- package/src/components/Toggle.js +69 -69
- package/src/components/Tree.js +10 -2
|
@@ -3,334 +3,69 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
8
|
-
<link rel="stylesheet" href="../
|
|
6
|
+
<title>watchWindowSize - Kempo UI</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
9
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
10
12
|
<script type="module" src="./init.js"></script>
|
|
11
13
|
</head>
|
|
12
14
|
<body>
|
|
13
15
|
<k-import src="../nav.inc.html"></k-import>
|
|
14
16
|
<main>
|
|
15
|
-
<h1
|
|
16
|
-
|
|
17
|
-
<details
|
|
17
|
+
<h1>watchWindowSize</h1>
|
|
18
|
+
|
|
19
|
+
<details
|
|
20
|
+
class="b r mb"
|
|
21
|
+
>
|
|
18
22
|
<summary class="p">Table of Contents</summary>
|
|
19
23
|
<div class="m mt0 pl">
|
|
20
|
-
<h6>
|
|
24
|
+
<h6>Usage</h6>
|
|
21
25
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
22
|
-
<a href="#
|
|
23
|
-
<a href="#
|
|
24
|
-
<a href="#jsUsage">JavaScript Usage</a><br />
|
|
25
|
-
<a href="#confirmDialog">Confirm Dialog</a><br />
|
|
26
|
-
|
|
27
|
-
<h6 class="mt">JavaScript Reference</h6>
|
|
28
|
-
<a href="#constructor">Constructor</a><br />
|
|
29
|
-
<a href="#requirements">Requirements</a><br />
|
|
30
|
-
<a href="#attributes">Attributes</a><br />
|
|
31
|
-
<a href="#properties">Properties</a><br />
|
|
32
|
-
<a href="#methods">Methods</a><br />
|
|
33
|
-
<a href="#staticMethods">Static Methods</a><br />
|
|
26
|
+
<a href="#functions">Functions</a><br />
|
|
27
|
+
<a href="#examples">Examples</a><br />
|
|
34
28
|
</div>
|
|
35
29
|
</details>
|
|
36
30
|
|
|
37
|
-
<h3
|
|
38
|
-
<p>
|
|
39
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d1"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>></span>Hello World<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-dialog</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"document.getElementById('d1').open()"</span>></span>Open Dialog<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
40
|
-
<button class="openDialog mb" data-dialog="d1" slot="right">Open Dialog</button>
|
|
41
|
-
<k-dialog id="d1">
|
|
42
|
-
<p class="p">Hello World</p>
|
|
43
|
-
</k-dialog>
|
|
44
|
-
|
|
45
|
-
<h3 id="titles"><a href="#titles" class="no-link">Titles</a></h3>
|
|
46
|
-
<p>Assign an element to the <code>title</code> slot to have it appear as the dialog title.</p>
|
|
47
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d2"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span><br /> <span class="hljs-attr">class</span>=<span class="hljs-string">"m0 px"</span><br /> <span class="hljs-attr">slot</span>=<span class="hljs-string">"title"</span><br /> ></span>This is a fact<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>></span>A hotdog is a sandwhich<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-dialog</span>></span></code></pre>
|
|
48
|
-
<button class="openDialog mb" data-dialog="d2" slot="right">Open Dialog</button>
|
|
49
|
-
<k-dialog
|
|
50
|
-
id="d2"
|
|
51
|
-
>
|
|
52
|
-
<h6
|
|
53
|
-
class="m0 px"
|
|
54
|
-
slot="title"
|
|
55
|
-
>This is a fact</h6>
|
|
56
|
-
<p class="p">A hotdog is a sandwhich</p>
|
|
57
|
-
</k-dialog>
|
|
58
|
-
|
|
59
|
-
<h3 id="actionButtons"><a href="#actionButtons" class="no-link">Action Buttons</a></h3>
|
|
60
|
-
<p>Add a cancel button using the <code>cancel-text</code> attribute.</p>
|
|
61
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-dialog</span><br /> <span class="hljs-attr">id</span>=<span class="hljs-string">"d4"</span><br /> <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">"Absolutly Not"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>></span>Mint and Chocolate belong together<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-dialog</span>></span></code></pre>
|
|
62
|
-
<button class="openDialog mb" data-dialog="d4" slot="right">Open Dialog</button>
|
|
63
|
-
<k-dialog
|
|
64
|
-
id="d4"
|
|
65
|
-
cancel-text="Absolutly Not"
|
|
66
|
-
>
|
|
67
|
-
<p class="p">Mint and Chocolate belong together</p>
|
|
68
|
-
</k-dialog>
|
|
69
|
-
|
|
70
|
-
<p>Add a confirm button using the <code>confirm-text</code> attribute.</p>
|
|
71
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-dialog</span><br /> <span class="hljs-attr">id</span>=<span class="hljs-string">"d5"</span><br /> <span class="hljs-attr">confirm-text</span>=<span class="hljs-string">"Confirm"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>></span>Spaghetti is the greatest food<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-dialog</span>></span></code></pre>
|
|
72
|
-
<button class="openDialog mb" data-dialog="d5" slot="right">Open Dialog</button>
|
|
73
|
-
<k-dialog
|
|
74
|
-
id="d5"
|
|
75
|
-
confirm-text="Confirm"
|
|
76
|
-
>
|
|
77
|
-
<p class="p">Spaghetti is the greatest food</p>
|
|
78
|
-
</k-dialog>
|
|
79
|
-
|
|
80
|
-
<p>Try it with both a cancel and confirm button.</p>
|
|
81
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-dialog</span><br /> <span class="hljs-attr">id</span>=<span class="hljs-string">"d6"</span><br /> <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">"It should be outlawed"</span><br /> <span class="hljs-attr">confirm-text</span>=<span class="hljs-string">"Of course it is"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>></span>Ranch is gross<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-dialog</span>></span></code></pre>
|
|
82
|
-
<button class="openDialog mb" data-dialog="d6" slot="right">Open Dialog</button>
|
|
83
|
-
<k-dialog
|
|
84
|
-
id="d6"
|
|
85
|
-
cancel-text="It should be outlawed"
|
|
86
|
-
confirm-text="Of course it is"
|
|
87
|
-
>
|
|
88
|
-
<p class="p">Ranch is gross</p>
|
|
89
|
-
</k-dialog>
|
|
90
|
-
|
|
91
|
-
<h3 id="jsUsage"><a href="#jsUsage" class="no-link">JavaScript Usage</a></h3>
|
|
92
|
-
<h5>Create Dialog</h5>
|
|
93
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d7"</span>></span>Open Dialog<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Dialog.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d7'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Dialog.create(<span class="hljs-string">'Hello World'</span>);<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
94
|
-
<button id="d7" class="mb">Open Dialog</button>
|
|
95
|
-
<script type="module">
|
|
96
|
-
import Dialog from '../src/components/Dialog.js';
|
|
97
|
-
document.getElementById('d7').addEventListener('click', () => {
|
|
98
|
-
Dialog.create('Hello World');
|
|
99
|
-
});
|
|
100
|
-
</script>
|
|
101
|
-
|
|
102
|
-
<h5>Dialog with Title</h5>
|
|
103
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d7b"</span>></span>Open Dialog with Title<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Dialog.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d7b'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Dialog.create(<span class="hljs-string">'This is the dialog content'</span>, {<br /> <span class="hljs-attr">title</span>: <span class="hljs-string">'My Dialog Title'</span><br /> });<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
104
|
-
<button id="d7b" class="mb">Open Dialog with Title</button>
|
|
105
|
-
<script type="module">
|
|
106
|
-
import Dialog from '../src/components/Dialog.js';
|
|
107
|
-
document.getElementById('d7b').addEventListener('click', () => {
|
|
108
|
-
Dialog.create('This is the dialog content', {
|
|
109
|
-
title: 'My Dialog Title'
|
|
110
|
-
});
|
|
111
|
-
});
|
|
112
|
-
</script>
|
|
113
|
-
|
|
114
|
-
<h5>Error Dialog</h5>
|
|
115
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d8"</span>></span>Open Dialog<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Dialog.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d8'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Dialog.error(<span class="hljs-string">"Oh no, don't do that!"</span>);<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
116
|
-
<button id="d8" class="mb">Open Dialog</button>
|
|
117
|
-
<script type="module">
|
|
118
|
-
import Dialog from '../src/components/Dialog.js';
|
|
119
|
-
document.getElementById('d8').addEventListener('click', () => {
|
|
120
|
-
Dialog.error("Oh no, don't do that!");
|
|
121
|
-
});
|
|
122
|
-
</script>
|
|
123
|
-
|
|
124
|
-
<h3 id="confirmDialog"><a href="#confirmDialog" class="no-link">Confirm Dialog</a></h3>
|
|
125
|
-
<p>Use the <code>Dialog.confirm</code> static method to create a confirmation dialog. This method takes a text message, a response callback, and an options object.</p>
|
|
126
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d9"</span>></span>Open Confirm Dialog<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Dialog.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d9'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Dialog.confirm(<span class="hljs-string">"Are you sure you want to proceed?"</span>, <span class="hljs-function"><span class="hljs-params">response</span> =></span> {<br /> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"User response:"</span>, response);<br /> });<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
127
|
-
<button id="d9" class="mb">Open Confirm Dialog</button>
|
|
128
|
-
<script type="module">
|
|
129
|
-
import Dialog from '../src/components/Dialog.js';
|
|
130
|
-
document.getElementById('d9').addEventListener('click', () => {
|
|
131
|
-
Dialog.confirm("Are you sure you want to proceed?", response => {
|
|
132
|
-
console.log("User response:", response);
|
|
133
|
-
});
|
|
134
|
-
});
|
|
135
|
-
</script>
|
|
136
|
-
|
|
137
|
-
<h2 id="jsRef">JavaScript Reference</h2>
|
|
31
|
+
<h3>Description</h3>
|
|
32
|
+
<p>The <code>watchWindowSize</code> utility provides a debounced way to monitor window resize events. It manages multiple handlers efficiently and automatically debounces resize events to improve performance.</p>
|
|
138
33
|
|
|
139
|
-
<h3 id="
|
|
140
|
-
<
|
|
141
|
-
<
|
|
142
|
-
<code>new Dialog()</code><br />
|
|
143
|
-
<code>new Dialog(<i>object</i> options)</code>
|
|
144
|
-
</h5>
|
|
34
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
+
<p>Import and use the window size watching functions:</p>
|
|
36
|
+
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-keyword">const</span> handler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Window width:'</span>, width);<br />};<br /><br /><span class="hljs-comment">// Start watching</span><br /><span class="hljs-keyword">const</span> currentWidth = watchWindowSize(handler);<br /><br /><span class="hljs-comment">// Stop watching when done</span><br />unwatchWindowSize(handler);</code></pre>
|
|
145
37
|
|
|
146
|
-
<
|
|
147
|
-
|
|
148
|
-
<
|
|
38
|
+
<h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
|
|
39
|
+
|
|
40
|
+
<h5><code>watchWindowSize(handler)</code></h5>
|
|
41
|
+
<p>Registers a handler function to be called when the window is resized.</p>
|
|
149
42
|
<ul>
|
|
150
|
-
<li><
|
|
151
|
-
<li><
|
|
152
|
-
<li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog.</li>
|
|
153
|
-
<li><code>confirmText</code>: <i>string</i> - Text for the confirm button.</li>
|
|
154
|
-
<li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button.</li>
|
|
155
|
-
<li><code>confirmAction</code>: <i>function</i> - Action to perform on confirm.</li>
|
|
156
|
-
<li><code>cancelText</code>: <i>string</i> - Text for the cancel button.</li>
|
|
157
|
-
<li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button.</li>
|
|
158
|
-
<li><code>cancelAction</code>: <i>function</i> - Action to perform on cancel.</li>
|
|
159
|
-
<li><code>closeCallback</code>: <i>function</i> - Callback to execute when the dialog is closed.</li>
|
|
43
|
+
<li><strong>handler:</strong> Function that receives the new window width</li>
|
|
44
|
+
<li><strong>Returns:</strong> Current window width</li>
|
|
160
45
|
</ul>
|
|
161
46
|
|
|
162
|
-
<
|
|
47
|
+
<h5><code>unwatchWindowSize(handler)</code></h5>
|
|
48
|
+
<p>Unregisters a previously registered handler function.</p>
|
|
163
49
|
<ul>
|
|
164
|
-
<li><
|
|
165
|
-
<li><a href="./icon.html">Icon</a></li>
|
|
166
|
-
<li><a href="./focus-capture.html">FocusCapture</a></li>
|
|
50
|
+
<li><strong>handler:</strong> The same function reference that was registered</li>
|
|
167
51
|
</ul>
|
|
168
52
|
|
|
169
|
-
<h3 id="
|
|
170
|
-
<h5><code>opened<i>: boolean</i></code></h5>
|
|
171
|
-
<p>Whether the dialog is opened.</p>
|
|
172
|
-
|
|
173
|
-
<h5><code>close-btn<i>: boolean</i></code></h5>
|
|
174
|
-
<p>Whether to show the close button. Default is <code>true</code>.</p>
|
|
175
|
-
|
|
176
|
-
<h5><code>overlay-close<i>: boolean</i></code></h5>
|
|
177
|
-
<p>Whether clicking the overlay closes the dialog. Default is <code>true</code>.</p>
|
|
53
|
+
<h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
|
|
178
54
|
|
|
179
|
-
<
|
|
180
|
-
<
|
|
181
|
-
|
|
182
|
-
<h5><code>confirm-classes<i>: string</i></code></h5>
|
|
183
|
-
<p>Classes for the confirm button. Default is <code>'success ml'</code>.</p>
|
|
184
|
-
|
|
185
|
-
<h5><code>cancel-text<i>: string</i></code></h5>
|
|
186
|
-
<p>Text for the cancel button.</p>
|
|
187
|
-
|
|
188
|
-
<h5><code>cancel-classes<i>: string</i></code></h5>
|
|
189
|
-
<p>Classes for the cancel button.</p>
|
|
55
|
+
<h4>Responsive Component</h4>
|
|
56
|
+
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ResponsiveComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LitElement</span> </span>{<br /> <span class="hljs-keyword">constructor</span>() {<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-keyword">this</span>.isMobile = <span class="hljs-literal">false</span>;<br /> <span class="hljs-keyword">this</span>.resizeHandler = <span class="hljs-keyword">this</span>.handleResize.bind(<span class="hljs-keyword">this</span>);<br /> }<br /><br /> connectedCallback() {<br /> <span class="hljs-keyword">super</span>.connectedCallback();<br /> <span class="hljs-keyword">const</span> currentWidth = watchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> <span class="hljs-keyword">this</span>.handleResize(currentWidth);<br /> }<br /><br /> disconnectedCallback() {<br /> <span class="hljs-keyword">super</span>.disconnectedCallback();<br /> unwatchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> }<br /><br /> handleResize(width) {<br /> <span class="hljs-keyword">this</span>.isMobile = width < <span class="hljs-number">768</span>;<br /> <span class="hljs-keyword">this</span>.requestUpdate();<br /> }<br /><br /> render() {<br /> <span class="hljs-keyword">return</span> html`<span class="xml"><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${<span class="hljs-keyword">this</span>.isMobile ? <span class="hljs-string">'mobile'</span> : <span class="hljs-string">'desktop'</span>}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span><br /> Content adapts to screen size<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> `</span>;<br /> }<br />}</code></pre>
|
|
190
57
|
|
|
191
|
-
<
|
|
192
|
-
<
|
|
193
|
-
<p>Action to perform on confirm. If the function calls <code>event.preventDefault()</code>, the dialog will not close automatically.</p>
|
|
194
|
-
|
|
195
|
-
<h5><code>cancelAction<i>: function</i></code></h5>
|
|
196
|
-
<p>Action to perform on cancel. If the function calls <code>event.preventDefault()</code>, the dialog will not close automatically.</p>
|
|
197
|
-
|
|
198
|
-
<h5><code>closeCallback<i>: function</i></code></h5>
|
|
199
|
-
<p>Callback to execute when the dialog is closed.</p>
|
|
200
|
-
|
|
201
|
-
<h5><code>previousFocus<i>: HTMLElement</i></code></h5>
|
|
202
|
-
<p>Reference to the element that had focus before the dialog was opened.</p>
|
|
58
|
+
<h4>Multiple Handlers</h4>
|
|
59
|
+
<pre><code class="hljs javascript"><span class="hljs-comment">// Handler for navigation</span><br /><span class="hljs-keyword">const</span> navHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">const</span> nav = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.navigation'</span>);<br /> nav.classList.toggle(<span class="hljs-string">'mobile'</span>, width < <span class="hljs-number">1024</span>);<br />};<br /><br /><span class="hljs-comment">// Handler for sidebar</span><br /><span class="hljs-keyword">const</span> sidebarHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">const</span> sidebar = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.sidebar'</span>);<br /> sidebar.style.display = width < <span class="hljs-number">768</span> ? <span class="hljs-string">'none'</span> : <span class="hljs-string">'block'</span>;<br />};<br /><br /><span class="hljs-comment">// Both handlers will be called on resize</span><br />watchWindowSize(navHandler);<br />watchWindowSize(sidebarHandler);<br /><br /><span class="hljs-comment">// Clean up when needed</span><br />unwatchWindowSize(navHandler);<br />unwatchWindowSize(sidebarHandler);</code></pre>
|
|
203
60
|
|
|
204
|
-
<
|
|
205
|
-
<
|
|
206
|
-
<p>Opens the dialog and sets focus to the first focusable element or an element with the <code>autofocus</code> attribute.</p>
|
|
207
|
-
|
|
208
|
-
<h5><code>close()<i>: void</i></code></h5>
|
|
209
|
-
<p>Closes the dialog and calls the <code>closeCallback</code>.</p>
|
|
210
|
-
|
|
211
|
-
<h5><code>toggle()<i>: void</i></code></h5>
|
|
212
|
-
<p>Toggles the dialog open or closed.</p>
|
|
213
|
-
|
|
214
|
-
<h5><code>focus()<i>: void</i></code></h5>
|
|
215
|
-
<p>Focuses the first focusable element in the dialog and saves the previously focused element.</p>
|
|
216
|
-
|
|
217
|
-
<h5><code>blur()<i>: void</i></code></h5>
|
|
218
|
-
<p>Returns focus to the element that had focus before the dialog was opened.</p>
|
|
61
|
+
<h4>Breakpoint Detection</h4>
|
|
62
|
+
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> breakpoints = {<br /> <span class="hljs-attr">mobile</span>: <span class="hljs-number">768</span>,<br /> <span class="hljs-attr">tablet</span>: <span class="hljs-number">1024</span>,<br /> <span class="hljs-attr">desktop</span>: <span class="hljs-number">1200</span><br />};<br /><br /><span class="hljs-keyword">const</span> breakpointHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">let</span> currentBreakpoint = <span class="hljs-string">'mobile'</span>;<br /> <br /> <span class="hljs-keyword">if</span> (width >= breakpoints.desktop) {<br /> currentBreakpoint = <span class="hljs-string">'desktop'</span>;<br /> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (width >= breakpoints.tablet) {<br /> currentBreakpoint = <span class="hljs-string">'tablet'</span>;<br /> }<br /> <br /> <span class="hljs-built_in">document</span>.body.setAttribute(<span class="hljs-string">'data-breakpoint'</span>, currentBreakpoint);<br /> <br /> <span class="hljs-comment">// Dispatch custom event</span><br /> <span class="hljs-built_in">window</span>.dispatchEvent(<span class="hljs-keyword">new</span> CustomEvent(<span class="hljs-string">'breakpointchange'</span>, {<br /> <span class="hljs-attr">detail</span>: { width, <span class="hljs-attr">breakpoint</span>: currentBreakpoint }<br /> }));<br />};<br /><br />watchWindowSize(breakpointHandler);</code></pre>
|
|
219
63
|
|
|
220
|
-
<
|
|
221
|
-
<
|
|
222
|
-
<
|
|
223
|
-
<p>If <code>contents</code> is plain text (no HTML tags), it will automatically be wrapped in a <code><p class="p"></code> tag. If it contains HTML, it will be inserted as-is. If it's an HTMLElement or DocumentFragment, it will be appended directly.</p>
|
|
224
|
-
|
|
225
|
-
<h6>Parameters</h6>
|
|
226
|
-
<ul>
|
|
227
|
-
<li><code>contents<i>: string | HTMLElement | DocumentFragment</i></code> - The content to display in the dialog. Plain text will be wrapped in a paragraph tag automatically.</li>
|
|
228
|
-
<li><code>options<i>: object</i></code> - Configuration options for the dialog.</li>
|
|
229
|
-
</ul>
|
|
230
|
-
|
|
231
|
-
<h6>Options</h6>
|
|
232
|
-
<ul>
|
|
233
|
-
<li><code>title</code>: <i>string | HTMLElement</i> - The title to display in the dialog header. Will be wrapped in an <code><h5></code> tag with the <code>title</code> slot.</li>
|
|
234
|
-
<li><code>titleClasses</code>: <i>string</i> - CSS classes for the title element. Default is <code>'pyh px m0'</code>.</li>
|
|
235
|
-
<li><code>opened</code>: <i>boolean</i> - Whether the dialog is initially opened. Default is <code>true</code>.</li>
|
|
236
|
-
<li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button.</li>
|
|
237
|
-
<li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog.</li>
|
|
238
|
-
<li><code>confirmText</code>: <i>string</i> - Text for the confirm button.</li>
|
|
239
|
-
<li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button.</li>
|
|
240
|
-
<li><code>confirmAction</code>: <i>function</i> - Action to perform on confirm.</li>
|
|
241
|
-
<li><code>cancelText</code>: <i>string</i> - Text for the cancel button.</li>
|
|
242
|
-
<li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button.</li>
|
|
243
|
-
<li><code>cancelAction</code>: <i>function</i> - Action to perform on cancel.</li>
|
|
244
|
-
<li><code>closeCallback</code>: <i>function</i> - Callback to execute when the dialog is closed.</li>
|
|
245
|
-
<li><code>removeOnClose</code>: <i>boolean</i> - Whether to remove the dialog from the DOM when closed. Default is <code>true</code>.</li>
|
|
246
|
-
<li><code>closeExisting</code>: <i>boolean</i> - Whether to close existing dialogs before opening this one. Default is <code>true</code>.</li>
|
|
247
|
-
<li><code>width</code>: <i>string</i> - CSS width value for the dialog.</li>
|
|
248
|
-
<li><code>minWidth</code>: <i>string</i> - CSS min-width value for the dialog.</li>
|
|
249
|
-
<li><code>maxWidth</code>: <i>string</i> - CSS max-width value for the dialog.</li>
|
|
250
|
-
<li><code>height</code>: <i>string</i> - CSS height value for the dialog.</li>
|
|
251
|
-
<li><code>minHeight</code>: <i>string</i> - CSS min-height value for the dialog.</li>
|
|
252
|
-
<li><code>maxHeight</code>: <i>string</i> - CSS max-height value for the dialog.</li>
|
|
253
|
-
</ul>
|
|
254
|
-
|
|
255
|
-
<h5><code>Dialog.confirm(text, responseCallback, options)<i>: Dialog</i></code></h5>
|
|
256
|
-
<p>Creates and opens a confirmation dialog with the specified text and options. The response callback receives a boolean value indicating whether the user confirmed (<code>true</code>) or canceled (<code>false</code>).</p>
|
|
257
|
-
|
|
258
|
-
<h6>Parameters</h6>
|
|
259
|
-
<ul>
|
|
260
|
-
<li><code>text<i>: string</i></code> - The message to display in the dialog.</li>
|
|
261
|
-
<li><code>responseCallback<i>: function</i></code> - Function called with the user's response (<code>true</code> for confirm, <code>false</code> for cancel).</li>
|
|
262
|
-
<li><code>options<i>: object</i></code> - Configuration options.</li>
|
|
263
|
-
</ul>
|
|
264
|
-
|
|
265
|
-
<h6>Options</h6>
|
|
266
|
-
<ul>
|
|
267
|
-
<li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Confirm'</code>.</li>
|
|
268
|
-
<li><code>confirmText</code>: <i>string</i> - Text for the confirm button. Default is <code>'Yes'</code>.</li>
|
|
269
|
-
<li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button. Default is <code>'success ml'</code>.</li>
|
|
270
|
-
<li><code>cancelText</code>: <i>string</i> - Text for the cancel button. Default is <code>'No'</code>.</li>
|
|
271
|
-
<li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button. Default is <code>'danger'</code>.</li>
|
|
272
|
-
<li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button. Default is <code>false</code>.</li>
|
|
273
|
-
<li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog. Default is <code>false</code>.</li>
|
|
274
|
-
</ul>
|
|
275
|
-
|
|
276
|
-
<h5><code>Dialog.alert(text, responseCallback, options)<i>: Dialog</i></code></h5>
|
|
277
|
-
<p>Creates and opens an alert dialog with the specified text and options.</p>
|
|
278
|
-
|
|
279
|
-
<h6>Parameters</h6>
|
|
280
|
-
<ul>
|
|
281
|
-
<li><code>text<i>: string</i></code> - The message to display in the dialog.</li>
|
|
282
|
-
<li><code>responseCallback<i>: function</i></code> - Function called when the dialog is closed.</li>
|
|
283
|
-
<li><code>options<i>: object</i></code> - Configuration options.</li>
|
|
284
|
-
</ul>
|
|
285
|
-
|
|
286
|
-
<h6>Options</h6>
|
|
287
|
-
<ul>
|
|
288
|
-
<li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Alert'</code>.</li>
|
|
289
|
-
<li><code>cancelText</code>: <i>string</i> - Text for the OK button. Default is <code>'Ok'</code>.</li>
|
|
290
|
-
</ul>
|
|
291
|
-
|
|
292
|
-
<h5><code>Dialog.error(text, responseCallback, options)<i>: Dialog</i></code></h5>
|
|
293
|
-
<p>Creates and opens an error dialog with the specified text and options. The title is displayed in red.</p>
|
|
294
|
-
|
|
295
|
-
<h6>Parameters</h6>
|
|
296
|
-
<ul>
|
|
297
|
-
<li><code>text<i>: string</i></code> - The error message to display in the dialog.</li>
|
|
298
|
-
<li><code>responseCallback<i>: function</i></code> - Function called when the dialog is closed.</li>
|
|
299
|
-
<li><code>options<i>: object</i></code> - Configuration options.</li>
|
|
300
|
-
</ul>
|
|
301
|
-
|
|
302
|
-
<h6>Options</h6>
|
|
303
|
-
<ul>
|
|
304
|
-
<li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Error'</code>.</li>
|
|
305
|
-
<li><code>cancelText</code>: <i>string</i> - Text for the OK button. Default is <code>'Ok'</code>.</li>
|
|
306
|
-
</ul>
|
|
307
|
-
|
|
308
|
-
<h5><code>Dialog.success(text, responseCallback, options)<i>: Dialog</i></code></h5>
|
|
309
|
-
<p>Creates and opens a success dialog with the specified text and options. The title is displayed in green.</p>
|
|
310
|
-
|
|
311
|
-
<h6>Parameters</h6>
|
|
312
|
-
<ul>
|
|
313
|
-
<li><code>text<i>: string</i></code> - The success message to display in the dialog.</li>
|
|
314
|
-
<li><code>responseCallback<i>: function</i></code> - Function called when the dialog is closed.</li>
|
|
315
|
-
<li><code>options<i>: object</i></code> - Configuration options.</li>
|
|
316
|
-
</ul>
|
|
317
|
-
|
|
318
|
-
<h6>Options</h6>
|
|
319
|
-
<ul>
|
|
320
|
-
<li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Success'</code>.</li>
|
|
321
|
-
<li><code>cancelText</code>: <i>string</i> - Text for the OK button. Default is <code>'Ok'</code>.</li>
|
|
322
|
-
</ul>
|
|
64
|
+
<h4>Performance Benefits</h4>
|
|
65
|
+
<p>The utility automatically debounces resize events, so you don't need to worry about performance:</p>
|
|
66
|
+
<pre><code class="hljs javascript"><span class="hljs-comment">// This handler will only be called after resize events stop</span><br /><span class="hljs-keyword">const</span> expensiveHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-comment">// Expensive DOM calculations or API calls</span><br /> recalculateLayout();<br /> updateCharts();<br /> reflow();<br />};<br /><br />watchWindowSize(expensiveHandler); <span class="hljs-comment">// Automatically debounced</span></code></pre>
|
|
323
67
|
|
|
324
68
|
</main>
|
|
325
69
|
<div style="height:33vh"></div>
|
|
326
|
-
<script type="module" src="../src/components/Dialog.js"></script>
|
|
327
|
-
<script>
|
|
328
|
-
document.querySelectorAll('.openDialog').forEach( $btn => {
|
|
329
|
-
$btn.addEventListener('click', () => {
|
|
330
|
-
const $dialog = document.getElementById($btn.dataset.dialog);
|
|
331
|
-
if($dialog) $dialog.open();
|
|
332
|
-
});
|
|
333
|
-
});
|
|
334
|
-
</script>
|
|
335
70
|
</body>
|
|
336
|
-
</html>
|
|
71
|
+
</html>
|
|
@@ -3,106 +3,69 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
8
|
-
<link rel="stylesheet" href="../
|
|
6
|
+
<title>watchWindowSize - Kempo UI</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
9
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
10
12
|
<script type="module" src="./init.js"></script>
|
|
11
13
|
</head>
|
|
12
14
|
<body>
|
|
13
15
|
<k-import src="../nav.inc.html"></k-import>
|
|
14
|
-
<h1 class="ta-center">FocusCapture</h1>
|
|
15
16
|
<main>
|
|
16
|
-
<
|
|
17
|
+
<h1>watchWindowSize</h1>
|
|
18
|
+
|
|
19
|
+
<details
|
|
20
|
+
class="b r mb"
|
|
21
|
+
>
|
|
17
22
|
<summary class="p">Table of Contents</summary>
|
|
18
23
|
<div class="m mt0 pl">
|
|
19
|
-
<h6>
|
|
24
|
+
<h6>Usage</h6>
|
|
20
25
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
21
|
-
<a href="#
|
|
22
|
-
|
|
23
|
-
<h6 class="mt">JavaScript Reference</h6>
|
|
24
|
-
<a href="#constructor">Constructor</a><br />
|
|
25
|
-
<a href="#requirements">Requirements</a><br />
|
|
26
|
-
<a href="#properties">Properties</a><br />
|
|
27
|
-
<a href="#methods">Methods</a><br />
|
|
26
|
+
<a href="#functions">Functions</a><br />
|
|
27
|
+
<a href="#examples">Examples</a><br />
|
|
28
28
|
</div>
|
|
29
29
|
</details>
|
|
30
30
|
|
|
31
|
-
<h3
|
|
32
|
-
<p>The <code>
|
|
33
|
-
<div class="row -mx">
|
|
34
|
-
<div class="col m-span-12 px">
|
|
35
|
-
<k-card label="HTML">
|
|
36
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-focus-capture</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span>></span>First Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Input field"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span>></span>Second Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-b mb"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-focus-capture</span>></span></code></pre>
|
|
37
|
-
</k-card>
|
|
38
|
-
</div>
|
|
39
|
-
<div class="col m-span-12 px">
|
|
40
|
-
<k-card label="Output">
|
|
41
|
-
<p class="mb"><em>Tab through the elements below. Focus will cycle back to the first element after the last one.</em></p>
|
|
42
|
-
<k-focus-capture>
|
|
43
|
-
<div class="card">
|
|
44
|
-
<button class="mb">First Button</button>
|
|
45
|
-
<input type="text" placeholder="Input field" class="mb" />
|
|
46
|
-
<button class="mb">Second Button</button>
|
|
47
|
-
<a href="#" class="d-b mb">Link</a>
|
|
48
|
-
</div>
|
|
49
|
-
</k-focus-capture>
|
|
50
|
-
</k-card>
|
|
51
|
-
</div>
|
|
52
|
-
</div>
|
|
53
|
-
|
|
54
|
-
<h3 id="dialogExample"><a href="#dialogExample" class="no-link">Dialog Example</a></h3>
|
|
55
|
-
<p>FocusCapture is used internally by the <a href="dialog.html">Dialog</a> and <a href="side-menu.html">SideMenu</a> components. You do not need to add it yourself. Open the dialog below and tab through the elements to see how focus is trapped within the dialog.</p>
|
|
56
|
-
<div class="row -mx">
|
|
57
|
-
<div class="col m-span-12 px">
|
|
58
|
-
<k-card label="HTML">
|
|
59
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"focusDialog"</span> <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">"Close"</span> <span class="hljs-attr">confirm-text</span>=<span class="hljs-string">"Submit"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"title"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m0 px"</span>></span>Focus Capture Dialog<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Tab through the elements. Focus stays trapped in the dialog.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span> /></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-dialog</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"document.getElementById('focusDialog').open()"</span>></span>Open Dialog<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
60
|
-
</k-card>
|
|
61
|
-
</div>
|
|
62
|
-
<div class="col m-span-12 px">
|
|
63
|
-
<k-card label="Output">
|
|
64
|
-
<button onclick="document.getElementById('focusDialog').open()">Open Dialog</button>
|
|
65
|
-
<k-dialog
|
|
66
|
-
id="focusDialog"
|
|
67
|
-
cancel-text="Close"
|
|
68
|
-
confirm-text="Submit"
|
|
69
|
-
>
|
|
70
|
-
<h6 slot="title" class="m0 px">Focus Capture Dialog</h6>
|
|
71
|
-
<div class="p">
|
|
72
|
-
<p>Tab through the elements. Focus stays trapped in the dialog.</p>
|
|
73
|
-
<input type="text" placeholder="Name" class="mb" />
|
|
74
|
-
<input type="email" placeholder="Email" class="mb" />
|
|
75
|
-
</div>
|
|
76
|
-
</k-dialog>
|
|
77
|
-
</k-card>
|
|
78
|
-
</div>
|
|
79
|
-
</div>
|
|
31
|
+
<h3>Description</h3>
|
|
32
|
+
<p>The <code>watchWindowSize</code> utility provides a debounced way to monitor window resize events. It manages multiple handlers efficiently and automatically debounces resize events to improve performance.</p>
|
|
80
33
|
|
|
81
|
-
<
|
|
34
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
+
<p>Import and use the window size watching functions:</p>
|
|
36
|
+
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-keyword">const</span> handler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Window width:'</span>, width);<br />};<br /><br /><span class="hljs-comment">// Start watching</span><br /><span class="hljs-keyword">const</span> currentWidth = watchWindowSize(handler);<br /><br /><span class="hljs-comment">// Stop watching when done</span><br />unwatchWindowSize(handler);</code></pre>
|
|
82
37
|
|
|
83
|
-
<h3 id="
|
|
84
|
-
|
|
85
|
-
<h5>
|
|
86
|
-
|
|
87
|
-
|
|
38
|
+
<h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
|
|
39
|
+
|
|
40
|
+
<h5><code>watchWindowSize(handler)</code></h5>
|
|
41
|
+
<p>Registers a handler function to be called when the window is resized.</p>
|
|
42
|
+
<ul>
|
|
43
|
+
<li><strong>handler:</strong> Function that receives the new window width</li>
|
|
44
|
+
<li><strong>Returns:</strong> Current window width</li>
|
|
45
|
+
</ul>
|
|
88
46
|
|
|
89
|
-
<
|
|
47
|
+
<h5><code>unwatchWindowSize(handler)</code></h5>
|
|
48
|
+
<p>Unregisters a previously registered handler function.</p>
|
|
90
49
|
<ul>
|
|
91
|
-
<li>
|
|
50
|
+
<li><strong>handler:</strong> The same function reference that was registered</li>
|
|
92
51
|
</ul>
|
|
93
52
|
|
|
94
|
-
<h3 id="
|
|
95
|
-
|
|
96
|
-
<
|
|
53
|
+
<h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
|
|
54
|
+
|
|
55
|
+
<h4>Responsive Component</h4>
|
|
56
|
+
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ResponsiveComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LitElement</span> </span>{<br /> <span class="hljs-keyword">constructor</span>() {<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-keyword">this</span>.isMobile = <span class="hljs-literal">false</span>;<br /> <span class="hljs-keyword">this</span>.resizeHandler = <span class="hljs-keyword">this</span>.handleResize.bind(<span class="hljs-keyword">this</span>);<br /> }<br /><br /> connectedCallback() {<br /> <span class="hljs-keyword">super</span>.connectedCallback();<br /> <span class="hljs-keyword">const</span> currentWidth = watchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> <span class="hljs-keyword">this</span>.handleResize(currentWidth);<br /> }<br /><br /> disconnectedCallback() {<br /> <span class="hljs-keyword">super</span>.disconnectedCallback();<br /> unwatchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> }<br /><br /> handleResize(width) {<br /> <span class="hljs-keyword">this</span>.isMobile = width < <span class="hljs-number">768</span>;<br /> <span class="hljs-keyword">this</span>.requestUpdate();<br /> }<br /><br /> render() {<br /> <span class="hljs-keyword">return</span> html`<span class="xml"><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${<span class="hljs-keyword">this</span>.isMobile ? <span class="hljs-string">'mobile'</span> : <span class="hljs-string">'desktop'</span>}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span><br /> Content adapts to screen size<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> `</span>;<br /> }<br />}</code></pre>
|
|
57
|
+
|
|
58
|
+
<h4>Multiple Handlers</h4>
|
|
59
|
+
<pre><code class="hljs javascript"><span class="hljs-comment">// Handler for navigation</span><br /><span class="hljs-keyword">const</span> navHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">const</span> nav = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.navigation'</span>);<br /> nav.classList.toggle(<span class="hljs-string">'mobile'</span>, width < <span class="hljs-number">1024</span>);<br />};<br /><br /><span class="hljs-comment">// Handler for sidebar</span><br /><span class="hljs-keyword">const</span> sidebarHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">const</span> sidebar = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.sidebar'</span>);<br /> sidebar.style.display = width < <span class="hljs-number">768</span> ? <span class="hljs-string">'none'</span> : <span class="hljs-string">'block'</span>;<br />};<br /><br /><span class="hljs-comment">// Both handlers will be called on resize</span><br />watchWindowSize(navHandler);<br />watchWindowSize(sidebarHandler);<br /><br /><span class="hljs-comment">// Clean up when needed</span><br />unwatchWindowSize(navHandler);<br />unwatchWindowSize(sidebarHandler);</code></pre>
|
|
60
|
+
|
|
61
|
+
<h4>Breakpoint Detection</h4>
|
|
62
|
+
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> breakpoints = {<br /> <span class="hljs-attr">mobile</span>: <span class="hljs-number">768</span>,<br /> <span class="hljs-attr">tablet</span>: <span class="hljs-number">1024</span>,<br /> <span class="hljs-attr">desktop</span>: <span class="hljs-number">1200</span><br />};<br /><br /><span class="hljs-keyword">const</span> breakpointHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">let</span> currentBreakpoint = <span class="hljs-string">'mobile'</span>;<br /> <br /> <span class="hljs-keyword">if</span> (width >= breakpoints.desktop) {<br /> currentBreakpoint = <span class="hljs-string">'desktop'</span>;<br /> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (width >= breakpoints.tablet) {<br /> currentBreakpoint = <span class="hljs-string">'tablet'</span>;<br /> }<br /> <br /> <span class="hljs-built_in">document</span>.body.setAttribute(<span class="hljs-string">'data-breakpoint'</span>, currentBreakpoint);<br /> <br /> <span class="hljs-comment">// Dispatch custom event</span><br /> <span class="hljs-built_in">window</span>.dispatchEvent(<span class="hljs-keyword">new</span> CustomEvent(<span class="hljs-string">'breakpointchange'</span>, {<br /> <span class="hljs-attr">detail</span>: { width, <span class="hljs-attr">breakpoint</span>: currentBreakpoint }<br /> }));<br />};<br /><br />watchWindowSize(breakpointHandler);</code></pre>
|
|
97
63
|
|
|
98
|
-
<
|
|
99
|
-
<
|
|
100
|
-
<
|
|
64
|
+
<h4>Performance Benefits</h4>
|
|
65
|
+
<p>The utility automatically debounces resize events, so you don't need to worry about performance:</p>
|
|
66
|
+
<pre><code class="hljs javascript"><span class="hljs-comment">// This handler will only be called after resize events stop</span><br /><span class="hljs-keyword">const</span> expensiveHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-comment">// Expensive DOM calculations or API calls</span><br /> recalculateLayout();<br /> updateCharts();<br /> reflow();<br />};<br /><br />watchWindowSize(expensiveHandler); <span class="hljs-comment">// Automatically debounced</span></code></pre>
|
|
101
67
|
|
|
102
68
|
</main>
|
|
103
69
|
<div style="height:33vh"></div>
|
|
104
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
105
|
-
<script type="module" src="../src/components/FocusCapture.js"></script>
|
|
106
|
-
<script type="module" src="../src/components/Dialog.js"></script>
|
|
107
70
|
</body>
|
|
108
71
|
</html>
|