Fix labels, bugs and improve exit modal

- Fix labels pointing to correct field IDs
- fix info modals opening after markup changes
- Improve the exit modal + only show it when changes have happened

app/cells/decidim/plans/plan_form/show.erb

@@ -31,15 +31,14 @@ js_options = {
 }
 %>
 
-<% if user_public? %>
+<% if user_signed_in? && user_public? %>
   <script>
   document.addEventListener("DOMContentLoaded", () => {
     DecidimPlansCharacters.configure(<%== js_options.to_json %>);
     $(".field.with-character-counter").each(function(_i, el) {
       var $wrapper = $(el);
       var $input = $("input, textarea", $wrapper);
       var $info = $(".field-character-counter-info", $wrapper);
-      console.log($info);
       DecidimPlansCharacters.bindCharacterCounter($input, $info);
     });
   })

app/cells/decidim/plans/section_edit_cell.rb

@@ -22,15 +22,19 @@ def multilingual_answers?
         options[:multilingual_answers]
       end
 
-      def field_options
+      def field_options(name = :body)
         {
-          id: "plan_section_answer_#{model.section.id}",
+          id: field_id(name),
           label: false,
           disabled: field_disabled?,
           help_text: tooltip_help? ? nil : model.help
         }
       end
 
+      def field_id(name)
+        "plans_section_#{model.section.id}_contents_#{model.section.id}_#{name}"
+      end
+
       def field_disabled?
         !user_signed_in? || !user_public?
       end

app/cells/decidim/plans/section_type_edit/field_category/show.erb

@@ -2,7 +2,7 @@
   <div class="row medium-unstack">
     <div class="columns medium-7 large-8">
       <%= content_tag :div, class: field_label_classes do %>
-        <%= plain_label form, "body_#{current_locale}".to_sym %>
+        <%= plain_label form, :category_id %>
         <%= render :tooltip %>
       <% end %>
     </div>

app/cells/decidim/plans/section_type_edit/field_checkbox_cell.rb

@@ -6,7 +6,7 @@ module SectionTypeEdit
       class FieldCheckboxCell < Decidim::Plans::SectionEditCell
         private
 
-        def field_options
+        def field_options(name = :body)
           base = super
           base.delete(:help_text) # Causes the display of the checkbox to break
           base

app/cells/decidim/plans/section_type_edit/field_map_point/show.erb

@@ -4,7 +4,7 @@
   <div class="row medium-unstack">
     <div class="columns medium-7">
       <div class="field" id="<%= address_id %>">
-        <%= form.geocoding_field :address, object: model, label: false, class: "input-group-field address-input-address", data: {
+        <%= form.geocoding_field :address, object: model, label: false, id: field_id(:address), class: "input-group-field address-input-address", data: {
           "coordinates-url": geocoding_path,
           "address-url": reverse_geocoding_path
         }, disabled: field_disabled? %>

app/cells/decidim/plans/section_type_edit/field_number_cell.rb

@@ -10,7 +10,7 @@ def currency_type?
           section.section_type == "field_currency"
         end
 
-        def field_options
+        def field_options(name = :value)
           base = super
           base_class = base[:class] || ""
 

app/cells/decidim/plans/section_type_edit/field_text/show.erb

@@ -21,7 +21,7 @@
       <% else %>
         <%= form.text_field(
           "body_#{current_locale}".to_sym,
-          field_options
+          field_options("body_#{current_locale}".to_sym)
         ) %>
       <% end %>
     </div>

app/cells/decidim/plans/section_type_edit/field_text_cell.rb

@@ -6,7 +6,7 @@ module SectionTypeEdit
       class FieldTextCell < Decidim::Plans::SectionEditCell
         private
 
-        def field_options
+        def field_options(name = :body)
           base = super.merge(label: false)
           return base unless display_character_counter?
 

app/cells/decidim/plans/section_type_edit/field_text_multiline/show.erb

@@ -1,5 +1,5 @@
 <%
-form_field_options = field_options
+form_field_options = field_options("body_#{current_locale}".to_sym)
 form_field_options.delete(:help_text)
 %>
 

app/cells/decidim/plans/section_type_edit/field_text_multiline_cell.rb

@@ -17,6 +17,12 @@ def field_label_classes
 
           classes.join(" ")
         end
+
+        private
+
+        def field_id(name)
+          "contents_#{model.section.id}_#{name}"
+        end
       end
     end
   end

app/cells/decidim/plans/section_type_edit/field_title/show.erb

@@ -21,7 +21,7 @@
       <% else %>
         <%= form.text_field(
           "body_#{current_locale}".to_sym,
-          field_options
+          field_options("body_#{current_locale}".to_sym)
         ) %>
       <% end %>
     </div>

app/cells/decidim/plans/section_type_edit/field_title_cell.rb

@@ -4,6 +4,11 @@ module Decidim
   module Plans
     module SectionTypeEdit
       class FieldTitleCell < Decidim::Plans::SectionTypeEdit::FieldTextCell
+        private
+
+        def field_id(name)
+          "contents_#{model.section.id}_#{name}"
+        end
       end
     end
   end

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

@@ -0,0 +1,92 @@
+const currentAllocationZero = () => {
+  const $budgetSummary = $(".budget-summary__progressbox");
+  return parseInt($budgetSummary.attr("data-current-allocation"), 10) === 0;
+}
+
+const isSafeUrl = (exitUrl) => {
+  if (!exitUrl) {
+    return false
+  }
+
+  const safeUrls = [];
+
+  let safe = false;
+  safeUrls.forEach((url) => {
+    if (exitUrl.startsWith(url)) {
+      safe =  true
+    }
+  });
+
+  return safe;
+}
+
+const allowExitFrom = ($el) => {
+  if (currentAllocationZero()) {
+    return true
+  } else if ($el.attr("target") === "_blank") {
+    return true;
+  } else if ($el.hasClass("info-modal-link")) {
+    return true;
+  } else if ($el.attr("id") === "exit-notification-link") {
+    return true;
+  } else if ($el.parents("[data-reveal]").length > 0) {
+    return true;
+  } else if (isSafeUrl($el.attr("href"))) {
+    return true
+  }
+
+  return false;
+}
+
+$(() => {
+  const $exitNotification = $("#exit-notification");
+  const $exitLink = $("#exit-notification-link");
+  const defaultExitUrl = $exitLink.attr("href");
+  const defaultExitLinkText = $exitLink.text();
+  let exitLinkText = defaultExitLinkText;
+  let formChanged = false;
+
+  if ($exitNotification.length < 1) {
+    // Do not apply when not inside the voting pipeline
+    return;
+  }
+
+  const openExitNotification = (url, method = null) => {
+    if (method && method !== "get") {
+      $exitLink.attr("data-method", method);
+    } else {
+      $exitLink.removeAttr("data-method");
+    }
+
+    $exitLink.attr("href", url);
+    $exitLink.html(exitLinkText);
+    $exitNotification.foundation("open");
+  };
+
+  $(document).on("click", "a", (event) => {
+    exitLinkText = defaultExitLinkText;
+
+    const $link = $(event.currentTarget);
+    if (formChanged && !allowExitFrom($link)) {
+      event.preventDefault();
+      openExitNotification($link.attr("href"), $link.data("method"));
+    }
+  });
+
+  $("input, textarea, select", ".plans-form").on("change", () => {
+    formChanged = true;
+  });
+
+  // Custom handling for the header sign out so that it won't trigger the
+  // logout form submit and so that it changes the exit link text. This does
+  // not trigger the document link click listener because it has the
+  // data-method attribute to trigger a form submit event.
+  $(".header a.sign-out-link").on("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const $link = $(event.currentTarget);
+    exitLinkText = $link.text();
+    openExitNotification($link.attr("href"), $link.data("method"));
+  });
+});

app/packs/src/decidim/plans/info_modals.js

@@ -45,7 +45,10 @@
     $links.on("click.decidim-plans-info-modal", (ev) => {
       ev.preventDefault();
 
-      const $link = $(ev.target);
+      let $link = $(ev.target);
+      if (!$link.is("a")) {
+        $link = $link.closest("a")
+      }
       modal.show($link.attr("href"));
     });
   }

app/packs/src/decidim/plans/plans_form.js

@@ -2,13 +2,11 @@ import "src/decidim/plans/character_counter";
 import "src/decidim/plans/tab_focus";
 import "src/decidim/plans/reset_inputs";
 import "src/decidim/plans/info_modals";
+import "src/decidim/plans/exit_handler";
 
 ((exports) => {
   const $ = exports.$; // eslint-disable-line id-length
 
-  // Defines whether the user can exit the view without a warning or not
-  let canExit = false;
-
   const bindAddressLookup = ($container) => {
     const $map = $(".plans-map");
     const $address = $(".address-input-address", $container);
@@ -140,7 +138,6 @@ import "src/decidim/plans/info_modals";
    */
   const bindFormValidation = ($form) => {
     const $submits = $("[type='submit']", $form);
-    const $discardLink = $(".discard-draft-link", $form);
     const $submitMessage = $(".form-submit-message", $form);
 
     $submits.off("click.decidim-plans.form").on(
@@ -158,7 +155,6 @@ import "src/decidim/plans/info_modals";
         if (!ev.key || (ev.key === " " || ev.key === "Enter")) {
           ev.preventDefault();
 
-          canExit = true;
           $form.submit();
 
           const $firstField = $("input.is-invalid-input, textarea.is-invalid-input, select.is-invalid-input").first();
@@ -172,39 +168,9 @@ import "src/decidim/plans/info_modals";
         }
       }
     );
-
-    $discardLink.off("click.decidim-plans.form").on(
-      "click.decidim-plans.form",
-      () => {
-        canExit = true;
-      }
-    );
-  };
-
-  const bindAccidentalExitDisabling = () => {
-    $(document).on("click", "a, input, button", (ev) => {
-      const $target = $(ev.target);
-      if ($target.closest(".idea-form-container").length > 0) {
-        canExit = true;
-      } else if ($target.closest(".plan-form-container").length > 0) {
-        canExit = true;
-      } else if ($target.closest("#loginModal").length > 0) {
-        canExit = true;
-      }
-    });
-
-    window.onbeforeunload = () => {
-      if (canExit) {
-        return null;
-      }
-
-      return "";
-    }
   };
 
   $(() => {
-    bindAccidentalExitDisabling();
-
     $("form.plans-form").each((_i, el) => {
       const $form = $(el);
 

app/views/decidim/plans/plans/_exit_modal.html.erb

@@ -0,0 +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>
+    <button class="close-button" data-close aria-label="<%= t(".close_modal") %>" type="button">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="static__content">
+    <p><%= t(".message") %></p>
+  </div>
+
+  <div class="buttons buttons-row">
+    <a href="<%= plans_path %>" id="exit-notification-link" class="button primary">
+      <%= t(".buttons.exit") %>
+    </a>
+    <button type="button" class="button primary hollow" data-close>
+      <%= t(".buttons.cancel") %>
+    </button>
+  </div>
+</div>

app/views/decidim/plans/plans/edit.html.erb

@@ -1,12 +1,12 @@
 <div class="row columns back-link">
   <% if @plan.draft? %>
     <%= link_to plans_path, class: "action-link" do %>
-      <%= icon "arrow-left", class: "icon--small", role: "img" %>
+      <%= icon "arrow-left", class: "icon--small", role: "img", "aria-hidden": true %>
       <span><%= t("decidim.plans.plans.new.back") %></span>
     <% end %>
   <% else %>
     <%= link_to plan_path(@plan), class: "action-link" do %>
-      <%= icon "arrow-left", class: "icon--small", role: "img" %>
+      <%= icon "arrow-left", class: "icon--small", role: "img", "aria-hidden": true %>
       <span><%= t("decidim.plans.plans.edit.back") %></span>
     <% end %>
   <% end %>
@@ -63,4 +63,6 @@
   </div>
 </div>
 
+<%= render partial: "exit_modal" %>
+
 <%= javascript_pack_tag "decidim_plans_plans_form" %>

app/views/decidim/plans/plans/new.html.erb

@@ -1,6 +1,6 @@
 <div class="row columns back-link">
   <%= link_to plans_path, class: "action-link" do %>
-    <%= icon "arrow-left", class: "icon--small", role: "img" %>
+    <%= icon "arrow-left", class: "icon--small", role: "img", "aria-hidden": true %>
     <span><%= t("decidim.plans.plans.new.back") %></span>
   <% end %>
 </div>
@@ -46,6 +46,7 @@
 
 <% if user_signed_in? %>
   <% if user_public? %>
+    <%= render partial: "exit_modal" %>
     <%= javascript_pack_tag "decidim_plans_plans_form" %>
   <% else %>
     <% content_for :js_content do %>

config/locales/en.yml

@@ -275,8 +275,8 @@ en:
       plan_form:
         buttons:
           create: Preview
-          discard: Discard this draft
-          discard_confirmation: Are you sure you want to discard this draft?
+          discard: Delete draft
+          discard_confirmation: Are you sure you want to delete this draft?
           loading_message: Saving... Processing of images and attachments takes a while, please wait.
           save: Save
           save_draft: Save as draft
@@ -380,6 +380,13 @@ en:
             during this time. You will get notified once the evaluation is
             completed.
           title: The proposal is being evaluated
+        exit_modal:
+          buttons:
+            cancel: Cancel
+            exit: Exit page
+          close_modal: Close window
+          message: You are leaving this page even though you have made changes to the form. Are you sure you want to exit?
+          title: The form has unsaved changes
         form:
           attachment_legend: Add an attachment
           select_a_category: Select a category