Fix modals

app/packs/src/decidim/budgeting_pipeline/exit_handler.js

@@ -24,13 +24,13 @@
   }
 
   $(() => {
-    const $exitNotification = $("#exit-notification");
+    const $exitNotificationModal = $("#exit-notification-modal");
     const $exitLink = $("#exit-notification-link");
     const defaultExitUrl = $exitLink.attr("href");
     const defaultExitLinkText = $exitLink.text();
     let exitLinkText = defaultExitLinkText;
 
-    if ($exitNotification.length < 1) {
+    if ($exitNotificationModal.length < 1) {
       // Do not apply when not inside the voting pipeline
       return;
     }
@@ -44,7 +44,7 @@
 
       $exitLink.attr("href", url);
       $exitLink.html(exitLinkText);
-      $exitNotification.foundation("open");
+      $exitNotificationModal.open();
     };
 
     // Handle "beforeunload"

app/views/decidim/budgets/line_items/update_budget_error.js.erb

@@ -1,4 +1,4 @@
-let $modal = $("#order-update-error");
+let $modal = $("#order-update-error-modal");
 
 if ($modal.length < 1) {
   $modal = $('<%= j(render partial: "error_modal").strip.html_safe %>');

app/views/decidim/budgets/linked_resources/_resource_modal.html.erb

@@ -1,16 +1,16 @@
-<div class="reveal" data-reveal id="linked-resource-details" role="dialog" aria-modal="true" aria-labelledby="linked-resource-details-label" aria-live="polite">
-  <div class="reveal__header">
-    <h2 id="linked-resource-details-label" class="reveal__title"><%= present(resource).title %></h2>
+<%= decidim_modal id:"linked-resource-details-modal" do %>
+  <div data-dialog-container>
+    <h2 id="linked-resource-details-label"><%= present(resource).title %></h2>
     <button class="close-button" data-close aria-label="<%= t(".close_modal") %>" type="button">
       <span aria-hidden="true">&times;</span>
     </button>
-  </div>
 
-  <div class="reveal__content">
-    <%= render(partial: @template, locals: { resource: resource }) %>
+    <div>
+      <%= render(partial: @template, locals: { resource: resource }) %>
+    </div>
   </div>
 
-  <div class="buttons buttons-row">
+  <div data-dialog-actions>
     <button class="button" data-close type="button"><%= t(".close") %></button>
   </div>
-</div>
+<% end %>

app/views/decidim/budgets/linked_resources/show.js.erb

@@ -1,10 +1,13 @@
-var $modal = $("#linked-resource-details");
+var $modal = $("#linked-resource-details-modal");
 if ($modal.length > 0) {
   $modal.remove();
 }
 
 $modal = $('<%= j(render partial: "resource_modal").strip.html_safe %>');
 $("body").append($modal);
 
-$modal.foundation();
-$modal.foundation("open");
+let dialog = new window.Decidim.Dialogs("#linked-resource-details-modal");
+$modal.data("linkedResourceDialog", dialog);
+let dialogInstance = dialog;
+
+dialogInstance.open();

app/views/decidim/budgets/orders/index.html.erb

@@ -10,7 +10,6 @@
   <div class="columns mediumlarge-10 large-8">
     <div class="static__content text-center">
       <%== t(".description_html") %>
-
       <% if current_settings.show_votes? %>
         <p>
           <%= link_to voting_finished? ? t(".see_results") : t(".follow_voting"), results_path, class: "button primary" %>

app/views/decidim/budgets/projects/_project.html.erb

@@ -1,2 +1,2 @@
 <% show_only_added ||= params.dig(:filter, :addition_type) == "added" %>
-<%= card_for project, link_whole_card: false, wrapper_class: "project-item", show_only_added: %>
+<%= card_for project, render_extra_data: true, link_whole_card: false, wrapper_class: "project-item", show_only_added: %>

app/views/decidim/budgets/projects/index.html.erb

@@ -66,7 +66,6 @@
 </div>
 
 <%= append_javascript_pack_tag "decidim_budgeting_pipeline_projects" %>
-
 <% if vote_success? %>
   <%= render partial: "decidim/budgets/results/vote_finished_modal" %>
 <% end %>

app/views/decidim/budgets/projects/show.js.erb

@@ -1,13 +1,13 @@
-let modalId = "project-modal-<%= project.id %>";
-let $modal = $("#" + modalId);
+let $modal = $("#project-modal-<%= project.id %>");
+
 if ($modal.length < 1) {
-  let modalHTML = '<%= j(render partial: "project_modal").strip.html_safe %>';
-  $("body").append(modalHTML);
+  $modal = $('<%= j(render partial: "project_modal").strip.html_safe %>');
+  $("body").append($modal);
 
-  let dialog = new A11yDialog($modal);
+  let dialog = new window.Decidim.Dialogs("#project-modal-<%= project.id %>");
   $modal.data("projectDialog", dialog);
-}
 
-let dialogInstance = $modal.data("projectDialog");
+  var dialogInstance = dialog;
+}
 
-dialogInstance.show();
+dialogInstance.open();

app/views/decidim/budgets/votes/_exit_modal.html.erb

@@ -1,20 +1,20 @@
-<div class="reveal" data-reveal id="exit-notification" role="dialog" aria-modal="true" aria-labelledby="exit-notification-label" aria-live="polite">
-  <div class="reveal__header">
-    <h3 id="exit-notification-label" class="reveal__title"><%= t(".title") %></h3>
+<%= decidim_modal id:"exit-notification-modal" do %>
+  <div data-dialog-container>
+    <h3 id="exit-notification-label"><%= t(".title") %></h3>
     <button class="close-button" data-close aria-label="<%= t("decidim.budgets.budget_information_modal.close_modal") %>" type="button">
       <span aria-hidden="true">&times;</span>
     </button>
-  </div>
-  <div class="static__content text-center">
-    <p><strong><%= t(".message") %></strong></p>
+    <div class="static__content text-center">
+      <p><strong><%= t(".message") %></strong></p>
+    </div>
   </div>
 
-  <div class="row">
+  <div data-dialog-actions>
     <div class="columns medium-8 medium-offset-2">
       <button class="button primary expanded" data-close type="button">
         <%= t(".cancel") %>
       </button>
       <%= link_to t(".exit"), projects_path, id: "exit-notification-link", class: "button primary hollow expanded" %>
     </div>
   </div>
-</div>
+<% end %>

app/views/decidim/budgets/votes/preview.js.erb

@@ -1,4 +1,14 @@
 (function() {
+  var $notificationModal = $("#exit-notification-modal");
+
+  if ($notificationModal.length < 1) {
+    $notificationModal = $('<%= j(render partial: "exit_modal").strip.html_safe %>');
+    $("body").append($notificationModal);
+
+    let notificationDialog = new window.Decidim.Dialogs("#exit-notification-modal");
+    $notificationModal.data("exitNotificationDialog", notificationDialog);
+  }
+
   var $modal = $("#order-preview-modal");
   if ($modal.length > 0) {
     $modal.remove();
@@ -9,7 +19,7 @@
 
   let dialog = new window.Decidim.Dialogs("#order-preview-modal");
   $modal.data("orderPreviewDialog", dialog);
-  let dialogInstance = $modal.data("orderPreviewDialog");
+  let dialogInstance = dialog;
 
   dialogInstance.open();