diff --git a/README.md b/README.md index 7a155cc..389ad94 100644 --- 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 \ No newline at end of file diff --git a/test-page.html b/test-page.html index a0f82ae..2c47dc0 100644 --- a/test-page.html +++ b/test-page.html @@ -1,21 +1,41 @@ + - - - - -
- - + + Kippt Button Testing Page + + + +
Lemon drops biscuit applicake

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.

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.

-Save to Kippt + + + Save to Kippt + + - + -
+
\ No newline at end of file diff --git a/widgets.js b/widgets.js index ca4c68a..2bbe608 100644 --- 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(""); +// 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("Save to Kippt") - }); - - // 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"); - }); -}); \ No newline at end of file + // 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 = 'Save to Kippt'; + // 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; + }); + } +} \ No newline at end of file