-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Ricardo Rauch
committed
Mar 22, 2013
1 parent
a7493cd
commit 9158805
Showing
3 changed files
with
76 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
;(function ($, window, document, undefined) { | ||
|
||
var pluginName = "readingTime"; | ||
|
||
var defaults = { | ||
bubble: '#scrollbubble' | ||
}; | ||
|
||
function Plugin(element, options) { | ||
this.element = element; | ||
this.options = $.extend({}, defaults, options); | ||
this.scroll_timer = null; | ||
this._defaults = defaults; | ||
this._name = pluginName; | ||
this.init(); | ||
} | ||
|
||
Plugin.prototype = { | ||
init: function () { | ||
$(window).scroll($.proxy(this.updateTime, this)); | ||
$('<div id="scrollbubble"></div>').appendTo("body"); | ||
$('<style>#scrollbubble{display:none;position:fixed;top:0;right:20px;z-index:500;background-color:#000;color:#fff;border-radius:3px;font-family:Georgia;font-size:12px;text-transform:uppercase;letter-spacing:1px;padding:3px 8px}#scrollbubble:after{content:" ";position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;border:4px solid transparent;border-left-color:#000}</style>').appendTo('body'); | ||
}, | ||
updateTime: function () { | ||
var total_reading_time = 0, | ||
bubble = $(this.options.bubble), | ||
post_content = $(this.element); | ||
var viewportHeight = $(window).height(), | ||
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight, | ||
progress = $(window).scrollTop() / ($(document).height() - viewportHeight), | ||
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - bubble.height() / 2; | ||
var total_reading_time = this.calculate_total_time_words(post_content, this.element) / 60; | ||
var total_reading_time_remaining = Math.ceil(total_reading_time - (total_reading_time * progress)); | ||
var text = ''; | ||
|
||
if(total_reading_time_remaining > 1) { | ||
text = total_reading_time_remaining + ' minutes left'; | ||
} else if(progress >= 1) { | ||
text = 'Thanks for reading'; | ||
} else if (total_reading_time_remaining <= 1) { | ||
text = 'Less than a minute'; | ||
} | ||
|
||
bubble | ||
.css('top', distance) | ||
.text(text) | ||
.fadeIn(100); | ||
|
||
// Fade out the annotation after 1 second of no scrolling. | ||
if (this.scroll_timer !== null) { | ||
clearTimeout(this.scroll_timer); | ||
} | ||
|
||
this.scroll_timer = setTimeout(function() { | ||
bubble.fadeOut(); | ||
}, 1000); | ||
}, | ||
calculate_total_time_words: function(post_content, element){ | ||
var total = 0; | ||
post_content.each(function() { | ||
total += Math.round(60*$(element).text().split(' ').length/200); // 200 = number of words per minute | ||
}); | ||
|
||
return total; | ||
} | ||
}; | ||
|
||
$.fn[pluginName] = function (options) { | ||
return this.each(function () { | ||
if (!$.data(this, "plugin_" + pluginName)) { | ||
$.data(this, "plugin_" + pluginName, new Plugin(this, options)); | ||
} | ||
}); | ||
}; | ||
})(jQuery, window, document); |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters