156 lines
4.2 KiB
JavaScript
156 lines
4.2 KiB
JavaScript
/**
|
|
* @file
|
|
* Provides overridable theme functions for all of Edit's client-side HTML.
|
|
*/
|
|
(function($, Drupal) {
|
|
|
|
"use strict";
|
|
|
|
/**
|
|
* Theme function for the overlay of the Edit module.
|
|
*
|
|
* @param settings
|
|
* An object with the following keys:
|
|
* - None.
|
|
* @return
|
|
* The corresponding HTML.
|
|
*/
|
|
Drupal.theme.editOverlay = function(settings) {
|
|
var html = '';
|
|
html += '<div id="edit_overlay" />';
|
|
return html;
|
|
};
|
|
|
|
/**
|
|
* Theme function for a "backstage" for the Edit module.
|
|
*
|
|
* @param settings
|
|
* An object with the following keys:
|
|
* - id: the id to apply to the backstage.
|
|
* @return
|
|
* The corresponding HTML.
|
|
*/
|
|
Drupal.theme.editBackstage = function(settings) {
|
|
var html = '';
|
|
html += '<div id="' + settings.id + '" />';
|
|
return html;
|
|
};
|
|
|
|
/**
|
|
* Theme function for a modal of the Edit module.
|
|
*
|
|
* @param settings
|
|
* An object with the following keys:
|
|
* - None.
|
|
* @return
|
|
* The corresponding HTML.
|
|
*/
|
|
Drupal.theme.editModal = function(settings) {
|
|
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.
|
|
*
|
|
* @param settings
|
|
* An object with the following keys:
|
|
* - id: the id to apply to the toolbar container.
|
|
* @return
|
|
* The corresponding HTML.
|
|
*/
|
|
Drupal.theme.editToolbarContainer = function(settings) {
|
|
var html = '';
|
|
html += '<div id="' + settings.id + '" class="edit-toolbar-container edit-animate-invisible edit-animate-only-visibility">';
|
|
html += ' <div class="edit-toolbar-heightfaker edit-animate-fast">';
|
|
html += ' <div class="edit-toolbar primary" />';
|
|
html += ' </div>';
|
|
html += '</div>';
|
|
return html;
|
|
};
|
|
|
|
/**
|
|
* Theme function for a toolbar toolgroup of the Edit module.
|
|
*
|
|
* @param settings
|
|
* An object with the following keys:
|
|
* - id: (optional) the id of the toolgroup
|
|
* - classes: the class of the toolgroup.
|
|
* - buttons: @see Drupal.theme.prototype.editButtons().
|
|
* @return
|
|
* The corresponding HTML.
|
|
*/
|
|
Drupal.theme.editToolgroup = function(settings) {
|
|
var classes = 'edit-toolgroup edit-animate-slow edit-animate-invisible edit-animate-delay-veryfast';
|
|
var html = '';
|
|
html += '<div class="' + classes + ' ' + settings.classes + '"';
|
|
if (settings.id) {
|
|
html += ' id="' + settings.id + '"';
|
|
}
|
|
html += '>';
|
|
html += Drupal.theme('editButtons', { buttons: settings.buttons });
|
|
html += '</div>';
|
|
return html;
|
|
};
|
|
|
|
/**
|
|
* Theme function for buttons of the Edit module.
|
|
*
|
|
* Can be used for the buttons both in the toolbar toolgroups and in the modal.
|
|
*
|
|
* @param settings
|
|
* An object with the following keys:
|
|
* - buttons: an array of objects with the following keys:
|
|
* - type: the type of the button (defaults to 'button')
|
|
* - classes: the classes of the button.
|
|
* - label: the label of the button.
|
|
* - action: sets a data-edit-modal-action attribute.
|
|
* @return
|
|
* The corresponding HTML.
|
|
*/
|
|
Drupal.theme.editButtons = function(settings) {
|
|
var html = '';
|
|
for (var i = 0; i < settings.buttons.length; i++) {
|
|
var button = settings.buttons[i];
|
|
if (!button.hasOwnProperty('type')) {
|
|
button.type = 'button';
|
|
}
|
|
|
|
html += '<button type="' + button.type + '" class="' + button.classes + '"';
|
|
html += (button.action) ? ' data-edit-modal-action="' + button.action + '"' : '';
|
|
html += '>';
|
|
html += button.label;
|
|
html += '</button>';
|
|
}
|
|
return html;
|
|
};
|
|
|
|
/**
|
|
* Theme function for a form container of the Edit module.
|
|
*
|
|
* @param settings
|
|
* An object with the following keys:
|
|
* - id: the id to apply to the toolbar container.
|
|
* - loadingMsg: The message to show while loading.
|
|
* @return
|
|
* The corresponding HTML.
|
|
*/
|
|
Drupal.theme.editFormContainer = function(settings) {
|
|
var html = '';
|
|
html += '<div id="' + settings.id + '" class="edit-form-container">';
|
|
html += ' <div class="edit-form">';
|
|
html += ' <div class="placeholder">';
|
|
html += settings.loadingMsg;
|
|
html += ' </div>';
|
|
html += ' </div>';
|
|
html += '</div>';
|
|
return html;
|
|
};
|
|
|
|
})(jQuery, Drupal);
|