@ulu/frontend 0.1.0-beta.76 → 0.1.0-beta.77
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/CHANGELOG.md +7 -0
- package/dist/ulu-frontend.min.js +14 -14
- package/docs-dev/demos/card/index.html +16 -16
- package/docs-dev/demos/data-table/index.html +100 -100
- package/docs-dev/demos/popovers/index.html +5 -5
- package/docs-dev/javascript/utils-dom/index.html +1 -215
- package/js/ui/dialog.js +1 -1
- package/js/ui/modal-builder.js +2 -3
- package/js/ui/page.js +2 -2
- package/js/ui/print.js +1 -1
- package/js/ui/programmatic-modal.js +1 -1
- package/js/ui/scrollpoint.js +1 -1
- package/js/ui/theme-toggle.js +2 -1
- package/js/utils/dom.js +2 -120
- package/js/utils/system.js +2 -1
- package/package.json +2 -2
- package/types/ui/modal-builder.d.ts.map +1 -1
- package/types/ui/theme-toggle.d.ts.map +1 -1
- package/types/utils/dom.d.ts +0 -59
- package/types/utils/dom.d.ts.map +1 -1
- package/types/utils/system.d.ts.map +1 -1
|
@@ -5199,32 +5199,11 @@
|
|
|
5199
5199
|
<li><a href="#utils%2Fdom.dataattributetodatasetkey(dataattribute)-%E2%87%92-string">utils/dom.dataAttributeToDatasetKey(dataAttribute) ⇒ string</a>
|
|
5200
5200
|
</li>
|
|
5201
5201
|
|
|
5202
|
-
<li><a href="#utils%2Fdom.getdatasetjson(element%2C-key)-%E2%87%92-object">utils/dom.getDatasetJson(element, key) ⇒ Object</a>
|
|
5203
|
-
</li>
|
|
5204
|
-
|
|
5205
|
-
<li><a href="#utils%2Fdom.getdatasetoptionaljson(element%2C-key)-%E2%87%92-object-%7C-string">utils/dom.getDatasetOptionalJson(element, key) ⇒ Object | String</a>
|
|
5206
|
-
</li>
|
|
5207
|
-
|
|
5208
|
-
<li><a href="#utils%2Fdom.wasclickoutside()">utils/dom.wasClickOutside()</a>
|
|
5209
|
-
</li>
|
|
5210
|
-
|
|
5211
5202
|
<li><a href="#utils%2Fdom.setpositionclasses(parent%2C-classes)">utils/dom.setPositionClasses(parent, classes)</a>
|
|
5212
5203
|
</li>
|
|
5213
5204
|
|
|
5214
|
-
<li><a href="#utils%2Fdom.getelement(target%2C-context)-%E2%87%92-htmlelement">utils/dom.getElement(target, context) ⇒ HTMLElement</a>
|
|
5215
|
-
</li>
|
|
5216
|
-
|
|
5217
|
-
<li><a href="#utils%2Fdom.getelements(target%2C-context)-%E2%87%92-array">utils/dom.getElements(target, context) ⇒ Array</a>
|
|
5218
|
-
</li>
|
|
5219
|
-
|
|
5220
5205
|
<li><a href="#utils%2Fdom.resolveclasses(input)-%E2%87%92-array.%3Cstring%3E">utils/dom.resolveClasses(input) ⇒ Array.<string></string></a>
|
|
5221
5206
|
</li>
|
|
5222
|
-
|
|
5223
|
-
<li><a href="#utils%2Fdom.addscrollbarproperty(options)">utils/dom.addScrollbarProperty(options)</a>
|
|
5224
|
-
</li>
|
|
5225
|
-
|
|
5226
|
-
<li><a href="#utils%2Fdom.getscrollbarwidth(%5Belement%5D%2C-%5Bcontainer%5D)-%E2%87%92-number">utils/dom.getScrollbarWidth([element], [container]) ⇒ number</a>
|
|
5227
|
-
</li>
|
|
5228
5207
|
</ol>
|
|
5229
5208
|
</div>
|
|
5230
5209
|
</div>
|
|
@@ -5242,15 +5221,8 @@
|
|
|
5242
5221
|
<li><a href="#module_utils/dom">utils/dom</a>
|
|
5243
5222
|
<ul>
|
|
5244
5223
|
<li><a href="#module_utils/dom.dataAttributeToDatasetKey">.dataAttributeToDatasetKey(dataAttribute)</a> ⇒ <code>string</code></li>
|
|
5245
|
-
<li><a href="#module_utils/dom.getDatasetJson">.getDatasetJson(element, key)</a> ⇒ <code>Object</code></li>
|
|
5246
|
-
<li><a href="#module_utils/dom.getDatasetOptionalJson">.getDatasetOptionalJson(element, key)</a> ⇒ <code>Object</code> | <code>String</code></li>
|
|
5247
|
-
<li><a href="#module_utils/dom.wasClickOutside">.wasClickOutside()</a></li>
|
|
5248
5224
|
<li><a href="#module_utils/dom.setPositionClasses">.setPositionClasses(parent, classes)</a></li>
|
|
5249
|
-
<li><a href="#module_utils/dom.getElement">.getElement(target, context)</a> ⇒ <code>HTMLElement</code></li>
|
|
5250
|
-
<li><a href="#module_utils/dom.getElements">.getElements(target, context)</a> ⇒ <code>Array</code></li>
|
|
5251
5225
|
<li><a href="#module_utils/dom.resolveClasses">.resolveClasses(input)</a> ⇒ <code>Array.<string></code></li>
|
|
5252
|
-
<li><a href="#module_utils/dom.addScrollbarProperty">.addScrollbarProperty(options)</a></li>
|
|
5253
|
-
<li><a href="#module_utils/dom.getScrollbarWidth">.getScrollbarWidth([element], [container])</a> ⇒ <code>number</code></li>
|
|
5254
5226
|
</ul>
|
|
5255
5227
|
</li>
|
|
5256
5228
|
</ul>
|
|
@@ -5275,66 +5247,7 @@
|
|
|
5275
5247
|
</tr>
|
|
5276
5248
|
</tbody>
|
|
5277
5249
|
</table>
|
|
5278
|
-
<p><a name="module_utils/dom.
|
|
5279
|
-
<h2 id="utils%2Fdom.getdatasetjson(element%2C-key)-%E2%87%92-object" tabindex="-1">utils/dom.getDatasetJson(element, key) ⇒ <code>Object</code></h2>
|
|
5280
|
-
<p>Get an elements JSON dataset value</p>
|
|
5281
|
-
<p><strong>Kind</strong>: static method of <a href="#module_utils/dom"><code>utils/dom</code></a><br>
|
|
5282
|
-
<strong>Returns</strong>: <code>Object</code> - Empty object or JSON object from dataset</p>
|
|
5283
|
-
<table>
|
|
5284
|
-
<thead>
|
|
5285
|
-
<tr>
|
|
5286
|
-
<th>Param</th>
|
|
5287
|
-
<th>Type</th>
|
|
5288
|
-
<th>Description</th>
|
|
5289
|
-
</tr>
|
|
5290
|
-
</thead>
|
|
5291
|
-
<tbody>
|
|
5292
|
-
<tr>
|
|
5293
|
-
<td>element</td>
|
|
5294
|
-
<td><code>Node</code></td>
|
|
5295
|
-
<td></td>
|
|
5296
|
-
</tr>
|
|
5297
|
-
<tr>
|
|
5298
|
-
<td>key</td>
|
|
5299
|
-
<td><code>String</code></td>
|
|
5300
|
-
<td>key in dataset object for element</td>
|
|
5301
|
-
</tr>
|
|
5302
|
-
</tbody>
|
|
5303
|
-
</table>
|
|
5304
|
-
<p><a name="module_utils/dom.getDatasetOptionalJson"></a></p>
|
|
5305
|
-
<h2 id="utils%2Fdom.getdatasetoptionaljson(element%2C-key)-%E2%87%92-object-%7C-string" tabindex="-1">utils/dom.getDatasetOptionalJson(element, key) ⇒ <code>Object</code> | <code>String</code></h2>
|
|
5306
|
-
<p>Get an elements JSON dataset value that could potentially just be a single string</p>
|
|
5307
|
-
<ul>
|
|
5308
|
-
<li>If JSON it will return the object else it will return the value directly</li>
|
|
5309
|
-
</ul>
|
|
5310
|
-
<p><strong>Kind</strong>: static method of <a href="#module_utils/dom"><code>utils/dom</code></a><br>
|
|
5311
|
-
<strong>Returns</strong>: <code>Object</code> | <code>String</code> - JSON object or current dataset value (string or empty string if no value)</p>
|
|
5312
|
-
<table>
|
|
5313
|
-
<thead>
|
|
5314
|
-
<tr>
|
|
5315
|
-
<th>Param</th>
|
|
5316
|
-
<th>Type</th>
|
|
5317
|
-
<th>Description</th>
|
|
5318
|
-
</tr>
|
|
5319
|
-
</thead>
|
|
5320
|
-
<tbody>
|
|
5321
|
-
<tr>
|
|
5322
|
-
<td>element</td>
|
|
5323
|
-
<td><code>Node</code></td>
|
|
5324
|
-
<td></td>
|
|
5325
|
-
</tr>
|
|
5326
|
-
<tr>
|
|
5327
|
-
<td>key</td>
|
|
5328
|
-
<td><code>String</code></td>
|
|
5329
|
-
<td>key in dataset object for element</td>
|
|
5330
|
-
</tr>
|
|
5331
|
-
</tbody>
|
|
5332
|
-
</table>
|
|
5333
|
-
<p><a name="module_utils/dom.wasClickOutside"></a></p>
|
|
5334
|
-
<h2 id="utils%2Fdom.wasclickoutside()" tabindex="-1">utils/dom.wasClickOutside()</h2>
|
|
5335
|
-
<p>Check if a pointer event x/y was outside an elements bounding box</p>
|
|
5336
|
-
<p><strong>Kind</strong>: static method of <a href="#module_utils/dom"><code>utils/dom</code></a><br>
|
|
5337
|
-
<a name="module_utils/dom.setPositionClasses"></a></p>
|
|
5250
|
+
<p><a name="module_utils/dom.setPositionClasses"></a></p>
|
|
5338
5251
|
<h2 id="utils%2Fdom.setpositionclasses(parent%2C-classes)" tabindex="-1">utils/dom.setPositionClasses(parent, classes)</h2>
|
|
5339
5252
|
<p>Sets up the positional classes that would come from the equal
|
|
5340
5253
|
height module. Needs to be rerun by user when layout changes
|
|
@@ -5366,58 +5279,6 @@ or new instances are added to the screen</p>
|
|
|
5366
5279
|
</tr>
|
|
5367
5280
|
</tbody>
|
|
5368
5281
|
</table>
|
|
5369
|
-
<p><a name="module_utils/dom.getElement"></a></p>
|
|
5370
|
-
<h2 id="utils%2Fdom.getelement(target%2C-context)-%E2%87%92-htmlelement" tabindex="-1">utils/dom.getElement(target, context) ⇒ <code>HTMLElement</code></h2>
|
|
5371
|
-
<p>Resolve a target to Element</p>
|
|
5372
|
-
<p><strong>Kind</strong>: static method of <a href="#module_utils/dom"><code>utils/dom</code></a><br>
|
|
5373
|
-
<strong>Returns</strong>: <code>HTMLElement</code> - The element or null if not found</p>
|
|
5374
|
-
<table>
|
|
5375
|
-
<thead>
|
|
5376
|
-
<tr>
|
|
5377
|
-
<th>Param</th>
|
|
5378
|
-
<th>Type</th>
|
|
5379
|
-
<th>Description</th>
|
|
5380
|
-
</tr>
|
|
5381
|
-
</thead>
|
|
5382
|
-
<tbody>
|
|
5383
|
-
<tr>
|
|
5384
|
-
<td>target</td>
|
|
5385
|
-
<td><code>String</code> | <code>Node</code></td>
|
|
5386
|
-
<td>The selector or node/element</td>
|
|
5387
|
-
</tr>
|
|
5388
|
-
<tr>
|
|
5389
|
-
<td>context</td>
|
|
5390
|
-
<td><code>Object</code></td>
|
|
5391
|
-
<td>[document] The context to query possible selectors from</td>
|
|
5392
|
-
</tr>
|
|
5393
|
-
</tbody>
|
|
5394
|
-
</table>
|
|
5395
|
-
<p><a name="module_utils/dom.getElements"></a></p>
|
|
5396
|
-
<h2 id="utils%2Fdom.getelements(target%2C-context)-%E2%87%92-array" tabindex="-1">utils/dom.getElements(target, context) ⇒ <code>Array</code></h2>
|
|
5397
|
-
<p>Resolve a target to Elements</p>
|
|
5398
|
-
<p><strong>Kind</strong>: static method of <a href="#module_utils/dom"><code>utils/dom</code></a><br>
|
|
5399
|
-
<strong>Returns</strong>: <code>Array</code> - The elements or null if not found</p>
|
|
5400
|
-
<table>
|
|
5401
|
-
<thead>
|
|
5402
|
-
<tr>
|
|
5403
|
-
<th>Param</th>
|
|
5404
|
-
<th>Type</th>
|
|
5405
|
-
<th>Description</th>
|
|
5406
|
-
</tr>
|
|
5407
|
-
</thead>
|
|
5408
|
-
<tbody>
|
|
5409
|
-
<tr>
|
|
5410
|
-
<td>target</td>
|
|
5411
|
-
<td><code>String</code> | <code>Node</code></td>
|
|
5412
|
-
<td>The selector or node/element</td>
|
|
5413
|
-
</tr>
|
|
5414
|
-
<tr>
|
|
5415
|
-
<td>context</td>
|
|
5416
|
-
<td><code>Object</code></td>
|
|
5417
|
-
<td>[document] The context to query possible selectors from</td>
|
|
5418
|
-
</tr>
|
|
5419
|
-
</tbody>
|
|
5420
|
-
</table>
|
|
5421
5282
|
<p><a name="module_utils/dom.resolveClasses"></a></p>
|
|
5422
5283
|
<h2 id="utils%2Fdom.resolveclasses(input)-%E2%87%92-array.%3Cstring%3E" tabindex="-1">utils/dom.resolveClasses(input) ⇒ <code>Array.<string></code></h2>
|
|
5423
5284
|
<p>Resolves a class input (string or array) into a consistent array of class names.</p>
|
|
@@ -5443,81 +5304,6 @@ or new instances are added to the screen</p>
|
|
|
5443
5304
|
<pre class="language-js"><code class="language-js"><span class="pjs-token pjs-function">resolveClassArray</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"fas fa-check my-class"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span> <span class="pjs-token pjs-comment">// Returns ["fas", "fa-check", "my-class"]</span>
|
|
5444
5305
|
<span class="pjs-token pjs-function">resolveClassArray</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">[</span><span class="pjs-token pjs-string">"another-class"</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"yet-another-class"</span><span class="pjs-token pjs-punctuation">]</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span> <span class="pjs-token pjs-comment">// Returns ["another-class", "yet-another-class"]</span>
|
|
5445
5306
|
<span class="pjs-token pjs-function">resolveClassArray</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"single-class"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span> <span class="pjs-token pjs-comment">// Returns ["single-class"]</span></code></pre>
|
|
5446
|
-
<p><a name="module_utils/dom.addScrollbarProperty"></a></p>
|
|
5447
|
-
<h2 id="utils%2Fdom.addscrollbarproperty(options)" tabindex="-1">utils/dom.addScrollbarProperty(options)</h2>
|
|
5448
|
-
<p>Sets a CSS custom property equal to the scrollbar width.</p>
|
|
5449
|
-
<p><strong>Kind</strong>: static method of <a href="#module_utils/dom"><code>utils/dom</code></a></p>
|
|
5450
|
-
<table>
|
|
5451
|
-
<thead>
|
|
5452
|
-
<tr>
|
|
5453
|
-
<th>Param</th>
|
|
5454
|
-
<th>Type</th>
|
|
5455
|
-
<th>Default</th>
|
|
5456
|
-
<th>Description</th>
|
|
5457
|
-
</tr>
|
|
5458
|
-
</thead>
|
|
5459
|
-
<tbody>
|
|
5460
|
-
<tr>
|
|
5461
|
-
<td>options</td>
|
|
5462
|
-
<td><code>object</code></td>
|
|
5463
|
-
<td></td>
|
|
5464
|
-
<td>Configuration options.</td>
|
|
5465
|
-
</tr>
|
|
5466
|
-
<tr>
|
|
5467
|
-
<td>[options.scrollableChild]</td>
|
|
5468
|
-
<td><code>HTMLElement</code></td>
|
|
5469
|
-
<td><code>document.body</code></td>
|
|
5470
|
-
<td>An element that is a child of a scrollable container (used for width calculation).</td>
|
|
5471
|
-
</tr>
|
|
5472
|
-
<tr>
|
|
5473
|
-
<td>[options.container]</td>
|
|
5474
|
-
<td><code>Window</code> | <code>HTMLElement</code></td>
|
|
5475
|
-
<td><code>window</code></td>
|
|
5476
|
-
<td>The container that can be scrolled (used for width calculation).</td>
|
|
5477
|
-
</tr>
|
|
5478
|
-
<tr>
|
|
5479
|
-
<td>[options.propertyElement]</td>
|
|
5480
|
-
<td><code>HTMLElement</code></td>
|
|
5481
|
-
<td><code>document.documentElement</code></td>
|
|
5482
|
-
<td>The element to which the custom property will be added. Defaults to document.documentElement for :root access.</td>
|
|
5483
|
-
</tr>
|
|
5484
|
-
<tr>
|
|
5485
|
-
<td>[options.propName]</td>
|
|
5486
|
-
<td><code>string</code></td>
|
|
5487
|
-
<td><code>"&quot;--ulu-scrollbar-width&quot;"</code></td>
|
|
5488
|
-
<td>The name of the custom property to set.</td>
|
|
5489
|
-
</tr>
|
|
5490
|
-
</tbody>
|
|
5491
|
-
</table>
|
|
5492
|
-
<p><a name="module_utils/dom.getScrollbarWidth"></a></p>
|
|
5493
|
-
<h2 id="utils%2Fdom.getscrollbarwidth(%5Belement%5D%2C-%5Bcontainer%5D)-%E2%87%92-number" tabindex="-1">utils/dom.getScrollbarWidth([element], [container]) ⇒ <code>number</code></h2>
|
|
5494
|
-
<p>Calculates the width of the scrollbar.</p>
|
|
5495
|
-
<p><strong>Kind</strong>: static method of <a href="#module_utils/dom"><code>utils/dom</code></a><br>
|
|
5496
|
-
<strong>Returns</strong>: <code>number</code> - The width of the scrollbar in pixels.</p>
|
|
5497
|
-
<table>
|
|
5498
|
-
<thead>
|
|
5499
|
-
<tr>
|
|
5500
|
-
<th>Param</th>
|
|
5501
|
-
<th>Type</th>
|
|
5502
|
-
<th>Default</th>
|
|
5503
|
-
<th>Description</th>
|
|
5504
|
-
</tr>
|
|
5505
|
-
</thead>
|
|
5506
|
-
<tbody>
|
|
5507
|
-
<tr>
|
|
5508
|
-
<td>[element]</td>
|
|
5509
|
-
<td><code>HTMLElement</code></td>
|
|
5510
|
-
<td><code>document.body</code></td>
|
|
5511
|
-
<td>The element that is the child of a scrollable container</td>
|
|
5512
|
-
</tr>
|
|
5513
|
-
<tr>
|
|
5514
|
-
<td>[container]</td>
|
|
5515
|
-
<td><code>Window</code> | <code>HTMLElement</code></td>
|
|
5516
|
-
<td><code>window</code></td>
|
|
5517
|
-
<td>The container that can be scrolled</td>
|
|
5518
|
-
</tr>
|
|
5519
|
-
</tbody>
|
|
5520
|
-
</table>
|
|
5521
5307
|
|
|
5522
5308
|
</div>
|
|
5523
5309
|
</div>
|
package/js/ui/dialog.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
import { ComponentInitializer } from "../utils/system.js";
|
|
6
|
-
import { wasClickOutside, getScrollbarWidth } from "
|
|
6
|
+
import { wasClickOutside, getScrollbarWidth } from "@ulu/utils/browser/dom.js";
|
|
7
7
|
import { pauseVideos as pauseYoutubeVideos, prepVideos as prepYoutubeVideos } from "../utils/pause-youtube-video.js";
|
|
8
8
|
|
|
9
9
|
/**
|
package/js/ui/modal-builder.js
CHANGED
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import { ComponentInitializer } from "../utils/system.js";
|
|
7
|
-
import { getElement } from "../utils/dom.js";
|
|
8
7
|
import { wrapSettingString } from "../settings.js";
|
|
9
8
|
import { getName } from "../events/index.js";
|
|
10
|
-
import { createElementFromHtml } from "@ulu/utils/browser/dom.js";
|
|
11
9
|
import { Resizer } from "./resizer.js";
|
|
12
10
|
import { baseAttribute, closeAttribute, defaults as dialogDefaults } from "./dialog.js";
|
|
11
|
+
import { getElement } from "@ulu/utils/browser/dom.js";
|
|
12
|
+
import { createElementFromHtml } from "@ulu/utils/browser/dom.js";
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* Modal Builder Component Initializer
|
|
@@ -106,7 +106,6 @@ export const defaults = {
|
|
|
106
106
|
...(config.class ? [config.class] : []),
|
|
107
107
|
];
|
|
108
108
|
const labelledby = config.title ? `${ id }--title` : config.labelledby;
|
|
109
|
-
const hasFooter = footerElement || footerHtml;
|
|
110
109
|
return `
|
|
111
110
|
<dialog
|
|
112
111
|
id="${ id }"
|
package/js/ui/page.js
CHANGED
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
* @module ui/page
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
-
import {
|
|
7
|
+
import { addScrollbarCustomProperty } from "@ulu/utils/browser/dom.js";
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* Initialize page module
|
|
11
11
|
*/
|
|
12
12
|
export function init() {
|
|
13
|
-
|
|
13
|
+
addScrollbarCustomProperty();
|
|
14
14
|
}
|
package/js/ui/print.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
import { ComponentInitializer } from "../utils/system.js";
|
|
6
|
-
import { getElement } from "
|
|
6
|
+
import { getElement } from "@ulu/utils/browser/dom.js";
|
|
7
7
|
import { printElement } from "@ulu/utils/browser/print.js";
|
|
8
8
|
|
|
9
9
|
const initializer = new ComponentInitializer({
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
|
|
6
6
|
import { getName, dispatch } from "../events/index.js";
|
|
7
7
|
import { newId } from "../utils/id.js";
|
|
8
|
-
import { getElement } from "../utils/dom.js";
|
|
9
8
|
import { buildModal } from "./modal-builder.js";
|
|
9
|
+
import { getElement } from "@ulu/utils/browser/dom.js";
|
|
10
10
|
|
|
11
11
|
export class ProgrammaticModalManager {
|
|
12
12
|
static defaults = {
|
package/js/ui/scrollpoint.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
import { ComponentInitializer } from "../utils/system.js";
|
|
7
7
|
import { logError } from "../utils/class-logger.js";
|
|
8
|
-
import { getElement } from "
|
|
8
|
+
import { getElement } from "@ulu/utils/browser/dom.js";
|
|
9
9
|
|
|
10
10
|
// TODO:
|
|
11
11
|
// - Included a group option or attribute (on container), for things like anchor menus (one active in group at a time).
|
package/js/ui/theme-toggle.js
CHANGED
|
@@ -4,8 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
import { ComponentInitializer } from "../utils/system.js";
|
|
6
6
|
import { getName } from "../events/index.js";
|
|
7
|
-
import {
|
|
7
|
+
import { resolveClasses } from "../utils/dom.js";
|
|
8
8
|
import { hasRequiredProps } from "@ulu/utils/object.js";
|
|
9
|
+
import { getElements } from "@ulu/utils/browser/dom.js";
|
|
9
10
|
|
|
10
11
|
/**
|
|
11
12
|
* Theme Toggle Component Initializer
|
package/js/utils/dom.js
CHANGED
|
@@ -2,8 +2,7 @@
|
|
|
2
2
|
* @module utils/dom
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
export const regexJsonString = /^[{\[][\s\S]*[}\]]$/;
|
|
5
|
+
import { kebabToCamel } from "@ulu/utils/string.js";
|
|
7
6
|
|
|
8
7
|
/**
|
|
9
8
|
* Converts a data attribute name to its corresponding dataset property name.
|
|
@@ -11,56 +10,9 @@ export const regexJsonString = /^[{\[][\s\S]*[}\]]$/;
|
|
|
11
10
|
* @returns {string} - The dataset property name (e.g., "uluDialog").
|
|
12
11
|
*/
|
|
13
12
|
export function dataAttributeToDatasetKey(attribute) {
|
|
14
|
-
|
|
15
|
-
return attribute
|
|
16
|
-
.replace(/^data-/, "")
|
|
17
|
-
.replace(/-([a-z])/g, (_match, letter) => letter.toUpperCase());
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Get an elements JSON dataset value
|
|
22
|
-
* @param {Node} element
|
|
23
|
-
* @param {String} key key in dataset object for element
|
|
24
|
-
* @returns {Object} Empty object or JSON object from dataset
|
|
25
|
-
*/
|
|
26
|
-
export function getDatasetJson(element, key) {
|
|
27
|
-
const passed = element.dataset[key];
|
|
28
|
-
try {
|
|
29
|
-
return JSON.parse(passed);
|
|
30
|
-
} catch (error) {
|
|
31
|
-
console.error(`Error getting JSON from dataset (${ key }) -- "${ passed }"\n`, element, error);
|
|
32
|
-
return {};
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/**
|
|
37
|
-
* Get an elements JSON dataset value that could potentially just be a single string
|
|
38
|
-
* - If JSON it will return the object else it will return the value directly
|
|
39
|
-
* @param {Node} element
|
|
40
|
-
* @param {String} key key in dataset object for element
|
|
41
|
-
* @returns {Object|String} JSON object or current dataset value (string or empty string if no value)
|
|
42
|
-
*/
|
|
43
|
-
export function getDatasetOptionalJson(element, key) {
|
|
44
|
-
const passed = element.dataset[key];
|
|
45
|
-
if (passed && regexJsonString.test(passed.trim())) {
|
|
46
|
-
return getDatasetJson(element, key);
|
|
47
|
-
} else {
|
|
48
|
-
return passed;
|
|
49
|
-
}
|
|
13
|
+
return kebabToCamel(attribute.replace(/^data-/, ""));
|
|
50
14
|
}
|
|
51
15
|
|
|
52
|
-
/**
|
|
53
|
-
* Check if a pointer event x/y was outside an elements bounding box
|
|
54
|
-
*/
|
|
55
|
-
export function wasClickOutside(element, event) {
|
|
56
|
-
const rect = element.getBoundingClientRect();
|
|
57
|
-
return (event.clientY < rect.top || // above
|
|
58
|
-
event.clientY > rect.top + rect.height || // below
|
|
59
|
-
event.clientX < rect.left || // left side
|
|
60
|
-
event.clientX > rect.left + rect.width); // right side
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
|
|
64
16
|
/**
|
|
65
17
|
* Sets up the positional classes that would come from the equal
|
|
66
18
|
* height module. Needs to be rerun by user when layout changes
|
|
@@ -106,42 +58,6 @@ export function setPositionClasses(parent, classes = {
|
|
|
106
58
|
});
|
|
107
59
|
}
|
|
108
60
|
|
|
109
|
-
/**
|
|
110
|
-
* Resolve a target to Element
|
|
111
|
-
* @param {String|Node} target The selector or node/element
|
|
112
|
-
* @param {Object} context [document] The context to query possible selectors from
|
|
113
|
-
* @return {HTMLElement} The element or null if not found
|
|
114
|
-
*/
|
|
115
|
-
export function getElement(target, context = document) {
|
|
116
|
-
if (typeof target === "string") {
|
|
117
|
-
return context.querySelector(target);
|
|
118
|
-
} else if (target instanceof Element) {
|
|
119
|
-
return target;
|
|
120
|
-
} else {
|
|
121
|
-
console.warn("getElement: Invalid target type (expected String/Node)", target);
|
|
122
|
-
return null;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
/**
|
|
127
|
-
* Resolve a target to Elements
|
|
128
|
-
* @param {String|Node} target The selector or node/element
|
|
129
|
-
* @param {Object} context [document] The context to query possible selectors from
|
|
130
|
-
* @return {Array} The elements or null if not found
|
|
131
|
-
*/
|
|
132
|
-
export function getElements(target, context = document) {
|
|
133
|
-
if (typeof target === "string") {
|
|
134
|
-
return [...context.querySelectorAll(target)];
|
|
135
|
-
} else if (target instanceof Element) {
|
|
136
|
-
return [target];
|
|
137
|
-
} else if (Array.isArray(target) || target instanceof NodeList) {
|
|
138
|
-
return [...target];
|
|
139
|
-
} else {
|
|
140
|
-
console.warn("getElement: Invalid target type (expected String/Node/Array/Node List)", target);
|
|
141
|
-
return null;
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
|
|
145
61
|
/**
|
|
146
62
|
* Resolves a class input (string or array) into a consistent array of class names.
|
|
147
63
|
* @param {string|string[]} input - The class input, which can be a string, an array of strings, or any other value.
|
|
@@ -163,37 +79,3 @@ export function resolveClasses(classes) {
|
|
|
163
79
|
return [];
|
|
164
80
|
}
|
|
165
81
|
}
|
|
166
|
-
|
|
167
|
-
/**
|
|
168
|
-
* Sets a CSS custom property equal to the scrollbar width.
|
|
169
|
-
* @param {object} options - Configuration options.
|
|
170
|
-
* @param {HTMLElement} [options.scrollableChild=document.body] - An element that is a child of a scrollable container (used for width calculation).
|
|
171
|
-
* @param {Window|HTMLElement} [options.container=window] - The container that can be scrolled (used for width calculation).
|
|
172
|
-
* @param {HTMLElement} [options.propertyElement=document.documentElement] - The element to which the custom property will be added. Defaults to document.documentElement for :root access.
|
|
173
|
-
* @param {string} [options.propName="--ulu-scrollbar-width"] - The name of the custom property to set.
|
|
174
|
-
*/
|
|
175
|
-
export function addScrollbarProperty(options) {
|
|
176
|
-
const defaults = {
|
|
177
|
-
scrollableChild: document.body,
|
|
178
|
-
container: window,
|
|
179
|
-
propertyElement: document.documentElement,
|
|
180
|
-
propName: "--ulu-scrollbar-width",
|
|
181
|
-
};
|
|
182
|
-
|
|
183
|
-
const config = { ...defaults, ...options };
|
|
184
|
-
const { scrollableChild, container, propertyElement, propName } = config;
|
|
185
|
-
|
|
186
|
-
const scrollbarWidth = getScrollbarWidth(scrollableChild, container);
|
|
187
|
-
propertyElement.style.setProperty(propName, `${ scrollbarWidth }px`);
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
/**
|
|
191
|
-
* Calculates the width of the scrollbar.
|
|
192
|
-
*
|
|
193
|
-
* @param {HTMLElement} [element=document.body] -The element that is the child of a scrollable container
|
|
194
|
-
* @param {Window|HTMLElement} [container=window] - The container that can be scrolled
|
|
195
|
-
* @returns {number} The width of the scrollbar in pixels.
|
|
196
|
-
*/
|
|
197
|
-
export function getScrollbarWidth(element = document.body, container = window) {
|
|
198
|
-
return container.innerWidth - element.clientWidth;
|
|
199
|
-
}
|
package/js/utils/system.js
CHANGED
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import { hasRequiredProps } from "@ulu/utils/object.js";
|
|
7
|
-
import { getDatasetOptionalJson
|
|
7
|
+
import { getDatasetOptionalJson } from "@ulu/utils/browser/dom.js";
|
|
8
|
+
import { dataAttributeToDatasetKey } from "./dom.js";
|
|
8
9
|
import { getName } from "../events/index.js";
|
|
9
10
|
|
|
10
11
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ulu/frontend",
|
|
3
|
-
"version": "0.1.0-beta.
|
|
3
|
+
"version": "0.1.0-beta.77",
|
|
4
4
|
"description": "A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.",
|
|
5
5
|
"browser": "js/index.js",
|
|
6
6
|
"main": "index.js",
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
},
|
|
99
99
|
"dependencies": {
|
|
100
100
|
"@floating-ui/dom": "^1.6.5",
|
|
101
|
-
"@ulu/utils": "^0.0.
|
|
101
|
+
"@ulu/utils": "^0.0.26",
|
|
102
102
|
"ally.js": "^1.4.1",
|
|
103
103
|
"aria-tablist": "^1.2.2",
|
|
104
104
|
"swipe-listener" : "^1.3.0"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AA+IA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EA+Dd;AAxND;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;;IA6DD,uDAGC;IACD,yDAGC;IACD;;;;;OAKG;IACH,0DA2CC;;;;;;;;;;;;WA9GW,MAAM,GAAC,IAAI;;;;eACX,MAAM,GAAC,IAAI;;;;gBACX,MAAM;;;;aACN,MAAM;;;;cACN,OAAO;;;;iBACP,OAAO;;;;iBACP,OAAO;;;;cACP,QAAQ,GAAC,UAAU,GAAC,YAAY,GAAC,WAAW,GAAC,aAAa,GAAC,eAAe,GAAC,cAAc;;;;eACzF,OAAO;;;;gBACP,OAAO;;;;UACP,SAAS,GAAC,OAAO,GAAC,OAAO,GAAC,YAAY;;;;WACtC,OAAO;;;;iBACP,OAAO;;;;WACP,MAAM;;;;eACN,MAAM;;;;oBACN,MAAM;;;;sBACN,MAAM;;;;mBACN,MAAM,GAAC,IAAI;;;;gBACX,MAAM,GAAC,IAAI;;;;WACX,OAAO;;;;8BACE,MAAM,KAAG,MAAM;;;;mBACf,MAAM,KAAG,MAAM;;qCA3CD,oBAAoB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../js/ui/theme-toggle.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../js/ui/theme-toggle.js"],"names":[],"mappings":"AAmGA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BASC;AAED;;;GAGG;AACH,oCAFW,WAAW;;;;;;EA+FrB;AAhND;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;IAmDD;;OAEG;IACH,mCAAiB;;;;;;;qCAlEkB,oBAAoB"}
|
package/types/utils/dom.d.ts
CHANGED
|
@@ -4,25 +4,6 @@
|
|
|
4
4
|
* @returns {string} - The dataset property name (e.g., "uluDialog").
|
|
5
5
|
*/
|
|
6
6
|
export function dataAttributeToDatasetKey(attribute: any): string;
|
|
7
|
-
/**
|
|
8
|
-
* Get an elements JSON dataset value
|
|
9
|
-
* @param {Node} element
|
|
10
|
-
* @param {String} key key in dataset object for element
|
|
11
|
-
* @returns {Object} Empty object or JSON object from dataset
|
|
12
|
-
*/
|
|
13
|
-
export function getDatasetJson(element: Node, key: string): any;
|
|
14
|
-
/**
|
|
15
|
-
* Get an elements JSON dataset value that could potentially just be a single string
|
|
16
|
-
* - If JSON it will return the object else it will return the value directly
|
|
17
|
-
* @param {Node} element
|
|
18
|
-
* @param {String} key key in dataset object for element
|
|
19
|
-
* @returns {Object|String} JSON object or current dataset value (string or empty string if no value)
|
|
20
|
-
*/
|
|
21
|
-
export function getDatasetOptionalJson(element: Node, key: string): any | string;
|
|
22
|
-
/**
|
|
23
|
-
* Check if a pointer event x/y was outside an elements bounding box
|
|
24
|
-
*/
|
|
25
|
-
export function wasClickOutside(element: any, event: any): boolean;
|
|
26
7
|
/**
|
|
27
8
|
* Sets up the positional classes that would come from the equal
|
|
28
9
|
* height module. Needs to be rerun by user when layout changes
|
|
@@ -34,20 +15,6 @@ export function wasClickOutside(element: any, event: any): boolean;
|
|
|
34
15
|
* @param {Object} classes Override the default equal heights classes
|
|
35
16
|
*/
|
|
36
17
|
export function setPositionClasses(parent: Node, classes?: any): void;
|
|
37
|
-
/**
|
|
38
|
-
* Resolve a target to Element
|
|
39
|
-
* @param {String|Node} target The selector or node/element
|
|
40
|
-
* @param {Object} context [document] The context to query possible selectors from
|
|
41
|
-
* @return {HTMLElement} The element or null if not found
|
|
42
|
-
*/
|
|
43
|
-
export function getElement(target: string | Node, context?: any): HTMLElement;
|
|
44
|
-
/**
|
|
45
|
-
* Resolve a target to Elements
|
|
46
|
-
* @param {String|Node} target The selector or node/element
|
|
47
|
-
* @param {Object} context [document] The context to query possible selectors from
|
|
48
|
-
* @return {Array} The elements or null if not found
|
|
49
|
-
*/
|
|
50
|
-
export function getElements(target: string | Node, context?: any): any[];
|
|
51
18
|
/**
|
|
52
19
|
* Resolves a class input (string or array) into a consistent array of class names.
|
|
53
20
|
* @param {string|string[]} input - The class input, which can be a string, an array of strings, or any other value.
|
|
@@ -58,30 +25,4 @@ export function getElements(target: string | Node, context?: any): any[];
|
|
|
58
25
|
* resolveClassArray("single-class"); // Returns ["single-class"]
|
|
59
26
|
*/
|
|
60
27
|
export function resolveClasses(classes: any): string[];
|
|
61
|
-
/**
|
|
62
|
-
* Sets a CSS custom property equal to the scrollbar width.
|
|
63
|
-
* @param {object} options - Configuration options.
|
|
64
|
-
* @param {HTMLElement} [options.scrollableChild=document.body] - An element that is a child of a scrollable container (used for width calculation).
|
|
65
|
-
* @param {Window|HTMLElement} [options.container=window] - The container that can be scrolled (used for width calculation).
|
|
66
|
-
* @param {HTMLElement} [options.propertyElement=document.documentElement] - The element to which the custom property will be added. Defaults to document.documentElement for :root access.
|
|
67
|
-
* @param {string} [options.propName="--ulu-scrollbar-width"] - The name of the custom property to set.
|
|
68
|
-
*/
|
|
69
|
-
export function addScrollbarProperty(options: {
|
|
70
|
-
scrollableChild?: HTMLElement;
|
|
71
|
-
container?: Window | HTMLElement;
|
|
72
|
-
propertyElement?: HTMLElement;
|
|
73
|
-
propName?: string;
|
|
74
|
-
}): void;
|
|
75
|
-
/**
|
|
76
|
-
* Calculates the width of the scrollbar.
|
|
77
|
-
*
|
|
78
|
-
* @param {HTMLElement} [element=document.body] -The element that is the child of a scrollable container
|
|
79
|
-
* @param {Window|HTMLElement} [container=window] - The container that can be scrolled
|
|
80
|
-
* @returns {number} The width of the scrollbar in pixels.
|
|
81
|
-
*/
|
|
82
|
-
export function getScrollbarWidth(element?: HTMLElement, container?: Window | HTMLElement): number;
|
|
83
|
-
/**
|
|
84
|
-
* @module utils/dom
|
|
85
|
-
*/
|
|
86
|
-
export const regexJsonString: RegExp;
|
|
87
28
|
//# sourceMappingURL=dom.d.ts.map
|
package/types/utils/dom.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../js/utils/dom.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../js/utils/dom.js"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,2DAFa,MAAM,CAIlB;AAED;;;;;;;;;GASG;AACH,2CAHa,IAAI,uBAoChB;AAED;;;;;;;;GAQG;AACH,8CANa,MAAM,EAAE,CAiBpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"system.d.ts","sourceRoot":"","sources":["../../js/utils/system.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"system.d.ts","sourceRoot":"","sources":["../../js/utils/system.js"],"names":[],"mappings":"AAUA;;GAEG;AACH;IACE;;;MAGE;IACF,iCAGE;IACF,oCAEE;IAEF;;;;;OAKG;IACH;QAH2B,IAAI;QACJ,aAAa;OAUvC;IAFC,aAAwE;IACxE,iBAAgD;IAElD;;;;;;;;;OASG;IACH;QAP4B,KAAK;QACP,GAAG;QACF,QAAQ;QACV,MAAM;QACJ,aAAa;QACT,OAAO,EAA3B,WAAW;aAYrB;IACD;;;;;;;;OAQG;IACH;QAN4B,KAAK;QACP,GAAG,EAAlB,MAAM;QACU,QAAQ,EAAxB,OAAO;QACS,cAAc,EAA9B,OAAO;QACa,OAAO,EAA3B,WAAW;aAMrB;IACD;;;;OAIG;IACH,kCAGC;IACD;;;OAGG;IACH,uCAEC;IACD;;;OAGG;IACH,2CAEC;IACD;;;;;;OAMG;IACH,uDALW,WAAW,GAGT,MAAM;QAAC,OAAO,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,UAAU,WAAU;KAAC,CAAC,CAS7E;IACD;;;OAGG;IACH,2BAFW,WAAW,QAIrB;IACD;;;OAGG;IACH,qCAGC;IACD;;OAEG;IACH,0BAEC;IACD;;OAEG;IACH,2BAEC;IACD;;OAEG;IACH,+BAEC;CACF;AAED;;GAEG;AACH;CAEC"}
|