kippt · jescalan · Aug 8, 2012 · Aug 8, 2012
diff --git a/README.md b/README.md
@@ -21,11 +21,6 @@ Attributes:
 - _data-source_ - (Optional) Source, e.g. page domain
 - _data-via_ - (Optional) Source clip URI if you want to reference another clip inside Kippt (e.g. /api/clips/1337/)
 
-## Requirements
-
-- jQuery / Zepto
-
 ## TODO
 
-- Remove $ dependency
 - Add HTTPS enabled CDN
diff --git a/test-page.html b/test-page.html
@@ -1,21 +1,41 @@
+<!DOCTYPE html>
 <html>
-<head>
-    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js" charset="utf-8"></script>
-</head>
-<body style="background:whitesmoke; font-family:helvetica; font-size:13px; color:#222; -webkit-font-smoothing:antialiased; line-height:1.3">
-<div style="padding:80px 40px; width:300px; background:#fff; margin:100 auto; box-shadow:0 2px 10px #ddd">    
-
-<!-- Kippt Button -->
+  <head>
+    <title>Kippt Button Testing Page</title>
+    <style>
+      body {
+        background: #F5F5F5;
+        font-family: helvetica;
+        font-size: 13px;
+        color: #222;
+        -webkit-font-smoothing: antialiased;
+        line-height: 1.3em;
+      }
+      .box {
+        padding: 80px 40px;
+        width: 300px;
+        background: #fff;
+        margin: 100px auto;
+        box-shadow: 0 2px 10px #ddd;
+      }
+    </style>
+  </head>
+  <body>
+    <div class='box'>    
 
     <strong>Lemon drops biscuit applicake</strong>
     <p>Chocolate cake cupcake topping marzipan. Powder brownie bonbon lemon drops. Cupcake sugar plum faworki jelly beans sugar plum apple pie jelly-o chocolate bar icing.</p>
 
     <p> Donut liquorice cheesecake bonbon cotton candy tart. Oat cake pudding biscuit wafer wypas tiramisu. Carrot cake carrot cake cotton candy sesame snaps jelly-o applicake jelly. </p>
 
-<a href="https://kippt.com/save" class="kippt-save-button" data-url="https://kippt.com/karrisaarinen/" data-title="Karri Saarinen on Kippt" data-source="example.com">Save to Kippt</a>
+    <!-- Kippt Button -->
+
+    <a href="https://kippt.com/save" class="kippt-save-button" data-url="https://kippt.com/karrisaarinen/" data-title="Karri Saarinen on Kippt" data-source="example.com">Save to Kippt</a>
+
+    <!-- Script Component -->
 
-<script>(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","kippt-wjs"));</script>
+    <script>(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","kippt-wjs"));</script>
 
-</div>
+  </div>
 </body>
 </html>
diff --git a/widgets.js b/widgets.js
@@ -1,39 +1,48 @@
-$(function() {
-    // CSS
-    var css = ".kippt-save-button {\
-                    background:url(http://addons.kippt.com/save-button/img/kippt-btn.png) no-repeat;\
-                    height:20px;\
-                    width:62px;\
-                    display:block;\
-                    position:relative;\
-                    margin-top:5px;\
-                }\
-                .kippt-save-button:hover {\
-                    background-position:0 -30px;\
-                }\
-                .kippt-save-button:active {\
-                    background-position:0 -60px;\
-                }\
-                .kippt-save-button span {\
-                    display: none;\
-                }";
-    $("head").append("<style>"+css+"</style>");
+// Cleaned this up and made it as similar to the original jquery code as possible.
+// I didn't test this in IE, but marked a couple places in the code where I wouldn't
+// be surprised if IE effed it up. It does suck a lot.
+
+window.onload = function(){ // ie
+  // css
+  var css = ".kippt-save-button {\
+                background:url(http://addons.kippt.com/save-button/img/kippt-btn.png) no-repeat;\
+                height:20px;\
+                width:62px;\
+                display:block;\
+                position:relative;\
+                margin-top:5px;\
+              }\
+              .kippt-save-button:hover {\
+                background-position:0 -30px;\
+              }\
+              .kippt-save-button:active {\
+                background-position:0 -60px;\
+              }\
+              .kippt-save-button span {\
+                display: none;\
+              }";
+
+    // inject styles          
+    var style_tag = document.createElement('style');
+    style_tag.innerHTML = css;
+    document.getElementsByTagName('head')[0].appendChild(style_tag); // ie
 
-    // Loading
-    $(".kippt-save-button").each(function(i, elem){
-        $(elem).html("<span>Save to Kippt</span>")
-    });
-
-    // Handle click
-    $(".kippt-save-button").on("click", function(e){
-        e.preventDefault();
-        var elem = e.currentTarget;
-        var url = encodeURIComponent($(elem).data("url")),
-            title= encodeURIComponent($(elem).data("title")),
-            source = encodeURIComponent($(elem).data("source")),
-            via = encodeURIComponent($(elem).data("via"));
-
-        var windowUrl = "https://kippt.com/extensions/new?url="+ url +"&title="+ title +"&source="+ source +"&via="+ via;
-        window.open(windowUrl, "kippt-popup", "location=no,menubar=no,status=no,titlebar=no,scrollbars=no,width=420,height=192");
-    });
-});
+    // grab all the buttons, hide text and add click event
+    var buttons = document.getElementsByClassName("kippt-save-button"); // ie
+    for (var i = 0; i < buttons.length; i++) { 
+        var button = buttons[i];
+        // hide text
+        button.innerHTML = '<span>Save to Kippt</span>';
+        // add click event
+        button.addEventListener('click', function(e){ // ie
+            if (e.preventDefault()){ e.preventDefault(); }
+            var url = button.getAttribute('data-url'), // ie
+                title = button.getAttribute('data-title'),
+                source = button.getAttribute('data-source'),
+                via = button.getAttribute('data-via');
+            var windowUrl = "https://kippt.com/extensions/new?url="+ url +"&title="+ title +"&source="+ source +"&via="+ via;
+            window.open(windowUrl, "kippt-popup", "location=no,menubar=no,status=no,titlebar=no,scrollbars=no,width=420,height=192");
+            return false;
+        });
+    }
+}