Chris@0: /**
Chris@0: * DO NOT EDIT THIS FILE.
Chris@0: * See the following change record for more information,
Chris@0: * https://www.drupal.org/node/2815083
Chris@0: * @preserve
Chris@0: **/
Chris@0: 
Chris@0: (function (Drupal, Backbone, $) {
Chris@0:   Drupal.ckeditor.VisualView = Backbone.View.extend({
Chris@0:     events: {
Chris@0:       'click .ckeditor-toolbar-group-name': 'onGroupNameClick',
Chris@0:       'click .ckeditor-groupnames-toggle': 'onGroupNamesToggleClick',
Chris@0:       'click .ckeditor-add-new-group button': 'onAddGroupButtonClick'
Chris@0:     },
Chris@0: 
Chris@0:     initialize: function initialize() {
Chris@0:       this.listenTo(this.model, 'change:isDirty change:groupNamesVisible', this.render);
Chris@0: 
Chris@0:       $(Drupal.theme('ckeditorButtonGroupNamesToggle')).prependTo(this.$el.find('#ckeditor-active-toolbar').parent());
Chris@0: 
Chris@0:       this.render();
Chris@0:     },
Chris@0:     render: function render(model, value, changedAttributes) {
Chris@0:       this.insertPlaceholders();
Chris@0:       this.applySorting();
Chris@0: 
Chris@0:       var groupNamesVisible = this.model.get('groupNamesVisible');
Chris@0: 
Chris@0:       if (changedAttributes && changedAttributes.changes && changedAttributes.changes.isDirty) {
Chris@0:         this.model.set({ groupNamesVisible: true }, { silent: true });
Chris@0:         groupNamesVisible = true;
Chris@0:       }
Chris@0:       this.$el.find('[data-toolbar="active"]').toggleClass('ckeditor-group-names-are-visible', groupNamesVisible);
Chris@0:       this.$el.find('.ckeditor-groupnames-toggle').text(groupNamesVisible ? Drupal.t('Hide group names') : Drupal.t('Show group names')).attr('aria-pressed', groupNamesVisible);
Chris@0: 
Chris@0:       return this;
Chris@0:     },
Chris@0:     onGroupNameClick: function onGroupNameClick(event) {
Chris@0:       var $group = $(event.currentTarget).closest('.ckeditor-toolbar-group');
Chris@0:       Drupal.ckeditor.openGroupNameDialog(this, $group);
Chris@0: 
Chris@0:       event.stopPropagation();
Chris@0:       event.preventDefault();
Chris@0:     },
Chris@0:     onGroupNamesToggleClick: function onGroupNamesToggleClick(event) {
Chris@0:       this.model.set('groupNamesVisible', !this.model.get('groupNamesVisible'));
Chris@0:       event.preventDefault();
Chris@0:     },
Chris@0:     onAddGroupButtonClick: function onAddGroupButtonClick(event) {
Chris@0:       function insertNewGroup(success, $group) {
Chris@0:         if (success) {
Chris@0:           $group.appendTo($(event.currentTarget).closest('.ckeditor-row').children('.ckeditor-toolbar-groups'));
Chris@0: 
Chris@0:           $group.trigger('focus');
Chris@0:         }
Chris@0:       }
Chris@0: 
Chris@0:       Drupal.ckeditor.openGroupNameDialog(this, $(Drupal.theme('ckeditorToolbarGroup')), insertNewGroup);
Chris@0: 
Chris@0:       event.preventDefault();
Chris@0:     },
Chris@0:     endGroupDrag: function endGroupDrag(event, ui) {
Chris@0:       var view = this;
Chris@0:       Drupal.ckeditor.registerGroupMove(this, ui.item, function (success) {
Chris@0:         if (!success) {
Chris@0:           view.$el.find('.ckeditor-toolbar-configuration').find('.ui-sortable').sortable('cancel');
Chris@0:         }
Chris@0:       });
Chris@0:     },
Chris@0:     startButtonDrag: function startButtonDrag(event, ui) {
Chris@0:       this.$el.find('a:focus').trigger('blur');
Chris@0: 
Chris@0:       this.model.set('groupNamesVisible', true);
Chris@0:     },
Chris@0:     endButtonDrag: function endButtonDrag(event, ui) {
Chris@0:       var view = this;
Chris@0:       Drupal.ckeditor.registerButtonMove(this, ui.item, function (success) {
Chris@0:         if (!success) {
Chris@0:           view.$el.find('.ui-sortable').sortable('cancel');
Chris@0:         }
Chris@0: 
Chris@0:         ui.item.find('a').trigger('focus');
Chris@0:       });
Chris@0:     },
Chris@0:     applySorting: function applySorting() {
Chris@0:       this.$el.find('.ckeditor-buttons').not('.ui-sortable').sortable({
Chris@0:         connectWith: '.ckeditor-buttons',
Chris@0:         placeholder: 'ckeditor-button-placeholder',
Chris@0:         forcePlaceholderSize: true,
Chris@0:         tolerance: 'pointer',
Chris@0:         cursor: 'move',
Chris@0:         start: this.startButtonDrag.bind(this),
Chris@0: 
Chris@0:         stop: this.endButtonDrag.bind(this)
Chris@0:       }).disableSelection();
Chris@0: 
Chris@0:       this.$el.find('.ckeditor-toolbar-groups').not('.ui-sortable').sortable({
Chris@0:         connectWith: '.ckeditor-toolbar-groups',
Chris@0:         cancel: '.ckeditor-add-new-group',
Chris@0:         placeholder: 'ckeditor-toolbar-group-placeholder',
Chris@0:         forcePlaceholderSize: true,
Chris@0:         cursor: 'move',
Chris@0:         stop: this.endGroupDrag.bind(this)
Chris@0:       });
Chris@0: 
Chris@0:       this.$el.find('.ckeditor-multiple-buttons li').draggable({
Chris@0:         connectToSortable: '.ckeditor-toolbar-active .ckeditor-buttons',
Chris@0:         helper: 'clone'
Chris@0:       });
Chris@0:     },
Chris@0:     insertPlaceholders: function insertPlaceholders() {
Chris@0:       this.insertPlaceholderRow();
Chris@0:       this.insertNewGroupButtons();
Chris@0:     },
Chris@0:     insertPlaceholderRow: function insertPlaceholderRow() {
Chris@0:       var $rows = this.$el.find('.ckeditor-row');
Chris@0: 
Chris@0:       if (!$rows.eq(-1).hasClass('placeholder')) {
Chris@0:         this.$el.find('.ckeditor-toolbar-active').children('.ckeditor-active-toolbar-configuration').append(Drupal.theme('ckeditorRow'));
Chris@0:       }
Chris@0: 
Chris@0:       $rows = this.$el.find('.ckeditor-row');
Chris@0: 
Chris@0:       var len = $rows.length;
Chris@0:       $rows.filter(function (index, row) {
Chris@0:         if (index + 1 === len) {
Chris@0:           return false;
Chris@0:         }
Chris@0:         return $(row).find('.ckeditor-toolbar-group').not('.placeholder').length === 0;
Chris@0:       }).remove();
Chris@0:     },
Chris@0:     insertNewGroupButtons: function insertNewGroupButtons() {
Chris@0:       this.$el.find('.ckeditor-row').each(function () {
Chris@0:         var $row = $(this);
Chris@0:         var $groups = $row.find('.ckeditor-toolbar-group');
Chris@0:         var $button = $row.find('.ckeditor-add-new-group');
Chris@0:         if ($button.length === 0) {
Chris@0:           $row.children('.ckeditor-toolbar-groups').append(Drupal.theme('ckeditorNewButtonGroup'));
Chris@0:         } else if (!$groups.eq(-1).hasClass('ckeditor-add-new-group')) {
Chris@0:             $button.appendTo($row.children('.ckeditor-toolbar-groups'));
Chris@0:           }
Chris@0:       });
Chris@0:     }
Chris@0:   });
Chris@0: })(Drupal, Backbone, jQuery);