Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Not using the global namespace #33

Closed
wants to merge 2 commits into from

6 participants

Eli White Gustav Ahlberg Felipe Andrew Allen Sven Mielke Rich Jones
Eli White

Pulling everything out of the global namespace and putting most everything inside of prototypes so we can separate the code out into being more like an object that we all know and love. Should be easier to maintain than spaghetti code down the road.

Rich Jones
Owner

Oohhhh shiiiiit!

I gotta test this out some more, but if this works, you are a fucking wizard. Sawwwweeeeeeeeeeeeeeet.

Eli White

I know that this breaks one of the golden rules of open source (work inside of the coding style already set in the project), but I figure if this grows at all, which this seems to have enough interest, that it would just keep getting out of hand, and by setting up some sort of structure now, we can help other contributors in the future know how to work inside of the project.

If people don't have interest in this format, we should probably talk about other directions we can go. If you do like this format, even though there are a lot more changes that need to be made to put it in line (like cleaning up the spritzify function) please give a thumbs up to this...

Tom Byrer tomByrer referenced this pull request
Open

Rawgithub Replacement #13

Andrew Allen

+1, this is definitely the way to go. was going to suggest it, but looks like you beat me to it

Eli White

I'd like to hear from @Miserlou if this is something he is interested in. With all of the changes that happened since this pull request, it isn't in a state to pull and I'm willing to put more work into it to get it back up to par and even clean it up more, but I'd like to know if this is the direction we should be going.

Sven Mielke

Yes, I really think that's the right way.

Eli White TheSavior closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 6, 2014
  1. Eli White

    Removing JQuery

    TheSavior authored
  2. Eli White
This page is out of date. Refresh to see the latest.
Showing with 115 additions and 132 deletions.
  1. +3 −1 index.html
  2. +5 −15 spritz.html
  3. +107 −116 spritz.js
