Fixed sticky title and author hover JS (#629)
no issue
- replaces author hover JS that was lost during merge
- replaces `floating-header.js` with `sticky-nav-title.js` containing the relevant JS that was lost during merge with a cleanup for unused variables and unnecessary event listeners
- removes reference to non-existent `{{> floating-header}}` partial
This commit is contained in:
Kevin Ansfield
GitHub
parent
3e910e954e
commit
ff51925567
6 changed files with 91 additions and 78 deletions
|
|
@ -1,2 +1,2 @@
|
||||||
!function(n){"use strict";n.fn.fitVids=function(e){var i={customSelector:null,ignore:null};if(!document.getElementById("fit-vids-style")){var t=document.head||document.getElementsByTagName("head")[0],r=document.createElement("div");r.innerHTML='<p>x</p><style id="fit-vids-style">.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>',t.appendChild(r.childNodes[1])}return e&&n.extend(i,e),this.each(function(){var e=['iframe[src*="player.vimeo.com"]','iframe[src*="youtube.com"]','iframe[src*="youtube-nocookie.com"]','iframe[src*="kickstarter.com"][src*="video.html"]',"object","embed"];i.customSelector&&e.push(i.customSelector);var r=".fitvidsignore";i.ignore&&(r=r+", "+i.ignore);var t=n(this).find(e.join(","));(t=(t=t.not("object object")).not(r)).each(function(){var e=n(this);if(!(0<e.parents(r).length||"embed"===this.tagName.toLowerCase()&&e.parent("object").length||e.parent(".fluid-width-video-wrapper").length)){e.css("height")||e.css("width")||!isNaN(e.attr("height"))&&!isNaN(e.attr("width"))||(e.attr("height",9),e.attr("width",16));var t=("object"===this.tagName.toLowerCase()||e.attr("height")&&!isNaN(parseInt(e.attr("height"),10))?parseInt(e.attr("height"),10):e.height())/(isNaN(parseInt(e.attr("width"),10))?e.width():parseInt(e.attr("width"),10));if(!e.attr("name")){var i="fitvid"+n.fn.fitVids._count;e.attr("name",i),n.fn.fitVids._count++}e.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*t+"%"),e.removeAttr("height").removeAttr("width")}})})},n.fn.fitVids._count=0}(window.jQuery||window.Zepto),function(c,i){c.Casper||(c.Casper={}),c.Casper.floatingHeader=function(){var r=i.querySelector("#reading-progress"),n=i.querySelector(".floating-header"),o=i.querySelector(".post-full-title"),a=c.scrollY,s=c.innerHeight,d=i.body.clientHeight,l=!1;function e(){l||requestAnimationFrame(t),l=!0}function t(){var e=o.getBoundingClientRect().top+c.scrollY,t=o.offsetHeight+35,i=d-s;e+t<=a?n.classList.add("floating-active"):n.classList.remove("floating-active"),r.setAttribute("max",i),r.setAttribute("value",a),l=!1}c.addEventListener("scroll",function(){a=c.scrollY,e()},{passive:!0}),c.addEventListener("resize",function(){s=c.innerHeight,d=i.body.clientHeight,e()},!1),t()}}(window,document),function(e,t){t.addEventListener("DOMContentLoaded",function(){t.querySelectorAll(".kg-gallery-image img").forEach(function(e){var t=e.closest(".kg-gallery-image"),i=e.attributes.width.value/e.attributes.height.value;t.style.flex=i+" 1 0%"})})}(window,document),function(t,i){var r=i.querySelector("link[rel=next]");if(r){var n=i.querySelector(".post-feed");if(n){var o=300,a=!1,s=!1,d=t.scrollY,l=t.innerHeight,c=i.documentElement.scrollHeight;t.addEventListener("scroll",f,{passive:!0}),t.addEventListener("resize",v),h()}}function u(){if(404===this.status)return t.removeEventListener("scroll",f),void t.removeEventListener("resize",v);this.response.querySelectorAll(".post-card").forEach(function(e){n.appendChild(e)});var e=this.response.querySelector("link[rel=next]");e?r.href=e.href:(t.removeEventListener("scroll",f),t.removeEventListener("resize",v)),c=i.documentElement.scrollHeight,s=a=!1}function e(){if(!s)if(d+l<=c-o)a=!1;else{s=!0;var e=new t.XMLHttpRequest;e.responseType="document",e.addEventListener("load",u),e.open("GET",r.href),e.send(null)}}function h(){a||t.requestAnimationFrame(e),a=!0}function f(){d=t.scrollY,h()}function v(){l=t.innerHeight,c=i.documentElement.scrollHeight,h()}}(window,document);
|
!function(n){"use strict";n.fn.fitVids=function(e){var i={customSelector:null,ignore:null};if(!document.getElementById("fit-vids-style")){var t=document.head||document.getElementsByTagName("head")[0],r=document.createElement("div");r.innerHTML='<p>x</p><style id="fit-vids-style">.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>',t.appendChild(r.childNodes[1])}return e&&n.extend(i,e),this.each(function(){var e=['iframe[src*="player.vimeo.com"]','iframe[src*="youtube.com"]','iframe[src*="youtube-nocookie.com"]','iframe[src*="kickstarter.com"][src*="video.html"]',"object","embed"];i.customSelector&&e.push(i.customSelector);var r=".fitvidsignore";i.ignore&&(r=r+", "+i.ignore);var t=n(this).find(e.join(","));(t=(t=t.not("object object")).not(r)).each(function(){var e=n(this);if(!(0<e.parents(r).length||"embed"===this.tagName.toLowerCase()&&e.parent("object").length||e.parent(".fluid-width-video-wrapper").length)){e.css("height")||e.css("width")||!isNaN(e.attr("height"))&&!isNaN(e.attr("width"))||(e.attr("height",9),e.attr("width",16));var t=("object"===this.tagName.toLowerCase()||e.attr("height")&&!isNaN(parseInt(e.attr("height"),10))?parseInt(e.attr("height"),10):e.height())/(isNaN(parseInt(e.attr("width"),10))?e.width():parseInt(e.attr("width"),10));if(!e.attr("name")){var i="fitvid"+n.fn.fitVids._count;e.attr("name",i),n.fn.fitVids._count++}e.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*t+"%"),e.removeAttr("height").removeAttr("width")}})})},n.fn.fitVids._count=0}(window.jQuery||window.Zepto),function(e,t){t.addEventListener("DOMContentLoaded",function(){t.querySelectorAll(".kg-gallery-image img").forEach(function(e){var t=e.closest(".kg-gallery-image"),i=e.attributes.width.value/e.attributes.height.value;t.style.flex=i+" 1 0%"})})}(window,document),function(t,i){var r=i.querySelector("link[rel=next]");if(r){var n=i.querySelector(".post-feed");if(n){var o=300,s=!1,a=!1,d=t.scrollY,l=t.innerHeight,c=i.documentElement.scrollHeight;t.addEventListener("scroll",f,{passive:!0}),t.addEventListener("resize",v),h()}}function u(){if(404===this.status)return t.removeEventListener("scroll",f),void t.removeEventListener("resize",v);this.response.querySelectorAll(".post-card").forEach(function(e){n.appendChild(e)});var e=this.response.querySelector("link[rel=next]");e?r.href=e.href:(t.removeEventListener("scroll",f),t.removeEventListener("resize",v)),c=i.documentElement.scrollHeight,a=s=!1}function e(){if(!a)if(d+l<=c-o)s=!1;else{a=!0;var e=new t.XMLHttpRequest;e.responseType="document",e.addEventListener("load",u),e.open("GET",r.href),e.send(null)}}function h(){s||t.requestAnimationFrame(e),s=!0}function f(){d=t.scrollY,h()}function v(){l=t.innerHeight,c=i.documentElement.scrollHeight,h()}}(window,document),function(s,a){s.Casper||(s.Casper={}),s.Casper.stickyNavTitle=function(e){var t=a.querySelector(e.navSelector),i=a.querySelector(e.titleSelector),r=s.scrollY,n=!1;function o(){i.getBoundingClientRect().top+s.scrollY+(i.offsetHeight+35)<=r?t.classList.add(e.activeClass):t.classList.remove(e.activeClass),n=!1}s.addEventListener("scroll",function(){r=s.scrollY,function(){n||requestAnimationFrame(o);n=!0}()},{passive:!0}),o()}}(window,document);
|
||||||
//# sourceMappingURL=casper.js.map
|
//# sourceMappingURL=casper.js.map
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,73 +0,0 @@
|
||||||
/* eslint-env browser */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Floating header
|
|
||||||
* Used on invividual post pages, displays a sticky header with progress indicator
|
|
||||||
*
|
|
||||||
* This JS is automatically applied for any template where you use the
|
|
||||||
* {{> floating-header}} partial
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function (window, document) {
|
|
||||||
// set up Casper as a global object
|
|
||||||
if (!window.Casper) {
|
|
||||||
window.Casper = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
window.Casper.floatingHeader = function floatingHeader() {
|
|
||||||
// NOTE: Scroll performance is poor in Safari
|
|
||||||
// - this appears to be due to the events firing much more slowly in Safari.
|
|
||||||
// Dropping the scroll event and using only a raf loop results in smoother
|
|
||||||
// scrolling but continuous processing even when not scrolling
|
|
||||||
|
|
||||||
var progressBar = document.querySelector('#reading-progress');
|
|
||||||
var header = document.querySelector('.floating-header');
|
|
||||||
var title = document.querySelector('.post-full-title');
|
|
||||||
|
|
||||||
var lastScrollY = window.scrollY;
|
|
||||||
var lastWindowHeight = window.innerHeight;
|
|
||||||
var lastDocumentHeight = document.body.clientHeight;
|
|
||||||
var ticking = false;
|
|
||||||
|
|
||||||
function onScroll() {
|
|
||||||
lastScrollY = window.scrollY;
|
|
||||||
requestTick();
|
|
||||||
}
|
|
||||||
|
|
||||||
function onResize() {
|
|
||||||
lastWindowHeight = window.innerHeight;
|
|
||||||
lastDocumentHeight = document.body.clientHeight;
|
|
||||||
requestTick();
|
|
||||||
}
|
|
||||||
|
|
||||||
function requestTick() {
|
|
||||||
if (!ticking) {
|
|
||||||
requestAnimationFrame(update);
|
|
||||||
}
|
|
||||||
ticking = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function update() {
|
|
||||||
var trigger = title.getBoundingClientRect().top + window.scrollY;
|
|
||||||
var triggerOffset = title.offsetHeight + 35;
|
|
||||||
var progressMax = lastDocumentHeight - lastWindowHeight;
|
|
||||||
|
|
||||||
// show/hide floating header
|
|
||||||
if (lastScrollY >= trigger + triggerOffset) {
|
|
||||||
header.classList.add('floating-active');
|
|
||||||
} else {
|
|
||||||
header.classList.remove('floating-active');
|
|
||||||
}
|
|
||||||
|
|
||||||
progressBar.setAttribute('max', progressMax);
|
|
||||||
progressBar.setAttribute('value', lastScrollY);
|
|
||||||
|
|
||||||
ticking = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', onScroll, {passive: true});
|
|
||||||
window.addEventListener('resize', onResize, false);
|
|
||||||
|
|
||||||
update();
|
|
||||||
};
|
|
||||||
})(window, document);
|
|
||||||
61
assets/js/sticky-nav-title.js
Normal file
61
assets/js/sticky-nav-title.js
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
/* eslint-env browser */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Nav/Title replacement
|
||||||
|
* Used on invividual post pages, displays the post title in place of the nav
|
||||||
|
* bar when scrolling past the title
|
||||||
|
*
|
||||||
|
* Usage:
|
||||||
|
* ```
|
||||||
|
* Casper.stickyTitle({
|
||||||
|
* navSelector: '.site-nav-main',
|
||||||
|
* titleSelector: '.post-full-title',
|
||||||
|
* activeClass: 'nav-post-title-active'
|
||||||
|
* });
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function (window, document) {
|
||||||
|
// set up Casper as a global object
|
||||||
|
if (!window.Casper) {
|
||||||
|
window.Casper = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
window.Casper.stickyNavTitle = function stickyNavTitle(options) {
|
||||||
|
var nav = document.querySelector(options.navSelector);
|
||||||
|
var title = document.querySelector(options.titleSelector);
|
||||||
|
|
||||||
|
var lastScrollY = window.scrollY;
|
||||||
|
var ticking = false;
|
||||||
|
|
||||||
|
function onScroll() {
|
||||||
|
lastScrollY = window.scrollY;
|
||||||
|
requestTick();
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestTick() {
|
||||||
|
if (!ticking) {
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
}
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
var trigger = title.getBoundingClientRect().top + window.scrollY;
|
||||||
|
var triggerOffset = title.offsetHeight + 35;
|
||||||
|
|
||||||
|
// show/hide post title
|
||||||
|
if (lastScrollY >= trigger + triggerOffset) {
|
||||||
|
nav.classList.add(options.activeClass);
|
||||||
|
} else {
|
||||||
|
nav.classList.remove(options.activeClass);
|
||||||
|
}
|
||||||
|
|
||||||
|
ticking = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('scroll', onScroll, {passive: true});
|
||||||
|
|
||||||
|
update();
|
||||||
|
};
|
||||||
|
})(window, document);
|
||||||
31
post.hbs
31
post.hbs
|
|
@ -173,17 +173,42 @@ into the {body} of the default.hbs template --}}
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
{{!-- Floating header which appears on-scroll, included from includes/floating-header.hbs --}}
|
|
||||||
{{!-- {{> floating-header}} --}}
|
|
||||||
|
|
||||||
{{/post}}
|
{{/post}}
|
||||||
|
|
||||||
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
|
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
|
||||||
{{#contentFor "scripts"}}
|
{{#contentFor "scripts"}}
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
|
// FitVids - start
|
||||||
var $postContent = $(".post-full-content");
|
var $postContent = $(".post-full-content");
|
||||||
$postContent.fitVids();
|
$postContent.fitVids();
|
||||||
|
// FitVids - end
|
||||||
|
|
||||||
|
// Replace nav with title on scroll - start
|
||||||
|
Casper.stickyNavTitle({
|
||||||
|
navSelector: '.site-nav-main',
|
||||||
|
titleSelector: '.post-full-title',
|
||||||
|
activeClass: 'nav-post-title-active'
|
||||||
|
});
|
||||||
|
// Replace nav with title on scroll - end
|
||||||
|
|
||||||
|
// Hover on avatar
|
||||||
|
var hoverTimeout;
|
||||||
|
$('.author-list-item').hover(function () {
|
||||||
|
var $this = $(this);
|
||||||
|
|
||||||
|
clearTimeout(hoverTimeout);
|
||||||
|
|
||||||
|
$('.author-card').removeClass('hovered');
|
||||||
|
$(this).children('.author-card').addClass('hovered');
|
||||||
|
|
||||||
|
}, function () {
|
||||||
|
var $this = $(this);
|
||||||
|
|
||||||
|
hoverTimeout = setTimeout(function () {
|
||||||
|
$this.children('.author-card').removeClass('hovered');
|
||||||
|
}, 800);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
{{/contentFor}}
|
{{/contentFor}}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue