joshtronic/jquery.readtime
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SHIP IT! :shipit:

Browse source
This commit is contained in:
Josh Sherman 2014-08-30 10:38:37 -04:00
parent efa0697c3a
commit 8c99148381
4 changed files with 119 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

36
README.md
View file

@ -6,6 +6,38 @@
>
> &mdash; <cite>[Read Time and You][MediumReadTime]</cite>
[MediumReadTime]: https://medium.com/the-story/read-time-and-you-bc2048ab620c
## Usage
### Basic
```javascript
$('article').readtime();
```
### Advanced
```javascript
$('article').readtime({
class: 'time-to-read',
format: 'This will take you # minutes to read',
wrapper: 'div'
});
```
## Contributing
There’s some room for improvement with the format of the time. Couple of
thoughts would be to allow it to be configured to return the time as a decimal
or even a fraction. Also could stand to put together some unit tests. Fork and
improve as you see fit. Pull requests are welcome but please conform to the
project’s existing coding style.
## Author
Lovingly built one Saturday morning by [Josh Sherman][joshtronic]. You can
return the love by starring this project and/or tipping:
[![Gittip](http://img.shields.io/gittip/joshtronic.svg?style=flat)][gittip]
[MediumReadTime]: https://medium.com/the-story/read-time-and-you-bc2048ab620c
[joshtronic]: http://joshtronic.com
[gittip]: https://www.gittip.com/joshtronic/

25
example.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Helvetica; font-size: 1.4em }
img { margin: 20px }
.puppy { float: left }
.kitten { float: right }
</style>
</head>
<body>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at velit vitae urna lobortis maximus maximus quis dolor. In sit amet arcu sem. Nullam neque velit, congue at purus sit amet, consectetur condimentum libero. Nullam sem massa, vulputate ut odio vitae, varius finibus mi. Maecenas venenatis libero eget orci hendrerit, ac dapibus erat interdum. Integer nec lorem lectus. Ut finibus aliquet velit, sit amet venenatis lacus eleifend tincidunt. Suspendisse sagittis iaculis turpis, eget rhoncus felis molestie hendrerit. Nunc sapien purus, posuere et sapien a, sodales sagittis mi. Etiam euismod eleifend lacus, nec bibendum ante ornare non. Donec et risus malesuada, mattis elit vitae, tincidunt urna. Sed non mollis purus, eu sagittis nulla. Sed at sapien nunc. Sed bibendum libero sed consectetur fermentum. Praesent justo sapien, bibendum quis mattis vel, hendrerit non dui. Nam imperdiet vitae elit ac consectetur.</p>
<p><img src="http://placepuppy.it/200/200" class="puppy"> Duis vel consectetur nunc. Nam laoreet, purus in sodales lobortis, velit purus tempus turpis, et aliquet sapien sem vitae sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis facilisis vehicula ante a ultrices. Ut rhoncus erat eu accumsan mattis. Mauris nibh eros, lacinia imperdiet aliquet non, tempor in nibh. Donec consectetur, mi in venenatis sagittis, diam nibh dignissim lectus, at vestibulum quam libero nec massa. Nunc euismod at ipsum et malesuada. Donec suscipit orci purus, eget pellentesque ligula eleifend at.</p>
<p>Vestibulum eget ante dui. Curabitur sollicitudin, nunc quis pharetra lobortis, magna enim maximus metus, vel finibus quam purus a leo. Etiam convallis, nunc nec auctor tincidunt, urna metus vulputate neque, non lobortis justo orci eu sem. Nunc felis tellus, dapibus id velit et, eleifend sollicitudin massa. Duis dignissim sem eget nisl pellentesque, sit amet gravida diam mollis. Etiam metus nisi, finibus in ullamcorper hendrerit, molestie ut nisi. Mauris porta faucibus libero eget porttitor. Donec nec nibh eu orci aliquet efficitur. Pellentesque elit turpis, eleifend sed nulla in, commodo imperdiet mi. Aliquam posuere metus at erat laoreet molestie. Nam fringilla, enim ut euismod commodo, enim libero congue nulla, id lobortis urna velit vitae tellus.</p>
<p><img src="http://placekitten.com/g/200/200" class="kitten"> Morbi eu vestibulum ligula. Aenean sit amet velit pretium, fermentum est ac, posuere lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In vulputate, massa sit amet finibus sollicitudin, dui tellus vehicula mauris, a rutrum orci felis ac ipsum. Praesent euismod eleifend mollis. Quisque suscipit libero libero, eget congue tellus facilisis semper. Praesent et tortor at justo efficitur consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi purus felis, venenatis eget pellentesque in, interdum non ex. Suspendisse facilisis ipsum sed erat consequat iaculis. Suspendisse sed euismod odio. Ut ac risus lectus. Ut a augue non est scelerisque luctus ac pellentesque lacus.</p>
<p>Sed sodales arcu metus, sed convallis dolor semper sed. Curabitur consectetur aliquet dignissim. Phasellus eu magna enim. Aliquam varius posuere nibh quis ornare. Sed semper vestibulum nibh et tincidunt. Quisque aliquet lorem eu sapien vulputate, ac ultricies tellus elementum. Phasellus velit velit, mollis sit amet sagittis eu, iaculis a sapien. Praesent sed justo in erat viverra faucibus. Integer in porttitor dui, vel consectetur lorem. Donec dapibus sed sem non feugiat. Curabitur egestas augue vel volutpat rutrum. Quisque ut nisl ut lorem fermentum finibus. Donec ut augue mauris.</p>
</article>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="jquery.readtime.js"></script>
<script>
$('article').readtime();
</script>
</body>
</html>

55
jquery.readtime.js Normal file
View file

@ -0,0 +1,55 @@
/**
* jquery.readtime.js
*
* Calculates read time of an element. Uses Medium’s formula based on the
* average reading speed of an adult (roughly 275 WPM) and then tacking on an
* additional 12 seconds for each inline image.
*
* @author Josh Sherman <josh@gravityblvd.com>
* @license The MIT License - http://opensource.org/licenses/MIT
* @link https://github.com/joshtronic/jquery.readtime
*/
(function($)
{
$.fn.readtime = function(options)
{
// Default options
var defaults = {
class: 'readtime', // Class name of the output element
format: '# min read', // # == the number of minutes
wrapper: 'time' // What the output will be wrapped in
};
options = $.extend(defaults, options);
return this.each(function()
{
// Strips the HTML out of the element
var text = this.textContent || this.innerText || '';
// Counts the words
var words = text.replace(/(^\s*)|(\s*$)/gi, '')
.replace(/[ ]{2,}/gi, ' ').replace(/\n /, '\n')
.split(' ').length;
// Calculates the read time for the words (in seconds)
var time = (words / 275) * 60;
// Counts any images in the element and adds more time
time += ($(this).find('img').length * 12);
// Gets us back to minutes and rounds to an integer
time = Math.round(time / 60);
// Formats the time
time = options.format.replace(/#/, time);
// Creates our element and prepends it to this
var element = document.createElement(options.wrapper);
$(element).addClass(options.class).html(time)
.prependTo($(this));
});
};
}(jQuery));

5
jquery.readtime.min.js vendored Normal file
View file

@ -0,0 +1,5 @@
/*
The MIT License - http://opensource.org/licenses/MIT
@link https://github.com/joshtronic/jquery.readtime
*/
(function(b){b.e.h=function(c){c=b.extend({a:"readtime",format:"# min read",b:"time"},c);return this.d(function(){var a=(this.textContent||this.innerText||"").replace(/(^\s*)|(\s*$)/gi,"").replace(/[ ]{2,}/gi," ").replace(/\n /,"\n").split(" ").length/275*60,a=a+12*b(this).find("img").length,a=Math.round(a/60),a=c.format.replace(/#/,a),d=document.createElement(c.b);b(d).c(c.a).f(a).g(b(this))})}})(jQuery);