navbar-react
Version:
This is a navbar
1,009 lines (816 loc) • 32.6 kB
JavaScript
;
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var PropTypes = _interopDefault(require('prop-types'));
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css = "@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');\n\n:root {\n --background: rgba(0, 214, 170, .85);\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n}\n\n.layout_clear-fix__1cHIB{\n padding-top: 50px;\n}\n\nbody {\n margin: 0;\n}\n\n.layout_logo__37kff{\n padding: 5px 0;\n display: flex;\n font-weight: 500;\n color: #fff;\n align-items: center;\n}\n\n.layout_logo__37kff div {\n padding: 0 15px;\n}\n\n.layout_content__1inoe {\n height: 200vh;\n background-image: url(//unsplash.it/1000/1000);\n background-color: #333;\n background-blend-mode: multiply;\n background-size: cover;\n display: grid;\n place-items: center;\n}\n\n\nheader {\n /*background: var(--background);*/\n text-align: center;\n position: fixed;\n z-index: 999;\n width: 100%;\n}\n\nheader h1 {\n margin: 5px;\n}\n\n.layout_navToggle__1J_vf:checked ~ nav{\n transform: scale(1, 1);\n}\n\n.layout_navToggle__1J_vf{\n display: none;\n}\n.layout_navToggleLabel__1Z23_ {\n position: absolute;\n top: 0;\n left: 0;\n margin-left: 1em;\n height: 100%;\n display: flex;\n align-items: center;\n}\n\nlabel{\n cursor: pointer;\n}\n\n.layout_navToggleLabel__1Z23_ span,\n.layout_navToggleLabel__1Z23_ span::before,\n.layout_navToggleLabel__1Z23_ span::after {\n transition: ease-in-out 400ms;\n display: block;\n background: white;\n height: 2px;\n width: 2em;\n border-radius: 2px;\n position: relative;\n}\n\n.layout_navToggleLabel__1Z23_ span::before,\n.layout_navToggleLabel__1Z23_ span::after {\n content: '';\n position: absolute;\n}\n\n.layout_navToggleLabel__1Z23_ span::before{\n bottom: 7px;\n}\n\n.layout_navToggleLabel__1Z23_ span::after{\n top: 7px;\n}\n\n.layout_navToggle__1J_vf:checked ~ .layout_navToggleLabel__1Z23_ span::before,\n.layout_navToggle__1J_vf:checked ~ .layout_navToggleLabel__1Z23_ span::after {\n content: none;\n}\n\n\n.layout_navToggle__1J_vf:checked ~ .layout_navToggleLabel__1Z23_ span,\n.layout_navToggle__1J_vf:checked ~ .layout_navToggleLabel__1Z23_ span::before {\n content: \"X\";\n transition: ease-in-out 400ms;\n display: block;\n height: 0;\n font-size: 20px;\n margin-top: -8px;\n width: 0;\n border-radius: 2px;\n position: relative;\n font-weight: 900;\n color: white;\n}\n\n.layout_navToggle__1J_vf:checked ~ .layout_navToggleLabel__1Z23_ span::before{\n bottom: 0;\n}\n\n.layout_navToggle__1J_vf:checked ~ .layout_navToggleLabel__1Z23_ span::after{\n top: 0;\n}\n\nnav {\n position: absolute;\n text-align: left;\n top: 100%;\n width: 100%;\n transform: scale(1, 0);\n transform-origin: top;\n transition: transform 400ms ease-in-out;\n}\n\nnav ul {\n display: flex;\n justify-content: center;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\nnav li {\n margin: 0.5em 1em;\n}\n\nnav a {\n color: white;\n font-size: 2vw;\n text-decoration: none;\n text-transform: uppercase;\n opacity: 0;\n transition: opacity 150ms ease-in-out;\n}\n\n.layout_navToggle__1J_vf:checked ~ nav a{\n opacity: 1;\n transition: opacity 250ms ease-in-out 250ms;\n}\n\nnav a:hover {\n color: #000;\n}\n\n@media screen and (max-width: 800px) {\n nav a {\n font-size: 3vw;\n }\n\n}\n@media screen and (max-width: 1300px) {\n .layout_logo__37kff {\n display: block !important;\n }\n\n .layout_clear-fix__1cHIB{\n padding-top: 75px;\n }\n\n}\n\n@media screen and (min-width: 1300px) {\n\n\n .layout_navToggleLabel__1Z23_ {\n display: none;\n }\n\n header {\n display: grid;\n grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;\n }\n\n .layout_logo__37kff {\n grid-column: 2 / 3;\n }\n\n nav {\n all :unset;\n grid-column: 3 / 4;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n }\n\n nav ul {\n display: flex;\n justify-content: flex-end;\n }\n\n nav li {\n margin-left: 3em;\n margin-bottom: 0;\n }\n\n nav a {\n font-size: 1.2rem;\n opacity: 1;\n position: relative;\n }\n\n nav a::before{\n content: '';\n display: block;\n height: 5px;\n background: black;\n position: absolute;\n bottom: -.60em;\n left: 0;\n right: 0;\n transform: scale(0, 1);\n transition: transform 250ms ease-in-out;\n }\n\n nav a:hover::before{\n transform: scale(1,1);\n }\n}\n\n";
var layout = { "clear-fix": "layout_clear-fix__1cHIB", "logo": "layout_logo__37kff", "content": "layout_content__1inoe", "navToggle": "layout_navToggle__1J_vf", "navToggleLabel": "layout_navToggleLabel__1Z23_" };
styleInject(css);
function mobilecheck() {
var check = false;
(function (a) {
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true;
})(navigator.userAgent || navigator.vendor || window.opera);
return check;
}
var Items = function Items(props) {
var changeColor = function changeColor(e) {
if (!mobilecheck()) {
e.target.style.color = props.hoverColor;
}
};
var defaultColor = function defaultColor(e) {
if (!mobilecheck()) {
e.target.style.color = props.itemTextColor;
}
};
return React__default.createElement(
'li',
null,
React__default.createElement(
'a',
{
onMouseEnter: function onMouseEnter(e) {
return changeColor(e);
},
onMouseOut: function onMouseOut(e) {
return defaultColor(e);
},
style: { color: props.itemTextColor },
href: props.item.href
},
props.item.name
)
);
};
Items.propTypes = {
item: PropTypes.object.isRequired,
itemTextColor: PropTypes.string,
hoverColor: PropTypes.string
};
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var lazysizes = createCommonjsModule(function (module) {
(function(window, factory) {
var lazySizes = factory(window, window.document);
window.lazySizes = lazySizes;
if(module.exports){
module.exports = lazySizes;
}
}(typeof window != 'undefined' ?
window : {}, function l(window, document) {
/*jshint eqnull:true */
var lazysizes, lazySizesCfg;
(function(){
var prop;
var lazySizesDefaults = {
lazyClass: 'lazyload',
loadedClass: 'lazyloaded',
loadingClass: 'lazyloading',
preloadClass: 'lazypreload',
errorClass: 'lazyerror',
//strictClass: 'lazystrict',
autosizesClass: 'lazyautosizes',
srcAttr: 'data-src',
srcsetAttr: 'data-srcset',
sizesAttr: 'data-sizes',
//preloadAfterLoad: false,
minSize: 40,
customMedia: {},
init: true,
expFactor: 1.5,
hFac: 0.8,
loadMode: 2,
loadHidden: true,
ricTimeout: 0,
throttleDelay: 125,
};
lazySizesCfg = window.lazySizesConfig || window.lazysizesConfig || {};
for(prop in lazySizesDefaults){
if(!(prop in lazySizesCfg)){
lazySizesCfg[prop] = lazySizesDefaults[prop];
}
}
})();
if (!document || !document.getElementsByClassName) {
return {
init: function () {},
cfg: lazySizesCfg,
noSupport: true,
};
}
var docElem = document.documentElement;
var Date = window.Date;
var supportPicture = window.HTMLPictureElement;
var _addEventListener = 'addEventListener';
var _getAttribute = 'getAttribute';
var addEventListener = window[_addEventListener];
var setTimeout = window.setTimeout;
var requestAnimationFrame = window.requestAnimationFrame || setTimeout;
var requestIdleCallback = window.requestIdleCallback;
var regPicture = /^picture$/i;
var loadEvents = ['load', 'error', 'lazyincluded', '_lazyloaded'];
var regClassCache = {};
var forEach = Array.prototype.forEach;
var hasClass = function(ele, cls) {
if(!regClassCache[cls]){
regClassCache[cls] = new RegExp('(\\s|^)'+cls+'(\\s|$)');
}
return regClassCache[cls].test(ele[_getAttribute]('class') || '') && regClassCache[cls];
};
var addClass = function(ele, cls) {
if (!hasClass(ele, cls)){
ele.setAttribute('class', (ele[_getAttribute]('class') || '').trim() + ' ' + cls);
}
};
var removeClass = function(ele, cls) {
var reg;
if ((reg = hasClass(ele,cls))) {
ele.setAttribute('class', (ele[_getAttribute]('class') || '').replace(reg, ' '));
}
};
var addRemoveLoadEvents = function(dom, fn, add){
var action = add ? _addEventListener : 'removeEventListener';
if(add){
addRemoveLoadEvents(dom, fn);
}
loadEvents.forEach(function(evt){
dom[action](evt, fn);
});
};
var triggerEvent = function(elem, name, detail, noBubbles, noCancelable){
var event = document.createEvent('Event');
if(!detail){
detail = {};
}
detail.instance = lazysizes;
event.initEvent(name, !noBubbles, !noCancelable);
event.detail = detail;
elem.dispatchEvent(event);
return event;
};
var updatePolyfill = function (el, full){
var polyfill;
if( !supportPicture && ( polyfill = (window.picturefill || lazySizesCfg.pf) ) ){
if(full && full.src && !el[_getAttribute]('srcset')){
el.setAttribute('srcset', full.src);
}
polyfill({reevaluate: true, elements: [el]});
} else if(full && full.src){
el.src = full.src;
}
};
var getCSS = function (elem, style){
return (getComputedStyle(elem, null) || {})[style];
};
var getWidth = function(elem, parent, width){
width = width || elem.offsetWidth;
while(width < lazySizesCfg.minSize && parent && !elem._lazysizesWidth){
width = parent.offsetWidth;
parent = parent.parentNode;
}
return width;
};
var rAF = (function(){
var running, waiting;
var firstFns = [];
var secondFns = [];
var fns = firstFns;
var run = function(){
var runFns = fns;
fns = firstFns.length ? secondFns : firstFns;
running = true;
waiting = false;
while(runFns.length){
runFns.shift()();
}
running = false;
};
var rafBatch = function(fn, queue){
if(running && !queue){
fn.apply(this, arguments);
} else {
fns.push(fn);
if(!waiting){
waiting = true;
(document.hidden ? setTimeout : requestAnimationFrame)(run);
}
}
};
rafBatch._lsFlush = run;
return rafBatch;
})();
var rAFIt = function(fn, simple){
return simple ?
function() {
rAF(fn);
} :
function(){
var that = this;
var args = arguments;
rAF(function(){
fn.apply(that, args);
});
}
;
};
var throttle = function(fn){
var running;
var lastTime = 0;
var gDelay = lazySizesCfg.throttleDelay;
var rICTimeout = lazySizesCfg.ricTimeout;
var run = function(){
running = false;
lastTime = Date.now();
fn();
};
var idleCallback = requestIdleCallback && rICTimeout > 49 ?
function(){
requestIdleCallback(run, {timeout: rICTimeout});
if(rICTimeout !== lazySizesCfg.ricTimeout){
rICTimeout = lazySizesCfg.ricTimeout;
}
} :
rAFIt(function(){
setTimeout(run);
}, true)
;
return function(isPriority){
var delay;
if((isPriority = isPriority === true)){
rICTimeout = 33;
}
if(running){
return;
}
running = true;
delay = gDelay - (Date.now() - lastTime);
if(delay < 0){
delay = 0;
}
if(isPriority || delay < 9){
idleCallback();
} else {
setTimeout(idleCallback, delay);
}
};
};
//based on http://modernjavascript.blogspot.de/2013/08/building-better-debounce.html
var debounce = function(func) {
var timeout, timestamp;
var wait = 99;
var run = function(){
timeout = null;
func();
};
var later = function() {
var last = Date.now() - timestamp;
if (last < wait) {
setTimeout(later, wait - last);
} else {
(requestIdleCallback || run)(run);
}
};
return function() {
timestamp = Date.now();
if (!timeout) {
timeout = setTimeout(later, wait);
}
};
};
var loader = (function(){
var preloadElems, isCompleted, resetPreloadingTimer, loadMode, started;
var eLvW, elvH, eLtop, eLleft, eLright, eLbottom, isBodyHidden;
var regImg = /^img$/i;
var regIframe = /^iframe$/i;
var supportScroll = ('onscroll' in window) && !(/(gle|ing)bot/.test(navigator.userAgent));
var shrinkExpand = 0;
var currentExpand = 0;
var isLoading = 0;
var lowRuns = -1;
var resetPreloading = function(e){
isLoading--;
if(!e || isLoading < 0 || !e.target){
isLoading = 0;
}
};
var isVisible = function (elem) {
if (isBodyHidden == null) {
isBodyHidden = getCSS(document.body, 'visibility') == 'hidden';
}
return isBodyHidden || !(getCSS(elem.parentNode, 'visibility') == 'hidden' && getCSS(elem, 'visibility') == 'hidden');
};
var isNestedVisible = function(elem, elemExpand){
var outerRect;
var parent = elem;
var visible = isVisible(elem);
eLtop -= elemExpand;
eLbottom += elemExpand;
eLleft -= elemExpand;
eLright += elemExpand;
while(visible && (parent = parent.offsetParent) && parent != document.body && parent != docElem){
visible = ((getCSS(parent, 'opacity') || 1) > 0);
if(visible && getCSS(parent, 'overflow') != 'visible'){
outerRect = parent.getBoundingClientRect();
visible = eLright > outerRect.left &&
eLleft < outerRect.right &&
eLbottom > outerRect.top - 1 &&
eLtop < outerRect.bottom + 1
;
}
}
return visible;
};
var checkElements = function() {
var eLlen, i, rect, autoLoadElem, loadedSomething, elemExpand, elemNegativeExpand, elemExpandVal,
beforeExpandVal, defaultExpand, preloadExpand, hFac;
var lazyloadElems = lazysizes.elements;
if((loadMode = lazySizesCfg.loadMode) && isLoading < 8 && (eLlen = lazyloadElems.length)){
i = 0;
lowRuns++;
for(; i < eLlen; i++){
if(!lazyloadElems[i] || lazyloadElems[i]._lazyRace){continue;}
if(!supportScroll || (lazysizes.prematureUnveil && lazysizes.prematureUnveil(lazyloadElems[i]))){unveilElement(lazyloadElems[i]);continue;}
if(!(elemExpandVal = lazyloadElems[i][_getAttribute]('data-expand')) || !(elemExpand = elemExpandVal * 1)){
elemExpand = currentExpand;
}
if (!defaultExpand) {
defaultExpand = (!lazySizesCfg.expand || lazySizesCfg.expand < 1) ?
docElem.clientHeight > 500 && docElem.clientWidth > 500 ? 500 : 370 :
lazySizesCfg.expand;
lazysizes._defEx = defaultExpand;
preloadExpand = defaultExpand * lazySizesCfg.expFactor;
hFac = lazySizesCfg.hFac;
isBodyHidden = null;
if(currentExpand < preloadExpand && isLoading < 1 && lowRuns > 2 && loadMode > 2 && !document.hidden){
currentExpand = preloadExpand;
lowRuns = 0;
} else if(loadMode > 1 && lowRuns > 1 && isLoading < 6){
currentExpand = defaultExpand;
} else {
currentExpand = shrinkExpand;
}
}
if(beforeExpandVal !== elemExpand){
eLvW = innerWidth + (elemExpand * hFac);
elvH = innerHeight + elemExpand;
elemNegativeExpand = elemExpand * -1;
beforeExpandVal = elemExpand;
}
rect = lazyloadElems[i].getBoundingClientRect();
if ((eLbottom = rect.bottom) >= elemNegativeExpand &&
(eLtop = rect.top) <= elvH &&
(eLright = rect.right) >= elemNegativeExpand * hFac &&
(eLleft = rect.left) <= eLvW &&
(eLbottom || eLright || eLleft || eLtop) &&
(lazySizesCfg.loadHidden || isVisible(lazyloadElems[i])) &&
((isCompleted && isLoading < 3 && !elemExpandVal && (loadMode < 3 || lowRuns < 4)) || isNestedVisible(lazyloadElems[i], elemExpand))){
unveilElement(lazyloadElems[i]);
loadedSomething = true;
if(isLoading > 9){break;}
} else if(!loadedSomething && isCompleted && !autoLoadElem &&
isLoading < 4 && lowRuns < 4 && loadMode > 2 &&
(preloadElems[0] || lazySizesCfg.preloadAfterLoad) &&
(preloadElems[0] || (!elemExpandVal && ((eLbottom || eLright || eLleft || eLtop) || lazyloadElems[i][_getAttribute](lazySizesCfg.sizesAttr) != 'auto')))){
autoLoadElem = preloadElems[0] || lazyloadElems[i];
}
}
if(autoLoadElem && !loadedSomething){
unveilElement(autoLoadElem);
}
}
};
var throttledCheckElements = throttle(checkElements);
var switchLoadingClass = function(e){
var elem = e.target;
if (elem._lazyCache) {
delete elem._lazyCache;
return;
}
resetPreloading(e);
addClass(elem, lazySizesCfg.loadedClass);
removeClass(elem, lazySizesCfg.loadingClass);
addRemoveLoadEvents(elem, rafSwitchLoadingClass);
triggerEvent(elem, 'lazyloaded');
};
var rafedSwitchLoadingClass = rAFIt(switchLoadingClass);
var rafSwitchLoadingClass = function(e){
rafedSwitchLoadingClass({target: e.target});
};
var changeIframeSrc = function(elem, src){
try {
elem.contentWindow.location.replace(src);
} catch(e){
elem.src = src;
}
};
var handleSources = function(source){
var customMedia;
var sourceSrcset = source[_getAttribute](lazySizesCfg.srcsetAttr);
if( (customMedia = lazySizesCfg.customMedia[source[_getAttribute]('data-media') || source[_getAttribute]('media')]) ){
source.setAttribute('media', customMedia);
}
if(sourceSrcset){
source.setAttribute('srcset', sourceSrcset);
}
};
var lazyUnveil = rAFIt(function (elem, detail, isAuto, sizes, isImg){
var src, srcset, parent, isPicture, event, firesLoad;
if(!(event = triggerEvent(elem, 'lazybeforeunveil', detail)).defaultPrevented){
if(sizes){
if(isAuto){
addClass(elem, lazySizesCfg.autosizesClass);
} else {
elem.setAttribute('sizes', sizes);
}
}
srcset = elem[_getAttribute](lazySizesCfg.srcsetAttr);
src = elem[_getAttribute](lazySizesCfg.srcAttr);
if(isImg) {
parent = elem.parentNode;
isPicture = parent && regPicture.test(parent.nodeName || '');
}
firesLoad = detail.firesLoad || (('src' in elem) && (srcset || src || isPicture));
event = {target: elem};
addClass(elem, lazySizesCfg.loadingClass);
if(firesLoad){
clearTimeout(resetPreloadingTimer);
resetPreloadingTimer = setTimeout(resetPreloading, 2500);
addRemoveLoadEvents(elem, rafSwitchLoadingClass, true);
}
if(isPicture){
forEach.call(parent.getElementsByTagName('source'), handleSources);
}
if(srcset){
elem.setAttribute('srcset', srcset);
} else if(src && !isPicture){
if(regIframe.test(elem.nodeName)){
changeIframeSrc(elem, src);
} else {
elem.src = src;
}
}
if(isImg && (srcset || isPicture)){
updatePolyfill(elem, {src: src});
}
}
if(elem._lazyRace){
delete elem._lazyRace;
}
removeClass(elem, lazySizesCfg.lazyClass);
rAF(function(){
// Part of this can be removed as soon as this fix is older: https://bugs.chromium.org/p/chromium/issues/detail?id=7731 (2015)
var isLoaded = elem.complete && elem.naturalWidth > 1;
if( !firesLoad || isLoaded){
if (isLoaded) {
addClass(elem, 'ls-is-cached');
}
switchLoadingClass(event);
elem._lazyCache = true;
setTimeout(function(){
if ('_lazyCache' in elem) {
delete elem._lazyCache;
}
}, 9);
}
if (elem.loading == 'lazy') {
isLoading--;
}
}, true);
});
var unveilElement = function (elem){
if (elem._lazyRace) {return;}
var detail;
var isImg = regImg.test(elem.nodeName);
//allow using sizes="auto", but don't use. it's invalid. Use data-sizes="auto" or a valid value for sizes instead (i.e.: sizes="80vw")
var sizes = isImg && (elem[_getAttribute](lazySizesCfg.sizesAttr) || elem[_getAttribute]('sizes'));
var isAuto = sizes == 'auto';
if( (isAuto || !isCompleted) && isImg && (elem[_getAttribute]('src') || elem.srcset) && !elem.complete && !hasClass(elem, lazySizesCfg.errorClass) && hasClass(elem, lazySizesCfg.lazyClass)){return;}
detail = triggerEvent(elem, 'lazyunveilread').detail;
if(isAuto){
autoSizer.updateElem(elem, true, elem.offsetWidth);
}
elem._lazyRace = true;
isLoading++;
lazyUnveil(elem, detail, isAuto, sizes, isImg);
};
var afterScroll = debounce(function(){
lazySizesCfg.loadMode = 3;
throttledCheckElements();
});
var altLoadmodeScrollListner = function(){
if(lazySizesCfg.loadMode == 3){
lazySizesCfg.loadMode = 2;
}
afterScroll();
};
var onload = function(){
if(isCompleted){return;}
if(Date.now() - started < 999){
setTimeout(onload, 999);
return;
}
isCompleted = true;
lazySizesCfg.loadMode = 3;
throttledCheckElements();
addEventListener('scroll', altLoadmodeScrollListner, true);
};
return {
_: function(){
started = Date.now();
lazysizes.elements = document.getElementsByClassName(lazySizesCfg.lazyClass);
preloadElems = document.getElementsByClassName(lazySizesCfg.lazyClass + ' ' + lazySizesCfg.preloadClass);
addEventListener('scroll', throttledCheckElements, true);
addEventListener('resize', throttledCheckElements, true);
if(window.MutationObserver){
new MutationObserver( throttledCheckElements ).observe( docElem, {childList: true, subtree: true, attributes: true} );
} else {
docElem[_addEventListener]('DOMNodeInserted', throttledCheckElements, true);
docElem[_addEventListener]('DOMAttrModified', throttledCheckElements, true);
setInterval(throttledCheckElements, 999);
}
addEventListener('hashchange', throttledCheckElements, true);
//, 'fullscreenchange'
['focus', 'mouseover', 'click', 'load', 'transitionend', 'animationend'].forEach(function(name){
document[_addEventListener](name, throttledCheckElements, true);
});
if((/d$|^c/.test(document.readyState))){
onload();
} else {
addEventListener('load', onload);
document[_addEventListener]('DOMContentLoaded', throttledCheckElements);
setTimeout(onload, 20000);
}
if(lazysizes.elements.length){
checkElements();
rAF._lsFlush();
} else {
throttledCheckElements();
}
},
checkElems: throttledCheckElements,
unveil: unveilElement,
_aLSL: altLoadmodeScrollListner,
};
})();
var autoSizer = (function(){
var autosizesElems;
var sizeElement = rAFIt(function(elem, parent, event, width){
var sources, i, len;
elem._lazysizesWidth = width;
width += 'px';
elem.setAttribute('sizes', width);
if(regPicture.test(parent.nodeName || '')){
sources = parent.getElementsByTagName('source');
for(i = 0, len = sources.length; i < len; i++){
sources[i].setAttribute('sizes', width);
}
}
if(!event.detail.dataAttr){
updatePolyfill(elem, event.detail);
}
});
var getSizeElement = function (elem, dataAttr, width){
var event;
var parent = elem.parentNode;
if(parent){
width = getWidth(elem, parent, width);
event = triggerEvent(elem, 'lazybeforesizes', {width: width, dataAttr: !!dataAttr});
if(!event.defaultPrevented){
width = event.detail.width;
if(width && width !== elem._lazysizesWidth){
sizeElement(elem, parent, event, width);
}
}
}
};
var updateElementsSizes = function(){
var i;
var len = autosizesElems.length;
if(len){
i = 0;
for(; i < len; i++){
getSizeElement(autosizesElems[i]);
}
}
};
var debouncedUpdateElementsSizes = debounce(updateElementsSizes);
return {
_: function(){
autosizesElems = document.getElementsByClassName(lazySizesCfg.autosizesClass);
addEventListener('resize', debouncedUpdateElementsSizes);
},
checkElems: debouncedUpdateElementsSizes,
updateElem: getSizeElement
};
})();
var init = function(){
if(!init.i && document.getElementsByClassName){
init.i = true;
autoSizer._();
loader._();
}
};
setTimeout(function(){
if(lazySizesCfg.init){
init();
}
});
lazysizes = {
cfg: lazySizesCfg,
autoSizer: autoSizer,
loader: loader,
init: init,
uP: updatePolyfill,
aC: addClass,
rC: removeClass,
hC: hasClass,
fire: triggerEvent,
gW: getWidth,
rAF: rAF,
};
return lazysizes;
}
));
});
var placeholderLogo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAoBAMAAABOXLR/AAAAG1BMVEXj4+P////m5ubt7e37+/v4+Pj09PTx8fHq6uoZmDkPAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAZklEQVQ4jWNgGAX0B0zCQELFAJuUoQIDQyhWTWwBDMxO2I1zZ1BswG5TY0MYDjewuzvgcp4jDsMYmByxuhkIWDOEcMiYMKTiMEyCgaUAu2EJDBwSWGVKgDgFmwRYPUsCDjeMAmIBAPbACTVpjobBAAAAAElFTkSuQmCC";
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
var inherits = function (subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};
var possibleConstructorReturn = function (self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};
var Layout = function (_Component) {
inherits(Layout, _Component);
function Layout() {
var _ref;
var _temp, _this, _ret;
classCallCheck(this, Layout);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = Layout.__proto__ || Object.getPrototypeOf(Layout)).call.apply(_ref, [this].concat(args))), _this), _this.itemList = _this.props.items.map(function (item, i) {
return React__default.createElement(Items, { key: i, itemTextColor: _this.props.itemTextColor, hoverColor: _this.props.hoverColor, item: item });
}), _temp), possibleConstructorReturn(_this, _ret);
}
createClass(Layout, [{
key: 'render',
value: function render() {
return React__default.createElement(
React.Fragment,
null,
React__default.createElement(
'header',
{ style: { background: this.props.color } },
React__default.createElement(
'div',
{ className: layout.logo },
React__default.createElement('img', {
alt: '100%x200',
src: placeholderLogo,
'data-src': this.props.logo,
className: 'lazyload' }),
React__default.createElement(
'div',
{ style: { cursor: 'default', color: this.props.titleColor } },
this.props.title
)
),
React__default.createElement('input', { type: 'checkbox', id: 'nav-toggle', className: layout.navToggle }),
React__default.createElement(
'nav',
{ style: { background: this.props.color } },
React__default.createElement(
'ul',
null,
this.itemList
)
),
React__default.createElement(
'label',
{ htmlFor: 'nav-toggle', className: layout.navToggleLabel },
React__default.createElement(
'span',
null,
' '
)
)
),
React__default.createElement(
'div',
{ className: layout['clear-fix'] },
' '
)
);
}
}]);
return Layout;
}(React.Component);
Layout.propTypes = {
items: PropTypes.array,
color: PropTypes.string,
logo: PropTypes.string,
hoverColor: PropTypes.string,
titleColor: PropTypes.string,
title: PropTypes.string,
itemTextColor: PropTypes.string
};
var ExampleComponent = function (_Component) {
inherits(ExampleComponent, _Component);
function ExampleComponent() {
classCallCheck(this, ExampleComponent);
return possibleConstructorReturn(this, (ExampleComponent.__proto__ || Object.getPrototypeOf(ExampleComponent)).apply(this, arguments));
}
createClass(ExampleComponent, [{
key: 'render',
value: function render() {
var _props = this.props,
color = _props.color,
title = _props.title,
titleColor = _props.titleColor,
items = _props.items,
logo = _props.logo,
hoverColor = _props.hoverColor,
itemTextColor = _props.itemTextColor;
return React__default.createElement(Layout, {
color: color,
logo: logo,
title: title,
hoverColor: hoverColor,
titleColor: titleColor,
items: items,
itemTextColor: itemTextColor
});
}
}]);
return ExampleComponent;
}(React.Component);
ExampleComponent.propTypes = {
color: PropTypes.string,
logo: PropTypes.string,
title: PropTypes.string,
titleColor: PropTypes.string,
hoverColor: PropTypes.string,
itemTextColor: PropTypes.string,
items: PropTypes.array
};
module.exports = ExampleComponent;
//# sourceMappingURL=index.js.map