Update to Drupal 8.2.0. For more information, see https://www.drupal.org/project/drupal/releases/8.2.0

core/modules/outside_in/js/offcanvas.js

@@ -0,0 +1,134 @@
+/**
+ * @file
+ * Drupal's off-canvas library.
+ *
+ * @todo This functionality should extracted into a new core library or a part
+ *  of the current drupal.dialog.ajax library.
+ *  https://www.drupal.org/node/2784443
+ */
+
+(function ($, Drupal, debounce, displace) {
+
+  'use strict';
+
+  /**
+   * The edge of the screen that the dialog should appear on.
+   *
+   * @type {string}
+   */
+  var edge = document.documentElement.dir === 'rtl' ? 'left' : 'right';
+
+  var $mainCanvasWrapper = $('#main-canvas-wrapper');
+
+  /**
+   * Resets the size of the dialog.
+   *
+   * @param {jQuery.Event} event
+   *   The event triggered.
+   */
+  function resetSize(event) {
+    var offsets = displace.offsets;
+    var $element = event.data.$element;
+    var $widget = $element.dialog('widget');
+
+    var adjustedOptions = {
+      // @see http://api.jqueryui.com/position/
+      position: {
+        my: edge + ' top',
+        at: edge + ' top' + (offsets.top !== 0 ? '+' + offsets.top : ''),
+        of: window
+      }
+    };
+
+    $widget.css({
+      position: 'fixed',
+      height: ($(window).height() - (offsets.top + offsets.bottom)) + 'px'
+    });
+
+    $element
+      .dialog('option', adjustedOptions)
+      .trigger('dialogContentResize.outsidein');
+  }
+
+  /**
+   * Adjusts the dialog on resize.
+   *
+   * @param {jQuery.Event} event
+   *   The event triggered.
+   */
+  function handleDialogResize(event) {
+    var $element = event.data.$element;
+    var $widget = $element.dialog('widget');
+
+    var $offsets = $widget.find('> :not(#drupal-offcanvas, .ui-resizable-handle)');
+    var offset = 0;
+    var modalHeight;
+
+    // Let scroll element take all the height available.
+    $element.css({height: 'auto'});
+    modalHeight = $widget.height();
+    $offsets.each(function () { offset += $(this).outerHeight(); });
+
+    // Take internal padding into account.
+    var scrollOffset = $element.outerHeight() - $element.height();
+    $element.height(modalHeight - offset - scrollOffset);
+  }
+
+  /**
+   * Adjusts the body padding when the dialog is resized.
+   *
+   * @param {jQuery.Event} event
+   *   The event triggered.
+   */
+  function bodyPadding(event) {
+    var $element = event.data.$element;
+    var $widget = $element.dialog('widget');
+
+    var width = $widget.outerWidth();
+    var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + edge);
+    if (width !== mainCanvasPadding) {
+      $mainCanvasWrapper.css('padding-' + edge, width + 'px');
+      $widget.attr('data-offset-' + edge, width);
+      displace();
+    }
+  }
+
+  $(window).on({
+    'dialog:aftercreate': function (event, dialog, $element, settings) {
+      if ($element.is('#drupal-offcanvas')) {
+        var eventData = {settings: settings, $element: $element};
+        $('.ui-dialog-offcanvas, .ui-dialog-offcanvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
+
+        $element
+          .on('dialogresize.outsidein', eventData, debounce(bodyPadding, 100))
+          .on('dialogContentResize.outsidein', eventData, handleDialogResize)
+          .trigger('dialogresize.outsidein');
+
+        $element.dialog('widget').attr('data-offset-' + edge, '');
+
+        $(window)
+          .on('resize.outsidein scroll.outsidein', eventData, debounce(resetSize, 100))
+          .trigger('resize.outsidein');
+      }
+    },
+    'dialog:beforecreate': function (event, dialog, $element, settings) {
+      if ($element.is('#drupal-offcanvas')) {
+        // @see http://api.jqueryui.com/position/
+        settings.position = {
+          my: 'left top',
+          at: edge + ' top',
+          of: window
+        };
+        settings.dialogClass = 'ui-dialog-offcanvas';
+      }
+    },
+    'dialog:beforeclose': function (event, dialog, $element) {
+      if ($element.is('#drupal-offcanvas')) {
+        $(document).off('.outsidein');
+        $(window).off('.outsidein');
+        $mainCanvasWrapper.css('padding-' + edge, 0);
+      }
+    }
+  });
+
+})(jQuery, Drupal, Drupal.debounce, Drupal.displace);

