updated readme to include vanilla instructions, fixed a typo on the d…

…emo index.html file
urbae · Sep 25, 2015 · 64aa03e · 64aa03e
1 parent 37f49ba
commit 64aa03e
Show file tree

Hide file tree

Showing 6 changed files with 154 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ This gives you a visual reference to tell you if tweaks are needed on your font-
 
 Read why the 45-75 rule is important and [view the demo here](http://mds.sh/readable).
 
-## Implementation
+## Implementation Using jQuery
 There are 3 files required to get **Readable** working on your site.
 2 of them are inside the **readable** folder and the other is jQuery.
 
@@ -34,3 +34,30 @@ Put **readable.css** before your closing `</head>` and **jQuery** and **readable
   </body>
 </html>
 ```
+
+## Implementation Using Vanilla JavaScript
+Only 2 files required to get **Readable** working on your site.
+They are inside the **readable** folder.
+
+1. readable.css *(2 kilobytes)*
+2. readable-vanilla.js *(1 kilobyte)*
+
+
+Put **readable.css** before your closing `</head>` and **readable-vanilla.js** just before your closing `</body>`
+
+```html
+<html>
+  <head>
+    <title>Your Website</title>
+    <!-- readable styles -->
+    <link rel="stylesheet" href="readable/readable.css">
+  </head>
+  <body>
+    <!-- your website here -->
+    <!-- readable script -->
+    <script type="text/javascript" src="readable/readable-vanilla.js"></script>
+  </body>
+</html>
+```
+
+Thanks to [Jon Suh](http://github.com/jonsuh) for the vanilla flavor!
diff --git a/bookmarklet/index.html b/bookmarklet/index.html
@@ -0,0 +1,13 @@
+<html>
+  <head>
+    <title>Readable - A plugin for creating readable paragraphs</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="description" content="Make sure your paragraphs are nice and readable with this simple little plugin. Created by Matt D. Smith" />
+    <meta name="HandheldFriendly" content="True" />
+    <meta name="MobileOptimized" content="320" />
+  </head>
+  <body>
+    <a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://mds.sh/readable/bookmarklet/scripts/readable-min.js';})();">Readable</a>
+  </body>
+</html>
diff --git a/bookmarklet/scripts/readable-bookmarklet.js b/bookmarklet/scripts/readable-bookmarklet.js
@@ -0,0 +1,80 @@
+//
+//  Readable-bookmarklet.js
+//
+//  Created by Matt D. Smith on 9/17/2015.
+//  Copyright (c) 2015 Matt D. Smith. All rights reserved.
+//
+
+(function(){
+
+  function initMyBookmarklet() {
+    (window.myBookmarklet = function() {
+
+      // start readable
+      var charCountShowing = false;
+
+      $('span.readable').css({
+        "background-color": "#f45b5d", 
+      });
+
+      function addSpans(){
+        $('p').each(function (){
+        var $this = $(this);
+        var ohtml = $(this).html(); 
+        $(this).data('ocontent', ohtml);
+        $this.html(addReadable);
+      });
+      }
+
+      function addReadable(){
+        var text = $(this).text();
+        var a = text.substring(0, 45);
+        var b = text.substring(45, 75);
+        var c = text.substring(75, text.length);
+        var d = a + "<span class='readable'>" + b + "</span>" + c;
+        return d;
+      }
+
+      function toggleSpans(){
+        if( charCountShowing === true ){
+          $('p').html(function(){
+            var p = $(this).data('ocontent'); 
+            return p;
+          });
+          charCountShowing = false;
+        }else{
+          addSpans();
+          charCountShowing = true;
+        }
+      }
+
+      function init(){
+        charCountShowing = true;
+        addSpans();
+      }
+
+      init();
+
+    });
+  }
+
+  // the minimum version of jQuery we want
+  var v = "1.3.2";
+
+  // check prior inclusion and version
+  if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
+    var done = false;
+    var script = document.createElement("script");
+    script.src = "http://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;
+        initMyBookmarklet();
+      }
+    };
+    document.getElementsByTagName("head")[0].appendChild(script);
+  } else {
+    initMyBookmarklet();
+  }
+
+})();
diff --git a/bookmarklet/scripts/readable-min.js b/bookmarklet/scripts/readable-min.js
diff --git a/config.codekit b/config.codekit
@@ -2,6 +2,37 @@
 "CodeKitInfo": "This is a CodeKit 2.x project configuration file. It is designed to sync project settings across multiple machines. MODIFYING THE CONTENTS OF THIS FILE IS A POOR LIFE DECISION. If you do so, you will likely cause CodeKit to crash. This file is not useful unless accompanied by the project that created it in CodeKit 2. This file is not backwards-compatible with CodeKit 1.x. For more information, see: http:\/\/incident57.com\/codekit",
 "creatorBuild": "19033",
 "files": {
+	"\/bookmarklet\/index.html": {
+		"fileType": 8192,
+		"ignore": 0,
+		"ignoreWasSetByUser": 0,
+		"inputAbbreviatedPath": "\/bookmarklet\/index.html",
+		"outputAbbreviatedPath": "No Output Path",
+		"outputPathIsOutsideProject": 0,
+		"outputPathIsSetByUser": 0
+		},
+	"\/bookmarklet\/scripts\/readable-bookmarklet.js": {
+		"fileType": 64,
+		"ignore": 0,
+		"ignoreWasSetByUser": 0,
+		"inputAbbreviatedPath": "\/bookmarklet\/scripts\/readable-bookmarklet.js",
+		"outputAbbreviatedPath": "\/bookmarklet\/scripts\/readable-min.js",
+		"outputPathIsOutsideProject": 0,
+		"outputPathIsSetByUser": 1,
+		"outputStyle": 1,
+		"syntaxCheckerStyle": 1
+		},
+	"\/bookmarklet\/scripts\/readable-min.js": {
+		"fileType": 64,
+		"ignore": 1,
+		"ignoreWasSetByUser": 0,
+		"inputAbbreviatedPath": "\/bookmarklet\/scripts\/readable-min.js",
+		"outputAbbreviatedPath": "\/bookmarklet\/scripts\/min\/readable-min-min.js",
+		"outputPathIsOutsideProject": 0,
+		"outputPathIsSetByUser": 0,
+		"outputStyle": 1,
+		"syntaxCheckerStyle": 1
+		},
 	"\/index.html": {
 		"fileType": 8192,
 		"ignore": 0,

diff --git a/index.html b/index.html
@@ -36,7 +36,7 @@ <h2>The Sweet Spot</h2>
       <p>But in my quest for <strong>automated typographic perfection</strong> I wanted a way to visually see what target I was shooting for. <a href="https://github.com/mds/readable">Readable</a></strong> creates that target.</p>
 
       <h2>How it works</h2>
-      <p>The content of each <strong>paragraph</strong> tag is converted into a text string right after we duplicated it as a data attribute for safe keeping. The text string is then counted using the .substring() function in jQuery to find the 45–75 sweet spot. We then pop in a <strong>span</strong> tag with a <strong>"readable"</strong> class. This gives us what we need to create the styles. Once the toggle is switched off, we reinsert the original html content back into the paragraph using the preserved html from the data attribute. If you want to dig deeper, <a href="https://github.com/mds/readable"><strong>view it on GitHub</strong></a>.</p>
+      <p>The content of each <strong>paragraph</strong> tag is converted into a text string right after we duplicate it as a data attribute for safe keeping. The text string is then counted using the .substring() function to find the 45–75 sweet spot. We then pop in a <strong>span</strong> tag with a <strong>"readable"</strong> class. This gives us what we need to create the styles. Once the toggle is switched off, we reinsert the original html content back into the paragraph using the preserved html from the data attribute. If you want to dig deeper, <a href="https://github.com/mds/readable"><strong>view it on GitHub</strong></a>.</p>
 
       <h2>Resources</h2>
       <ul>