From 25a2c2dfa23c6cd3efc133d263cf6370e7270858 Mon Sep 17 00:00:00 2001 From: wgroeneveld Date: Tue, 12 May 2020 20:48:42 +0200 Subject: [PATCH] post header bg scroll if safari --- package.json | 2 +- .../assets/js/redzuurdesem.js | 242 +++++++++--------- .../desem-swift-theme/assets/sass/_posts.sass | 5 +- 3 files changed, 130 insertions(+), 119 deletions(-) diff --git a/package.json b/package.json index efc311d..dd67b69 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/themes/desem-swift-theme/assets/js/redzuurdesem.js b/themes/desem-swift-theme/assets/js/redzuurdesem.js index f44f374..01f7c2e 100644 --- a/themes/desem-swift-theme/assets/js/redzuurdesem.js +++ b/themes/desem-swift-theme/assets/js/redzuurdesem.js @@ -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 = "
  • Er is iets misgelopen bij het ophalen van Facebook posts.
    • "; - } - 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 += "
    • "; - }); - - 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 = "
  • Er is iets misgelopen bij het ophalen van Facebook posts.
    • "; + } + 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 += "
    • "; + }); + + 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 = '
    '; } - if(fbposts && window.fbtoken) { - window.fbAsyncInit = getRedZuurdesemFacebookFeed; - } fbCommunityHeaderify(); fbCommunityContainer(); + fromFixedToScrollForSafari(); })() diff --git a/themes/desem-swift-theme/assets/sass/_posts.sass b/themes/desem-swift-theme/assets/sass/_posts.sass index d8f86b0..3906807 100644 --- a/themes/desem-swift-theme/assets/sass/_posts.sass +++ b/themes/desem-swift-theme/assets/sass/_posts.sass @@ -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