@txstate-mws/svelte-components 1.1.2 → 1.2.1
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.
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { WritableSubject } from '@txstate-mws/svelte-store';
|
|
2
|
+
declare class ElementQueries {
|
|
3
|
+
#private;
|
|
4
|
+
refresh(): void;
|
|
5
|
+
fullresync(): void;
|
|
6
|
+
activate(): void;
|
|
7
|
+
subscribe(el: HTMLElement, store?: WritableSubject<{
|
|
8
|
+
width: number;
|
|
9
|
+
}>): () => void;
|
|
10
|
+
}
|
|
11
|
+
export declare const elementqueries: ElementQueries;
|
|
12
|
+
interface EqOpts {
|
|
13
|
+
store: WritableSubject<{
|
|
14
|
+
width: number;
|
|
15
|
+
}>;
|
|
16
|
+
}
|
|
17
|
+
export declare function eq(el: HTMLElement, opts?: EqOpts): {
|
|
18
|
+
update(opts?: EqOpts): void;
|
|
19
|
+
destroy(): void;
|
|
20
|
+
};
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
2
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
3
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
4
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
5
|
+
};
|
|
6
|
+
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
7
|
+
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
8
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
9
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
10
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
11
|
+
};
|
|
12
|
+
var _ElementQueries_instances, _ElementQueries_watchlist, _ElementQueries_busy, _ElementQueries_hasInit, _ElementQueries_mutationobserver, _ElementQueries_boundRefresh, _ElementQueries_subscribers, _ElementQueries_stores, _ElementQueries_processwidths, _ElementQueries_finddepth, _ElementQueries_collecttargets, _ElementQueries_gotoanchor, _ElementQueries_activate, _ElementQueries_activateRaw, _ElementQueries_deactivate;
|
|
13
|
+
class ElementQueries {
|
|
14
|
+
constructor() {
|
|
15
|
+
_ElementQueries_instances.add(this);
|
|
16
|
+
_ElementQueries_watchlist.set(this, []);
|
|
17
|
+
_ElementQueries_busy.set(this, false);
|
|
18
|
+
_ElementQueries_hasInit.set(this, false);
|
|
19
|
+
_ElementQueries_mutationobserver.set(this, void 0);
|
|
20
|
+
_ElementQueries_boundRefresh.set(this, this.refresh.bind(this));
|
|
21
|
+
_ElementQueries_subscribers.set(this, 0);
|
|
22
|
+
_ElementQueries_stores.set(this, new Map());
|
|
23
|
+
}
|
|
24
|
+
refresh() {
|
|
25
|
+
if (!__classPrivateFieldGet(this, _ElementQueries_busy, "f") && __classPrivateFieldGet(this, _ElementQueries_watchlist, "f").length > 0) {
|
|
26
|
+
__classPrivateFieldSet(this, _ElementQueries_busy, true, "f");
|
|
27
|
+
requestAnimationFrame(__classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_processwidths).bind(this));
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
fullresync() {
|
|
31
|
+
__classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_collecttargets).call(this);
|
|
32
|
+
this.refresh();
|
|
33
|
+
}
|
|
34
|
+
// if someone uses the library without svelte, they may just activate it once
|
|
35
|
+
// instead of faithfully subscribing and unsubscribing, so we'll add a subscriber that can't be
|
|
36
|
+
// decremented and it will stay activated forever
|
|
37
|
+
activate() {
|
|
38
|
+
var _a;
|
|
39
|
+
__classPrivateFieldSet(this, _ElementQueries_subscribers, (_a = __classPrivateFieldGet(this, _ElementQueries_subscribers, "f"), _a++, _a), "f");
|
|
40
|
+
__classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_activateRaw).call(this);
|
|
41
|
+
}
|
|
42
|
+
subscribe(el, store) {
|
|
43
|
+
var _a;
|
|
44
|
+
__classPrivateFieldSet(this, _ElementQueries_subscribers, (_a = __classPrivateFieldGet(this, _ElementQueries_subscribers, "f"), _a++, _a), "f");
|
|
45
|
+
if (store)
|
|
46
|
+
__classPrivateFieldGet(this, _ElementQueries_stores, "f").set(el, store);
|
|
47
|
+
else
|
|
48
|
+
__classPrivateFieldGet(this, _ElementQueries_stores, "f").delete(el);
|
|
49
|
+
__classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_activateRaw).call(this);
|
|
50
|
+
return () => {
|
|
51
|
+
var _a;
|
|
52
|
+
if (__classPrivateFieldSet(this, _ElementQueries_subscribers, (_a = __classPrivateFieldGet(this, _ElementQueries_subscribers, "f"), --_a), "f") === 0)
|
|
53
|
+
__classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_deactivate).call(this);
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
_ElementQueries_watchlist = new WeakMap(), _ElementQueries_busy = new WeakMap(), _ElementQueries_hasInit = new WeakMap(), _ElementQueries_mutationobserver = new WeakMap(), _ElementQueries_boundRefresh = new WeakMap(), _ElementQueries_subscribers = new WeakMap(), _ElementQueries_stores = new WeakMap(), _ElementQueries_instances = new WeakSet(), _ElementQueries_processwidths = function _ElementQueries_processwidths() {
|
|
58
|
+
for (let i = 0; i < __classPrivateFieldGet(this, _ElementQueries_watchlist, "f").length; i++) {
|
|
59
|
+
const widths = [];
|
|
60
|
+
const attrs = [];
|
|
61
|
+
for (let j = 0; j < __classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[i].length; j++) {
|
|
62
|
+
widths.push(__classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[i][j].offsetWidth);
|
|
63
|
+
attrs.push(__classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[i][j].getAttribute('data-eq'));
|
|
64
|
+
}
|
|
65
|
+
for (let j = 0; j < __classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[i].length; j++) {
|
|
66
|
+
const el = __classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[i][j];
|
|
67
|
+
const w = widths[j];
|
|
68
|
+
let attrstr = '';
|
|
69
|
+
let finalw = 1600;
|
|
70
|
+
for (let k = 1600; k >= w && k > 700; k -= 100) {
|
|
71
|
+
attrstr += `${k}px `;
|
|
72
|
+
finalw = k;
|
|
73
|
+
}
|
|
74
|
+
for (let k = 700; k >= w; k -= 50) {
|
|
75
|
+
attrstr += `${k}px `;
|
|
76
|
+
finalw = k;
|
|
77
|
+
}
|
|
78
|
+
if (attrstr !== attrs[j])
|
|
79
|
+
el.setAttribute('data-eq', attrstr);
|
|
80
|
+
if (__classPrivateFieldGet(this, _ElementQueries_stores, "f").has(el)) {
|
|
81
|
+
__classPrivateFieldGet(this, _ElementQueries_stores, "f").get(el).update(v => v.width === finalw ? v : { ...v, width: finalw });
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
__classPrivateFieldSet(this, _ElementQueries_busy, false, "f");
|
|
86
|
+
}, _ElementQueries_finddepth = function _ElementQueries_finddepth(target, currentdepth = 0) {
|
|
87
|
+
const closest = target.parentElement?.closest('.eq-parent');
|
|
88
|
+
if (!closest)
|
|
89
|
+
return currentdepth;
|
|
90
|
+
return __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_finddepth).call(this, closest, currentdepth + 1);
|
|
91
|
+
}, _ElementQueries_collecttargets = function _ElementQueries_collecttargets() {
|
|
92
|
+
__classPrivateFieldSet(this, _ElementQueries_watchlist, [], "f");
|
|
93
|
+
const targets = Array.from(document.querySelectorAll('.eq-parent'));
|
|
94
|
+
for (const target of targets) {
|
|
95
|
+
const depth = __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_finddepth).call(this, target);
|
|
96
|
+
if (!__classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[depth])
|
|
97
|
+
__classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[depth] = [target];
|
|
98
|
+
else
|
|
99
|
+
__classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[depth].push(target);
|
|
100
|
+
}
|
|
101
|
+
}, _ElementQueries_gotoanchor = function _ElementQueries_gotoanchor() {
|
|
102
|
+
// since we are dramatically resizing, we need to scroll to the proper place for an
|
|
103
|
+
// anchor tag
|
|
104
|
+
const m = document.location.hash.match(/^#([a-z][\w:.-]*)$/i);
|
|
105
|
+
if (m) {
|
|
106
|
+
const id = m[1];
|
|
107
|
+
requestAnimationFrame(() => document.getElementById(id) || document.querySelector(`[name="${id}"]`).scrollIntoView(true));
|
|
108
|
+
}
|
|
109
|
+
}, _ElementQueries_activate = function _ElementQueries_activate() {
|
|
110
|
+
this.fullresync();
|
|
111
|
+
window.addEventListener('resize', __classPrivateFieldGet(this, _ElementQueries_boundRefresh, "f"));
|
|
112
|
+
__classPrivateFieldSet(this, _ElementQueries_mutationobserver, new MutationObserver(() => this.fullresync()), "f");
|
|
113
|
+
__classPrivateFieldGet(this, _ElementQueries_mutationobserver, "f").observe(document.body, {
|
|
114
|
+
subtree: true,
|
|
115
|
+
childList: true,
|
|
116
|
+
attributeFilter: ['class', 'style']
|
|
117
|
+
});
|
|
118
|
+
}, _ElementQueries_activateRaw = function _ElementQueries_activateRaw() {
|
|
119
|
+
if (typeof window === 'undefined' || __classPrivateFieldGet(this, _ElementQueries_hasInit, "f"))
|
|
120
|
+
return;
|
|
121
|
+
__classPrivateFieldSet(this, _ElementQueries_hasInit, true, "f");
|
|
122
|
+
if (['interactive', 'complete'].includes(document.readyState)) {
|
|
123
|
+
__classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_activate).call(this);
|
|
124
|
+
}
|
|
125
|
+
else {
|
|
126
|
+
window.addEventListener('DOMContentLoaded', () => {
|
|
127
|
+
__classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_activate).call(this);
|
|
128
|
+
__classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_gotoanchor).call(this);
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
}, _ElementQueries_deactivate = function _ElementQueries_deactivate() {
|
|
132
|
+
if (__classPrivateFieldGet(this, _ElementQueries_subscribers, "f") > 0 || typeof window === 'undefined')
|
|
133
|
+
return;
|
|
134
|
+
window.removeEventListener('resize', __classPrivateFieldGet(this, _ElementQueries_boundRefresh, "f"));
|
|
135
|
+
__classPrivateFieldGet(this, _ElementQueries_mutationobserver, "f")?.disconnect();
|
|
136
|
+
__classPrivateFieldSet(this, _ElementQueries_hasInit, false, "f");
|
|
137
|
+
};
|
|
138
|
+
export const elementqueries = new ElementQueries();
|
|
139
|
+
export function eq(el, opts) {
|
|
140
|
+
el.classList.add('eq-parent');
|
|
141
|
+
let unsubscribe = elementqueries.subscribe(el, opts?.store);
|
|
142
|
+
return {
|
|
143
|
+
update(opts) {
|
|
144
|
+
unsubscribe();
|
|
145
|
+
unsubscribe = elementqueries.subscribe(el, opts?.store);
|
|
146
|
+
},
|
|
147
|
+
destroy() {
|
|
148
|
+
unsubscribe();
|
|
149
|
+
}
|
|
150
|
+
};
|
|
151
|
+
}
|
package/actions/index.d.ts
CHANGED
package/actions/index.js
CHANGED
package/actions/resize.js
CHANGED
|
@@ -27,7 +27,7 @@ export function resize(el, config) {
|
|
|
27
27
|
if (!equal(lastSize, current)) {
|
|
28
28
|
lastSize = current;
|
|
29
29
|
if (config?.store)
|
|
30
|
-
config.store.
|
|
30
|
+
config.store.update(v => ({ ...v, ...current }));
|
|
31
31
|
el.dispatchEvent(new CustomEvent('resize', { detail: current }));
|
|
32
32
|
}
|
|
33
33
|
}
|
|
@@ -41,7 +41,7 @@ export function resize(el, config) {
|
|
|
41
41
|
if (newConfig?.debounce === true)
|
|
42
42
|
newConfig.debounce = 100;
|
|
43
43
|
if (newConfig?.store !== config?.store) {
|
|
44
|
-
newConfig?.store?.
|
|
44
|
+
newConfig?.store?.update(v => ({ ...v, ...lastSize }));
|
|
45
45
|
}
|
|
46
46
|
if (!!newConfig?.debounce !== !!config?.debounce) {
|
|
47
47
|
observer.disconnect();
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script >import { createEventDispatcher } from 'svelte';
|
|
2
|
-
import { randomid } from 'txstate-utils';
|
|
2
|
+
import { randomid, sleep } from 'txstate-utils';
|
|
3
3
|
import ScreenReaderOnly from './ScreenReaderOnly.svelte';
|
|
4
4
|
import DefaultPopupMenu from './PopupMenu.svelte';
|
|
5
5
|
import { debouncedPromise, modifierKey, selectionIsLeft } from '../util';
|
|
@@ -29,6 +29,8 @@ async function reactToInput(..._) {
|
|
|
29
29
|
if (inputvalue !== saveval)
|
|
30
30
|
return; // ignore any results that are out of date
|
|
31
31
|
options = rawOptions.filter(o => !selectedSet.has(o.value));
|
|
32
|
+
await sleep(100);
|
|
33
|
+
// needed to sleep a little bit or this will turn the menu on only to have popupmenu's click handler toggle it back off
|
|
32
34
|
if (typeof document !== 'undefined' && inputelement === document.activeElement)
|
|
33
35
|
menushown = true;
|
|
34
36
|
}
|
|
@@ -78,7 +80,7 @@ function inputkeydown(e) {
|
|
|
78
80
|
}
|
|
79
81
|
}
|
|
80
82
|
function inputfocus() {
|
|
81
|
-
reactToInput();
|
|
83
|
+
reactToInput(true);
|
|
82
84
|
}
|
|
83
85
|
let popuphilited;
|
|
84
86
|
$: if (popuphilited != null)
|
|
@@ -99,7 +101,7 @@ $: dispatch('change', selected);
|
|
|
99
101
|
</script>
|
|
100
102
|
|
|
101
103
|
<fieldset>
|
|
102
|
-
<ul class="multiselect-selected" role="listbox"
|
|
104
|
+
<ul class="multiselect-selected" role="listbox">
|
|
103
105
|
{#each selected as option, i}
|
|
104
106
|
<li id={id + option.value} role="option" tabindex="-1" class="multiselect-pill" class:hilited={hilitedpill === option.value}
|
|
105
107
|
on:click|preventDefault|stopPropagation={() => removeSelection(option, i, 1)}
|
|
@@ -53,7 +53,8 @@ async function reactToMenuShown(_) {
|
|
|
53
53
|
else {
|
|
54
54
|
buttonelement.setAttribute('aria-controls', menuid);
|
|
55
55
|
buttonelement.setAttribute('aria-expanded', 'true');
|
|
56
|
-
buttonelement.
|
|
56
|
+
if (buttonelement !== document.activeElement)
|
|
57
|
+
buttonelement.focus();
|
|
57
58
|
}
|
|
58
59
|
}
|
|
59
60
|
$: reactToMenuShown(menushown);
|
|
@@ -149,7 +150,8 @@ function onbuttonclick(e) {
|
|
|
149
150
|
async function onblur(e) {
|
|
150
151
|
// tabindex=-1 on our menu elements means e.relatedTarget will be set
|
|
151
152
|
if (!(e.relatedTarget instanceof HTMLElement && menuelement?.contains(e.relatedTarget))) {
|
|
152
|
-
blurTimer = requestAnimationFrame(() => {
|
|
153
|
+
blurTimer = requestAnimationFrame(() => { if (buttonelement !== document.activeElement)
|
|
154
|
+
menushown = false; });
|
|
153
155
|
}
|
|
154
156
|
}
|
|
155
157
|
function cleanup(element) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@txstate-mws/svelte-components",
|
|
3
|
-
"version": "1.1
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "Svelte components that are generically useful.",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@txstate-mws/svelte-store": "^1.0.3",
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
"exports": {
|
|
32
32
|
"./package.json": "./package.json",
|
|
33
33
|
"./actions/buttonify": "./actions/buttonify.js",
|
|
34
|
+
"./actions/elementqueries": "./actions/elementqueries.js",
|
|
34
35
|
"./actions/glue": "./actions/glue.js",
|
|
35
36
|
"./actions": "./actions/index.js",
|
|
36
37
|
"./actions/offset": "./actions/offset.js",
|