core/modules/edit/css/edit.module.css | 14 ------ core/modules/edit/css/edit.theme.css | 29 ----------- core/modules/edit/edit.module | 2 +- core/modules/edit/images/attention.png | 4 -- core/modules/edit/js/models/AppModel.js | 2 +- core/modules/edit/js/theme.js | 20 +------- core/modules/edit/js/views/AppView.js | 81 ++++++++++++++++++------------- core/modules/edit/js/views/ModalView.js | 80 ------------------------------ 8 files changed, 50 insertions(+), 182 deletions(-) diff --git a/core/modules/edit/css/edit.module.css b/core/modules/edit/css/edit.module.css index 195c563..17f4fd9 100644 --- a/core/modules/edit/css/edit.module.css +++ b/core/modules/edit/css/edit.module.css @@ -33,20 +33,6 @@ } /** - * 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. */ .edit-validation-errors { diff --git a/core/modules/edit/css/edit.theme.css b/core/modules/edit/css/edit.theme.css index efd348d..febb435 100644 --- a/core/modules/edit/css/edit.theme.css +++ b/core/modules/edit/css/edit.theme.css @@ -82,35 +82,6 @@ } /** - * 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. */ .edit-validation-errors .messages.error { diff --git a/core/modules/edit/edit.module b/core/modules/edit/edit.module index a09889c..071073c 100644 --- a/core/modules/edit/edit.module +++ b/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( diff --git a/core/modules/edit/images/attention.png b/core/modules/edit/images/attention.png deleted file mode 100644 index 6a35d1d..0000000 --- a/core/modules/edit/images/attention.png +++ /dev/null @@ -1,4 +0,0 @@ -PNG - - IHDR *}`PLTEl՟FZݱ|В8ʂx՜nϏ۫@EN;[cgUH7 tRNS =g- Su- 4_IDATx^}ʇ @Qzn/g!ul6 ; 0!f>>Ǐ kν_΁j㜻!0-@>8,i vҤrlWn?B(ijk*yT%Pvs=b_v>@?k& -a|NciKBFUD^']d`5+5P :IENDB` \ No newline at end of file diff --git a/core/modules/edit/js/models/AppModel.js b/core/modules/edit/js/models/AppModel.js index 2489949..fc276fb 100644 --- a/core/modules/edit/js/models/AppModel.js +++ b/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 } diff --git a/core/modules/edit/js/theme.js b/core/modules/edit/js/theme.js index 459eb3a..2228eb5 100644 --- a/core/modules/edit/js/theme.js +++ b/core/modules/edit/js/theme.js @@ -22,22 +22,6 @@ Drupal.theme.editBackstage = function (settings) { }; /** - * 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 += ''; - return html; -}; - -/** * Theme function for a toolbar container of the Edit module. * * @param Object settings @@ -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 += ''; } diff --git a/core/modules/edit/js/views/AppView.js b/core/modules/edit/js/views/AppView.js index 5a5c2d3..fa8f861 100644 --- a/core/modules/edit/js/views/AppView.js +++ b/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('
' + Drupal.t('You have unsaved changes') + '
', { + 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(); } }, diff --git a/core/modules/edit/js/views/ModalView.js b/core/modules/edit/js/views/ModalView.js deleted file mode 100644 index 9f096ba..0000000 --- a/core/modules/edit/js/views/ModalView.js +++ /dev/null @@ -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);