4 index.html
View
@@ -23,7 +23,9 @@
javascript:(function(src, cb){var s = document.createElement('script');s.charset = 'UTF-8';document.body.insertBefore(s, document.body.firstChild);s.src = src;if(typeof cb === 'function'){s.onload = cb;s.onreadystatechange = function(){(/loaded|complete/).test(s.readyState)&&cb(s);};}return s;}('http://github.com/pure/pure/raw/master/libs/pure.js', function(e){alert('loaded');})) -->
<div class='button'>
- <a href="javascript:(function(){ cb = function(){ create_spritz(); }; var script=document.createElement('SCRIPT');script.src='https://miserlou.github.io/OpenSpritz/spritz.js?callback=cb'; script.onload=cb; document.body.appendChild(script);})();">
+ <a href="javascript:(function(){ cb = function(){ new Spritz(); }; var script=document.createElement('SCRIPT');script.src='https://miserlou.github.io/OpenSpritz/spritz.js?callback=cb'; script.onload=cb; document.body.appendChild(script);})();">
+
+ <!--<a href="javascript:(function(){ cb = function(){ new Spritz(); }; var script=document.createElement('SCRIPT');script.src='/spritz.js?callback=cb'; script.onload=cb; document.body.appendChild(script);})();">-->
OpenSpritz this!
<a />
</div>
20 spritz.html
View
@@ -1,3 +1,4 @@
+<div>
<link href='https://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
<link href='https://rawgithub.com/Miserlou/OpenSpritz/master/style.css' rel='stylesheet' type='text/css'>
@@ -35,6 +36,9 @@
<option value="950">950wpm</option>
</select>
+ <input type="range" id="spritz_slider" min="1" max="10" value="1">
+ <button type="button" id="spritz_toggle">Play</button>
+
<span id="spritz_credits">
<a href="http://github.com/Miserlou/OpenSpritz">
<i>OpenSpritz</i>
@@ -48,18 +52,4 @@
<div id="spritz_spacer">
</div>
-
-<script type='text/javascript'>
-$( document ).ready(function() {
-
- $('#spritz_selector').on('change', function (e) {
-
- clearTimeouts();
- var optionSelected = $("option:selected", this);
- var valueSelected = this.value;
- var input = $('#spritz_me').text();
- var rez = spritz();
-
- });
-});
-</script>
+</div>
223 spritz.js
View
@@ -6,81 +6,71 @@
// Please don't abuse this.
var readability_token = '172b057cd7cfccf27b60a36f16b1acde12783893';
-// Create the view from the remote resource.
-function create_spritz(){
+var Spritz = function() {
+ this.load();
+}
- spritz_loader = function() {
- $.get("https://rawgithub.com/Miserlou/OpenSpritz/master/spritz.html", function(data){
+Spritz.prototype.load = function() {
+ var spritzContainer = document.getElementById("spritz_container");
+ if (!spritzContainer) {
+ this.getURL("https://rawgithub.com/Miserlou/OpenSpritz/master/spritz.html", (function(data) {
+ //this.getURL("/spritz.html", (function(data) {
- if (!($("#spritz_container").length) ) {
- $("body").prepend(data);
- }
- // I suppose it's better to add that to spritz.html
- $('#spritz_selector')
- .after('<input type="range" id="spritz_slider" min="1" max="10" value="1">')
- .after('<button type="button" id="spritz_toggle">Play</button>');
- },'html');
- };
+ var ele = document.createElement("div");
+ ele.innerHTML = data;
+ document.body.insertBefore(ele.firstChild, document.body.firstChild);
- load_jq(spritz_loader);
+ document.getElementById("spritz_selector").addEventListener("change", (function(e) {
+ this.clearTimeouts();
+ this.start();
+ }).bind(this));
+ }).bind(this));
+ }
}
-// jQuery loader: http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/
-// This is pretty fucked and should be replaced. Is there anyway we can just force
-// the latest jQ? I wouldn't have a problem with that.
-function load_jq(spritz_loader){
-
- // the minimum version of jQuery we want
- var v = "1.7.0";
-
- // check prior inclusion and version
- if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
- var done = false;
- var script = document.createElement("script");
- script.src = "https://ajax.googleapis.com/ajax/libs/jquery/" + v + "/jquery.min.js";
- script.onload = script.onreadystatechange = function(){
- if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
- done = true;
- spritz_loader();
+Spritz.prototype.getURL = function(url, callback) {
+ var xmlhttp = new XMLHttpRequest();
+
+ xmlhttp.onreadystatechange = function() {
+ if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+ callback(xmlhttp.responseText);
}
- };
- document.getElementsByTagName("head")[0].appendChild(script);
- } else{
- spritz_loader();
}
-}
-function hide_spritz(){
- $('#spritz_spacer').slideUp();
- $('#spritz_container').slideUp();
- $('#spritz_holder').slideUp();
+ xmlhttp.open("GET", url, true);
+ xmlhttp.send();
}
-// Entry point to the beef.
-// Gets the WPM and the selected text, if any.
-function spritz(){
+Spritz.prototype.hide = function() {
+ document.getElementById("spritz_spacer").style.display = "none";
+ document.getElementById("spritz_container").style.display = "none";
+ document.getElementById("spritz_holder").style.display = "none";
+}
- var wpm = parseInt($("#spritz_selector").val(), 10);
- if(wpm < 1){
+Spritz.prototype.start = function() {
+ var wpm = parseInt(document.getElementById("spritz_selector").value, 10);
+ if (wpm < 1) {
return;
}
- var selection = getSelectionText();
- if(selection){
- spritzify(selection);
- }
- else{
- spritzifyURL();
+ var selection = this.getSelectionText();
+ if (selection) {
+ this.spritzify(selection);
+ } else {
+ this.spritzifyURL();
}
}
// The meat!
-function spritzify(input){
+Spritz.prototype.spritzify = function(input) {
+ // TODO: stop doing this
+ var self = this;
+
- var wpm = parseInt($("#spritz_selector").val(), 10);
- var ms_per_word = 60000/wpm;
+ var wpm = parseInt(document.getElementById("spritz_selector").value, 10);
+ var ms_per_word = 60000 / wpm;
// Split on any spaces.
var all_words = input.split(/\s+/);
@@ -93,25 +83,25 @@ function spritzify(input){
var temp_words = all_words.slice(0); // copy Array
var t = 0;
- for (var i=0; i<all_words.length; i++){
+ for (var i = 0; i < all_words.length; i++) {
- if(all_words[i].indexOf('.') != -1){
+ if (all_words[i].indexOf('.') != -1) {
temp_words[t] = all_words[i].replace('.', '&#8226;');
}
// Double up on long words and words with commas.
- if((all_words[i].indexOf(',') != -1 || all_words[i].indexOf(':') != -1 || all_words[i].indexOf('-') != -1 || all_words[i].indexOf('(') != -1|| all_words[i].length > 8) && all_words[i].indexOf('.') == -1){
- temp_words.splice(t+1, 0, all_words[i]);
- temp_words.splice(t+1, 0, all_words[i]);
+ if ((all_words[i].indexOf(',') != -1 || all_words[i].indexOf(':') != -1 || all_words[i].indexOf('-') != -1 || all_words[i].indexOf('(') != -1 || all_words[i].length > 8) && all_words[i].indexOf('.') == -1) {
+ temp_words.splice(t + 1, 0, all_words[i]);
+ temp_words.splice(t + 1, 0, all_words[i]);
t++;
t++;
}
// Add an additional space after punctuation.
- if(all_words[i].indexOf('.') != -1 || all_words[i].indexOf('!') != -1 || all_words[i].indexOf('?') != -1 || all_words[i].indexOf(':') != -1 || all_words[i].indexOf(';') != -1|| all_words[i].indexOf(')') != -1){
- temp_words.splice(t+1, 0, ".");
- temp_words.splice(t+1, 0, ".");
- temp_words.splice(t+1, 0, ".");
+ if (all_words[i].indexOf('.') != -1 || all_words[i].indexOf('!') != -1 || all_words[i].indexOf('?') != -1 || all_words[i].indexOf(':') != -1 || all_words[i].indexOf(';') != -1 || all_words[i].indexOf(')') != -1) {
+ temp_words.splice(t + 1, 0, ".");
+ temp_words.splice(t + 1, 0, ".");
+ temp_words.splice(t + 1, 0, ".");
t++;
t++;
t++;
@@ -127,35 +117,38 @@ function spritzify(input){
var running = false;
var spritz_timers = new Array();
- $('#spritz_toggle').click(function() {
- if(running) {
+ document.getElementById("spritz_toggle").addEventListener("click", function() {
+ if (running) {
stopSpritz();
} else {
startSpritz();
}
});
- $('#spritz_slider').change(function() {
- updateValues($('#spritz_slider').val() - 1);
+ document.getElementById("spritz_slider").addEventListener("change", function() {
+ updateValues(document.getElementById("spritz_slider").value - 1);
});
function updateValues(i) {
- $('#spritz_slider').val(i);
- var p = pivot(all_words[i]);
- $('#spritz_result').html(p);
+ document.getElementById("spritz_slider").value = i;
+ var p = self.pivot(all_words[i]);
+
+ document.getElementById("spritz_result").innerHTML = p;
currentWord = i;
}
function startSpritz() {
- $('#spritz_toggle').html('Stop');
+
+ document.getElementById("spritz_toggle").innerText = "Stop";
+
running = true;
// Set slider max value
- $('#spritz_slider').attr("max", all_words.length);
+ document.getElementById("spritz_slider").max = all_words.length;
spritz_timers.push(setInterval(function() {
updateValues(currentWord);
currentWord++;
- if(currentWord >= all_words.length) {
+ if (currentWord >= all_words.length) {
currentWord = 0;
stopSpritz();
}
@@ -163,27 +156,27 @@ function spritzify(input){
}
function stopSpritz() {
- for(var i = 0; i < spritz_timers.length; i++) {
+ for (var i = 0; i < spritz_timers.length; i++) {
clearTimeout(spritz_timers[i]);
}
- $('#spritz_toggle').html('Play');
+
+ document.getElementById("spritz_toggle").innerText = "Play";
running = false;
}
}
// Find the red-character of the current word.
-function pivot(word){
+Spritz.prototype.pivot = function(word) {
var length = word.length;
// Longer words are "right-weighted" for easier readability.
- if(length<6){
+ if (length < 6) {
var bit = 1;
- while(word.length < 22){
- if(bit > 0){
+ while (word.length < 22) {
+ if (bit > 0) {
word = word + '.';
- }
- else{
+ } else {
word = '.' + word;
}
bit = bit * -1;
@@ -191,35 +184,33 @@ function pivot(word){
var start = '';
var end = '';
- if((length % 2) === 0){
- start = word.slice(0, word.length/2);
- end = word.slice(word.length/2, word.length);
- } else{
- start = word.slice(0, word.length/2);
- end = word.slice(word.length/2, word.length);
+ if ((length % 2) === 0) {
+ start = word.slice(0, word.length / 2);
+ end = word.slice(word.length / 2, word.length);
+ } else {
+ start = word.slice(0, word.length / 2);
+ end = word.slice(word.length / 2, word.length);
}
var result;
- result = "<span class='spritz_start'>" + start.slice(0, start.length -1);
+ result = "<span class='spritz_start'>" + start.slice(0, start.length - 1);
result = result + "</span><span class='spritz_pivot'>";
- result = result + start.slice(start.length-1, start.length);
+ result = result + start.slice(start.length - 1, start.length);
result = result + "</span><span class='spritz_end'>";
result = result + end;
result = result + "</span>";
- }
-
- else{
+ } else {
var tail = 22 - (word.length + 7);
word = '.......' + word + ('.'.repeat(tail));
- var start = word.slice(0, word.length/2);
- var end = word.slice(word.length/2, word.length);
+ var start = word.slice(0, word.length / 2);
+ var end = word.slice(word.length / 2, word.length);
var result;
- result = "<span class='spritz_start'>" + start.slice(0, start.length -1);
+ result = "<span class='spritz_start'>" + start.slice(0, start.length - 1);
result = result + "</span><span class='spritz_pivot'>";
- result = result + start.slice(start.length-1, start.length);
+ result = result + start.slice(start.length - 1, start.length);
result = result + "</span><span class='spritz_end'>";
result = result + end;
result = result + "</span>";
@@ -233,7 +224,7 @@ function pivot(word){
// Get the currently selected text, if any.
// Shameless pinched from StackOverflow.
-function getSelectionText() {
+Spritz.prototype.getSelectionText = function() {
var text = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
@@ -249,46 +240,47 @@ function getSelectionText() {
text = document.selection.createRange().text;
}
}
- if(text === ""){
+ if (text === "") {
return false;
- }
- else{
+ } else {
return text;
}
}
// Uses the Readability API to get the juicy content of the current page.
-function spritzifyURL(){
+Spritz.prototype.spritzifyURL = function() {
var url = document.URL;
- $.getJSON("https://www.readability.com/api/content/v1/parser?url="+ encodeURIComponent(url) +"&token=" + readability_token +"&callback=?",
- function (data) {
+ this.getURL("https://www.readability.com/api/content/v1/parser?url=" + encodeURIComponent(url) + "&token=" + readability_token + "&callback=?", (function(data) {
+ data = JSON.parse(data);
- if(data.error){
- $('#spritz_result').html("Article extraction failed. Try selecting text instead.");
+ if (data.error) {
+ document.getElementById("spritz_result").innerText = "Article extraction failed. Try selecting text instead.";
return;
}
var title = '';
- if(data.title !== ""){
+ if (data.title !== "") {
title = data.title + ". ";
}
var author = '';
- if(data.author !== null){
+ if (data.author !== null) {
author = "By " + data.author + ". ";
}
- var body = jQuery(data.content).text(); // Textify HTML content.
- body = $.trim(body); // Trim trailing and leading whitespace.
+ var body = document.createElement("div");
+ body.innerHTML = data.content;
+ body = body.innerText; // Textify HTML content.
+ body = body.trim(); // Trim trailing and leading whitespace.
body = body.replace(/\s+/g, ' '); // Shrink long whitespaces.
var text_content = title + author + body;
text_content = text_content.replace(/\./g, '. '); // Make sure punctuation is apprpriately spaced.
text_content = text_content.replace(/\?/g, '? ');
text_content = text_content.replace(/\!/g, '! ');
- spritzify(text_content);
- });
+ this.spritzify(text_content);
+ }).bind(this));
}
@@ -297,7 +289,7 @@ function spritzifyURL(){
//////
// This is a hack using the fact that browers sequentially id the timers.
-function clearTimeouts(){
+Spritz.prototype.clearTimeouts = function() {
var id = window.setTimeout(function() {}, 0);
while (id--) {
@@ -307,7 +299,6 @@ function clearTimeouts(){
// Let strings repeat themselves,
// because JavaScript isn't as awesome as Python.
-String.prototype.repeat = function( num ){
- return new Array( num + 1 ).join( this );
-}
-
+String.prototype.repeat = function(num) {
+ return new Array(num + 1).join(this);
+}
Something went wrong with that request. Please try again.