Merge pull request #108 from lapo-luchini/removeJquery

Remove the need for jQuery in bookmarklet.

pinry/static/js/bookmarklet.js

@@ -9,30 +9,26 @@
  * Require: None (dynamically loads jQuery if needed)
  */
 
-
-// Start jQuery Check
-if (!window.jQuery) {
-    var body = document.getElementsByTagName('body')[0];
-    var script = document.createElement('script');
-    script.onload = main;
-    script.src = '//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js';
-    body.appendChild(script);
-} else
-    jQuery(document).ready(main);
-// End jQuery Check
-
-function main() {
-    var $ = jQuery;
+(function main() {
+    'use strict';
 
     function closePinry() {
-        $('#pinry-images').add('#pinry-bookmarklet').remove();
+        var el = document.getElementById('pinry-images');
+        el.parentNode.removeChild(el);
+        el = document.getElementById('pinry-bookmarklet');
+        el.parentNode.removeChild(el);
     }
 
     // Start Helper Functions
     function getFormUrl() {
-        var hostUrl = $('#pinry-bookmarklet').attr('src').split('/')[2];
-        var formUrl = '/pins/pin-form/?pin-image-url=';
-        return 'http://'+hostUrl+formUrl;
+        var src = document.getElementById('pinry-bookmarklet').src;
+        src = src.substr(0, src.indexOf('/static/js'));
+        return src + '/pins/pin-form/?pin-image-url=';
+    }
+
+    function setCSS(el, css) {
+        for (var k in css)
+            el.style[k] = css[k];
     }
     // End Helper Functions
 
@@ -41,79 +37,81 @@ function main() {
     function pageView() {
         var pinryImages = document.createElement('div');
         pinryImages.id = 'pinry-images';
-        $(pinryImages).css({
-            'position': 'absolute',
-            'z-index': '9001',
-            'background': 'rgba(0, 0, 0, 0.7)',
-            'padding-top': '70px',
-            'top': '0',
-            'left': '0',
-            'right': '0',
-            'height': $(document).height(),
-            'text-align': 'center',
-            'width': '100%'
+        setCSS(pinryImages, {
+            position: 'fixed',
+            zIndex: 9001,
+            background: 'rgba(0, 0, 0, 0.7)',
+            paddingTop: '70px',
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            textAlign: 'center',
+            overflowX: 'hidden',
+            overflowY: 'auto'
         });
         var pinryBar = document.createElement('div');
         pinryBar.id = 'pinry-bar';
-        $(pinryBar).css({
-            'background': 'black',
-            'padding': '15px',
-            'position': 'absolute',
-            'z-index': '9002',
-            'width': '100%',
-            'top': 0,
-            'border-bottom': '1px solid #555',
-            'color': 'white',
-            'text-align': 'center',
-            'font-size': '22px'
+        setCSS(pinryBar, {
+            background: 'black',
+            padding: '15px',
+            position: 'absolute',
+            zIndex: 9002,
+            width: '100%',
+            top: 0,
+            borderBottom: '1px solid #555',
+            color: 'white',
+            textAlign: 'center',
+            fontSize: '22px'
         });
-        $('body').append(pinryImages);
-        $('#pinry-images').append(pinryBar);
-        $('#pinry-bar').html('Pinry Bookmarklet').click(closePinry);
-        $(document).keyup(function (e) {
+        pinryBar.textContent = 'Pinry Bookmarklet';
+        pinryBar.onclick = closePinry;
+        pinryImages.appendChild(pinryBar);
+        document.body.appendChild(pinryImages);
+        document.onkeyup = function (e) {
             if (e.keyCode == 27) // ESC key
                 closePinry();
-        });
-        $(window).scrollTop(0);
+        };
     }
 
     function imageView(imageUrl) {
         // Requires that pageView has been created already
-        var image = $('<div/>');
-        image.css({
-            'background-image': 'url('+imageUrl+')',
-            'background-position': 'center center',
-            'background-repeat': 'no-repeat',
-            'background-size': 'cover',
-            'display': 'inline-block',
-            'color': 'blue',
-            'text-shadow': 'yellow 0px 0px 2px, yellow 0px 0px 3px, yellow 0px 0px 4px',
-            'width': '200px',
-            'height': '200px',
-            'margin': '15px',
-            'cursor': 'pointer',
-            'border': '1px solid #555'
+        var image = document.createElement('div');
+        setCSS(image, {
+            backgroundImage: 'url('+imageUrl+')',
+            backgroundPosition: 'center center',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: 'cover',
+            display: 'inline-block',
+            color: 'blue',
+            textShadow: 'yellow 0px 0px 2px, yellow 0px 0px 3px, yellow 0px 0px 4px',
+            width: '200px',
+            height: '200px',
+            margin: '15px',
+            cursor: 'pointer',
+            border: '1px solid #555'
         });
-        image.click(function() {
+        image.onclick = function() {
             var popUrl = getFormUrl()+encodeURIComponent(imageUrl);
             window.open(popUrl);
             closePinry();
-        });
-        return image.appendTo('#pinry-images');
+        };
+        document.getElementById('pinry-images').appendChild(image);
+        return image;
     }
     // End View Functions
 
 
     // Start Active Functions
     function addAllImagesToPageView() {
-        var images = $('body').find('img');
-        images.each(function() {
-            var t = $(this),
-                w = this.naturalWidth  || t.width(),
-                h = this.naturalHeight || t.height();
+        var images = document.getElementsByTagName('img');
+        for (var i = 0; i < images.length; ++i) {
+            var t = images[i],
+                w = t.naturalWidth,
+                h = t.naturalHeight;
             if (w > 200 && h > 200)
-                imageView(this.src).text(w + '\u00D7' + h);
-        });
+                imageView(t.src).textContent = w + '\u00D7' + h;
+        }
         return images;
     }
     // End Active Functions
@@ -123,4 +121,4 @@ function main() {
     pageView(); // Build page before we insert images
     addAllImagesToPageView(); // Add all images on page to our new pageView
     // End Init
-}
+})();