Socket
Socket
Sign inDemoInstall

svelte-actions

Package Overview
Dependencies
0
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.1.0 to 0.2.0

dist/clickOutside.d.ts
dist/clickOutside.js
dist/clickOutside.test.d.ts
dist/clickOutside.test.js
dist/lazyload.d.ts
dist/lazyload.js
dist/lazyload.test.d.ts
dist/lazyload.test.js
dist/longpress.d.ts
dist/longpress.js
dist/longpress.test.d.ts
dist/longpress.test.js
dist/pannable.d.ts
dist/pannable.js
dist/pannable.test.d.ts
dist/pannable.test.js
dist/preventTabClose.d.ts
dist/preventTabClose.js
dist/preventTabClose.test.d.ts
dist/preventTabClose.test.js
dist/shortcut.d.ts
dist/shortcut.js
dist/shortcut.test.d.ts
dist/shortcut.test.js
dist/test.d.ts
dist/test.js
dist/types.d.ts
dist/types.js
src/clickOutside.test.ts
src/clickOutside.ts
src/lazyload.test.ts
src/lazyload.ts
src/longpress.test.ts
src/longpress.ts
src/pannable.test.ts
src/pannable.ts
src/preventTabClose.test.ts
src/preventTabClose.ts
src/shortcut.test.ts
src/shortcut.ts
src/test.ts
src/types.ts

66

dist/index.d.ts

@@ -1,60 +0,6 @@

declare type Action = (node: HTMLElement, parameters: any) => {
update?: (parameters: any) => void;
destroy?: () => void;
};
/**
*
* Call callback when user clicks outside a given element
*
* Usage:
* <div use:clickOutside={{ enabled: open, cb: () => open = false }}>
*
* Demo: https://svelte.dev/repl/dae848c2157e48ab932106779960f5d5?version=3.19.2
*
*/
export declare function clickOutside(node: HTMLElement, params: {
enabled: boolean;
cb: Function;
}): ReturnType<Action>;
/**
* Creates `longpress` event when mousedown above `duration` milliseconds.
*
* Usage:
*
*<button use:longpress={duration}
on:longpress="{() => pressed = true}"
on:mouseenter="{() => pressed = false}"
>press and hold</button>
*
* Demo: https://svelte.dev/tutorial/adding-parameters-to-actions
*/
export declare function longpress(node: HTMLElement, duration: number): ReturnType<Action>;
/**
* Creates panStart, panMove, panEnd events so you can drag elements.
*
* Demo: https://svelte.dev/tutorial/actions
*
*/
export declare function pannable(node: HTMLElement): ReturnType<Action>;
export declare function lazyload(node: HTMLElement, attributes: Object): ReturnType<Action>;
/**
* Prevent current tab from being closed by user
*
* Demo: https://svelte.dev/repl/a95db12c1b46433baac2817a0963dc93
*/
export declare const preventTabClose: Action;
/**
* Simplest possible way to add a keyboard shortcut to a div or a button.
* It either calls a callback or clicks on the node it was put on.
*
* Demo: https://svelte.dev/repl/acd92c9726634ec7b3d8f5f759824d15
*/
export declare type ShortcutSetting = {
control?: boolean;
shift?: boolean;
alt?: boolean;
code: string;
callback?: () => void;
};
export declare const shortcut: Action;
export {};
export * from './clickOutside';
export * from './longpress';
export * from './pannable';
export * from './lazyload';
export * from './preventTabClose';
export * from './shortcut';

209

