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

81 lines
1.9 KiB
JavaScript

/**
* @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);