Skip to content
Permalink
Browse files

Overlay and Lightbox: Added no JavaScript fallback

Fixes #6763
  • Loading branch information...
Paul Jackson Paul Jackson
Paul Jackson authored and Paul Jackson committed May 12, 2015
1 parent d6bcaf4 commit 24a93387858ca3d14d9531c844fd653f0821daca
@@ -4,11 +4,17 @@
*/
@import "../variables";

%noscript-display-block-important {
display: block !important;
}

/*
Plugins
*/
@import "../plugins/tabs/noscript";
@import "../plugins/menu/noscript";
@import "../plugins/overlay/noscript";
@import "../plugins/lightbox/noscript";

/*
Polyfills
@@ -72,3 +72,9 @@
width: 25%;
}
}

.wb-disable {
.mfp-hide {
@extend %global-display-block-important;
}
}
@@ -0,0 +1,11 @@
/*
* Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
* wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
*/

/*
* Lightbox Sass (noscript)
*/
.mfp-hide {
@extend %noscript-display-block-important;
}
@@ -218,29 +218,25 @@
}
}

%menu-noscript-display-block-important {
display: block !important;
}

.wb-disable {
#wb-glb-mn {
display: none !important;
}

#wb-srch {
@extend %menu-noscript-display-block-important;
@extend %global-display-block-important;
}

#wb-sm {
@extend %menu-noscript-display-block-important;
@extend %global-display-block-important;
}

#wb-sec {
@extend %menu-noscript-display-block-important;
@extend %global-display-block-important;
}

#wb-info {
@extend %menu-noscript-display-block-important;
@extend %global-display-block-important;
}
}

@@ -6,28 +6,24 @@
/*
* Menu Sass (noscript)
*/
%menu-noscript-display-block-important {
display: block !important;
}

#wb-glb-mn {
display: none !important;
}

#wb-srch {
@extend %menu-noscript-display-block-important;
@extend %noscript-display-block-important;
}

#wb-sm {
@extend %menu-noscript-display-block-important;
@extend %noscript-display-block-important;

.nvbar {
@extend %menu-noscript-display-block-important;
@extend %noscript-display-block-important;
}
}

#wb-sec {
@extend %menu-noscript-display-block-important;
@extend %noscript-display-block-important;
}

#wb-info {
@@ -128,6 +128,12 @@
}
}

.wb-disable {
.wb-overlay {
@extend %global-display-block-important;
}
}

