ckeditor.admin.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. /**
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/2815083
  5. * @preserve
  6. **/
  7. (function ($, Drupal, drupalSettings, _) {
  8. Drupal.ckeditor = Drupal.ckeditor || {};
  9. Drupal.behaviors.ckeditorAdmin = {
  10. attach: function attach(context) {
  11. var $configurationForm = $(context).find('.ckeditor-toolbar-configuration').once('ckeditor-configuration');
  12. if ($configurationForm.length) {
  13. var $textarea = $configurationForm.find('.js-form-item-editor-settings-toolbar-button-groups').hide().find('textarea');
  14. $configurationForm.append(drupalSettings.ckeditor.toolbarAdmin);
  15. Drupal.ckeditor.models.Model = new Drupal.ckeditor.Model({
  16. $textarea: $textarea,
  17. activeEditorConfig: JSON.parse($textarea.val()),
  18. hiddenEditorConfig: drupalSettings.ckeditor.hiddenCKEditorConfig
  19. });
  20. var viewDefaults = {
  21. model: Drupal.ckeditor.models.Model,
  22. el: $('.ckeditor-toolbar-configuration')
  23. };
  24. Drupal.ckeditor.views = {
  25. controller: new Drupal.ckeditor.ControllerView(viewDefaults),
  26. visualView: new Drupal.ckeditor.VisualView(viewDefaults),
  27. keyboardView: new Drupal.ckeditor.KeyboardView(viewDefaults),
  28. auralView: new Drupal.ckeditor.AuralView(viewDefaults)
  29. };
  30. }
  31. },
  32. detach: function detach(context, settings, trigger) {
  33. if (trigger !== 'unload') {
  34. return;
  35. }
  36. var $configurationForm = $(context).find('.ckeditor-toolbar-configuration').findOnce('ckeditor-configuration');
  37. if ($configurationForm.length && Drupal.ckeditor.models && Drupal.ckeditor.models.Model) {
  38. var config = Drupal.ckeditor.models.Model.toJSON().activeEditorConfig;
  39. var buttons = Drupal.ckeditor.views.controller.getButtonList(config);
  40. var $activeToolbar = $('.ckeditor-toolbar-configuration').find('.ckeditor-toolbar-active');
  41. for (var i = 0; i < buttons.length; i++) {
  42. $activeToolbar.trigger('CKEditorToolbarChanged', ['removed', buttons[i]]);
  43. }
  44. }
  45. }
  46. };
  47. Drupal.ckeditor = {
  48. views: {},
  49. models: {},
  50. registerButtonMove: function registerButtonMove(view, $button, callback) {
  51. var $group = $button.closest('.ckeditor-toolbar-group');
  52. if ($group.hasClass('placeholder')) {
  53. if (view.isProcessing) {
  54. return;
  55. }
  56. view.isProcessing = true;
  57. Drupal.ckeditor.openGroupNameDialog(view, $group, callback);
  58. } else {
  59. view.model.set('isDirty', true);
  60. callback(true);
  61. }
  62. },
  63. registerGroupMove: function registerGroupMove(view, $group) {
  64. var $row = $group.closest('.ckeditor-row');
  65. if ($row.hasClass('placeholder')) {
  66. $row.removeClass('placeholder');
  67. }
  68. $row.parent().children().each(function () {
  69. $row = $(this);
  70. if ($row.find('.ckeditor-toolbar-group').not('.placeholder').length === 0) {
  71. $row.addClass('placeholder');
  72. }
  73. });
  74. view.model.set('isDirty', true);
  75. },
  76. openGroupNameDialog: function openGroupNameDialog(view, $group, callback) {
  77. callback = callback || function () {};
  78. function validateForm(form) {
  79. if (form.elements[0].value.length === 0) {
  80. var $form = $(form);
  81. if (!$form.hasClass('errors')) {
  82. $form.addClass('errors').find('input').addClass('error').attr('aria-invalid', 'true');
  83. $('<div class="description" >' + Drupal.t('Please provide a name for the button group.') + '</div>').insertAfter(form.elements[0]);
  84. }
  85. return true;
  86. }
  87. return false;
  88. }
  89. function closeDialog(action, form) {
  90. function shutdown() {
  91. dialog.close(action);
  92. delete view.isProcessing;
  93. }
  94. function namePlaceholderGroup($group, name) {
  95. if ($group.hasClass('placeholder')) {
  96. var groupID = 'ckeditor-toolbar-group-aria-label-for-' + Drupal.checkPlain(name.toLowerCase().replace(/\s/g, '-'));
  97. $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);
  98. }
  99. $group.attr('data-drupal-ckeditor-toolbar-group-name', name).children('.ckeditor-toolbar-group-name').text(name);
  100. }
  101. if (action === 'cancel') {
  102. shutdown();
  103. callback(false, $group);
  104. return;
  105. }
  106. if (form && validateForm(form)) {
  107. return;
  108. }
  109. if (action === 'apply') {
  110. shutdown();
  111. namePlaceholderGroup($group, Drupal.checkPlain(form.elements[0].value));
  112. $group.closest('.ckeditor-row.placeholder').addBack().removeClass('placeholder');
  113. callback(true, $group);
  114. view.model.set('isDirty', true);
  115. }
  116. }
  117. var $ckeditorButtonGroupNameForm = $(Drupal.theme('ckeditorButtonGroupNameForm'));
  118. var dialog = Drupal.dialog($ckeditorButtonGroupNameForm.get(0), {
  119. title: Drupal.t('Button group name'),
  120. dialogClass: 'ckeditor-name-toolbar-group',
  121. resizable: false,
  122. buttons: [{
  123. text: Drupal.t('Apply'),
  124. click: function click() {
  125. closeDialog('apply', this);
  126. },
  127. primary: true
  128. }, {
  129. text: Drupal.t('Cancel'),
  130. click: function click() {
  131. closeDialog('cancel');
  132. }
  133. }],
  134. open: function open() {
  135. var form = this;
  136. var $form = $(this);
  137. var $widget = $form.parent();
  138. $widget.find('.ui-dialog-titlebar-close').remove();
  139. $widget.on('keypress.ckeditor', 'input, button', function (event) {
  140. if (event.keyCode === 13) {
  141. var $target = $(event.currentTarget);
  142. var data = $target.data('ui-button');
  143. var action = 'apply';
  144. if (data && data.options && data.options.label) {
  145. action = data.options.label.toLowerCase();
  146. }
  147. closeDialog(action, form);
  148. event.stopPropagation();
  149. event.stopImmediatePropagation();
  150. event.preventDefault();
  151. }
  152. });
  153. var text = Drupal.t('Editing the name of the new button group in a dialog.');
  154. if (typeof $group.attr('data-drupal-ckeditor-toolbar-group-name') !== 'undefined') {
  155. text = Drupal.t('Editing the name of the "@groupName" button group in a dialog.', {
  156. '@groupName': $group.attr('data-drupal-ckeditor-toolbar-group-name')
  157. });
  158. }
  159. Drupal.announce(text);
  160. },
  161. close: function close(event) {
  162. $(event.target).remove();
  163. }
  164. });
  165. dialog.showModal();
  166. $(document.querySelector('.ckeditor-name-toolbar-group').querySelector('input')).attr('value', $group.attr('data-drupal-ckeditor-toolbar-group-name')).trigger('focus');
  167. }
  168. };
  169. Drupal.behaviors.ckeditorAdminButtonPluginSettings = {
  170. attach: function attach(context) {
  171. var $context = $(context);
  172. var $ckeditorPluginSettings = $context.find('#ckeditor-plugin-settings').once('ckeditor-plugin-settings');
  173. if ($ckeditorPluginSettings.length) {
  174. $ckeditorPluginSettings.find('[data-ckeditor-buttons]').each(function () {
  175. var $this = $(this);
  176. if ($this.data('verticalTab')) {
  177. $this.data('verticalTab').tabHide();
  178. } else {
  179. $this.hide();
  180. }
  181. $this.data('ckeditorButtonPluginSettingsActiveButtons', []);
  182. });
  183. $context.find('.ckeditor-toolbar-active').off('CKEditorToolbarChanged.ckeditorAdminPluginSettings').on('CKEditorToolbarChanged.ckeditorAdminPluginSettings', function (event, action, button) {
  184. var $pluginSettings = $ckeditorPluginSettings.find('[data-ckeditor-buttons~=' + button + ']');
  185. if ($pluginSettings.length === 0) {
  186. return;
  187. }
  188. var verticalTab = $pluginSettings.data('verticalTab');
  189. var activeButtons = $pluginSettings.data('ckeditorButtonPluginSettingsActiveButtons');
  190. if (action === 'added') {
  191. activeButtons.push(button);
  192. if (verticalTab) {
  193. verticalTab.tabShow();
  194. } else {
  195. $pluginSettings.show();
  196. }
  197. } else {
  198. activeButtons.splice(activeButtons.indexOf(button), 1);
  199. if (activeButtons.length === 0) {
  200. if (verticalTab) {
  201. verticalTab.tabHide();
  202. } else {
  203. $pluginSettings.hide();
  204. }
  205. }
  206. }
  207. $pluginSettings.data('ckeditorButtonPluginSettingsActiveButtons', activeButtons);
  208. });
  209. }
  210. }
  211. };
  212. Drupal.theme.ckeditorRow = function () {
  213. return '<li class="ckeditor-row placeholder" role="group"><ul class="ckeditor-toolbar-groups clearfix"></ul></li>';
  214. };
  215. Drupal.theme.ckeditorToolbarGroup = function () {
  216. var group = '';
  217. group += '<li class="ckeditor-toolbar-group placeholder" role="presentation" aria-label="' + Drupal.t('Place a button to create a new button group.') + '">';
  218. group += '<h3 class="ckeditor-toolbar-group-name">' + Drupal.t('New group') + '</h3>';
  219. group += '<ul class="ckeditor-buttons ckeditor-toolbar-group-buttons" role="toolbar" data-drupal-ckeditor-button-sorting="target"></ul>';
  220. group += '</li>';
  221. return group;
  222. };
  223. Drupal.theme.ckeditorButtonGroupNameForm = function () {
  224. return '<form><input name="group-name" required="required"></form>';
  225. };
  226. Drupal.theme.ckeditorButtonGroupNamesToggle = function () {
  227. return '<button class="link ckeditor-groupnames-toggle" aria-pressed="false"></button>';
  228. };
  229. Drupal.theme.ckeditorNewButtonGroup = function () {
  230. 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>';
  231. };
  232. })(jQuery, Drupal, drupalSettings, _);