Skip to content

Commit

Permalink
v 2.1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
Oleg Korsunsky committed Aug 15, 2018
1 parent 6cc7913 commit 5a11aad
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 31 deletions.
44 changes: 35 additions & 9 deletions dist/stickyfill.es6.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*!
* Stickyfill – `position: sticky` polyfill
* v. 2.0.5 | https://github.com/wilddeer/stickyfill
* v. 2.1.0 | https://github.com/wilddeer/stickyfill
* MIT License
*/

Expand All @@ -13,8 +13,10 @@
*/
let seppuku = false;

// The polyfill cant’t function properly without `getComputedStyle`.
if (!window.getComputedStyle) seppuku = true;
const isWindowDefined = typeof window !== 'undefined';

// The polyfill can’t function properly without `window` or `window.getComputedStyle`.
if (!isWindowDefined || !window.getComputedStyle) seppuku = true;
// Dont’t get in a way if the browser supports `position: sticky` natively.
else {
const testNode = document.createElement('div');
Expand All @@ -35,6 +37,7 @@ else {
/*
* 2. “Global” vars used across the polyfill
*/
let isInitialized = false;

// Check if Shadow Root constructor exists to make further checks simpler
const shadowRootExists = typeof ShadowRoot !== 'undefined';
Expand Down Expand Up @@ -106,6 +109,7 @@ class Sticky {
*/
const nodeComputedStyle = getComputedStyle(node);
const nodeComputedProps = {
position: nodeComputedStyle.position,
top: nodeComputedStyle.top,
display: nodeComputedStyle.display,
marginTop: nodeComputedStyle.marginTop,
Expand All @@ -127,7 +131,16 @@ class Sticky {
this._active = true;

/*
* 3. Get necessary node parameters
* 3. Check if the current node position is `sticky`. If it is, it means that the browser supports sticky positioning,
* but the polyfill was force-enabled. We set the node’s position to `static` before continuing, so that the node
* is in it’s initial position when we gather its params.
*/
const originalPosition = node.style.position;
if (nodeComputedStyle.position == 'sticky' || nodeComputedStyle.position == '-webkit-sticky')
node.style.position = 'static';

/*
* 4. Get necessary node parameters
*/
const referenceNode = node.parentNode;
const parentNode = shadowRootExists && referenceNode instanceof ShadowRoot? referenceNode.host: referenceNode;
Expand All @@ -152,7 +165,7 @@ class Sticky {
right: -nodeWinOffset.right + parentWinOffset.right - parseNumeric(parentComputedStyle.borderRightWidth)
};
this._styles = {
position: node.style.position,
position: originalPosition,
top: node.style.top,
bottom: node.style.bottom,
left: node.style.left,
Expand All @@ -172,7 +185,7 @@ class Sticky {
};

/*
* 4. Ensure that the node will be positioned relatively to the parent node
* 5. Ensure that the node will be positioned relatively to the parent node
*/
const parentPosition = parentComputedStyle.position;

Expand All @@ -184,13 +197,13 @@ class Sticky {
}

/*
* 5. Recalc node position.
* 6. Recalc node position.
* It’s important to do this before clone injection to avoid scrolling bug in Chrome.
*/
this._recalcPosition();

/*
* 6. Create a clone
* 7. Create a clone
*/
const clone = this._clone = {};
clone.node = document.createElement('div');
Expand Down Expand Up @@ -323,6 +336,13 @@ const Stickyfill = {
stickies,
Sticky,

forceSticky () {
seppuku = false;
init();

this.refreshAll();
},

addOne (node) {
// Check whether it’s a node
if (!(node instanceof HTMLElement)) {
Expand Down Expand Up @@ -428,6 +448,12 @@ const Stickyfill = {
* 6. Setup events (unless the polyfill was disabled)
*/
function init () {
if (isInitialized) {
return;
}

isInitialized = true;

// Watch for scroll position changes and trigger recalc/refresh if needed
function checkScroll () {
if (window.pageXOffset != scroll.left) {
Expand Down Expand Up @@ -501,7 +527,7 @@ if (!seppuku) init();
if (typeof module != 'undefined' && module.exports) {
module.exports = Stickyfill;
}
else {
else if (isWindowDefined) {
window.Stickyfill = Stickyfill;
}

62 changes: 44 additions & 18 deletions dist/stickyfill.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*!
* Stickyfill – `position: sticky` polyfill
* v. 2.0.5 | https://github.com/wilddeer/stickyfill
* v. 2.1.0 | https://github.com/wilddeer/stickyfill
* MIT License
*/

Expand All @@ -19,24 +19,29 @@

var seppuku = false;

// The polyfill cant’t function properly without `getComputedStyle`.
if (!window.getComputedStyle) seppuku = true;
var isWindowDefined = typeof window !== 'undefined';

// The polyfill can’t function properly without `window` or `window.getComputedStyle`.
if (!isWindowDefined || !window.getComputedStyle) seppuku = true;
// Dont’t get in a way if the browser supports `position: sticky` natively.
else {
var testNode = document.createElement('div');
(function () {
var testNode = document.createElement('div');

if (['', '-webkit-', '-moz-', '-ms-'].some(function (prefix) {
try {
testNode.style.position = prefix + 'sticky';
} catch (e) {}
if (['', '-webkit-', '-moz-', '-ms-'].some(function (prefix) {
try {
testNode.style.position = prefix + 'sticky';
} catch (e) {}

return testNode.style.position != '';
})) seppuku = true;
return testNode.style.position != '';
})) seppuku = true;
})();
}

/*
* 2. “Global” vars used across the polyfill
*/
var isInitialized = false;

// Check if Shadow Root constructor exists to make further checks simpler
var shadowRootExists = typeof ShadowRoot !== 'undefined';
Expand Down Expand Up @@ -111,6 +116,7 @@
*/
var nodeComputedStyle = getComputedStyle(node);
var nodeComputedProps = {
position: nodeComputedStyle.position,
top: nodeComputedStyle.top,
display: nodeComputedStyle.display,
marginTop: nodeComputedStyle.marginTop,
Expand All @@ -128,7 +134,15 @@
this._active = true;

/*
* 3. Get necessary node parameters
* 3. Check if the current node position is `sticky`. If it is, it means that the browser supports sticky positioning,
* but the polyfill was force-enabled. We set the node’s position to `static` before continuing, so that the node
* is in it’s initial position when we gather its params.
*/
var originalPosition = node.style.position;
if (nodeComputedStyle.position == 'sticky' || nodeComputedStyle.position == '-webkit-sticky') node.style.position = 'static';

/*
* 4. Get necessary node parameters
*/
var referenceNode = node.parentNode;
var parentNode = shadowRootExists && referenceNode instanceof ShadowRoot ? referenceNode.host : referenceNode;
Expand All @@ -153,7 +167,7 @@
right: -nodeWinOffset.right + parentWinOffset.right - parseNumeric(parentComputedStyle.borderRightWidth)
};
this._styles = {
position: node.style.position,
position: originalPosition,
top: node.style.top,
bottom: node.style.bottom,
left: node.style.left,
Expand All @@ -171,7 +185,7 @@
};

/*
* 4. Ensure that the node will be positioned relatively to the parent node
* 5. Ensure that the node will be positioned relatively to the parent node
*/
var parentPosition = parentComputedStyle.position;

Expand All @@ -180,13 +194,13 @@
}

/*
* 5. Recalc node position.
* 6. Recalc node position.
* It’s important to do this before clone injection to avoid scrolling bug in Chrome.
*/
this._recalcPosition();

/*
* 6. Create a clone
* 7. Create a clone
*/
var clone = this._clone = {};
clone.node = document.createElement('div');
Expand Down Expand Up @@ -330,6 +344,12 @@
stickies: stickies,
Sticky: Sticky,

forceSticky: function forceSticky() {
seppuku = false;
init();

this.refreshAll();
},
addOne: function addOne(node) {
// Check whether it’s a node
if (!(node instanceof HTMLElement)) {
Expand Down Expand Up @@ -380,9 +400,9 @@
};

for (var i = 0; i < nodeList.length; i++) {
var _ret = _loop(i);
var _ret2 = _loop(i);

if (_ret === 'continue') continue;
if (_ret2 === 'continue') continue;
}

return addedStickies;
Expand Down Expand Up @@ -442,6 +462,12 @@
* 6. Setup events (unless the polyfill was disabled)
*/
function init() {
if (isInitialized) {
return;
}

isInitialized = true;

// Watch for scroll position changes and trigger recalc/refresh if needed
function checkScroll() {
if (window.pageXOffset != scroll.left) {
Expand Down Expand Up @@ -513,7 +539,7 @@
*/
if (typeof module != 'undefined' && module.exports) {
module.exports = Stickyfill;
} else {
} else if (isWindowDefined) {
window.Stickyfill = Stickyfill;
}

Expand Down
Loading

0 comments on commit 5a11aad

Please sign in to comment.