84 lines
2.1 KiB
JavaScript
84 lines
2.1 KiB
JavaScript
/**
|
|
* @file
|
|
* A Backbone View that provides an interactive modal.
|
|
*/
|
|
(function($, Backbone, Drupal) {
|
|
|
|
"use strict";
|
|
|
|
Drupal.edit = Drupal.edit || {};
|
|
Drupal.edit.views = Drupal.edit.views || {};
|
|
Drupal.edit.views.ModalView = Backbone.View.extend({
|
|
|
|
message: null,
|
|
buttons: null,
|
|
callback: null,
|
|
$elementsToHide: null,
|
|
|
|
events: {
|
|
'click button': 'onButtonClick'
|
|
},
|
|
|
|
/**
|
|
* Implements Backbone Views' initialize() function.
|
|
*
|
|
* @param options
|
|
* An object with the following keys:
|
|
* - message: a message to show in the modal.
|
|
* - buttons: a set of buttons with 'action's defined, ready to be passed to
|
|
* Drupal.theme.editButtons().
|
|
* - 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;
|
|
},
|
|
|
|
/**
|
|
* Implements Backbone Views' render() function.
|
|
*/
|
|
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);
|
|
},
|
|
|
|
/**
|
|
* When the user clicks on any of the buttons, the modal should be removed
|
|
* and the result should be passed to the callback.
|
|
*
|
|
* @param 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);
|