cmmr2012-drupal-site: core/modules/ckeditor/js/views/KeyboardView.es6.js comparison

comparison core/modules/ckeditor/js/views/KeyboardView.es6.js @ 4:a9cd425dd02b

Update, including to Drupal core 8.6.10

author	Chris Cannam
date	Thu, 28 Feb 2019 13:11:55 +0000
parents	c75dbcec494b
children

comparison

equal deleted inserted replaced

-:307d7a7fd348
+:a9cd425dd02b
 /**
 * @file
 * Backbone View providing the aural view of CKEditor keyboard UX configuration.
 */
-(function ($, Drupal, Backbone, _) {
+(function($, Drupal, Backbone, _) {
-Drupal.ckeditor.KeyboardView = Backbone.View.extend(/** @lends Drupal.ckeditor.KeyboardView# */{
+Drupal.ckeditor.KeyboardView = Backbone.View.extend(
+/** @lends Drupal.ckeditor.KeyboardView# */ {
 /**
 * Backbone View for CKEditor toolbar configuration; keyboard UX.
 *
 * @constructs
 *
 * @augments Backbone.View
 */
 initialize() {
 // Add keyboard arrow support.
-this.$el.on('keydown.ckeditor', '.ckeditor-buttons a, .ckeditor-multiple-buttons a', this.onPressButton.bind(this));
+this.$el.on(
-this.$el.on('keydown.ckeditor', '[data-drupal-ckeditor-type="group"]', this.onPressGroup.bind(this));
+'keydown.ckeditor',
-},
+'.ckeditor-buttons a, .ckeditor-multiple-buttons a',
+this.onPressButton.bind(this),
-/**
+);
-* @inheritdoc
+this.$el.on(
-*/
+'keydown.ckeditor',
-render() {
+'[data-drupal-ckeditor-type="group"]',
-},
+this.onPressGroup.bind(this),
+);
-/**
+},
-* Handles keypresses on a CKEditor configuration button.
-*
+/**
-* @param {jQuery.Event} event
+* @inheritdoc
-*   The keypress event triggered.
+*/
-*/
+render() {},
-onPressButton(event) {
-const upDownKeys = [
+/**
-38, // Up arrow.
+* Handles keypresses on a CKEditor configuration button.
-63232, // Safari up arrow.
+*
-40, // Down arrow.
+* @param {jQuery.Event} event
-63233, // Safari down arrow.
+*   The keypress event triggered.
-];
+*/
-const leftRightKeys = [
+onPressButton(event) {
-37, // Left arrow.
+const upDownKeys = [
-63234, // Safari left arrow.
+38, // Up arrow.
-39, // Right arrow.
+63232, // Safari up arrow.
-63235, // Safari right arrow.
+40, // Down arrow.
-];
+63233, // Safari down arrow.
+];
-// Respond to an enter key press. Prevent the bubbling of the enter key
+const leftRightKeys = [
-// press to the button group parent element.
+37, // Left arrow.
-if (event.keyCode === 13) {
+63234, // Safari left arrow.
-event.stopPropagation();
+39, // Right arrow.
-}
+63235, // Safari right arrow.
+];
-// Only take action when a direction key is pressed.
-if (_.indexOf(_.union(upDownKeys, leftRightKeys), event.keyCode) > -1) {
+// Respond to an enter key press. Prevent the bubbling of the enter key
-let view = this;
+// press to the button group parent element.
-let $target = $(event.currentTarget);
+if (event.keyCode === 13) {
-let $button = $target.parent();
+event.stopPropagation();
-const $container = $button.parent();
-let $group = $button.closest('.ckeditor-toolbar-group');
-let $row;
-const containerType = $container.data('drupal-ckeditor-button-sorting');
-const $availableButtons = this.$el.find('[data-drupal-ckeditor-button-sorting="source"]');
-const $activeButtons = this.$el.find('.ckeditor-toolbar-active');
-// The current location of the button, just in case it needs to be put
-// back.
-const $originalGroup = $group;
-let dir;
-// Move available buttons between their container and the active
-// toolbar.
-if (containerType === 'source') {
-// Move the button to the active toolbar configuration when the down
-// or up keys are pressed.
-if (_.indexOf([40, 63233], event.keyCode) > -1) {
-// Move the button to the first row, first button group index
-// position.
-$activeButtons.find('.ckeditor-toolbar-group-buttons').eq(0).prepend($button);
-}
 }
-else if (containerType === 'target') {
-// Move buttons between sibling buttons in a group and between groups.
+// Only take action when a direction key is pressed.
-if (_.indexOf(leftRightKeys, event.keyCode) > -1) {
+if (_.indexOf(_.union(upDownKeys, leftRightKeys), event.keyCode) > -1) {
-// Move left.
+let view = this;
-const $siblings = $container.children();
+let $target = $(event.currentTarget);
-const index = $siblings.index($button);
+let $button = $target.parent();
-if (_.indexOf([37, 63234], event.keyCode) > -1) {
+const $container = $button.parent();
-// Move between sibling buttons.
+let $group = $button.closest('.ckeditor-toolbar-group');
-if (index > 0) {
+let $row;
-$button.insertBefore($container.children().eq(index - 1));
+const containerType = $container.data(
-}
+'drupal-ckeditor-button-sorting',
-// Move between button groups and rows.
+);
-else {
+const $availableButtons = this.$el.find(
-// Move between button groups.
+'[data-drupal-ckeditor-button-sorting="source"]',
-$group = $container.parent().prev();
+);
-if ($group.length > 0) {
+const $activeButtons = this.$el.find('.ckeditor-toolbar-active');
-$group.find('.ckeditor-toolbar-group-buttons').append($button);
+// The current location of the button, just in case it needs to be put
-}
+// back.
-// Wrap between rows.
+const $originalGroup = $group;
+let dir;
+// Move available buttons between their container and the active
+// toolbar.
+if (containerType === 'source') {
+// Move the button to the active toolbar configuration when the down
+// or up keys are pressed.
+if (_.indexOf([40, 63233], event.keyCode) > -1) {
+// Move the button to the first row, first button group index
+// position.
+$activeButtons
+.find('.ckeditor-toolbar-group-buttons')
+.eq(0)
+.prepend($button);
+}
+} else if (containerType === 'target') {
+// Move buttons between sibling buttons in a group and between groups.
+if (_.indexOf(leftRightKeys, event.keyCode) > -1) {
+// Move left.
+const $siblings = $container.children();
+const index = $siblings.index($button);
+if (_.indexOf([37, 63234], event.keyCode) > -1) {
+// Move between sibling buttons.
+if (index > 0) {
+$button.insertBefore($container.children().eq(index - 1));
+}
+// Move between button groups and rows.
+else {
+// Move between button groups.
+$group = $container.parent().prev();
+if ($group.length > 0) {
+$group
+.find('.ckeditor-toolbar-group-buttons')
+.append($button);
+}
+// Wrap between rows.
+else {
+$container
+.closest('.ckeditor-row')
+.prev()
+.find('.ckeditor-toolbar-group')
+.not('.placeholder')
+.find('.ckeditor-toolbar-group-buttons')
+.eq(-1)
+.append($button);
+}
+}
+}
+// Move right.
+else if (_.indexOf([39, 63235], event.keyCode) > -1) {
+// Move between sibling buttons.
+if (index < $siblings.length - 1) {
+$button.insertAfter($container.children().eq(index + 1));
+}
+// Move between button groups. Moving right at the end of a row
+// will create a new group.
 else {
 $container
-.closest('.ckeditor-row')
+.parent()
-.prev()
+.next()
-.find('.ckeditor-toolbar-group')
-.not('.placeholder')
 .find('.ckeditor-toolbar-group-buttons')
-.eq(-1)
+.prepend($button);
-.append($button);
+}
 }
 }
-}
+// Move buttons between rows and the available button set.
-// Move right.
+else if (_.indexOf(upDownKeys, event.keyCode) > -1) {
-else if (_.indexOf([39, 63235], event.keyCode) > -1) {
+dir =
-// Move between sibling buttons.
+_.indexOf([38, 63232], event.keyCode) > -1 ? 'prev' : 'next';
-if (index < ($siblings.length - 1)) {
+$row = $container.closest('.ckeditor-row')[dir]();
-$button.insertAfter($container.children().eq(index + 1));
+// Move the button back into the available button set.
-}
+if (dir === 'prev' && $row.length === 0) {
-// Move between button groups. Moving right at the end of a row
+// If this is a divider, just destroy it.
-// will create a new group.
+if ($button.data('drupal-ckeditor-type') === 'separator') {
-else {
+$button.off().remove();
-$container.parent().next().find('.ckeditor-toolbar-group-buttons').prepend($button);
+// Focus on the first button in the active toolbar.
-}
+$activeButtons
-}
+.find('.ckeditor-toolbar-group-buttons')
-}
+.eq(0)
-// Move buttons between rows and the available button set.
+.children()
-else if (_.indexOf(upDownKeys, event.keyCode) > -1) {
+.eq(0)
-dir = (_.indexOf([38, 63232], event.keyCode) > -1) ? 'prev' : 'next';
+.children()
-$row = $container.closest('.ckeditor-row')[dir]();
+.trigger('focus');
-// Move the button back into the available button set.
+}
-if (dir === 'prev' && $row.length === 0) {
+// Otherwise, move it.
-// If this is a divider, just destroy it.
+else {
-if ($button.data('drupal-ckeditor-type') === 'separator') {
+$availableButtons.prepend($button);
-$button
+}
-.off()
+} else {
-.remove();
+$row
-// Focus on the first button in the active toolbar.
-$activeButtons
 .find('.ckeditor-toolbar-group-buttons')
 .eq(0)
+.prepend($button);
+}
+}
+}
+// Move dividers between their container and the active toolbar.
+else if (containerType === 'dividers') {
+// Move the button to the active toolbar configuration when the down
+// or up keys are pressed.
+if (_.indexOf([40, 63233], event.keyCode) > -1) {
+// Move the button to the first row, first button group index
+// position.
+$button = $button.clone(true);
+$activeButtons
+.find('.ckeditor-toolbar-group-buttons')
+.eq(0)
+.prepend($button);
+$target = $button.children();
+}
+}
+view = this;
+// Attempt to move the button to the new toolbar position.
+Drupal.ckeditor.registerButtonMove(this, $button, result => {
+// Put the button back if the registration failed.
+// If the button was in a row, then it was in the active toolbar
+// configuration. The button was probably placed in a new group, but
+// that action was canceled.
+if (!result && $originalGroup) {
+$originalGroup.find('.ckeditor-buttons').append($button);
+}
+// Otherwise refresh the sortables to acknowledge the new button
+// positions.
+else {
+view.$el.find('.ui-sortable').sortable('refresh');
+}
+// Refocus the target button so that the user can continue from a
+// known place.
+$target.trigger('focus');
+});
+event.preventDefault();
+event.stopPropagation();
+}
+},
+/**
+* Handles keypresses on a CKEditor configuration group.
+*
+* @param {jQuery.Event} event
+*   The keypress event triggered.
+*/
+onPressGroup(event) {
+const upDownKeys = [
+38, // Up arrow.
+63232, // Safari up arrow.
+40, // Down arrow.
+63233, // Safari down arrow.
+];
+const leftRightKeys = [
+37, // Left arrow.
+63234, // Safari left arrow.
+39, // Right arrow.
+63235, // Safari right arrow.
+];
+// Respond to an enter key press.
+if (event.keyCode === 13) {
+const view = this;
+// Open the group renaming dialog in the next evaluation cycle so that
+// this event can be cancelled and the bubbling wiped out. Otherwise,
+// Firefox has issues because the page focus is shifted to the dialog
+// along with the keydown event.
+window.setTimeout(() => {
+Drupal.ckeditor.openGroupNameDialog(view, $(event.currentTarget));
+}, 0);
+event.preventDefault();
+event.stopPropagation();
+}
+// Respond to direction key presses.
+if (_.indexOf(_.union(upDownKeys, leftRightKeys), event.keyCode) > -1) {
+const $group = $(event.currentTarget);
+const $container = $group.parent();
+const $siblings = $container.children();
+let index;
+let dir;
+// Move groups between sibling groups.
+if (_.indexOf(leftRightKeys, event.keyCode) > -1) {
+index = $siblings.index($group);
+// Move left between sibling groups.
+if (_.indexOf([37, 63234], event.keyCode) > -1) {
+if (index > 0) {
+$group.insertBefore($siblings.eq(index - 1));
+}
+// Wrap between rows. Insert the group before the placeholder group
+// at the end of the previous row.
+else {
+const $rowChildElement = $container
+.closest('.ckeditor-row')
+.prev()
+.find('.ckeditor-toolbar-groups')
 .children()
-.eq(0)
+.eq(-1);
-.children()
+$group.insertBefore($rowChildElement);
-.trigger('focus');
+}
 }
-// Otherwise, move it.
+// Move right between sibling groups.
+else if (_.indexOf([39, 63235], event.keyCode) > -1) {
+// Move to the right if the next group is not a placeholder.
+if (!$siblings.eq(index + 1).hasClass('placeholder')) {
+$group.insertAfter($container.children().eq(index + 1));
+}
+// Wrap group between rows.
 else {
-$availableButtons.prepend($button);
+$container
-}
+.closest('.ckeditor-row')
-}
+.next()
-else {
+.find('.ckeditor-toolbar-groups')
-$row.find('.ckeditor-toolbar-group-buttons').eq(0).prepend($button);
+.prepend($group);
+}
 }
 }
+// Move groups between rows.
+else if (_.indexOf(upDownKeys, event.keyCode) > -1) {
+dir = _.indexOf([38, 63232], event.keyCode) > -1 ? 'prev' : 'next';
+$group
+.closest('.ckeditor-row')
+[dir]()
+.find('.ckeditor-toolbar-groups')
+.eq(0)
+.prepend($group);
+}
+Drupal.ckeditor.registerGroupMove(this, $group);
+$group.trigger('focus');
+event.preventDefault();
+event.stopPropagation();
 }
-// Move dividers between their container and the active toolbar.
+},
-else if (containerType === 'dividers') {
-// Move the button to the active toolbar configuration when the down
-// or up keys are pressed.
-if (_.indexOf([40, 63233], event.keyCode) > -1) {
-// Move the button to the first row, first button group index
-// position.
-$button = $button.clone(true);
-$activeButtons.find('.ckeditor-toolbar-group-buttons').eq(0).prepend($button);
-$target = $button.children();
-}
-}
-view = this;
-// Attempt to move the button to the new toolbar position.
-Drupal.ckeditor.registerButtonMove(this, $button, (result) => {
-// Put the button back if the registration failed.
-// If the button was in a row, then it was in the active toolbar
-// configuration. The button was probably placed in a new group, but
-// that action was canceled.
-if (!result && $originalGroup) {
-$originalGroup.find('.ckeditor-buttons').append($button);
-}
-// Otherwise refresh the sortables to acknowledge the new button
-// positions.
-else {
-view.$el.find('.ui-sortable').sortable('refresh');
-}
-// Refocus the target button so that the user can continue from a
-// known place.
-$target.trigger('focus');
-});
-event.preventDefault();
-event.stopPropagation();
-}
 },
+);
-/**
+})(jQuery, Drupal, Backbone, _);
-* Handles keypresses on a CKEditor configuration group.
-*
-* @param {jQuery.Event} event
-*   The keypress event triggered.
-*/
-onPressGroup(event) {
-const upDownKeys = [
-38, // Up arrow.
-63232, // Safari up arrow.
-40, // Down arrow.
-63233, // Safari down arrow.
-];
-const leftRightKeys = [
-37, // Left arrow.
-63234, // Safari left arrow.
-39, // Right arrow.
-63235, // Safari right arrow.
-];
-// Respond to an enter key press.
-if (event.keyCode === 13) {
-const view = this;
-// Open the group renaming dialog in the next evaluation cycle so that
-// this event can be cancelled and the bubbling wiped out. Otherwise,
-// Firefox has issues because the page focus is shifted to the dialog
-// along with the keydown event.
-window.setTimeout(() => {
-Drupal.ckeditor.openGroupNameDialog(view, $(event.currentTarget));
-}, 0);
-event.preventDefault();
-event.stopPropagation();
-}
-// Respond to direction key presses.
-if (_.indexOf(_.union(upDownKeys, leftRightKeys), event.keyCode) > -1) {
-const $group = $(event.currentTarget);
-const $container = $group.parent();
-const $siblings = $container.children();
-let index;
-let dir;
-// Move groups between sibling groups.
-if (_.indexOf(leftRightKeys, event.keyCode) > -1) {
-index = $siblings.index($group);
-// Move left between sibling groups.
-if ((_.indexOf([37, 63234], event.keyCode) > -1)) {
-if (index > 0) {
-$group.insertBefore($siblings.eq(index - 1));
-}
-// Wrap between rows. Insert the group before the placeholder group
-// at the end of the previous row.
-else {
-const $rowChildElement = $container
-.closest('.ckeditor-row')
-.prev()
-.find('.ckeditor-toolbar-groups')
-.children()
-.eq(-1);
-$group.insertBefore($rowChildElement);
-}
-}
-// Move right between sibling groups.
-else if (_.indexOf([39, 63235], event.keyCode) > -1) {
-// Move to the right if the next group is not a placeholder.
-if (!$siblings.eq(index + 1).hasClass('placeholder')) {
-$group.insertAfter($container.children().eq(index + 1));
-}
-// Wrap group between rows.
-else {
-$container.closest('.ckeditor-row').next().find('.ckeditor-toolbar-groups').prepend($group);
-}
-}
-}
-// Move groups between rows.
-else if (_.indexOf(upDownKeys, event.keyCode) > -1) {
-dir = (_.indexOf([38, 63232], event.keyCode) > -1) ? 'prev' : 'next';
-$group
-.closest('.ckeditor-row')[dir]()
-.find('.ckeditor-toolbar-groups')
-.eq(0)
-.prepend($group);
-}
-Drupal.ckeditor.registerGroupMove(this, $group);
-$group.trigger('focus');
-event.preventDefault();
-event.stopPropagation();
-}
-},
-});
-}(jQuery, Drupal, Backbone, _));