Skip to content

Instantly share code, notes, and snippets.

@gerbenvandijk
Last active Aug 29, 2015
Embed
What would you like to do?
- When title is not visible anymore, then show the title in the top bar. - Show a reading time indicator.
// Function to convert to human readable time
function millisecondsToStr(milliseconds) {
function numberEnding (number) {
return (number > 1) ? 's left' : ' left';
}
var temp = Math.floor(milliseconds / 1000);
var years = Math.floor(temp / 31536000);
if (years) {
return years + ' year' + numberEnding(years);
}
var days = Math.floor((temp %= 31536000) / 86400);
if (days) {
return days + ' day' + numberEnding(days);
}
var hours = Math.floor((temp %= 86400) / 3600);
if (hours) {
return hours + ' hour' + numberEnding(hours);
}
var minutes = Math.floor((temp %= 3600) / 60);
if (minutes) {
return minutes + ' minute' + numberEnding(minutes);
}
var seconds = temp % 60;
if (seconds) {
return seconds + ' second' + numberEnding(seconds);
}
return 'Thanks for reading!'; //'just now' //or other string you like;
}
// Throttle
function throttle(fn, threshhold, scope) {
threshhold || (threshhold = 250);
var last,
deferTimer;
return function () {
var context = scope || this;
var now = +new Date,
args = arguments;
if (last && now < last + threshhold) {
// hold on to it
clearTimeout(deferTimer);
deferTimer = setTimeout(function () {
last = now;
fn.apply(context, args);
}, threshhold);
} else {
last = now;
fn.apply(context, args);
}
};
}
// Feature: Fade the title in nav in when the title is not visible anymore
// Feature: Show reading time indicator
// Inspiration
// 1) http://www.nytimes.com/2015/02/08/business/marijuana-industry-in-colorado-eager-for-its-own-bank-waits-on-the-fed.html?hp&action=click&pgtype=Homepage&module=photo-spot-region&region=top-news&WT.nav=top-news
// 2) from http://benfrain.com/oocss-atomic-css-responsive-web-design-anti-pattern/
// TODO
// 1) use math.min to limit range between 0 and the max word_count - NOT NECISSARY ANYMORE
// 2) Convert it to minutes in reading time - DONE
// 3) Find out averige words per minute reading count - DONE
// 4) Convert the minutes in 1 decimal (1.3m) to min/sec (1h1m30s format), maybe use momentjs? - DONE
// 5) Make it more performant (throttle that shit) - DONE
// 6) Add flag to change output from human readable time to amount of words left
// When we've finished loading
$(window).load(function(){
// Base variables, only need setting once
var title_marker = $('.tmp-container h1').offset().top + $('.tmp-container h1').height(); // The height of the title plus it's top offset
var word_count = $('.tmp-container').text().split(/\s+/).length; // The amount of words
var d_height = $(document).height(); // The height of the whole page
var w_height = $(window).height(); // The height of the visible area (window)
var wpm = 450; // average words per minute (http://www.forbes.com/sites/brettnelson/2012/06/04/do-you-read-fast-enough-to-be-successful/)
// When we're scrolling, throttled (limited) with a 50ms interval for performance
$(window).on('scroll', throttle(function (event) {
// Set these variables every time
var y = $(this).scrollTop(); // current scroll position
var perc = ($(window).scrollTop() / ($(document).height() - $(window).height())); // current scroll position
var words_left = word_count - (word_count * perc);
var mins_left = Math.round(words_left / wpm * 10) / 10; // The amount of minutes to read left, based on the average
var secs_left_actual = (mins_left * 60) * 1000; // in ms;
var hrt = millisecondsToStr(secs_left_actual);
// We insert the human readable time calculated above into the DOM
$('.menu-top ul li.center span').html(hrt);
// Show & hide title in nav bar when the scroll position exceeds the height + offset of the page title
if (y > title_marker) {
$('.menu-top ul li.center').addClass('js-show'); // Show it
} else {
$('.menu-top ul li.center').removeClass('js-show'); // Hide it
}
}, 50));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment