* CKEditor button and group configuration user interface.
*/
-(function ($, Drupal, drupalSettings, _) {
+(function($, Drupal, drupalSettings, _) {
Drupal.ckeditor = Drupal.ckeditor || {};
/**
Drupal.behaviors.ckeditorAdmin = {
attach(context) {
// Process the CKEditor configuration fragment once.
- const $configurationForm = $(context).find('.ckeditor-toolbar-configuration').once('ckeditor-configuration');
+ const $configurationForm = $(context)
+ .find('.ckeditor-toolbar-configuration')
+ .once('ckeditor-configuration');
if ($configurationForm.length) {
const $textarea = $configurationForm
// Hide the textarea that contains the serialized representation of the
// really means that all CKEditor toolbar buttons have been removed.
// Hence,all editor features will be removed, so any reactions from
// filters will be undone.
- const $configurationForm = $(context).find('.ckeditor-toolbar-configuration').findOnce('ckeditor-configuration');
- if ($configurationForm.length && Drupal.ckeditor.models && Drupal.ckeditor.models.Model) {
+ const $configurationForm = $(context)
+ .find('.ckeditor-toolbar-configuration')
+ .findOnce('ckeditor-configuration');
+ if (
+ $configurationForm.length &&
+ Drupal.ckeditor.models &&
+ Drupal.ckeditor.models.Model
+ ) {
const config = Drupal.ckeditor.models.Model.toJSON().activeEditorConfig;
const buttons = Drupal.ckeditor.views.controller.getButtonList(config);
- const $activeToolbar = $('.ckeditor-toolbar-configuration').find('.ckeditor-toolbar-active');
+ const $activeToolbar = $('.ckeditor-toolbar-configuration').find(
+ '.ckeditor-toolbar-active',
+ );
for (let i = 0; i < buttons.length; i++) {
- $activeToolbar.trigger('CKEditorToolbarChanged', ['removed', buttons[i]]);
+ $activeToolbar.trigger('CKEditorToolbarChanged', [
+ 'removed',
+ buttons[i],
+ ]);
}
}
},
* @namespace
*/
Drupal.ckeditor = {
-
/**
* A hash of View instances.
*
view.isProcessing = true;
Drupal.ckeditor.openGroupNameDialog(view, $group, callback);
- }
- else {
+ } else {
view.model.set('isDirty', true);
callback(true);
}
}
// If there are any rows with just a placeholder group, mark the row as a
// placeholder.
- $row.parent().children().each(function () {
- $row = $(this);
- if ($row.find('.ckeditor-toolbar-group').not('.placeholder').length === 0) {
- $row.addClass('placeholder');
- }
- });
+ $row
+ .parent()
+ .children()
+ .each(function() {
+ $row = $(this);
+ if (
+ $row.find('.ckeditor-toolbar-group').not('.placeholder').length ===
+ 0
+ ) {
+ $row.addClass('placeholder');
+ }
+ });
view.model.set('isDirty', true);
},
* been closed.
*/
openGroupNameDialog(view, $group, callback) {
- callback = callback || function () {};
+ callback = callback || function() {};
/**
* Validates the string provided as a button group title.
.find('input')
.addClass('error')
.attr('aria-invalid', 'true');
- $(`<div class="description" >${Drupal.t('Please provide a name for the button group.')}</div>`).insertAfter(form.elements[0]);
+ $(
+ `<div class="description" >${Drupal.t(
+ 'Please provide a name for the button group.',
+ )}</div>`,
+ ).insertAfter(form.elements[0]);
}
return true;
}
* Closes the dialog when the user cancels or supplies valid data.
*/
function shutdown() {
+ // eslint-disable-next-line no-use-before-define
dialog.close(action);
// The processing marker can be deleted since the dialog has been
// Remove all whitespace from the name, lowercase it and ensure
// HTML-safe encoding, then use this as the group ID for CKEditor
// configuration UI accessibility purposes only.
- const groupID = `ckeditor-toolbar-group-aria-label-for-${Drupal.checkPlain(name.toLowerCase().replace(/\s/g, '-'))}`;
+ const groupID = `ckeditor-toolbar-group-aria-label-for-${Drupal.checkPlain(
+ name.toLowerCase().replace(/\s/g, '-'),
+ )}`;
$group
// Update the group container.
.removeAttr('aria-label')
if (action === 'apply') {
shutdown();
// Apply the provided name to the button group label.
- namePlaceholderGroup($group, Drupal.checkPlain(form.elements[0].value));
+ namePlaceholderGroup(
+ $group,
+ Drupal.checkPlain(form.elements[0].value),
+ );
// Remove placeholder classes so that new placeholders will be
// inserted.
- $group.closest('.ckeditor-row.placeholder').addBack().removeClass('placeholder');
+ $group
+ .closest('.ckeditor-row.placeholder')
+ .addBack()
+ .removeClass('placeholder');
// Invoke a user-provided callback and indicate success.
callback(true, $group);
}
// Create a Drupal dialog that will get a button group name from the user.
- const $ckeditorButtonGroupNameForm = $(Drupal.theme('ckeditorButtonGroupNameForm'));
+ const $ckeditorButtonGroupNameForm = $(
+ Drupal.theme('ckeditorButtonGroupNameForm'),
+ );
const dialog = Drupal.dialog($ckeditorButtonGroupNameForm.get(0), {
title: Drupal.t('Button group name'),
dialogClass: 'ckeditor-name-toolbar-group',
const $widget = $form.parent();
$widget.find('.ui-dialog-titlebar-close').remove();
// Set a click handler on the input and button in the form.
- $widget.on('keypress.ckeditor', 'input, button', (event) => {
+ $widget.on('keypress.ckeditor', 'input, button', event => {
// React to enter key press.
if (event.keyCode === 13) {
const $target = $(event.currentTarget);
}
});
// Announce to the user that a modal dialog is open.
- let text = Drupal.t('Editing the name of the new button group in a dialog.');
- if (typeof $group.attr('data-drupal-ckeditor-toolbar-group-name') !== 'undefined') {
- text = Drupal.t('Editing the name of the "@groupName" button group in a dialog.', {
- '@groupName': $group.attr('data-drupal-ckeditor-toolbar-group-name'),
- });
+ let text = Drupal.t(
+ 'Editing the name of the new button group in a dialog.',
+ );
+ if (
+ typeof $group.attr('data-drupal-ckeditor-toolbar-group-name') !==
+ 'undefined'
+ ) {
+ text = Drupal.t(
+ 'Editing the name of the "@groupName" button group in a dialog.',
+ {
+ '@groupName': $group.attr(
+ 'data-drupal-ckeditor-toolbar-group-name',
+ ),
+ },
+ );
}
Drupal.announce(text);
},
$(event.target).remove();
},
});
+
// A modal dialog is used because the user must provide a button group
// name or cancel the button placement before taking any other action.
dialog.showModal();
- $(document.querySelector('.ckeditor-name-toolbar-group').querySelector('input'))
+ $(
+ document
+ .querySelector('.ckeditor-name-toolbar-group')
+ .querySelector('input'),
+ )
// When editing, set the "group name" input in the form to the current
// value.
.attr('value', $group.attr('data-drupal-ckeditor-toolbar-group-name'))
// Focus on the "group name" input in the form.
.trigger('focus');
},
-
};
/**
Drupal.behaviors.ckeditorAdminButtonPluginSettings = {
attach(context) {
const $context = $(context);
- const $ckeditorPluginSettings = $context.find('#ckeditor-plugin-settings').once('ckeditor-plugin-settings');
+ const $ckeditorPluginSettings = $context
+ .find('#ckeditor-plugin-settings')
+ .once('ckeditor-plugin-settings');
if ($ckeditorPluginSettings.length) {
// Hide all button-dependent plugin settings initially.
- $ckeditorPluginSettings.find('[data-ckeditor-buttons]').each(function () {
- const $this = $(this);
- if ($this.data('verticalTab')) {
- $this.data('verticalTab').tabHide();
- }
- else {
- // On very narrow viewports, Vertical Tabs are disabled.
- $this.hide();
- }
- $this.data('ckeditorButtonPluginSettingsActiveButtons', []);
- });
+ $ckeditorPluginSettings
+ .find('[data-ckeditor-buttons]')
+ .each(function() {
+ const $this = $(this);
+ if ($this.data('verticalTab')) {
+ $this.data('verticalTab').tabHide();
+ } else {
+ // On very narrow viewports, Vertical Tabs are disabled.
+ $this.hide();
+ }
+ $this.data('ckeditorButtonPluginSettingsActiveButtons', []);
+ });
// Whenever a button is added or removed, check if we should show or
// hide the corresponding plugin settings. (Note that upon
$context
.find('.ckeditor-toolbar-active')
.off('CKEditorToolbarChanged.ckeditorAdminPluginSettings')
- .on('CKEditorToolbarChanged.ckeditorAdminPluginSettings', (event, action, button) => {
- const $pluginSettings = $ckeditorPluginSettings
- .find(`[data-ckeditor-buttons~=${button}]`);
-
- // No settings for this button.
- if ($pluginSettings.length === 0) {
- return;
- }
-
- const verticalTab = $pluginSettings.data('verticalTab');
- const activeButtons = $pluginSettings.data('ckeditorButtonPluginSettingsActiveButtons');
- if (action === 'added') {
- activeButtons.push(button);
- // Show this plugin's settings if >=1 of its buttons are active.
- if (verticalTab) {
- verticalTab.tabShow();
- }
- else {
- // On very narrow viewports, Vertical Tabs remain fieldsets.
- $pluginSettings.show();
+ .on(
+ 'CKEditorToolbarChanged.ckeditorAdminPluginSettings',
+ (event, action, button) => {
+ const $pluginSettings = $ckeditorPluginSettings.find(
+ `[data-ckeditor-buttons~=${button}]`,
+ );
+
+ // No settings for this button.
+ if ($pluginSettings.length === 0) {
+ return;
}
- }
- else {
- // Remove this button from the list of active buttons.
- activeButtons.splice(activeButtons.indexOf(button), 1);
- // Show this plugin's settings 0 of its buttons are active.
- if (activeButtons.length === 0) {
+
+ const verticalTab = $pluginSettings.data('verticalTab');
+ const activeButtons = $pluginSettings.data(
+ 'ckeditorButtonPluginSettingsActiveButtons',
+ );
+ if (action === 'added') {
+ activeButtons.push(button);
+ // Show this plugin's settings if >=1 of its buttons are active.
if (verticalTab) {
- verticalTab.tabHide();
+ verticalTab.tabShow();
+ } else {
+ // On very narrow viewports, Vertical Tabs remain fieldsets.
+ $pluginSettings.show();
}
- else {
- // On very narrow viewports, Vertical Tabs are disabled.
- $pluginSettings.hide();
+ } else {
+ // Remove this button from the list of active buttons.
+ activeButtons.splice(activeButtons.indexOf(button), 1);
+ // Show this plugin's settings 0 of its buttons are active.
+ if (activeButtons.length === 0) {
+ if (verticalTab) {
+ verticalTab.tabHide();
+ } else {
+ // On very narrow viewports, Vertical Tabs are disabled.
+ $pluginSettings.hide();
+ }
}
}
- }
- $pluginSettings.data('ckeditorButtonPluginSettingsActiveButtons', activeButtons);
- });
+ $pluginSettings.data(
+ 'ckeditorButtonPluginSettingsActiveButtons',
+ activeButtons,
+ );
+ },
+ );
}
},
};
* @return {string}
* A HTML string for a CKEditor row.
*/
- Drupal.theme.ckeditorRow = function () {
+ Drupal.theme.ckeditorRow = function() {
return '<li class="ckeditor-row placeholder" role="group"><ul class="ckeditor-toolbar-groups clearfix"></ul></li>';
};
* @return {string}
* A HTML string for a CKEditor button group.
*/
- Drupal.theme.ckeditorToolbarGroup = function () {
+ Drupal.theme.ckeditorToolbarGroup = function() {
let group = '';
- group += `<li class="ckeditor-toolbar-group placeholder" role="presentation" aria-label="${Drupal.t('Place a button to create a new button group.')}">`;
- group += `<h3 class="ckeditor-toolbar-group-name">${Drupal.t('New group')}</h3>`;
- group += '<ul class="ckeditor-buttons ckeditor-toolbar-group-buttons" role="toolbar" data-drupal-ckeditor-button-sorting="target"></ul>';
+ group += `<li class="ckeditor-toolbar-group placeholder" role="presentation" aria-label="${Drupal.t(
+ 'Place a button to create a new button group.',
+ )}">`;
+ group += `<h3 class="ckeditor-toolbar-group-name">${Drupal.t(
+ 'New group',
+ )}</h3>`;
+ group +=
+ '<ul class="ckeditor-buttons ckeditor-toolbar-group-buttons" role="toolbar" data-drupal-ckeditor-button-sorting="target"></ul>';
group += '</li>';
return group;
};
* @return {string}
* A HTML string for the form for the title of a CKEditor button group.
*/
- Drupal.theme.ckeditorButtonGroupNameForm = function () {
+ Drupal.theme.ckeditorButtonGroupNameForm = function() {
return '<form><input name="group-name" required="required"></form>';
};
* @return {string}
* A HTML string for the button to toggle group names.
*/
- Drupal.theme.ckeditorButtonGroupNamesToggle = function () {
+ Drupal.theme.ckeditorButtonGroupNamesToggle = function() {
return '<button class="link ckeditor-groupnames-toggle" aria-pressed="false"></button>';
};
* @return {string}
* A HTML string for the button to create a name for a new button group.
*/
- Drupal.theme.ckeditorNewButtonGroup = function () {
- return `<li class="ckeditor-add-new-group"><button aria-label="${Drupal.t('Add a CKEditor button group to the end of this row.')}">${Drupal.t('Add group')}</button></li>`;
+ Drupal.theme.ckeditorNewButtonGroup = function() {
+ return `<li class="ckeditor-add-new-group"><button aria-label="${Drupal.t(
+ 'Add a CKEditor button group to the end of this row.',
+ )}">${Drupal.t('Add group')}</button></li>`;
};
-}(jQuery, Drupal, drupalSettings, _));
+})(jQuery, Drupal, drupalSettings, _);
projects / yaffs-website / blobdiff