overlastic 0.9.1 → 0.10.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 6d66f3738b0bd9d8474526231f6473f18a64d564219f0cf8434b0e69dd7c2d62
4
- data.tar.gz: 408a1146a746df3bd9a1c9776b212df6d79d3d366a90fa1f136e7dc35f811b4c
3
+ metadata.gz: f6f8d00df40f65f5b265e8ffcd4523a31241ad3898c7d03aaa8b1b9a4e98ab95
4
+ data.tar.gz: 4a011eb48b263364cf6bb16db40cdc9dfb6cbe1b73ed10021a3b50bf5b366a2f
5
5
  SHA512:
6
- metadata.gz: 823f2352f8706a17cdd3852a94610ca463f5a9984ba988e0423f32cbfbc964f4d1db7352e730df34eb2c05901c0f073546e1a4a1fe12e82e438f3f2a311f9ea7
7
- data.tar.gz: 5cfd7af089adddfd47c618d23932030ffadb706da1a0811de87a62003d94a92d9e5e6a4600a49edfbcba19012e4dde82764169e177019aa5088303417defd926
6
+ metadata.gz: 377d9e5301a694aa3fbc205bc4dcf8580b56a149a0f11a9b4a439ce789cd4c57db9972b0f78262d54e45c4def45bee49bfc0272c99d51f73eee5c345a17c88c2
7
+ data.tar.gz: 47d5bfde806ddf5dd56da6c152847745fe9cbbae7d7ac331c00bfb3df10ecda83514eb1a8257bc24caa7328e52f021cfebdea6a5b13dbc421c67ff8c370f5525
data/README.md CHANGED
@@ -43,9 +43,8 @@ Load any page inside an overlay (dialog modal, slide-out pane, or whatever else
43
43
 
44
44
  This gem requires a modern Rails application running [turbo-rails](https://github.com/hotwired/turbo-rails). It supports both import map and node setups.
45
45
 
46
- 1. Add the `overlastic` gem to your Gemfile: `gem "overlastic"`
47
- 2. Run `./bin/bundle install`
48
- 3. Run `./bin/rails overlastic:install`
46
+ 1. `bundle add overlastic`
47
+ 2. `rails overlastic:install`
49
48
 
50
49
 
51
50
  ## Usage
@@ -184,7 +183,7 @@ redirect_to article_url(@article), overlay: :previous, status: :see_other
184
183
  <summary>Appending Turbo Streams to every response</summary><br>
185
184
 
186
185
  Overlastic can be configured to append a Turbo Stream to every response that contains an overlay.
187
- This can be very useful for rendering flash messages:
186
+ This can be very useful for automatically rendering new flash messages whenever they're available:
188
187
 
189
188
  ```rb
190
189
  Overlastic.configure do |config|
@@ -194,9 +193,15 @@ redirect_to article_url(@article), overlay: :previous, status: :see_other
194
193
  end
195
194
  ```
196
195
 
197
- Then you'd only need to specify a flash message when closing an overlay, or redirecting to a different path:
196
+ Then you'd only need to specify a flash message inside your action, when closing an overlay, or when redirecting to a different path:
198
197
 
199
198
  ```rb
199
+ def show
200
+ flash.now[:notice] = "You've been noticed!"
201
+ end
202
+
203
+ # or
204
+
200
205
  close_overlay notice: "Deleted!"
201
206
 
202
207
  # or
@@ -240,26 +245,32 @@ end
240
245
  ```
241
246
 
242
247
 
243
- ## Customization
248
+ ## UI customization
244
249
 
245
- Overlastic comes with default views for both the dialog and pane overlays. It also provides a generator to allow for easy customization.
250
+ Overlastic comes with default views for both the dialog and pane overlays. They are intended to provide an easy way to try the gem. For real-world usage you're expected to implement your own UI elements, or use something like [Bootstrap](https://getbootstrap.com) or [TailwindCSS Stimulus Components](https://github.com/excid3/tailwindcss-stimulus-components).
246
251
 
247
252
  <details>
248
253
  <summary>Default overlays</summary><br>
249
254
 
255
+ **Dialog**
256
+
250
257
  <img src="assets/dialog.png?sanitize=true" width="600" alt="Dialog">
251
258
 
252
259
  <br>
253
260
 
261
+ **Pane**
262
+
254
263
  <img src="assets/pane.png?sanitize=true" width="600" alt="Dialog">
255
264
  </details>
256
265
 
257
266
  <details>
258
267
  <summary>Generate customizable views</summary><br>
259
268
 
269
+ Overlastic provides a generator to build your own views using the default overlays as a base. It's not advisable, though. You're better off using a UI library.
270
+
260
271
  ```sh
261
- # Available options: inline, tailwind
262
- ./bin/rails generate overlastic:views --css tailwind
272
+ # Available options: inline, tailwind
273
+ ./bin/rails generate overlastic:views --css tailwind
263
274
  ```
264
275
  </details>
265
276
 
@@ -270,14 +281,14 @@ Overlastic comes with default views for both the dialog and pane overlays. It al
270
281
  <summary>Running the demo application</summary><br>
271
282
 
272
283
  - First you need to install dependencies with `bundle && yarn && yarn build`
273
- - Then you need to setup the DB with `./bin/rails db:migrate`
274
- - Lastly you can run the demo app with `./bin/rails server --port 3000`
284
+ - Then you need to setup the DB with `rails db:setup`
285
+ - Lastly you can run the demo app with `rails server --port 3000`
275
286
  </details>
276
287
 
277
288
  <details>
278
289
  <summary>Running the tests</summary><br>
279
290
 
280
- - You can run the whole suite with `./bin/test`
291
+ - You can run the whole suite with `./bin/test test/**/*_test.rb`
281
292
  </details>
282
293
 
283
294
 
@@ -1,207 +1,3 @@
1
- function _toConsumableArray(arr) {
2
- if (Array.isArray(arr)) {
3
- for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
4
- arr2[i] = arr[i];
5
- }
6
- return arr2;
7
- } else {
8
- return Array.from(arr);
9
- }
10
- }
11
-
12
- var hasPassiveEvents = false;
13
-
14
- if (typeof window !== "undefined") {
15
- var passiveTestOptions = {
16
- get passive() {
17
- hasPassiveEvents = true;
18
- return undefined;
19
- }
20
- };
21
- window.addEventListener("testPassive", null, passiveTestOptions);
22
- window.removeEventListener("testPassive", null, passiveTestOptions);
23
- }
24
-
25
- var isIosDevice = typeof window !== "undefined" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1);
26
-
27
- var locks = [];
28
-
29
- var documentListenerAdded = false;
30
-
31
- var initialClientY = -1;
32
-
33
- var previousBodyOverflowSetting = void 0;
34
-
35
- var previousBodyPosition = void 0;
36
-
37
- var previousBodyPaddingRight = void 0;
38
-
39
- var allowTouchMove = function allowTouchMove(el) {
40
- return locks.some((function(lock) {
41
- if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
42
- return true;
43
- }
44
- return false;
45
- }));
46
- };
47
-
48
- var preventDefault = function preventDefault(rawEvent) {
49
- var e = rawEvent || window.event;
50
- if (allowTouchMove(e.target)) {
51
- return true;
52
- }
53
- if (e.touches.length > 1) return true;
54
- if (e.preventDefault) e.preventDefault();
55
- return false;
56
- };
57
-
58
- var setOverflowHidden = function setOverflowHidden(options) {
59
- if (previousBodyPaddingRight === undefined) {
60
- var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
61
- var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
62
- if (_reserveScrollBarGap && scrollBarGap > 0) {
63
- var computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"), 10);
64
- previousBodyPaddingRight = document.body.style.paddingRight;
65
- document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap + "px";
66
- }
67
- }
68
- if (previousBodyOverflowSetting === undefined) {
69
- previousBodyOverflowSetting = document.body.style.overflow;
70
- document.body.style.overflow = "hidden";
71
- }
72
- };
73
-
74
- var restoreOverflowSetting = function restoreOverflowSetting() {
75
- if (previousBodyPaddingRight !== undefined) {
76
- document.body.style.paddingRight = previousBodyPaddingRight;
77
- previousBodyPaddingRight = undefined;
78
- }
79
- if (previousBodyOverflowSetting !== undefined) {
80
- document.body.style.overflow = previousBodyOverflowSetting;
81
- previousBodyOverflowSetting = undefined;
82
- }
83
- };
84
-
85
- var setPositionFixed = function setPositionFixed() {
86
- return window.requestAnimationFrame((function() {
87
- if (previousBodyPosition === undefined) {
88
- previousBodyPosition = {
89
- position: document.body.style.position,
90
- top: document.body.style.top,
91
- left: document.body.style.left
92
- };
93
- var _window = window, scrollY = _window.scrollY, scrollX = _window.scrollX, innerHeight = _window.innerHeight;
94
- document.body.style.position = "fixed";
95
- document.body.style.top = -scrollY;
96
- document.body.style.left = -scrollX;
97
- setTimeout((function() {
98
- return window.requestAnimationFrame((function() {
99
- var bottomBarHeight = innerHeight - window.innerHeight;
100
- if (bottomBarHeight && scrollY >= innerHeight) {
101
- document.body.style.top = -(scrollY + bottomBarHeight);
102
- }
103
- }));
104
- }), 300);
105
- }
106
- }));
107
- };
108
-
109
- var restorePositionSetting = function restorePositionSetting() {
110
- if (previousBodyPosition !== undefined) {
111
- var y = -parseInt(document.body.style.top, 10);
112
- var x = -parseInt(document.body.style.left, 10);
113
- document.body.style.position = previousBodyPosition.position;
114
- document.body.style.top = previousBodyPosition.top;
115
- document.body.style.left = previousBodyPosition.left;
116
- window.scrollTo(x, y);
117
- previousBodyPosition = undefined;
118
- }
119
- };
120
-
121
- var isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {
122
- return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
123
- };
124
-
125
- var handleScroll = function handleScroll(event, targetElement) {
126
- var clientY = event.targetTouches[0].clientY - initialClientY;
127
- if (allowTouchMove(event.target)) {
128
- return false;
129
- }
130
- if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
131
- return preventDefault(event);
132
- }
133
- if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
134
- return preventDefault(event);
135
- }
136
- event.stopPropagation();
137
- return true;
138
- };
139
-
140
- var disableBodyScroll$1 = function disableBodyScroll(targetElement, options) {
141
- if (!targetElement) {
142
- console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
143
- return;
144
- }
145
- if (locks.some((function(lock) {
146
- return lock.targetElement === targetElement;
147
- }))) {
148
- return;
149
- }
150
- var lock = {
151
- targetElement: targetElement,
152
- options: options || {}
153
- };
154
- locks = [].concat(_toConsumableArray(locks), [ lock ]);
155
- if (isIosDevice) {
156
- setPositionFixed();
157
- } else {
158
- setOverflowHidden(options);
159
- }
160
- if (isIosDevice) {
161
- targetElement.ontouchstart = function(event) {
162
- if (event.targetTouches.length === 1) {
163
- initialClientY = event.targetTouches[0].clientY;
164
- }
165
- };
166
- targetElement.ontouchmove = function(event) {
167
- if (event.targetTouches.length === 1) {
168
- handleScroll(event, targetElement);
169
- }
170
- };
171
- if (!documentListenerAdded) {
172
- document.addEventListener("touchmove", preventDefault, hasPassiveEvents ? {
173
- passive: false
174
- } : undefined);
175
- documentListenerAdded = true;
176
- }
177
- }
178
- };
179
-
180
- var enableBodyScroll$1 = function enableBodyScroll(targetElement) {
181
- if (!targetElement) {
182
- console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
183
- return;
184
- }
185
- locks = locks.filter((function(lock) {
186
- return lock.targetElement !== targetElement;
187
- }));
188
- if (isIosDevice) {
189
- targetElement.ontouchstart = null;
190
- targetElement.ontouchmove = null;
191
- if (documentListenerAdded && locks.length === 0) {
192
- document.removeEventListener("touchmove", preventDefault, hasPassiveEvents ? {
193
- passive: false
194
- } : undefined);
195
- documentListenerAdded = false;
196
- }
197
- }
198
- if (isIosDevice) {
199
- restorePositionSetting();
200
- } else {
201
- restoreOverflowSetting();
202
- }
203
- };
204
-
205
1
  addEventListener("click", (event => {
206
2
  window._overlasticInitiator = event.target;
207
3
  }), true);
