Skip to content

Commit

Permalink
Merge pull request w3c#71 from jihyerish/polyfill-spatnav-contain-pro…
Browse files Browse the repository at this point in the history 
…perty

Polyfill spatnav contain property
  • Loading branch information
Jihye Hong authored Jun 22, 2018
2 parents 2700650 + 205a875 commit 6f16cca
Show file tree
Hide file tree
Showing 6 changed files with 470 additions and 407 deletions.
34 changes: 17 additions & 17 deletions demo/blog/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<body>
<div class="blog">
<!-- Side bar Section start -->
<div id="sidebar" class="col-sm-3 spatnav-contain" style="display: block;">
<div id="sidebar" class="col-sm-3" style="display: block; --spatial-navigation-contain: contain;">
<div class="text-center">
<img src="images/profile.png" alt="profile" style="width: 60%; height: 60%;">
<br>
Expand All @@ -34,12 +34,12 @@
<!-- Side bar Section end -->

<!-- Feed Section starts -->
<div id="feed" class="col-sm-9 spatnav-contain tabcontent" style="display: block;">
<div id="feed" class="col-sm-9 tabcontent" style="display: block; --spatial-navigation-contain: contain;">
<div class="my-5">
<div class="gridrow mx-5">
<!-- 1st column starts -->
<div class="gridcolumn mr-4">
<div class="card mb-4 spatnav-contain">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabindex="0" class="card-img-top" src="images/feed/1.jpg" style="height: 250px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
Expand All @@ -51,7 +51,7 @@
</div>
</div>
</div>
<div class="card mb-4 spatnav-contain">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/2.jpg" style="height: 300px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
Expand All @@ -63,7 +63,7 @@
</div>
</div>
</div>
<div class="card mb-4 spatnav-contain">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/9.jpg" style="height: 250px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
Expand All @@ -80,7 +80,7 @@

<!-- 2st column starts -->
<div class="gridcolumn mr-4">
<div class="card mb-4 spatnav-contain">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/3.jpg" style="height: 225px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below..</p>
Expand All @@ -92,7 +92,7 @@
</div>
</div>
</div>
<div class="card mb-4 spatnav-contain">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/4.jpg" style="height: 180px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text.</p>
Expand All @@ -104,7 +104,7 @@
</div>
</div>
</div>
<div class="card mb-4 spatnav-contain">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/5.jpg" style="height: 225px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below..</p>
Expand All @@ -116,7 +116,7 @@
</div>
</div>
</div>
<div class="card mb-4 spatnav-contain">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/10.jpg" style="height: 400px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below..</p>
Expand All @@ -133,7 +133,7 @@

<!-- 3rd column starts -->
<div class="gridcolumn mr-4">
<div class="card mb-4 spatnav-contain">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/6.jpg" style="height: 220px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
Expand All @@ -145,7 +145,7 @@
</div>
</div>
</div>
<div class="card mb-4 spatnav-contain">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/7.jpg" style="height: 200px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below..</p>
Expand All @@ -157,7 +157,7 @@
</div>
</div>
</div>
<div class="card mb-4 spatnav-contain">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/8.jpg" style="height: 220px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below..</p>
Expand All @@ -169,7 +169,7 @@
</div>
</div>
</div>
<div class="card mb-4 spatnav-contain">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/11.jpg" style="height: 220px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below..</p>
Expand All @@ -186,7 +186,7 @@

<!-- 4th column starts -->
<div class="gridcolumn mr-4">
<div class="card mb-4 spatnav-contain">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/12.jpg" style="height: 300px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
Expand All @@ -198,7 +198,7 @@
</div>
</div>
</div>
<div class="card mb-4 spatnav-contain">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/13.jpg" style="height: 200px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below..</p>
Expand All @@ -210,7 +210,7 @@
</div>
</div>
</div>
<div class="card mb-4 spatnav-contain">
<div class="card mb-4" style="--spatial-navigation-contain: contain;">
<img tabIndex="0" class="card-img-top" src="images/feed/14.jpg" style="height: 240px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below..</p>
Expand All @@ -231,7 +231,7 @@
<!-- Feed Section end -->

<!-- Sample Section start -->
<div id="sample" class="col-sm-9 spatnav-contain tabcontent" style="display: none;">
<div id="sample" class="col-sm-9 tabcontent" style="display: none; --spatial-navigation-contain: contain;">
<iframe class="sampleFrame" src="../../sample/index.html" tabindex="0" frameborder="0" style="overflow-y: scroll;"></iframe>
</div>
<!-- Sample Section start -->
Expand Down
33 changes: 22 additions & 11 deletions polyfill/spatnav-api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,37 +8,48 @@
* https://wicg.github.io/spatial-navigation
*/

;(function (window, document, undefined) {
(function () {

'use strict';
function SpatnavAPI(options) {

if (!(this instanceof SpatnavAPI)) return new SpatnavAPI(options)
if (!(this instanceof SpatnavAPI)) return new SpatnavAPI(options);

// set the options
this._options = options;
}

/**
* Gives a CSS custom property value applied at the element
* @function
* @param
* element {Element}
* varName {String} without '--'
*/
function readCssVar (element, varName) {
const elementStyles = getComputedStyle(element);
return elementStyles.getPropertyValue(`--${varName}`).trim();
}

SpatnavAPI.prototype.isCSSSpatNavContain = function(el) {
if (el.classList.contains('spatnav-contain')) return true;
if (readCssVar(el, 'spatial-navigation-contain') == 'contain') return true;
else return false;
}
};

/**
* Support the NavigatoinEvent: navbeforefocus, navbeforescroll, navnotarget
*
* Reference: https://wicg.github.io/spatial-navigation/#events-navigationevent
**/

SpatnavAPI.prototype.createNavEvents = function(option, element, direction) {
let data_ = {
const data_ = {
relatedTarget: element,
dir: direction
};

switch (option) {
case 'beforefocus':
let navbeforefocus_event = document.createEvent('CustomEvent');
const navbeforefocus_event = document.createEvent('CustomEvent');
if (typeof spatnavPolyfillOptions == 'object' && spatnavPolyfillOptions.standardName) {
navbeforefocus_event.initCustomEvent('navbeforefocus', true, true, data_);
} else {
Expand All @@ -48,7 +59,7 @@
break;

case 'beforescroll':
let navbeforescroll_event = document.createEvent('CustomEvent');
const navbeforescroll_event = document.createEvent('CustomEvent');
if (typeof spatnavPolyfillOptions == 'object' && spatnavPolyfillOptions.standardName) {
navbeforescroll_event.initCustomEvent('navbeforescroll', true, true, data_);
} else {
Expand All @@ -58,7 +69,7 @@
break;

case 'notarget':
let navnotarget_event = document.createEvent('CustomEvent');
const navnotarget_event = document.createEvent('CustomEvent');
if (typeof spatnavPolyfillOptions == 'object' && spatnavPolyfillOptions.standardName) {
navnotarget_event.initCustomEvent('navnotarget', true, true, data_);
} else {
Expand All @@ -67,9 +78,9 @@
element.dispatchEvent(navnotarget_event);
break;
}
}
};

SpatnavAPI.constructors = {}
SpatnavAPI.constructors = {};

window.SpatnavAPI = SpatnavAPI;

Expand Down
Loading

0 comments on commit 6f16cca

Please sign in to comment.