Permalink
Find file Copy path
492bcf8 Aug 21, 2018
1 contributor

Users who have contributed to this file

153 lines (118 sloc) 4.71 KB
{{!< default}}
{{#post}}
{{#contentFor "special_body_class"}}gh-head-transparent{{/contentFor}}
{{!-- The big featured header, it uses blog cover image as a BG if available --}}
<header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
<div class="inner">
<div class="site-header-content">
<div class="post-full-meta">
<time class="post-full-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMMM YYYY"}}</time>
{{#primary_tag}}
<span class="date-divider">/</span> <a href="{{url}}">{{name}}</a>
{{/primary_tag}}
</div>
<h1 class="post-feature-title js-foating-header-trigger js-no-widows">{{title}}</h1>
<p class="post-feature-excerpt js-no-widows">{{custom_excerpt}}</p>
</div>
</div>
</header>
<main id="site-main" class="site-main outer">
{{content}}
{{#if @labs.subscribers}}
<section class="subscribe-form">
<h3 class="subscribe-form-title">Ghost Newsletter</h3>
<p>Stay up to date with the latest Ghost news, tutorials and resources. All the best bits, delivered every Sunday.</p>
{{> "newsletter-form"}}
</section>
{{/if}}
<footer class="post-full-footer">
{{!-- There are two options for how we display the byline/author-info.
If the post has more than one author, we load a specific template
from includes/byline-multiple.hbs, otherwise, we just use the
default byline. --}}
{{#has author="count:>1"}}
{{> "byline-multiple"}}
{{else}}
{{> "byline-single"}}
{{/has}}
</footer>
</main>
{{!-- Prev/Next post links in the footer, included from includes/related-posts.hbs --}}
{{> related-posts}}
{{!-- Floating header which appears on-scroll, included from includes/floating-header.hbs --}}
{{> floating-header}}
{{/post}}
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<script>
// 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
$(document).ready(function () {
// Start fitVids
var $postContent = $(".post-full-content");
$postContent.fitVids();
// End fitVids
var progressBar = document.querySelector('progress');
var header = document.querySelector('.floating-header');
var title = document.querySelector('.js-foating-header-trigger');
var lastScrollY = window.scrollY;
var lastWindowHeight = window.innerHeight;
var lastDocumentHeight = $(document).height();
var ticking = false;
var hoverTimeout;
function onScroll() {
lastScrollY = window.scrollY;
requestTick();
}
function onResize() {
lastWindowHeight = window.innerHeight;
lastDocumentHeight = $(document).height();
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();
$('.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);
});
$(".js-no-widows").each(function() {
var wordArray = $(this).text().split(" ");
if (wordArray.length > 1) {
wordArray[wordArray.length-2] += "&nbsp;" + wordArray[wordArray.length-1];
wordArray.pop();
$(this).html(wordArray.join(" "));
}
});
});
</script>
{{/contentFor}}