readme

.gitignore

@@ -0,0 +1,118 @@
+dist
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

LICENSE

@@ -0,0 +1,21 @@
+MIT License Copyright (c) 2020 swyx
+
+Permission is hereby granted, free of
+charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice
+(including the next paragraph) shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,58 @@
+# svelte-actions
+
+prototype svelte actions for inclusion into official actions
+
+See RFC: https://github.com/sveltejs/rfcs/pull/24
+
+do not rely on this library yet!
+
+## Included Actions
+
+### `clickOutside`
+
+to be completed
+
+### `longpress`
+
+`export function longpress(node: HTMLElement, duration: number): ReturnType<Action>`
+
+Creates `longpress` event when mousedown above `duration` milliseconds.
+
+Demo: https://svelte.dev/tutorial/adding-parameters-to-actions
+
+```svelte
+<script>
+  import {lazyLoad} from 'svelte-actions'
+</script>
+
+<img use:lazyLoad={{src:"/myimage"}} alt="">
+```
+
+### `pannable`
+
+`export function pannable(node: HTMLElement): ReturnType<Action>`
+
+Creates `panStart`, `panMove`, `panEnd` events so you can drag elements. Demo: https://svelte.dev/tutorial/actions
+
+### `lazyLoad`
+
+`export function lazyLoad(node: HTMLElement, attributes: Object): ReturnType<Action>`
+
+Lazily attach properties to any DOM element when it is in the window. Useful for lazy loading images, and other properties.
+
+Demo: https://svelte.dev/repl/f12988de576b4bf9b541a2a59eb838f6?version=3.23.2
+
+```svelte
+<script>
+  import {lazyLoad} from 'svelte-actions'
+</script>
+
+<img use:lazyLoad={{src:"/myimage"}} alt="">
+```
+
+
+## Actions for Consideration
+
+- `closeOnEscape`/`closeOnScroll`/`closeOnFocusOutside`: https://github.com/sveltejs/rfcs/pull/24#issuecomment-645094235
+- `selectTextOnFocus`/`clearTextOnEscape`/`blurOnEscape`/`blurOnEnter`:  
+- `viewport`: creates `enterViewport`/`leaveViewport` events https://github.com/sveltejs/rfcs/pull/24#issuecomment-645392769

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "svelte-actions",
+  "version": "0.0.1",
+  "module": "dist/index.mjs",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "files": [
+    "src",
+    "dist"
+  ],
+  "author": "swyx",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sw-yx/svelte-actions.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sw-yx/svelte-actions/issues"
+  },
+  "homepage": "https://github.com/sw-yx/svelte-actions#readme",
+  "description": "",
+  "devDependencies": {
+    "svelte": "^3.29.4",
+    "typescript": "^4.0.5"
+  }
+}

src/index.ts

@@ -0,0 +1,135 @@
+type Action = (node: HTMLElement, parameters: any) => {
+	update?: (parameters: any) => void,
+	destroy?: () => void
+}
+
+
+// export function clickOutside(): 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 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
+ * 
+ */
+export function lazyLoad(node: HTMLElement, attributes: Object): ReturnType<Action> { 
+	let intersecting = false;
+
+	const handleIntersection: IntersectionObserverCallback = (entries) => {
+		intersecting = entries[0].isIntersecting;
+		if (entries[0].intersectionRatio > 0) {
+			Object.assign(node, attributes)
+		}
+		if (intersecting) {
+			observer.unobserve(node);
+		}
+	} 
+	const observer = new IntersectionObserver(handleIntersection);
+	observer.observe(node);
+	return {
+		destroy() {
+			observer.unobserve(node);
+		}
+	};
+}