lock swipe

app/javascript/elements/signature_form.js

@@ -5,6 +5,8 @@ export default targetable(class extends HTMLElement {
   static [target.static] = ['canvas', 'input', 'clear', 'button']
 
   async connectedCallback () {
+    this.lockSwipe(true)
+
     const { default: SignaturePad } = await import('signature_pad')
 
     this.setCanvasSize()
@@ -61,11 +63,17 @@ export default targetable(class extends HTMLElement {
   }
 
   disconnectedCallback () {
+    this.lockSwipe(false)
+
     if (this.resizeObserver) {
       this.resizeObserver.disconnect()
     }
   }
 
+  lockSwipe (locked) {
+    window.webkit?.messageHandlers?.native?.postMessage({ type: 'swipe', op: locked ? 'lock' : 'unlock' })
+  }
+
   setCanvasSize () {
     const scale = 3
 

app/views/profile/index.html.erb

@@ -40,7 +40,7 @@
         <img src="<%= signature.url(time: ActiveStorage::Attachment.service_url_time) %>" style="height: 130px; width: 100%; object-fit: contain;">
       </div>
     <% end %>
-    <a href="<%= edit_user_signature_path %>" data-turbo-frame="modal" class="base-button w-full">
+    <a href="<%= edit_user_signature_path %>" data-turbo-frame="modal" data-native-modal="medium" class="base-button w-full">
       <%= t('update_signature') %>
     </a>
     <p class="text-2xl font-bold mt-8 mb-4">
@@ -53,7 +53,7 @@
         <img src="<%= initials.url(time: ActiveStorage::Attachment.service_url_time) %>" style="height: 130px; width: 100%; object-fit: contain;">
       </div>
     <% end %>
-    <a href="<%= edit_user_initials_path %>" data-turbo-frame="modal" class="base-button w-full">
+    <a href="<%= edit_user_initials_path %>" data-turbo-frame="modal" data-native-modal="medium" class="base-button w-full">
       <%= t('update_initials') %>
     </a>
     <% if true_user == current_user && !current_account.testing? %>

app/views/user_initials/edit.html.erb

@@ -1,6 +1,6 @@
 <%= render 'shared/turbo_modal', title: t('update_initials') do %>
   <% options = [[t('draw'), 'draw'], [t('upload'), 'upload']] %>
-  <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center mt-4 block">
+  <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center block <%= 'mt-4' unless turbo_native_app? %>">
     <div class="join">
       <% options.each_with_index do |(label, value), index| %>
         <span>

app/views/user_signatures/edit.html.erb

@@ -1,6 +1,6 @@
 <%= render 'shared/turbo_modal', title: t('update_signature') do %>
   <% options = [[t('draw'), 'draw'], [t('upload'), 'upload']] %>
-  <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center mt-4 block">
+  <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center block <%= 'mt-4' unless turbo_native_app? %>">
     <div class="join">
       <% options.each_with_index do |(label, value), index| %>
         <span>