Issue #1872296 by nod_, Wim Leers, jessebeach: Edit should use core-provided Dialog (instead of its own).

core/modules/edit/css/edit.module.css

@@ -32,20 +32,6 @@
   padding: 0;
 }
 
-/**
- * Edit mode: modal.
- */
-#edit_modal {
-  z-index: 350;
-  position: fixed;
-  top: 40%;
-  left: 40%; /* LTR */
-}
-[dir="rtl"] #edit_modal {
-  left: auto;
-  right: 40%;
-}
-
 /**
  * Edit mode: type=direct.
  */

core/modules/edit/css/edit.theme.css

@@ -81,35 +81,6 @@
   transition: opacity .2s ease;
 }
 
-/**
- * Edit mode: modal.
- */
-#edit_modal {
-  background-color: white;
-  border: 1px solid #0199ff;
-  box-shadow: 3px 3px 5px #333;
-  font-family: 'Droid sans', 'Lucida Grande', sans-serif;
-}
-#edit_modal .main {
-  font-size: 130%;
-  margin: 25px;
-  padding-left: 40px; /* LTR */
-  background: transparent url('../images/attention.png') no-repeat;
-}
-[dir="rtl"] #edit_modal .main {
-  padding-left: 0;
-  padding-right: 40px;
-}
-#edit_modal .actions {
-  border-top: 1px solid #ddd;
-  padding: 0.25em 0.2em;
-  text-align: right; /* LTR */
-  background: #f5f5f5;
-}
-[dir="rtl"] #edit_modal .actions {
-  text-align: left;
-}
-
 /**
  * Edit mode: type=direct.
  */

core/modules/edit/edit.module

