Issue #2862625 by Maxfire, tedbow, gaurav.kapoor, drpal, lauriii: Rename offcanvas to two words in code and comments.
							parent
							
								
									f170a96bc2
								
							
						
					
					
						commit
						a614ec640e
					
				| 
						 | 
				
			
			@ -1,23 +1,23 @@
 | 
			
		|||
/**
 | 
			
		||||
 * @file
 | 
			
		||||
 * CSS for Offcanvas tray.
 | 
			
		||||
 * CSS for off-canvas dialog.
 | 
			
		||||
 *
 | 
			
		||||
 * @todo Move CSS into core dialog library https://www.drupal.org/node/2784443.
 | 
			
		||||
 */
 | 
			
		||||
/* Position the dialog-offcanvas tray container outside the right of the viewport. */
 | 
			
		||||
.ui-dialog-offcanvas {
 | 
			
		||||
/* Position the off-canvas dialog container outside the right of the viewport. */
 | 
			
		||||
.ui-dialog-off-canvas {
 | 
			
		||||
    box-sizing: border-box;
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    overflow: visible;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* Wrap the form that's inside the dialog-offcanvas tray. */
 | 
			
		||||
.ui-dialog-offcanvas .ui-dialog-content {
 | 
			
		||||
/* Wrap the form that's inside the off-canvas dialog. */
 | 
			
		||||
.ui-dialog-off-canvas .ui-dialog-content {
 | 
			
		||||
    padding: 0 20px;
 | 
			
		||||
    /* Prevent horizontal scrollbar. */
 | 
			
		||||
    overflow-x: hidden;
 | 
			
		||||
    overflow-y: auto;
 | 
			
		||||
}
 | 
			
		||||
[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-content {
 | 
			
		||||
[dir="rtl"] .ui-dialog-off-canvas .ui-dialog-content {
 | 
			
		||||
    text-align: right;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -1,6 +1,6 @@
 | 
			
		|||
/**
 | 
			
		||||
 * @file
 | 
			
		||||
 * Motion effects for off-canvas tray dialog.
 | 
			
		||||
 * Motion effects for off-canvas dialog.
 | 
			
		||||
 *
 | 
			
		||||
 * Motion effects are in a separate file so that they can be easily turned off
 | 
			
		||||
 * to improve performance if desired.
 | 
			
		||||
| 
						 | 
				
			
			@ -10,22 +10,22 @@
 | 
			
		|||
 *   file: https://www.drupal.org/node/2784443.
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
/* Transition the dialog-offcanvas tray container, with 2s delay to match main canvas speed. */
 | 
			
		||||
.ui-dialog-offcanvas .ui-dialog-content {
 | 
			
		||||
/* Transition the off-canvas dialog container, with 2s delay to match main canvas speed. */
 | 
			
		||||
.ui-dialog-off-canvas .ui-dialog-content {
 | 
			
		||||
    -webkit-transition: all .7s ease 2s;
 | 
			
		||||
    -moz-transition: all .7s ease 2s;
 | 
			
		||||
    transition: all .7s ease 2s;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media (max-width: 700px) {
 | 
			
		||||
    .ui-dialog-offcanvas .ui-dialog-content {
 | 
			
		||||
    .ui-dialog-off-canvas .ui-dialog-content {
 | 
			
		||||
        -webkit-transition: all .7s ease;
 | 
			
		||||
        -moz-transition: all .7s ease;
 | 
			
		||||
        transition: all .7s ease;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.dialog-offcanvas__main-canvas {
 | 
			
		||||
.dialog-off-canvas__main-canvas {
 | 
			
		||||
  -webkit-transition: all .7s ease;
 | 
			
		||||
  -moz-transition: all .7s ease;
 | 
			
		||||
  transition: all .7s ease;
 | 
			
		||||
| 
						 | 
				
			
			@ -27,7 +27,7 @@
 | 
			
		|||
 * to expand dialog widths.
 | 
			
		||||
 */
 | 
			
		||||
@media all and (max-width: 48em) { /* 768px */
 | 
			
		||||
  .ui-dialog.ui-dialog-offcanvas {
 | 
			
		||||
  .ui-dialog.ui-dialog-off-canvas {
 | 
			
		||||
    width: 100% !important;
 | 
			
		||||
  }
 | 
			
		||||
  /* When tray is at 100% width stop the body from scrolling */
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -19,9 +19,9 @@
 | 
			
		|||
}
 | 
			
		||||
 | 
			
		||||
/* Transition the editables on the page, their contextual links and their hover states. */
 | 
			
		||||
.dialog-offcanvas__main-canvas .contextual,
 | 
			
		||||
.dialog-offcanvas__main-canvas .js-outside-in-edit-mode .outside-in-editable,
 | 
			
		||||
.dialog-offcanvas__main-canvas.js-tray-open .js-outside-in-edit-mode .outside-in-editable {
 | 
			
		||||
.dialog-off-canvas__main-canvas .contextual,
 | 
			
		||||
.dialog-off-canvas__main-canvas .js-outside-in-edit-mode .outside-in-editable,
 | 
			
		||||
.dialog-off-canvas__main-canvas.js-tray-open .js-outside-in-edit-mode .outside-in-editable {
 | 
			
		||||
  -webkit-transition: all .7s ease;
 | 
			
		||||
  -moz-transition: all .7s ease;
 | 
			
		||||
  transition: all .7s ease;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -60,16 +60,16 @@
 | 
			
		|||
}
 | 
			
		||||
 | 
			
		||||
/* Style the editables while in edit mode. */
 | 
			
		||||
.dialog-offcanvas__main-canvas.js-outside-in-edit-mode .outside-in-editable {
 | 
			
		||||
.dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable {
 | 
			
		||||
  outline: 1px dashed rgba(0,0,0,0.5);
 | 
			
		||||
  box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
 | 
			
		||||
}
 | 
			
		||||
.dialog-offcanvas__main-canvas.js-outside-in-edit-mode .outside-in-editable:hover,
 | 
			
		||||
.dialog-offcanvas__main-canvas.js-outside-in-edit-mode .outside-in-editable.outside-in-active-editable {
 | 
			
		||||
.dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable:hover,
 | 
			
		||||
.dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable.outside-in-active-editable {
 | 
			
		||||
  background-color: rgba(0,0,0,0.2);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* Style the dialog-offcanvas container. */
 | 
			
		||||
/* Style the dialog-off-canvas container. */
 | 
			
		||||
.ui-dialog-outside-in {
 | 
			
		||||
  background: #444;
 | 
			
		||||
  border: 0 solid transparent;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -22,7 +22,7 @@
 | 
			
		|||
   */
 | 
			
		||||
  var edge = document.documentElement.dir === 'rtl' ? 'left' : 'right';
 | 
			
		||||
 | 
			
		||||
  var $mainCanvasWrapper = $('[data-offcanvas-main-canvas]');
 | 
			
		||||
  var $mainCanvasWrapper = $('[data-off-canvas-main-canvas]');
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
   * Resets the size of the dialog.
 | 
			
		||||
| 
						 | 
				
			
			@ -51,7 +51,7 @@
 | 
			
		|||
 | 
			
		||||
    $element
 | 
			
		||||
      .dialog('option', adjustedOptions)
 | 
			
		||||
      .trigger('dialogContentResize.offcanvas');
 | 
			
		||||
      .trigger('dialogContentResize.off-canvas');
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
| 
						 | 
				
			
			@ -64,7 +64,7 @@
 | 
			
		|||
    var $element = event.data.$element;
 | 
			
		||||
    var $widget = $element.dialog('widget');
 | 
			
		||||
 | 
			
		||||
    var $offsets = $widget.find('> :not(#drupal-offcanvas, .ui-resizable-handle)');
 | 
			
		||||
    var $offsets = $widget.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
 | 
			
		||||
    var offset = 0;
 | 
			
		||||
    var modalHeight;
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -112,25 +112,25 @@
 | 
			
		|||
    attach: function () {
 | 
			
		||||
      $(window).once('off-canvas').on({
 | 
			
		||||
        'dialog:aftercreate': function (event, dialog, $element, settings) {
 | 
			
		||||
          if ($element.is('#drupal-offcanvas')) {
 | 
			
		||||
          if ($element.is('#drupal-off-canvas')) {
 | 
			
		||||
            var eventData = {settings: settings, $element: $element};
 | 
			
		||||
            $('.ui-dialog-offcanvas, .ui-dialog-offcanvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
 | 
			
		||||
            $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
 | 
			
		||||
 | 
			
		||||
            $element
 | 
			
		||||
              .on('dialogresize.offcanvas', eventData, debounce(bodyPadding, 100))
 | 
			
		||||
              .on('dialogContentResize.offcanvas', eventData, handleDialogResize)
 | 
			
		||||
              .on('dialogContentResize.offcanvas', eventData, debounce(bodyPadding, 100))
 | 
			
		||||
              .trigger('dialogresize.offcanvas');
 | 
			
		||||
              .on('dialogresize.off-canvas', eventData, debounce(bodyPadding, 100))
 | 
			
		||||
              .on('dialogContentResize.off-canvas', eventData, handleDialogResize)
 | 
			
		||||
              .on('dialogContentResize.off-canvas', eventData, debounce(bodyPadding, 100))
 | 
			
		||||
              .trigger('dialogresize.off-canvas');
 | 
			
		||||
 | 
			
		||||
            $element.dialog('widget').attr('data-offset-' + edge, '');
 | 
			
		||||
 | 
			
		||||
            $(window)
 | 
			
		||||
              .on('resize.offcanvas scroll.offcanvas', eventData, debounce(resetSize, 100))
 | 
			
		||||
              .trigger('resize.offcanvas');
 | 
			
		||||
              .on('resize.off-canvas scroll.off-canvas', eventData, debounce(resetSize, 100))
 | 
			
		||||
              .trigger('resize.off-canvas');
 | 
			
		||||
          }
 | 
			
		||||
        },
 | 
			
		||||
        'dialog:beforecreate': function (event, dialog, $element, settings) {
 | 
			
		||||
          if ($element.is('#drupal-offcanvas')) {
 | 
			
		||||
          if ($element.is('#drupal-off-canvas')) {
 | 
			
		||||
            $('body').addClass('js-tray-open');
 | 
			
		||||
            // @see http://api.jqueryui.com/position/
 | 
			
		||||
            settings.position = {
 | 
			
		||||
| 
						 | 
				
			
			@ -138,18 +138,18 @@
 | 
			
		|||
              at: edge + ' top',
 | 
			
		||||
              of: window
 | 
			
		||||
            };
 | 
			
		||||
            settings.dialogClass += ' ui-dialog-offcanvas';
 | 
			
		||||
            settings.dialogClass += ' ui-dialog-off-canvas';
 | 
			
		||||
            // Applies initial height to dialog based on window height.
 | 
			
		||||
            // See http://api.jqueryui.com/dialog for all dialog options.
 | 
			
		||||
            settings.height = $(window).height();
 | 
			
		||||
          }
 | 
			
		||||
        },
 | 
			
		||||
        'dialog:beforeclose': function (event, dialog, $element) {
 | 
			
		||||
          if ($element.is('#drupal-offcanvas')) {
 | 
			
		||||
          if ($element.is('#drupal-off-canvas')) {
 | 
			
		||||
            $('body').removeClass('js-tray-open');
 | 
			
		||||
            // Remove all *.offcanvas events
 | 
			
		||||
            $(document).off('.offcanvas');
 | 
			
		||||
            $(window).off('.offcanvas');
 | 
			
		||||
            // Remove all *.off-canvas events
 | 
			
		||||
            $(document).off('.off-canvas');
 | 
			
		||||
            $(window).off('.off-canvas');
 | 
			
		||||
            $mainCanvasWrapper.css('padding-' + edge, 0);
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
| 
						 | 
				
			
			@ -9,7 +9,7 @@
 | 
			
		|||
 | 
			
		||||
  var blockConfigureSelector = '[data-outside-in-edit]';
 | 
			
		||||
  var toggleEditSelector = '[data-drupal-outsidein="toggle"]';
 | 
			
		||||
  var itemsToToggleSelector = '[data-offcanvas-main-canvas], #toolbar-bar, [data-drupal-outsidein="editable"] a, [data-drupal-outsidein="editable"] button';
 | 
			
		||||
  var itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, [data-drupal-outsidein="editable"] a, [data-drupal-outsidein="editable"] button';
 | 
			
		||||
  var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
 | 
			
		||||
  var quickEditItemSelector = '[data-quickedit-entity-id]';
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -111,10 +111,10 @@
 | 
			
		|||
  }
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
   * Closes/removes offcanvas.
 | 
			
		||||
   * Closes/removes off-canvas.
 | 
			
		||||
   */
 | 
			
		||||
  function closeOffCanvas() {
 | 
			
		||||
    $('.ui-dialog-offcanvas .ui-dialog-titlebar-close').trigger('click');
 | 
			
		||||
    $('.ui-dialog-off-canvas .ui-dialog-titlebar-close').trigger('click');
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
| 
						 | 
				
			
			@ -135,7 +135,7 @@
 | 
			
		|||
      $editables = $('[data-drupal-outsidein="editable"]').once('outsidein');
 | 
			
		||||
      if ($editables.length) {
 | 
			
		||||
        // Use event capture to prevent clicks on links.
 | 
			
		||||
        document.querySelector('[data-offcanvas-main-canvas]').addEventListener('click', preventClick, true);
 | 
			
		||||
        document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true);
 | 
			
		||||
 | 
			
		||||
        // When a click occurs try and find the outside-in edit link
 | 
			
		||||
        // and click it.
 | 
			
		||||
| 
						 | 
				
			
			@ -152,7 +152,7 @@
 | 
			
		|||
        $(quickEditItemSelector)
 | 
			
		||||
          .not(contextualItemsSelector)
 | 
			
		||||
          .on('click.outsidein', function (e) {
 | 
			
		||||
            // For all non-contextual links or the contextual QuickEdit link close the off-canvas tray.
 | 
			
		||||
            // For all non-contextual links or the contextual QuickEdit link close the off-canvas dialog.
 | 
			
		||||
            if (!$(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
 | 
			
		||||
              closeOffCanvas();
 | 
			
		||||
            }
 | 
			
		||||
| 
						 | 
				
			
			@ -168,7 +168,7 @@
 | 
			
		|||
    else {
 | 
			
		||||
      $editables = $('[data-drupal-outsidein="editable"]').removeOnce('outsidein');
 | 
			
		||||
      if ($editables.length) {
 | 
			
		||||
        document.querySelector('[data-offcanvas-main-canvas]').removeEventListener('click', preventClick, true);
 | 
			
		||||
        document.querySelector('[data-off-canvas-main-canvas]').removeEventListener('click', preventClick, true);
 | 
			
		||||
        $editables.off('.outsidein');
 | 
			
		||||
        $(quickEditItemSelector).off('.outsidein');
 | 
			
		||||
      }
 | 
			
		||||
| 
						 | 
				
			
			@ -212,19 +212,19 @@
 | 
			
		|||
      $(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 dialog-offcanvas when
 | 
			
		||||
      var replace = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog_off_canvas';
 | 
			
		||||
      // Loop through all Ajax links and change the format to dialog-off-canvas when
 | 
			
		||||
      // needed.
 | 
			
		||||
      Drupal.ajax.instances
 | 
			
		||||
        .filter(function (instance) {
 | 
			
		||||
          var hasElement = instance && !!instance.element;
 | 
			
		||||
          var rendererOffcanvas = false;
 | 
			
		||||
          var wrapperOffcanvas = false;
 | 
			
		||||
          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;
 | 
			
		||||
            rendererOffCanvas = $(instance.element).attr('data-dialog-renderer') === 'off_canvas';
 | 
			
		||||
            wrapperOffCanvas = instance.options.url.indexOf('drupal_dialog_off_canvas') === -1;
 | 
			
		||||
          }
 | 
			
		||||
          return hasElement && rendererOffcanvas && wrapperOffcanvas;
 | 
			
		||||
          return hasElement && rendererOffCanvas && wrapperOffCanvas;
 | 
			
		||||
        })
 | 
			
		||||
        .forEach(function (instance) {
 | 
			
		||||
          // @todo Move logic for data-dialog-renderer attribute into ajax.js
 | 
			
		||||
| 
						 | 
				
			
			@ -243,7 +243,7 @@
 | 
			
		|||
  // 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')) {
 | 
			
		||||
      if ($element.is('#drupal-off-canvas')) {
 | 
			
		||||
        $('body .outside-in-active-editable').removeClass('outside-in-active-editable');
 | 
			
		||||
        var $activeElement = $('#' + settings.outsideInActiveEditableId);
 | 
			
		||||
        if ($activeElement.length) {
 | 
			
		||||
| 
						 | 
				
			
			@ -253,7 +253,7 @@
 | 
			
		|||
      }
 | 
			
		||||
    },
 | 
			
		||||
    'dialog:beforeclose': function (event, dialog, $element) {
 | 
			
		||||
      if ($element.is('#drupal-offcanvas')) {
 | 
			
		||||
      if ($element.is('#drupal-off-canvas')) {
 | 
			
		||||
        $('body .outside-in-active-editable').removeClass('outside-in-active-editable');
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -23,7 +23,7 @@ drupal.outside_in:
 | 
			
		|||
drupal.off_canvas:
 | 
			
		||||
  version: VERSION
 | 
			
		||||
  js:
 | 
			
		||||
    js/offcanvas.js: {}
 | 
			
		||||
    js/off-canvas.js: {}
 | 
			
		||||
  dependencies:
 | 
			
		||||
    - core/jquery
 | 
			
		||||
    - core/drupal
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,4 +1,4 @@
 | 
			
		|||
outside_in.block_configure:
 | 
			
		||||
  title: 'Quick edit'
 | 
			
		||||
  route_name: 'entity.block.offcanvas_form'
 | 
			
		||||
  route_name: 'entity.block.off_canvas_form'
 | 
			
		||||
  group: 'block'
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -30,7 +30,7 @@ function outside_in_help($route_name, RouteMatchInterface $route_match) {
 | 
			
		|||
/**
 | 
			
		||||
 * Implements hook_contextual_links_view_alter().
 | 
			
		||||
 *
 | 
			
		||||
 * Change Configure Blocks into offcanvas links.
 | 
			
		||||
 * Change Configure Blocks into off_canvas links.
 | 
			
		||||
 */
 | 
			
		||||
function outside_in_contextual_links_view_alter(&$element, $items) {
 | 
			
		||||
  if (isset($element['#links']['outside-inblock-configure'])) {
 | 
			
		||||
| 
						 | 
				
			
			@ -42,7 +42,7 @@ function outside_in_contextual_links_view_alter(&$element, $items) {
 | 
			
		|||
    $element['#links']['outside-inblock-configure']['attributes'] = [
 | 
			
		||||
      'class' => ['use-ajax'],
 | 
			
		||||
      'data-dialog-type' => 'dialog',
 | 
			
		||||
      'data-dialog-renderer' => 'offcanvas',
 | 
			
		||||
      'data-dialog-renderer' => 'off_canvas',
 | 
			
		||||
      'data-outside-in-edit' => TRUE,
 | 
			
		||||
    ];
 | 
			
		||||
    // If this is content block change title to avoid duplicate "Quick Edit".
 | 
			
		||||
| 
						 | 
				
			
			@ -92,8 +92,8 @@ function outside_in_theme() {
 | 
			
		|||
function outside_in_entity_type_build(array &$entity_types) {
 | 
			
		||||
  /* @var $entity_types \Drupal\Core\Entity\EntityTypeInterface[] */
 | 
			
		||||
  $entity_types['block']
 | 
			
		||||
    ->setFormClass('offcanvas', BlockEntityOffCanvasForm::class)
 | 
			
		||||
    ->setLinkTemplate('offcanvas-form', '/admin/structure/block/manage/{block}/offcanvas');
 | 
			
		||||
    ->setFormClass('off_canvas', BlockEntityOffCanvasForm::class)
 | 
			
		||||
    ->setLinkTemplate('off_canvas-form', '/admin/structure/block/manage/{block}/off-canvas');
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
| 
						 | 
				
			
			@ -139,14 +139,14 @@ function outside_in_toolbar_alter(&$items) {
 | 
			
		|||
 */
 | 
			
		||||
function outside_in_block_alter(&$definitions) {
 | 
			
		||||
  if (!empty($definitions['system_branding_block'])) {
 | 
			
		||||
    $definitions['system_branding_block']['forms']['offcanvas'] = SystemBrandingOffCanvasForm::class;
 | 
			
		||||
    $definitions['system_branding_block']['forms']['off_canvas'] = SystemBrandingOffCanvasForm::class;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // Since menu blocks use derivatives, check the definition ID instead of
 | 
			
		||||
  // relying on the plugin ID.
 | 
			
		||||
  foreach ($definitions as &$definition) {
 | 
			
		||||
    if ($definition['id'] === 'system_menu_block') {
 | 
			
		||||
      $definition['forms']['offcanvas'] = SystemMenuOffCanvasForm::class;
 | 
			
		||||
      $definition['forms']['off_canvas'] = SystemMenuOffCanvasForm::class;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,7 +1,7 @@
 | 
			
		|||
entity.block.offcanvas_form:
 | 
			
		||||
  path: '/admin/structure/block/manage/{block}/offcanvas'
 | 
			
		||||
entity.block.off_canvas_form:
 | 
			
		||||
  path: '/admin/structure/block/manage/{block}/off-canvas'
 | 
			
		||||
  defaults:
 | 
			
		||||
    _entity_form: 'block.offcanvas'
 | 
			
		||||
    _entity_form: 'block.off_canvas'
 | 
			
		||||
    _title_callback: '\Drupal\outside_in\Block\BlockEntityOffCanvasForm::title'
 | 
			
		||||
  requirements:
 | 
			
		||||
    _permission: 'administer blocks'
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -3,7 +3,7 @@ services:
 | 
			
		|||
    class: Drupal\outside_in\Render\MainContent\OffCanvasRender
 | 
			
		||||
    arguments: ['@title_resolver', '@renderer']
 | 
			
		||||
    tags:
 | 
			
		||||
      - { name: render.main_content_renderer, format: drupal_dialog_offcanvas }
 | 
			
		||||
      - { name: render.main_content_renderer, format: drupal_dialog_off_canvas }
 | 
			
		||||
 | 
			
		||||
  outside_in.manager:
 | 
			
		||||
    class: Drupal\outside_in\OutsideInManager
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -5,7 +5,7 @@ namespace Drupal\outside_in\Ajax;
 | 
			
		|||
use Drupal\Core\Ajax\OpenDialogCommand;
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 * Defines an AJAX command to open content in a dialog in a off-canvas tray.
 | 
			
		||||
 * Defines an AJAX command to open content in a dialog in a off-canvas dialog.
 | 
			
		||||
 *
 | 
			
		||||
 * @ingroup ajax
 | 
			
		||||
 */
 | 
			
		||||
| 
						 | 
				
			
			@ -16,7 +16,7 @@ class OpenOffCanvasDialogCommand extends OpenDialogCommand {
 | 
			
		|||
   *
 | 
			
		||||
   * The off-canvas dialog differs from the normal modal provided by
 | 
			
		||||
   * OpenDialogCommand in that a off-canvas has built in positioning and
 | 
			
		||||
   * behaviours. Drupal provides a built-in off-canvas tray for this purpose,
 | 
			
		||||
   * behaviours. Drupal provides a built-in off-canvas dialog for this purpose,
 | 
			
		||||
   * so the selector is hard-coded in the call to the parent constructor.
 | 
			
		||||
   *
 | 
			
		||||
   * @param string $title
 | 
			
		||||
| 
						 | 
				
			
			@ -33,7 +33,7 @@ class OpenOffCanvasDialogCommand extends OpenDialogCommand {
 | 
			
		|||
   *   populated automatically from the current request.
 | 
			
		||||
   */
 | 
			
		||||
  public function __construct($title, $content, array $dialog_options = [], $settings = NULL) {
 | 
			
		||||
    parent::__construct('#drupal-offcanvas', $title, $content, $dialog_options, $settings);
 | 
			
		||||
    parent::__construct('#drupal-off-canvas', $title, $content, $dialog_options, $settings);
 | 
			
		||||
    $this->dialogOptions['modal'] = FALSE;
 | 
			
		||||
    $this->dialogOptions['autoResize'] = FALSE;
 | 
			
		||||
    $this->dialogOptions['resizable'] = 'w';
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -9,7 +9,7 @@ use Drupal\Core\Form\FormStateInterface;
 | 
			
		|||
use Drupal\Core\Plugin\PluginWithFormsInterface;
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 * Provides form for block instance forms when used in the off-canvas tray.
 | 
			
		||||
 * Provides form for block instance forms when used in the off-canvas dialog.
 | 
			
		||||
 *
 | 
			
		||||
 * This form removes advanced sections of regular block form such as the
 | 
			
		||||
 * visibility settings, machine ID and region.
 | 
			
		||||
| 
						 | 
				
			
			@ -92,7 +92,7 @@ class BlockEntityOffCanvasForm extends BlockForm {
 | 
			
		|||
   */
 | 
			
		||||
  protected function getPluginForm(BlockPluginInterface $block) {
 | 
			
		||||
    if ($block instanceof PluginWithFormsInterface) {
 | 
			
		||||
      return $this->pluginFormFactory->createInstance($block, 'offcanvas', 'configure');
 | 
			
		||||
      return $this->pluginFormFactory->createInstance($block, 'off_canvas', 'configure');
 | 
			
		||||
    }
 | 
			
		||||
    return $block;
 | 
			
		||||
  }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -11,7 +11,7 @@ use Drupal\outside_in\Ajax\OpenOffCanvasDialogCommand;
 | 
			
		|||
use Symfony\Component\HttpFoundation\Request;
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 * Default main content renderer for offcanvas dialog requests.
 | 
			
		||||
 * Default main content renderer for off-canvas dialog requests.
 | 
			
		||||
 */
 | 
			
		||||
class OffCanvasRender extends DialogRenderer {
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -43,7 +43,6 @@ class OffCanvasRender extends DialogRenderer {
 | 
			
		|||
 | 
			
		||||
    // First render the main content, because it might provide a title.
 | 
			
		||||
    $content = $this->renderer->renderRoot($main_content);
 | 
			
		||||
 | 
			
		||||
    // Attach the library necessary for using the OpenOffCanvasDialogCommand and
 | 
			
		||||
    // set the attachments for this Ajax response.
 | 
			
		||||
    $main_content['#attached']['library'][] = 'outside_in/drupal.off_canvas';
 | 
			
		||||
| 
						 | 
				
			
			@ -55,7 +54,6 @@ class OffCanvasRender extends DialogRenderer {
 | 
			
		|||
    // Determine the title: use the title provided by the main content if any,
 | 
			
		||||
    // otherwise get it from the routing information.
 | 
			
		||||
    $options = $request->request->get('dialogOptions', []);
 | 
			
		||||
 | 
			
		||||
    $response->addCommand(new OpenOffCanvasDialogCommand($title, $content, $options));
 | 
			
		||||
    return $response;
 | 
			
		||||
  }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -21,7 +21,7 @@ class OffCanvasDialogTest extends AjaxTestBase {
 | 
			
		|||
  public static $modules = ['outside_in'];
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
   * Test sending AJAX requests to open and manipulate offcanvas dialog.
 | 
			
		||||
   * Test sending AJAX requests to open and manipulate off-canvas dialog.
 | 
			
		||||
   */
 | 
			
		||||
  public function testDialog() {
 | 
			
		||||
    $this->drupalLogin($this->drupalCreateUser(['administer contact forms']));
 | 
			
		||||
| 
						 | 
				
			
			@ -32,9 +32,9 @@ class OffCanvasDialogTest extends AjaxTestBase {
 | 
			
		|||
    $dialog_renderable = AjaxTestController::dialogContents();
 | 
			
		||||
    $dialog_contents = \Drupal::service('renderer')->renderRoot($dialog_renderable);
 | 
			
		||||
 | 
			
		||||
    $offcanvas_expected_response = [
 | 
			
		||||
    $off_canvas_expected_response = [
 | 
			
		||||
      'command' => 'openDialog',
 | 
			
		||||
      'selector' => '#drupal-offcanvas',
 | 
			
		||||
      'selector' => '#drupal-off-canvas',
 | 
			
		||||
      'settings' => NULL,
 | 
			
		||||
      'data' => $dialog_contents,
 | 
			
		||||
      'dialogOptions' =>
 | 
			
		||||
| 
						 | 
				
			
			@ -52,8 +52,8 @@ class OffCanvasDialogTest extends AjaxTestBase {
 | 
			
		|||
    ];
 | 
			
		||||
 | 
			
		||||
    // Emulate going to the JS version of the page and check the JSON response.
 | 
			
		||||
    $ajax_result = $this->drupalGetAjax('ajax-test/dialog-contents', ['query' => [MainContentViewSubscriber::WRAPPER_FORMAT => 'drupal_dialog_offcanvas']]);
 | 
			
		||||
    $this->assertEqual($offcanvas_expected_response, $ajax_result[3], 'Off-canvas dialog JSON response matches.');
 | 
			
		||||
    $ajax_result = $this->drupalGetAjax('ajax-test/dialog-contents', ['query' => [MainContentViewSubscriber::WRAPPER_FORMAT => 'drupal_dialog_off_canvas']]);
 | 
			
		||||
    $this->assertEqual($off_canvas_expected_response, $ajax_result[3], 'off-canvas dialog JSON response matches.');
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -12,7 +12,7 @@
 | 
			
		|||
 */
 | 
			
		||||
#}
 | 
			
		||||
{% if children %}
 | 
			
		||||
  <div class="dialog-offcanvas__main-canvas" data-offcanvas-main-canvas >
 | 
			
		||||
  <div class="dialog-off-canvas__main-canvas" data-off-canvas-main-canvas >
 | 
			
		||||
    {{ children }}
 | 
			
		||||
  </div>
 | 
			
		||||
{% endif %}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -0,0 +1,29 @@
 | 
			
		|||
off_canvas_test.links:
 | 
			
		||||
  path: '/off-canvas-test-links'
 | 
			
		||||
  defaults:
 | 
			
		||||
    _controller: '\Drupal\off_canvas_test\Controller\TestController::linksDisplay'
 | 
			
		||||
    _title: 'Links'
 | 
			
		||||
  requirements:
 | 
			
		||||
    _access: 'TRUE'
 | 
			
		||||
 | 
			
		||||
off_canvas_test.thing1:
 | 
			
		||||
  path: '/off-canvas-thing1'
 | 
			
		||||
  defaults:
 | 
			
		||||
    _controller: '\Drupal\off_canvas_test\Controller\TestController::thing1'
 | 
			
		||||
    _title: 'Thing 1'
 | 
			
		||||
  requirements:
 | 
			
		||||
    _access: 'TRUE'
 | 
			
		||||
 | 
			
		||||
off_canvas_test.thing2:
 | 
			
		||||
  path: '/off-canvas-thing2'
 | 
			
		||||
  defaults:
 | 
			
		||||
    _controller: '\Drupal\off_canvas_test\Controller\TestController::thing2'
 | 
			
		||||
  requirements:
 | 
			
		||||
    _access: 'TRUE'
 | 
			
		||||
 | 
			
		||||
off_canvas_test.dialog_links:
 | 
			
		||||
  path: '/off-canvas-dialog-links'
 | 
			
		||||
  defaults:
 | 
			
		||||
    _controller: '\Drupal\off_canvas_test\Controller\TestController::otherDialogLinks'
 | 
			
		||||
  requirements:
 | 
			
		||||
    _access: 'TRUE'
 | 
			
		||||
| 
						 | 
				
			
			@ -1,6 +1,6 @@
 | 
			
		|||
<?php
 | 
			
		||||
 | 
			
		||||
namespace Drupal\offcanvas_test\Controller;
 | 
			
		||||
namespace Drupal\off_canvas_test\Controller;
 | 
			
		||||
 | 
			
		||||
use Drupal\Component\Serialization\Json;
 | 
			
		||||
use Drupal\Core\Url;
 | 
			
		||||
| 
						 | 
				
			
			@ -37,21 +37,21 @@ class TestController {
 | 
			
		|||
  }
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
   * Displays test links that will open in offcanvas tray.
 | 
			
		||||
   * Displays test links that will open in off-canvas dialog.
 | 
			
		||||
   *
 | 
			
		||||
   * @return array
 | 
			
		||||
   *   Render array with links.
 | 
			
		||||
   */
 | 
			
		||||
  public function linksDisplay() {
 | 
			
		||||
    return [
 | 
			
		||||
      'offcanvas_link_1' => [
 | 
			
		||||
      'off_canvas_link_1' => [
 | 
			
		||||
        '#title' => 'Click Me 1!',
 | 
			
		||||
        '#type' => 'link',
 | 
			
		||||
        '#url' => Url::fromRoute('offcanvas_test.thing1'),
 | 
			
		||||
        '#url' => Url::fromRoute('off_canvas_test.thing1'),
 | 
			
		||||
        '#attributes' => [
 | 
			
		||||
          'class' => ['use-ajax'],
 | 
			
		||||
          'data-dialog-type' => 'dialog',
 | 
			
		||||
          'data-dialog-renderer' => 'offcanvas',
 | 
			
		||||
          'data-dialog-renderer' => 'off_canvas',
 | 
			
		||||
        ],
 | 
			
		||||
        '#attached' => [
 | 
			
		||||
          'library' => [
 | 
			
		||||
| 
						 | 
				
			
			@ -59,14 +59,14 @@ class TestController {
 | 
			
		|||
          ],
 | 
			
		||||
        ],
 | 
			
		||||
      ],
 | 
			
		||||
      'offcanvas_link_2' => [
 | 
			
		||||
      'off_canvas_link_2' => [
 | 
			
		||||
        '#title' => 'Click Me 2!',
 | 
			
		||||
        '#type' => 'link',
 | 
			
		||||
        '#url' => Url::fromRoute('offcanvas_test.thing2'),
 | 
			
		||||
        '#url' => Url::fromRoute('off_canvas_test.thing2'),
 | 
			
		||||
        '#attributes' => [
 | 
			
		||||
          'class' => ['use-ajax'],
 | 
			
		||||
          'data-dialog-type' => 'dialog',
 | 
			
		||||
          'data-dialog-renderer' => 'offcanvas',
 | 
			
		||||
          'data-dialog-renderer' => 'off_canvas',
 | 
			
		||||
          'data-dialog-options' => Json::encode([
 | 
			
		||||
            'width' => 555,
 | 
			
		||||
          ]),
 | 
			
		||||
| 
						 | 
				
			
			@ -80,11 +80,11 @@ class TestController {
 | 
			
		|||
      'other_dialog_links' => [
 | 
			
		||||
        '#title' => 'Display more links!',
 | 
			
		||||
        '#type' => 'link',
 | 
			
		||||
        '#url' => Url::fromRoute('offcanvas_test.dialog_links'),
 | 
			
		||||
        '#url' => Url::fromRoute('off_canvas_test.dialog_links'),
 | 
			
		||||
        '#attributes' => [
 | 
			
		||||
          'class' => ['use-ajax'],
 | 
			
		||||
          'data-dialog-type' => 'dialog',
 | 
			
		||||
          'data-dialog-renderer' => 'offcanvas',
 | 
			
		||||
          'data-dialog-renderer' => 'off_canvas',
 | 
			
		||||
        ],
 | 
			
		||||
        '#attached' => [
 | 
			
		||||
          'library' => [
 | 
			
		||||
| 
						 | 
				
			
			@ -96,12 +96,12 @@ class TestController {
 | 
			
		|||
  }
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
   * Displays dialogs links to be displayed inside the offcanvas tray.
 | 
			
		||||
   * Displays dialogs links to be displayed inside the off-canvas dialog.
 | 
			
		||||
   *
 | 
			
		||||
   * This links are used to test opening a modal and another offcanvas link from
 | 
			
		||||
   * inside the offcanvas tray.
 | 
			
		||||
   * This links are used to test opening a modal and another off_canvas link from
 | 
			
		||||
   * inside the off-canvas dialog.
 | 
			
		||||
   *
 | 
			
		||||
   * @todo Update tests to check these links work in the offcanvas tray.
 | 
			
		||||
   * @todo Update tests to check these links work in the off-canvas dialog.
 | 
			
		||||
   *       https://www.drupal.org/node/2790073
 | 
			
		||||
   *
 | 
			
		||||
   * @return array
 | 
			
		||||
| 
						 | 
				
			
			@ -113,19 +113,19 @@ class TestController {
 | 
			
		|||
      '#links' => [
 | 
			
		||||
        'modal_link' => [
 | 
			
		||||
          'title' => 'Open modal!',
 | 
			
		||||
          'url' => Url::fromRoute('offcanvas_test.thing2'),
 | 
			
		||||
          'url' => Url::fromRoute('off_canvas_test.thing2'),
 | 
			
		||||
          'attributes' => [
 | 
			
		||||
            'class' => ['use-ajax'],
 | 
			
		||||
            'data-dialog-type' => 'modal',
 | 
			
		||||
          ],
 | 
			
		||||
        ],
 | 
			
		||||
        'offcanvas_link' => [
 | 
			
		||||
          'title' => 'Offcanvas link!',
 | 
			
		||||
          'url' => Url::fromRoute('offcanvas_test.thing2'),
 | 
			
		||||
        'off_canvas_link' => [
 | 
			
		||||
          'title' => 'Off_canvas link!',
 | 
			
		||||
          'url' => Url::fromRoute('off_canvas_test.thing2'),
 | 
			
		||||
          'attributes' => [
 | 
			
		||||
            'class' => ['use-ajax'],
 | 
			
		||||
            'data-dialog-type' => 'dialog',
 | 
			
		||||
            'data-dialog-renderer' => 'offcanvas',
 | 
			
		||||
            'data-dialog-renderer' => 'off_canvas',
 | 
			
		||||
          ],
 | 
			
		||||
        ],
 | 
			
		||||
      ],
 | 
			
		||||
| 
						 | 
				
			
			@ -1,29 +0,0 @@
 | 
			
		|||
offcanvas_test.links:
 | 
			
		||||
  path: '/offcanvas-test-links'
 | 
			
		||||
  defaults:
 | 
			
		||||
    _controller: '\Drupal\offcanvas_test\Controller\TestController::linksDisplay'
 | 
			
		||||
    _title: 'Links'
 | 
			
		||||
  requirements:
 | 
			
		||||
    _access: 'TRUE'
 | 
			
		||||
 | 
			
		||||
offcanvas_test.thing1:
 | 
			
		||||
  path: '/offcanvas-thing1'
 | 
			
		||||
  defaults:
 | 
			
		||||
    _controller: '\Drupal\offcanvas_test\Controller\TestController::thing1'
 | 
			
		||||
    _title: 'Thing 1'
 | 
			
		||||
  requirements:
 | 
			
		||||
    _access: 'TRUE'
 | 
			
		||||
 | 
			
		||||
offcanvas_test.thing2:
 | 
			
		||||
  path: '/offcanvas-thing2'
 | 
			
		||||
  defaults:
 | 
			
		||||
    _controller: '\Drupal\offcanvas_test\Controller\TestController::thing2'
 | 
			
		||||
  requirements:
 | 
			
		||||
    _access: 'TRUE'
 | 
			
		||||
 | 
			
		||||
offcanvas_test.dialog_links:
 | 
			
		||||
  path: '/offcanvas-dialog-links'
 | 
			
		||||
  defaults:
 | 
			
		||||
    _controller: '\Drupal\offcanvas_test\Controller\TestController::otherDialogLinks'
 | 
			
		||||
  requirements:
 | 
			
		||||
    _access: 'TRUE'
 | 
			
		||||
| 
						 | 
				
			
			@ -3,7 +3,7 @@
 | 
			
		|||
namespace Drupal\Tests\outside_in\FunctionalJavascript;
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 * Tests the off-canvas tray functionality.
 | 
			
		||||
 * Tests the off-canvas dialog functionality.
 | 
			
		||||
 *
 | 
			
		||||
 * @group outside_in
 | 
			
		||||
 */
 | 
			
		||||
| 
						 | 
				
			
			@ -12,23 +12,23 @@ class OffCanvasTest extends OutsideInJavascriptTestBase {
 | 
			
		|||
  /**
 | 
			
		||||
   * {@inheritdoc}
 | 
			
		||||
   */
 | 
			
		||||
  public static $modules = ['block', 'system', 'toolbar', 'outside_in', 'offcanvas_test'];
 | 
			
		||||
  public static $modules = ['block', 'system', 'toolbar', 'outside_in', 'off_canvas_test'];
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
   * Tests that regular non-contextual links will work with the off-canvas tray.
 | 
			
		||||
   * Tests that regular non-contextual links will work with the off-canvas dialog.
 | 
			
		||||
   */
 | 
			
		||||
  public function testOffCanvasLinks() {
 | 
			
		||||
    $themes = ['bartik', 'stark'];
 | 
			
		||||
    // Test the same functionality on multiple themes.
 | 
			
		||||
    foreach ($themes as $theme) {
 | 
			
		||||
      $this->enableTheme($theme);
 | 
			
		||||
      $this->drupalGet('/offcanvas-test-links');
 | 
			
		||||
      $this->drupalGet('/off-canvas-test-links');
 | 
			
		||||
 | 
			
		||||
      $page = $this->getSession()->getPage();
 | 
			
		||||
      $web_assert = $this->assertSession();
 | 
			
		||||
 | 
			
		||||
      // Make sure off-canvas tray is on page when first loaded.
 | 
			
		||||
      $web_assert->elementNotExists('css', '#drupal-offcanvas');
 | 
			
		||||
      // Make sure off-canvas dialog is on page when first loaded.
 | 
			
		||||
      $web_assert->elementNotExists('css', '#drupal-off-canvas');
 | 
			
		||||
 | 
			
		||||
      // Check opening and closing with two separate links.
 | 
			
		||||
      // Make sure tray updates to new content.
 | 
			
		||||
| 
						 | 
				
			
			@ -40,16 +40,16 @@ class OffCanvasTest extends OutsideInJavascriptTestBase {
 | 
			
		|||
        $this->waitForOffCanvasToOpen();
 | 
			
		||||
 | 
			
		||||
        // Check that the canvas is not on the page.
 | 
			
		||||
        $web_assert->elementExists('css', '#drupal-offcanvas');
 | 
			
		||||
        $web_assert->elementExists('css', '#drupal-off-canvas');
 | 
			
		||||
        // Check that response text is on page.
 | 
			
		||||
        $web_assert->pageTextContains("Thing $link_index says hello");
 | 
			
		||||
        $offcanvas_tray = $this->getTray();
 | 
			
		||||
        $off_canvas_tray = $this->getTray();
 | 
			
		||||
 | 
			
		||||
        // Check that tray is visible.
 | 
			
		||||
        $this->assertEquals(TRUE, $offcanvas_tray->isVisible());
 | 
			
		||||
        $header_text = $offcanvas_tray->find('css', '.ui-dialog-title')->getText();
 | 
			
		||||
        $this->assertEquals(TRUE, $off_canvas_tray->isVisible());
 | 
			
		||||
        $header_text = $off_canvas_tray->find('css', '.ui-dialog-title')->getText();
 | 
			
		||||
 | 
			
		||||
        $tray_text = $offcanvas_tray->findById('drupal-offcanvas')->getText();
 | 
			
		||||
        $tray_text = $off_canvas_tray->findById('drupal-off-canvas')->getText();
 | 
			
		||||
        $this->assertEquals("Thing $link_index says hello", $tray_text);
 | 
			
		||||
 | 
			
		||||
        if ($link_index == '2') {
 | 
			
		||||
| 
						 | 
				
			
			@ -57,7 +57,7 @@ class OffCanvasTest extends OutsideInJavascriptTestBase {
 | 
			
		|||
          $web_assert->elementExists('css', '.ui-dialog-empty-title');
 | 
			
		||||
          $this->assertEquals('', $header_text);
 | 
			
		||||
 | 
			
		||||
          $style = $page->find('css', '.ui-dialog-offcanvas')->getAttribute('style');
 | 
			
		||||
          $style = $page->find('css', '.ui-dialog-off-canvas')->getAttribute('style');
 | 
			
		||||
          self::assertTrue(strstr($style, 'width: 555px;') !== FALSE, 'Dialog width respected.');
 | 
			
		||||
        }
 | 
			
		||||
        else {
 | 
			
		||||
| 
						 | 
				
			
			@ -85,21 +85,21 @@ class OffCanvasTest extends OutsideInJavascriptTestBase {
 | 
			
		|||
      $this->enableTheme($theme);
 | 
			
		||||
      // Testing at the wider width.
 | 
			
		||||
      $this->getSession()->resizeWindow($narrow_width_breakpoint + $offset, $height);
 | 
			
		||||
      $this->drupalGet('/offcanvas-test-links');
 | 
			
		||||
      $this->assertFalse($page->find('css', '.dialog-offcanvas__main-canvas')->hasAttribute('style'), 'Body not padded on wide page load.');
 | 
			
		||||
      $this->drupalGet('/off-canvas-test-links');
 | 
			
		||||
      $this->assertFalse($page->find('css', '.dialog-off-canvas__main-canvas')->hasAttribute('style'), 'Body not padded on wide page load.');
 | 
			
		||||
      $page->clickLink("Click Me 1!");
 | 
			
		||||
      $this->waitForOffCanvasToOpen();
 | 
			
		||||
      // Check that the main canvas is padded when page is not narrow width and
 | 
			
		||||
      // tray is open.
 | 
			
		||||
      $web_assert->elementAttributeContains('css', '.dialog-offcanvas__main-canvas', 'style', 'padding-right');
 | 
			
		||||
      $web_assert->elementAttributeContains('css', '.dialog-off-canvas__main-canvas', 'style', 'padding-right');
 | 
			
		||||
 | 
			
		||||
      // Testing at the narrower width.
 | 
			
		||||
      $this->getSession()->resizeWindow($narrow_width_breakpoint - $offset, $height);
 | 
			
		||||
      $this->drupalGet('/offcanvas-test-links');
 | 
			
		||||
      $this->assertFalse($page->find('css', '.dialog-offcanvas__main-canvas')->hasAttribute('style'), 'Body not padded on narrow page load.');
 | 
			
		||||
      $this->drupalGet('/off-canvas-test-links');
 | 
			
		||||
      $this->assertFalse($page->find('css', '.dialog-off-canvas__main-canvas')->hasAttribute('style'), 'Body not padded on narrow page load.');
 | 
			
		||||
      $page->clickLink("Click Me 1!");
 | 
			
		||||
      $this->waitForOffCanvasToOpen();
 | 
			
		||||
      $this->assertFalse($page->find('css', '.dialog-offcanvas__main-canvas')->hasAttribute('style'), 'Body not padded on narrow page with tray open.');
 | 
			
		||||
      $this->assertFalse($page->find('css', '.dialog-off-canvas__main-canvas')->hasAttribute('style'), 'Body not padded on narrow page with tray open.');
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -7,7 +7,7 @@ use Drupal\block_content\Entity\BlockContentType;
 | 
			
		|||
use Drupal\user\Entity\Role;
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 * Testing opening and saving block forms in the off-canvas tray.
 | 
			
		||||
 * Testing opening and saving block forms in the off-canvas dialog.
 | 
			
		||||
 *
 | 
			
		||||
 * @group outside_in
 | 
			
		||||
 */
 | 
			
		||||
| 
						 | 
				
			
			@ -63,7 +63,7 @@ class OutsideInBlockFormTest extends OutsideInJavascriptTestBase {
 | 
			
		|||
  }
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
   * Tests opening Offcanvas tray by click blocks and elements in the blocks.
 | 
			
		||||
   * Tests opening off-canvas dialog by click blocks and elements in the blocks.
 | 
			
		||||
   *
 | 
			
		||||
   * @dataProvider providerTestBlocks
 | 
			
		||||
   */
 | 
			
		||||
| 
						 | 
				
			
			@ -75,7 +75,7 @@ class OutsideInBlockFormTest extends OutsideInJavascriptTestBase {
 | 
			
		|||
 | 
			
		||||
    $link = $page->find('css', "$block_selector .contextual-links li a");
 | 
			
		||||
    $this->assertEquals('Quick edit', $link->getText(), "'Quick edit' is the first contextual link for the block.");
 | 
			
		||||
    $this->assertContains("/admin/structure/block/manage/$block_id/offcanvas?destination=user/2", $link->getAttribute('href'));
 | 
			
		||||
    $this->assertContains("/admin/structure/block/manage/$block_id/off-canvas?destination=user/2", $link->getAttribute('href'));
 | 
			
		||||
 | 
			
		||||
    if (isset($toolbar_item)) {
 | 
			
		||||
      // Check that you can open a toolbar tray and it will be closed after
 | 
			
		||||
| 
						 | 
				
			
			@ -133,7 +133,7 @@ class OutsideInBlockFormTest extends OutsideInJavascriptTestBase {
 | 
			
		|||
 | 
			
		||||
    // Exit edit mode using ESC.
 | 
			
		||||
    $web_assert->elementTextContains('css', '.contextual-toolbar-tab button', 'Editing');
 | 
			
		||||
    $web_assert->elementAttributeContains('css', '.dialog-offcanvas__main-canvas', 'class', 'js-outside-in-edit-mode');
 | 
			
		||||
    $web_assert->elementAttributeContains('css', '.dialog-off-canvas__main-canvas', 'class', 'js-outside-in-edit-mode');
 | 
			
		||||
    // Simulate press the Escape key.
 | 
			
		||||
    $this->getSession()->executeScript('jQuery("body").trigger(jQuery.Event("keyup", { keyCode: 27 }));');
 | 
			
		||||
    $this->waitForOffCanvasToClose();
 | 
			
		||||
| 
						 | 
				
			
			@ -141,7 +141,7 @@ class OutsideInBlockFormTest extends OutsideInJavascriptTestBase {
 | 
			
		|||
    $this->assertEditModeDisabled();
 | 
			
		||||
    $web_assert->elementTextContains('css', '#drupal-live-announce', 'Exited edit mode.');
 | 
			
		||||
    $web_assert->elementTextNotContains('css', '.contextual-toolbar-tab button', 'Editing');
 | 
			
		||||
    $web_assert->elementAttributeNotContains('css', '.dialog-offcanvas__main-canvas', 'class', 'js-outside-in-edit-mode');
 | 
			
		||||
    $web_assert->elementAttributeNotContains('css', '.dialog-off-canvas__main-canvas', 'class', 'js-outside-in-edit-mode');
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
| 
						 | 
				
			
			@ -274,11 +274,11 @@ class OutsideInBlockFormTest extends OutsideInJavascriptTestBase {
 | 
			
		|||
      $this->openBlockForm($block_selector);
 | 
			
		||||
      $page->find('css', $body_selector)->click();
 | 
			
		||||
      $web_assert->waitForElementVisible('css', $quick_edit_selector);
 | 
			
		||||
      // Offcanvas should be closed when opening QuickEdit toolbar.
 | 
			
		||||
      // OffCanvas should be closed when opening QuickEdit toolbar.
 | 
			
		||||
      $this->waitForOffCanvasToClose();
 | 
			
		||||
 | 
			
		||||
      $this->openBlockForm($block_selector);
 | 
			
		||||
      // QuickEdit toolbar should be closed when opening Offcanvas.
 | 
			
		||||
      // QuickEdit toolbar should be closed when opening off-canvas dialog.
 | 
			
		||||
      $web_assert->elementNotExists('css', $quick_edit_selector);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -292,7 +292,7 @@ class OutsideInBlockFormTest extends OutsideInJavascriptTestBase {
 | 
			
		|||
    // Open off-canvas and enter Edit mode via contextual link.
 | 
			
		||||
    $this->clickContextualLink($block_selector, "Quick edit");
 | 
			
		||||
    $this->waitForOffCanvasToOpen();
 | 
			
		||||
    // QuickEdit toolbar should be closed when opening Offcanvas.
 | 
			
		||||
    // QuickEdit toolbar should be closed when opening off-canvas dialog.
 | 
			
		||||
    $web_assert->elementNotExists('css', $quick_edit_selector);
 | 
			
		||||
    // Open QuickEdit toolbar via contextual link while in Edit mode.
 | 
			
		||||
    $this->clickContextualLink('.node', "Quick edit", FALSE);
 | 
			
		||||
| 
						 | 
				
			
			@ -341,7 +341,7 @@ class OutsideInBlockFormTest extends OutsideInJavascriptTestBase {
 | 
			
		|||
    // The toolbar edit button should read "Editing".
 | 
			
		||||
    $web_assert->elementContains('css', static::TOOLBAR_EDIT_LINK_SELECTOR, 'Editing');
 | 
			
		||||
    // The main canvas element should have the "js-outside-in-edit-mode" class.
 | 
			
		||||
    $web_assert->elementExists('css', '.dialog-offcanvas__main-canvas.js-outside-in-edit-mode');
 | 
			
		||||
    $web_assert->elementExists('css', '.dialog-off-canvas__main-canvas.js-outside-in-edit-mode');
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
| 
						 | 
				
			
			@ -357,7 +357,7 @@ class OutsideInBlockFormTest extends OutsideInJavascriptTestBase {
 | 
			
		|||
    $web_assert->elementContains('css', static::TOOLBAR_EDIT_LINK_SELECTOR, 'Edit');
 | 
			
		||||
    // The main canvas element should NOT have the "js-outside-in-edit-mode"
 | 
			
		||||
    // class.
 | 
			
		||||
    $web_assert->elementNotExists('css', '.dialog-offcanvas__main-canvas.js-outside-in-edit-mode');
 | 
			
		||||
    $web_assert->elementNotExists('css', '.dialog-off-canvas__main-canvas.js-outside-in-edit-mode');
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
| 
						 | 
				
			
			@ -446,7 +446,7 @@ class OutsideInBlockFormTest extends OutsideInJavascriptTestBase {
 | 
			
		|||
    $href = array_search('Quick edit', $link_labels);
 | 
			
		||||
    $this->assertEquals('', $href);
 | 
			
		||||
    $href = array_search('Quick edit settings', $link_labels);
 | 
			
		||||
    $this->assertTrue(strstr($href, '/admin/structure/block/manage/custom/offcanvas?destination=user/2') !== FALSE);
 | 
			
		||||
    $this->assertTrue(strstr($href, '/admin/structure/block/manage/custom/off-canvas?destination=user/2') !== FALSE);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -37,28 +37,28 @@ abstract class OutsideInJavascriptTestBase extends JavascriptTestBase {
 | 
			
		|||
  }
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
   * Waits for Off-canvas tray to open.
 | 
			
		||||
   * Waits for off-canvas dialog to open.
 | 
			
		||||
   */
 | 
			
		||||
  protected function waitForOffCanvasToOpen() {
 | 
			
		||||
    $web_assert = $this->assertSession();
 | 
			
		||||
    $web_assert->assertWaitOnAjaxRequest();
 | 
			
		||||
    $web_assert->waitForElementVisible('css', '#drupal-offcanvas');
 | 
			
		||||
    $web_assert->waitForElementVisible('css', '#drupal-off-canvas');
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
   * Waits for Off-canvas tray to close.
 | 
			
		||||
   * Waits for off-canvas dialog to close.
 | 
			
		||||
   */
 | 
			
		||||
  protected function waitForOffCanvasToClose() {
 | 
			
		||||
    $this->waitForNoElement('#drupal-offcanvas');
 | 
			
		||||
    $this->waitForNoElement('#drupal-off-canvas');
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
   * Gets the Off-Canvas tray element.
 | 
			
		||||
   * Gets the off-canvas dialog element.
 | 
			
		||||
   *
 | 
			
		||||
   * @return \Behat\Mink\Element\NodeElement|null
 | 
			
		||||
   */
 | 
			
		||||
  protected function getTray() {
 | 
			
		||||
    $tray = $this->getSession()->getPage()->find('css', '.ui-dialog[aria-describedby="drupal-offcanvas"]');
 | 
			
		||||
    $tray = $this->getSession()->getPage()->find('css', '.ui-dialog[aria-describedby="drupal-off-canvas"]');
 | 
			
		||||
    $this->assertEquals(FALSE, empty($tray), 'The tray was found.');
 | 
			
		||||
    return $tray;
 | 
			
		||||
  }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -19,7 +19,7 @@ class OpenOffCanvasDialogCommandTest extends UnitTestCase {
 | 
			
		|||
 | 
			
		||||
    $expected = [
 | 
			
		||||
      'command' => 'openDialog',
 | 
			
		||||
      'selector' => '#drupal-offcanvas',
 | 
			
		||||
      'selector' => '#drupal-off-canvas',
 | 
			
		||||
      'settings' => NULL,
 | 
			
		||||
      'data' => '<p>Text!</p>',
 | 
			
		||||
      'dialogOptions' => [
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue