fix/Use new modal format for all modals

Author: LewisYoul

app/javascript/controllers/modal_controller.js

@@ -8,13 +8,10 @@ export default class extends Controller {
     this.element[this.identifier] = this
   }
 
-  present(url, opts = {}) {
-    event.preventDefault()
-
+  present(url) {
     axios.get(url)
       .then(res => {
         this.bodyTarget.insertAdjacentHTML('afterbegin', res.data);
-        if (opts.callback) { opts.callback() }
         this.modalTarget.classList.remove('hidden')
       })
       .catch(console.error)
@@ -24,8 +21,4 @@ export default class extends Controller {
     this.modalTarget.classList.add('hidden')
     this.bodyTarget.innerHTML = ''
   }
-
-  get url() {
-    return this.data.get('url')
-  }
 }

app/javascript/controllers/popover_controller.js

@@ -35,6 +35,10 @@ export default class extends Controller {
     event.preventDefault();
   }
 
+  presentModal(event) {
+    this.modal.present(event.currentTarget.dataset.modalUrl)
+  }
+
   disconnect() {
     if (this.hasPopoverTarget) { this.popoverTarget.remove() }
   }
@@ -52,4 +56,8 @@ export default class extends Controller {
   get confirmText() {
     return this.data.get('confirm')
   }
+
+  get modal() {
+    return document.getElementById('modal').modal
+  }
 }

app/views/shared/_popover.html.erb

@@ -16,7 +16,7 @@
     <% else %>
       <div 
         data-controller="modal"
-        data-action="click->modal#present"
+        data-action="click->popover#presentModal"
         data-modal-url="<%= option[:url] %>"
         class="popover--item"
       >

app/views/snippets/move_modal.html.erb

@@ -1,37 +1,35 @@
-<%= render 'shared/modal', header: @header do %>
-  <div
-    data-controller="snippets"
-    data-snippets-selected-folder-id="<%= @current_folder_id %>"
-    data-snippets-original-folder-id="<%= @current_folder_id %>"
-    data-snippets-confirm-path="<%= file_snippet_path(@snippet) %>"
-  >
-    <input data-action="keyup->snippets#modal_search" class="move-snippet--search" type="search" placeholder="Find a folder...">
-    <div class="move-snippet--list" data-target="snippets.list">
-      <% @folders.each do |folder| %>
-        <div
-          data-action="click->snippets#select_folder"
-          data-folder-id="<%= folder.id %>"
-          data-target="snippets.listItem"
-          data-filter-key="<%= folder.name %>"
-          class="<%= folder.id == @current_folder_id ? 'move-snippet--item-selected' : 'move-snippet--item' %>"
-        >
-          <span><%= folder.name %></span>
-          <% if folder.id == @current_folder_id %>
-            <img id="selected-checkmark" src="/icons/checked.svg" width="14">
-          <% end %>
-        </div>
-      <% end %>
-    </div>
-    <div class="move-snippet--buttons">
-      <button data-action="click->modal#close" class="button--cta-cancel">CANCEL</button>
-      <button
-        data-action="click->snippets#file"
-        data-target="snippets.moveButton"
-        class="button--cta-disabled"
-        disabled
+<div
+  data-controller="snippets"
+  data-snippets-selected-folder-id="<%= @current_folder_id %>"
+  data-snippets-original-folder-id="<%= @current_folder_id %>"
+  data-snippets-confirm-path="<%= file_snippet_path(@snippet) %>"
+>
+  <input data-action="keyup->snippets#modal_search" class="move-snippet--search" type="search" placeholder="Find a folder...">
+  <div class="move-snippet--list" data-target="snippets.list">
+    <% @folders.each do |folder| %>
+      <div
+        data-action="click->snippets#select_folder"
+        data-folder-id="<%= folder.id %>"
+        data-target="snippets.listItem"
+        data-filter-key="<%= folder.name %>"
+        class="<%= folder.id == @current_folder_id ? 'move-snippet--item-selected' : 'move-snippet--item' %>"
       >
-        <%= @header.upcase %>
-      </button>
-    </div>
+        <span><%= folder.name %></span>
+        <% if folder.id == @current_folder_id %>
+          <img id="selected-checkmark" src="/icons/checked.svg" width="14">
+        <% end %>
+      </div>
+    <% end %>
   </div>
-<% end %>
+  <div class="move-snippet--buttons">
+    <button data-action="click->modal#close" class="button--cta-cancel">CANCEL</button>
+    <button
+      data-action="click->snippets#file"
+      data-target="snippets.moveButton"
+      class="button--cta-disabled"
+      disabled
+    >
+      <%= @header.upcase %>
+    </button>
+  </div>
+</div>