Skip to content

Commit

Permalink
Merge pull request w3c#76 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 Jul 18, 2018
2 parents 15f9700 + e851354 commit 4d3bdd7
Show file tree
Hide file tree
Showing 5 changed files with 130 additions and 78 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
30 changes: 28 additions & 2 deletions polyfill/spatnav-api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,36 @@
this._options = options;
}

/**
* CSS.registerProperty() from the Properties and Values API
* Reference: https://drafts.css-houdini.org/css-properties-values-api/#the-registerproperty-function
*/
if (window.CSS && CSS.registerProperty) {
console.log("registerProperty is available");
CSS.registerProperty({
name: '--spatial-navigation-contain',
syntax: 'auto | contain',
inherits: false,
initialValue: 'auto'
});
}

/**
* 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
Expand Down
Loading

0 comments on commit 4d3bdd7

Please sign in to comment.