├── .gitignore
├── BottomSheet.svelte
├── CHANGELOG.md
├── README.md
├── SideSheet.svelte
├── index.js
├── package.json
└── utils.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | example


--------------------------------------------------------------------------------
/BottomSheet.svelte:
--------------------------------------------------------------------------------
  1 | <div bind:this={backdrop} class="backdrop" class:smooth={!startY} class:open on:click={() => open = false}/>
  2 | 
  3 | <div bind:this={dialog} class="root shadow" class:fullscreen class:smooth={!startY}
  4 |     on:touchstart={touchStart}
  5 |     on:touchmove={touchMove}
  6 |     on:touchend={touchEnd}
  7 | >
  8 |     <slot/>
  9 | </div>
 10 | 
 11 | <script>
 12 |     import {touch, deltaX, deltaY} from "./utils";
 13 | 
 14 |     let dialog;
 15 |     let backdrop;
 16 | 
 17 |     let startX;
 18 |     let startY;
 19 |     let direction;
 20 | 
 21 |     export let fullscreen = false;
 22 |     export let open = false;
 23 |     export let threshold = 0.3;
 24 |     export let backdropOpacity = 0.5;
 25 |     export let speed = 0.2;
 26 | 
 27 |     const touchStart = e => {
 28 |         console.log(e);
 29 |         startX = touch(e).clientX;
 30 |         startY = touch(e).clientY;
 31 |     };
 32 | 
 33 |     const touchMove = e => {
 34 |         if(!direction) {
 35 |             direction = Math.abs(deltaY(e, startY)) > Math.abs(deltaX(e, startX)) ? "vertical" : "horizontal";
 36 |         }
 37 | 
 38 |         if(deltaY(e, startY) < 0 && direction === "vertical" && dialog.scrollTop == 0) {
 39 |             dialog.style.setProperty('--b', deltaY(e, startY) + 'px');
 40 |             backdrop.style.setProperty('--o', (1 + deltaY(e, startY) / dialog.clientHeight) * backdropOpacity);
 41 |         }
 42 |     };
 43 | 
 44 |     const touchEnd = e => {
 45 |         if(direction === "vertical") {
 46 |             open = -deltaY(e, startY) / dialog.clientHeight < threshold;
 47 |         }
 48 |         startY = null;
 49 |         direction = null;
 50 |     };
 51 | 
 52 |     $: if(dialog) {
 53 |         dialog.onscroll = e => dialog.scrollTop == 0 && console.log(window.event);
 54 |     }
 55 | 
 56 |     $: if(dialog && backdrop) {
 57 |         dialog.style.setProperty('--s', speed + 's');
 58 |         backdrop.style.setProperty('--s', speed + 's');
 59 |     }
 60 | 
 61 |     $: if(dialog && backdrop && !direction) {
 62 |         dialog.style.setProperty('--b', open
 63 |             ? "0px"
 64 |             : -dialog.clientHeight + "px"
 65 |         );
 66 |         backdrop.style.setProperty('--o', open
 67 |             ? backdropOpacity
 68 |             : 0
 69 |         );
 70 |     }
 71 | </script>
 72 | 
 73 | <style>
 74 |     .root {
 75 |         position: fixed;
 76 |         background-color: #ffffff;
 77 |         width: 100vw;
 78 |         overflow: auto;
 79 |         left: 0px;
 80 |         bottom: var(--b, -100%);
 81 |         z-index: 7;
 82 |     }
 83 | 
 84 |     .root.fullscreen {
 85 |         height: 100%;
 86 |     }
 87 | 
 88 |     .root.smooth {
 89 |         transition: bottom calc(var(--f, 1) * var(--s, 0s)) ease-in-out;
 90 |     }
 91 | 
 92 |     .backdrop {
 93 |         pointer-events: none;
 94 |         position: fixed;
 95 |         left: 0px;
 96 |         top: 0px;
 97 |         width: 100vw;
 98 |         height: 100%;
 99 |         background-color: #212121;
100 |         opacity: var(--o, 0);
101 |         z-index: 6;
102 |     }
103 | 
104 |     .backdrop.smooth {
105 |         transition: opacity calc(var(--f, 1) * var(--s, 0s)) ease-in-out;
106 |     }
107 | 
108 |     .backdrop.open {
109 |         pointer-events: all;
110 |     }
111 | 
112 |     .shadow {
113 |         box-shadow: 0px -2px 8px #21212144, 0px 0px 2px #21212144;
114 |     }
115 | </style>


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | All notable changes to this project will be documented in this file.
 3 | 
 4 | ## [Unreleased]
 5 | 
 6 | ## [0.0.4] - 2020-02-20
 7 | ### Added
 8 | - BottomSheet can now scroll horizontally if an element overflows
 9 | - SideSheet can now scroll vertically if an element overflows
10 | 
11 | ## [0.0.3] - 2020-02-07
12 | ### Initial release


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Installation
 2 | 
 3 | ```
 4 | npm i -D svelte-swipeable-sheets
 5 | ```
 6 | 
 7 | ## [Changelog](https://github.com/kroniapp/svelte-swipeable-sheets/blob/master/CHANGELOG.md)
 8 | 
 9 | # Example
