├── .eslintrc.cjs
├── .gitignore
├── .nvmrc
├── .prettierrc
├── README.md
├── mdsvex.config.js
├── netlify.toml
├── package.json
├── src
    ├── app.html
    ├── global.d.ts
    ├── lib
    │   ├── FlatList.svelte
    │   ├── _actions
    │   │   ├── clickOutside.ts
    │   │   └── draggable.ts
    │   └── index.ts
    └── routes
    │   ├── _Codeblock.svx
    │   ├── _GHLink.svelte
    │   ├── _Install.svelte.md
    │   ├── _Props.svelte.md
    │   ├── _TableOfContents.svelte
    │   ├── __layout.svelte
    │   └── index.svelte
├── static
    └── favicon.png
├── svelte.config.js
└── tsconfig.json


/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root: true,
 3 | 	parser: '@typescript-eslint/parser',
 4 | 	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
 5 | 	plugins: ['svelte3', '@typescript-eslint'],
 6 | 	ignorePatterns: ['*.cjs'],
 7 | 	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 8 | 	settings: {
 9 | 		'svelte3/typescript': () => require('typescript')
10 | 	},
11 | 	parserOptions: {
12 | 		sourceType: 'module',
13 | 		ecmaVersion: 2019
14 | 	},
15 | 	env: {
16 | 		browser: true,
17 | 		es2017: true,
18 | 		node: true
19 | 	}
20 | };
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /.svelte-kit
5 | /package
6 | .env
7 | /.netlify
8 | .sveltegen.json
9 | 


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | NODE_VERSION=16
2 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"useTabs": true,
3 | 	"singleQuote": true,
4 | 	"trailingComma": "none",
5 | 	"printWidth": 100
6 | }
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Svelte FlatList
  2 | 
  3 | A mobile-friendly, simple, and customizable draggable menu.
  4 | 
  5 | **Documentation / Demo site**: https://svelte-flatlist.netlify.app/
  6 | 
  7 | [Find me on NPM!](https://www.npmjs.com/package/svelte-flatlist)
  8 | 
  9 | ## Demo
 10 | 
 11 | [Demo/Docs](https://svelte-flatlist.netlify.app/)
 12 | [REPL](https://svelte.dev/repl/b1b6b42ca4c944ca99f0063d5ca1ccdb?version=3.44.2)
 13 | 
 14 | ### Installation
 15 | 
 16 | `npm install -D svelte-flatlist`
 17 | 
 18 | # Usage
 19 | 
 20 | Using Svelte FlatList is very simple. Below are some usage examples.
 21 | 
 22 | ## Each Block
 23 | 
 24 | _See this in action at the Svelte REPL!_
 25 | [Link](https://svelte.dev/repl/2cfb8d8b8ff2447688874a2e0dacb731?version=3.44.2)
 26 | 
 27 | ```html
 28 | <script>
 29 |   import FlatList from 'svelte-flatlist';
 30 |   let visible;
 31 |   const items = [0,1,2,3,4,5];
 32 | 
 33 |   function handleClose(){
 34 |     visible = false;
 35 |   }
 36 | </script>
 37 | 
 38 | <button on:click={()=>(visible=true)}>
 39 | 	Click me!
 40 | </button>
 41 | 
 42 | <FlatList on:close={handleClose} bind:visible>
 43 |   {#each items as item}
 44 |     <span>{item}</span>
 45 |   {/each}
 46 | </FlatList>
 47 | ```
 48 | 
 49 | ## Customize the theme
 50 | 
 51 | _See this in action at the Svelte REPL!_
 52 | [Link](https://svelte.dev/repl/dbe96ccc7e974dee80ce57a45d17ae2e?version=3.44.2)
 53 | 
 54 | ```html
 55 | <script>
 56 |   import FlatList from 'svelte-flatlist';
 57 |   let visible;
 58 |   const items = [0,1,2,3,4,5];
 59 | 
 60 |   function handleClose(){
 61 |     visible = false;
 62 |   }
 63 | </script>
 64 | 
 65 | <button on:click={()=>(visible=true)}>
 66 | 	Click me!
 67 | </button>
 68 | 
 69 | <FlatList style={{bgColor: '#424242', handle: {fgColor:'#f2f2f2', height: '2rem', bgColor: '#000000'}}} on:close={handleClose} bind:visible>
 70 |     <span>item 1</span>
 71 |     <span>item 2</span>
 72 |     <span>item 3</span>
 73 |     <span>item 4</span>
 74 |     <span>item 5</span>
 75 | </FlatList>
 76 | ```
 77 | 
 78 | ## Manually list items
 79 | 
 80 | _See this in action at the Svelte REPL!_
 81 | [Link](https://svelte.dev/repl/dbe96ccc7e974dee80ce57a45d17ae2e?version=3)
 82 | 
 83 | ```html
 84 | <script>
 85 |   import FlatList from 'svelte-flatlist';
 86 | 
 87 |   let visible;
 88 |   function handleClose(){
 89 |     visible = false;
 90 | 	}
 91 | </script>
 92 | 
 93 | <button on:click={()=>(visible=true)}>
 94 | 	Click me!
 95 | </button>
 96 | 
 97 | <FlatList bind:visible on:close={handleClose}>
 98 |   <span>item 1</span>
 99 |   <span>item 2</span>
100 |   <span>item 3</span>
101 |   <span>item 4</span>
102 | </FlatList>
103 | ```
104 | 
105 | ## Props
106 | 
107 | | Prop     | Description                                                                 |
108 | | -------- | --------------------------------------------------------------------------- |
109 | | visible  | (REQUIRED) visibility state                                                 |
110 | | style    | (See below for options) Customize the colors to fit your needs.             |
111 | | zIndex   | Same as CSS z-index (defaults to 9999)                                      |
112 | | position | Position of the list on screen (defaults to 'center')                       |
113 | | duration | Duration of the opening & closing transition (defaults to 400)              |
114 | | maxWidth | Maximum width of the list - must include a CSS unit (defaults to 640px)     |
115 | | gap      | Gap in between list items - must include a CSS unit (defaults to 0.8rem)    |
116 | | overflow | Behavior for vertical overflow, same as CSS overflow-y (defaults to 'auto') |
117 | 
118 | ## Style Properties
119 | 
120 | Svelte-Flatlist allows you to modify the styles to fit your needs best using `style` prop.
121 | 
122 | Example:
123 | 
124 | ```html
125 | <Flatlist
126 |   style={{
127 |     bgColor: "#424242",
128 |     handle: {
129 |       height: "3rem",
130 |       bgColor: "#121212",
131 |       fgColor: "#fefefe"
132 |     }
133 |   }}
134 | >
135 | ```
136 | 
137 | ### ```style``` Type
138 | 
139 | The type of the ```style``` prop:
140 | 
141 | ```typescript
142 | type ListStyle = {
143 |   bgColor?: string;
144 |   handle?: HandleStyle;
145 | };
146 | 
147 | type HandleStyle = {
148 |   bgColor?: string;
149 |   fgColor?: string;
150 |   height?: string;
151 | };
152 | ```
153 | 
154 | ### More Info
155 | 
156 | 
157 | | Style Props | Description                                          |
158 | | ----------- | ---------------------------------------------------- |
159 | | bgColor     | Base background color                                |
160 | | handle      | (see below for options) Color options for the handle |
161 | 
162 | <br/>
163 | 
164 | | Handle Properties | Description                |
165 | | ----------------- | -------------------------- |
166 | | bgColor           | Handle background color    |
167 | | fgColor           | Handle foreground color    |
168 | | height            | Handle height (ex: '5rem') |
169 | 
170 | ## Events
171 | 
172 | | Event | Description                     |
173 | | ----- | ------------------------------- |
174 | | close | Event fires when list is closed |
175 | 
176 | ## Events
177 | 
178 | | Event | Description                     |
179 | | ----- | ------------------------------- |
180 | | close | Event fires when list is closed |
181 | 


--------------------------------------------------------------------------------
/mdsvex.config.js:
--------------------------------------------------------------------------------
 1 | import shiki from 'shiki'
 2 | import { escapeSvelte } from "mdsvex";
 3 | 
 4 | const config = {
 5 | 	extensions: ['.svelte.md', '.md', '.svx'],
 6 | 
 7 | 	smartypants: {
 8 | 		dashes: 'oldschool'
 9 | 	},
10 | 	highlight: {
11 | 		highlighter: async (code, lang = "svelte") => {
12 | 			const highlighter = await shiki.getHighlighter({ theme: 'min-dark' });
13 | 			const highlightedCode = escapeSvelte(highlighter.codeToHtml(code, lang));
14 | 			return `{@html \`${highlightedCode}\` }`;
15 | 		},
16 | 	},
17 | 	remarkPlugins: [],
18 | 	rehypePlugins: []
19 | };
20 | 
21 | export default config;
22 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | [build]
 2 |   command = "npm run build"
 3 |   publish = "build"
 4 | 
 5 | [dev]
 6 |  command = "svelte-kit dev"
 7 | 
 8 | [functions]
 9 |   directory = "netlify/functions"
10 |   node_bundler = "esbuild"
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "svelte-flatlist",
 3 | 	"version": "0.2.6",
 4 | 	"repository": {
 5 | 		"url": "https://github.com/snuffyDev/svelte-flatlist"
 6 | 	},
 7 | 	"author": "snuffydev",
 8 | 	"description": "A draggable, customizable, mobile-friendly menu that's easy to use for Svelte.",
 9 | 	"keywords": [
10 | 		"svelte",
11 | 		"svelte3",
12 | 		"svelte-component",
13 | 		"mobile",
14 | 		"drawer",
15 | 		"draggable",
16 | 		"sveltejs",
17 | 		"menu",
18 | 		"flatlist"
19 | 	],
20 | 	"scripts": {
21 | 		"dev": "svelte-kit dev --host",
22 | 		"build": "svelte-kit build",
23 | 		"deploy:docs": "npm run build && netlify deploy --prod",
24 | 		"package": "svelte-kit package",
25 | 		"publish": "npm run package && npm publish ./package",
26 | 		"publish:all": "npm run deploy:docs && npm run package && npm publish ./package",
27 | 		"preview": "svelte-kit preview",
28 | 		"check": "svelte-check --tsconfig ./tsconfig.json",
29 | 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
30 | 		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
31 | 		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
32 | 	},
33 | 	"main": "index.js",
34 | 	"types": "index.d.ts",
35 | 	"svelte": "index.js",
36 | 	"exports": {
37 | 		"./package.json": "./package.json",
38 | 		".": "./index.js"
39 | 	},
40 | 	"devDependencies": {
41 | 		"@sveltejs/adapter-netlify": "next",
42 | 		"@sveltejs/kit": "next",
43 | 		"@typescript-eslint/eslint-plugin": "^4.31.1",
44 | 		"@typescript-eslint/parser": "^4.31.1",
45 | 		"autoprefixer": "^10.4.0",
46 | 		"eslint": "^7.32.0",
47 | 		"eslint-config-prettier": "^8.3.0",
48 | 		"eslint-plugin-svelte3": "^3.2.1",
49 | 		"mdsvex": "^0.9.8",
50 | 		"prettier": "^2.4.1",
51 | 		"prettier-plugin-svelte": "^2.4.0",
52 | 		"shiki": "^0.9.12",
53 | 		"svelte": "^3.42.6",
54 | 		"svelte-check": "^2.2.6",
55 | 		"svelte-preprocess": "^4.9.4",
56 | 		"svelte2tsx": "^0.4.10",
57 | 		"tslib": "^2.3.1",
58 | 		"typescript": "^4.4.3"
59 | 	},
60 | 	"type": "module",
61 | 	"engines": {
62 | 		"node": ">=16"
63 | 	}
64 | }
65 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="/favicon.png" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 7 | 		<meta name="color-scheme" content="dark light" />
 8 | 
 9 | 		%svelte.head%
10 | 	</head>
11 | 	<body>
12 | 		<div id="svelte">%svelte.body%</div>
13 | 	</body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@sveltejs/kit" />
2 | 


--------------------------------------------------------------------------------
/src/lib/FlatList.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { createEventDispatcher } from 'svelte';
  3 | 	import draggable from '$lib/_actions/draggable';
  4 | 	import { fly } from 'svelte/transition';
  5 | 
  6 | 	type HandleStyle = {
  7 | 		bgColor?: string;
  8 | 		fgColor?: string;
  9 | 		height?: string;
 10 | 	};
 11 | 
 12 | 	type ListStyle = {
 13 | 		bgColor?: string;
 14 | 		handle?: HandleStyle;
 15 | 	};
 16 | 
 17 | 	type Position = 'left' | 'center' | 'right';
 18 | 	type Overflow = 'auto' | 'scroll' | 'hidden' | 'visible';
 19 | 
 20 | 	export let style: ListStyle = {
 21 | 		bgColor: '#f2f2f2',
 22 | 		handle: {
 23 | 			bgColor: 'transparent',
 24 | 			fgColor: 'hsl(0deg 0% 67%)',
 25 | 			height: '5rem'
 26 | 		}
 27 | 	};
 28 | 
 29 | 	export let visible = false;
 30 | 	export let zIndex = 9999;
 31 | 	export let position: Position = 'center';
 32 | 	export let duration = 400;
 33 | 	export let maxWidth = '640px';
 34 | 	export let gap = '0.8rem';
 35 | 	export let overflow: Overflow = 'auto';
 36 | 
 37 | 	const hideEvent = () => dispatch('close', visible);
 38 | 
 39 | 	let listHeight;
 40 | 	let sliding;
 41 | 
 42 | 	let posY = 0;
 43 | 	let popperHeight = 0;
 44 | 
 45 | 	function startHandler() {
 46 | 		sliding = true;
 47 | 	}
 48 | 
 49 | 	function release() {
 50 | 		if (sliding) {
 51 | 			if (posY < listHeight * 0.4) {
 52 | 				open();
 53 | 			} else {
 54 | 				close();
 55 | 				posY = 0;
 56 | 			}
 57 | 		}
 58 | 		sliding = false;
 59 | 	}
 60 | 	function trackMovement({ y }) {
 61 | 		if (y <= listHeight && y >= 0) {
 62 | 			posY = y;
 63 | 		} else if (y < listHeight * 0.4 && y >= -50) {
 64 | 			open();
 65 | 		} else {
 66 | 			close();
 67 | 		}
 68 | 	}
 69 | 
 70 | 	function open() {
 71 | 		posY = 0;
 72 | 	}
 73 | 	function close() {
 74 | 		sliding = false;
 75 | 		hideEvent();
 76 | 		posY = 0;
 77 | 	}
 78 | 	const dispatch = createEventDispatcher();
 79 | 
 80 | 	// Get the estimated position of the Top of the list element
 81 | 	$: height = listHeight - popperHeight;
 82 | 	$: visible === true && (posY = 0);
 83 | </script>
 84 | 
 85 | <svelte:window bind:innerHeight={listHeight} />
 86 | {#if visible}
 87 | 	<div
 88 | 		class="backdrop"
 89 | 		on:click={close}
 90 | 		on:scroll|preventDefault|stopPropagation|capture={() => {}}
 91 | 	/>
 92 | 	<div
 93 | 		in:fly={{ duration: duration, y: listHeight }}
 94 | 		out:fly={{ duration: duration * 2, y: listHeight }}
 95 | 		class="svelte-draggable-menu-wrapper"
 96 | 		style="z-index:{zIndex};"
 97 | 		on:scroll|preventDefault|stopPropagation|capture={() => {}}
 98 | 	>
 99 | 		<div
100 | 			class={`svelte-draggable-menu ${position}`}
101 | 			bind:clientHeight={popperHeight}
102 | 			style="--depth: {zIndex +
103 | 				1}; --bg: {style.bgColor}; max-width: {maxWidth}; transform: translateY({posY}px); top:{height}px; {sliding
104 | 				? ''
105 | 				: 'transition: transform 400ms cubic-bezier(0.755, 0.05, 0.855, 0.06)'}; "
106 | 		>
107 | 			<div
108 | 				class="handle"
109 | 				style="--bg: {style.handle.bgColor}; --height: {style.handle.height};"
110 | 				use:draggable
111 | 				on:dragstart={startHandler}
112 | 				on:dragmove={(e) => {
113 | 					trackMovement({ y: e.detail.y });
114 | 				}}
115 | 				on:dragend={release}
116 | 			>
117 | 				<span class="line" style="--fg: {style.handle.fgColor};" />
118 | 			</div>
119 | 			<div class="items" style="--gap: {gap}; --overflow: {overflow};">
120 | 				<slot />
121 | 			</div>
122 | 		</div>
123 | 	</div>
124 | {/if}
125 | 
126 | <style lang="scss">
127 | 	.svelte-draggable-menu-wrapper {
128 | 		// transition: cubic-bezier(0.895, 0.03, 0.685, 0.22) cubic-bezier(0.755, 0.05, 0.855, 0.06)
129 | 		// pointer-events: none;
130 | 		position: fixed;
131 | 		inset: 0;
132 | 		pointer-events: none;
133 | 		background: rgba(255, 255, 255, 0);
134 | 		overscroll-behavior: none;
135 | 	}
136 | 
137 | 	.backdrop {
138 | 		position: fixed;
139 | 		inset: 0;
140 | 		background: rgba(255, 255, 255, 0);
141 | 		min-height: 100%;
142 | 		max-height: 100%;
143 | 		min-width: 100%;
144 | 		max-width: 100%;
145 | 		width: 100%;
146 | 		height: 100%;
147 | 		user-select: none;
148 | 
149 | 		z-index: 2;
150 | 		isolation: isolate;
151 | 	}
152 | 	.svelte-draggable-menu {
153 | 		pointer-events: auto;
154 | 		border-top-left-radius: 1rem;
155 | 		border-top-right-radius: 1rem;
156 | 		box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.623);
157 | 		background-color: var(--bg);
158 | 
159 | 		display: flex;
160 | 		flex-direction: column;
161 | 		height: auto;
162 | 		isolation: isolate;
163 | 		max-height: 80vh;
164 | 		max-width: 640px;
165 | 		min-height: 0;
166 | 		min-width: 0;
167 | 		position: absolute !important;
168 | 		width: 90%;
169 | 		z-index: var(--depth) !important;
170 | 		overscroll-behavior: none;
171 | 
172 | 		-webkit-user-drag: none;
173 | 		&.center {
174 | 			right: 0;
175 | 			left: 0;
176 | 			margin: 0 auto;
177 | 		}
178 | 		&.left {
179 | 			left: 0;
180 | 		}
181 | 		&.right {
182 | 			right: 0;
183 | 		}
184 | 	}
185 | 
186 | 	.items {
187 | 		display: flex;
188 | 		flex-direction: column;
189 | 		gap: var(--gap);
190 | 		padding: 0.8em 0.8em;
191 | 		overscroll-behavior: none;
192 | 		// height: inherit;
193 | 		overflow-y: var(--overflow);
194 | 		// width: calc(100%);
195 | 	}
196 | 
197 | 	.handle {
198 | 		cursor: pointer;
199 | 		width: 100%;
200 | 		height: var(--height, 5rem);
201 | 		position: sticky;
202 | 		background-color: var(--bg);
203 | 		display: flex;
204 | 		justify-content: center;
205 | 		place-items: center;
206 | 		-webkit-user-select: none;
207 | 		-moz-user-select: none;
208 | 
209 | 		user-select: none;
210 | 
211 | 		left: 0;
212 | 		right: 0;
213 | 		border-top-left-radius: 1rem;
214 | 		border-top-right-radius: 1rem;
215 | 	}
216 | 	.line {
217 | 		background: var(--fg);
218 | 		height: 0.5rem;
219 | 		width: 60%;
220 | 		border-radius: 999999rem;
221 | 		pointer-events: none;
222 | 		position: relative;
223 | 		-webkit-user-select: none;
224 | 		-moz-user-select: none;
225 | 
226 | 		user-select: none;
227 | 	}
228 | </style>
229 | 


--------------------------------------------------------------------------------
/src/lib/_actions/clickOutside.ts:
--------------------------------------------------------------------------------
 1 | export default function clickOutside(node) {
 2 | 	function clickhandler(event) {
 3 | 		if (!node.contains(event.target)) {
 4 | 			node.dispatchEvent(new CustomEvent('outside'));
 5 | 		}
 6 | 	}
 7 | 	window.addEventListener('click', clickhandler, { capture: true, passive: true });
 8 | 	return {
 9 | 		destroy: () => {
10 | 			window.removeEventListener('click', clickhandler);
11 | 		}
12 | 	};
13 | }
14 | 


--------------------------------------------------------------------------------
/src/lib/_actions/draggable.ts:
--------------------------------------------------------------------------------
  1 | export default function draggable(node: HTMLElement) {
  2 | 	let y;
  3 | 	let initTop, initHeight;
  4 | 	let frame;
  5 | 	let initOverflow;
  6 | 	function preventScroll(event: UIEvent) {
  7 | 		event.preventDefault();
  8 | 	}
  9 | 	function handleDragStart(event) {
 10 | 		const { top, height } = node.getBoundingClientRect();
 11 | 
 12 | 		initTop = top;
 13 | 		initHeight = height;
 14 | 		if (event.type == 'touchstart') {
 15 | 			/* iOS Safari has issues with the body scrolling, even when not targeted,
 16 | 			below is a hacky solution that (should) work on Android as well as Safari
 17 | 
 18 | 			- event.preventDefault() on scroll
 19 | 			- 'overflow: hidden;' on the HTML element
 20 | 
 21 | 			*/
 22 | 
 23 | 			document.body.addEventListener('scroll', preventScroll, { capture: true });
 24 | 			initOverflow = getComputedStyle(document.querySelector('html')).overflow;
 25 | 
 26 | 			document.querySelector('html').style.overflow = 'hidden';
 27 | 			y = initHeight + event.touches[0].clientY - initTop;
 28 | 		} else {
 29 | 			y = event.clientY - initTop - 8;
 30 | 		}
 31 | 
 32 | 		node.dispatchEvent(
 33 | 			new CustomEvent('dragstart', {
 34 | 				detail: { y }
 35 | 			})
 36 | 		);
 37 | 
 38 | 		window.addEventListener('touchmove', handleDrag, { passive: true });
 39 | 		window.addEventListener('touchend', handleDragEnd, { passive: true });
 40 | 		window.addEventListener('mousemove', handleDrag);
 41 | 		window.addEventListener('mouseup', handleDragEnd, { passive: true });
 42 | 	}
 43 | 
 44 | 	function handleDrag(event) {
 45 | 		if (event.type == 'touchmove') {
 46 | 			/* Probably overkill, but this should hopefully
 47 | 				 help performance on low-end touch devices
 48 | 			*/
 49 | 			y = event.touches[0].clientY - initTop;
 50 | 
 51 | 			frame = () =>
 52 | 				node.dispatchEvent(
 53 | 					new CustomEvent('dragmove', {
 54 | 						detail: {
 55 | 							y
 56 | 						}
 57 | 					})
 58 | 				);
 59 | 			requestAnimationFrame(frame);
 60 | 		} else {
 61 | 			y = event.clientY - initTop - 8;
 62 | 			node.dispatchEvent(
 63 | 				new CustomEvent('dragmove', {
 64 | 					detail: { y }
 65 | 				})
 66 | 			);
 67 | 		}
 68 | 	}
 69 | 
 70 | 	function handleDragEnd(event) {
 71 | 		if (event.type == 'touchend') {
 72 | 			y = event.changedTouches[0].clientY;
 73 | 		} else {
 74 | 			y = event.clientY - initTop - 8;
 75 | 		}
 76 | 		node.dispatchEvent(
 77 | 			new CustomEvent('dragend', {
 78 | 				detail: { y }
 79 | 			})
 80 | 		);
 81 | 		y = 0;
 82 | 		if (event.type == 'touchend') {
 83 | 			/* Removes the scroll block from the body element when finished dragging,
 84 | 				 reverts to the initial overflow value set on the HTML node, along with
 85 | 				 some (probably unneeded) cleanup with the RAF.
 86 | 			*/
 87 | 			document.body.removeEventListener('scroll', preventScroll, { capture: true });
 88 | 			document.querySelector('html').style.overflow = initOverflow;
 89 | 			cancelAnimationFrame(frame);
 90 | 		}
 91 | 		window.removeEventListener('touchmove', handleDrag);
 92 | 		window.removeEventListener('touchend', handleDragEnd);
 93 | 		window.removeEventListener('mousemove', handleDrag);
 94 | 		window.removeEventListener('mouseup', handleDragEnd);
 95 | 	}
 96 | 
 97 | 	node.addEventListener('touchstart', handleDragStart, { passive: true });
 98 | 	node.addEventListener('mousedown', handleDragStart, { passive: true });
 99 | 
100 | 	return {
101 | 		destroy: () => {
102 | 			if (frame) {
103 | 				cancelAnimationFrame(frame);
104 | 			}
105 | 			node.removeEventListener('touchstart', handleDragStart);
106 | 			node.removeEventListener('mousedown', handleDragStart);
107 | 		}
108 | 	};
109 | }
110 | 


--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | export { default as default } from './FlatList.svelte';
2 | 


--------------------------------------------------------------------------------
/src/routes/_Codeblock.svx:
--------------------------------------------------------------------------------
 1 | # <a id="usage" class="wikilink" href="#usage">Usage</a>
 2 | 
 3 | Using Svelte FlatList is very simple. Below are some usage examples.
 4 | 
 5 | ## Each Block
 6 | *See this in action at the Svelte REPL!*
 7 | <a class="link" href="https://svelte.dev/repl/2cfb8d8b8ff2447688874a2e0dacb731?version=3.44.2">Link</a>
 8 | 
 9 | ```html
10 | <script>
11 |   import FlatList from 'svelte-flatlist';
12 |   let visible;
13 |   const items = [0,1,2,3,4,5];
14 | 
15 |   function handleClose(){
16 |     visible = false;
17 |   }
18 | </script>
19 | 
20 | <button on:click={()=>(visible=true)}>
21 | 	Click me!
22 | </button>
23 | 
24 | <FlatList on:close={handleClose} bind:visible>
25 |   {#each items as item}
26 |     <span>{item}</span>
27 |   {/each}
28 | </FlatList>
29 | ```
30 | 
31 | ## Customize the theme
32 | *See this in action at the Svelte REPL!*
33 | <a class="link" href="https://svelte.dev/repl/dbe96ccc7e974dee80ce57a45d17ae2e?version=3.44.2">Link</a>
34 | 
35 | ```html
36 | <script>
37 |   import FlatList from 'svelte-flatlist';
38 |   let visible;
39 |   const items = [0,1,2,3,4,5];
40 | 
41 |   function handleClose(){
42 |     visible = false;
43 |   }
44 | </script>
45 | 
46 | <button on:click={()=>(visible=true)}>
47 | 	Click me!
48 | </button>
49 | 
50 | <FlatList style={{bgColor: '#424242', handle: {fgColor:'#f2f2f2', height: '2rem', bgColor: '#000000'}}} on:close={handleClose} bind:visible>
51 |     <span>item 1</span>
52 |     <span>item 2</span>
53 |     <span>item 3</span>
54 |     <span>item 4</span>
55 |     <span>item 5</span>
56 | </FlatList>
57 | ```
58 | 
59 | ## Manually list items
60 | *See this in action at the Svelte REPL!*
61 | <a class="link" href="https://svelte.dev/repl/dbe96ccc7e974dee80ce57a45d17ae2e?version=3">Link</a>
62 | 
63 | ```html
64 | <script>
65 |   import FlatList from 'svelte-flatlist';
66 | 
67 |   let visible;
68 |   function handleClose(){
69 |     visible = false;
70 | 	}
71 | </script>
72 | 
73 | <button on:click={()=>(visible=true)}>
74 | 	Click me!
75 | </button>
76 | 
77 | <FlatList bind:visible on:close={handleClose}>
78 |   <span>item 1</span>
79 |   <span>item 2</span>
80 |   <span>item 3</span>
81 |   <span>item 4</span>
82 | </FlatList>
83 | ```
84 | 


--------------------------------------------------------------------------------
/src/routes/_GHLink.svelte:
--------------------------------------------------------------------------------
 1 | <a href="https://github.com/snuffyDev/svelte-flatlist" aria-label="View source on GitHub">
 2 | 	<svg
 3 | 		xmlns="http://www.w3.org/2000/svg"
 4 | 		width="24"
 5 | 		height="24"
 6 | 		viewBox="0 0 24 24"
 7 | 		fill="none"
 8 | 		stroke="currentColor"
 9 | 		stroke-width="2"
10 | 		stroke-linecap="round"
11 | 		stroke-linejoin="round"
12 | 	>
13 | 		<path
14 | 			d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
15 | 		/>
16 | 	</svg>
17 | </a>
18 | 
19 | <style lang="scss">
20 | 	a {
21 | 		display: inline-block;
22 | 	}
23 | 	a > svg {
24 | 		color: #333;
25 | 		@media (prefers-color-scheme: dark) {
26 | 			color: #fff;
27 | 		}
28 | 	}
29 | </style>
30 | 


--------------------------------------------------------------------------------
/src/routes/_Install.svelte.md:
--------------------------------------------------------------------------------
1 | # <a id="install">Installation</a>
2 | 
3 | ```bash
4 | npm install -D svelte-flatlist    // npm
5 | pnpm install -D svelte-flatlist   // pnpm
6 | yarn add svelte-flatlist -D       // yarn
7 | ```
8 | 


--------------------------------------------------------------------------------
/src/routes/_Props.svelte.md:
--------------------------------------------------------------------------------
 1 | <h1><a id="props" class="wikilink" href="#props">Props</a></h1>
 2 | 
 3 | | Prop     | Description                                                                 |
 4 | | -------- | --------------------------------------------------------------------------- |
 5 | | visible  | (REQUIRED) visibility state                                                 |
 6 | | style    | (See below for options) Customize the colors to fit your needs.             |
 7 | | zIndex   | Same as CSS z-index (defaults to 9999)                                      |
 8 | | position | Position of the list on screen (defaults to 'center')                       |
 9 | | duration | Duration of the opening & closing transition (defaults to 400)              |
10 | | maxWidth | Maximum width of the list - must include a CSS unit (defaults to 640px)     |
11 | | gap      | Gap in between list items - must include a CSS unit (defaults to 0.8rem)    |
12 | | overflow | Behavior for vertical overflow, same as CSS overflow-y (defaults to 'auto') |
13 | 
14 | ## Style Properties
15 | 
16 | Svelte-Flatlist allows you to modify the styles to fit your needs best using `style` prop.
17 | 
18 | Example:
19 | 
20 | ```html
21 | <Flatlist 
22 |   style={{ 
23 |     bgColor: "#424242", 
24 |     handle: {
25 |       height: "3rem",
26 |       bgColor: "#121212",
27 |       fgColor: "#fefefe"
28 |     }
29 |   }}
30 | >
31 | ```
32 | 
33 | ### ```style``` Type
34 | 
35 | The type of the ```style``` prop:
36 | 
37 | ```typescript
38 | type ListStyle = {
39 |   bgColor?: string;
40 |   handle?: HandleStyle;
41 | };
42 | 
43 | type HandleStyle = {
44 |   bgColor?: string;
45 |   fgColor?: string;
46 |   height?: string;
47 | };
48 | ```
49 | 
50 | ### More Info
51 | 
52 | 
53 | | Style Props | Description                                          |
54 | | ----------- | ---------------------------------------------------- |
55 | | bgColor     | Base background color                                |
56 | | handle      | (see below for options) Color options for the handle |
57 | 
58 | <br/>
59 | 
60 | | Handle Properties | Description                |
61 | | ----------------- | -------------------------- |
62 | | bgColor           | Handle background color    |
63 | | fgColor           | Handle foreground color    |
64 | | height            | Handle height (ex: '5rem') |
65 | 
66 | <h1><a id="events" class="wikilink"  href="#events">Events</a></h1>
67 | 
68 | | Event | Description                     |
69 | | ----- | ------------------------------- |
70 | | close | Event fires when list is closed |
71 | 


--------------------------------------------------------------------------------
/src/routes/_TableOfContents.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import clickOutside from '$lib/_actions/clickOutside';
 3 | 	import { fly } from 'svelte/transition';
 4 | 
 5 | 	let width;
 6 | 	let isHidden = true;
 7 | 	$: hidden = isHidden;
 8 | </script>
 9 | 
10 | <svelte:window bind:innerWidth={width} />
11 | {#if !hidden}
12 | 	<aside
13 | 		use:clickOutside
14 | 		in:fly={{ x: -50 }}
15 | 		out:fly={{ x: -50 }}
16 | 		on:outside={() => (isHidden = true)}
17 | 	>
18 | 		<ul>
19 | 			<li><a href="#usage">Usage</a></li>
20 | 			<li><a href="#props">Props</a></li>
21 | 			<li><a href="#events">Events</a></li>
22 | 		</ul>
23 | 	</aside>
24 | {:else}
25 | 	<button
26 | 		class="top-right"
27 | 		on:click={() => {
28 | 			isHidden = !isHidden;
29 | 		}}>&equiv;</button
30 | 	>
31 | {/if}
32 | 
33 | <style lang="scss">
34 | 	.top-right {
35 | 		position: fixed;
36 | 		z-index: 5;
37 | 		right: 0;
38 | 		top: 0;
39 | 		background: rgba(88, 88, 88, 0.473);
40 | 		width: 3rem;
41 | 		height: 3rem;
42 | 		border-radius: 9999rem;
43 | 		font-size: 2rem;
44 | 		display: inline-flex;
45 | 		place-items: center;
46 | 		justify-content: center;
47 | 		border: none;
48 | 		@media (prefers-color-scheme: light) {
49 | 			color: rgb(46, 46, 46);
50 | 		}
51 | 	}
52 | 	aside {
53 | 		position: fixed;
54 | 		left: 0;
55 | 		top: 0;
56 | 		width: 12rem;
57 | 		height: 100%;
58 | 		z-index: 1;
59 | 		background: #302b36;
60 | 	}
61 | 	ul {
62 | 		padding: 0 0 0 0.8rem;
63 | 		// text-align: center;
64 | 		list-style: none;
65 | 	}
66 | 	li {
67 | 		margin-bottom: 0.8rem;
68 | 		font-size: medium;
69 | 	}
70 | 	a {
71 | 		font-size: large;
72 | 		color: #dadada;
73 | 		text-decoration: none;
74 | 		&:hover {
75 | 			color: #f8f8f8;
76 | 			text-decoration: underline solid 0.0625rem;
77 | 			text-underline-offset: 0.075rem;
78 | 		}
79 | 	}
80 | </style>
81 | 


--------------------------------------------------------------------------------
/src/routes/__layout.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import TableOfContents from './_TableOfContents.svelte';
 3 | </script>
 4 | 
 5 | <svelte:head>
 6 | 	<title>Svelte-Flatlist docs</title>
 7 | </svelte:head>
 8 | <TableOfContents />
 9 | <slot />
10 | 
11 | <style lang="scss" global>
12 | 	html,
13 | 	body {
14 | 		box-sizing: border-box;
15 | 		// height: 100%;
16 | 		position: relative;
17 | 		min-height: 100vh;
18 | 		// background-color: #97a1ac;
19 | 		font-size: 1rem;
20 | 		-webkit-text-size-adjust: 100%;
21 | 		-ms-overflow-style: -ms-autohiding-scrollbar;
22 | 		box-sizing: border-box;
23 | 		margin: 0 auto;
24 | 	}
25 | 
26 | 	html {
27 | 		scroll-behavior: smooth;
28 | 	}
29 | 
30 | 	:root {
31 | 		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
32 | 			Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
33 | 
34 | 		-webkit-tap-highlight-color: transparent;
35 | 		-webkit-font-smoothing: antialiased;
36 | 	}
37 | 
38 | 	a.link {
39 | 		color: cornflowerblue;
40 | 	}
41 | 	a.wikilink {
42 | 		color: #1a1a1a;
43 | 		text-decoration: none;
44 | 		&:visited {
45 | 			color: inherit;
46 | 		}
47 | 		&:hover {
48 | 			text-decoration: underline 0.0625rem solid;
49 | 		}
50 | 		@media (prefers-color-scheme: dark) {
51 | 			color: #f1f1f1;
52 | 		}
53 | 	}
54 | 	table {
55 | 		border-width: 1px;
56 | 		border-style: solid;
57 | 		// border-color: hsl(0deg 0% 67%);
58 | 		border-collapse: separate;
59 | 		border-spacing: 0;
60 | 		border-color: rgba(51, 51, 51, 0.521);
61 | 		font-size: 1rem;
62 | 		border-radius: 0.5rem;
63 | 	}
64 | 	th {
65 | 		background-color: rgba(141, 141, 141, 0.171);
66 | 	}
67 | 	td,
68 | 	th {
69 | 		border: 1px solid rgba(102, 102, 102, 0.11);
70 | 		padding: 0.5rem;
71 | 	}
72 | 	tr {
73 | 		// padding: 1rem 0;
74 | 	}
75 | 	tr:nth-child(even) {
76 | 		background-color: rgba(145, 145, 145, 0.185);
77 | 	}
78 | 	pre {
79 | 		padding: 0.8rem;
80 | 		border-radius: 0.5rem;
81 | 
82 | 		overflow: auto;
83 | 	}
84 | 	*,
85 | 	*::before,
86 | 	*::after {
87 | 		box-sizing: inherit;
88 | 	}
89 | </style>
90 | 


--------------------------------------------------------------------------------
/src/routes/index.svelte:
--------------------------------------------------------------------------------
  1 | <script context="module" lang="ts">
  2 | 	export const ssr = false;
  3 | </script>
  4 | 
  5 | <script lang="ts">
  6 | 	import FlatList from '$lib/FlatList.svelte';
  7 | 	import Codeblock from './_Codeblock.svx';
  8 | 	import GHLink from './_GHLink.svelte';
  9 | 	import Props from './_Props.svelte.md';
 10 | 	import Installation from './_Install.svelte.md';
 11 | 	let visible = false;
 12 | 	let items = new Array(32).fill(false).map((item, i) => i);
 13 | 	let style = {
 14 | 		bgColor: '#f2f2f2',
 15 | 		handle: {
 16 | 			bgColor: 'transparent',
 17 | 			fgColor: 'hsl(0deg 0% 67%)',
 18 | 			height: '5rem'
 19 | 		}
 20 | 	};
 21 | 	let position;
 22 | 	let value;
 23 | 	let height;
 24 | 	$: console.log(value);
 25 | </script>
 26 | 
 27 | <main>
 28 | 	<h1>svelte-flatlist</h1>
 29 | 	<p>A mobile-friendly, simple, and customizable draggable menu.</p>
 30 | 	<GHLink />
 31 | 
 32 | 	<br />
 33 | 	<Installation />
 34 | 
 35 | 	<h2>Demo</h2>
 36 | 	<div class="wrap">
 37 | 		<div class="style-demo">
 38 | 			<label>Base Background Color: <input type="color" bind:value={style.bgColor} /></label>
 39 | 			<label
 40 | 				>Handle Background Color: <input type="color" bind:value={style.handle.bgColor} /></label
 41 | 			>
 42 | 			<label
 43 | 				>Handle Foreground Color: <input type="color" bind:value={style.handle.fgColor} /></label
 44 | 			>
 45 | 			<label>
 46 | 				Handle Height (req. CSS size unit): <form on:submit|preventDefault={() => {}}>
 47 | 					<input
 48 | 						type="text"
 49 | 						pattern="[-+]?[0-9]*[.,]?[0-9]+?(rem|px|em|vh|vw|vmax|vmin|%|pt|ch)"
 50 | 						placeholder="5rem"
 51 | 						bind:value={style.handle.height}
 52 | 					/>
 53 | 				</form>
 54 | 			</label>
 55 | 		</div>
 56 | 		<FlatList
 57 | 			overflow="auto"
 58 | 			zIndex={2}
 59 | 			bind:style
 60 | 			{position}
 61 | 			on:close={({ detail }) => {
 62 | 				// visible = false;
 63 | 				visible = false;
 64 | 			}}
 65 | 			bind:visible
 66 | 		>
 67 | 			{#each items as item, i}
 68 | 				<span>{i}</span>
 69 | 				<!-- <hr /> -->
 70 | 			{/each}
 71 | 		</FlatList>
 72 | 		<div class="button-row">
 73 | 			<button
 74 | 				on:click={() => {
 75 | 					position = 'left';
 76 | 					visible = !visible;
 77 | 				}}>Show left menu</button
 78 | 			>
 79 | 			<button
 80 | 				on:click={() => {
 81 | 					position = 'center';
 82 | 					visible = !visible;
 83 | 				}}>Show center menu</button
 84 | 			>
 85 | 			<button
 86 | 				on:click={() => {
 87 | 					position = 'right';
 88 | 					visible = !visible;
 89 | 				}}>Show right menu</button
 90 | 			>
 91 | 		</div>
 92 | 	</div>
 93 | 	<br />
 94 | 	<br />
 95 | 	<Codeblock />
 96 | 	<Props />
 97 | </main>
 98 | 
 99 | <style lang="scss">
100 | 	input[type='text'] {
101 | 		padding: 0.5rem 0.8rem;
102 | 		font-size: 1.1rem;
103 | 	}
104 | 	label {
105 | 		line-height: 1.5;
106 | 		margin-bottom: 0.25em;
107 | 	}
108 | 	.style-demo {
109 | 		display: flex;
110 | 		flex-direction: column;
111 | 		flex-wrap: wrap;
112 | 		background: rgba(88, 88, 88, 0.199);
113 | 		padding: 0.8rem;
114 | 		border-radius: 1rem;
115 | 		gap: 0.8rem;
116 | 		border: 1px #666 solid;
117 | 		margin-bottom: 1.2rem;
118 | 	}
119 | 	.button-row {
120 | 		display: inline-flex;
121 | 		justify-content: space-between;
122 | 		width: 100%;
123 | 	}
124 | 	main {
125 | 		margin: 0 auto;
126 | 		max-width: 720px;
127 | 		padding: 0 1rem 1rem 1rem;
128 | 	}
129 | 	.wrap {
130 | 		position: relative;
131 | 	}
132 | 	span {
133 | 		border-bottom: #aaa solid 1px;
134 | 		padding: 0.8rem 1rem;
135 | 		display: block;
136 | 		background-color: #8d8d8d73;
137 | 	}
138 | 	button {
139 | 		padding: 0.8rem 1.5rem;
140 | 		font-family: inherit;
141 | 		font-size: 1rem;
142 | 		font-weight: 600;
143 | 	}
144 | 	.items {
145 | 		display: flex;
146 | 		flex-direction: column;
147 | 		gap: 0.25rem;
148 | 		overflow-y: scroll;
149 | 	}
150 | 	ul {
151 | 		display: flex;
152 | 		flex-direction: column;
153 | 	}
154 | 	li {
155 | 		padding: 1rem;
156 | 		background: #46464673;
157 | 	}
158 | 
159 | 	h1 {
160 | 		border-bottom: 1px #ddd solid;
161 | 		padding-bottom: 1rem;
162 | 	}
163 | 	p {
164 | 		// background: #f2f2f2;
165 | 		max-width: fit-content;
166 | 		// padding: 1rem;
167 | 		// margin-left: 0.9rem;
168 | 	}
169 | </style>
170 | 


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/snuffyDev/svelte-flatlist/8ed67f7ec0d5561efa85e898fc0399700596dec8/static/favicon.png


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import { mdsvex } from 'mdsvex';
 2 | import mdsvexConfig from './mdsvex.config.js';
 3 | import preprocess from 'svelte-preprocess';
 4 | import adapter from '@sveltejs/adapter-netlify'
 5 | /** @type {import('@sveltejs/kit').Config} */
 6 | const config = {
 7 | 	extensions: ['.svelte', ...mdsvexConfig.extensions],
 8 | 
 9 | 	// Consult https://github.com/sveltejs/svelte-preprocess
10 | 	// for more information about preprocessors
11 | 	preprocess: [preprocess(), mdsvex(mdsvexConfig)],
12 | 
13 | 	kit: {
14 | 		// hydrate the <div id="svelte"> element in src/app.html
15 | 		adapter: adapter(),
16 | 		target: '#svelte',
17 | 	}
18 | };
19 | 
20 | export default config;
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"moduleResolution": "node",
 4 | 		"module": "es2020",
 5 | 		"lib": ["es2020", "DOM"],
 6 | 		"target": "es2020",
 7 | 		/**
 8 | 			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
 9 | 			to enforce using \`import type\` instead of \`import\` for Types.
10 | 			*/
11 | 		"importsNotUsedAsValues": "error",
12 | 		"isolatedModules": true,
13 | 		"resolveJsonModule": true,
14 | 		/**
15 | 			To have warnings/errors of the Svelte compiler at the correct position,
16 | 			enable source maps by default.
17 | 			*/
18 | 		"sourceMap": true,
19 | 		"esModuleInterop": true,
20 | 		"skipLibCheck": true,
21 | 		"forceConsistentCasingInFileNames": true,
22 | 		"baseUrl": ".",
23 | 		"allowJs": true,
24 | 		"checkJs": true,
25 | 		"paths": {
26 | 			"$lib": ["src/lib"],
27 | 			"$lib/*": ["src/lib/*"]
28 | 		}
29 | 	},
30 | 	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
31 | }
32 | 


--------------------------------------------------------------------------------