core/modules/outside_in/js/outside_in.js

@@ -0,0 +1,213 @@
+/**
+ * @file
+ * Drupal's Settings Tray library.
+ */
+
+(function ($, Drupal) {
+
+  'use strict';
+
+  var blockConfigureSelector = '[data-dialog-renderer="offcanvas"]';
+  var toggleEditSelector = '[data-drupal-outsidein="toggle"]';
+  var itemsToToggleSelector = '#main-canvas, #toolbar-bar, [data-drupal-outsidein="editable"] a, [data-drupal-outsidein="editable"] button';
+  var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
+
+  /**
+   * Reacts to contextual links being added.
+   *
+   * @param {jQuery.Event} event
+   *   The `drupalContextualLinkAdded` event.
+   * @param {object} data
+   *   An object containing the data relevant to the event.
+   *
+   * @listens event:drupalContextualLinkAdded
+   */
+  $(document).on('drupalContextualLinkAdded', function (event, data) {
+    // Bind Ajax behaviors to all items showing the class.
+    // @todo Fix contextual links to work with use-ajax links in
+    //    https://www.drupal.org/node/2764931.
+    Drupal.attachBehaviors(data.$el[0]);
+
+    // Bind a listener to all 'Quick edit' links for blocks
+    // Click "Edit" button in toolbar to force Contextual Edit which starts
+    // Settings Tray edit mode also.
+    data.$el.find(blockConfigureSelector)
+      .on('click.outsidein', function () {
+        if (!isInEditMode()) {
+          $(toggleEditSelector).trigger('click.outsidein');
+        }
+      });
+  });
+
+  /**
+   * Gets all items that should be toggled with class during edit mode.
+   *
+   * @return {jQuery}
+   *   Items that should be toggled.
+   */
+  function getItemsToToggle() {
+    return $(itemsToToggleSelector).not(contextualItemsSelector);
+  }
+
+  /**
+   * Helper to check the state of the outside-in mode.
+   *
+   * @todo don't use a class for this.
+   *
+   * @return {boolean}
+   *  State of the outside-in edit mode.
+   */
+  function isInEditMode() {
+    return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
+  }
+
+  /**
+   * Helper to toggle Edit mode.
+   */
+  function toggleEditMode() {
+    setEditModeState(!isInEditMode());
+  }
+
+  /**
+   * Prevent default click events except contextual links.
+   *
+   * In edit mode the default action of click events is suppressed.
+   *
+   * @param {jQuery.Event} event
+   *   The click event.
+   */
+  function preventClick(event) {
+    // Do not prevent contextual links.
+    if ($(event.target).closest('.contextual-links').length) {
+      return;
+    }
+    event.preventDefault();
+  }
+
+  /**
+   *  Helper to switch edit mode state.
+   *
+   * @param {boolean} editMode
+   *  True enable edit mode, false disable edit mode.
+   */
+  function setEditModeState(editMode) {
+    editMode = !!editMode;
+    var $editButton = $(toggleEditSelector);
+    var $editables;
+    // Turn on edit mode.
+    if (editMode) {
+      $editButton.text(Drupal.t('Editing'));
+      // Close the Manage tray if open when entering edit mode.
+      if ($('#toolbar-item-administration-tray').hasClass('is-active')) {
+        $('#toolbar-item-administration').trigger('click');
+      }
+
+      $editables = $('[data-drupal-outsidein="editable"]').once('outsidein');
+      if ($editables.length) {
+        // Use event capture to prevent clicks on links.
+        document.querySelector('#main-canvas').addEventListener('click', preventClick, true);
+
+        // When a click occurs try and find the outside-in edit link
+        // and click it.
+        $editables
+          .not(contextualItemsSelector)
+          .on('click.outsidein', function (e) {
+            // Contextual links are allowed to function in Edit mode.
+            if ($(e.target).closest('.contextual').length || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) {
+              return;
+            }
+
+            $(e.currentTarget).find(blockConfigureSelector).trigger('click');
+          });
+      }
+    }
+    // Disable edit mode.
+    else {
+      $editables = $('[data-drupal-outsidein="editable"]').removeOnce('outsidein');
+      if ($editables.length) {
+        document.querySelector('#main-canvas').removeEventListener('click', preventClick, true);
+        $editables.off('.outsidein');
+      }
+
+      $editButton.text(Drupal.t('Edit'));
+      // Close/remove offcanvas.
+      $('.ui-dialog-offcanvas .ui-dialog-titlebar-close').trigger('click');
+    }
+    getItemsToToggle().toggleClass('js-outside-in-edit-mode', editMode);
+    $('.edit-mode-inactive').toggleClass('visually-hidden', editMode);
+  }
+
+  /**
+   * Attaches contextual's edit toolbar tab behavior.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches contextual toolbar behavior on a contextualToolbar-init event.
+   */
+  Drupal.behaviors.outsideInEdit = {
+    attach: function () {
+      var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
+      if (editMode) {
+        setEditModeState(true);
+      }
+    }
+  };
+
+  /**
+   * Toggle the js-outside-edit-mode class on items that we want to disable while in edit mode.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Toggle the js-outside-edit-mode class.
+   */
+  Drupal.behaviors.toggleEditMode = {
+    attach: function () {
+
+      $(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode);
+
+      var search = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog';
+      var replace = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog_offcanvas';
+      // Loop through all Ajax links and change the format to offcanvas when
+      // needed.
+      Drupal.ajax.instances
+        .filter(function (instance) {
+          var hasElement = instance && !!instance.element;
+          var rendererOffcanvas = false;
+          var wrapperOffcanvas = false;
+          if (hasElement) {
+            rendererOffcanvas = $(instance.element).attr('data-dialog-renderer') === 'offcanvas';
+            wrapperOffcanvas = instance.options.url.indexOf('drupal_dialog_offcanvas') === -1;
+          }
+          return hasElement && rendererOffcanvas && wrapperOffcanvas;
+        })
+        .forEach(function (instance) {
+          // @todo Move logic for data-dialog-renderer attribute into ajax.js
+          //   https://www.drupal.org/node/2784443
+          instance.options.url = instance.options.url.replace(search, replace);
+          instance.options.data.dialogOptions = {outsideInActiveEditableId: $(instance.element).parents('.outside-in-editable').attr('id')};
+          instance.progress = {type: 'fullscreen'};
+        });
+    }
+  };
+
+  // Manage Active editable class on opening and closing of the dialog.
+  $(window).on({
+    'dialog:beforecreate': function (event, dialog, $element, settings) {
+      if ($element.is('#drupal-offcanvas')) {
+        $('body .outside-in-active-editable').removeClass('outside-in-active-editable');
+        var $activeElement = $('#' + settings.outsideInActiveEditableId);
+        if ($activeElement) {
+          $activeElement.addClass('outside-in-active-editable');
+        }
+      }
+    },
+    'dialog:beforeclose': function (event, dialog, $element) {
+      if ($element.is('#drupal-offcanvas')) {
+        $('body .outside-in-active-editable').removeClass('outside-in-active-editable');
+      }
+    }
+  });
+
+})(jQuery, Drupal);