10 | 
11 | ## Bottom sheet
12 | ```html
13 | <button on:click={() => open = true}>
14 |   Bottom sheet {open ? 'opened' : 'closed'}
15 | </button>
16 | 
17 | <BottomSheet bind:open>
18 |   Content
19 | </BottomSheet>
20 | 
21 | <script>
22 |   import BottomSheet from "svelte-swipeable-sheets/BottomSheet";
23 | 
24 |   let open = false;
25 | </script>
26 | ```
27 | 
28 | ## Side sheet
29 | ```html
30 | <button on:click={() => open = true}>
31 |   Side sheet {open ? 'opened' : 'closed'}
32 | </button>
33 | 
34 | <SideSheet bind:open>
35 |   Content
36 | </SideSheet>
37 | 
38 | <script>
39 |   import SideSheet from "svelte-swipeable-sheets/SideSheet";
40 | 
41 |   let open = false;
42 | </script>
43 | ```


--------------------------------------------------------------------------------
/SideSheet.svelte:
--------------------------------------------------------------------------------
  1 | <div bind:this={backdrop} class={"backdrop " + $$props.class} class:smooth={!startX} class:open on:click={() => open = false}/>
  2 | 
  3 | <div bind:this={dialog} class="root shadow" class:smooth={!startX}
  4 |     on:touchstart={touchStart}
  5 |     on:touchmove={touchMove}
  6 |     on:touchend={touchEnd}
  7 | >
  8 |     <slot/>
  9 | </div>
 10 | 
 11 | <script>
 12 |     import {touch, deltaX, deltaY} from "./utils";
 13 | 
 14 |     let dialog;
 15 |     let backdrop;
 16 |     
 17 |     let startX;
 18 |     let startY;
 19 |     let direction;
 20 | 
 21 |     export let open = false;
 22 |     export let threshold = 0.3;
 23 |     export let backdropOpacity = 0.5;
 24 |     export let speed = 0.2;
 25 | 
 26 |     const touchStart = e => {
 27 |         startX = touch(e).clientX;
 28 |         startY = touch(e).clientY;
 29 |     }
 30 | 
 31 |     const touchMove = e => {
 32 |         if(!direction) {
 33 |             direction = Math.abs(deltaY(e, startY)) > Math.abs(deltaX(e, startX)) ? "vertical" : "horizontal";
 34 |         }
 35 | 
 36 |         if(deltaX(e, startX) < 0 && direction === "horizontal") {
 37 |             dialog.style.setProperty('--b', deltaX(e, startX) + 'px');
 38 |             backdrop.style.setProperty('--o', (1 + deltaX(e, startX) / dialog.clientWidth) * backdropOpacity);
 39 |         }
 40 |     }
 41 | 
 42 |     const touchEnd = e => {
 43 |         if(direction === "horizontal") {
 44 |             open = -deltaX(e, startX) / dialog.clientWidth < threshold;
 45 |         }
 46 |         startX = null;
 47 |         direction = null;
 48 |     };
 49 | 
 50 |     $: if(dialog && backdrop) {
 51 |         dialog.style.setProperty('--s', speed + 's');
 52 |         backdrop.style.setProperty('--s', speed + 's');
 53 |     }
 54 | 
 55 |     $: if(dialog && backdrop && !direction) {
 56 |         dialog.style.setProperty('--b', open ? "0px" : -dialog.clientWidth + "px");
 57 |         backdrop.style.setProperty('--o', open ? backdropOpacity : 0);
 58 |     }
 59 | </script>
 60 | 
 61 | <style>
 62 |     .root {
 63 |         position: fixed;
 64 |         background-color: #ffffff;
 65 |         width: calc(100vw - 56px);
 66 |         height: 100vh;
 67 |         overflow-y: auto;
 68 |         top: 0px;
 69 |         right: var(--b, -100%);
 70 |         z-index: 7;
 71 |     }
 72 | 
 73 |     .root.smooth {
 74 |         transition: right calc(var(--f, 1) * var(--s, 0s)) ease-in-out;
 75 |     }
 76 | 
 77 |     .backdrop {
 78 |         pointer-events: none;
 79 |         position: fixed;
 80 |         left: 0px;
 81 |         top: 0px;
 82 |         width: 100vw;
 83 |         height: 100vh;
 84 |         background-color: #212121;
 85 |         opacity: var(--o, 0);
 86 |         z-index: 6;
 87 |     }
 88 | 
 89 |     .backdrop.smooth {
 90 |         transition: opacity calc(var(--f, 1) * var(--s, 0s)) ease-in-out;
 91 |     }
 92 | 
 93 |     .backdrop.open {
 94 |         pointer-events: all;
 95 |     }
 96 | 
 97 |     .shadow {
 98 |         box-shadow: -2px 0px 8px #21212144, 0px 0px 2px #21212144;
 99 |     }
100 | </style>


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import BottomSheet from "./BottomSheet";
2 | import SideSheet from "./SideSheet";
3 | 
4 | export {
5 |   BottomSheet,
6 |   SideSheet
7 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-swipeable-sheets",
 3 |   "description": "Svelte components for Material Design swipeable sheets",
 4 |   "version": "0.0.4",
 5 |   "main": "index.js",
 6 |   "author": "Kronia",
 7 |   "license": "MIT",
 8 |   "homepage": "https://github.com/kroniapp/svelte-swipeable-sheets",
 9 |   "peerDependencies": {
10 |     "svelte": "3.x"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/utils.js:
--------------------------------------------------------------------------------
1 | export const touch = e => e.changedTouches ? e.changedTouches[0] : e;
2 | 
3 | export const deltaX = (e, startX) => startX - touch(e).clientX;
4 | 
5 | export const deltaY = (e, startY) => startY - touch(e).clientY;


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