Skip to content

Instantly share code, notes, and snippets.

@teetteet

teetteet/Spritz-Speed-Reading-V2.markdown

Created February 27, 2015 23:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save teetteet/81a4c725bfcb447bc958 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save teetteet/81a4c725bfcb447bc958 to your computer and use it in GitHub Desktop.
Download ZIP
Spritz Speed Reading V2
Raw
index.jade
.spritz#spritz
.spritz-word#spritz_word
.settings
.controls.settings-controls
span.speed
a.slower.entypo-fast-backward#spritz_slower(href="#" title="Slow Down")
input.wpm#spritz_wpm(type="number" value="300" step="50" min="50")
a.faster.entypo-fast-forward#spritz_faster(href="#" title="Speed Up")
a.save.entypo-save#spritz_save(href="#" title="Save")
span.interaction
a.back.entypo-left-open#spritz_back(href="#" title="Jog Back")
a.pause.entypo-pause#spritz_pause(href="#" title="Pause/Play")
a.forward.entypo-right-open#spritz_forward(href="#" title="Jog Forward")
.controls.extra-controls
.togglable.closed
.zoom
a.smaller.entypo-minus#spritz_smaller(href="#" title="Smaller")
span.entypo-search(href="#" title="Smaller")
a.bigger.entypo-plus#spritz_bigger(href="#" title="Bigger")
.autosave
input.checkbox#autosave_checkbox(type="checkbox")
label.checkbox-label.entypo-cancel#spritz_autosave(for="autosave_checkbox") auto-save on pause
a.toggle.entypo-dot-3(href="#" title="Extra Controls")
.words
.controls.words-controls
a.select.entypo-doc-text#spritz_select(href="#" title="Select All")
a.refresh.entypo-cycle#spritz_refresh(href="#" title="Refresh Text")
a.expand.entypo-resize-full#spritz_expand(href="#" title="Text Area Resize")
.progress-bar#spritz_progress
textarea.demo-words#spritz_words.
Der geizige Bäcker
Noch mehr als den Hochmut haßte Rübezahl den Geiz. Denn der Hochmut ist vielfach erst die Folge des Geizes, wie denn das Schriftwort zu allen Zeiten recht behalten wird: »Der Geiz ist eine Wurzel alles Übels. In der Stadt Hirschberg lebte ein reicher Bäcker. Bei der Bürgerschaft stand er in hohem Ansehen und mancherlei Ämter der Stadt vereinigte er in seiner Person. Bei den Beratungen der Stadtbehörde gab seine Stimme oft den Ausschlag, und wenn er im Ratskeller an dem großen, runden Bürgertische saß, dann führte er das große Wort. Aber an seinem Gelde hing sein ganzes Herz es war ihm gleichgültig, wenn die Handwerker, welche für ihn arbeiteten, oft empört auf ihn schalten, wenn er ihnen Abzüge von ihrem Tagelohn machte. Zum Heizen seines Backofens gebrauchte er viel Holz, welches die Bauern aus den benachbarten Dörfern lieferten. Von diesen suchte er sich immer die ärmsten aus, machte ihnen einige Vorschüsse und forderte dann das Geld zurück. Konnten sie dann nicht zahlen, dann stellte er den Preis für das Holz möglichst niedrig und schädigte so die armen Leute mit solch schändlichem Handel. Einst brachte ihm ein Bauer ein Fuder Holz, das er bei ihm bestellt hatte. Es wurde im Hof abgeladen und der Bäcker zog ihm, wie das oft geschah, einen Taler ab. »Lieber Herr,« bat da der arme Bauer, »zieht mir diesmal nichts ab. Der Holzhandel bringt heuer so wenig ein. Ich bin arm und jeder Groschen ist zu Ausgaben bestimmt. Meine Gläubiger warten schon auf die Zinsen und ich kann den Verlust unmöglich tragen.« Was tat der Geizhals? In aller Ruhe erklärte er dem Bauer, er möge sein Holz auf dem Hofe aufladen und wieder nach Hause fahren. Was tun? Ging der Bauer darauf ein, dann hatten er und die Pferde einen Tag Arbeit verloren, auch brauchte er das Geld zur Zinszahlung, deren Termin nahe bevorstand. So blieb ihm nichts anderes übrig, als sich den Abzug gefallen zu lassen. Traurig fuhr er aus der Stadt zurück. Unterwegs holte er einen Handwerksburschen ein, der ermüdet seines Weges zog. Er ließ ihn aufsitzen und nun hatte er jemand gefunden, dem er seinen Ärger erzählen konnte. Der Handwerksbursche war kein anderer als der Berggeist. Aufmerksam hörte er die Geschichte an und beschloß in seinem Innern, dem herzlosen Geizkragen einen gründlichen Denkzettel zu verabfolgen. »Wenn er nur einmal in mein Gehege käme,« dachte er bei sich, »ich wollte ihm schon beikommen, daß er Zeit seines Lebens daran denken sollte.« Bald darauf stieg der Fremde ab, dankte dem Bauer und schenkte ihm einen Taler. Am andern Morgen saß unser Bäcker behaglich in seinem Polsterstuhl, rauchte sein Pfeifchen und blickte zufrieden und behäbig durch die Fensterscheiben auf das geschäftige Treiben des Marktes. Da klopfte es an die Tür und auf sein »Herein« erschien ein großer, kräftiger Mann vor ihm und sagte: Ich habe gehört, Ihr habt Holz, das klein gehackt werden soll. Ich biete Euch meine Dienste an. Zwar bin ich kein Holzhacker, der sein Handwerk geschäftsmäßig betreibt, sondern ein Bürger aus Schweidnitz. Mir liegt nicht am Geldverdienen, sondern daran, daß mir das Holzhacken meine Gesundheit wiederbringen soll. Ich leide an der Leber und der Arzt hat mir tüchtige Bewegung verordnet. Ich will kein Geld für die Arbeit von Euch, wenn Ihr mir erlaubt, so viel gespaltenes Holz mit heimzunehmen, als ich in einer Hocke forttragen kann. Das muß ein närrischer Kauz sein, dachte der Bäcker im stillen und freute sich schon, solch billigen Kaufs davonzukommen. Großmütig lud er den Fremden ein, mit ihm ein Glas Wein zu trinken. Dieser bewunderte die Ausschmückung der Stube und war besonders voller Erstaunens über die prächtige Decke. Dazu habt Ihr gewiß einen auswärtigen Maler kommen lassen, Meister, meinte er, was der Bäcker schmunzelnd bejahte. Dabei schlug er auf seine geldgeschwollene Tasche, daß die Silber- und Goldmünzen darin Polka tanzten. Am andern Morgen versprach der angebliche Schweidnitzer Bürger seine Arbeit zu beginnen. Der Meister lag noch in den Federn, da hörte er es schon im Hofe klappern und krachen, splittern und sausen, daß er erschreckt seinen Schlafrock anzog und in den Hof ging, um zu sehen, was der Mann denn mit seinem Getöse treibe. Ein solches Krachen und Dröhnen hatte er bei den andern Holzhackern noch nicht vernommen. Aber mit weit offenem Munde blieb er in der Hoftür stehen und sah mit Entsetzen, wie der Holzmacher sein linkes Bein aus der Hüfte gezogen hatte und damit auf die Scheite einhackte, daß die Späne nur so flogen und sich ein Donnern und Poltern erhob, daß das ganze Haus in allen Fugen krachte.Dem Bäcker wurde es angst und bange und er rief dem Fremden zu, er möge doch aufhören und sich fortscheren. Der aber tat, als hörte er es nicht und hieb immer unbarmherzig darauf los und ehe eine Viertelstunde verging, war das ganze Holz gespalten. Dann steckte er sein Bein wieder in die Hüfte, als ob nichts geschehen wäre, und begann alles gespaltene Holz zusammenzulesen und zu einer ungeheuren Hocke aufzuhäufen. Diese umschnürte er mit einem langen Seil, hob sie wie einen Spielball auf den Rücken und ging gleichgültig grüßend zum Tore hinaus. Da stand nun der dicke Bäcker und schrie Angst und Wehe, ballte die Faust und stieß laute Verwünschungen hinter dem Abziehenden aus. Dieser Denkzettel hatte aber bei ihm gefruchtet. Er war seit jener Zeit wie umgewandelt, wurde mildherziger und entzog niemand mehr den verdienten Lohn. Zeigte sich aber hin und wieder einmal die alte Neigung, so mußte er stets an den merkwürdigen Holzhacker denken. Denn es war in ihm längst die Ahnung aufgegangen, daß ihm kein anderer als Rübezahl den Streich gespielt habe. Dieser aber hatte seine Hocke vor dem Hause des armen Bauern abgesetzt, der höchst erstaunt war, als er plötzlich den Holzhaufen und noch dazu in zerkleinertem Zustande wiedersah. So hatte er sein Geld und Holz wieder. Er konnte sich auf lange Zeit eine warme Stube machen und seine Suppe dabei kochen; ja er gab sogar seinem armen Nachbarn noch einen Teil von dem reichlichen Holzvorrat.
a.light(href="#" title="Change Theme")
.alert#alert
Raw
script.js
/*
Spritz Speed Reader by Charlotte Dann
local storage implementation by Keith Wyland
*/
var $wpm = $('#spritz_wpm');
var interval = 60000/$wpm.val();
var paused = false;
var $space = $('#spritz_word');
var i = 0;
var night = false;
var zoom = 1;
var autosave = false;
var $words = $('#spritz_words');
var local_spritz = {};
function words_load() {
if (!localStorage.jqspritz) {
words_set();
word_show(0);
word_update();
spritz_pause(true);
} else {
local_spritz = JSON.parse(localStorage['jqspritz']);
$words.val(local_spritz.words);
i = local_spritz.word;
if (local_spritz.night) {
night = true
$('html').addClass('night');
};
if (local_spritz.autosave) {
autosave = true;
$('html').addClass('autosave');
$('#autosave_checkbox').prop('checked', true);
};
$wpm.val(local_spritz.wpm);
interval = 60000/local_spritz.wpm;
spritz_zoom(0);
words_set();
word_show(i);
word_update();
spritz_pause(true);
spritz_alert('loaded');
}
}
function words_save() {
local_spritz = {
word: i,
words: $words.val(),
wpm: $wpm.val(),
night: night,
autosave: autosave,
zoom: zoom
};
localStorage['jqspritz'] = JSON.stringify(local_spritz);
if (!autosave) {
spritz_alert('saved');
} else {
button_flash('save', 500);
}
}
/* TEXT PARSING */
function words_set() {
words = $words.val().trim()
.replace(/([-—])(\w)/g, '$1 $2')
.replace(/[\r\n]/g, ' {linebreak} ')
.replace(/[ \t]{2,}/g, ' ')
.split(' ');
for (var j = 1; j < words.length; j++) {
words[j] = words[j].replace(/{linebreak}/g, ' ');
}
}
/* ON EACH WORD */
function word_show(i) {
$('#spritz_progress').width(100*i/words.length+'%');
var word = words[i];
var stop = Math.round((word.length+1)*0.4)-1;
$space.html('<div>'+word.slice(0,stop)+'</div><div>'+word[stop]+'</div><div>'+word.slice(stop+1)+'</div>');
}
function word_next() {
i++;
word_show(i);
}
function word_prev() {
i--;
word_show(i);
}
/* ITERATION FUNCTION */
function word_update() {
spritz = setInterval(function() {
word_next();
if (i+1 == words.length) {
setTimeout(function() {
$space.html('');
spritz_pause(true);
i = 0;
word_show(0);
}, interval);
clearInterval(spritz);
};
}, interval);
}
/* PAUSING FUNCTIONS */
function spritz_pause(ns) {
if (!paused) {
clearInterval(spritz);
paused = true;
$('html').addClass('paused');
if (autosave && !ns) {
words_save();
};
}
}
function spritz_play() {
word_update();
paused = false;
$('html').removeClass('paused');
}
function spritz_flip() {
if (paused) {
spritz_play();
} else {
spritz_pause();
};
}
/* SPEED FUNCTIONS */
function spritz_speed() {
interval = 60000/$('#spritz_wpm').val();
if (!paused) {
clearInterval(spritz);
word_update();
};
$('#spritz_save').removeClass('saved loaded');
}
function spritz_faster() {
$('#spritz_wpm').val(parseInt($('#spritz_wpm').val())+50);
spritz_speed();
}
function spritz_slower() {
if ($('#spritz_wpm').val() >= 100) {
$('#spritz_wpm').val(parseInt($('#spritz_wpm').val())-50);
}
spritz_speed();
}
/* JOG FUNCTIONS */
function spritz_back() {
spritz_pause();
if (i >= 1) {
word_prev();
};
}
function spritz_forward() {
spritz_pause();
if (i < words.length) {
word_next();
};
}
/* WORDS FUNCTIONS */
function spritz_zoom(c) {
zoom = zoom+c
$('#spritz').css('font-size', zoom+'em');
}
function spritz_refresh() {
clearInterval(spritz);
words_set();
i = 0;
spritz_pause();
word_show(0);
};
function spritz_select() {
$words.select();
};
function spritz_expand() {
$('html').toggleClass('fullscreen');
}
/* AUTOSAVE FUNCTION */
function spritz_autosave() {
$('html').toggleClass('autosave');
autosave = !autosave;
if (autosave) {
$('#autosave_checkbox').prop('checked', true);
} else {
$('#autosave_checkbox').prop('checked', false);
}
};
/* ALERT FUNCTION */
function spritz_alert(type) {
var msg = '';
switch (type) {
case 'loaded':
msg = 'Data loaded from local storage';
break;
case 'saved':
msg = 'Words, Position and Settings have been saved in local storage for the next time you visit';
break;
}
$('#alert').text(msg).fadeIn().delay(2000).fadeOut();
}
/* CONTROLS */
$('#spritz_wpm').on('input', function() {
spritz_speed();
});
$('.controls').on('click', 'a, label', function() {
switch (this.id) {
case 'spritz_slower':
spritz_slower(); break;
case 'spritz_faster':
spritz_faster(); break;
case 'spritz_save':
words_save(); break;
case 'spritz_pause':
spritz_flip(); break;
case 'spritz_smaller':
spritz_zoom(-0.1); break;
case 'spritz_bigger':
spritz_zoom(0.1); break;
case 'spritz_autosave':
spritz_autosave(); break;
case 'spritz_refresh':
spritz_refresh(); break;
case 'spritz_select':
spritz_select(); break;
case 'spritz_expand':
spritz_expand(); break;
};
return false;
});
$('.controls').on('mousedown', 'a', function() {
switch (this.id) {
case 'spritz_back':
spritz_jog_back = setInterval(function() {
spritz_back();
}, 100);
break;
case 'spritz_forward':
spritz_jog_forward = setInterval(function() {
spritz_forward();
}, 100);
break;
};
});
$('.controls').on('mouseup', 'a', function() {
switch (this.id) {
case 'spritz_back':
clearInterval(spritz_jog_back); break;
case 'spritz_forward':
clearInterval(spritz_jog_forward); break;
};
});
/* KEY EVENTS */
function button_flash(btn, time) {
var $btn = $('.controls a.'+btn);
$btn.addClass('active');
if (typeof(time) === 'undefined') time = 100;
setTimeout(function() {
$btn.removeClass('active');
}, time);
}
$(document).on('keyup', function(e) {
if (e.target.tagName.toLowerCase() != 'body') {
return;
};
switch (e.keyCode) {
case 32:
spritz_flip(); button_flash('pause'); break;
case 37:
spritz_back(); button_flash('back'); break;
case 38:
spritz_faster(); button_flash('faster'); break;
case 39:
spritz_forward(); button_flash('forward'); break;
case 40:
spritz_slower(); button_flash('slower'); break;
};
});
$(document).on('keydown', function(e) {
if (e.target.tagName.toLowerCase() != 'body') {
return;
};
switch (e.keyCode) {
case 37:
spritz_back(); button_flash('back'); break;
case 39:
spritz_forward(); button_flash('forward'); break;
};
});
/* INITIATE */
words_load();
/* LIGHT/DARK THEME */
$('.light').on('click', function() {
$('html').toggleClass('night');
night = !night;
return false;
});
$('a.toggle').on('click', function() {
$(this).siblings('.togglable').slideToggle();
return false;
});
Raw
Spritz-Speed-Reading-V2.markdown
Raw
style.sass
@import "compass/css3"
$f-icon: 'Spritz', sans-serif
$c-light-bg: #ddd
$c-light-field-bg: #eee
$c-light-markers: #000
$c-light-spritz: #000
$c-light-text: #000
$c-light-icon: #aaa
$c-light-icon-hover: #777
$c-dark-bg: #000
$c-dark-field-bg: #191919
$c-dark-markers: #555
$c-dark-spritz: #bbb
$c-dark-text: #888
$c-dark-icon: #444
$c-dark-icon-hover: #999
.spritz
position: relative
max-width: 30rem
padding: 1rem 0 1.2rem
border-top: 2px solid $c-light-markers
border-bottom: 2px solid $c-light-markers
margin: 10rem auto
font-size: 1em
&:before, &:after
content: ''
position: absolute
left: 40%
height: 0.8rem
width: 2px
margin-left: -1px
background-color: $c-light-markers
.night &
border-color: $c-dark-markers
&:before, &:after
background-color: $c-dark-markers
&:before
top: 0
&:after
bottom: 0
.spritz-word
font-size: 1.6em
line-height: 1.6em
height: 1.7em
font-weight: 600
color: $c-light-spritz
.night &
color: $c-dark-spritz
div
display: table-cell
&:first-child
width: 40%
text-align: right
&:nth-child(2)
color: darken(red,5)
.night &
color: lighten(red,15)
&:last-child
width: 60%
text-align: left
.controls
text-align: center
&:after
content: ''
display: table
clear: both
a
display: inline-block
vertical-align: bottom
color: $c-light-icon
text-decoration: none
transition: color 150ms linear
&:hover, &.active
color: $c-light-icon-hover
.night &
color: $c-dark-icon
&:hover, &.active
color: $c-dark-icon-hover
.settings
input, textarea, button
box-sizing: border-box
border: 0
color: $c-light-text
background: transparent
.night &
color: $c-dark-text
&:focus
outline: none
.settings-controls
max-width: 30rem
margin: 0 auto
.speed
float: left
.interaction
float: right
a
font-size: 3rem
line-height: 4rem
.save
transition: opacity 0.2s linear
opacity: 0
font-size: 2.5rem
.paused &
opacity: 1
.autosave &
opacity: 0
&.active
opacity: 0.4!important
.pause
margin: 0
width: 4rem
text-align: center
font-size: 4rem
.paused &:before
content: '\e601'
position: relative
margin-left: -0.4rem
.wpm
position: relative
display: inline-block
width: 7rem
margin: 0
padding: 0
text-align: center
font-weight: 600
font-size: 2rem
line-height: 4rem
vertical-align: top
&::-webkit-inner-spin-button
-webkit-appearance: none
.extra-controls
margin: 5rem auto 0
.toggle
font-size: 2rem
padding: 1rem 2rem
.togglable
display: none
.zoom
font-size: 2rem
*
display: inline-block
padding: 0.6rem
.autosave
.checkbox
display: none
&:checked + .checkbox-label:before
content: '\e60a'
.checkbox-label
user-select: none
cursor: pointer
&:before
position: relative
display: inline-block
margin-right: 1rem
width: 1.4rem
vertical-align: top
overflow: visible
font-size: 1.8rem
.words
max-width: 30rem
margin: 0 auto
position: relative
transition: max-width 0.2s linear
.fullscreen &
max-width: 60rem
.demo-words
height: 30rem
.demo-words
width: 100%
height: 5em
transition: height 0.2s linear
padding: 1rem 1.5rem
background-color: $c-light-field-bg
&::-webkit-scrollbar
width: 0.8rem
&::-webkit-scrollbar-thumb
background: darken($c-light-field-bg, 10)
.night &
background-color: $c-dark-field-bg
&::-webkit-scrollbar-thumb
background: lighten($c-dark-field-bg, 8)
&::-webkit-resizer
background: darken($c-dark-field-bg, 2)
.progress-bar
height: 2px
width: 0
background: red
opacity: 0.4
.words-controls
margin: 0 0 2rem
a
margin: 0 0.6rem
font-size: 2rem
line-height: 2rem
.refresh
font-size: 2.6rem
.fullscreen & .expand:before
content: '\e612'
.light
position: absolute
top: 2rem
left: 3rem
font-size: 3rem
font-family: $f-icon
text-decoration: none
&:after
content: '\e609'
color: $c-light-icon
.night &:after
content: '\e608'
color: $c-dark-icon
#alert
position: absolute
top: 0
padding: 2rem
box-sizing: border-box
width: 100%
text-align: center
left: 0
pointer-events: none
html
font-size: 10px
body
background: $c-light-bg
color: $c-light-text
transition: background 0.1s linear
margin: 3rem
.night &
background: $c-dark-bg
color: $c-dark-text
body, input, textarea, button
font-size: 1.4rem
font-family: Open Sans, sans-serif
::selection
background: $c-light-icon
color: $c-light-field-bg
.night &
background: $c-dark-icon
color: $c-dark-field-bg
@font-face
font-family: 'Spritz'
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/spritz.eot?ziiuop')
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/spritz.eot?#iefixziiuop') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/spritz.woff?ziiuop') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/spritz.ttf?ziiuop') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/spritz.svg?ziiuop#spritz') format('svg')
font-weight: normal
font-style: normal
[class*="entypo-"]:before
font-family: $f-icon
.entypo-fast-backward:before
content: '\e606'
.entypo-fast-forward:before
content: '\e605'
.entypo-save:before
content: '\e600'
.entypo-left-open:before
content: '\e60e'
.entypo-pause:before
content: '\e602'
.entypo-right-open:before
content: '\e607'
.entypo-dot-3:before
content: '\e60b'
.entypo-minus:before
content: '\e60d'
.entypo-search:before
content: '\e604'
.entypo-plus:before
content: '\e60c'
.entypo-cancel:before
content: '\e603'
.entypo-doc-text:before
content: '\e60f'
.entypo-cycle:before
content: '\e610'
.entypo-resize-full:before
content: '\e611'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment