VisualView.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  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, Backbone, $, Sortable) {
  8. Drupal.ckeditor.VisualView = Backbone.View.extend({
  9. events: {
  10. 'click .ckeditor-toolbar-group-name': 'onGroupNameClick',
  11. 'click .ckeditor-groupnames-toggle': 'onGroupNamesToggleClick',
  12. 'click .ckeditor-add-new-group button': 'onAddGroupButtonClick'
  13. },
  14. initialize: function initialize() {
  15. this.listenTo(this.model, 'change:isDirty change:groupNamesVisible', this.render);
  16. $(Drupal.theme('ckeditorButtonGroupNamesToggle')).prependTo(this.$el.find('#ckeditor-active-toolbar').parent());
  17. this.render();
  18. },
  19. render: function render(model, value, changedAttributes) {
  20. this.insertPlaceholders();
  21. this.applySorting();
  22. var groupNamesVisible = this.model.get('groupNamesVisible');
  23. if (changedAttributes && changedAttributes.changes && changedAttributes.changes.isDirty) {
  24. this.model.set({ groupNamesVisible: true }, { silent: true });
  25. groupNamesVisible = true;
  26. }
  27. this.$el.find('[data-toolbar="active"]').toggleClass('ckeditor-group-names-are-visible', groupNamesVisible);
  28. this.$el.find('.ckeditor-groupnames-toggle').text(groupNamesVisible ? Drupal.t('Hide group names') : Drupal.t('Show group names')).attr('aria-pressed', groupNamesVisible);
  29. return this;
  30. },
  31. onGroupNameClick: function onGroupNameClick(event) {
  32. var $group = $(event.currentTarget).closest('.ckeditor-toolbar-group');
  33. Drupal.ckeditor.openGroupNameDialog(this, $group);
  34. event.stopPropagation();
  35. event.preventDefault();
  36. },
  37. onGroupNamesToggleClick: function onGroupNamesToggleClick(event) {
  38. this.model.set('groupNamesVisible', !this.model.get('groupNamesVisible'));
  39. event.preventDefault();
  40. },
  41. onAddGroupButtonClick: function onAddGroupButtonClick(event) {
  42. function insertNewGroup(success, $group) {
  43. if (success) {
  44. $group.appendTo($(event.currentTarget).closest('.ckeditor-row').children('.ckeditor-toolbar-groups'));
  45. $group.trigger('focus');
  46. }
  47. }
  48. Drupal.ckeditor.openGroupNameDialog(this, $(Drupal.theme('ckeditorToolbarGroup')), insertNewGroup);
  49. event.preventDefault();
  50. },
  51. endGroupDrag: function endGroupDrag(event) {
  52. var $item = $(event.item);
  53. Drupal.ckeditor.registerGroupMove(this, $item);
  54. },
  55. startButtonDrag: function startButtonDrag(event) {
  56. this.$el.find('a:focus').trigger('blur');
  57. this.model.set('groupNamesVisible', true);
  58. },
  59. endButtonDrag: function endButtonDrag(event) {
  60. var $item = $(event.item);
  61. Drupal.ckeditor.registerButtonMove(this, $item, function (success) {
  62. $item.find('a').trigger('focus');
  63. });
  64. },
  65. applySorting: function applySorting() {
  66. var _this = this;
  67. Array.prototype.forEach.call(this.el.querySelectorAll('.ckeditor-buttons:not(.js-sortable)'), function (buttons) {
  68. buttons.classList.add('js-sortable');
  69. Sortable.create(buttons, {
  70. ghostClass: 'ckeditor-button-placeholder',
  71. group: 'ckeditor-buttons',
  72. onStart: _this.startButtonDrag.bind(_this),
  73. onEnd: _this.endButtonDrag.bind(_this)
  74. });
  75. });
  76. Array.prototype.forEach.call(this.el.querySelectorAll('.ckeditor-toolbar-groups:not(.js-sortable)'), function (buttons) {
  77. buttons.classList.add('js-sortable');
  78. Sortable.create(buttons, {
  79. ghostClass: 'ckeditor-toolbar-group-placeholder',
  80. onEnd: _this.endGroupDrag.bind(_this)
  81. });
  82. });
  83. Array.prototype.forEach.call(this.el.querySelectorAll('.ckeditor-multiple-buttons:not(.js-sortable)'), function (buttons) {
  84. buttons.classList.add('js-sortable');
  85. Sortable.create(buttons, {
  86. group: {
  87. name: 'ckeditor-buttons',
  88. pull: 'clone'
  89. },
  90. onEnd: _this.endButtonDrag.bind(_this)
  91. });
  92. });
  93. },
  94. insertPlaceholders: function insertPlaceholders() {
  95. this.insertPlaceholderRow();
  96. this.insertNewGroupButtons();
  97. },
  98. insertPlaceholderRow: function insertPlaceholderRow() {
  99. var $rows = this.$el.find('.ckeditor-row');
  100. if (!$rows.eq(-1).hasClass('placeholder')) {
  101. this.$el.find('.ckeditor-toolbar-active').children('.ckeditor-active-toolbar-configuration').append(Drupal.theme('ckeditorRow'));
  102. }
  103. $rows = this.$el.find('.ckeditor-row');
  104. var len = $rows.length;
  105. $rows.filter(function (index, row) {
  106. if (index + 1 === len) {
  107. return false;
  108. }
  109. return $(row).find('.ckeditor-toolbar-group').not('.placeholder').length === 0;
  110. }).remove();
  111. },
  112. insertNewGroupButtons: function insertNewGroupButtons() {
  113. this.$el.find('.ckeditor-row').each(function () {
  114. var $row = $(this);
  115. var $groups = $row.find('.ckeditor-toolbar-group');
  116. var $button = $row.find('.ckeditor-add-new-group');
  117. if ($button.length === 0) {
  118. $row.children('.ckeditor-toolbar-groups').append(Drupal.theme('ckeditorNewButtonGroup'));
  119. } else if (!$groups.eq(-1).hasClass('ckeditor-add-new-group')) {
  120. $button.appendTo($row.children('.ckeditor-toolbar-groups'));
  121. }
  122. });
  123. }
  124. });
  125. })(Drupal, Backbone, jQuery, Sortable);