post header bg scroll if safari
This commit is contained in:
wgroeneveld
parent
90eb10ea7a
commit
25a2c2dfa2
|
|
@ -13,7 +13,7 @@
|
|||
"@babel/preset-env": "^7.9.6"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
"build": "/usr/local/bin/hugo"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
|||
|
|
@ -1,122 +1,136 @@
|
|||
(function() {
|
||||
|
||||
function modifyClass(el, targetClass) {
|
||||
if (isObj(el) && targetClass) {
|
||||
const elClass = el.classList;
|
||||
elClass.contains(targetClass) ? elClass.remove(targetClass) : elClass.add(targetClass);
|
||||
}
|
||||
}
|
||||
|
||||
function containsClass(el, targetClass) {
|
||||
if (isObj(el) && targetClass && el !== document ) {
|
||||
return el.classList.contains(targetClass) ? true : false;
|
||||
}
|
||||
}
|
||||
|
||||
function isObj(obj) {
|
||||
return (obj && typeof obj === 'object' && obj !== null) ? true : false;
|
||||
}
|
||||
|
||||
function elem(selector, parent = document){
|
||||
let elem = parent.querySelector(selector);
|
||||
return elem != false ? elem : false;
|
||||
}
|
||||
|
||||
function elems(selector, parent = document) {
|
||||
let elems = parent.querySelectorAll(selector);
|
||||
return elems.length ? elems : false;
|
||||
}
|
||||
|
||||
function pushClass(el, targetClass) {
|
||||
if (isObj(el) && targetClass) {
|
||||
const elClass = el.classList;
|
||||
elClass.contains(targetClass) ? false : elClass.add(targetClass);
|
||||
}
|
||||
}
|
||||
// from swift theme: sandwich
|
||||
// ******
|
||||
(function() {
|
||||
let bar = 'nav_bar-wrap';
|
||||
let navBar = elem(`.${bar}`);
|
||||
let nav = elem('.nav-body');
|
||||
let open = 'nav-open';
|
||||
let exit = 'nav-exit';
|
||||
let drop = 'nav-drop';
|
||||
let pop = 'nav-pop';
|
||||
let navDrop = elem(`.${drop}`);
|
||||
|
||||
function toggleMenu(){
|
||||
let menuOpen, menuPulled, status;
|
||||
modifyClass(navDrop, pop);
|
||||
modifyClass(navBar, 'hidden');
|
||||
menuOpen = containsClass(nav, open);
|
||||
menuPulled = containsClass(nav, exit);
|
||||
|
||||
status = menuOpen || menuPulled ? true : false;
|
||||
|
||||
status ? modifyClass(nav, exit) : modifyClass(nav, open);
|
||||
status ? modifyClass(nav, open) : modifyClass(nav, exit);
|
||||
}
|
||||
|
||||
navBar.addEventListener('click', function() {
|
||||
toggleMenu();
|
||||
});
|
||||
elem('.nav-close').addEventListener('click', function() {
|
||||
toggleMenu();
|
||||
});
|
||||
|
||||
elem('.nav-drop').addEventListener('click', function(e) {
|
||||
e.target === this ? toggleMenu() : false;
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
|
||||
(function postsPager(){
|
||||
const pager = elem('.pagination');
|
||||
if (pager) {
|
||||
pushClass(pager, 'pager');
|
||||
const pagerItems = elems('li', pager);
|
||||
const pagerLinks = Array.from(pagerItems).map(function(item){
|
||||
return item.firstElementChild;
|
||||
});
|
||||
|
||||
pagerLinks.forEach(function(link){
|
||||
pushClass(link, 'pager_link')
|
||||
});
|
||||
|
||||
pagerItems.forEach(function(item){
|
||||
pushClass(item, 'pager_item')
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
var fbposts = document.querySelector('#fbposts');
|
||||
function whoops(error) {
|
||||
console.log(error);
|
||||
fbposts.innerHTML = "<li>Er is iets misgelopen bij het ophalen van Facebook posts.</li>";
|
||||
}
|
||||
function parseFeed(response) {
|
||||
if(response && !response.error) {
|
||||
var html = "";
|
||||
|
||||
response.data.forEach(function(elem) {
|
||||
var id = elem.id.substring(elem.id.indexOf('_') + 1, elem.id.length);
|
||||
html += "<li class = 'post_item'><div class='fb-post' data-href='https://www.facebook.com/redzuurdesem/posts/" + id + "'></div></li>";
|
||||
});
|
||||
|
||||
fbposts.innerHTML = html;
|
||||
FB.XFBML.parse(fbposts);
|
||||
} else {
|
||||
whoops(response.error);
|
||||
function modifyClass(el, targetClass) {
|
||||
if (isObj(el) && targetClass) {
|
||||
const elClass = el.classList;
|
||||
elClass.contains(targetClass) ? elClass.remove(targetClass) : elClass.add(targetClass);
|
||||
}
|
||||
}
|
||||
|
||||
function getRedZuurdesemFacebookFeed() {
|
||||
try {
|
||||
FB.api("/redzuurdesem/feed?limit=4&access_token=" + window.fbtoken, parseFeed);
|
||||
} catch(e) {
|
||||
whoops(e);
|
||||
function containsClass(el, targetClass) {
|
||||
if (isObj(el) && targetClass && el !== document ) {
|
||||
return el.classList.contains(targetClass) ? true : false;
|
||||
}
|
||||
}
|
||||
|
||||
function isObj(obj) {
|
||||
return (obj && typeof obj === 'object' && obj !== null) ? true : false;
|
||||
}
|
||||
|
||||
function elem(selector, parent = document){
|
||||
let elem = parent.querySelector(selector);
|
||||
return elem != false ? elem : false;
|
||||
}
|
||||
|
||||
function elems(selector, parent = document) {
|
||||
let elems = parent.querySelectorAll(selector);
|
||||
return elems.length ? elems : false;
|
||||
}
|
||||
|
||||
function pushClass(el, targetClass) {
|
||||
if (isObj(el) && targetClass) {
|
||||
const elClass = el.classList;
|
||||
elClass.contains(targetClass) ? false : elClass.add(targetClass);
|
||||
}
|
||||
}
|
||||
|
||||
(function() {
|
||||
let bar = 'nav_bar-wrap';
|
||||
let navBar = elem(`.${bar}`);
|
||||
let nav = elem('.nav-body');
|
||||
let open = 'nav-open';
|
||||
let exit = 'nav-exit';
|
||||
let drop = 'nav-drop';
|
||||
let pop = 'nav-pop';
|
||||
let navDrop = elem(`.${drop}`);
|
||||
|
||||
function toggleMenu(){
|
||||
let menuOpen, menuPulled, status;
|
||||
modifyClass(navDrop, pop);
|
||||
modifyClass(navBar, 'hidden');
|
||||
menuOpen = containsClass(nav, open);
|
||||
menuPulled = containsClass(nav, exit);
|
||||
|
||||
status = menuOpen || menuPulled ? true : false;
|
||||
|
||||
status ? modifyClass(nav, exit) : modifyClass(nav, open);
|
||||
status ? modifyClass(nav, open) : modifyClass(nav, exit);
|
||||
}
|
||||
|
||||
navBar.addEventListener('click', function() {
|
||||
toggleMenu();
|
||||
});
|
||||
elem('.nav-close').addEventListener('click', function() {
|
||||
toggleMenu();
|
||||
});
|
||||
|
||||
elem('.nav-drop').addEventListener('click', function(e) {
|
||||
e.target === this ? toggleMenu() : false;
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
(function postsPager(){
|
||||
const pager = elem('.pagination');
|
||||
if (pager) {
|
||||
pushClass(pager, 'pager');
|
||||
const pagerItems = elems('li', pager);
|
||||
const pagerLinks = Array.from(pagerItems).map(function(item){
|
||||
return item.firstElementChild;
|
||||
});
|
||||
|
||||
pagerLinks.forEach(function(link){
|
||||
pushClass(link, 'pager_link')
|
||||
});
|
||||
|
||||
pagerItems.forEach(function(item){
|
||||
pushClass(item, 'pager_item')
|
||||
});
|
||||
}
|
||||
})();
|
||||
// ******
|
||||
|
||||
(function() {
|
||||
var fbposts = document.querySelector('#fbposts');
|
||||
function whoops(error) {
|
||||
console.log(error);
|
||||
fbposts.innerHTML = "<li>Er is iets misgelopen bij het ophalen van Facebook posts.</li>";
|
||||
}
|
||||
function parseFeed(response) {
|
||||
if(response && !response.error) {
|
||||
var html = "";
|
||||
|
||||
response.data.forEach(function(elem) {
|
||||
var id = elem.id.substring(elem.id.indexOf('_') + 1, elem.id.length);
|
||||
html += "<li class = 'post_item'><div class='fb-post' data-href='https://www.facebook.com/redzuurdesem/posts/" + id + "'></div></li>";
|
||||
});
|
||||
|
||||
fbposts.innerHTML = html;
|
||||
FB.XFBML.parse(fbposts);
|
||||
} else {
|
||||
whoops(response.error);
|
||||
}
|
||||
}
|
||||
|
||||
function getRedZuurdesemFacebookFeed() {
|
||||
try {
|
||||
FB.api("/redzuurdesem/feed?limit=4&access_token=" + window.fbtoken, parseFeed);
|
||||
} catch(e) {
|
||||
whoops(e);
|
||||
}
|
||||
}
|
||||
if(fbposts && window.fbtoken) {
|
||||
window.fbAsyncInit = getRedZuurdesemFacebookFeed;
|
||||
}
|
||||
})()
|
||||
|
||||
function fromFixedToScrollForSafari() {
|
||||
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
||||
const header = document.querySelector('.post_header');
|
||||
if(isSafari) {
|
||||
header.style.backgroundAttachment = 'scroll';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -155,9 +169,7 @@
|
|||
elem.innerHTML = '<div class="fb-page" data-width="' + vw + '" data-href="https://www.facebook.com/redzuurdesem" data-hide-cover="false" data-tabs="timeline,messages" data-show-facepile="false"></div>';
|
||||
}
|
||||
|
||||
if(fbposts && window.fbtoken) {
|
||||
window.fbAsyncInit = getRedZuurdesemFacebookFeed;
|
||||
}
|
||||
fbCommunityHeaderify();
|
||||
fbCommunityContainer();
|
||||
fromFixedToScrollForSafari();
|
||||
})()
|
||||
|
|
|
|||
|
|
@ -64,9 +64,8 @@
|
|||
&_header
|
||||
background-size: cover
|
||||
background-repeat: no-repeat
|
||||
background-position: center
|
||||
|
||||
background-attachment: fixed;
|
||||
background-position: center
|
||||
background-attachment: fixed
|
||||
|
||||
position: relative
|
||||
height: 48vh
|
||||
|
|
|
|||
Loading…
Reference in New Issue