www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/ckeditor/js/views/VisualView.js

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