not-overlay 0.0.7 → 0.0.8

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.
Files changed (2) hide show
  1. package/package.json +2 -5
  2. package/src/standalone/overlay.svelte +80 -84
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "not-overlay",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "description": "not-* family overlay plugin",
5
5
  "main": "index.js",
6
6
  "repository": "git@github.com:interrupter/not-overlay.git",
@@ -27,9 +27,6 @@
27
27
  "@babel/plugin-transform-runtime": "^7.9.6",
28
28
  "@babel/preset-env": "^7.9.6",
29
29
  "@cypress/code-coverage": "^3.7.0",
30
- "@material/theme": "^3.1.0",
31
- "@material/typography": "^3.1.0",
32
- "@smui/icon-button": "^1.0.0-beta.21",
33
30
  "babel-plugin-istanbul": "^6.0.0",
34
31
  "babel-preset-env": "^1.7.0",
35
32
  "chai": "^4.2.0",
@@ -97,4 +94,4 @@
97
94
  ]
98
95
  }
99
96
  }
100
- }
97
+ }
package/src/standalone/overlay.svelte CHANGED
@@ -1,90 +1,86 @@
1
- {#if show}
2
- <div class="not-overlay" transition:fade on:click={overlayClick}>
3
- {#if closeButton}
4
- <IconButton on:click={closeButtonClick} class="close-btn">
5
- <Icon class="material-icons">close</Icon>
6
- </IconButton>
7
- {/if}
8
- <slot></slot>
9
- </div>
10
- {/if}
11
-
12
1
  <script>
13
- let overflowSave = '';
14
-
15
- import {
16
- fade
17
- } from 'svelte/transition';
18
-
19
- import {
20
- createEventDispatcher,
21
- onMount,
22
- onDestroy
23
- } from 'svelte';
24
-
25
- import IconButton, {
26
- Icon
27
- } from '@smui/icon-button';
28
-
29
- const dispatch = createEventDispatcher();
30
-
31
- export let closeButton = false;
32
- export let show = true;
33
- export let closeOnClick = true;
34
-
35
- $: if(show){
36
- document.body.style.overflow = 'hidden';
37
- }else{
38
- document.body.style.overflow = overflowSave;
39
- }
40
-
41
- function overlayClick(e){
42
- if(closeOnClick){
43
- closeOverlay(e);
44
- }
45
- }
46
-
47
- function closeButtonClick(){
48
- rejectOverlay();
49
- }
50
-
51
- function closeOverlay(e) {
52
- if(e.originalTarget && e.originalTarget.classList.contains('not-overlay')){
53
- rejectOverlay();
54
- }
55
- }
56
-
57
- function rejectOverlay(data = {}) {
58
- dispatch('reject', data);
59
- }
60
-
61
- function resolveOverlay(data = {}) {
62
- dispatch('resolve', data);
63
- }
64
-
65
- onMount(() => {
66
- overflowSave = document.body.style.overflow;
67
- });
68
-
69
- onDestroy(() => {
70
- document.body.style.overflow = overflowSave;
71
- });
72
-
2
+ let overflowSave = "";
3
+
4
+ import { fade } from "svelte/transition";
5
+
6
+ import { onMount, onDestroy } from "svelte";
7
+
8
+ import IconButton, { Icon } from "@smui/icon-button";
9
+
10
+ let {
11
+ closeButton = false,
12
+ show = true,
13
+ closeOnClick = true,
14
+ onchange = () => {},
15
+ onreject = () => {},
16
+ onresolve = () => {},
17
+ } = $props();
18
+
19
+ $: if (show) {
20
+ document.body.style.overflow = "hidden";
21
+ } else {
22
+ document.body.style.overflow = overflowSave;
23
+ }
24
+
25
+ function overlayClick(e) {
26
+ if (closeOnClick) {
27
+ closeOverlay(e);
28
+ }
29
+ }
30
+
31
+ function closeButtonClick() {
32
+ rejectOverlay();
33
+ }
34
+
35
+ function closeOverlay(e) {
36
+ if (
37
+ e.originalTarget &&
38
+ e.originalTarget.classList.contains("not-overlay")
39
+ ) {
40
+ rejectOverlay();
41
+ }
42
+ }
43
+
44
+ function rejectOverlay(data = {}) {
45
+ onreject(data);
46
+ }
47
+
48
+ function resolveOverlay(data = {}) {
49
+ onresolve(data);
50
+ }
51
+
52
+ onMount(() => {
53
+ overflowSave = document.body.style.overflow;
54
+ });
55
+
56
+ onDestroy(() => {
57
+ document.body.style.overflow = overflowSave;
58
+ });
73
59
  </script>
74
60
 
61
+ {#if show}
62
+ <div class="not-overlay" transition:fade onclick={overlayClick}>
63
+ {#if closeButton}
64
+ <IconButton onclick={closeButtonClick} class="close-btn">
65
+ <Icon class="material-icons">close</Icon>
66
+ </IconButton>
67
+ {/if}
68
+ <slot></slot>
69
+ </div>
70
+ {/if}
75
71
 
76
72
  <style>
77
- .not-overlay {
78
- position: fixed;
79
- top: 0px;
80
- left: 0px;
81
- width: 100vw;
82
- height: 100vh;
83
- margin: 0px;
84
- background-color: #CCC;
85
- z-index: 2000;
86
- display: block;
87
- opacity: 1;
88
- overflow: hidden;
89
- }
73
+ .not-overlay {
74
+ position: fixed;
75
+ top: 0px;
76
+ left: 0px;
77
+ width: 100vw;
78
+ height: 100vh;
79
+ margin: 0px;
80
+ background-color: #ccc;
81
+ z-index: 2000;
82
+ display: block;
83
+ opacity: 1;
84
+ overflow: hidden;
85
+ }
90
86
  </style>