open modals as pages on mobile devices

app/javascript/application.js

@@ -57,6 +57,7 @@ import BarChart from './elements/bar_chart'
 import FieldCondition from './elements/field_condition'
 import ConfirmUpload from './elements/confirm_upload'
 import ScrollFade from './elements/scroll_fade'
+import ConvertModalLinks from './elements/convert_modal_links'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -152,6 +153,7 @@ safeRegisterElement('bar-chart', BarChart)
 safeRegisterElement('field-condition', FieldCondition)
 safeRegisterElement('confirm-upload', ConfirmUpload)
 safeRegisterElement('scroll-fade', ScrollFade)
+safeRegisterElement('convert-modal-links', ConvertModalLinks)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/elements/convert_modal_links.js

@@ -0,0 +1,15 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    if (!this.isMobile()) return
+
+    document.querySelectorAll('a[data-turbo-frame="modal"]').forEach((link) => {
+      link.dataset.turboFrame = '_top'
+    })
+  }
+
+  isMobile () {
+    const isTouchWebkit = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit|android/i.test(navigator.userAgent)
+
+    return isTouchWebkit || /iPhone|iPad|iPod/i.test(navigator.userAgent)
+  }
+}

app/javascript/elements/turbo_modal.js

@@ -6,7 +6,7 @@ export default actionable(class extends HTMLElement {
 
     document.addEventListener('keyup', this.onEscKey)
 
-    document.addEventListener('turbo:before-cache', this.close)
+    document.addEventListener('turbo:before-cache', this.onBeforeCache)
 
     if (this.dataset.closeAfterSubmit !== 'false') {
       document.addEventListener('turbo:submit-end', this.onSubmit)
@@ -18,7 +18,7 @@ export default actionable(class extends HTMLElement {
 
     document.removeEventListener('keyup', this.onEscKey)
     document.removeEventListener('turbo:submit-end', this.onSubmit)
-    document.removeEventListener('turbo:before-cache', this.close)
+    document.removeEventListener('turbo:before-cache', this.onBeforeCache)
   }
 
   onSubmit = (e) => {
@@ -33,9 +33,19 @@ export default actionable(class extends HTMLElement {
     }
   }
 
+  onBeforeCache = () => {
+    if (this.closest('turbo-frame')?.src) {
+      this.remove()
+    }
+  }
+
   close = (e) => {
     e?.preventDefault()
 
-    this.remove()
+    if (!this.closest('turbo-frame')?.src && window.history.length > 1) {
+      window.history.back()
+    } else {
+      this.remove()
+    }
   }
 })

app/views/layouts/application.html.erb

@@ -27,6 +27,7 @@
       <% end %>
     <% end %>
     <turbo-frame id="modal"></turbo-frame>
+    <convert-modal-links></convert-modal-links>
     <turbo-frame id="drawer"></turbo-frame>
     <%= render 'shared/navbar' %>
     <% if flash.present? %><%= render 'shared/flash' %><% end %>