diff --git a/core/modules/ckeditor/ckeditor.module b/core/modules/ckeditor/ckeditor.module index 2a7a3bf..472a891 100644 --- a/core/modules/ckeditor/ckeditor.module +++ b/core/modules/ckeditor/ckeditor.module @@ -24,8 +24,9 @@ function ckeditor_library_info() { array('data' => $settings, 'type' => 'setting'), ), 'dependencies' => array( - array('editor', 'drupal.editor'), + array('system', 'drupal'), array('ckeditor', 'ckeditor'), + array('editor', 'drupal.editor'), ), ); $libraries['drupal.ckeditor.css'] = array( @@ -46,6 +47,9 @@ function ckeditor_library_info() { 'core/misc/ckeditor/skins/moono/editor.css' => array(), ), 'dependencies' => array( + array('system', 'jquery'), + array('system', 'drupal'), + array('system', 'drupalSettings'), array('system', 'jquery.once'), array('system', 'jquery.ui.sortable'), array('system', 'jquery.ui.draggable'), @@ -58,6 +62,8 @@ function ckeditor_library_info() { $module_path . '/js/ckeditor.stylescombo.admin.js' => array(), ), 'dependencies' => array( + array('system', 'jquery'), + array('system', 'drupal'), array('system', 'jquery.once'), array('system', 'drupal.vertical-tabs'), ), diff --git a/core/modules/ckeditor/js/ckeditor.admin.js b/core/modules/ckeditor/js/ckeditor.admin.js index 8c22b2a..633a155 100644 --- a/core/modules/ckeditor/js/ckeditor.admin.js +++ b/core/modules/ckeditor/js/ckeditor.admin.js @@ -1,4 +1,4 @@ -(function ($, Drupal) { +(function ($, Drupal, drupalSettings) { "use strict"; @@ -7,13 +7,198 @@ Drupal.ckeditor = Drupal.ckeditor || {}; var $messages; // Aria-live element for speaking application state. Drupal.behaviors.ckeditorAdmin = { - attach: function (context, settings) { + attach: function (context) { var $context = $(context); - $(context).find('.ckeditor-toolbar-configuration').once('ckeditor-toolbar', function() { - var $wrapper = $(this); - var $textareaWrapper = $(this).find('.form-item-editor-settings-toolbar-buttons').hide(); + var $ckeditorToolbar = $context.find('.ckeditor-toolbar-configuration').once('ckeditor-toolbar'); + + + /** + * Event callback for keypress. Move buttons based on arrow keys. + */ + function adminToolbarMoveButton (event) { + var $target = $(event.target); + var label = Drupal.t('@label button', {'@label': $target.attr('aria-label')}); + var $button = $target.parent(); + var $currentRow = $button.closest('.ckeditor-buttons'); + var $destinationRow = null; + var destinationPosition = $button.index(); + + switch (event.keyCode) { + case 37: // Left arrow. + case 63234: // Safari left arrow. + $destinationRow = $currentRow; + destinationPosition -= rtl; + break; + case 38: // Up arrow. + case 63232: // Safari up arrow. + $destinationRow = $($toolbarRows[$toolbarRows.index($currentRow) - 1]); + break; + case 39: // Right arrow. + case 63235: // Safari right arrow. + $destinationRow = $currentRow; + destinationPosition += rtl; + break; + case 40: // Down arrow. + case 63233: // Safari down arrow. + $destinationRow = $($toolbarRows[$toolbarRows.index($currentRow) + 1]); + } + + if ($destinationRow && $destinationRow.length) { + // Detach the button from the DOM so its position doesn't interfere. + $button.detach(); + // Move the button before the button whose position it should occupy. + var $targetButton = $destinationRow.children(':eq(' + destinationPosition + ')'); + if ($targetButton.length) { + $targetButton.before($button); + } + else { + $destinationRow.append($button); + } + // Post the update to the aria-live message element. + $messages.text(Drupal.t('moved to @row, position @position of @totalPositions', { + '@row': getRowInfo($destinationRow), + '@position': (destinationPosition + 1), + '@totalPositions': $destinationRow.children().length + })); + // Update the toolbar value field. + adminToolbarValue(event, { item: $button }); + } + event.preventDefault(); + } + + /** + * Event callback for keyup. Move a separator into the active toolbar. + */ + function adminToolbarMoveSeparator (event) { + switch (event.keyCode) { + case 38: // Up arrow. + case 63232: // Safari up arrow. + var $button = $(event.target).parent().clone().appendTo($toolbarRows.eq(-2)); + adminToolbarValue(event, { item: $button }); + event.preventDefault(); + } + } + + /** + * Provide help when a button is clicked on. + */ + function adminToolbarButtonHelp (event) { + var $link = $(event.target); + var $button = $link.parent(); + var $currentRow = $button.closest('.ckeditor-buttons'); + var enabled = $button.closest('.ckeditor-toolbar-active').length > 0; + var position = $button.index() + 1; // 1-based index for humans. + var rowNumber = $toolbarRows.index($currentRow) + 1; + var type = event.data.type; + var message; + + if (enabled) { + if (type === 'separator') { + message = Drupal.t('Separators are used to visually split individual buttons. This @name is currently enabled, in row @row and position @position.', { '@name': $link.attr('aria-label'), '@row': rowNumber, '@position': position }) + "\n\n" + Drupal.t('Drag and drop the separator or use the keyboard arrow keys to change the position of this separator.'); + } + else { + message = Drupal.t('The @name button is currently enabled, in row @row and position @position.', { '@name': $link.attr('aria-label'), '@row': rowNumber, '@position': position }) + "\n\n" + Drupal.t('Drag and drop the buttons or use the keyboard arrow keys to change the position of this button.'); + } + } + else { + if (type === 'separator') { + message = Drupal.t('Separators are used to visually split individual buttons. This @name is currently disabled.', { '@name': $link.attr('aria-label') }) + "\n\n" + Drupal.t('Drag the button or use the up arrow key to move this separator into the active toolbar. You may add multiple separators to each row.'); + } + else { + message = Drupal.t('The @name button is currently disabled.', { '@name': $link.attr('aria-label') }) + "\n\n" + Drupal.t('Drag the button or use the up arrow key to move this button into the active toolbar.'); + } + } + $messages.text(message); + $link.focus(); + event.preventDefault(); + } + + /** + * Add a new row of buttons. + */ + function adminToolbarAddRow (event) { + var $this = $(event.target); + var $rows = $this.closest('.ckeditor-toolbar-active').find('.ckeditor-buttons'); + var $rowNew = $rows.last().clone().empty().sortable(sortableSettings); + $rows.last().after($rowNew); + $toolbarRows = $toolbarAdmin.find('.ckeditor-buttons'); + $this.siblings('a').show(); + redrawToolbarGradient(); + // Post the update to the aria-live message element. + $messages.text(Drupal.t('row number @count added.', {'@count': ($rows.length + 1)})); + event.preventDefault(); + } + + /** + * Remove a row of buttons. + */ + function adminToolbarRemoveRow (event) { + var $this = $(event.target); + var $rows = $this.closest('.ckeditor-toolbar-active').find('.ckeditor-buttons'); + if ($rows.length === 2) { + $this.hide(); + } + if ($rows.length > 1) { + var $lastRow = $rows.last(); + var $disabledButtons = $ckeditorToolbar.find('.ckeditor-toolbar-disabled .ckeditor-buttons'); + $lastRow.children(':not(.ckeditor-multiple-button)').prependTo($disabledButtons); + $lastRow.sortable('destroy').remove(); + $toolbarRows = $toolbarAdmin.find('.ckeditor-buttons'); + redrawToolbarGradient(); + } + // Post the update to the aria-live message element. + $messages.text(Drupal.t('row removed. @count row@plural remaining.', {'@count': ($rows.length - 1), '@plural': ((($rows.length - 1) === 1 ) ? '' : 's')})); + event.preventDefault(); + } + + /** + * Browser quirk work-around to redraw CSS3 gradients. + */ + function redrawToolbarGradient () { + $ckeditorToolbar.find('.ckeditor-toolbar-active').css('position', 'relative'); + window.setTimeout(function () { + $ckeditorToolbar.find('.ckeditor-toolbar-active').css('position', ''); + }, 10); + } + + /** + * jQuery Sortable stop event. Save updated toolbar positions to the + * textarea. + */ + function adminToolbarValue (event, ui) { + // Update the toolbar config after updating a sortable. + var toolbarConfig = []; + var $button = ui.item; + $button.find('a').focus(); + $ckeditorToolbar.find('.ckeditor-toolbar-active ul').each(function () { + var $rowButtons = $(this).find('li'); + var rowConfig = []; + if ($rowButtons.length) { + $rowButtons.each(function () { + rowConfig.push(this.getAttribute('data-button-name')); + }); + toolbarConfig.push(rowConfig); + } + }); + $textarea.val(JSON.stringify(toolbarConfig, null, ' ')); + + // Determine whether we should trigger an event. + var from = $(event.target).parents('div[data-toolbar]').attr('data-toolbar'); + var to = $(event.toElement).parents('div[data-toolbar]').attr('data-toolbar'); + if (from !== to) { + $ckeditorToolbar.find('.ckeditor-toolbar-active') + .trigger('CKEditorToolbarChanged', [ + (to === 'active') ? 'added' : 'removed', + ui.item.get(0).getAttribute('data-button-name') + ]); + } + } + + + if ($ckeditorToolbar.length) { + var $textareaWrapper = $ckeditorToolbar.find('.form-item-editor-settings-toolbar-buttons').hide(); var $textarea = $textareaWrapper.find('textarea'); - var $toolbarAdmin = $(settings.ckeditor.toolbarAdmin); + var $toolbarAdmin = $(drupalSettings.ckeditor.toolbarAdmin); var sortableSettings = { connectWith: '.ckeditor-buttons', placeholder: 'ckeditor-button-placeholder', @@ -56,186 +241,7 @@ Drupal.behaviors.ckeditorAdmin = { // Identify the aria-live element for interaction updates for screen // readers. $messages = $('#ckeditor-button-configuration-aria-live'); - - /** - * Event callback for keypress. Move buttons based on arrow keys. - */ - function adminToolbarMoveButton(event) { - var label = Drupal.t('@label button', {'@label': $(this).attr('aria-label')}); - var $button = $(this).parent(); - var $currentRow = $button.closest('.ckeditor-buttons'); - var $destinationRow = null; - var destinationPosition = $button.index(); - - switch (event.keyCode) { - case 37: // Left arrow. - case 63234: // Safari left arrow. - $destinationRow = $currentRow; - destinationPosition = destinationPosition - (1 * rtl); - break; - case 38: // Up arrow. - case 63232: // Safari up arrow. - $destinationRow = $($toolbarRows[$toolbarRows.index($currentRow) - 1]); - break; - case 39: // Right arrow. - case 63235: // Safari right arrow. - $destinationRow = $currentRow; - destinationPosition = destinationPosition + (1 * rtl); - break; - case 40: // Down arrow. - case 63233: // Safari down arrow. - $destinationRow = $($toolbarRows[$toolbarRows.index($currentRow) + 1]); - } - - if ($destinationRow && $destinationRow.length) { - // Detach the button from the DOM so its position doesn't interfere. - $button.detach(); - // Move the button before the button whose position it should occupy. - var $targetButton = $destinationRow.children(':eq(' + destinationPosition + ')'); - if ($targetButton.length) { - $targetButton.before($button); - } - else { - $destinationRow.append($button); - } - // Post the update to the aria-live message element. - $messages.text(Drupal.t('moved to @row, position @position of @totalPositions', { - '@row': getRowInfo($destinationRow), - '@position': (destinationPosition + 1), - '@totalPositions': $destinationRow.children().length - })); - // Update the toolbar value field. - adminToolbarValue(event, { item: $button }); - } - event.preventDefault(); - } - - /** - * Event callback for keyup. Move a separator into the active toolbar. - */ - function adminToolbarMoveSeparator(event) { - switch (event.keyCode) { - case 38: // Up arrow. - case 63232: // Safari up arrow. - var $button = $(this).parent().clone().appendTo($toolbarRows.eq(-2)); - adminToolbarValue(event, { item: $button }); - event.preventDefault(); - } - } - - /** - * Provide help when a button is clicked on. - */ - function adminToolbarButtonHelp(event) { - var $link = $(this); - var $button = $link.parent(); - var $currentRow = $button.closest('.ckeditor-buttons'); - var enabled = $button.closest('.ckeditor-toolbar-active').length > 0; - var position = $button.index() + 1; // 1-based index for humans. - var rowNumber = $toolbarRows.index($currentRow) + 1; - var type = event.data.type; - if (enabled) { - if (type === 'separator') { - $messages.text(Drupal.t('Separators are used to visually split individual buttons. This @name is currently enabled, in row @row and position @position.', { '@name': $link.attr('aria-label'), '@row': rowNumber, '@position': position }) + "\n\n" + Drupal.t('Drag and drop the separator or use the keyboard arrow keys to change the position of this separator.')); - } - else { - $messages.text(Drupal.t('The @name button is currently enabled, in row @row and position @position.', { '@name': $link.attr('aria-label'), '@row': rowNumber, '@position': position }) + "\n\n" + Drupal.t('Drag and drop the buttons or use the keyboard arrow keys to change the position of this button.')); - } - } - else { - if (type === 'separator') { - $messages.text(Drupal.t('Separators are used to visually split individual buttons. This @name is currently disabled.', { '@name': $link.attr('aria-label') }) + "\n\n" + Drupal.t('Drag the button or use the up arrow key to move this separator into the active toolbar. You may add multiple separators to each row.')); - } - else { - $messages.text(Drupal.t('The @name button is currently disabled.', { '@name': $link.attr('aria-label') }) + "\n\n" + Drupal.t('Drag the button or use the up arrow key to move this button into the active toolbar.')); - } - } - $link.focus(); - event.preventDefault(); - } - - /** - * Add a new row of buttons. - */ - function adminToolbarAddRow(event) { - var $this = $(this); - var $rows = $this.closest('.ckeditor-toolbar-active').find('.ckeditor-buttons'); - $rows.last().clone().empty().insertAfter($rows.last()).sortable(sortableSettings); - $toolbarRows = $toolbarAdmin.find('.ckeditor-buttons'); - $this.siblings('a').show(); - redrawToolbarGradient(); - // Post the update to the aria-live message element. - $messages.text(Drupal.t('row number @count added.', {'@count': ($rows.length + 1)})); - event.preventDefault(); - } - - /** - * Remove a row of buttons. - */ - function adminToolbarRemoveRow(event) { - var $this = $(this); - var $rows = $this.closest('.ckeditor-toolbar-active').find('.ckeditor-buttons'); - if ($rows.length === 2) { - $this.hide(); - } - if ($rows.length > 1) { - var $lastRow = $rows.last(); - var $disabledButtons = $wrapper.find('.ckeditor-toolbar-disabled .ckeditor-buttons'); - $lastRow.children(':not(.ckeditor-multiple-button)').prependTo($disabledButtons); - $lastRow.sortable('destroy').remove(); - $toolbarRows = $toolbarAdmin.find('.ckeditor-buttons'); - redrawToolbarGradient(); - } - // Post the update to the aria-live message element. - $messages.text(Drupal.t('row removed. @count row@plural remaining.', {'@count': ($rows.length - 1), '@plural': ((($rows.length - 1) === 1 ) ? '' : 's')})); - event.preventDefault(); - } - - /** - * Browser quirk work-around to redraw CSS3 gradients. - */ - function redrawToolbarGradient() { - $wrapper.find('.ckeditor-toolbar-active').css('position', 'relative'); - window.setTimeout(function() { - $wrapper.find('.ckeditor-toolbar-active').css('position', ''); - }, 10); - } - - /** - * jQuery Sortable stop event. Save updated toolbar positions to the - * textarea. - */ - function adminToolbarValue(event, ui) { - // Update the toolbar config after updating a sortable. - var toolbarConfig = []; - var $button = ui.item; - $button.find('a').focus(); - $wrapper.find('.ckeditor-toolbar-active ul').each(function() { - var $rowButtons = $(this).find('li'); - var rowConfig = []; - if ($rowButtons.length) { - $rowButtons.each(function() { - rowConfig.push(this.getAttribute('data-button-name')); - }); - toolbarConfig.push(rowConfig); - } - }); - $textarea.val(JSON.stringify(toolbarConfig, null, ' ')); - - // Determine whether we should trigger an event. - var from = $(event.target).parents('div[data-toolbar]').attr('data-toolbar'); - var to = $(event.toElement).parents('div[data-toolbar]').attr('data-toolbar'); - if (from !== to) { - $wrapper - .find('.ckeditor-toolbar-active') - .trigger('CKEditorToolbarChanged', [ - (to === 'active') ? 'added' : 'removed', - $(ui.item).get(0).getAttribute('data-button-name') - ]); - } - } - - }); + } } }; @@ -274,7 +280,7 @@ function getRowInfo ($row) { * A jQuery event. */ function grantRowFocus (event) { - var $row = $(this); + var $row = $(event.target); // Remove the focused class from all other toolbars. $('.ckeditor-buttons.focused').not($row).removeClass('focused'); // Post the update to the aria-live message element. @@ -285,4 +291,4 @@ function grantRowFocus (event) { } } -})(jQuery, Drupal); +})(jQuery, Drupal, drupalSettings); diff --git a/core/modules/ckeditor/js/ckeditor.js b/core/modules/ckeditor/js/ckeditor.js index 7cfed59..727f9e4 100644 --- a/core/modules/ckeditor/js/ckeditor.js +++ b/core/modules/ckeditor/js/ckeditor.js @@ -1,14 +1,15 @@ -(function ($, Drupal, drupalSettings, CKEDITOR) { +(function (Drupal, CKEDITOR) { "use strict"; Drupal.editors.ckeditor = { attach: function (element, format) { + var externalPlugins = format.editorSettings.externalPlugins; // Register and load additional CKEditor plugins as necessary. - if (format.editorSettings.externalPlugins) { - for (var pluginName in format.editorSettings.drupalExternalPlugins) { - if (format.editorSettings.drupalExternalPlugins.hasOwnProperty(pluginName)) { - CKEDITOR.plugins.addExternal(pluginName, format.editorSettings.drupalExternalPlugins[pluginName], ''); + if (externalPlugins) { + for (var pluginName in externalPlugins) { + if (externalPlugins.hasOwnProperty(pluginName)) { + CKEDITOR.plugins.addExternal(pluginName, externalPlugins[pluginName], ''); } } delete format.editorSettings.drupalExternalPlugins; @@ -29,4 +30,4 @@ Drupal.editors.ckeditor = { } }; -})(jQuery, Drupal, drupalSettings, CKEDITOR); +})(Drupal, CKEDITOR); diff --git a/core/modules/ckeditor/js/ckeditor.stylescombo.admin.js b/core/modules/ckeditor/js/ckeditor.stylescombo.admin.js index 707bf4b..5a71a77 100644 --- a/core/modules/ckeditor/js/ckeditor.stylescombo.admin.js +++ b/core/modules/ckeditor/js/ckeditor.stylescombo.admin.js @@ -6,7 +6,7 @@ * Shows the "stylescombo" plugin settings only when the button is enabled. */ Drupal.behaviors.ckeditorStylesComboSettingsVisibility = { - attach: function (context, settings) { + attach: function (context) { var $stylesComboVerticalTab = $('#edit-editor-settings-plugins-stylescombo').data('verticalTab'); // Hide if the "Styles" button is disabled. @@ -34,18 +34,17 @@ Drupal.behaviors.ckeditorStylesComboSettingsVisibility = { * Provides the summary for the "stylescombo" plugin settings vertical tab. */ Drupal.behaviors.ckeditorStylesComboSettingsSummary = { - attach: function (context, settings) { - $('#edit-editor-settings-plugins-stylescombo') - .drupalSetSummary(function (context) { - var styles = $.trim($('#edit-editor-settings-plugins-stylescombo-styles').val()); - if (styles.length === 0) { - return Drupal.t('No styles configured'); - } - else { - var count = $.trim(styles).split("\n").length; - return Drupal.t('@count styles configured', { '@count': count}); - } - }); + attach: function () { + $('#edit-editor-settings-plugins-stylescombo').drupalSetSummary(function (context) { + var styles = $.trim($('#edit-editor-settings-plugins-stylescombo-styles').val()); + if (styles.length === 0) { + return Drupal.t('No styles configured'); + } + else { + var count = $.trim(styles).split("\n").length; + return Drupal.t('@count styles configured', { '@count': count}); + } + }); } };