dist/index.js
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __exportStar = (this && this.__exportStar) || function(m, exports) {
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.shortcut = exports.preventTabClose = exports.lazyload = exports.pannable = exports.longpress = exports.clickOutside = void 0;
/**
*
* Call callback when user clicks outside a given element
*
* Usage:
* <div use:clickOutside={{ enabled: open, cb: () => open = false }}>
*
* Demo: https://svelte.dev/repl/dae848c2157e48ab932106779960f5d5?version=3.19.2
*
*/
function clickOutside(node, params) {
var initialEnabled = params.enabled, cb = params.cb;
var handleOutsideClick = function (_a) {
var target = _a.target;
if (!node.contains(target))
cb(); // typescript hack, not sure how to solve without asserting as Node
};
function update(_a) {
var enabled = _a.enabled;
if (enabled) {
window.addEventListener('click', handleOutsideClick);
}
else {
window.removeEventListener('click', handleOutsideClick);
}
}
update({ enabled: initialEnabled });
return {
update: update,
destroy: function () {
window.removeEventListener('click', handleOutsideClick);
}
};
}
exports.clickOutside = clickOutside;
/**
* Creates `longpress` event when mousedown above `duration` milliseconds.
*
* Usage:
*
*<button use:longpress={duration}
on:longpress="{() => pressed = true}"
on:mouseenter="{() => pressed = false}"
>press and hold</button>
*
* Demo: https://svelte.dev/tutorial/adding-parameters-to-actions
*/
function longpress(node, duration) {
var timer;
var handleMousedown = function () {
timer = setTimeout(function () {
node.dispatchEvent(new CustomEvent('longpress'));
}, duration);
};
var handleMouseup = function () {
clearTimeout(timer);
};
node.addEventListener('mousedown', handleMousedown);
node.addEventListener('mouseup', handleMouseup);
return {
update: function (newDuration) {
duration = newDuration;
},
destroy: function () {
node.removeEventListener('mousedown', handleMousedown);
node.removeEventListener('mouseup', handleMouseup);
}
};
}
exports.longpress = longpress;
/**
* Creates panStart, panMove, panEnd events so you can drag elements.
*
* Demo: https://svelte.dev/tutorial/actions
*
*/
function pannable(node) {
var x;
var y;
function handleMousedown(event) {
x = event.clientX;
y = event.clientY;
node.dispatchEvent(new CustomEvent('panstart', {
detail: { x: x, y: y }
}));
window.addEventListener('mousemove', handleMousemove);
window.addEventListener('mouseup', handleMouseup);
}
function handleMousemove(event) {
var dx = event.clientX - x;
var dy = event.clientY - y;
x = event.clientX;
y = event.clientY;
node.dispatchEvent(new CustomEvent('panmove', {
detail: { x: x, y: y, dx: dx, dy: dy }
}));
}
function handleMouseup(event) {
x = event.clientX;
y = event.clientY;
node.dispatchEvent(new CustomEvent('panend', {
detail: { x: x, y: y }
}));
window.removeEventListener('mousemove', handleMousemove);
window.removeEventListener('mouseup', handleMouseup);
}
node.addEventListener('mousedown', handleMousedown);
return {
destroy: function () {
node.removeEventListener('mousedown', handleMousedown);
}
};
}
exports.pannable = pannable;
/**
* Attach onto any image to lazy load it
*
* <img use:lazyLoad={{src:"/myimage"}} alt="">
*
* Demo: https://svelte.dev/repl/f12988de576b4bf9b541a2a59eb838f6?version=3.23.2
*
*/
var lazyLoadHandleIntersection = function (entries) {
entries.forEach(function (entry) {
var _a;
if (!entry.isIntersecting) {
return;
}
if (!(entry.target instanceof HTMLElement)) {
return;
}
var node = entry.target;
var attributes = (_a = lazyLoadNodeAttributes.find(function (item) { return item.node === node; })) === null || _a === void 0 ? void 0 : _a.attributes;
Object.assign(node, attributes);
lazyLoadObserver.unobserve(node);
});
};
var lazyLoadObserver = new IntersectionObserver(lazyLoadHandleIntersection);
var lazyLoadNodeAttributes = [];
function lazyload(node, attributes) {
lazyLoadNodeAttributes.push({ node: node, attributes: attributes });
lazyLoadObserver.observe(node);
return {
destroy: function () {
lazyLoadObserver.unobserve(node);
}
};
}
exports.lazyload = lazyload;
/**
* Prevent current tab from being closed by user
*
* Demo: https://svelte.dev/repl/a95db12c1b46433baac2817a0963dc93
*/
exports.preventTabClose = function (_, enabled) {
var handler = function (e) {
e.preventDefault();
e.returnValue = '';
}, setHandler = function (shouldWork) {
return shouldWork ?
window.addEventListener('beforeunload', handler) :
window.removeEventListener('beforeunload', handler);
};
setHandler(enabled);
return {
update: setHandler,
destroy: function () { return setHandler(false); },
};
};
exports.shortcut = function (node, params) {
var handler;
var removeHandler = function () { return window.removeEventListener('keydown', handler); }, setHandler = function () {
removeHandler();
if (!params)
return;
handler = function (e) {
if ((!!params.alt != e.altKey) ||
(!!params.shift != e.shiftKey) ||
(!!params.control != (e.ctrlKey || e.metaKey)) ||
params.code != e.code)
return;
e.preventDefault();
params.callback ? params.callback() : node.click();
};
window.addEventListener('keydown', handler);
};
setHandler();
return {
update: setHandler,
destroy: removeHandler,
};
};
__exportStar(require("./clickOutside"), exports);
__exportStar(require("./longpress"), exports);
__exportStar(require("./pannable"), exports);
__exportStar(require("./lazyload"), exports);
__exportStar(require("./preventTabClose"), exports);
__exportStar(require("./shortcut"), exports);

13

package.json
{
"name": "svelte-actions",
"version": "0.1.0",
"version": "0.2.0",
"module": "dist/index.mjs",

@@ -11,3 +11,4 @@ "main": "dist/index.js",

"version": "auto-changelog -p --template keepachangelog && git add CHANGELOG.md",
"prepublishOnly": "git push && git push --tags && gh-release"
"prepublishOnly": "git push && git push --tags && gh-release",
"test": "mocha ./src/test.ts"
},

@@ -33,4 +34,12 @@ "keywords": [

"devDependencies": {
"@types/jsdom": "^16.2.6",
"@types/mocha": "^8.2.0",
"@types/node": "^14.14.22",
"@types/sinon": "^9.0.10",
"auto-changelog": "^2.2.1",
"gh-release": "^4.0.3",
"jsdom": "^16.4.0",
"mocha": "^9.2.0",
"sinon": "^9.2.3",
"sucrase": "^3.17.0",
"svelte": "^3.29.4",

@@ -37,0 +46,0 @@ "typescript": "^4.0.5"

38

README.md
# svelte-actions
A Prototype svelte actions for inclusion into official actions in future.
A Prototype svelte actions for inclusion into official actions in future. [See RFC](https://github.com/sveltejs/rfcs/pull/24) and [Discuss High Level Policy](https://github.com/sw-yx/svelte-actions/issues/7).
- See RFC: https://github.com/sveltejs/rfcs/pull/24
- Discuss High Level Policy: https://github.com/sw-yx/svelte-actions/issues/7
> ⚠️ Tests are kindly provided by [@geoffrich](https://github.com/sw-yx/svelte-actions/pull/18) - but do not rely on this library yet! APIs may change - this is a strawman for discussion.
> ⚠️ Do not rely on this library yet!
## Install Instructions

@@ -18,8 +15,10 @@

- `clickOutside`
- `longpress`
- `pannable`
- `lazyload`
- `preventTabClose`
- `shortcut`
| name | description |
|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `clickOutside` | [Demo](https://svelte.dev/repl/dae848c2157e48ab932106779960f5d5?version=3.19.2) - Call callback when user clicks outside a given element. |
| `longpress` | [Demo](https://svelte.dev/tutorial/adding-parameters-to-actions) - Creates `longpress` event when mousedown above `duration` milliseconds. |
| `pannable` | [Demo](https://svelte.dev/tutorial/actions) - Creates `panstart`, `panmove`, `panend` events so you can drag elements. |
| `lazyload` | [Demo](https://svelte.dev/repl/f12988de576b4bf9b541a2a59eb838f6?version=3.23.2) - Lazily attach properties to any DOM element (e.g. `<img>`) when it is in the window. |
| `preventTabClose` | [Demo](https://svelte.dev/repl/a95db12c1b46433baac2817a0963dc93) - Prevent current tab from being closed by user. |
| `shortcut` | [Demo](https://svelte.dev/repl/aca51811429c4127b1e7ff7eb67a172f?version=3.38.2) - Add a keyboard shortcut to a div or a button. |

@@ -31,3 +30,8 @@

`export function clickOutside(node: HTMLElement, params: {enabled: boolean, cb: Function }): ReturnType<Action>`
```ts
export function clickOutside(node: HTMLElement, params: {
enabled: boolean,
callback?: (node?: HTMLElement) => void;
}): ReturnType<Action>
```

@@ -46,3 +50,3 @@ Call callback when user clicks outside a given element.

<div use:clickOutside={{ enabled: open, cb: () => open = false }}>
<div use:clickOutside={{ enabled: open, callback: () => open = false }}>
<button on:click={() => open = true}>Open</button>

@@ -150,11 +154,11 @@ {#if open}

code: string;
callback?: () => void;
callback?: (node?: HTMLElement) => void;
})
```
Simplest possible way to add a keyboard shortcut to a div or a button.
Add a keyboard shortcut to a div or a button.
It either calls a callback or clicks on the node it was put on.
Demo: https://svelte.dev/repl/acd92c9726634ec7b3d8f5f759824d15
Demo: https://svelte.dev/repl/aca51811429c4127b1e7ff7eb67a172f?version=3.38.2

@@ -182,2 +186,4 @@ ```svelte

- `viewport`: creates `enterViewport`/`leaveViewport` events https://github.com/sveltejs/rfcs/pull/24#issuecomment-645392769
- `activeLink`: adds a class if the current link is "active" https://github.com/sw-yx/svelte-actions/issues/13#issuecomment-767844419
- `focus` as a JS version of `autofocus` HTML attribute https://github.com/sw-yx/svelte-actions/issues/22

@@ -184,0 +190,0 @@ Click to vote:

252

src/index.ts

@@ -1,246 +0,6 @@

type Action = (node: HTMLElement, parameters: any) => {
update?: (parameters: any) => void,
destroy?: () => void
}
/**
*
* Call callback when user clicks outside a given element
*
* Usage:
* <div use:clickOutside={{ enabled: open, cb: () => open = false }}>
*
* Demo: https://svelte.dev/repl/dae848c2157e48ab932106779960f5d5?version=3.19.2
*
*/
export function clickOutside(node: HTMLElement, params: {enabled: boolean, cb: Function }): ReturnType<Action> {
const { enabled: initialEnabled, cb } = params
const handleOutsideClick = ({ target }: MouseEvent) => {
if (!node.contains(target as Node)) cb(); // typescript hack, not sure how to solve without asserting as Node
};
function update({enabled}: {enabled: boolean}) {
if (enabled) {
window.addEventListener('click', handleOutsideClick);
} else {
window.removeEventListener('click', handleOutsideClick);
}
}
update({ enabled: initialEnabled });
return {
update,
destroy() {
window.removeEventListener( 'click', handleOutsideClick );
}
};
}
/**
* Creates `longpress` event when mousedown above `duration` milliseconds.
*
* Usage:
*
*<button use:longpress={duration}
on:longpress="{() => pressed = true}"
on:mouseenter="{() => pressed = false}"
>press and hold</button>
*
* Demo: https://svelte.dev/tutorial/adding-parameters-to-actions
*/
export function longpress(node: HTMLElement, duration: number): ReturnType<Action> {
let timer: number;
const handleMousedown = () => {
timer = setTimeout(() => {
node.dispatchEvent(
new CustomEvent('longpress')
);
}, duration);
};
const handleMouseup = () => {
clearTimeout(timer)
};
node.addEventListener('mousedown', handleMousedown);
node.addEventListener('mouseup', handleMouseup);
return {
update(newDuration) {
duration = newDuration;
},
destroy() {
node.removeEventListener('mousedown', handleMousedown);
node.removeEventListener('mouseup', handleMouseup);
}
};
}
/**
* Creates panStart, panMove, panEnd events so you can drag elements.
*
* Demo: https://svelte.dev/tutorial/actions
*
*/
export function pannable(node: HTMLElement): ReturnType<Action> {
let x: number;
let y: number;
function handleMousedown(event: MouseEvent) {
x = event.clientX;
y = event.clientY;
node.dispatchEvent(new CustomEvent('panstart', {
detail: { x, y }
}));
window.addEventListener('mousemove', handleMousemove);
window.addEventListener('mouseup', handleMouseup);
}
function handleMousemove(event: MouseEvent) {
const dx = event.clientX - x;
const dy = event.clientY - y;
x = event.clientX;
y = event.clientY;
node.dispatchEvent(new CustomEvent('panmove', {
detail: { x, y, dx, dy }
}));
}
function handleMouseup(event: MouseEvent) {
x = event.clientX;
y = event.clientY;
node.dispatchEvent(new CustomEvent('panend', {
detail: { x, y }
}));
window.removeEventListener('mousemove', handleMousemove);
window.removeEventListener('mouseup', handleMouseup);
}
node.addEventListener('mousedown', handleMousedown);
return {
destroy() {
node.removeEventListener('mousedown', handleMousedown);
}
};
}
/**
* Attach onto any image to lazy load it
*
* <img use:lazyLoad={{src:"/myimage"}} alt="">
*
* Demo: https://svelte.dev/repl/f12988de576b4bf9b541a2a59eb838f6?version=3.23.2
*
*/
const lazyLoadHandleIntersection: IntersectionObserverCallback = (entries) => {
entries.forEach(
entry => {
if (!entry.isIntersecting) {
return
}
if (!(entry.target instanceof HTMLElement)) {
return;
}
let node = entry.target;
let attributes = lazyLoadNodeAttributes.find(item => item.node === node)?.attributes
Object.assign(node, attributes)
lazyLoadObserver.unobserve(node)
}
)
}
const lazyLoadObserver = new IntersectionObserver(lazyLoadHandleIntersection);
let lazyLoadNodeAttributes: Array<{node: HTMLElement, attributes: Object}> = []
export function lazyload(node: HTMLElement, attributes: Object): ReturnType<Action> {
lazyLoadNodeAttributes.push({node, attributes})
lazyLoadObserver.observe(node);
return {
destroy() {
lazyLoadObserver.unobserve(node);
}
};
}
/**
* Prevent current tab from being closed by user
*
* Demo: https://svelte.dev/repl/a95db12c1b46433baac2817a0963dc93
*/
export const preventTabClose: Action = (_, enabled: boolean) => {
const handler = (e: BeforeUnloadEvent) => {
e.preventDefault();
e.returnValue = '';
},
setHandler = (shouldWork: boolean) =>
shouldWork ?
window.addEventListener('beforeunload', handler) :
window.removeEventListener('beforeunload', handler);
setHandler(enabled);
return {
update: setHandler,
destroy: () => setHandler(false),
};
};
/**
* Simplest possible way to add a keyboard shortcut to a div or a button.
* It either calls a callback or clicks on the node it was put on.
*
* Demo: https://svelte.dev/repl/acd92c9726634ec7b3d8f5f759824d15
*/
export type ShortcutSetting = {
control?: boolean;
shift?: boolean;
alt?: boolean;
code: string;
callback?: () => void;
};
export const shortcut: Action = (node, params: ShortcutSetting | undefined) => {
let handler: ((e: KeyboardEvent) => void) | undefined;
const removeHandler = () => window.removeEventListener('keydown', handler!),
setHandler = () => {
removeHandler();
if (!params) return;
handler = (e: KeyboardEvent) => {
if (
(!!params.alt != e.altKey) ||
(!!params.shift != e.shiftKey) ||
(!!params.control != (e.ctrlKey || e.metaKey)) ||
params.code != e.code
)
return;
e.preventDefault();
params.callback ? params.callback() : node.click();
};
window.addEventListener('keydown', handler);
};
setHandler();
return {
update: setHandler,
destroy: removeHandler,
};
};
export * from './clickOutside';
export * from './longpress';
export * from './pannable';
export * from './lazyload';
export * from './preventTabClose';
export * from './shortcut';
CHANGELOG.md
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc