Merge pull request #3942 from samvera/add-modal-confirmation-for-tabs

Warn user with pop-up modal of unsaved changes
samvera · Sep 9, 2019 · 16c8508 · 16c8508
2 parents c8ab40e + 5b47ebf
commit 16c8508
Show file tree

Hide file tree

Showing 13 changed files with 252 additions and 91 deletions.
diff --git a/app/assets/javascripts/hyrax/nav_safety.js b/app/assets/javascripts/hyrax/nav_safety.js
@@ -4,7 +4,9 @@
 // - Add the nav-safety class to the form element.
 
 Blacklight.onLoad(function() {
+  var clickedTab;
   $('.nav-safety-confirm').on('click', function(evt) {
+    clickedTab = $(this).attr('href');
     var dirtyData = $('#nav-safety-modal[dirtyData=true]');
     if (dirtyData.length > 0) {
       evt.preventDefault();
@@ -14,9 +16,9 @@ Blacklight.onLoad(function() {
   });
 
   $('#nav-safety-dismiss').on('click', function(evt) {
-    // evt.preventDefault();
     nav_safety_off();
-    // $('#nav-safety-change-tab').modal('hide');
+    // Navigate away from active tab to clicked tab
+    window.location = clickedTab;
   });
 
   $('form.nav-safety').on('change', function(evt) {

diff --git a/app/views/hyrax/admin/admin_sets/_form.html.erb b/app/views/hyrax/admin/admin_sets/_form.html.erb
@@ -1,24 +1,25 @@
+    <%= render 'shared/nav_safety_modal' %>
     <div class="panel panel-default tabs" id="admin-set-controls">
       <ul class="nav nav-tabs" role="tablist">
         <li class="active">
-          <a href="#description" role="tab" data-toggle="tab"><%= t('.tabs.description') %></a>
+          <a href="#description" role="tab" data-toggle="tab" class="nav-safety-confirm"><%= t('.tabs.description') %></a>
         </li>
         <% if @form.persisted? %>
           <li>
-            <a href="#participants" role="tab" data-toggle="tab"><%= t('.tabs.participants') %></a>
+            <a href="#participants" role="tab" data-toggle="tab" class="nav-safety-confirm"><%= t('.tabs.participants') %></a>
           </li>
           <li>
-            <a href="#visibility" role="tab" data-toggle="tab"><%= t('.tabs.visibility') %></a>
+            <a href="#visibility" role="tab" data-toggle="tab" class="nav-safety-confirm"><%= t('.tabs.visibility') %></a>
           </li>
           <li>
-            <a href="#workflow" role="tab" data-toggle="tab"><%= t('.tabs.workflow') %></a>
+            <a href="#workflow" role="tab" data-toggle="tab" class="nav-safety-confirm"><%= t('.tabs.workflow') %></a>
           </li>
         <% end %>
       </ul>
       <div class="tab-content">
         <div id="description" class="tab-pane active">
           <div class="panel panel-default labels">
-            <%= simple_form_for @form, url: [hyrax, :admin, @form] do |f| %>
+            <%= simple_form_for @form, url: [hyrax, :admin, @form], html: { class: 'nav-safety' } do |f| %>
               <div class="panel-body">
                 <%= render 'form_metadata', f: f %>
 

diff --git a/app/views/hyrax/admin/admin_sets/_form_visibility.html.erb b/app/views/hyrax/admin/admin_sets/_form_visibility.html.erb
@@ -1,7 +1,8 @@
           <div id="visibility" class="tab-pane">
             <div class="panel panel-default labels">
               <%= simple_form_for @form.permission_template,
-                                  url: [hyrax, :admin, @form, :permission_template] do |f| %>
+                                  url: [hyrax, :admin, @form, :permission_template],
+                                  html: { class: 'nav-safety' } do |f| %>
                 <div class="panel-body">
                   <p><%= t('.page_description') %></p>
                   <h3><%= t('.release.title') %></h3>

diff --git a/app/views/hyrax/admin/admin_sets/_form_workflow.erb b/app/views/hyrax/admin/admin_sets/_form_workflow.erb
@@ -2,7 +2,7 @@
                   <div class="panel panel-default labels">
                     <%= simple_form_for @form.permission_template,
                       url: [hyrax, :admin, @form, :permission_template],
-                      html: { id: 'form_workflows' } do |f| %>
+                      html: { id: 'form_workflows', class: 'nav-safety' } do |f| %>
                       <% if f.object.available_workflows.any? %>
                         <div class="panel-body">
                           <p><%= t('.page_description') %></p>

diff --git a/app/views/hyrax/dashboard/collections/_form.html.erb b/app/views/hyrax/dashboard/collections/_form.html.erb
@@ -1,28 +1,29 @@
+<%= render "shared/nav_safety_modal" %>
 <div class="panel panel-default tabs" id="collection-edit-controls">
   <ul class="nav nav-tabs" role="tablist">
     <li class="active">
-      <a href="#description" role="tab" data-toggle="tab"><%= t('.tabs.description') %></a>
+      <a href="#description" role="tab" data-toggle="tab" class="nav-safety-confirm"><%= t('.tabs.description') %></a>
     </li>
     <% if @form.persisted? %>
       <% if @collection.brandable? %>
       <li>
-        <a href="#branding" role="tab" data-toggle="tab"><%= t('.tabs.branding') %></a>
+        <a href="#branding" role="tab" data-toggle="tab" class="nav-safety-confirm"><%= t('.tabs.branding') %></a>
       </li>
       <% end %>
       <% if @collection.discoverable? %>
       <li>
-        <a href="#discovery" role="tab" data-toggle="tab"><%= t('.tabs.discovery') %></a>
+        <a href="#discovery" role="tab" data-toggle="tab" class="nav-safety-confirm"><%= t('.tabs.discovery') %></a>
       </li>
       <% end %>
       <% if @collection.sharable? %>
       <li>
-        <a href="#sharing" role="tab" data-toggle="tab"><%= t('.tabs.sharing') %></a>
+        <a href="#sharing" role="tab" data-toggle="tab" class="nav-safety-confirm"><%= t('.tabs.sharing') %></a>
       </li>
       <% end %>
     <% end %>
   </ul>
 
-  <%= simple_form_for @form, url: [hyrax, :dashboard, @form], html: { class: 'editor' } do |f| %>
+  <%= simple_form_for @form, url: [hyrax, :dashboard, @form], html: { class: 'editor nav-safety' } do |f| %>
     <div class="tab-content">
       <div id="description" class="tab-pane active">
         <div class="panel panel-default labels">

diff --git a/app/views/hyrax/file_sets/_form.html.erb b/app/views/hyrax/file_sets/_form.html.erb
@@ -1,4 +1,4 @@
-<%= simple_form_for [main_app, curation_concern], html: { multipart: true } do |f| %>
+<%= simple_form_for [main_app, curation_concern], html: { multipart: true, class: 'nav-safety' } do |f| %>
   <fieldset class="required">
     <span class="control-label">
       <%= label_tag 'file_set[title][]', t('.title'),  class: "string optional" %>

diff --git a/app/views/hyrax/file_sets/_permission.html.erb b/app/views/hyrax/file_sets/_permission.html.erb
@@ -2,7 +2,8 @@
     <%= simple_form_for [main_app, file_set],
                         html: { multipart: true,
                                 id: 'permission',
-                                data: { param_key: file_set.model_name.param_key }
+                                data: { param_key: file_set.model_name.param_key },
+                                class: 'nav-safety'
                               } do |f| %>
       <%= hidden_field_tag('redirect_tab', 'permissions') %>
       <%= render "permission_form", f: f %>

diff --git a/app/views/hyrax/file_sets/_versioning.html.erb b/app/views/hyrax/file_sets/_versioning.html.erb
@@ -1,6 +1,6 @@
 <div id="versioning_display" class="tab-pane">
   <h2><%= t('.header') %></h2>
-  <%= simple_form_for [main_app, curation_concern], html: { multipart: true } do |f| %>
+  <%= simple_form_for [main_app, curation_concern], html: { multipart: true, class: 'nav-safety' } do |f| %>
     <%= hidden_field_tag('redirect_tab', 'versions') %>
     <h3><%= t('.upload') %></h3>
     <%= f.input :files, as: :multifile, wrapper: :vertical_file_input, required: true %>
@@ -10,7 +10,7 @@
   <% end %>
 
   <%= form_for [main_app, curation_concern],
-               html: { class: 'edit_file_set_previous_version' } do |f| %>
+               html: { class: 'edit_file_set_previous_version nav-safety' } do |f| %>
     <h3><%= t('.restore') %></h3>
     <% @version_list.each do |version| %>
       <div class="radio">

diff --git a/app/views/hyrax/file_sets/edit.html.erb b/app/views/hyrax/file_sets/edit.html.erb
@@ -1,3 +1,4 @@
+<%= render "shared/nav_safety_modal" %>
 <% provide :page_title, curation_concern_page_title(curation_concern) %>
 <% provide :page_header do %>
   <h1><span class="fa fa-edit" aria-hidden="true"></span><%= t('.header', file_set: curation_concern) %></h1>
@@ -11,13 +12,13 @@
     <div class="panel panel-default tabs">
       <ul class="nav nav-tabs" role="tablist">
         <li id="edit_descriptions_link" class="active">
-          <a href="#descriptions_display" data-toggle="tab"><i class="fa fa-tags" aria-hidden="true"></i></span> <%= t('.descriptions') %></a>
+          <a href="#descriptions_display" data-toggle="tab" class="nav-safety-confirm"><i class="fa fa-tags" aria-hidden="true"></i></span> <%= t('.descriptions') %></a>
         </li>
         <li id="edit_versioning_link">
-          <a href="#versioning_display" data-toggle="tab"><i class="fa fa-sitemap" aria-hidden="true"></i> <%= t('.versions') %></a>
+          <a href="#versioning_display" data-toggle="tab" class="nav-safety-confirm"><i class="fa fa-sitemap" aria-hidden="true"></i> <%= t('.versions') %></a>
         </li>
         <li id="edit_permissions_link">
-          <a href="#permissions_display" data-toggle="tab"><i class="fa fa-key" aria-hidden="true"></i> <%= t('.permissions') %></a>
+          <a href="#permissions_display" data-toggle="tab" class="nav-safety-confirm"><i class="fa fa-key" aria-hidden="true"></i> <%= t('.permissions') %></a>
         </li>
       </ul>
       <div class="panel-body">

diff --git a/app/views/hyrax/pages/_form.html.erb b/app/views/hyrax/pages/_form.html.erb
@@ -1,82 +1,83 @@
+<%= render "shared/nav_safety_modal" %>
 <div class="panel panel-default tabs">
   <ul class="nav nav-tabs" role="tablist">
     <li class="active">
-      <a href="#about" role="tab" data-toggle="tab"><%= t(:'hyrax.pages.tabs.about_page') %></a>
+      <a href="#about" role="tab" data-toggle="tab" class="nav-safety-confirm"><%= t(:'hyrax.pages.tabs.about_page') %></a>
     </li>
     <li>
-      <a href="#help" role="tab" data-toggle="tab"><%= t(:'hyrax.pages.tabs.help_page') %></a>
+      <a href="#help" role="tab" data-toggle="tab" class="nav-safety-confirm"><%= t(:'hyrax.pages.tabs.help_page') %></a>
     </li>
     <li>
-      <a href="#agreement" role="tab" data-toggle="tab"><%= t(:'hyrax.pages.tabs.agreement_page') %></a>
+      <a href="#agreement" role="tab" data-toggle="tab" class="nav-safety-confirm"><%= t(:'hyrax.pages.tabs.agreement_page') %></a>
     </li>
     <li>
-      <a href="#terms" role="tab" data-toggle="tab"><%= t(:'hyrax.pages.tabs.terms_page') %></a>
+      <a href="#terms" role="tab" data-toggle="tab" class="nav-safety-confirm"><%= t(:'hyrax.pages.tabs.terms_page') %></a>
     </li>
   </ul>
   <div class="tab-content">
-    <div id="about" class="tab-pane active">
-      <div class="panel panel-default labels">
-        <%= simple_form_for ContentBlock.for(:about), url: hyrax.page_path(ContentBlock.for(:about)) do |f| %>
-          <div class="panel-body">
-            <div class="field form-group">
-                <%= f.label :about %><br />
-                <%= f.text_area :about, value: f.object.value, class: 'form-control tinymce', rows: 20, cols: 120 %>
-            </div>
+  <div id="about" class="tab-pane active">
+    <div class="panel panel-default labels">
+      <%= simple_form_for ContentBlock.for(:about), url: hyrax.page_path(ContentBlock.for(:about)), html: { class: 'nav-safety' } do |f| %>
+        <div class="panel-body">
+          <div class="field form-group">
+              <%= f.label :about %><br />
+              <%= f.text_area :about, value: f.object.value, class: 'form-control tinymce', rows: 20, cols: 120 %>
           </div>
-          <div class="panel-footer">
-            <%= link_to t(:'hyrax.pages.cancel'), hyrax.admin_admin_sets_path, class: 'btn btn-default pull-right' %>
-            <%= f.button :submit, class: 'btn btn-primary pull-right' %>
-          </div>
-        <% end %>
-      </div>
+        </div>
+        <div class="panel-footer">
+          <%= link_to t(:'hyrax.pages.cancel'), hyrax.admin_admin_sets_path, class: 'btn btn-default pull-right' %>
+          <%= f.button :submit, class: 'btn btn-primary pull-right' %>
+        </div>
+      <% end %>
     </div>
-    <div id="help" class="tab-pane">
-      <div class="panel panel-default labels">
-        <%= simple_form_for ContentBlock.for(:help), url: hyrax.page_path(ContentBlock.for(:help)) do |f| %>
-          <div class="panel-body">
-            <div class="field form-group">
-                <%= f.label :help %><br />
-                <%= f.text_area :help, value: f.object.value, class: 'form-control tinymce', rows: 20, cols: 120 %>
-            </div>
-          </div>
-          <div class="panel-footer">
-            <%= link_to t(:'hyrax.pages.cancel'), hyrax.admin_admin_sets_path, class: 'btn btn-default pull-right' %>
-            <%= f.button :submit, class: 'btn btn-primary pull-right' %>
+  </div>
+  <div id="help" class="tab-pane">
+    <div class="panel panel-default labels">
+      <%= simple_form_for ContentBlock.for(:help), url: hyrax.page_path(ContentBlock.for(:help)), html: { class: 'nav-safety' } do |f| %>
+        <div class="panel-body">
+          <div class="field form-group">
+              <%= f.label :help %><br />
+              <%= f.text_area :help, value: f.object.value, class: 'form-control tinymce', rows: 20, cols: 120 %>
           </div>
-        <% end %>
-      </div>
+        </div>
+        <div class="panel-footer">
+          <%= link_to t(:'hyrax.pages.cancel'), hyrax.admin_admin_sets_path, class: 'btn btn-default pull-right' %>
+          <%= f.button :submit, class: 'btn btn-primary pull-right' %>
+        </div>
+      <% end %>
     </div>
-    <div id="agreement" class="tab-pane">
-      <div class="panel panel-default labels">
-        <%= simple_form_for ContentBlock.for(:agreement), url: hyrax.page_path(ContentBlock.for(:agreement)) do |f| %>
-          <div class="panel-body">
-            <div class="field form-group">
-                <%= f.label :agreement %><br />
-                <%= f.text_area :agreement, value: f.object.value, class: 'form-control tinymce', rows: 20, cols: 120 %>
-            </div>
-          </div>
-          <div class="panel-footer">
-            <%= link_to t(:'hyrax.pages.cancel'), hyrax.admin_admin_sets_path, class: 'btn btn-default pull-right' %>
-            <%= f.button :submit, class: 'btn btn-primary pull-right' %>
+  </div>
+  <div id="agreement" class="tab-pane">
+    <div class="panel panel-default labels">
+      <%= simple_form_for ContentBlock.for(:agreement), url: hyrax.page_path(ContentBlock.for(:agreement)), html: { class: 'nav-safety' } do |f| %>
+        <div class="panel-body">
+          <div class="field form-group">
+              <%= f.label :agreement %><br />
+              <%= f.text_area :agreement, value: f.object.value, class: 'form-control tinymce', rows: 20, cols: 120 %>
           </div>
-        <% end %>
-      </div>
+        </div>
+        <div class="panel-footer">
+          <%= link_to t(:'hyrax.pages.cancel'), hyrax.admin_admin_sets_path, class: 'btn btn-default pull-right' %>
+          <%= f.button :submit, class: 'btn btn-primary pull-right' %>
+        </div>
+      <% end %>
     </div>
-    <div id="terms" class="tab-pane">
-      <div class="panel panel-default labels">
-        <%= simple_form_for ContentBlock.for(:terms), url: hyrax.page_path(ContentBlock.for(:terms)) do |f| %>
-          <div class="panel-body">
-            <div class="field form-group">
-                <%= f.label :terms %><br />
-                <%= f.text_area :terms, value: f.object.value, class: 'form-control tinymce', rows: 20, cols: 120 %>
-            </div>
-          </div>
-          <div class="panel-footer">
-            <%= link_to t(:'hyrax.pages.cancel'), hyrax.admin_admin_sets_path, class: 'btn btn-default pull-right' %>
-            <%= f.button :submit, class: 'btn btn-primary pull-right' %>
+  </div>
+  <div id="terms" class="tab-pane">
+    <div class="panel panel-default labels">
+      <%= simple_form_for ContentBlock.for(:terms), url: hyrax.page_path(ContentBlock.for(:terms)), html: { class: 'nav-safety' } do |f| %>
+        <div class="panel-body">
+          <div class="field form-group">
+              <%= f.label :terms %><br />
+              <%= f.text_area :terms, value: f.object.value, class: 'form-control tinymce', rows: 20, cols: 120 %>
           </div>
-        <% end %>
-      </div>
+        </div>
+        <div class="panel-footer">
+          <%= link_to t(:'hyrax.pages.cancel'), hyrax.admin_admin_sets_path, class: 'btn btn-default pull-right' %>
+          <%= f.button :submit, class: 'btn btn-primary pull-right' %>
+        </div>
+      <% end %>
     </div>
   </div>
 </div>
+<%= tinymce :content_block %>