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