@@ -92,7 +92,6 @@ function edit_library_info() {
       $path . '/js/views/EntityView.js' => $options,
       $path . '/js/views/EntityToolbarView.js' => $options,
       $path . '/js/views/ContextualLinkView.js' => $options,
-      $path . '/js/views/ModalView.js' => $options,
       $path . '/js/views/FieldToolbarView.js' => $options,
       $path . '/js/views/EditorView.js' => $options,
       // Other.
@@ -115,6 +114,7 @@ function edit_library_info() {
       array('system', 'drupal.ajax'),
       array('system', 'drupal.debounce'),
       array('system', 'drupalSettings'),
+      array('system', 'drupal.dialog'),
     ),
   );
   $libraries['edit.editorWidget.form'] = array(

core/modules/edit/js/models/AppModel.js

@@ -6,7 +6,7 @@ Drupal.edit.AppModel = Backbone.Model.extend({
   defaults: {
     highlightedEditor: null,
     activeEditor: null,
-    // Reference to a ModalView-instance if a state change requires
+    // Reference to a Drupal.dialog instance if a state change requires
     // confirmation.
     activeModal: null
   }

core/modules/edit/js/theme.js

@@ -21,22 +21,6 @@ Drupal.theme.editBackstage = function (settings) {
   return html;
 };
 
-/**
- * Theme function for a modal of the Edit module.
- *
- * @return String
- *   The corresponding HTML.
- */
-Drupal.theme.editModal = function () {
-  var classes = 'edit-animate-slow edit-animate-invisible edit-animate-delay-veryfast';
-  var html = '';
-  html += '<div id="edit_modal" class="' + classes + '" role="dialog">';
-  html += '  <div class="main"><p></p></div>';
-  html += '  <div class="actions"></div>';
-  html += '</div>';
-  return html;
-};
-
 /**
  * Theme function for a toolbar container of the Edit module.
  *
@@ -133,7 +117,6 @@ Drupal.theme.editToolgroup = function (settings) {
  *     - String type: the type of the button (defaults to 'button')
  *     - Array classes: the classes of the button.
  *     - String label: the label of the button.
- *     - String action: sets a data-edit-modal-action attribute.
  * @return String
  *   The corresponding HTML.
  */
@@ -152,8 +135,7 @@ Drupal.theme.editButtons = function (settings) {
         attributes.push(attr + ((attrMap[attr]) ? '="' + attrMap[attr] + '"' : '' ));
       }
     }
-    html += '<button type="' + button.type + '" class="' + button.classes + '"'  + ' ' + attributes.join(' ');
-    html += ((button.action) ? ' data-edit-modal-action="' + button.action + '"' : '') + '>';
+    html += '<button type="' + button.type + '" class="' + button.classes + '"'  + ' ' + attributes.join(' ') + '>';
     html += button.label;
     html += '</button>';
   }

core/modules/edit/js/views/AppView.js

@@ -317,49 +317,62 @@ Drupal.edit.AppView = Backbone.View.extend({
    * @see acceptEditorStateChange()
    */
   confirmEntityDeactivation: function (entityModel) {
+    var that = this;
+    var discardDialog;
+
+    function closeDiscardDialog (action) {
+      discardDialog.close(action);
+      // The active modal has been removed.
+      that.model.set('activeModal', null);
+
+      // If the targetState is saving, the field must be saved, then the
+      // entity must be saved.
+      if (action === 'save') {
+        entityModel.set('state', 'committing', {confirmed : true});
+      }
+      else {
+        entityModel.set('state', 'deactivating', {confirmed : true});
+        // Editing has been canceled and the changes will not be saved. Mark
+        // the page for reload if the entityModel declares that it requires
+        // a reload.
+        if (entityModel.get('reload')) {
+          reload = true;
+          entityModel.set('reload', false);
+        }
+      }
+    }
+
     // Only instantiate if there isn't a modal instance visible yet.
     if (!this.model.get('activeModal')) {
-      var that = this;
-      var modal = new Drupal.edit.ModalView({
-        model: this.model,
-        message: Drupal.t('You have unsaved changes'),
+      discardDialog = Drupal.dialog('<div>' + Drupal.t('You have unsaved changes') + '</div>', {
+        title: Drupal.t('Discard changes?'),
+        dialogClass: 'edit-discard-modal',
+        resizable: false,
         buttons: [
           {
-            action: 'save',
-            type: 'submit',
-            classes: 'action-save edit-button',
-            label: Drupal.t('Save')
+            text: Drupal.t('Save'),
+            click: function() {
+              closeDiscardDialog('save');
+            }
           },
           {
-            action: 'discard',
-            classes: 'action-cancel edit-button',
-            label: Drupal.t('Discard changes')
-          }
-        ],
-        callback: function (action) {
-          // The active modal has been removed.
-          that.model.set('activeModal', null);
-          // If the targetState is saving, the field must be saved, then the
-          // entity must be saved.
-          if (action === 'save') {
-            entityModel.set('state', 'committing', {confirmed : true});
-          }
-          else {
-            entityModel.set('state', 'deactivating', {confirmed : true});
-            // Editing has been canceled and the changes will not be saved. Mark
-            // the page for reload if the entityModel declares that it requires
-            // a reload.
-            if (entityModel.get('reload')) {
-              reload = true;
-              entityModel.set('reload', false);
+            text: Drupal.t('Discard changes'),
+            click: function() {
+              closeDiscardDialog('discard');
             }
           }
-        }
+        ],
+        // Prevent this modal from being closed without the user making a choice
+        // as per http://stackoverflow.com/a/5438771.
+        closeOnEscape: false,
+        create: function () {
+          $(this).parent().find('.ui-dialog-titlebar-close').remove();
+        },
+        beforeClose: false
       });
-      this.model.set('activeModal', modal);
-      // The modal will set the activeModal property on the model when rendering
-      // to prevent multiple modals from being instantiated.
-      modal.render();
+      this.model.set('activeModal', discardDialog);
+
+      discardDialog.showModal();
     }
   },
 

core/modules/edit/js/views/ModalView.js

@@ -1,80 +0,0 @@
-/**
- * @file
- * A Backbone View that provides an interactive modal.
- */
-(function ($, Backbone, Drupal) {
-
-"use strict";
-
-Drupal.edit.ModalView = Backbone.View.extend({
-
-  message: null,
-  buttons: null,
-  callback: null,
-  $elementsToHide: null,
-
-  events: {
-    'click button': 'onButtonClick'
-  },
-
-  /**
-   * {@inheritdoc}
-   *
-   * @param Object options
-   *   An object with the following keys:
-   *   - String message: a message to show in the modal.
-   *   - Array buttons: a set of buttons with 'action's defined, ready to be
-         passed to Drupal.theme.editButtons().
-   *   - Function callback: a callback that will receive the 'action' of the
-   *     clicked button.
-   *
-   * @see Drupal.theme.editModal()
-   * @see Drupal.theme.editButtons()
-   */
-  initialize: function (options) {
-    this.message = options.message;
-    this.buttons = options.buttons;
-    this.callback = options.callback;
-  },
-
-  /**
-   * {@inheritdoc}
-   */
-  render: function () {
-    this.setElement(Drupal.theme('editModal', {}));
-    this.$el.appendTo('body');
-    // Template.
-    this.$('.main p').text(this.message);
-    var $actions = $(Drupal.theme('editButtons', { 'buttons' : this.buttons}));
-    this.$('.actions').append($actions);
-
-    // Show the modal with an animation.
-    var that = this;
-    setTimeout(function () {
-      that.$el.removeClass('edit-animate-invisible');
-    }, 0);
-  },
-
-  /**
-   * Passes the clicked button action to the callback; closes the modal.
-   *
-   * @param jQuery event
-   */
-  onButtonClick: function (event) {
-    event.stopPropagation();
-    event.preventDefault();
-
-    // Remove after animation.
-    var that = this;
-    this.$el
-      .addClass('edit-animate-invisible')
-      .on(Drupal.edit.util.constants.transitionEnd, function (e) {
-        that.remove();
-      });
-
-    var action = $(event.target).attr('data-edit-modal-action');
-    return this.callback(action);
-  }
-});
-
-})(jQuery, Backbone, Drupal);