motionary 0.0.0-stage → 6.2.0
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 +803 -0
- package/LICENSE +21 -0
- package/README.md +218 -2
- package/README_ja.md +219 -0
- package/README_zh.md +219 -0
- package/bin/usa-codemod-5.mjs +79 -0
- package/bin/usa-codemod-6.mjs +146 -0
- package/dist/chunks/base-BaQV-2ha.cjs +436 -0
- package/dist/chunks/base-BaQV-2ha.cjs.map +1 -0
- package/dist/chunks/base-C_3cAoRz.js +404 -0
- package/dist/chunks/base-C_3cAoRz.js.map +1 -0
- package/dist/chunks/bind-B_CTL6Qn.js +22 -0
- package/dist/chunks/bind-B_CTL6Qn.js.map +1 -0
- package/dist/chunks/bind-Ui43-n2d.cjs +25 -0
- package/dist/chunks/bind-Ui43-n2d.cjs.map +1 -0
- package/dist/chunks/core-B5T0dhFH.cjs +920 -0
- package/dist/chunks/core-B5T0dhFH.cjs.map +1 -0
- package/dist/chunks/core-BGAyaY6L.cjs +265 -0
- package/dist/chunks/core-BGAyaY6L.cjs.map +1 -0
- package/dist/chunks/core-D7cVumUu.js +909 -0
- package/dist/chunks/core-D7cVumUu.js.map +1 -0
- package/dist/chunks/core-VEBw36QK.js +260 -0
- package/dist/chunks/core-VEBw36QK.js.map +1 -0
- package/dist/chunks/core-ps8uvYuN.js +181 -0
- package/dist/chunks/core-ps8uvYuN.js.map +1 -0
- package/dist/chunks/core-zq17EeCI.cjs +185 -0
- package/dist/chunks/core-zq17EeCI.cjs.map +1 -0
- package/dist/chunks/fx-Bs6IrV4Q.js +109 -0
- package/dist/chunks/fx-Bs6IrV4Q.js.map +1 -0
- package/dist/chunks/fx-lBGVtQO1.cjs +114 -0
- package/dist/chunks/fx-lBGVtQO1.cjs.map +1 -0
- package/dist/chunks/generative-D2YyhaeO.js +336 -0
- package/dist/chunks/generative-D2YyhaeO.js.map +1 -0
- package/dist/chunks/generative-DzIZq-_g.cjs +348 -0
- package/dist/chunks/generative-DzIZq-_g.cjs.map +1 -0
- package/dist/chunks/gpu-Bu7qwugO.js +380 -0
- package/dist/chunks/gpu-Bu7qwugO.js.map +1 -0
- package/dist/chunks/gpu-CenK2l6b.cjs +387 -0
- package/dist/chunks/gpu-CenK2l6b.cjs.map +1 -0
- package/dist/chunks/index-tags-DucKMQr_.js +26 -0
- package/dist/chunks/index-tags-DucKMQr_.js.map +1 -0
- package/dist/chunks/index-tags-wv0R_vkO.cjs +28 -0
- package/dist/chunks/index-tags-wv0R_vkO.cjs.map +1 -0
- package/dist/chunks/presets-BYBVJVeP.js +226 -0
- package/dist/chunks/presets-BYBVJVeP.js.map +1 -0
- package/dist/chunks/presets-CUHys3sK.cjs +233 -0
- package/dist/chunks/presets-CUHys3sK.cjs.map +1 -0
- package/dist/chunks/registry-CKNLQpwd.js +121 -0
- package/dist/chunks/registry-CKNLQpwd.js.map +1 -0
- package/dist/chunks/registry-DehBVRDV.cjs +131 -0
- package/dist/chunks/registry-DehBVRDV.cjs.map +1 -0
- package/dist/chunks/spring-CbvHfVtP.js +219 -0
- package/dist/chunks/spring-CbvHfVtP.js.map +1 -0
- package/dist/chunks/spring-Dgx187Vh.cjs +232 -0
- package/dist/chunks/spring-Dgx187Vh.cjs.map +1 -0
- package/dist/chunks/stagger-CCFyhzSw.cjs +86 -0
- package/dist/chunks/stagger-CCFyhzSw.cjs.map +1 -0
- package/dist/chunks/stagger-DtMKo2SK.js +84 -0
- package/dist/chunks/stagger-DtMKo2SK.js.map +1 -0
- package/dist/chunks/variants-BhjyddG8.cjs +39 -0
- package/dist/chunks/variants-BhjyddG8.cjs.map +1 -0
- package/dist/chunks/variants-DRlKVHvu.js +35 -0
- package/dist/chunks/variants-DRlKVHvu.js.map +1 -0
- package/dist/components/a11y.cjs +276 -0
- package/dist/components/a11y.cjs.map +1 -0
- package/dist/components/a11y.d.cts +131 -0
- package/dist/components/a11y.d.ts +131 -0
- package/dist/components/a11y.js +259 -0
- package/dist/components/a11y.js.map +1 -0
- package/dist/components/angular.cjs +76 -0
- package/dist/components/angular.cjs.map +1 -0
- package/dist/components/angular.d.cts +1734 -0
- package/dist/components/angular.d.ts +1734 -0
- package/dist/components/angular.js +70 -0
- package/dist/components/angular.js.map +1 -0
- package/dist/components/background.cjs +659 -0
- package/dist/components/background.cjs.map +1 -0
- package/dist/components/background.css +9 -0
- package/dist/components/background.d.cts +166 -0
- package/dist/components/background.d.ts +166 -0
- package/dist/components/background.js +647 -0
- package/dist/components/background.js.map +1 -0
- package/dist/components/bridge.cjs +154 -0
- package/dist/components/bridge.cjs.map +1 -0
- package/dist/components/bridge.d.cts +63 -0
- package/dist/components/bridge.d.ts +63 -0
- package/dist/components/bridge.js +147 -0
- package/dist/components/bridge.js.map +1 -0
- package/dist/components/cards.cjs +561 -0
- package/dist/components/cards.cjs.map +1 -0
- package/dist/components/cards.css +6 -0
- package/dist/components/cards.d.cts +115 -0
- package/dist/components/cards.d.ts +115 -0
- package/dist/components/cards.js +554 -0
- package/dist/components/cards.js.map +1 -0
- package/dist/components/click.cjs +877 -0
- package/dist/components/click.cjs.map +1 -0
- package/dist/components/click.css +9 -0
- package/dist/components/click.d.cts +218 -0
- package/dist/components/click.d.ts +218 -0
- package/dist/components/click.js +863 -0
- package/dist/components/click.js.map +1 -0
- package/dist/components/depth.cjs +250 -0
- package/dist/components/depth.cjs.map +1 -0
- package/dist/components/depth.css +3 -0
- package/dist/components/depth.d.cts +86 -0
- package/dist/components/depth.d.ts +86 -0
- package/dist/components/depth.js +242 -0
- package/dist/components/depth.js.map +1 -0
- package/dist/components/effects.cjs +2258 -0
- package/dist/components/effects.cjs.map +1 -0
- package/dist/components/effects.d.cts +545 -0
- package/dist/components/effects.d.ts +545 -0
- package/dist/components/effects.js +2200 -0
- package/dist/components/effects.js.map +1 -0
- package/dist/components/feedback.cjs +442 -0
- package/dist/components/feedback.cjs.map +1 -0
- package/dist/components/feedback.css +7 -0
- package/dist/components/feedback.d.cts +144 -0
- package/dist/components/feedback.d.ts +144 -0
- package/dist/components/feedback.js +433 -0
- package/dist/components/feedback.js.map +1 -0
- package/dist/components/fx-gpu.cjs +12 -0
- package/dist/components/fx-gpu.cjs.map +1 -0
- package/dist/components/fx-gpu.d.cts +63 -0
- package/dist/components/fx-gpu.d.ts +63 -0
- package/dist/components/fx-gpu.js +5 -0
- package/dist/components/fx-gpu.js.map +1 -0
- package/dist/components/fx.cjs +169 -0
- package/dist/components/fx.cjs.map +1 -0
- package/dist/components/fx.css +3 -0
- package/dist/components/fx.d.cts +114 -0
- package/dist/components/fx.d.ts +114 -0
- package/dist/components/fx.js +156 -0
- package/dist/components/fx.js.map +1 -0
- package/dist/components/fx2.cjs +25 -0
- package/dist/components/fx2.cjs.map +1 -0
- package/dist/components/fx2.d.cts +136 -0
- package/dist/components/fx2.d.ts +136 -0
- package/dist/components/fx2.js +17 -0
- package/dist/components/fx2.js.map +1 -0
- package/dist/components/gesture.cjs +209 -0
- package/dist/components/gesture.cjs.map +1 -0
- package/dist/components/gesture.css +3 -0
- package/dist/components/gesture.d.cts +134 -0
- package/dist/components/gesture.d.ts +134 -0
- package/dist/components/gesture.js +203 -0
- package/dist/components/gesture.js.map +1 -0
- package/dist/components/interaction.cjs +424 -0
- package/dist/components/interaction.cjs.map +1 -0
- package/dist/components/interaction.css +8 -0
- package/dist/components/interaction.d.cts +115 -0
- package/dist/components/interaction.d.ts +115 -0
- package/dist/components/interaction.js +416 -0
- package/dist/components/interaction.js.map +1 -0
- package/dist/components/jsx.cjs +3 -0
- package/dist/components/jsx.cjs.map +1 -0
- package/dist/components/jsx.d.cts +53 -0
- package/dist/components/jsx.d.ts +53 -0
- package/dist/components/jsx.js +2 -0
- package/dist/components/jsx.js.map +1 -0
- package/dist/components/layout.cjs +257 -0
- package/dist/components/layout.cjs.map +1 -0
- package/dist/components/layout.css +3 -0
- package/dist/components/layout.d.cts +99 -0
- package/dist/components/layout.d.ts +99 -0
- package/dist/components/layout.js +249 -0
- package/dist/components/layout.js.map +1 -0
- package/dist/components/lazy.cjs +92 -0
- package/dist/components/lazy.cjs.map +1 -0
- package/dist/components/lazy.d.cts +48 -0
- package/dist/components/lazy.d.ts +48 -0
- package/dist/components/lazy.js +87 -0
- package/dist/components/lazy.js.map +1 -0
- package/dist/components/lite.cjs +11095 -0
- package/dist/components/lite.cjs.map +1 -0
- package/dist/components/lite.d.cts +4 -0
- package/dist/components/lite.d.ts +4 -0
- package/dist/components/lite.js +10827 -0
- package/dist/components/lite.js.map +1 -0
- package/dist/components/packs.cjs +192 -0
- package/dist/components/packs.cjs.map +1 -0
- package/dist/components/packs.css +3 -0
- package/dist/components/packs.d.cts +72 -0
- package/dist/components/packs.d.ts +72 -0
- package/dist/components/packs.js +184 -0
- package/dist/components/packs.js.map +1 -0
- package/dist/components/page.cjs +824 -0
- package/dist/components/page.cjs.map +1 -0
- package/dist/components/page.css +11 -0
- package/dist/components/page.d.cts +249 -0
- package/dist/components/page.d.ts +249 -0
- package/dist/components/page.js +799 -0
- package/dist/components/page.js.map +1 -0
- package/dist/components/perf.cjs +120 -0
- package/dist/components/perf.cjs.map +1 -0
- package/dist/components/perf.d.cts +98 -0
- package/dist/components/perf.d.ts +98 -0
- package/dist/components/perf.js +110 -0
- package/dist/components/perf.js.map +1 -0
- package/dist/components/physics.cjs +448 -0
- package/dist/components/physics.cjs.map +1 -0
- package/dist/components/physics.css +5 -0
- package/dist/components/physics.d.cts +189 -0
- package/dist/components/physics.d.ts +189 -0
- package/dist/components/physics.js +430 -0
- package/dist/components/physics.js.map +1 -0
- package/dist/components/react.cjs +96 -0
- package/dist/components/react.cjs.map +1 -0
- package/dist/components/react.d.cts +18 -0
- package/dist/components/react.d.ts +18 -0
- package/dist/components/react.js +91 -0
- package/dist/components/react.js.map +1 -0
- package/dist/components/reveal.cjs +362 -0
- package/dist/components/reveal.cjs.map +1 -0
- package/dist/components/reveal.css +5 -0
- package/dist/components/reveal.d.cts +105 -0
- package/dist/components/reveal.d.ts +105 -0
- package/dist/components/reveal.js +353 -0
- package/dist/components/reveal.js.map +1 -0
- package/dist/components/solid.cjs +86 -0
- package/dist/components/solid.cjs.map +1 -0
- package/dist/components/solid.d.cts +1751 -0
- package/dist/components/solid.d.ts +1751 -0
- package/dist/components/solid.js +82 -0
- package/dist/components/solid.js.map +1 -0
- package/dist/components/svelte.cjs +68 -0
- package/dist/components/svelte.cjs.map +1 -0
- package/dist/components/svelte.d.cts +1733 -0
- package/dist/components/svelte.d.ts +1733 -0
- package/dist/components/svelte.js +64 -0
- package/dist/components/svelte.js.map +1 -0
- package/dist/components/svg.cjs +359 -0
- package/dist/components/svg.cjs.map +1 -0
- package/dist/components/svg.css +3 -0
- package/dist/components/svg.d.cts +113 -0
- package/dist/components/svg.d.ts +113 -0
- package/dist/components/svg.js +347 -0
- package/dist/components/svg.js.map +1 -0
- package/dist/components/text.cjs +968 -0
- package/dist/components/text.cjs.map +1 -0
- package/dist/components/text.css +8 -0
- package/dist/components/text.d.cts +342 -0
- package/dist/components/text.d.ts +342 -0
- package/dist/components/text.js +947 -0
- package/dist/components/text.js.map +1 -0
- package/dist/components/timeline.cjs +109 -0
- package/dist/components/timeline.cjs.map +1 -0
- package/dist/components/timeline.css +3 -0
- package/dist/components/timeline.d.cts +155 -0
- package/dist/components/timeline.d.ts +155 -0
- package/dist/components/timeline.js +103 -0
- package/dist/components/timeline.js.map +1 -0
- package/dist/components/tokens.cjs +226 -0
- package/dist/components/tokens.cjs.map +1 -0
- package/dist/components/tokens.d.cts +74 -0
- package/dist/components/tokens.d.ts +74 -0
- package/dist/components/tokens.js +211 -0
- package/dist/components/tokens.js.map +1 -0
- package/dist/components/transitions.cjs +430 -0
- package/dist/components/transitions.cjs.map +1 -0
- package/dist/components/transitions.css +5 -0
- package/dist/components/transitions.d.cts +126 -0
- package/dist/components/transitions.d.ts +126 -0
- package/dist/components/transitions.js +423 -0
- package/dist/components/transitions.js.map +1 -0
- package/dist/components/ui.cjs +1050 -0
- package/dist/components/ui.cjs.map +1 -0
- package/dist/components/ui.css +14 -0
- package/dist/components/ui.d.cts +224 -0
- package/dist/components/ui.d.ts +224 -0
- package/dist/components/ui.js +1034 -0
- package/dist/components/ui.js.map +1 -0
- package/dist/components/vue.cjs +67 -0
- package/dist/components/vue.cjs.map +1 -0
- package/dist/components/vue.d.cts +1722 -0
- package/dist/components/vue.d.ts +1722 -0
- package/dist/components/vue.js +64 -0
- package/dist/components/vue.js.map +1 -0
- package/dist/components/webgl.cjs +459 -0
- package/dist/components/webgl.cjs.map +1 -0
- package/dist/components/webgl.css +3 -0
- package/dist/components/webgl.d.cts +133 -0
- package/dist/components/webgl.d.ts +133 -0
- package/dist/components/webgl.js +442 -0
- package/dist/components/webgl.js.map +1 -0
- package/dist/components/widgets.cjs +591 -0
- package/dist/components/widgets.cjs.map +1 -0
- package/dist/components/widgets.d.cts +110 -0
- package/dist/components/widgets.d.ts +110 -0
- package/dist/components/widgets.js +581 -0
- package/dist/components/widgets.js.map +1 -0
- package/dist/components.cjs +351 -0
- package/dist/components.cjs.map +1 -0
- package/dist/components.css +75 -0
- package/dist/components.d.cts +2997 -0
- package/dist/components.d.ts +2997 -0
- package/dist/components.js +106 -0
- package/dist/components.js.map +1 -0
- package/dist/components.umd.js +23 -0
- package/dist/components.umd.js.map +1 -0
- package/dist/element.cjs +97 -0
- package/dist/element.cjs.map +1 -0
- package/dist/element.d.cts +215 -0
- package/dist/element.d.ts +215 -0
- package/dist/element.js +95 -0
- package/dist/element.js.map +1 -0
- package/dist/element.umd.js +2 -0
- package/dist/element.umd.js.map +1 -0
- package/dist/index.cjs +149 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +425 -0
- package/dist/index.d.ts +425 -0
- package/dist/index.js +131 -0
- package/dist/index.js.map +1 -0
- package/dist/index.umd.js +15 -0
- package/dist/index.umd.js.map +1 -0
- package/dist/presets/extended.cjs +243 -0
- package/dist/presets/extended.cjs.map +1 -0
- package/dist/presets/extended.d.cts +37 -0
- package/dist/presets/extended.d.ts +37 -0
- package/dist/presets/extended.js +239 -0
- package/dist/presets/extended.js.map +1 -0
- package/dist/presets-extended.umd.js +2 -0
- package/dist/presets-extended.umd.js.map +1 -0
- package/dist/react.cjs +68 -0
- package/dist/react.cjs.map +1 -0
- package/dist/react.d.cts +158 -0
- package/dist/react.d.ts +158 -0
- package/dist/react.js +65 -0
- package/dist/react.js.map +1 -0
- package/dist/solid.cjs +93 -0
- package/dist/solid.cjs.map +1 -0
- package/dist/solid.d.cts +249 -0
- package/dist/solid.d.ts +249 -0
- package/dist/solid.js +89 -0
- package/dist/solid.js.map +1 -0
- package/dist/svelte.cjs +66 -0
- package/dist/svelte.cjs.map +1 -0
- package/dist/svelte.d.cts +243 -0
- package/dist/svelte.d.ts +243 -0
- package/dist/svelte.js +63 -0
- package/dist/svelte.js.map +1 -0
- package/dist/vue.cjs +62 -0
- package/dist/vue.cjs.map +1 -0
- package/dist/vue.d.cts +158 -0
- package/dist/vue.d.ts +158 -0
- package/dist/vue.js +60 -0
- package/dist/vue.js.map +1 -0
- package/dist/widgets.umd.js +2 -0
- package/dist/widgets.umd.js.map +1 -0
- package/docs/API.md +147 -0
- package/docs/ROADMAP.md +14 -0
- package/docs/accessibility.md +60 -0
- package/docs/components.md +564 -0
- package/docs/deprecations.md +30 -0
- package/docs/frameworks-ssr.md +100 -0
- package/docs/hybrid-apps.md +145 -0
- package/docs/images/showcase-detail.png +0 -0
- package/docs/images/showcase-grid.png +0 -0
- package/docs/images/showcase-mobile.png +0 -0
- package/docs/migration-from-aos.md +67 -0
- package/docs/migration-from-gsap-scrolltrigger.md +80 -0
- package/docs/motion-tokens.css +31 -0
- package/docs/motion-tokens.md +46 -0
- package/docs/motion.tokens.json +132 -0
- package/docs/performance.md +24 -0
- package/docs/presets.md +310 -0
- package/docs/upgrading-3.md +21 -0
- package/docs/upgrading-4.md +65 -0
- package/docs/upgrading-5.md +31 -0
- package/docs/upgrading-6.md +32 -0
- package/docs/windows-apps.md +119 -0
- package/package.json +562 -4
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var base = require('../chunks/base-BaQV-2ha.cjs');
|
|
4
|
+
var spring = require('../chunks/spring-Dgx187Vh.cjs');
|
|
5
|
+
var core = require('../chunks/core-zq17EeCI.cjs');
|
|
6
|
+
|
|
7
|
+
var css = "usa-swipeable{display:block;touch-action:pan-y;user-select:none;-webkit-user-select:none}usa-swipeable[axis=\"y\"]{touch-action:pan-x}usa-swipeable>*{transform:translate3d(var(--usa-swipe,0px),0,0);opacity:calc(1 - var(--usa-swipe-p,0) * 0.5)}usa-swipeable[axis=\"y\"]>*{transform:translate3d(0,var(--usa-swipe,0px),0)}usa-swipeable:focus-visible{outline:2px solid currentColor;outline-offset:2px}usa-pinch-zoom{display:block;overflow:hidden;touch-action:none;position:relative}usa-pinch-zoom>*{transform:translate3d(var(--usa-zoom-x,0px),var(--usa-zoom-y,0px),0) scale(var(--usa-zoom,1));transform-origin:50% 50%}usa-pinch-zoom[data-zoomed]{cursor:grab}usa-pinch-zoom:focus-visible{outline:2px solid currentColor;outline-offset:2px}";
|
|
8
|
+
|
|
9
|
+
function defineSwipeable(tag = 'usa-swipeable') {
|
|
10
|
+
return base.defineElement(tag, (Base) => class UsaSwipeable extends Base {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments);
|
|
13
|
+
this._off = 0;
|
|
14
|
+
}
|
|
15
|
+
static get observedAttributes() {
|
|
16
|
+
return ['axis', 'disabled'];
|
|
17
|
+
}
|
|
18
|
+
get offset() {
|
|
19
|
+
return this._off;
|
|
20
|
+
}
|
|
21
|
+
put(v) {
|
|
22
|
+
this._off = v;
|
|
23
|
+
this.style.setProperty('--usa-swipe', `${v}px`);
|
|
24
|
+
this.style.setProperty('--usa-swipe-p', String(Math.min(1, Math.abs(v) / this.num('distance', 120))));
|
|
25
|
+
}
|
|
26
|
+
swipe(direction) {
|
|
27
|
+
if (!this.emit('swipe', { direction }))
|
|
28
|
+
return this.reset();
|
|
29
|
+
const sign = direction === 'left' || direction === 'up' ? -1 : 1;
|
|
30
|
+
const far = sign * ((this.str('axis', 'x') === 'y' ? this.offsetHeight : this.offsetWidth) + 80 || 600);
|
|
31
|
+
const done = () => {
|
|
32
|
+
this.emit('dismiss', { direction });
|
|
33
|
+
if (this.flag('dismiss'))
|
|
34
|
+
this.remove();
|
|
35
|
+
};
|
|
36
|
+
if (this.reduced) {
|
|
37
|
+
this.put(0);
|
|
38
|
+
return done();
|
|
39
|
+
}
|
|
40
|
+
this.setAttribute('data-gone', '');
|
|
41
|
+
this._s = spring.createSpring({ spring: 'stiff', value: this._off, onUpdate: (v) => this.put(v), onRest: done });
|
|
42
|
+
this._s.set(far, sign * 1500);
|
|
43
|
+
}
|
|
44
|
+
reset() {
|
|
45
|
+
this.removeAttribute('data-gone');
|
|
46
|
+
if (this.reduced)
|
|
47
|
+
return this.put(0);
|
|
48
|
+
this._s.set(0);
|
|
49
|
+
}
|
|
50
|
+
mount() {
|
|
51
|
+
this._s = spring.createSpring({ spring: this.str('preset', 'default'), onUpdate: (v) => this.put(v) });
|
|
52
|
+
if (!this.hasAttribute('tabindex'))
|
|
53
|
+
this.tabIndex = 0;
|
|
54
|
+
const y = this.str('axis', 'x') === 'y';
|
|
55
|
+
const max = () => this.num('distance', 120);
|
|
56
|
+
this.onCleanup(core.gesture(this, {
|
|
57
|
+
onPan: ({ dx, dy, vx, vy, last }) => {
|
|
58
|
+
if (this.flag('disabled'))
|
|
59
|
+
return;
|
|
60
|
+
const d = y ? dy : dx;
|
|
61
|
+
if (!last) {
|
|
62
|
+
this._s.stop();
|
|
63
|
+
if (!this.reduced)
|
|
64
|
+
this.put(Math.abs(d) > max() ? Math.sign(d) * (max() + (Math.abs(d) - max()) * 0.35) : d);
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
if (Math.abs(d) > max())
|
|
68
|
+
this.swipe(y ? (d > 0 ? 'down' : 'up') : d > 0 ? 'right' : 'left');
|
|
69
|
+
else if (!this.hasAttribute('data-gone')) {
|
|
70
|
+
if (this.reduced)
|
|
71
|
+
this.put(0);
|
|
72
|
+
else
|
|
73
|
+
this._s.set(0, y ? vy : vx);
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
onSwipe: ({ direction }) => {
|
|
77
|
+
if (this.flag('disabled') || this.hasAttribute('data-gone'))
|
|
78
|
+
return;
|
|
79
|
+
if (y === (direction === 'up' || direction === 'down'))
|
|
80
|
+
this.swipe(direction);
|
|
81
|
+
},
|
|
82
|
+
}, { axis: y ? 'y' : 'x' }));
|
|
83
|
+
this.listen(this, 'keydown', (e) => {
|
|
84
|
+
if (this.flag('disabled'))
|
|
85
|
+
return;
|
|
86
|
+
const map = y ? { ArrowUp: 'up', ArrowDown: 'down' } : { ArrowLeft: 'left', ArrowRight: 'right' };
|
|
87
|
+
if (e.key === 'Delete' || e.key === 'Backspace')
|
|
88
|
+
this.swipe(y ? 'up' : 'left');
|
|
89
|
+
else if (map[e.key])
|
|
90
|
+
this.swipe(map[e.key]);
|
|
91
|
+
else
|
|
92
|
+
return;
|
|
93
|
+
e.preventDefault();
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
unmount() {
|
|
97
|
+
this._s?.stop();
|
|
98
|
+
}
|
|
99
|
+
}, { id: 'gesture', text: css });
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
function definePinchZoom(tag = 'usa-pinch-zoom') {
|
|
103
|
+
return base.defineElement(tag, (Base) => class UsaPinchZoom extends Base {
|
|
104
|
+
constructor() {
|
|
105
|
+
super(...arguments);
|
|
106
|
+
this._v = { k: 1, x: 0, y: 0 };
|
|
107
|
+
}
|
|
108
|
+
get scale() {
|
|
109
|
+
return this._v.k;
|
|
110
|
+
}
|
|
111
|
+
paint() {
|
|
112
|
+
const { k, x, y } = this._v;
|
|
113
|
+
this.style.setProperty('--usa-zoom', String(k));
|
|
114
|
+
this.style.setProperty('--usa-zoom-x', `${x}px`);
|
|
115
|
+
this.style.setProperty('--usa-zoom-y', `${y}px`);
|
|
116
|
+
this.toggleAttribute('data-zoomed', k > 1.01);
|
|
117
|
+
}
|
|
118
|
+
bound(k, x, y) {
|
|
119
|
+
const w = (this.clientWidth * (k - 1)) / 2;
|
|
120
|
+
const h = (this.clientHeight * (k - 1)) / 2;
|
|
121
|
+
return { x: base.clamp(x, -w, w), y: base.clamp(y, -h, h) };
|
|
122
|
+
}
|
|
123
|
+
zoomTo(scale) {
|
|
124
|
+
const k = base.clamp(scale, this.num('min', 1), this.num('max', 4));
|
|
125
|
+
const b = this.bound(k, this._v.x, this._v.y);
|
|
126
|
+
if (this.reduced) {
|
|
127
|
+
this._v = { k, ...b };
|
|
128
|
+
this.paint();
|
|
129
|
+
}
|
|
130
|
+
else {
|
|
131
|
+
this._k.set(k);
|
|
132
|
+
this._x.set(b.x);
|
|
133
|
+
this._y.set(b.y);
|
|
134
|
+
}
|
|
135
|
+
this.emit('zoom', { scale: k });
|
|
136
|
+
}
|
|
137
|
+
mount() {
|
|
138
|
+
const preset = this.str('preset', 'gentle');
|
|
139
|
+
this._k = spring.createSpring({ spring: preset, value: this._v.k, onUpdate: (v) => ((this._v.k = v), this.paint()) });
|
|
140
|
+
this._x = spring.createSpring({ spring: preset, value: this._v.x, onUpdate: (v) => ((this._v.x = v), this.paint()) });
|
|
141
|
+
this._y = spring.createSpring({ spring: preset, value: this._v.y, onUpdate: (v) => ((this._v.y = v), this.paint()) });
|
|
142
|
+
if (!this.hasAttribute('tabindex'))
|
|
143
|
+
this.tabIndex = 0;
|
|
144
|
+
let base$1 = 1;
|
|
145
|
+
let ox = 0;
|
|
146
|
+
let oy = 0;
|
|
147
|
+
this.onCleanup(core.gesture(this, {
|
|
148
|
+
onPinch: ({ scale, first, last }) => {
|
|
149
|
+
if (first)
|
|
150
|
+
base$1 = this._v.k;
|
|
151
|
+
const k = base.clamp(base$1 * scale, this.num('min', 1) * 0.7, this.num('max', 4) * 1.3);
|
|
152
|
+
if (last)
|
|
153
|
+
return this.zoomTo(k);
|
|
154
|
+
this._k.jump(k);
|
|
155
|
+
},
|
|
156
|
+
onPan: ({ dx, dy, vx, vy, first, last }) => {
|
|
157
|
+
if (this._v.k <= 1.01)
|
|
158
|
+
return;
|
|
159
|
+
if (first)
|
|
160
|
+
((ox = this._v.x), (oy = this._v.y));
|
|
161
|
+
if (!last) {
|
|
162
|
+
this._x.jump(ox + dx);
|
|
163
|
+
this._y.jump(oy + dy);
|
|
164
|
+
return;
|
|
165
|
+
}
|
|
166
|
+
const b = this.bound(this._v.k, ox + dx + vx * 0.15, oy + dy + vy * 0.15);
|
|
167
|
+
this._x.set(b.x, vx);
|
|
168
|
+
this._y.set(b.y, vy);
|
|
169
|
+
},
|
|
170
|
+
onDoubleTap: () => this.zoomTo(this._v.k > 1.01 ? 1 : this.num('double-tap', 2)),
|
|
171
|
+
}));
|
|
172
|
+
this.listen(this, 'keydown', (e) => {
|
|
173
|
+
if (e.key === '+' || e.key === '=')
|
|
174
|
+
this.zoomTo(this._v.k * 1.25);
|
|
175
|
+
else if (e.key === '-')
|
|
176
|
+
this.zoomTo(this._v.k / 1.25);
|
|
177
|
+
else if (e.key === '0')
|
|
178
|
+
this.zoomTo(1);
|
|
179
|
+
else
|
|
180
|
+
return;
|
|
181
|
+
e.preventDefault();
|
|
182
|
+
});
|
|
183
|
+
this.paint();
|
|
184
|
+
}
|
|
185
|
+
unmount() {
|
|
186
|
+
[this._k, this._x, this._y].forEach((s) => s?.stop());
|
|
187
|
+
}
|
|
188
|
+
}, { id: 'gesture', text: css });
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/**
|
|
192
|
+
* motionary/components/gesture — unified gestures (v3.2).
|
|
193
|
+
* `gesture()` recognises pan, swipe, pinch, long-press, tap and double-tap
|
|
194
|
+
* with release velocities for springs; `<usa-swipeable>` (swipe-to-dismiss)
|
|
195
|
+
* and `<usa-pinch-zoom>` are built on it.
|
|
196
|
+
*/
|
|
197
|
+
/** Register every component of this category under its default tag. */
|
|
198
|
+
function defineGestureComponents() {
|
|
199
|
+
defineSwipeable();
|
|
200
|
+
definePinchZoom();
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
exports.gesture = core.gesture;
|
|
204
|
+
exports.pinchScale = core.pinchScale;
|
|
205
|
+
exports.swipeDirection = core.swipeDirection;
|
|
206
|
+
exports.defineGestureComponents = defineGestureComponents;
|
|
207
|
+
exports.definePinchZoom = definePinchZoom;
|
|
208
|
+
exports.defineSwipeable = defineSwipeable;
|
|
209
|
+
//# sourceMappingURL=gesture.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"gesture.cjs","sources":["../../src/components/gesture/swipeable.ts","../../src/components/gesture/pinch-zoom.ts","../../src/components/gesture/index.ts"],"sourcesContent":["import { defineElement, type UsaElement } from '../base';\nimport { createSpring, type SpringValue } from '../physics/spring';\nimport { gesture, type SwipeDirection } from './core';\nimport css from './gesture.css?raw';\n\n/**\n * `<usa-swipeable>` — swipe-to-dismiss / swipe actions. The content follows\n * the finger (rubber-banded past `distance`), flies out on a swipe or a drag\n * past `distance`, otherwise springs home with the release velocity.\n *\n * Attributes: `axis` (`x` default · `y`), `distance` (px, 120), `preset`\n * (spring), `dismiss` (remove the element after flying out), `disabled`.\n * Keyboard: Delete/Backspace dismisses, ←/→ swipe. Events `usa:swipe`\n * (`{ direction }`, cancelable), `usa:dismiss`. Methods `swipe(dir)`, `reset()`.\n * Reduced motion: no follow / fly-out animation, events still fire.\n */\nexport interface UsaSwipeableElement extends UsaElement {\n swipe(direction: SwipeDirection): void;\n reset(): void;\n readonly offset: number;\n}\n\nexport function defineSwipeable(tag = 'usa-swipeable'): CustomElementConstructor | undefined {\n return defineElement(\n tag,\n (Base) =>\n class UsaSwipeable extends Base {\n static get observedAttributes(): string[] {\n return ['axis', 'disabled'];\n }\n private _s!: SpringValue;\n private _off = 0;\n\n get offset(): number {\n return this._off;\n }\n\n private put(v: number): void {\n this._off = v;\n this.style.setProperty('--usa-swipe', `${v}px`);\n this.style.setProperty('--usa-swipe-p', String(Math.min(1, Math.abs(v) / this.num('distance', 120))));\n }\n\n swipe(direction: SwipeDirection): void {\n if (!this.emit('swipe', { direction })) return this.reset();\n const sign = direction === 'left' || direction === 'up' ? -1 : 1;\n const far = sign * ((this.str('axis', 'x') === 'y' ? this.offsetHeight : this.offsetWidth) + 80 || 600);\n const done = () => {\n this.emit('dismiss', { direction });\n if (this.flag('dismiss')) this.remove();\n };\n if (this.reduced) {\n this.put(0);\n return done();\n }\n this.setAttribute('data-gone', '');\n this._s = createSpring({ spring: 'stiff', value: this._off, onUpdate: (v) => this.put(v), onRest: done });\n this._s.set(far, sign * 1500);\n }\n\n reset(): void {\n this.removeAttribute('data-gone');\n if (this.reduced) return this.put(0);\n this._s.set(0);\n }\n\n mount(): void {\n this._s = createSpring({ spring: this.str('preset', 'default'), onUpdate: (v) => this.put(v) });\n if (!this.hasAttribute('tabindex')) this.tabIndex = 0;\n const y = this.str('axis', 'x') === 'y';\n const max = () => this.num('distance', 120);\n this.onCleanup(\n gesture(this, {\n onPan: ({ dx, dy, vx, vy, last }) => {\n if (this.flag('disabled')) return;\n const d = y ? dy : dx;\n if (!last) {\n this._s.stop();\n if (!this.reduced) this.put(Math.abs(d) > max() ? Math.sign(d) * (max() + (Math.abs(d) - max()) * 0.35) : d);\n return;\n }\n if (Math.abs(d) > max()) this.swipe(y ? (d > 0 ? 'down' : 'up') : d > 0 ? 'right' : 'left');\n else if (!this.hasAttribute('data-gone')) {\n if (this.reduced) this.put(0);\n else this._s.set(0, y ? vy : vx);\n }\n },\n onSwipe: ({ direction }) => {\n if (this.flag('disabled') || this.hasAttribute('data-gone')) return;\n if (y === (direction === 'up' || direction === 'down')) this.swipe(direction);\n },\n }, { axis: y ? 'y' : 'x' })\n );\n this.listen(this, 'keydown', (e: KeyboardEvent) => {\n if (this.flag('disabled')) return;\n const map: Record<string, SwipeDirection> = y ? { ArrowUp: 'up', ArrowDown: 'down' } : { ArrowLeft: 'left', ArrowRight: 'right' };\n if (e.key === 'Delete' || e.key === 'Backspace') this.swipe(y ? 'up' : 'left');\n else if (map[e.key]) this.swipe(map[e.key]);\n else return;\n e.preventDefault();\n });\n }\n\n unmount(): void {\n this._s?.stop();\n }\n },\n { id: 'gesture', text: css }\n );\n}\n","import { defineElement, clamp, type UsaElement } from '../base';\nimport { createSpring, type SpringValue } from '../physics/spring';\nimport { gesture } from './core';\nimport css from './gesture.css?raw';\n\n/**\n * `<usa-pinch-zoom>` — pinch (two fingers or Ctrl/⌘ + wheel / trackpad\n * pinch) to zoom its content, pan while zoomed, double-tap to toggle zoom;\n * scale and position spring back inside the bounds on release.\n *\n * Attributes: `min` (1), `max` (4), `double-tap` (zoom level, 2), `preset`.\n * Keyboard: `+` / `-` / `0`. Property `scale`, method `zoomTo(scale)`.\n * Event `usa:zoom` (`{ scale }`). Reduced motion: zoom changes instantly.\n */\nexport interface UsaPinchZoomElement extends UsaElement {\n readonly scale: number;\n zoomTo(scale: number): void;\n}\n\nexport function definePinchZoom(tag = 'usa-pinch-zoom'): CustomElementConstructor | undefined {\n return defineElement(\n tag,\n (Base) =>\n class UsaPinchZoom extends Base {\n private _k!: SpringValue;\n private _x!: SpringValue;\n private _y!: SpringValue;\n private _v = { k: 1, x: 0, y: 0 };\n\n get scale(): number {\n return this._v.k;\n }\n\n private paint(): void {\n const { k, x, y } = this._v;\n this.style.setProperty('--usa-zoom', String(k));\n this.style.setProperty('--usa-zoom-x', `${x}px`);\n this.style.setProperty('--usa-zoom-y', `${y}px`);\n this.toggleAttribute('data-zoomed', k > 1.01);\n }\n\n private bound(k: number, x: number, y: number) {\n const w = (this.clientWidth * (k - 1)) / 2;\n const h = (this.clientHeight * (k - 1)) / 2;\n return { x: clamp(x, -w, w), y: clamp(y, -h, h) };\n }\n\n zoomTo(scale: number): void {\n const k = clamp(scale, this.num('min', 1), this.num('max', 4));\n const b = this.bound(k, this._v.x, this._v.y);\n if (this.reduced) {\n this._v = { k, ...b };\n this.paint();\n } else {\n this._k.set(k);\n this._x.set(b.x);\n this._y.set(b.y);\n }\n this.emit('zoom', { scale: k });\n }\n\n mount(): void {\n const preset = this.str('preset', 'gentle');\n this._k = createSpring({ spring: preset, value: this._v.k, onUpdate: (v) => ((this._v.k = v), this.paint()) });\n this._x = createSpring({ spring: preset, value: this._v.x, onUpdate: (v) => ((this._v.x = v), this.paint()) });\n this._y = createSpring({ spring: preset, value: this._v.y, onUpdate: (v) => ((this._v.y = v), this.paint()) });\n if (!this.hasAttribute('tabindex')) this.tabIndex = 0;\n let base = 1;\n let ox = 0;\n let oy = 0;\n this.onCleanup(\n gesture(this, {\n onPinch: ({ scale, first, last }) => {\n if (first) base = this._v.k;\n const k = clamp(base * scale, this.num('min', 1) * 0.7, this.num('max', 4) * 1.3);\n if (last) return this.zoomTo(k);\n this._k.jump(k);\n },\n onPan: ({ dx, dy, vx, vy, first, last }) => {\n if (this._v.k <= 1.01) return;\n if (first) ((ox = this._v.x), (oy = this._v.y));\n if (!last) {\n this._x.jump(ox + dx);\n this._y.jump(oy + dy);\n return;\n }\n const b = this.bound(this._v.k, ox + dx + vx * 0.15, oy + dy + vy * 0.15);\n this._x.set(b.x, vx);\n this._y.set(b.y, vy);\n },\n onDoubleTap: () => this.zoomTo(this._v.k > 1.01 ? 1 : this.num('double-tap', 2)),\n })\n );\n this.listen(this, 'keydown', (e: KeyboardEvent) => {\n if (e.key === '+' || e.key === '=') this.zoomTo(this._v.k * 1.25);\n else if (e.key === '-') this.zoomTo(this._v.k / 1.25);\n else if (e.key === '0') this.zoomTo(1);\n else return;\n e.preventDefault();\n });\n this.paint();\n }\n\n unmount(): void {\n [this._k, this._x, this._y].forEach((s) => s?.stop());\n }\n },\n { id: 'gesture', text: css }\n );\n}\n","/**\n * motionary/components/gesture — unified gestures (v3.2).\n * `gesture()` recognises pan, swipe, pinch, long-press, tap and double-tap\n * with release velocities for springs; `<usa-swipeable>` (swipe-to-dismiss)\n * and `<usa-pinch-zoom>` are built on it.\n */\nimport { defineSwipeable, type UsaSwipeableElement } from './swipeable';\nimport { definePinchZoom, type UsaPinchZoomElement } from './pinch-zoom';\n\nexport { defineSwipeable, definePinchZoom };\nexport { gesture, swipeDirection, pinchScale } from './core';\nexport type { GestureHandlers, GestureOptions, PanState, SwipeState, SwipeDirection, PinchState, PressState } from './core';\nexport type { UsaSwipeableElement, UsaPinchZoomElement };\n\n/** Register every component of this category under its default tag. */\nexport function defineGestureComponents(): void {\n defineSwipeable();\n definePinchZoom();\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'usa-swipeable': UsaSwipeableElement;\n 'usa-pinch-zoom': UsaPinchZoomElement;\n }\n}\n"],"names":["defineElement","createSpring","gesture","clamp","base"],"mappings":"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"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/* motionary/components/gesture */
|
|
2
|
+
.usa-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
|
|
3
|
+
usa-swipeable{display:block;touch-action:pan-y;user-select:none;-webkit-user-select:none}usa-swipeable[axis="y"]{touch-action:pan-x}usa-swipeable>*{transform:translate3d(var(--usa-swipe,0px),0,0);opacity:calc(1 - var(--usa-swipe-p,0) * 0.5)}usa-swipeable[axis="y"]>*{transform:translate3d(0,var(--usa-swipe,0px),0)}usa-swipeable:focus-visible{outline:2px solid currentColor;outline-offset:2px}usa-pinch-zoom{display:block;overflow:hidden;touch-action:none;position:relative}usa-pinch-zoom>*{transform:translate3d(var(--usa-zoom-x,0px),var(--usa-zoom-y,0px),0) scale(var(--usa-zoom,1));transform-origin:50% 50%}usa-pinch-zoom[data-zoomed]{cursor:grab}usa-pinch-zoom:focus-visible{outline:2px solid currentColor;outline-offset:2px}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Members shared by every `<usa-*>` element. Attribute helpers, a cleanup
|
|
3
|
+
* bag that is emptied on disconnect, and motion helpers that degrade to the
|
|
4
|
+
* final state without WAAPI or under reduced motion.
|
|
5
|
+
*/
|
|
6
|
+
interface UsaElement extends HTMLElement {
|
|
7
|
+
/** `true` while reduced motion applies to this element. */
|
|
8
|
+
readonly reduced: boolean;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
interface PanState {
|
|
12
|
+
/** Offset from the gesture start (px). */
|
|
13
|
+
dx: number;
|
|
14
|
+
dy: number;
|
|
15
|
+
/** Velocity (px/s). */
|
|
16
|
+
vx: number;
|
|
17
|
+
vy: number;
|
|
18
|
+
first: boolean;
|
|
19
|
+
last: boolean;
|
|
20
|
+
event: Event;
|
|
21
|
+
}
|
|
22
|
+
type SwipeDirection = 'left' | 'right' | 'up' | 'down';
|
|
23
|
+
interface SwipeState {
|
|
24
|
+
direction: SwipeDirection;
|
|
25
|
+
velocity: number;
|
|
26
|
+
dx: number;
|
|
27
|
+
dy: number;
|
|
28
|
+
}
|
|
29
|
+
interface PinchState {
|
|
30
|
+
scale: number; /** Midpoint of the two pointers (client px). */
|
|
31
|
+
x: number;
|
|
32
|
+
y: number;
|
|
33
|
+
first: boolean;
|
|
34
|
+
last: boolean;
|
|
35
|
+
}
|
|
36
|
+
interface PressState {
|
|
37
|
+
x: number;
|
|
38
|
+
y: number;
|
|
39
|
+
}
|
|
40
|
+
interface GestureHandlers {
|
|
41
|
+
onPan?: (s: PanState) => void;
|
|
42
|
+
onSwipe?: (s: SwipeState) => void;
|
|
43
|
+
onPinch?: (s: PinchState) => void;
|
|
44
|
+
onLongPress?: (s: PressState) => void;
|
|
45
|
+
onTap?: (s: PressState) => void;
|
|
46
|
+
onDoubleTap?: (s: PressState) => void;
|
|
47
|
+
}
|
|
48
|
+
interface GestureOptions {
|
|
49
|
+
/** Restrict panning to an axis. */
|
|
50
|
+
axis?: 'x' | 'y';
|
|
51
|
+
/** Movement (px) before a pan starts (default 4). */
|
|
52
|
+
threshold?: number;
|
|
53
|
+
/** Minimum distance (px, default 40) and speed (px/s, default 300) for a swipe. */
|
|
54
|
+
swipeDistance?: number;
|
|
55
|
+
swipeVelocity?: number;
|
|
56
|
+
/** Long-press delay (ms, default 500). */
|
|
57
|
+
longPress?: number;
|
|
58
|
+
/** Ctrl/⌘ + wheel (trackpad pinch) counts as pinch (default true). */
|
|
59
|
+
wheelPinch?: boolean;
|
|
60
|
+
}
|
|
61
|
+
/** The swipe a pointer release represents, or `null` (pure). */
|
|
62
|
+
declare function swipeDirection(dx: number, dy: number, vx: number, vy: number, o?: {
|
|
63
|
+
distance?: number;
|
|
64
|
+
velocity?: number;
|
|
65
|
+
axis?: 'x' | 'y';
|
|
66
|
+
}): SwipeState | null;
|
|
67
|
+
/** Scale between two pointer distances, clamped to [min, max] (pure). */
|
|
68
|
+
declare function pinchScale(startDistance: number, distance: number, base?: number, min?: number, max?: number): number;
|
|
69
|
+
/**
|
|
70
|
+
* One recognizer for pan, swipe, pinch (two pointers or Ctrl + wheel),
|
|
71
|
+
* long-press, tap and double-tap, with velocities ready to hand to a spring
|
|
72
|
+
* (`createSpring().set(target, velocity)`). Works with mouse, touch and pen
|
|
73
|
+
* through Pointer Events. Returns a cleanup function.
|
|
74
|
+
*
|
|
75
|
+
* @example
|
|
76
|
+
* const x = createSpring({ onUpdate: (v) => (card.style.translate = `${v}px`) });
|
|
77
|
+
* gesture(card, {
|
|
78
|
+
* onPan: ({ dx, last, vx }) => (last ? x.set(0, vx) : x.jump(dx)),
|
|
79
|
+
* onSwipe: ({ direction }) => dismiss(direction),
|
|
80
|
+
* }, { axis: 'x' });
|
|
81
|
+
*/
|
|
82
|
+
declare function gesture(el: HTMLElement, h: GestureHandlers, o?: GestureOptions): () => void;
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* `<usa-swipeable>` — swipe-to-dismiss / swipe actions. The content follows
|
|
86
|
+
* the finger (rubber-banded past `distance`), flies out on a swipe or a drag
|
|
87
|
+
* past `distance`, otherwise springs home with the release velocity.
|
|
88
|
+
*
|
|
89
|
+
* Attributes: `axis` (`x` default · `y`), `distance` (px, 120), `preset`
|
|
90
|
+
* (spring), `dismiss` (remove the element after flying out), `disabled`.
|
|
91
|
+
* Keyboard: Delete/Backspace dismisses, ←/→ swipe. Events `usa:swipe`
|
|
92
|
+
* (`{ direction }`, cancelable), `usa:dismiss`. Methods `swipe(dir)`, `reset()`.
|
|
93
|
+
* Reduced motion: no follow / fly-out animation, events still fire.
|
|
94
|
+
*/
|
|
95
|
+
interface UsaSwipeableElement extends UsaElement {
|
|
96
|
+
swipe(direction: SwipeDirection): void;
|
|
97
|
+
reset(): void;
|
|
98
|
+
readonly offset: number;
|
|
99
|
+
}
|
|
100
|
+
declare function defineSwipeable(tag?: string): CustomElementConstructor | undefined;
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* `<usa-pinch-zoom>` — pinch (two fingers or Ctrl/⌘ + wheel / trackpad
|
|
104
|
+
* pinch) to zoom its content, pan while zoomed, double-tap to toggle zoom;
|
|
105
|
+
* scale and position spring back inside the bounds on release.
|
|
106
|
+
*
|
|
107
|
+
* Attributes: `min` (1), `max` (4), `double-tap` (zoom level, 2), `preset`.
|
|
108
|
+
* Keyboard: `+` / `-` / `0`. Property `scale`, method `zoomTo(scale)`.
|
|
109
|
+
* Event `usa:zoom` (`{ scale }`). Reduced motion: zoom changes instantly.
|
|
110
|
+
*/
|
|
111
|
+
interface UsaPinchZoomElement extends UsaElement {
|
|
112
|
+
readonly scale: number;
|
|
113
|
+
zoomTo(scale: number): void;
|
|
114
|
+
}
|
|
115
|
+
declare function definePinchZoom(tag?: string): CustomElementConstructor | undefined;
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* motionary/components/gesture — unified gestures (v3.2).
|
|
119
|
+
* `gesture()` recognises pan, swipe, pinch, long-press, tap and double-tap
|
|
120
|
+
* with release velocities for springs; `<usa-swipeable>` (swipe-to-dismiss)
|
|
121
|
+
* and `<usa-pinch-zoom>` are built on it.
|
|
122
|
+
*/
|
|
123
|
+
|
|
124
|
+
/** Register every component of this category under its default tag. */
|
|
125
|
+
declare function defineGestureComponents(): void;
|
|
126
|
+
declare global {
|
|
127
|
+
interface HTMLElementTagNameMap {
|
|
128
|
+
'usa-swipeable': UsaSwipeableElement;
|
|
129
|
+
'usa-pinch-zoom': UsaPinchZoomElement;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
export { defineGestureComponents, definePinchZoom, defineSwipeable, gesture, pinchScale, swipeDirection };
|
|
134
|
+
export type { GestureHandlers, GestureOptions, PanState, PinchState, PressState, SwipeDirection, SwipeState, UsaPinchZoomElement, UsaSwipeableElement };
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Members shared by every `<usa-*>` element. Attribute helpers, a cleanup
|
|
3
|
+
* bag that is emptied on disconnect, and motion helpers that degrade to the
|
|
4
|
+
* final state without WAAPI or under reduced motion.
|
|
5
|
+
*/
|
|
6
|
+
interface UsaElement extends HTMLElement {
|
|
7
|
+
/** `true` while reduced motion applies to this element. */
|
|
8
|
+
readonly reduced: boolean;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
interface PanState {
|
|
12
|
+
/** Offset from the gesture start (px). */
|
|
13
|
+
dx: number;
|
|
14
|
+
dy: number;
|
|
15
|
+
/** Velocity (px/s). */
|
|
16
|
+
vx: number;
|
|
17
|
+
vy: number;
|
|
18
|
+
first: boolean;
|
|
19
|
+
last: boolean;
|
|
20
|
+
event: Event;
|
|
21
|
+
}
|
|
22
|
+
type SwipeDirection = 'left' | 'right' | 'up' | 'down';
|
|
23
|
+
interface SwipeState {
|
|
24
|
+
direction: SwipeDirection;
|
|
25
|
+
velocity: number;
|
|
26
|
+
dx: number;
|
|
27
|
+
dy: number;
|
|
28
|
+
}
|
|
29
|
+
interface PinchState {
|
|
30
|
+
scale: number; /** Midpoint of the two pointers (client px). */
|
|
31
|
+
x: number;
|
|
32
|
+
y: number;
|
|
33
|
+
first: boolean;
|
|
34
|
+
last: boolean;
|
|
35
|
+
}
|
|
36
|
+
interface PressState {
|
|
37
|
+
x: number;
|
|
38
|
+
y: number;
|
|
39
|
+
}
|
|
40
|
+
interface GestureHandlers {
|
|
41
|
+
onPan?: (s: PanState) => void;
|
|
42
|
+
onSwipe?: (s: SwipeState) => void;
|
|
43
|
+
onPinch?: (s: PinchState) => void;
|
|
44
|
+
onLongPress?: (s: PressState) => void;
|
|
45
|
+
onTap?: (s: PressState) => void;
|
|
46
|
+
onDoubleTap?: (s: PressState) => void;
|
|
47
|
+
}
|
|
48
|
+
interface GestureOptions {
|
|
49
|
+
/** Restrict panning to an axis. */
|
|
50
|
+
axis?: 'x' | 'y';
|
|
51
|
+
/** Movement (px) before a pan starts (default 4). */
|
|
52
|
+
threshold?: number;
|
|
53
|
+
/** Minimum distance (px, default 40) and speed (px/s, default 300) for a swipe. */
|
|
54
|
+
swipeDistance?: number;
|
|
55
|
+
swipeVelocity?: number;
|
|
56
|
+
/** Long-press delay (ms, default 500). */
|
|
57
|
+
longPress?: number;
|
|
58
|
+
/** Ctrl/⌘ + wheel (trackpad pinch) counts as pinch (default true). */
|
|
59
|
+
wheelPinch?: boolean;
|
|
60
|
+
}
|
|
61
|
+
/** The swipe a pointer release represents, or `null` (pure). */
|
|
62
|
+
declare function swipeDirection(dx: number, dy: number, vx: number, vy: number, o?: {
|
|
63
|
+
distance?: number;
|
|
64
|
+
velocity?: number;
|
|
65
|
+
axis?: 'x' | 'y';
|
|
66
|
+
}): SwipeState | null;
|
|
67
|
+
/** Scale between two pointer distances, clamped to [min, max] (pure). */
|
|
68
|
+
declare function pinchScale(startDistance: number, distance: number, base?: number, min?: number, max?: number): number;
|
|
69
|
+
/**
|
|
70
|
+
* One recognizer for pan, swipe, pinch (two pointers or Ctrl + wheel),
|
|
71
|
+
* long-press, tap and double-tap, with velocities ready to hand to a spring
|
|
72
|
+
* (`createSpring().set(target, velocity)`). Works with mouse, touch and pen
|
|
73
|
+
* through Pointer Events. Returns a cleanup function.
|
|
74
|
+
*
|
|
75
|
+
* @example
|
|
76
|
+
* const x = createSpring({ onUpdate: (v) => (card.style.translate = `${v}px`) });
|
|
77
|
+
* gesture(card, {
|
|
78
|
+
* onPan: ({ dx, last, vx }) => (last ? x.set(0, vx) : x.jump(dx)),
|
|
79
|
+
* onSwipe: ({ direction }) => dismiss(direction),
|
|
80
|
+
* }, { axis: 'x' });
|
|
81
|
+
*/
|
|
82
|
+
declare function gesture(el: HTMLElement, h: GestureHandlers, o?: GestureOptions): () => void;
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* `<usa-swipeable>` — swipe-to-dismiss / swipe actions. The content follows
|
|
86
|
+
* the finger (rubber-banded past `distance`), flies out on a swipe or a drag
|
|
87
|
+
* past `distance`, otherwise springs home with the release velocity.
|
|
88
|
+
*
|
|
89
|
+
* Attributes: `axis` (`x` default · `y`), `distance` (px, 120), `preset`
|
|
90
|
+
* (spring), `dismiss` (remove the element after flying out), `disabled`.
|
|
91
|
+
* Keyboard: Delete/Backspace dismisses, ←/→ swipe. Events `usa:swipe`
|
|
92
|
+
* (`{ direction }`, cancelable), `usa:dismiss`. Methods `swipe(dir)`, `reset()`.
|
|
93
|
+
* Reduced motion: no follow / fly-out animation, events still fire.
|
|
94
|
+
*/
|
|
95
|
+
interface UsaSwipeableElement extends UsaElement {
|
|
96
|
+
swipe(direction: SwipeDirection): void;
|
|
97
|
+
reset(): void;
|
|
98
|
+
readonly offset: number;
|
|
99
|
+
}
|
|
100
|
+
declare function defineSwipeable(tag?: string): CustomElementConstructor | undefined;
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* `<usa-pinch-zoom>` — pinch (two fingers or Ctrl/⌘ + wheel / trackpad
|
|
104
|
+
* pinch) to zoom its content, pan while zoomed, double-tap to toggle zoom;
|
|
105
|
+
* scale and position spring back inside the bounds on release.
|
|
106
|
+
*
|
|
107
|
+
* Attributes: `min` (1), `max` (4), `double-tap` (zoom level, 2), `preset`.
|
|
108
|
+
* Keyboard: `+` / `-` / `0`. Property `scale`, method `zoomTo(scale)`.
|
|
109
|
+
* Event `usa:zoom` (`{ scale }`). Reduced motion: zoom changes instantly.
|
|
110
|
+
*/
|
|
111
|
+
interface UsaPinchZoomElement extends UsaElement {
|
|
112
|
+
readonly scale: number;
|
|
113
|
+
zoomTo(scale: number): void;
|
|
114
|
+
}
|
|
115
|
+
declare function definePinchZoom(tag?: string): CustomElementConstructor | undefined;
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* motionary/components/gesture — unified gestures (v3.2).
|
|
119
|
+
* `gesture()` recognises pan, swipe, pinch, long-press, tap and double-tap
|
|
120
|
+
* with release velocities for springs; `<usa-swipeable>` (swipe-to-dismiss)
|
|
121
|
+
* and `<usa-pinch-zoom>` are built on it.
|
|
122
|
+
*/
|
|
123
|
+
|
|
124
|
+
/** Register every component of this category under its default tag. */
|
|
125
|
+
declare function defineGestureComponents(): void;
|
|
126
|
+
declare global {
|
|
127
|
+
interface HTMLElementTagNameMap {
|
|
128
|
+
'usa-swipeable': UsaSwipeableElement;
|
|
129
|
+
'usa-pinch-zoom': UsaPinchZoomElement;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
export { defineGestureComponents, definePinchZoom, defineSwipeable, gesture, pinchScale, swipeDirection };
|
|
134
|
+
export type { GestureHandlers, GestureOptions, PanState, PinchState, PressState, SwipeDirection, SwipeState, UsaPinchZoomElement, UsaSwipeableElement };
|