Commit bf05c520 authored by webchick's avatar webchick

Issue #2793849 by tedbow, drpal, alexpott, xjm, tim.plunkett, Wim Leers,...

Issue #2793849 by tedbow, drpal, alexpott, xjm, tim.plunkett, Wim Leers, phenaproxima: Handle offcanvas differently at lower widths
parent d55b420a
......@@ -22,3 +22,17 @@
pointer-events: inherit;
}
/*
* Force the tray to be 100% width at the same breakpoint the dialog system uses
* to expand dialog widths.
*/
@media all and (max-width: 48em) { /* 768px */
.ui-dialog.ui-dialog-offcanvas {
width: 100% !important;
}
/* When tray is at 100% width stop the body from scrolling */
.js-tray-open {
height: 100%;
overflow-y: hidden;
}
}
......@@ -11,6 +11,10 @@
'use strict';
// The minimum width to use body displace needs to match the width at which
// the tray will be %100 width. @see outside_in.module.css
var minDisplaceWidth = 768;
/**
* The edge of the screen that the dialog should appear on.
*
......@@ -81,6 +85,9 @@
* The event triggered.
*/
function bodyPadding(event) {
if ($('body').outerWidth() < minDisplaceWidth) {
return;
}
var $element = event.data.$element;
var $widget = $element.dialog('widget');
......@@ -102,6 +109,7 @@
$element
.on('dialogresize.offcanvas', eventData, debounce(bodyPadding, 100))
.on('dialogContentResize.offcanvas', eventData, handleDialogResize)
.on('dialogContentResize.offcanvas', eventData, debounce(bodyPadding, 100))
.trigger('dialogresize.offcanvas');
$element.dialog('widget').attr('data-offset-' + edge, '');
......@@ -113,6 +121,7 @@
},
'dialog:beforecreate': function (event, dialog, $element, settings) {
if ($element.is('#drupal-offcanvas')) {
$('body').addClass('js-tray-open');
// @see http://api.jqueryui.com/position/
settings.position = {
my: 'left top',
......@@ -127,6 +136,7 @@
},
'dialog:beforeclose': function (event, dialog, $element) {
if ($element.is('#drupal-offcanvas')) {
$('body').removeClass('js-tray-open');
$(document).off('.offcanvas');
$(window).off('.offcanvas');
$mainCanvasWrapper.css('padding-' + edge, 0);
......
......@@ -69,4 +69,38 @@ public function testOffCanvasLinks() {
}
}
/**
* Tests the body displacement behaves differently at a narrow width.
*/
public function testNarrowWidth() {
$themes = ['stark', 'bartik'];
$narrow_width_breakpoint = 768;
$offset = 20;
$height = 800;
$page = $this->getSession()->getPage();
$web_assert = $this->assertSession();
// Test the same functionality on multiple themes.
foreach ($themes as $theme) {
$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.');
$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');
// 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.');
$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.');
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment