/*
KReader -- Speed reading in javascript
Written by Collin Green http://keeyai.com/projects-and-releases/kreader/
Idea from spreeder.com
Code rebuilt from Slimbox v1.41 by Christophe Beyls (http://www.digitalia.be)
VERSION:
0.9 - TESTING PHASE -- this is still under development
CHANGE LOG:
NONE
DEPENDENCIES:
requires mootools http://mootools.net
USAGE:
tweak css to your liking -- probably need to change the image paths to match your setup
import like any other javascript and css files
use KReader('elementid') to use the innerHTML attribute of the specified element
see test.php for an example
TODO:
-- strip tags and such out
-- change to use blog css?
wordpress plugin
font, font size, font color, background color selection
option to scroll or just show one word?
-- option to spend more time on longer words
cookies to remember speed and other settings
slider
Copyright 2008 Collin Green
This file is part of KReader.
KReader is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Foobar is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with KReader. If not, see .
*/
var KReader = new Class({
options: {
charstodisplay: 15,
scrollspeed: 350,
skiplength: 50
}, // end options
initialize: function(options){
this.setOptions(options);
this.effects = [];
}, // end initialize
show: function(sourceelement){
// scrolling tools
this.textindex = 0;
this.charstodisplay = 15;
// get text and strip tags
this.sourcetext = $(sourceelement).innerHTML;
var regex = /<\S[^><]*>/g;
this.sourcetext = this.sourcetext.replace(regex, '');
// create overlay -- the transparent black part :)
this.overlay = new Element('div', {'id': 'krOverlay'});
this.overlay.setOpacity(.2); // set translucent
this.overlay.injectInside(document.body); // add to page
this.overlay.addEvent('click', this.close.bind(this)); // clicking the overlay closes the reader
// kreader main square
this.centerbox = new Element('div', {'id': 'krCenter'});
this.centerbox.injectInside(this.overlay);
this.centerbox.setOpacity(1.0);
this.centerbox.addEvent('click', function(ev){ ev = new Event(ev); ev.stop(); }); // dont close if clicked in reader
// close button
this.closebutton = new Element('div', {'id': 'krClose', 'class':'krButton', 'title':'Close'});
this.closebutton.setStyles({ 'border':'1px solid black', 'top':'0px', 'right': '0px', 'float':'right'});
this.closebutton.injectInside(this.centerbox);
this.closebutton.addEvent('click', this.close.bind(this));
// text area
this.textarea = new Element('div', {'id': 'krText'});
this.textarea.innerHTML = 'Press Play';
this.textarea.injectInside(this.centerbox);
// options area
this.optionbox = new Element('div', {'id': 'krOptions'});
this.optionbox.injectInside(this.centerbox)
// reset button
this.resetbutton = new Element('div', {'id': 'krReset', 'class':'krButton', 'title':'Start Over'});
this.resetbutton.setStyles({ 'border':'1px solid black', 'float':'left'});
this.resetbutton.addEvent('click', this.reset.bind(this));
this.resetbutton.injectInside(this.optionbox)
// back button
this.backbutton = new Element('div', {'id': 'krBack', 'class':'krButton', 'title':'Skip Backwards'});
this.backbutton.addEvent('click', this.skipback.bind(this));
this.backbutton.injectInside(this.optionbox)
// play/pause button
this.playbutton = new Element('div', {'id': 'krPlayPause', 'class':'krButton', 'title':'Play', 'action':'play'});
this.playbutton.addClass('krPlay');
this.playbutton.addEvent('click', this.playpause.bind(this));
this.playbutton.injectInside(this.optionbox);
// forward button
this.forwardbutton = new Element('div', {'id':'krForward', 'class':'krButton', 'title':'Skip Forward'});
this.forwardbutton.addEvent('click', this.skipforward.bind(this));
this.forwardbutton.injectInside(this.optionbox);
// speed box
this.speedbox = new Element('div', {'class': 'krSpeedbox'});
this.speedbox.innerHTML = 'Words per Minute:';
this.speed = new Element('input', {'id':'krSpeed', 'name':'speed', 'size':'3', 'value':'350', 'title':'reading speed in words per minute'});
this.speed.injectInside(this.speedbox);
this.speedbox.injectInside(this.optionbox);
// linkback
this.linkback = new Element('span', {'id': 'krLinkBack'});
this.linkback.setStyles({'text-align':'center'});
this.linkback.innerHTML ="KReader - Speed Reading by Keeyai";
this.linkback.injectInside(this.centerbox);
// fading effect
this.fx = new Fx.Styles( this.overlay, {duration: 300});
// actually fade in
this.fx.start({opacity: 1});
}, // end show
close : function() {
// fade out
this.fx.start({opacity: 0}).chain( function(){ $('krOverlay').remove();} );
// this.overlay.remove();
}, // end close
scrollText : function() {
// quit if over the line
if(this.textindex >= this.sourcetext.length)
{
this.reset();
return;
}
// TODO: -- change this to break on word boundaries?
// will automatically give longer time to longer words
// show outside words too if possible, in grayed color
// show substring
//krText = this.sourcetext.substring(this.textindex, this.textindex + this.charstodisplay);
var endindex = this.textindex + this.charstodisplay;
var krText = this.sourcetext.substring(this.textindex, endindex);
this.textarea.innerHTML = krText;
// increment index
this.textindex += 1;
}, // end scrollText
playpause : function() {
if( this.playbutton.getProperty('action') == 'play')
this.play();
else // pause
this.pause();
}, // end playpause
play : function() {
this.playbutton.setProperty('action', 'pause');
this.playbutton.removeClass('krPlay');
this.playbutton.addClass('krPause');
// get scrollspeed --- 1 / 1000 (millis) * speed (in wpm) * 5 (chars per word) / 60 (seconds per minute)
//var speed = 12000 / new Number(this.speed.value); // good
var speed = 12000.0 / this.speed.value; // bad, but done for IE
// scroll text
this.intervalid = window.setInterval('KReader.scrollText()', speed);
}, // end play
pause : function() {
this.playbutton.setProperty('action', 'play');
this.playbutton.removeClass('krPause');
this.playbutton.addClass('krPlay');
// stop the scrolling text
window.clearInterval(this.intervalid);
}, // end pause
reset : function() {
// stop playing
window.clearInterval(this.intervalid);
// reset text
this.textindex = 0;
var endindex = this.textindex + this.charstodisplay
var krText = this.sourcetext.substring(this.textindex, endindex);
this.textarea.innerHTML = krText;
// reset play button
this.playbutton.setProperty('action', 'play');
this.playbutton.removeClass('krPause');
this.playbutton.addClass('krPlay');
}, // end reset
skipback : function() {
if(this.textindex < this.options.skiplength)
this.textindex = 0;
else
this.textindex -= this.options.skiplength;
this.scrollText();
}, // end skipback
skipforward : function() {
// overshooting limit is handled in scrollText
this.textindex += this.options.skiplength;
this.scrollText();
} // end skipforward
}); // end var KReader = new Class({
KReader.implement(new Options, new Events);
// initialize the KReader
//window.addEvent('domready', KReader.initialize.bind(KReader));
window.addEvent('domready', function(){KReader = new KReader();});