diff --git a/core/modules/ckeditor/ckeditor.admin.inc b/core/modules/ckeditor/ckeditor.admin.inc index cb36652..672790b 100644 --- a/core/modules/ckeditor/ckeditor.admin.inc +++ b/core/modules/ckeditor/ckeditor.admin.inc @@ -155,7 +155,7 @@ function theme_ckeditor_settings_toolbar($variables) { $output .= '' . t('Toolbar configuration') . ''; $output .= '
'; - $output .= '
' . t('Move a button into the Active toolbar to enable it, or into the list of Available buttons to disable it. Buttons may be moved with the mouse or keyboard arrow keys. Create a new toolbar group by placing a button in the placeholder group at the end of a row.') . '
'; + $output .= '
' . t('Move a button into the Active toolbar to enable it, or into the list of Available buttons to disable it. Buttons may be moved with the mouse or keyboard arrow keys. Empty toolbar groups will be removed upon save.') . '
'; $output .= '
'; // Available buttons. diff --git a/core/modules/ckeditor/css/ckeditor.admin.css b/core/modules/ckeditor/css/ckeditor.admin.css index 3680f38..64fc94e 100644 --- a/core/modules/ckeditor/css/ckeditor.admin.css +++ b/core/modules/ckeditor/css/ckeditor.admin.css @@ -81,10 +81,12 @@ display: block; cursor: pointer; } -.ckeditor-toolbar-active .placeholder { +.ckeditor-toolbar-active .placeholder, +.ckeditor-toolbar-active .ckeditor-add-new-group { display: none; } -.ckeditor-group-names-are-visible .placeholder { +.ckeditor-group-names-are-visible .placeholder, +.ckeditor-group-names-are-visible .ckeditor-add-new-group { display: block; } .ckeditor-toolbar-group-buttons { diff --git a/core/modules/ckeditor/js/ckeditor.admin.js b/core/modules/ckeditor/js/ckeditor.admin.js index 7c0e8dc..995a2e2 100644 --- a/core/modules/ckeditor/js/ckeditor.admin.js +++ b/core/modules/ckeditor/js/ckeditor.admin.js @@ -454,7 +454,8 @@ Drupal.ckeditor = { events: { 'click .ckeditor-toolbar-group-name': 'onGroupNameClick', - 'click .ckeditor-groupnames-toggle': 'onGroupNamesToggleClick' + 'click .ckeditor-groupnames-toggle': 'onGroupNamesToggleClick', + 'click .ckeditor-add-new-group button': 'onAddGroupButtonClick' }, /** @@ -510,8 +511,38 @@ Drupal.ckeditor = { * Handles clicks on the button group names toggle button. */ onGroupNamesToggleClick: function (event) { - event.preventDefault(); 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 + */ + onAddGroupButtonClick: function (event) { + + /** + * Inserts a new button if the openGroupNameDialog function returns true. + * + * @param Boolean 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. + */ + function insertNewGroup (success, $group) { + if (success) { + $group.appendTo($(event.currentTarget).closest('.ckeditor-row').children('.ckeditor-toolbar-groups')); + } + } + + // Pass in a DOM fragment of a placeholder group so that the new group + // name can be applied to it. + openGroupNameDialog(this, $(Drupal.theme('ckeditorToolbarGroup')), insertNewGroup); + + event.preventDefault(); }, /** @@ -607,7 +638,7 @@ Drupal.ckeditor = { */ insertPlaceholders: function () { this.insertPlaceholderRow(); - this.insertPlaceholderGroup(); + this.insertNewGroupButtons(); }, /** @@ -638,20 +669,20 @@ Drupal.ckeditor = { }, /** - * Inserts a blank group at the end of a row CKEditor configuration. + * Inserts a button in each row that will add a new CKEditor button group. */ - insertPlaceholderGroup: function () { - // Add placeholder groups. + insertNewGroupButtons: function () { + // Insert an add group button to each row. this.$el.find('.ckeditor-row').each(function () { var $row = $(this); var $groups = $row.find('.ckeditor-toolbar-group'); - var $placeholder = $groups.filter('.placeholder'); - if ($placeholder.length === 0) { - $row.children('.ckeditor-toolbar-groups').append(Drupal.theme('ckeditorToolbarGroup')); + 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('placeholder')) { - $placeholder.appendTo($row.children('.ckeditor-toolbar-groups')); + else if (!$groups.eq(-1).hasClass('ckeditor-add-new-group')) { + $button.appendTo($row.children('.ckeditor-toolbar-groups')); } }); } @@ -1278,7 +1309,7 @@ function openGroupNameDialog (view, $group, callback) { // Invoke a user-provided callback and indicate failure. if (action === 'cancel') { shutdown(); - callback(false); + callback(false, $group); return; } @@ -1297,7 +1328,7 @@ function openGroupNameDialog (view, $group, callback) { $group.closest('.ckeditor-row.placeholder').addBack().removeClass('placeholder'); // Invoke a user-provided callback and indicate success. - callback(true); + callback(true, $group); // Signal that the active toolbar DOM structure has changed. view.model.set('isDirty', true); @@ -1500,4 +1531,13 @@ Drupal.theme.ckeditorButtonGroupNamesToggle = function () { return ''; }; +/** + * Themes a button that will prompt the user to name a new button group. + * + * @return String + */ +Drupal.theme.ckeditorNewButtonGroup = function () { + return '
  • '; +}; + })(jQuery, Drupal, _, CKEDITOR);