2 * DO NOT EDIT THIS FILE.
3 * See the following change record for more information,
4 * https://www.drupal.org/node/2815083
8 (function ($, Drupal, drupalSettings, _) {
9 Drupal.ckeditor = Drupal.ckeditor || {};
11 Drupal.behaviors.ckeditorAdmin = {
12 attach: function attach(context) {
13 var $configurationForm = $(context).find('.ckeditor-toolbar-configuration').once('ckeditor-configuration');
14 if ($configurationForm.length) {
15 var $textarea = $configurationForm.find('.js-form-item-editor-settings-toolbar-button-groups').hide().find('textarea');
17 $configurationForm.append(drupalSettings.ckeditor.toolbarAdmin);
19 var model = Drupal.ckeditor.models.Model = new Drupal.ckeditor.Model({
21 activeEditorConfig: JSON.parse($textarea.val()),
22 hiddenEditorConfig: drupalSettings.ckeditor.hiddenCKEditorConfig
27 el: $('.ckeditor-toolbar-configuration')
29 Drupal.ckeditor.views = {
30 controller: new Drupal.ckeditor.ControllerView(viewDefaults),
31 visualView: new Drupal.ckeditor.VisualView(viewDefaults),
32 keyboardView: new Drupal.ckeditor.KeyboardView(viewDefaults),
33 auralView: new Drupal.ckeditor.AuralView(viewDefaults)
37 detach: function detach(context, settings, trigger) {
38 if (trigger !== 'unload') {
42 var $configurationForm = $(context).find('.ckeditor-toolbar-configuration').findOnce('ckeditor-configuration');
43 if ($configurationForm.length && Drupal.ckeditor.models && Drupal.ckeditor.models.Model) {
44 var config = Drupal.ckeditor.models.Model.toJSON().activeEditorConfig;
45 var buttons = Drupal.ckeditor.views.controller.getButtonList(config);
46 var $activeToolbar = $('.ckeditor-toolbar-configuration').find('.ckeditor-toolbar-active');
47 for (var i = 0; i < buttons.length; i++) {
48 $activeToolbar.trigger('CKEditorToolbarChanged', ['removed', buttons[i]]);
59 registerButtonMove: function registerButtonMove(view, $button, callback) {
60 var $group = $button.closest('.ckeditor-toolbar-group');
62 if ($group.hasClass('placeholder')) {
63 if (view.isProcessing) {
66 view.isProcessing = true;
68 Drupal.ckeditor.openGroupNameDialog(view, $group, callback);
70 view.model.set('isDirty', true);
74 registerGroupMove: function registerGroupMove(view, $group) {
75 var $row = $group.closest('.ckeditor-row');
76 if ($row.hasClass('placeholder')) {
77 $row.removeClass('placeholder');
80 $row.parent().children().each(function () {
82 if ($row.find('.ckeditor-toolbar-group').not('.placeholder').length === 0) {
83 $row.addClass('placeholder');
86 view.model.set('isDirty', true);
88 openGroupNameDialog: function openGroupNameDialog(view, $group, callback) {
89 callback = callback || function () {};
91 function validateForm(form) {
92 if (form.elements[0].value.length === 0) {
94 if (!$form.hasClass('errors')) {
95 $form.addClass('errors').find('input').addClass('error').attr('aria-invalid', 'true');
96 $('<div class="description" >' + Drupal.t('Please provide a name for the button group.') + '</div>').insertAfter(form.elements[0]);
103 function closeDialog(action, form) {
104 function shutdown() {
105 dialog.close(action);
107 delete view.isProcessing;
110 function namePlaceholderGroup($group, name) {
111 if ($group.hasClass('placeholder')) {
112 var groupID = 'ckeditor-toolbar-group-aria-label-for-' + Drupal.checkPlain(name.toLowerCase().replace(/\s/g, '-'));
113 $group.removeAttr('aria-label').attr('data-drupal-ckeditor-type', 'group').attr('tabindex', 0).children('.ckeditor-toolbar-group-name').attr('id', groupID).end().children('.ckeditor-toolbar-group-buttons').attr('aria-labelledby', groupID);
116 $group.attr('data-drupal-ckeditor-toolbar-group-name', name).children('.ckeditor-toolbar-group-name').text(name);
119 if (action === 'cancel') {
121 callback(false, $group);
125 if (form && validateForm(form)) {
129 if (action === 'apply') {
132 namePlaceholderGroup($group, Drupal.checkPlain(form.elements[0].value));
134 $group.closest('.ckeditor-row.placeholder').addBack().removeClass('placeholder');
136 callback(true, $group);
138 view.model.set('isDirty', true);
142 var $ckeditorButtonGroupNameForm = $(Drupal.theme('ckeditorButtonGroupNameForm'));
143 var dialog = Drupal.dialog($ckeditorButtonGroupNameForm.get(0), {
144 title: Drupal.t('Button group name'),
145 dialogClass: 'ckeditor-name-toolbar-group',
148 text: Drupal.t('Apply'),
149 click: function click() {
150 closeDialog('apply', this);
155 text: Drupal.t('Cancel'),
156 click: function click() {
157 closeDialog('cancel');
160 open: function open() {
163 var $widget = $form.parent();
164 $widget.find('.ui-dialog-titlebar-close').remove();
166 $widget.on('keypress.ckeditor', 'input, button', function (event) {
167 if (event.keyCode === 13) {
168 var $target = $(event.currentTarget);
169 var data = $target.data('ui-button');
170 var action = 'apply';
172 if (data && data.options && data.options.label) {
173 action = data.options.label.toLowerCase();
175 closeDialog(action, form);
176 event.stopPropagation();
177 event.stopImmediatePropagation();
178 event.preventDefault();
182 var text = Drupal.t('Editing the name of the new button group in a dialog.');
183 if (typeof $group.attr('data-drupal-ckeditor-toolbar-group-name') !== 'undefined') {
184 text = Drupal.t('Editing the name of the "@groupName" button group in a dialog.', {
185 '@groupName': $group.attr('data-drupal-ckeditor-toolbar-group-name')
188 Drupal.announce(text);
190 close: function close(event) {
191 $(event.target).remove();
197 $(document.querySelector('.ckeditor-name-toolbar-group').querySelector('input')).attr('value', $group.attr('data-drupal-ckeditor-toolbar-group-name')).trigger('focus');
201 Drupal.behaviors.ckeditorAdminButtonPluginSettings = {
202 attach: function attach(context) {
203 var $context = $(context);
204 var $ckeditorPluginSettings = $context.find('#ckeditor-plugin-settings').once('ckeditor-plugin-settings');
205 if ($ckeditorPluginSettings.length) {
206 $ckeditorPluginSettings.find('[data-ckeditor-buttons]').each(function () {
208 if ($this.data('verticalTab')) {
209 $this.data('verticalTab').tabHide();
213 $this.data('ckeditorButtonPluginSettingsActiveButtons', []);
216 $context.find('.ckeditor-toolbar-active').off('CKEditorToolbarChanged.ckeditorAdminPluginSettings').on('CKEditorToolbarChanged.ckeditorAdminPluginSettings', function (event, action, button) {
217 var $pluginSettings = $ckeditorPluginSettings.find('[data-ckeditor-buttons~=' + button + ']');
219 if ($pluginSettings.length === 0) {
223 var verticalTab = $pluginSettings.data('verticalTab');
224 var activeButtons = $pluginSettings.data('ckeditorButtonPluginSettingsActiveButtons');
225 if (action === 'added') {
226 activeButtons.push(button);
229 verticalTab.tabShow();
231 $pluginSettings.show();
234 activeButtons.splice(activeButtons.indexOf(button), 1);
236 if (activeButtons.length === 0) {
238 verticalTab.tabHide();
240 $pluginSettings.hide();
244 $pluginSettings.data('ckeditorButtonPluginSettingsActiveButtons', activeButtons);
250 Drupal.theme.ckeditorRow = function () {
251 return '<li class="ckeditor-row placeholder" role="group"><ul class="ckeditor-toolbar-groups clearfix"></ul></li>';
254 Drupal.theme.ckeditorToolbarGroup = function () {
256 group += '<li class="ckeditor-toolbar-group placeholder" role="presentation" aria-label="' + Drupal.t('Place a button to create a new button group.') + '">';
257 group += '<h3 class="ckeditor-toolbar-group-name">' + Drupal.t('New group') + '</h3>';
258 group += '<ul class="ckeditor-buttons ckeditor-toolbar-group-buttons" role="toolbar" data-drupal-ckeditor-button-sorting="target"></ul>';
263 Drupal.theme.ckeditorButtonGroupNameForm = function () {
264 return '<form><input name="group-name" required="required"></form>';
267 Drupal.theme.ckeditorButtonGroupNamesToggle = function () {
268 return '<button class="link ckeditor-groupnames-toggle" aria-pressed="false"></button>';
271 Drupal.theme.ckeditorNewButtonGroup = function () {
272 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>';
274 })(jQuery, Drupal, drupalSettings, _);