@@ -317,45 +113,3 @@ Turbo.StreamActions["replaceOverlay"] = function() {
317
113
  renderNewOverlay();
318
114
  }
319
115
  };
320
-
321
- class DialogElement extends HTMLElement {
322
- connectedCallback() {
323
- disableBodyScroll(this);
324
- this.addEventListener("click", (event => this.close(event, true)));
325
- this.querySelector(".overlastic-close").addEventListener("click", (event => this.close(event)));
326
- }
327
- close(event, self = false) {
328
- if (self && event.target !== this) return;
329
- enableBodyScroll(this);
330
- setTimeout((() => {
331
- this.remove();
332
- }), 5);
333
- }
334
- }
335
-
336
- customElements.define("overlastic-dialog", DialogElement);
337
-
338
- class PaneElement extends DialogElement {
339
- connectedCallback() {
340
- super.connectedCallback();
341
- const lastVisit = Turbo.navigator.history.location;
342
- if (!window.modalVisitStack) {
343
- window.modalVisitStack = [];
344
- }
345
- window.modalVisitStack.push(lastVisit);
346
- Turbo.navigator.history.push(new URL(this.parentElement.getAttribute("src")));
347
- }
348
- close(event, self = false) {
349
- if (self && event.target !== this) return;
350
- super.close(event, self);
351
- if (window.modalVisitStack.length > 0) {
352
- Turbo.navigator.history.replace(window.modalVisitStack.pop());
353
- }
354
- }
355
- }
356
-
357
- customElements.define("overlastic-pane", PaneElement);
358
-
359
- window.disableBodyScroll = disableBodyScroll$1;
360
-
361
- window.enableBodyScroll = enableBodyScroll$1;
@@ -1,2 +1,2 @@
1
- var e=!1;if("undefined"!=typeof window){var t={get passive(){e=!0}};window.addEventListener("testPassive",null,t),window.removeEventListener("testPassive",null,t)}var o="undefined"!=typeof window&&window.navigator&&window.navigator.platform&&(/iP(ad|hone|od)/.test(window.navigator.platform)||"MacIntel"===window.navigator.platform&&window.navigator.maxTouchPoints>1),n=[],i=!1,a=-1,r=void 0,l=void 0,s=void 0,d=function(e){return n.some((function(t){return!(!t.options.allowTouchMove||!t.options.allowTouchMove(e))}))},c=function(e){var t=e||window.event;return!!d(t.target)||(t.touches.length>1||(t.preventDefault&&t.preventDefault(),!1))};addEventListener("click",(e=>{window._overlasticInitiator=e.target}),!0),addEventListener("click",(e=>{const t=window._overlasticInitiator?.closest("a[data-overlay-name]");t&&t.removeAttribute("target")}),!0),addEventListener("turbo:before-fetch-request",(e=>{e.detail.fetchOptions.headers["Overlay-Enabled"]="1"})),addEventListener("turbo:before-fetch-request",(e=>{const t=window._overlasticInitiator?.closest("a[data-overlay-name]"),o=t?.dataset?.overlayName,n=t?.dataset?.overlayType,i=t?.dataset?.overlayTarget,a=t?.dataset?.overlayArgs;t&&(e.detail.fetchOptions.headers["Overlay-Initiator"]="1",e.detail.fetchOptions.headers["Overlay-Name"]=o,n&&(e.detail.fetchOptions.headers["Overlay-Type"]=n),i&&(e.detail.fetchOptions.headers["Overlay-Target"]=i),a&&(e.detail.fetchOptions.headers["Overlay-Args"]=a))})),addEventListener("turbo:before-fetch-request",(e=>{const t=document.querySelector("script[overlay]");if(t){const o=document.querySelector(`overlastic[id=${t.getAttribute("overlay")}]`);if(o){const t=o.id,n=o.dataset.overlayTarget,i=o.dataset?.overlayType,a=o.dataset?.overlayArgs;e.detail.fetchOptions.headers["Overlay-Name"]=t,e.detail.fetchOptions.headers["Overlay-Target"]=n,e.detail.fetchOptions.headers["Overlay-Initiator"]="1",i&&(e.detail.fetchOptions.headers["Overlay-Type"]=i),a&&(e.detail.fetchOptions.headers["Overlay-Args"]=a)}}})),addEventListener("turbo:before-fetch-request",(e=>{const t=window._overlasticInitiator?.closest("a, form"),o=t?.closest("overlastic");if(o&&!t.dataset.overlay&&!t.dataset.overlayName){const t=o.id,n=o.dataset.overlayTarget,i=o.dataset?.overlayInitiator,a=o.dataset?.overlayType,r=o.dataset?.overlayArgs;e.detail.fetchOptions.headers["Overlay-Name"]=t,e.detail.fetchOptions.headers["Overlay-Target"]=n,i&&(e.detail.fetchOptions.headers["Overlay-Initiator"]=i),a&&(e.detail.fetchOptions.headers["Overlay-Type"]=a),r&&(e.detail.fetchOptions.headers["Overlay-Args"]=r)}delete window._overlasticInitiator})),Turbo.StreamActions.replaceOverlay=function(){let e=[],t=0;const o=this.targetElements[0],n=o.id,i=()=>{if(t++,t>=e.filter((e=>!1===e)).length){Turbo.StreamActions.replace.bind(this)();const e=document.getElementById(n),t=e.firstElementChild||e,o=new Event("overlastic:connect",{bubbles:!0,cancelable:!1});t.dispatchEvent(o)}};e=[o,...o.querySelectorAll("overlastic")].map((e=>{const t=e.firstElementChild||e,o=new CustomEvent("overlastic:disconnect",{bubbles:!0,cancelable:!0,detail:{resume:i}});return t.dispatchEvent(o)})),e.every((e=>!0===e))&&i()};class v extends HTMLElement{connectedCallback(){disableBodyScroll(this),this.addEventListener("click",(e=>this.close(e,!0))),this.querySelector(".overlastic-close").addEventListener("click",(e=>this.close(e)))}close(e,t=!1){t&&e.target!==this||(enableBodyScroll(this),setTimeout((()=>{this.remove()}),5))}}customElements.define("overlastic-dialog",v);customElements.define("overlastic-pane",class extends v{connectedCallback(){super.connectedCallback();const e=Turbo.navigator.history.location;window.modalVisitStack||(window.modalVisitStack=[]),window.modalVisitStack.push(e),Turbo.navigator.history.push(new URL(this.parentElement.getAttribute("src")))}close(e,t=!1){t&&e.target!==this||(super.close(e,t),window.modalVisitStack.length>0&&Turbo.navigator.history.replace(window.modalVisitStack.pop()))}}),window.disableBodyScroll=function(t,v){if(t){if(!n.some((function(e){return e.targetElement===t}))){var u={targetElement:t,options:v||{}};n=[].concat(function(e){if(Array.isArray(e)){for(var t=0,o=Array(e.length);t<e.length;t++)o[t]=e[t];return o}return Array.from(e)}(n),[u]),o?window.requestAnimationFrame((function(){if(void 0===l){l={position:document.body.style.position,top:document.body.style.top,left:document.body.style.left};var e=window,t=e.scrollY,o=e.scrollX,n=e.innerHeight;document.body.style.position="fixed",document.body.style.top=-t,document.body.style.left=-o,setTimeout((function(){return window.requestAnimationFrame((function(){var e=n-window.innerHeight;e&&t>=n&&(document.body.style.top=-(t+e))}))}),300)}})):function(e){if(void 0===s){var t=!!e&&!0===e.reserveScrollBarGap,o=window.innerWidth-document.documentElement.clientWidth;if(t&&o>0){var n=parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"),10);s=document.body.style.paddingRight,document.body.style.paddingRight=n+o+"px"}}void 0===r&&(r=document.body.style.overflow,document.body.style.overflow="hidden")}(v),o&&(t.ontouchstart=function(e){1===e.targetTouches.length&&(a=e.targetTouches[0].clientY)},t.ontouchmove=function(e){1===e.targetTouches.length&&function(e,t){var o=e.targetTouches[0].clientY-a;!d(e.target)&&(t&&0===t.scrollTop&&o>0||function(e){return!!e&&e.scrollHeight-e.scrollTop<=e.clientHeight}(t)&&o<0?c(e):e.stopPropagation())}(e,t)},i||(document.addEventListener("touchmove",c,e?{passive:!1}:void 0),i=!0))}}else console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.")},window.enableBodyScroll=function(t){t?(n=n.filter((function(e){return e.targetElement!==t})),o&&(t.ontouchstart=null,t.ontouchmove=null,i&&0===n.length&&(document.removeEventListener("touchmove",c,e?{passive:!1}:void 0),i=!1)),o?function(){if(void 0!==l){var e=-parseInt(document.body.style.top,10),t=-parseInt(document.body.style.left,10);document.body.style.position=l.position,document.body.style.top=l.top,document.body.style.left=l.left,window.scrollTo(t,e),l=void 0}}():(void 0!==s&&(document.body.style.paddingRight=s,s=void 0),void 0!==r&&(document.body.style.overflow=r,r=void 0))):console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.")};
1
+ addEventListener("click",(e=>{window._overlasticInitiator=e.target}),!0),addEventListener("click",(e=>{const t=window._overlasticInitiator?.closest("a[data-overlay-name]");t&&t.removeAttribute("target")}),!0),addEventListener("turbo:before-fetch-request",(e=>{e.detail.fetchOptions.headers["Overlay-Enabled"]="1"})),addEventListener("turbo:before-fetch-request",(e=>{const t=window._overlasticInitiator?.closest("a[data-overlay-name]"),a=t?.dataset?.overlayName,r=t?.dataset?.overlayType,s=t?.dataset?.overlayTarget,i=t?.dataset?.overlayArgs;t&&(e.detail.fetchOptions.headers["Overlay-Initiator"]="1",e.detail.fetchOptions.headers["Overlay-Name"]=a,r&&(e.detail.fetchOptions.headers["Overlay-Type"]=r),s&&(e.detail.fetchOptions.headers["Overlay-Target"]=s),i&&(e.detail.fetchOptions.headers["Overlay-Args"]=i))})),addEventListener("turbo:before-fetch-request",(e=>{const t=document.querySelector("script[overlay]");if(t){const a=document.querySelector(`overlastic[id=${t.getAttribute("overlay")}]`);if(a){const t=a.id,r=a.dataset.overlayTarget,s=a.dataset?.overlayType,i=a.dataset?.overlayArgs;e.detail.fetchOptions.headers["Overlay-Name"]=t,e.detail.fetchOptions.headers["Overlay-Target"]=r,e.detail.fetchOptions.headers["Overlay-Initiator"]="1",s&&(e.detail.fetchOptions.headers["Overlay-Type"]=s),i&&(e.detail.fetchOptions.headers["Overlay-Args"]=i)}}})),addEventListener("turbo:before-fetch-request",(e=>{const t=window._overlasticInitiator?.closest("a, form"),a=t?.closest("overlastic");if(a&&!t.dataset.overlay&&!t.dataset.overlayName){const t=a.id,r=a.dataset.overlayTarget,s=a.dataset?.overlayInitiator,i=a.dataset?.overlayType,o=a.dataset?.overlayArgs;e.detail.fetchOptions.headers["Overlay-Name"]=t,e.detail.fetchOptions.headers["Overlay-Target"]=r,s&&(e.detail.fetchOptions.headers["Overlay-Initiator"]=s),i&&(e.detail.fetchOptions.headers["Overlay-Type"]=i),o&&(e.detail.fetchOptions.headers["Overlay-Args"]=o)}delete window._overlasticInitiator})),Turbo.StreamActions.replaceOverlay=function(){let e=[],t=0;const a=this.targetElements[0],r=a.id,s=()=>{if(t++,t>=e.filter((e=>!1===e)).length){Turbo.StreamActions.replace.bind(this)();const e=document.getElementById(r),t=e.firstElementChild||e,a=new Event("overlastic:connect",{bubbles:!0,cancelable:!1});t.dispatchEvent(a)}};e=[a,...a.querySelectorAll("overlastic")].map((e=>{const t=e.firstElementChild||e,a=new CustomEvent("overlastic:disconnect",{bubbles:!0,cancelable:!0,detail:{resume:s}});return t.dispatchEvent(a)})),e.every((e=>!0===e))&&s()};
2
2
  //# sourceMappingURL=overlastic.min.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"overlastic.min.js","sources":["../../../node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js","../../javascript/overlastic/clickInterceptor.js","../../javascript/overlastic/streamAction.js","../../javascript/overlastic/dialogElement.js","../../javascript/overlastic/paneElement.js","../../javascript/overlastic/index.js"],"sourcesContent":["function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\n// Older browsers don't support event options, feature detect it.\n\n// Adopted and modified solution from Bohdan Didukh (2017)\n// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi\n\nvar hasPassiveEvents = false;\nif (typeof window !== 'undefined') {\n var passiveTestOptions = {\n get passive() {\n hasPassiveEvents = true;\n return undefined;\n }\n };\n window.addEventListener('testPassive', null, passiveTestOptions);\n window.removeEventListener('testPassive', null, passiveTestOptions);\n}\n\nvar isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);\n\n\nvar locks = [];\nvar documentListenerAdded = false;\nvar initialClientY = -1;\nvar previousBodyOverflowSetting = void 0;\nvar previousBodyPosition = void 0;\nvar previousBodyPaddingRight = void 0;\n\n// returns true if `el` should be allowed to receive touchmove events.\nvar allowTouchMove = function allowTouchMove(el) {\n return locks.some(function (lock) {\n if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {\n return true;\n }\n\n return false;\n });\n};\n\nvar preventDefault = function preventDefault(rawEvent) {\n var e = rawEvent || window.event;\n\n // For the case whereby consumers adds a touchmove event listener to document.\n // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })\n // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then\n // the touchmove event on document will break.\n if (allowTouchMove(e.target)) {\n return true;\n }\n\n // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).\n if (e.touches.length > 1) return true;\n\n if (e.preventDefault) e.preventDefault();\n\n return false;\n};\n\nvar setOverflowHidden = function setOverflowHidden(options) {\n // If previousBodyPaddingRight is already set, don't set it again.\n if (previousBodyPaddingRight === undefined) {\n var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;\n var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;\n\n if (_reserveScrollBarGap && scrollBarGap > 0) {\n var computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);\n previousBodyPaddingRight = document.body.style.paddingRight;\n document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap + 'px';\n }\n }\n\n // If previousBodyOverflowSetting is already set, don't set it again.\n if (previousBodyOverflowSetting === undefined) {\n previousBodyOverflowSetting = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n }\n};\n\nvar restoreOverflowSetting = function restoreOverflowSetting() {\n if (previousBodyPaddingRight !== undefined) {\n document.body.style.paddingRight = previousBodyPaddingRight;\n\n // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it\n // can be set again.\n previousBodyPaddingRight = undefined;\n }\n\n if (previousBodyOverflowSetting !== undefined) {\n document.body.style.overflow = previousBodyOverflowSetting;\n\n // Restore previousBodyOverflowSetting to undefined\n // so setOverflowHidden knows it can be set again.\n previousBodyOverflowSetting = undefined;\n }\n};\n\nvar setPositionFixed = function setPositionFixed() {\n return window.requestAnimationFrame(function () {\n // If previousBodyPosition is already set, don't set it again.\n if (previousBodyPosition === undefined) {\n previousBodyPosition = {\n position: document.body.style.position,\n top: document.body.style.top,\n left: document.body.style.left\n };\n\n // Update the dom inside an animation frame \n var _window = window,\n scrollY = _window.scrollY,\n scrollX = _window.scrollX,\n innerHeight = _window.innerHeight;\n\n document.body.style.position = 'fixed';\n document.body.style.top = -scrollY;\n document.body.style.left = -scrollX;\n\n setTimeout(function () {\n return window.requestAnimationFrame(function () {\n // Attempt to check if the bottom bar appeared due to the position change\n var bottomBarHeight = innerHeight - window.innerHeight;\n if (bottomBarHeight && scrollY >= innerHeight) {\n // Move the content further up so that the bottom bar doesn't hide it\n document.body.style.top = -(scrollY + bottomBarHeight);\n }\n });\n }, 300);\n }\n });\n};\n\nvar restorePositionSetting = function restorePositionSetting() {\n if (previousBodyPosition !== undefined) {\n // Convert the position from \"px\" to Int\n var y = -parseInt(document.body.style.top, 10);\n var x = -parseInt(document.body.style.left, 10);\n\n // Restore styles\n document.body.style.position = previousBodyPosition.position;\n document.body.style.top = previousBodyPosition.top;\n document.body.style.left = previousBodyPosition.left;\n\n // Restore scroll\n window.scrollTo(x, y);\n\n previousBodyPosition = undefined;\n }\n};\n\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions\nvar isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {\n return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;\n};\n\nvar handleScroll = function handleScroll(event, targetElement) {\n var clientY = event.targetTouches[0].clientY - initialClientY;\n\n if (allowTouchMove(event.target)) {\n return false;\n }\n\n if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {\n // element is at the top of its scroll.\n return preventDefault(event);\n }\n\n if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {\n // element is at the bottom of its scroll.\n return preventDefault(event);\n }\n\n event.stopPropagation();\n return true;\n};\n\nexport var disableBodyScroll = function disableBodyScroll(targetElement, options) {\n // targetElement must be provided\n if (!targetElement) {\n // eslint-disable-next-line no-console\n console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');\n return;\n }\n\n // disableBodyScroll must not have been called on this targetElement before\n if (locks.some(function (lock) {\n return lock.targetElement === targetElement;\n })) {\n return;\n }\n\n var lock = {\n targetElement: targetElement,\n options: options || {}\n };\n\n locks = [].concat(_toConsumableArray(locks), [lock]);\n\n if (isIosDevice) {\n setPositionFixed();\n } else {\n setOverflowHidden(options);\n }\n\n if (isIosDevice) {\n targetElement.ontouchstart = function (event) {\n if (event.targetTouches.length === 1) {\n // detect single touch.\n initialClientY = event.targetTouches[0].clientY;\n }\n };\n targetElement.ontouchmove = function (event) {\n if (event.targetTouches.length === 1) {\n // detect single touch.\n handleScroll(event, targetElement);\n }\n };\n\n if (!documentListenerAdded) {\n document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n documentListenerAdded = true;\n }\n }\n};\n\nexport var clearAllBodyScrollLocks = function clearAllBodyScrollLocks() {\n if (isIosDevice) {\n // Clear all locks ontouchstart/ontouchmove handlers, and the references.\n locks.forEach(function (lock) {\n lock.targetElement.ontouchstart = null;\n lock.targetElement.ontouchmove = null;\n });\n\n if (documentListenerAdded) {\n document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n documentListenerAdded = false;\n }\n\n // Reset initial clientY.\n initialClientY = -1;\n }\n\n if (isIosDevice) {\n restorePositionSetting();\n } else {\n restoreOverflowSetting();\n }\n\n locks = [];\n};\n\nexport var enableBodyScroll = function enableBodyScroll(targetElement) {\n if (!targetElement) {\n // eslint-disable-next-line no-console\n console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.');\n return;\n }\n\n locks = locks.filter(function (lock) {\n return lock.targetElement !== targetElement;\n });\n\n if (isIosDevice) {\n targetElement.ontouchstart = null;\n targetElement.ontouchmove = null;\n\n if (documentListenerAdded && locks.length === 0) {\n document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n documentListenerAdded = false;\n }\n }\n\n if (isIosDevice) {\n restorePositionSetting();\n } else {\n restoreOverflowSetting();\n }\n};\n\n","// Save the clicked element for use down the line.\naddEventListener(\"click\", event => {\n window._overlasticInitiator = event.target\n}, true)\n\n// Overlay anchors come with target _blank to serve as fallback in case JS is not enabled.\naddEventListener(\"click\", _event => {\n const anchor = window._overlasticInitiator?.closest(\"a[data-overlay-name]\")\n\n if (anchor) {\n anchor.removeAttribute(\"target\")\n }\n}, true)\n\n// Allow progressive enhancement by telling the server if a request is handled by Turbo.\naddEventListener(\"turbo:before-fetch-request\", event => {\n event.detail.fetchOptions.headers[\"Overlay-Enabled\"] = \"1\"\n})\n\n// When an overlay anchor is clicked,\n// send its type, target and args along with the visit request.\naddEventListener(\"turbo:before-fetch-request\", event => {\n const anchor = window._overlasticInitiator?.closest(\"a[data-overlay-name]\")\n const name = anchor?.dataset?.overlayName\n const type = anchor?.dataset?.overlayType\n const target = anchor?.dataset?.overlayTarget\n const args = anchor?.dataset?.overlayArgs\n\n if (anchor) {\n event.detail.fetchOptions.headers[\"Overlay-Initiator\"] = \"1\"\n event.detail.fetchOptions.headers[\"Overlay-Name\"] = name\n\n if (type) {\n event.detail.fetchOptions.headers[\"Overlay-Type\"] = type\n }\n\n if (target) {\n event.detail.fetchOptions.headers[\"Overlay-Target\"] = target\n }\n\n if (args) {\n event.detail.fetchOptions.headers[\"Overlay-Args\"] = args\n }\n }\n})\n\n// When the redirect script triggers a fetch,\n// send the current overlay's target along with the visit request.\naddEventListener(\"turbo:before-fetch-request\", event => {\n const script = document.querySelector(\"script[overlay]\")\n\n if (script) {\n const overlay = document.querySelector(`overlastic[id=${script.getAttribute(\"overlay\")}]`)\n\n if (overlay) {\n const name = overlay.id\n const target = overlay.dataset.overlayTarget\n const type = overlay.dataset?.overlayType\n const args = overlay.dataset?.overlayArgs\n\n event.detail.fetchOptions.headers[\"Overlay-Name\"] = name\n event.detail.fetchOptions.headers[\"Overlay-Target\"] = target\n event.detail.fetchOptions.headers[\"Overlay-Initiator\"] = \"1\"\n\n if (type) {\n event.detail.fetchOptions.headers[\"Overlay-Type\"] = type\n }\n\n if (args) {\n event.detail.fetchOptions.headers[\"Overlay-Args\"] = args\n }\n }\n }\n})\n\n// When any other element triggers a fetch,\n// send the current overlay's target along with the visit request.\naddEventListener(\"turbo:before-fetch-request\", event => {\n const initiator = window._overlasticInitiator?.closest(\"a, form\")\n const overlay = initiator?.closest(\"overlastic\")\n\n if (overlay && !initiator.dataset.overlay && !initiator.dataset.overlayName) {\n const name = overlay.id\n const target = overlay.dataset.overlayTarget\n const initiator = overlay.dataset?.overlayInitiator\n const type = overlay.dataset?.overlayType\n const args = overlay.dataset?.overlayArgs\n\n event.detail.fetchOptions.headers[\"Overlay-Name\"] = name\n event.detail.fetchOptions.headers[\"Overlay-Target\"] = target\n\n if (initiator) {\n event.detail.fetchOptions.headers[\"Overlay-Initiator\"] = initiator\n }\n\n if (type) {\n event.detail.fetchOptions.headers[\"Overlay-Type\"] = type\n }\n\n if (args) {\n event.detail.fetchOptions.headers[\"Overlay-Args\"] = args\n }\n }\n\n delete window._overlasticInitiator\n})\n","// Custom Stream action that allows for finer control of the overlay lifecycle.\n//\n// Lifecycle events:\n// - overlastic:disconnect right before removing an overlay from the DOM\n// - overlastic:connect right after attaching an overlay to the DOM\n//\n// Both events target the firstElementChild of the overlastic tag to allow for\n// a cleaner listening approach in libraries like Stimulus or Alpine.\n//\n// The disconnect event is dispatched once for every overlay that will be removed.\n// They can be paused and resumed. The new overlay won't be attached until all events\n// have been resumed.\nTurbo.StreamActions[\"replaceOverlay\"] = function() {\n let overlaysReadyToDisconnect = []\n let callsToResume = 0\n\n const oldOverlay = this.targetElements[0]\n const overlayName = oldOverlay.id\n const renderNewOverlay = () => {\n callsToResume++\n\n if (callsToResume >= overlaysReadyToDisconnect.filter(status => status === false).length) {\n Turbo.StreamActions[\"replace\"].bind(this)()\n\n const newOverlay = document.getElementById(overlayName)\n const connectTarget = newOverlay.firstElementChild || newOverlay\n const connectEvent = new Event(\"overlastic:connect\", { bubbles: true, cancelable: false })\n\n connectTarget.dispatchEvent(connectEvent)\n }\n }\n\n overlaysReadyToDisconnect = [oldOverlay, ...oldOverlay.querySelectorAll(\"overlastic\")].map(element => {\n const disconnectTarget = element.firstElementChild || element\n const disconnectEvent =\n new CustomEvent(\"overlastic:disconnect\", { bubbles: true, cancelable: true, detail: { resume: renderNewOverlay } })\n\n return disconnectTarget.dispatchEvent(disconnectEvent)\n })\n\n if (overlaysReadyToDisconnect.every(status => status === true)) {\n renderNewOverlay()\n }\n}\n","export default class DialogElement extends HTMLElement {\n connectedCallback() {\n disableBodyScroll(this)\n\n this.addEventListener(\"click\", event => this.close(event, true))\n this.querySelector(\".overlastic-close\").addEventListener(\"click\", event => this.close(event))\n }\n\n close(event, self = false) {\n if (self && event.target !== this) return\n\n enableBodyScroll(this)\n\n // Avoid removing before sending dispatching other events (like form submissions)\n setTimeout(() => {\n this.remove()\n }, 5)\n }\n}\n\ncustomElements.define(\"overlastic-dialog\", DialogElement)\n","import DialogElement from \"./dialogElement\"\n\nclass PaneElement extends DialogElement {\n connectedCallback() {\n super.connectedCallback()\n\n const lastVisit = Turbo.navigator.history.location\n\n if (!window.modalVisitStack) {\n window.modalVisitStack = []\n }\n\n window.modalVisitStack.push(lastVisit)\n Turbo.navigator.history.push(new URL(this.parentElement.getAttribute(\"src\")))\n }\n\n close(event, self = false) {\n if (self && event.target !== this) return\n\n super.close(event, self)\n\n if (window.modalVisitStack.length > 0) {\n Turbo.navigator.history.replace(window.modalVisitStack.pop())\n }\n }\n}\n\ncustomElements.define(\"overlastic-pane\", PaneElement)\n","import { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\"\n\nimport \"./clickInterceptor\"\nimport \"./streamAction\"\nimport \"./dialogElement\"\nimport \"./paneElement\"\n\nwindow.disableBodyScroll = disableBodyScroll\nwindow.enableBodyScroll = enableBodyScroll\n"],"names":["hasPassiveEvents","window","passiveTestOptions","passive","addEventListener","removeEventListener","isIosDevice","navigator","platform","test","maxTouchPoints","locks","documentListenerAdded","initialClientY","previousBodyOverflowSetting","previousBodyPosition","previousBodyPaddingRight","allowTouchMove","el","some","lock","options","preventDefault","rawEvent","e","event","target","touches","length","_overlasticInitiator","_event","anchor","closest","removeAttribute","detail","fetchOptions","headers","name","dataset","overlayName","type","overlayType","overlayTarget","args","overlayArgs","script","document","querySelector","overlay","getAttribute","id","initiator","overlayInitiator","Turbo","StreamActions","overlaysReadyToDisconnect","callsToResume","oldOverlay","this","targetElements","renderNewOverlay","filter","status","bind","newOverlay","getElementById","connectTarget","firstElementChild","connectEvent","Event","bubbles","cancelable","dispatchEvent","querySelectorAll","map","element","disconnectTarget","disconnectEvent","CustomEvent","resume","every","DialogElement","HTMLElement","[object Object]","disableBodyScroll","close","self","enableBodyScroll","setTimeout","remove","customElements","define","super","connectedCallback","lastVisit","history","location","modalVisitStack","push","URL","parentElement","replace","pop","targetElement","concat","arr","Array","isArray","i","arr2","from","_toConsumableArray","requestAnimationFrame","undefined","position","body","style","top","left","_window","scrollY","scrollX","innerHeight","bottomBarHeight","_reserveScrollBarGap","reserveScrollBarGap","scrollBarGap","innerWidth","documentElement","clientWidth","computedBodyPaddingRight","parseInt","getComputedStyle","getPropertyValue","paddingRight","overflow","setOverflowHidden","ontouchstart","targetTouches","clientY","ontouchmove","scrollTop","scrollHeight","clientHeight","isTargetElementTotallyScrolled","stopPropagation","handleScroll","console","error","y","x","scrollTo","restorePositionSetting"],"mappings":"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"}
1
+ {"version":3,"file":"overlastic.min.js","sources":["../../javascript/overlastic/clickInterceptor.js","../../javascript/overlastic/streamAction.js"],"sourcesContent":["// Save the clicked element for use down the line.\naddEventListener(\"click\", event => {\n window._overlasticInitiator = event.target\n}, true)\n\n// Overlay anchors come with target _blank to serve as fallback in case JS is not enabled.\naddEventListener(\"click\", _event => {\n const anchor = window._overlasticInitiator?.closest(\"a[data-overlay-name]\")\n\n if (anchor) {\n anchor.removeAttribute(\"target\")\n }\n}, true)\n\n// Allow progressive enhancement by telling the server if a request is handled by Turbo.\naddEventListener(\"turbo:before-fetch-request\", event => {\n event.detail.fetchOptions.headers[\"Overlay-Enabled\"] = \"1\"\n})\n\n// When an overlay anchor is clicked,\n// send its type, target and args along with the visit request.\naddEventListener(\"turbo:before-fetch-request\", event => {\n const anchor = window._overlasticInitiator?.closest(\"a[data-overlay-name]\")\n const name = anchor?.dataset?.overlayName\n const type = anchor?.dataset?.overlayType\n const target = anchor?.dataset?.overlayTarget\n const args = anchor?.dataset?.overlayArgs\n\n if (anchor) {\n event.detail.fetchOptions.headers[\"Overlay-Initiator\"] = \"1\"\n event.detail.fetchOptions.headers[\"Overlay-Name\"] = name\n\n if (type) {\n event.detail.fetchOptions.headers[\"Overlay-Type\"] = type\n }\n\n if (target) {\n event.detail.fetchOptions.headers[\"Overlay-Target\"] = target\n }\n\n if (args) {\n event.detail.fetchOptions.headers[\"Overlay-Args\"] = args\n }\n }\n})\n\n// When the redirect script triggers a fetch,\n// send the current overlay's target along with the visit request.\naddEventListener(\"turbo:before-fetch-request\", event => {\n const script = document.querySelector(\"script[overlay]\")\n\n if (script) {\n const overlay = document.querySelector(`overlastic[id=${script.getAttribute(\"overlay\")}]`)\n\n if (overlay) {\n const name = overlay.id\n const target = overlay.dataset.overlayTarget\n const type = overlay.dataset?.overlayType\n const args = overlay.dataset?.overlayArgs\n\n event.detail.fetchOptions.headers[\"Overlay-Name\"] = name\n event.detail.fetchOptions.headers[\"Overlay-Target\"] = target\n event.detail.fetchOptions.headers[\"Overlay-Initiator\"] = \"1\"\n\n if (type) {\n event.detail.fetchOptions.headers[\"Overlay-Type\"] = type\n }\n\n if (args) {\n event.detail.fetchOptions.headers[\"Overlay-Args\"] = args\n }\n }\n }\n})\n\n// When any other element triggers a fetch,\n// send the current overlay's target along with the visit request.\naddEventListener(\"turbo:before-fetch-request\", event => {\n const initiator = window._overlasticInitiator?.closest(\"a, form\")\n const overlay = initiator?.closest(\"overlastic\")\n\n if (overlay && !initiator.dataset.overlay && !initiator.dataset.overlayName) {\n const name = overlay.id\n const target = overlay.dataset.overlayTarget\n const initiator = overlay.dataset?.overlayInitiator\n const type = overlay.dataset?.overlayType\n const args = overlay.dataset?.overlayArgs\n\n event.detail.fetchOptions.headers[\"Overlay-Name\"] = name\n event.detail.fetchOptions.headers[\"Overlay-Target\"] = target\n\n if (initiator) {\n event.detail.fetchOptions.headers[\"Overlay-Initiator\"] = initiator\n }\n\n if (type) {\n event.detail.fetchOptions.headers[\"Overlay-Type\"] = type\n }\n\n if (args) {\n event.detail.fetchOptions.headers[\"Overlay-Args\"] = args\n }\n }\n\n delete window._overlasticInitiator\n})\n","// Custom Stream action that allows for finer control of the overlay lifecycle.\n//\n// Lifecycle events:\n// - overlastic:disconnect right before removing an overlay from the DOM\n// - overlastic:connect right after attaching an overlay to the DOM\n//\n// Both events target the firstElementChild of the overlastic tag to allow for\n// a cleaner listening approach in libraries like Stimulus or Alpine.\n//\n// The disconnect event is dispatched once for every overlay that will be removed.\n// They can be paused and resumed. The new overlay won't be attached until all events\n// have been resumed.\nTurbo.StreamActions[\"replaceOverlay\"] = function() {\n let overlaysReadyToDisconnect = []\n let callsToResume = 0\n\n const oldOverlay = this.targetElements[0]\n const overlayName = oldOverlay.id\n const renderNewOverlay = () => {\n callsToResume++\n\n if (callsToResume >= overlaysReadyToDisconnect.filter(status => status === false).length) {\n Turbo.StreamActions[\"replace\"].bind(this)()\n\n const newOverlay = document.getElementById(overlayName)\n const connectTarget = newOverlay.firstElementChild || newOverlay\n const connectEvent = new Event(\"overlastic:connect\", { bubbles: true, cancelable: false })\n\n connectTarget.dispatchEvent(connectEvent)\n }\n }\n\n overlaysReadyToDisconnect = [oldOverlay, ...oldOverlay.querySelectorAll(\"overlastic\")].map(element => {\n const disconnectTarget = element.firstElementChild || element\n const disconnectEvent =\n new CustomEvent(\"overlastic:disconnect\", { bubbles: true, cancelable: true, detail: { resume: renderNewOverlay } })\n\n return disconnectTarget.dispatchEvent(disconnectEvent)\n })\n\n if (overlaysReadyToDisconnect.every(status => status === true)) {\n renderNewOverlay()\n }\n}\n"],"names":["addEventListener","event","window","_overlasticInitiator","target","_event","anchor","closest","removeAttribute","detail","fetchOptions","headers","name","dataset","overlayName","type","overlayType","overlayTarget","args","overlayArgs","script","document","querySelector","overlay","getAttribute","id","initiator","overlayInitiator","Turbo","StreamActions","overlaysReadyToDisconnect","callsToResume","oldOverlay","this","targetElements","renderNewOverlay","filter","status","length","bind","newOverlay","getElementById","connectTarget","firstElementChild","connectEvent","Event","bubbles","cancelable","dispatchEvent","querySelectorAll","map","element","disconnectTarget","disconnectEvent","CustomEvent","resume","every"],"mappings":"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"}
@@ -1,9 +1,2 @@
1
- import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock"
2
-
3
1
  import "./clickInterceptor"
4
2
  import "./streamAction"
5
- import "./dialogElement"
6
- import "./paneElement"
7
-
8
- window.disableBodyScroll = disableBodyScroll
9
- window.enableBodyScroll = enableBodyScroll
@@ -1,6 +1,6 @@
1
1
  <% title ||= "" %>
2
2
 
3
- <overlastic-dialog style="height:100vh;background-color:rgba(107, 114, 128, 0.5);justify-content:center;align-items:center;width: 100vw;display:flex;z-index:50;left:0px;top:0px;position:fixed;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
3
+ <div class="overlay" style="height:100vh;background-color:rgba(107, 114, 128, 0.5);justify-content:center;align-items:center;width: 100vw;display:flex;z-index:50;left:0px;top:0px;position:fixed;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
4
4
  <div style="width: 50%;justify-content:center;align-items:center;flex-direction:column;max-width:672px;height:662.398px;display:flex;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
5
5
  <div style="padding-top:32px;padding-bottom:32px;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;background-color:rgb(255, 255, 255);overflow:hidden;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
6
6
  <div style="padding-left:32px;padding-right:32px;justify-content:space-between;align-items:center;display:flex;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
@@ -8,7 +8,7 @@
8
8
  <%= title %>
9
9
  </label>
10
10
 
11
- <span class="overlastic-close" style="color:rgb(75, 85, 99);cursor:pointer;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
11
+ <span onclick="this.closest('.overlay').remove()" style="color:rgb(75, 85, 99);cursor:pointer;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
12
12
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" style="width: 1.25rem;height:20px;display:block;vertical-align:middle;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);fill:currentColor;">
13
13
  <!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
14
14
  <path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" style="box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);"></path>
@@ -21,4 +21,4 @@
21
21
  </div>
22
22
  </div>
23
23
  </div>
24
- </overlastic-dialog>
24
+ </div>
@@ -1,8 +1,8 @@
1
- <overlastic-pane style="background-color:rgba(107, 114, 128, 0.5);justify-content:flex-end;width: 100vw;height:100vh;display:flex;z-index:40;left:0px;top:0px;position:fixed;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
1
+ <div class="overlay" style="background-color:rgba(107, 114, 128, 0.5);justify-content:flex-end;width: 100vw;height:100vh;display:flex;z-index:40;left:0px;top:0px;position:fixed;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
2
2
  <div style="width: 66.6667%;align-items:flex-end;flex-direction:column;animation:0.2s ease 0s 1 normal both running modal;height:100%;display:flex;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
3
3
  <div style="box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;padding-top:20px;padding-bottom:20px;background-color:rgb(249, 250, 251);border-top-left-radius:8px;border-bottom-left-radius:8px;overflow:hidden;width: 100%;height:100%;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
4
4
  <div style="padding-left:20px;padding-right:20px;justify-content:space-between;align-items:center;display:flex;margin-bottom:12px;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
5
- <span class="overlastic-close" style="color:rgb(75, 85, 99);cursor:pointer;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
5
+ <span onclick="this.closest('.overlay').remove()" style="color:rgb(75, 85, 99);cursor:pointer;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);">
6
6
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" style="width: 2rem;height:32px;display:block;vertical-align:middle;box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);fill:currentColor;">
7
7
  <!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
8
8
  <path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" style="box-sizing:border-box;border-width:0px;border-style:solid;border-color:rgb(229, 231, 235);"></path>
@@ -15,4 +15,4 @@
15
15
  </div>
16
16
  </div>
17
17
  </div>
18
- </overlastic-pane>
18
+ </div>
@@ -1,6 +1,6 @@
1
1
  <% title ||= "" %>
2
2
 
3
- <overlastic-dialog class="fixed top-0 left-0 z-50 flex justify-center w-screen h-screen-safe items-center bg-gray-500 bg-opacity-50">
3
+ <div class="overlay fixed top-0 left-0 z-50 flex justify-center w-screen h-screen-safe items-center bg-gray-500 bg-opacity-50">
4
4
  <div class="w-11/12 sm:w-5/6 lg:w-1/2 max-w-2xl h-[90vh] flex flex-col justify-center items-center">
5
5
  <div class="py-4 sm:py-8 bg-white shadow-md overflow-hidden">
6
6
  <div class="px-4 sm:px-8 flex justify-between items-center">
@@ -8,7 +8,7 @@
8
8
  <%= title %>
9
9
  </label>
10
10
 
11
- <span class="overlastic-close cursor-pointer text-gray-600">
11
+ <span onclick="this.closest('.overlay').remove()" class="cursor-pointer text-gray-600">
12
12
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="w-5 h-5 fill-current">
13
13
  <!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
14
14
  <path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"/>
@@ -21,4 +21,4 @@
21
21
  </div>
22
22
  </div>
23
23
  </div>
24
- </overlastic-dialog>
24
+ </div>
@@ -1,8 +1,8 @@
1
- <overlastic-pane class="fixed top-0 left-0 z-40 flex justify-end w-screen h-screen bg-gray-500 bg-opacity-50">
1
+ <div class="overlay fixed top-0 left-0 z-40 flex justify-end w-screen h-screen bg-gray-500 bg-opacity-50">
2
2
  <div class="w-full sm:w-5/6 lg:w-8/12 h-full flex flex-col items-end animate-modal">
3
3
  <div id="split-container" class="py-5 bg-gray-50 rounded-l-lg shadow-md overflow-hidden w-full h-full">
4
4
  <div class="px-5 mb-3 flex justify-between items-center">
5
- <span class="overlastic-close cursor-pointer text-gray-600">
5
+ <span onclick="this.closest('.overlay').remove()" class="cursor-pointer text-gray-600">
6
6
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="w-8 h-8 fill-current">
7
7
  <!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
8
8
  <path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"/>
@@ -15,4 +15,4 @@
15
15
  </div>
16
16
  </div>
17
17
  </div>
18
- </overlastic-pane>
18
+ </div>
@@ -1,3 +1,3 @@
1
1
  module Overlastic
2
- VERSION = "0.9.1"
2
+ VERSION = "0.10.0"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: overlastic
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.9.1
4
+ version: 0.10.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Martin Zamuner
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2022-09-26 00:00:00.000000000 Z
11
+ date: 2022-10-02 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: actionpack
@@ -69,9 +69,7 @@ files:
69
69
  - app/helpers/overlastic/overlays_helper.rb
70
70
  - app/helpers/overlastic/streams_helper.rb
71
71
  - app/javascript/overlastic/clickInterceptor.js
72
- - app/javascript/overlastic/dialogElement.js
73
72
  - app/javascript/overlastic/index.js
74
- - app/javascript/overlastic/paneElement.js
75
73
  - app/javascript/overlastic/streamAction.js
76
74
  - app/views/overlastic/inline/_dialog.html.erb
77
75
  - app/views/overlastic/inline/_pane.html.erb
@@ -109,5 +107,6 @@ requirements: []
109
107
  rubygems_version: 3.2.22
110
108
  signing_key:
111
109
  specification_version: 4
112
- summary: Fantastically easy overlays using Hotwire.
110
+ summary: Fantastically easy overlays using Hotwire. Bring your dialog modals and slide-out
111
+ panes to life.
113
112
  test_files: []
@@ -1,21 +0,0 @@
1
- export default class DialogElement extends HTMLElement {
2
- connectedCallback() {
3
- disableBodyScroll(this)
4
-
5
- this.addEventListener("click", event => this.close(event, true))
6
- this.querySelector(".overlastic-close").addEventListener("click", event => this.close(event))
7
- }
8
-
9
- close(event, self = false) {
10
- if (self && event.target !== this) return
11
-
12
- enableBodyScroll(this)
13
-
14
- // Avoid removing before sending dispatching other events (like form submissions)
15
- setTimeout(() => {
16
- this.remove()
17
- }, 5)
18
- }
19
- }
20
-
21
- customElements.define("overlastic-dialog", DialogElement)
@@ -1,28 +0,0 @@
1
- import DialogElement from "./dialogElement"
2
-
3
- class PaneElement extends DialogElement {
4
- connectedCallback() {
5
- super.connectedCallback()
6
-
7
- const lastVisit = Turbo.navigator.history.location
8
-
9
- if (!window.modalVisitStack) {
10
- window.modalVisitStack = []
11
- }
12
-
13
- window.modalVisitStack.push(lastVisit)
14
- Turbo.navigator.history.push(new URL(this.parentElement.getAttribute("src")))
15
- }
16
-
17
- close(event, self = false) {
18
- if (self && event.target !== this) return
19
-
20
- super.close(event, self)
21
-
22
- if (window.modalVisitStack.length > 0) {
23
- Turbo.navigator.history.replace(window.modalVisitStack.pop())
24
- }
25
- }
26
- }
27
-
28
- customElements.define("overlastic-pane", PaneElement)