[dir=rtl] {
.mfp-close {
left: 0;
@@ -0,0 +1,11 @@
/*
* Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
* wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
*/

/*
* Overlay Sass (noscript)
*/
.wb-overlay {
@extend %noscript-display-block-important;
}
@@ -19,6 +19,7 @@ var componentName = "wb-overlay",
closeClass = "overlay-close",
linkClass = "overlay-lnk",
ignoreOutsideClass = "outside-off",
initialized = false,
sourceLinks = {},
setFocusEvent = "setfocus.wb",
$document = wb.doc,
@@ -68,6 +69,7 @@ var componentName = "wb-overlay",
elm.setAttribute( "aria-hidden", "true" );

// Identify that initialization has completed
initialized = true;
wb.ready( $elm, componentName );
}
},
@@ -180,8 +182,8 @@ $document.on( "timerpoke.wb " + initEvent + " keydown open" + selector +
$document.on( "click vclick", "." + closeClass, function( event ) {
var which = event.which;

// Ignore middle/right mouse buttons
if ( !which || which === 1 ) {
// Ignore if not initialized and middle/right mouse buttons
if ( initialized && ( !which || which === 1 ) ) {
closeOverlay(
$( event.currentTarget ).closest( selector ).attr( "id" ),
false,
@@ -196,8 +198,8 @@ $document.on( "click vclick", "." + linkClass, function( event ) {
sourceLink = event.currentTarget,
overlayId = sourceLink.hash.substring( 1 );

// Ignore middle/right mouse buttons
if ( !which || which === 1 ) {
// Ignore if not initialized and middle/right mouse buttons
if ( initialized && ( !which || which === 1 ) ) {
event.preventDefault();

// Introduce a delay to prevent outside activity detection
@@ -218,8 +220,8 @@ $document.on( "click vclick", selector + " a[href^='#']", function( event ) {
eventTarget = event.target,
href, overlay, linkTarget;

// Ignore middle/right mouse buttons
if ( !which || which === 1 ) {
// Ignore if not initialized and middle/right mouse buttons
if ( initialized && ( !which || which === 1 ) ) {
overlay = $( eventTarget ).closest( selector )[ 0 ];
href = eventTarget.getAttribute( "href" );
linkTarget = document.getElementById( href.substring( 1 ) );
@@ -247,8 +249,8 @@ $document.on( "click vclick touchstart focusin", "body", function( event ) {
which = event.which,
overlayId, overlay;

// Ignore middle/right mouse buttons
if ( !which || which === 1 ) {
// Ignore if not initialized and middle/right mouse buttons
if ( initialized && ( !which || which === 1 ) ) {

// Close any overlays with outside activity
for ( overlayId in sourceLinks ) {
@@ -267,42 +269,47 @@ $document.on( "click vclick touchstart focusin", "body", function( event ) {

// Ensure any element in focus outside an overlay is visible
$document.on( "keyup", function( ) {
var elmInFocus = document.activeElement,
elmInFocusRect = elmInFocus.getBoundingClientRect(),
focusAreaBelow = 0,
focusAreaAbove = window.innerHeight,
var elmInFocus, elmInFocusRect, focusAreaBelow, focusAreaAbove,
overlayId, overlay, overlayRect;

// Ensure that at least one overlay is visible, and that the element in focus is not an overlay,
// a child of an overlay, or the body element
if ( $.isEmptyObject( sourceLinks ) || elmInFocus.className.indexOf( componentName ) !== -1 ||
$( elmInFocus ).parents( selector ).length !== 0 || elmInFocus === document.body ) {
return;
}
// Ignore if not initialized
if ( initialized ) {
elmInFocus = document.activeElement;
elmInFocusRect = elmInFocus.getBoundingClientRect();
focusAreaBelow = 0;
focusAreaAbove = window.innerHeight;

// Ensure that at least one overlay is visible, and that the element in focus is not an overlay,
// a child of an overlay, or the body element
if ( $.isEmptyObject( sourceLinks ) || elmInFocus.className.indexOf( componentName ) !== -1 ||
$( elmInFocus ).parents( selector ).length !== 0 || elmInFocus === document.body ) {
return;
}

// Determine the vertical portion of the viewport that is not obscured by an overlay
for ( overlayId in sourceLinks ) {
overlay = document.getElementById( overlayId );
if ( overlay && overlay.getAttribute( "aria-hidden" ) === "false" ) {
overlayRect = overlay.getBoundingClientRect();
if ( overlay.className.indexOf( "wb-bar-t" ) !== -1 ) {
focusAreaBelow = Math.max( overlayRect.bottom, focusAreaBelow );
} else if ( overlay.className.indexOf( "wb-bar-b" ) !== -1 ) {
focusAreaAbove = Math.min( overlayRect.top, focusAreaAbove );
// Determine the vertical portion of the viewport that is not obscured by an overlay
for ( overlayId in sourceLinks ) {
overlay = document.getElementById( overlayId );
if ( overlay && overlay.getAttribute( "aria-hidden" ) === "false" ) {
overlayRect = overlay.getBoundingClientRect();
if ( overlay.className.indexOf( "wb-bar-t" ) !== -1 ) {
focusAreaBelow = Math.max( overlayRect.bottom, focusAreaBelow );
} else if ( overlay.className.indexOf( "wb-bar-b" ) !== -1 ) {
focusAreaAbove = Math.min( overlayRect.top, focusAreaAbove );
}
}
}
}

// Ensure the element in focus is visible
// TODO: Find a solution for when there isn't enough page to scoll up or down
if ( elmInFocusRect.top < focusAreaBelow ) {
// Ensure the element in focus is visible
// TODO: Find a solution for when there isn't enough page to scoll up or down
if ( elmInFocusRect.top < focusAreaBelow ) {

// Scroll down till the top of the element is visible
window.scrollBy( 0, focusAreaBelow - elmInFocusRect.top );
} else if ( elmInFocusRect.bottom > focusAreaAbove ) {
// Scroll down till the top of the element is visible
window.scrollBy( 0, focusAreaBelow - elmInFocusRect.top );
} else if ( elmInFocusRect.bottom > focusAreaAbove ) {

// Scroll up till the bottom of the element is visible
window.scrollBy( 0, elmInFocusRect.bottom - focusAreaAbove );
// Scroll up till the bottom of the element is visible
window.scrollBy( 0, elmInFocusRect.bottom - focusAreaAbove );
}
}
} );

0 comments on commit 24a9338

Please sign in to comment.
You can’t perform that action at this time.