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,190 +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">Collapsible</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
|
-
<a href="#
|
|
23
|
-
<a href="#customIcon">Custom Icon</a><br />
|
|
24
|
-
|
|
25
|
-
<h6 class="mt">JavaScript Reference</h6>
|
|
26
|
-
<a href="#constructor">Constructor</a><br />
|
|
27
|
-
<a href="#requirements">Requirements</a><br />
|
|
28
|
-
<a href="#properties">Properties</a><br />
|
|
29
|
-
<a href="#methods">Methods</a><br />
|
|
30
|
-
<a href="#events">Events</a><br />
|
|
31
|
-
<a href="#slots">Slots</a><br />
|
|
26
|
+
<a href="#functions">Functions</a><br />
|
|
27
|
+
<a href="#examples">Examples</a><br />
|
|
32
28
|
</div>
|
|
33
29
|
</details>
|
|
34
30
|
|
|
35
31
|
<h3>Description</h3>
|
|
36
|
-
<p>The
|
|
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>
|
|
37
33
|
|
|
38
34
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
39
|
-
<p>
|
|
40
|
-
|
|
41
|
-
<div class="row -mx mb">
|
|
42
|
-
<div class="col d-span-6 m-span-12 px">
|
|
43
|
-
<k-card label="HTML">
|
|
44
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-collapsible</span>></span>
|
|
45
|
-
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"label"</span>></span>Click to expand<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
|
46
|
-
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>This content can be collapsed or expanded.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
47
|
-
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Add any content here that you want to show/hide.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
48
|
-
<span class="hljs-tag"></<span class="hljs-name">k-collapsible</span>></span></code></pre>
|
|
49
|
-
</k-card>
|
|
50
|
-
</div>
|
|
51
|
-
<div class="col d-span-6 m-span-12 px">
|
|
52
|
-
<k-card label="Output">
|
|
53
|
-
<k-collapsible>
|
|
54
|
-
<span slot="label">Click to expand</span>
|
|
55
|
-
<p>This content can be collapsed or expanded.</p>
|
|
56
|
-
<p>Add any content here that you want to show/hide.</p>
|
|
57
|
-
</k-collapsible>
|
|
58
|
-
</k-card>
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
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>
|
|
61
37
|
|
|
62
|
-
<h3 id="
|
|
63
|
-
<p>Set the <code>opened</code> attribute to have the collapsible start in an expanded state.</p>
|
|
38
|
+
<h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
|
|
64
39
|
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<span class="hljs-tag"></<span class="hljs-name">k-collapsible</span>></span></code></pre>
|
|
72
|
-
</k-card>
|
|
73
|
-
</div>
|
|
74
|
-
<div class="col d-span-6 m-span-12 px">
|
|
75
|
-
<k-card label="Output">
|
|
76
|
-
<k-collapsible opened="true">
|
|
77
|
-
<span slot="label">Already expanded</span>
|
|
78
|
-
<p>This collapsible starts in an open state.</p>
|
|
79
|
-
</k-collapsible>
|
|
80
|
-
</k-card>
|
|
81
|
-
</div>
|
|
82
|
-
</div>
|
|
83
|
-
|
|
84
|
-
<h3 id="customLabel"><a href="#customLabel" class="no-link">Custom Label</a></h3>
|
|
85
|
-
<p>You can put any content in the label slot, including formatted text, icons, or even other components.</p>
|
|
86
|
-
|
|
87
|
-
<div class="row -mx mb">
|
|
88
|
-
<div class="col d-span-6 m-span-12 px">
|
|
89
|
-
<k-card label="HTML">
|
|
90
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-collapsible</span>></span>
|
|
91
|
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"label"</span>></span>
|
|
92
|
-
<span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Advanced Settings<span class="hljs-tag"></<span class="hljs-name">strong</span>></span>
|
|
93
|
-
<span class="hljs-tag"><<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"opacity-50 ml"</span>></span>(Optional)<span class="hljs-tag"></<span class="hljs-name">small</span>></span>
|
|
94
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
95
|
-
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Configure advanced options here.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
96
|
-
<span class="hljs-tag"></<span class="hljs-name">k-collapsible</span>></span></code></pre>
|
|
97
|
-
</k-card>
|
|
98
|
-
</div>
|
|
99
|
-
<div class="col d-span-6 m-span-12 px">
|
|
100
|
-
<k-card label="Output">
|
|
101
|
-
<k-collapsible>
|
|
102
|
-
<div slot="label">
|
|
103
|
-
<strong>Advanced Settings</strong>
|
|
104
|
-
<small class="opacity-50 ml">(Optional)</small>
|
|
105
|
-
</div>
|
|
106
|
-
<p>Configure advanced options here.</p>
|
|
107
|
-
</k-collapsible>
|
|
108
|
-
</k-card>
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
|
|
112
|
-
<h3 id="customIcon"><a href="#customIcon" class="no-link">Custom Icon</a></h3>
|
|
113
|
-
<p>Replace the default chevron icon with your own content using the <code>labelIcon</code> slot.</p>
|
|
114
|
-
|
|
115
|
-
<div class="row -mx mb">
|
|
116
|
-
<div class="col d-span-6 m-span-12 px">
|
|
117
|
-
<k-card label="HTML">
|
|
118
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-collapsible</span>></span>
|
|
119
|
-
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"label"</span>></span>Custom Icon<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
|
120
|
-
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"labelIcon"</span>></span>▼<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
|
121
|
-
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Using a custom arrow icon.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
122
|
-
<span class="hljs-tag"></<span class="hljs-name">k-collapsible</span>></span></code></pre>
|
|
123
|
-
</k-card>
|
|
124
|
-
</div>
|
|
125
|
-
<div class="col d-span-6 m-span-12 px">
|
|
126
|
-
<k-card label="Output">
|
|
127
|
-
<k-collapsible>
|
|
128
|
-
<span slot="label">Custom Icon</span>
|
|
129
|
-
<span slot="labelIcon">▼</span>
|
|
130
|
-
<p>Using a custom arrow icon.</p>
|
|
131
|
-
</k-collapsible>
|
|
132
|
-
</k-card>
|
|
133
|
-
</div>
|
|
134
|
-
</div>
|
|
135
|
-
|
|
136
|
-
<h2 id="jsRef">JavaScript Reference</h2>
|
|
137
|
-
|
|
138
|
-
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
139
|
-
<h6>Extends <a href="./component.html">ShadowComponent</a></h6>
|
|
140
|
-
<h5>
|
|
141
|
-
<code>new Collapsible()</code>
|
|
142
|
-
</h5>
|
|
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>
|
|
143
46
|
|
|
144
|
-
<
|
|
47
|
+
<h5><code>unwatchWindowSize(handler)</code></h5>
|
|
48
|
+
<p>Unregisters a previously registered handler function.</p>
|
|
145
49
|
<ul>
|
|
146
|
-
<li><
|
|
147
|
-
<li><a href="./icon.html">Icon</a></li>
|
|
50
|
+
<li><strong>handler:</strong> The same function reference that was registered</li>
|
|
148
51
|
</ul>
|
|
149
52
|
|
|
150
|
-
<h3 id="
|
|
151
|
-
|
|
152
|
-
<
|
|
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>
|
|
153
57
|
|
|
154
|
-
<
|
|
155
|
-
<
|
|
156
|
-
<p>Expands the collapsible to show its content. Sets <code>opened</code> to <code>true</code>.</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>
|
|
157
60
|
|
|
158
|
-
<
|
|
159
|
-
<
|
|
160
|
-
|
|
161
|
-
<h5><code>toggle()<i>: void</i></code></h5>
|
|
162
|
-
<p>Toggles the collapsible state (expands if collapsed, collapses if expanded). Dispatches an <code>openedtoggled</code> event.</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>
|
|
163
63
|
|
|
164
|
-
<
|
|
165
|
-
<
|
|
166
|
-
<
|
|
167
|
-
|
|
168
|
-
<h5><code>open</code></h5>
|
|
169
|
-
<p>Fired when the collapsible is expanded.</p>
|
|
170
|
-
|
|
171
|
-
<h5><code>close</code></h5>
|
|
172
|
-
<p>Fired when the collapsible is collapsed.</p>
|
|
173
|
-
|
|
174
|
-
<h5><code>openedtoggled</code></h5>
|
|
175
|
-
<p>Fired when the <code>toggle()</code> method is called (typically when the label is clicked).</p>
|
|
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>
|
|
176
67
|
|
|
177
|
-
<h3 id="slots"><a href="#slots" class="no-link">Slots</a></h3>
|
|
178
|
-
<h5><code>Default Slot</code></h5>
|
|
179
|
-
<p>The main content area that can be collapsed or expanded.</p>
|
|
180
|
-
|
|
181
|
-
<h5><code>label</code></h5>
|
|
182
|
-
<p>The clickable label content. This is what users click to toggle the collapsible state.</p>
|
|
183
|
-
|
|
184
|
-
<h5><code>labelIcon</code></h5>
|
|
185
|
-
<p>Custom content for the toggle icon. Defaults to a right-pointing chevron that rotates when expanded. The icon automatically gets hover effects and rotation animations.</p>
|
|
186
|
-
|
|
187
68
|
</main>
|
|
188
|
-
|
|
189
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
190
|
-
<script type="module" src="../src/components/Collapsible.js"></script>
|
|
69
|
+
<div style="height:33vh"></div>
|
|
191
70
|
</body>
|
|
192
71
|
</html>
|
|
@@ -3,216 +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">Content Slider</h1>
|
|
15
16
|
<main>
|
|
17
|
+
<h1>watchWindowSize</h1>
|
|
18
|
+
|
|
16
19
|
<details
|
|
17
20
|
class="b r mb"
|
|
18
21
|
>
|
|
19
22
|
<summary class="p">Table of Contents</summary>
|
|
20
23
|
<div class="m mt0 pl">
|
|
21
|
-
<h6>
|
|
24
|
+
<h6>Usage</h6>
|
|
22
25
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
23
|
-
<a href="#
|
|
24
|
-
<a href="#
|
|
25
|
-
<a href="#controls">Controls</a><br />
|
|
26
|
-
<a href="#loop">Loop</a><br />
|
|
27
|
-
<h6 class="mt">JavaScript Reference</h6>
|
|
28
|
-
<a href="#constructor">Constructor</a><br />
|
|
29
|
-
<a href="#requirements">Requirements</a><br />
|
|
30
|
-
<a href="#properties">Properties</a><br />
|
|
31
|
-
<a href="#methods">Methods</a><br />
|
|
32
|
-
<a href="#events">Events</a><br />
|
|
33
|
-
<a href="#slots">Slots</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
31
|
<h3>Description</h3>
|
|
38
|
-
<p>The
|
|
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>
|
|
39
33
|
|
|
40
34
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-content-slider</span><br /> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 1<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 2<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 3<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 4<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-content-slider</span>></span></code></pre>
|
|
44
|
-
</div>
|
|
45
|
-
<div class="col d-span-6 t-span-6 m-spane-12 p">
|
|
46
|
-
<k-content-slider
|
|
47
|
-
class="bg-alt"
|
|
48
|
-
style="height: 10rem"
|
|
49
|
-
>
|
|
50
|
-
<div><p>Slide 1</p></div>
|
|
51
|
-
<div><p>Slide 2</p></div>
|
|
52
|
-
<div><p>Slide 3</p></div>
|
|
53
|
-
<div><p>Slide 4</p></div>
|
|
54
|
-
</k-content-slider>
|
|
55
|
-
</div>
|
|
56
|
-
</div>
|
|
57
|
-
|
|
58
|
-
<h3 id="keyboardControls"><a href="#keyboardControls" class="no-link">Keyboard Controls</a></h3>
|
|
59
|
-
<p>By default the <code>keyboard-controls</code> attribute is set to <code>"true"</code>, which allows the left and right keyboard buttons to change the slides when the component is focused. Set it to <code>"false"</code> to disable this functionality.</p>
|
|
60
|
-
<div class="row -mx">
|
|
61
|
-
<div class="col d-span-6 t-span-6 m-spane-12 p">
|
|
62
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-content-slider</span><br /> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br /> <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 1<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 2<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 3<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 4<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-content-slider</span>></span></code></pre>
|
|
63
|
-
</div>
|
|
64
|
-
<div class="col d-span-6 t-span-6 m-spane-12 p">
|
|
65
|
-
<k-content-slider
|
|
66
|
-
class="bg-alt"
|
|
67
|
-
style="height: 10rem"
|
|
68
|
-
keyboard-controls="false"
|
|
69
|
-
>
|
|
70
|
-
<div><p>Slide 1</p></div>
|
|
71
|
-
<div><p>Slide 2</p></div>
|
|
72
|
-
<div><p>Slide 3</p></div>
|
|
73
|
-
<div><p>Slide 4</p></div>
|
|
74
|
-
</k-content-slider>
|
|
75
|
-
</div>
|
|
76
|
-
</div>
|
|
77
|
-
|
|
78
|
-
<h3 id="globalControls"><a href="#globalControls" class="no-link">Global Controls</a></h3>
|
|
79
|
-
<p>Use the <code>global-controls="true"</code> attribute to enable global controls (next and back arrows) anywhere in the window, even when this component is not focused. This is suggested when there is only one content slider on a page and it is of prominance (large slider on top of the page).</p>
|
|
80
|
-
<div class="row -mx">
|
|
81
|
-
<div class="col d-span-6 t-span-6 m-spane-12 p">
|
|
82
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-content-slider</span><br /> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br /> <span class="hljs-attr">global-controls</span>=<span class="hljs-string">"true"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 1<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 2<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 3<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 4<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-content-slider</span>></span></code></pre>
|
|
83
|
-
</div>
|
|
84
|
-
<div class="col d-span-6 t-span-6 m-spane-12 p">
|
|
85
|
-
<k-content-slider
|
|
86
|
-
class="bg-alt"
|
|
87
|
-
style="height: 10rem"
|
|
88
|
-
global-controls="true"
|
|
89
|
-
>
|
|
90
|
-
<div><p>Slide 1</p></div>
|
|
91
|
-
<div><p>Slide 2</p></div>
|
|
92
|
-
<div><p>Slide 3</p></div>
|
|
93
|
-
<div><p>Slide 4</p></div>
|
|
94
|
-
</k-content-slider>
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
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>
|
|
97
37
|
|
|
98
|
-
<h3 id="
|
|
99
|
-
|
|
100
|
-
<
|
|
101
|
-
|
|
102
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-content-slider</span><br /> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br /> <span class="hljs-attr">controls</span>=<span class="hljs-string">"false"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 1<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 2<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 3<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 4<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-content-slider</span>></span></code></pre>
|
|
103
|
-
</div>
|
|
104
|
-
<div class="col d-span-6 t-span-6 m-spane-12 p">
|
|
105
|
-
<k-content-slider
|
|
106
|
-
class="bg-alt"
|
|
107
|
-
style="height: 10rem"
|
|
108
|
-
controls="false"
|
|
109
|
-
>
|
|
110
|
-
<div><p>Slide 1</p></div>
|
|
111
|
-
<div><p>Slide 2</p></div>
|
|
112
|
-
<div><p>Slide 3</p></div>
|
|
113
|
-
<div><p>Slide 4</p></div>
|
|
114
|
-
</k-content-slider>
|
|
115
|
-
</div>
|
|
116
|
-
</div>
|
|
117
|
-
|
|
118
|
-
<h3 id="loop"><a href="#loop" class="no-link">Loop</a></h3>
|
|
119
|
-
<p>To make the slider loop (go back to the beginning after it hits the last slide) use the <code>loop="true"</code> attribute.</p>
|
|
120
|
-
<div class="row -mx">
|
|
121
|
-
<div class="col d-span-6 t-span-6 m-spane-12 p">
|
|
122
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-content-slider</span><br /> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span><br /> <span class="hljs-attr">loop</span>=<span class="hljs-string">"true"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 1<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 2<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 3<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Slide 4<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-content-slider</span>></span></code></pre>
|
|
123
|
-
</div>
|
|
124
|
-
<div class="col d-span-6 t-span-6 m-spane-12 p">
|
|
125
|
-
<k-content-slider
|
|
126
|
-
class="bg-alt"
|
|
127
|
-
style="height: 10rem"
|
|
128
|
-
loop="true"
|
|
129
|
-
>
|
|
130
|
-
<div><p>Slide 1</p></div>
|
|
131
|
-
<div><p>Slide 2</p></div>
|
|
132
|
-
<div><p>Slide 3</p></div>
|
|
133
|
-
<div><p>Slide 4</p></div>
|
|
134
|
-
</k-content-slider>
|
|
135
|
-
</div>
|
|
136
|
-
</div>
|
|
137
|
-
|
|
138
|
-
<h2 id="jsRef">JavaScript Refrerence</h2>
|
|
139
|
-
|
|
140
|
-
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
141
|
-
<h6>Extends <a href="./component.html">ShadowComponent</a></h6>
|
|
142
|
-
<h5>
|
|
143
|
-
<code>new ContentSlider()</code>
|
|
144
|
-
</h5>
|
|
145
|
-
|
|
146
|
-
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
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>
|
|
147
42
|
<ul>
|
|
148
|
-
<li><
|
|
149
|
-
<li><
|
|
43
|
+
<li><strong>handler:</strong> Function that receives the new window width</li>
|
|
44
|
+
<li><strong>Returns:</strong> Current window width</li>
|
|
150
45
|
</ul>
|
|
151
46
|
|
|
152
|
-
<
|
|
153
|
-
<
|
|
154
|
-
<p>Gets or sets the current slide index. Automatically validates to stay within bounds. Syncs to <code>index</code> attribute. Default value is <code>0</code>.</p>
|
|
155
|
-
|
|
156
|
-
<h5><code>controls<i>: boolean</i></code></h5>
|
|
157
|
-
<p>Gets or sets whether control buttons are visible. Syncs to <code>controls</code> attribute. Default value is <code>true</code>.</p>
|
|
158
|
-
|
|
159
|
-
<h5><code>keyboardControls<i>: boolean</i></code></h5>
|
|
160
|
-
<p>Gets or sets whether keyboard controls are enabled. Syncs to <code>keyboard-controls</code> attribute. Default value is <code>true</code>.</p>
|
|
161
|
-
|
|
162
|
-
<h5><code>globalControls<i>: boolean</i></code></h5>
|
|
163
|
-
<p>Gets or sets whether global keyboard controls are enabled. Use with caution - recommended only for prominent sliders. Syncs to <code>global-controls</code> attribute. Default value is <code>false</code>.</p>
|
|
164
|
-
|
|
165
|
-
<h5><code>loop<i>: boolean</i></code></h5>
|
|
166
|
-
<p>Gets or sets whether the slider loops continuously (after the last slide, go to the first; before the first slide, go to the last). Syncs to <code>loop</code> attribute. Default value is <code>false</code>.</p>
|
|
167
|
-
|
|
168
|
-
<h5><code>content<i>: Array<HTMLElement></i></code></h5>
|
|
169
|
-
<p>Array of child elements that serve as slides. Automatically updated when the component is connected.</p>
|
|
170
|
-
|
|
171
|
-
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
172
|
-
<h5><code>previous()<i>: void</i></code></h5>
|
|
173
|
-
<p>Navigates to the previous slide. If <code>loop</code> is enabled and currently on the first slide, goes to the last slide. Dispatches a <code>previous</code> event.</p>
|
|
174
|
-
|
|
175
|
-
<h5><code>next()<i>: void</i></code></h5>
|
|
176
|
-
<p>Navigates to the next slide. If <code>loop</code> is enabled and currently on the last slide, goes to the first slide. Dispatches a <code>next</code> event.</p>
|
|
177
|
-
|
|
178
|
-
<h5><code>goto(index)<i>: void</i></code></h5>
|
|
179
|
-
<p>Navigates to the slide at the specified index. Index is automatically validated to stay within bounds. Dispatches a <code>goto</code> event.</p>
|
|
47
|
+
<h5><code>unwatchWindowSize(handler)</code></h5>
|
|
48
|
+
<p>Unregisters a previously registered handler function.</p>
|
|
180
49
|
<ul>
|
|
181
|
-
<li><strong>
|
|
50
|
+
<li><strong>handler:</strong> The same function reference that was registered</li>
|
|
182
51
|
</ul>
|
|
183
52
|
|
|
184
|
-
<h3 id="
|
|
185
|
-
<h5><code>change</code></h5>
|
|
186
|
-
<p>Fired when the active slide changes. The event detail contains <code>{ index }</code>.</p>
|
|
187
|
-
|
|
188
|
-
<h5><code>previous</code></h5>
|
|
189
|
-
<p>Fired when the previous button is clicked or previous navigation is triggered. The event detail contains <code>{ index }</code> of the target slide.</p>
|
|
53
|
+
<h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
|
|
190
54
|
|
|
191
|
-
<
|
|
192
|
-
<
|
|
193
|
-
|
|
194
|
-
<
|
|
195
|
-
<
|
|
196
|
-
|
|
197
|
-
<
|
|
198
|
-
<
|
|
199
|
-
|
|
200
|
-
<
|
|
201
|
-
<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>
|
|
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>
|
|
63
|
+
|
|
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>
|
|
202
67
|
|
|
203
|
-
<h3 id="slots"><a href="#slots" class="no-link">Slots</a></h3>
|
|
204
|
-
<h5><code>Default Slot</code></h5>
|
|
205
|
-
<p>The main content area where slide elements are placed. Each direct child element becomes a slide.</p>
|
|
206
|
-
|
|
207
|
-
<h5><code>prev</code></h5>
|
|
208
|
-
<p>Custom content for the previous button. Defaults to a left chevron icon if not provided.</p>
|
|
209
|
-
|
|
210
|
-
<h5><code>next</code></h5>
|
|
211
|
-
<p>Custom content for the next button. Defaults to a right chevron icon if not provided.</p>
|
|
212
|
-
|
|
213
68
|
</main>
|
|
214
69
|
<div style="height:33vh"></div>
|
|
215
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
216
|
-
<script type="module" src="../src/components/ContentSlider.js"></script>
|
|
217
70
|
</body>
|
|
218
|
-
</html>
|
|
71
|
+
</html>
|