3 * A Backbone View that provides an interactive toolbar (1 per in-place editor).
6 (function ($, _, Backbone, Drupal) {
10 Drupal.quickedit.FieldToolbarView = Backbone.View.extend(/** @lends Drupal.quickedit.FieldToolbarView# */{
13 * The edited element, as indicated by EditorView.getEditedElement.
20 * A reference to the in-place editor.
22 * @type {Drupal.quickedit.EditorView}
34 * @augments Backbone.View
36 * @param {object} options
37 * Options object to construct the field toolbar.
38 * @param {jQuery} options.$editedElement
39 * The element being edited.
40 * @param {Drupal.quickedit.EditorView} options.editorView
41 * The EditorView the toolbar belongs to.
43 initialize: function (options) {
44 this.$editedElement = options.$editedElement;
45 this.editorView = options.editorView;
50 this.$root = this.$el;
52 // Generate a DOM-compatible ID for the form container DOM element.
53 this._id = 'quickedit-toolbar-for-' + this.model.id.replace(/[\/\[\]]/g, '_');
55 this.listenTo(this.model, 'change:state', this.stateChange);
61 * @return {Drupal.quickedit.FieldToolbarView}
62 * The current FieldToolbarView.
65 // Render toolbar and set it as the view's element.
66 this.setElement($(Drupal.theme('quickeditFieldToolbar', {
70 // Attach to the field toolbar $root element in the entity toolbar.
71 this.$el.prependTo(this.$root);
77 * Determines the actions to take given a change of state.
79 * @param {Drupal.quickedit.FieldModel} model
80 * The quickedit FieldModel
81 * @param {string} state
82 * The state of the associated field. One of
83 * {@link Drupal.quickedit.FieldModel.states}.
85 stateChange: function (model, state) {
86 var from = model.previous('state');
93 // Remove the view's existing element if we went to the 'activating'
94 // state or later, because it will be recreated. Not doing this would
95 // result in memory leaks.
96 if (from !== 'inactive' && from !== 'highlighted') {
108 if (this.editorView.getQuickEditUISettings().fullWidthToolbar) {
109 this.$el.addClass('quickedit-toolbar-fullwidth');
112 if (this.editorView.getQuickEditUISettings().unifiedToolbar) {
113 this.insertWYSIWYGToolGroups();
135 * Insert WYSIWYG markup into the associated toolbar.
137 insertWYSIWYGToolGroups: function () {
139 .append(Drupal.theme('quickeditToolgroup', {
140 id: this.getFloatedWysiwygToolgroupId(),
141 classes: ['wysiwyg-floated', 'quickedit-animate-slow', 'quickedit-animate-invisible', 'quickedit-animate-delay-veryfast'],
144 .append(Drupal.theme('quickeditToolgroup', {
145 id: this.getMainWysiwygToolgroupId(),
146 classes: ['wysiwyg-main', 'quickedit-animate-slow', 'quickedit-animate-invisible', 'quickedit-animate-delay-veryfast'],
150 // Animate the toolgroups into visibility.
151 this.show('wysiwyg-floated');
152 this.show('wysiwyg-main');
156 * Retrieves the ID for this toolbar's container.
158 * Only used to make sane hovering behavior possible.
161 * A string that can be used as the ID for this toolbar's container.
164 return 'quickedit-toolbar-for-' + this._id;
168 * Retrieves the ID for this toolbar's floating WYSIWYG toolgroup.
170 * Used to provide an abstraction for any WYSIWYG editor to plug in.
173 * A string that can be used as the ID.
175 getFloatedWysiwygToolgroupId: function () {
176 return 'quickedit-wysiwyg-floated-toolgroup-for-' + this._id;
180 * Retrieves the ID for this toolbar's main WYSIWYG toolgroup.
182 * Used to provide an abstraction for any WYSIWYG editor to plug in.
185 * A string that can be used as the ID.
187 getMainWysiwygToolgroupId: function () {
188 return 'quickedit-wysiwyg-main-toolgroup-for-' + this._id;
194 * @param {string} toolgroup
198 * The toolgroup element.
200 _find: function (toolgroup) {
201 return this.$el.find('.quickedit-toolgroup.' + toolgroup);
207 * @param {string} toolgroup
210 show: function (toolgroup) {
211 var $group = this._find(toolgroup);
212 // Attach a transitionEnd event handler to the toolbar group so that
213 // update events can be triggered after the animations have ended.
214 $group.on(Drupal.quickedit.util.constants.transitionEnd, function (event) {
215 $group.off(Drupal.quickedit.util.constants.transitionEnd);
217 // The call to remove the class and start the animation must be started in
218 // the next animation frame or the event handler attached above won't be
220 window.setTimeout(function () {
221 $group.removeClass('quickedit-animate-invisible');
227 })(jQuery, _, Backbone, Drupal);