X-Git-Url: http://aleph1.co.uk/gitweb/?a=blobdiff_plain;f=web%2Fcore%2Fmodules%2Fckeditor%2Fjs%2Fviews%2FVisualView.js;h=98080158251ec46194fcd9fb6e70385434e83e60;hb=9917807b03b64faf00f6a1f29dcb6eafc454efa5;hp=2d8042ebbf68d37fb1df90d6cf803c9edead8ed6;hpb=a2bd1bf0c2c1f1a17d188f4dc0726a45494cefae;p=yaffs-website diff --git a/web/core/modules/ckeditor/js/views/VisualView.js b/web/core/modules/ckeditor/js/views/VisualView.js index 2d8042ebb..980801582 100644 --- a/web/core/modules/ckeditor/js/views/VisualView.js +++ b/web/core/modules/ckeditor/js/views/VisualView.js @@ -1,14 +1,12 @@ /** - * @file - * A Backbone View that provides the visual UX view of CKEditor toolbar - * configuration. - */ +* DO NOT EDIT THIS FILE. +* See the following change record for more information, +* https://www.drupal.org/node/2815083 +* @preserve +**/ (function (Drupal, Backbone, $) { - - 'use strict'; - - Drupal.ckeditor.VisualView = Backbone.View.extend(/** @lends Drupal.ckeditor.VisualView# */{ + Drupal.ckeditor.VisualView = Backbone.View.extend({ events: { 'click .ckeditor-toolbar-group-name': 'onGroupNameClick', @@ -16,189 +14,87 @@ 'click .ckeditor-add-new-group button': 'onAddGroupButtonClick' }, - /** - * Backbone View for CKEditor toolbar configuration; visual UX. - * - * @constructs - * - * @augments Backbone.View - */ - initialize: function () { + initialize: function initialize() { this.listenTo(this.model, 'change:isDirty change:groupNamesVisible', this.render); - // Add a toggle for the button group names. - $(Drupal.theme('ckeditorButtonGroupNamesToggle')) - .prependTo(this.$el.find('#ckeditor-active-toolbar').parent()); + $(Drupal.theme('ckeditorButtonGroupNamesToggle')).prependTo(this.$el.find('#ckeditor-active-toolbar').parent()); this.render(); }, - - /** - * Render function for rendering the toolbar configuration. - * - * @param {*} model - * Model used for the view. - * @param {string} [value] - * The value that was changed. - * @param {object} changedAttributes - * The attributes that was changed. - * - * @return {Drupal.ckeditor.VisualView} - * The {@link Drupal.ckeditor.VisualView} object. - */ - render: function (model, value, changedAttributes) { + render: function render(model, value, changedAttributes) { this.insertPlaceholders(); this.applySorting(); - // Toggle button group names. var groupNamesVisible = this.model.get('groupNamesVisible'); - // If a button was just placed in the active toolbar, ensure that the - // button group names are visible. + if (changedAttributes && changedAttributes.changes && changedAttributes.changes.isDirty) { - this.model.set({groupNamesVisible: true}, {silent: true}); + this.model.set({ groupNamesVisible: true }, { silent: true }); groupNamesVisible = true; } this.$el.find('[data-toolbar="active"]').toggleClass('ckeditor-group-names-are-visible', groupNamesVisible); - this.$el.find('.ckeditor-groupnames-toggle') - .text((groupNamesVisible) ? Drupal.t('Hide group names') : Drupal.t('Show group names')) - .attr('aria-pressed', groupNamesVisible); + this.$el.find('.ckeditor-groupnames-toggle').text(groupNamesVisible ? Drupal.t('Hide group names') : Drupal.t('Show group names')).attr('aria-pressed', groupNamesVisible); return this; }, - - /** - * Handles clicks to a button group name. - * - * @param {jQuery.Event} event - * The click event on the button group. - */ - onGroupNameClick: function (event) { + onGroupNameClick: function onGroupNameClick(event) { var $group = $(event.currentTarget).closest('.ckeditor-toolbar-group'); Drupal.ckeditor.openGroupNameDialog(this, $group); event.stopPropagation(); event.preventDefault(); }, - - /** - * Handles clicks on the button group names toggle button. - * - * @param {jQuery.Event} event - * The click event on the toggle button. - */ - onGroupNamesToggleClick: function (event) { + onGroupNamesToggleClick: function onGroupNamesToggleClick(event) { this.model.set('groupNamesVisible', !this.model.get('groupNamesVisible')); event.preventDefault(); }, - - /** - * Prompts the user to provide a name for a new button group; inserts it. - * - * @param {jQuery.Event} event - * The event of the button click. - */ - onAddGroupButtonClick: function (event) { - - /** - * Inserts a new button if the openGroupNameDialog function returns true. - * - * @param {bool} success - * A flag that indicates if the user created a new group (true) or - * canceled out of the dialog (false). - * @param {jQuery} $group - * A jQuery DOM fragment that represents the new button group. It has - * not been added to the DOM yet. - */ + onAddGroupButtonClick: function onAddGroupButtonClick(event) { function insertNewGroup(success, $group) { if (success) { $group.appendTo($(event.currentTarget).closest('.ckeditor-row').children('.ckeditor-toolbar-groups')); - // Focus on the new group. + $group.trigger('focus'); } } - // Pass in a DOM fragment of a placeholder group so that the new group - // name can be applied to it. Drupal.ckeditor.openGroupNameDialog(this, $(Drupal.theme('ckeditorToolbarGroup')), insertNewGroup); event.preventDefault(); }, - - /** - * Handles jQuery Sortable stop sort of a button group. - * - * @param {jQuery.Event} event - * The event triggered on the group drag. - * @param {object} ui - * A jQuery.ui.sortable argument that contains information about the - * elements involved in the sort action. - */ - endGroupDrag: function (event, ui) { + endGroupDrag: function endGroupDrag(event, ui) { var view = this; Drupal.ckeditor.registerGroupMove(this, ui.item, function (success) { if (!success) { - // Cancel any sorting in the configuration area. view.$el.find('.ckeditor-toolbar-configuration').find('.ui-sortable').sortable('cancel'); } }); }, - - /** - * Handles jQuery Sortable start sort of a button. - * - * @param {jQuery.Event} event - * The event triggered on the group drag. - * @param {object} ui - * A jQuery.ui.sortable argument that contains information about the - * elements involved in the sort action. - */ - startButtonDrag: function (event, ui) { + startButtonDrag: function startButtonDrag(event, ui) { this.$el.find('a:focus').trigger('blur'); - // Show the button group names as soon as the user starts dragging. this.model.set('groupNamesVisible', true); }, - - /** - * Handles jQuery Sortable stop sort of a button. - * - * @param {jQuery.Event} event - * The event triggered on the button drag. - * @param {object} ui - * A jQuery.ui.sortable argument that contains information about the - * elements involved in the sort action. - */ - endButtonDrag: function (event, ui) { + endButtonDrag: function endButtonDrag(event, ui) { var view = this; Drupal.ckeditor.registerButtonMove(this, ui.item, function (success) { if (!success) { - // Cancel any sorting in the configuration area. view.$el.find('.ui-sortable').sortable('cancel'); } - // Refocus the target button so that the user can continue from a known - // place. + ui.item.find('a').trigger('focus'); }); }, - - /** - * Invokes jQuery.sortable() on new buttons and groups in a CKEditor config. - */ - applySorting: function () { - // Make the buttons sortable. + applySorting: function applySorting() { this.$el.find('.ckeditor-buttons').not('.ui-sortable').sortable({ - // Change this to .ckeditor-toolbar-group-buttons. connectWith: '.ckeditor-buttons', placeholder: 'ckeditor-button-placeholder', forcePlaceholderSize: true, tolerance: 'pointer', cursor: 'move', start: this.startButtonDrag.bind(this), - // Sorting within a sortable. + stop: this.endButtonDrag.bind(this) }).disableSelection(); - // Add the drag and drop functionality to button groups. this.$el.find('.ckeditor-toolbar-groups').not('.ui-sortable').sortable({ connectWith: '.ckeditor-toolbar-groups', cancel: '.ckeditor-add-new-group', @@ -208,66 +104,43 @@ stop: this.endGroupDrag.bind(this) }); - // Add the drag and drop functionality to buttons. this.$el.find('.ckeditor-multiple-buttons li').draggable({ connectToSortable: '.ckeditor-toolbar-active .ckeditor-buttons', helper: 'clone' }); }, - - /** - * Wraps the invocation of methods to insert blank groups and rows. - */ - insertPlaceholders: function () { + insertPlaceholders: function insertPlaceholders() { this.insertPlaceholderRow(); this.insertNewGroupButtons(); }, - - /** - * Inserts a blank row at the bottom of the CKEditor configuration. - */ - insertPlaceholderRow: function () { + insertPlaceholderRow: function insertPlaceholderRow() { var $rows = this.$el.find('.ckeditor-row'); - // Add a placeholder row. to the end of the list if one does not exist. + if (!$rows.eq(-1).hasClass('placeholder')) { - this.$el - .find('.ckeditor-toolbar-active') - .children('.ckeditor-active-toolbar-configuration') - .append(Drupal.theme('ckeditorRow')); + this.$el.find('.ckeditor-toolbar-active').children('.ckeditor-active-toolbar-configuration').append(Drupal.theme('ckeditorRow')); } - // Update the $rows variable to include the new row. + $rows = this.$el.find('.ckeditor-row'); - // Remove blank rows except the last one. + var len = $rows.length; $rows.filter(function (index, row) { - // Do not remove the last row. if (index + 1 === len) { return false; } return $(row).find('.ckeditor-toolbar-group').not('.placeholder').length === 0; - }) - // Then get all rows that are placeholders and remove them. - .remove(); + }).remove(); }, - - /** - * Inserts a button in each row that will add a new CKEditor button group. - */ - insertNewGroupButtons: function () { - // Insert an add group button to each row. + insertNewGroupButtons: function insertNewGroupButtons() { this.$el.find('.ckeditor-row').each(function () { var $row = $(this); var $groups = $row.find('.ckeditor-toolbar-group'); var $button = $row.find('.ckeditor-add-new-group'); if ($button.length === 0) { $row.children('.ckeditor-toolbar-groups').append(Drupal.theme('ckeditorNewButtonGroup')); - } - // If a placeholder group exists, make sure it's at the end of the row. - else if (!$groups.eq(-1).hasClass('ckeditor-add-new-group')) { - $button.appendTo($row.children('.ckeditor-toolbar-groups')); - } + } else if (!$groups.eq(-1).hasClass('ckeditor-add-new-group')) { + $button.appendTo($row.children('.ckeditor-toolbar-groups')); + } }); } }); - -})(Drupal, Backbone, jQuery); +})(Drupal, Backbone, jQuery); \ No newline at end of file