Add thumbnailing support for Opera.

Enjoy your >performance.
Also fixed $.open on Opera.

4chan_x.user.js

@@ -20,7 +20,7 @@
 // @icon         data:image/gif;base64,R0lGODlhEAAQAKECAAAAAGbMM////////yH5BAEKAAIALAAAAAAQABAAAAIxlI+pq+D9DAgUoFkPDlbs7lGiI2bSVnKglnJMOL6omczxVZK3dH/41AG6Lh7i6qUoAAA7
 // ==/UserScript==
 
-/* 4chan X Beta - Version 3.0.0 - 2013-02-25
+/* 4chan X Beta - Version 3.0.0 - 2013-02-26
  * http://mayhemydg.github.com/4chan-x/
  *
  * Copyright (c) 2009-2011 James Campos <james.r.campos@gmail.com>
@@ -836,7 +836,7 @@
       }));
     },
     open: function(url) {
-      return (GM_openInTab || window.open)(url, '_blank');
+      return (window.GM_openInTab || window.open)(url, '_blank');
     },
     debounce: function(wait, fn) {
       var args, exec, that, timeout;
@@ -6008,8 +6008,7 @@
           QR.error("" + file.name + ": File too large (file: " + ($.bytesToString(file.size)) + ", max: " + ($.bytesToString(max)) + ").");
         } else if (_ref1 = file.type, __indexOf.call(QR.mimeTypes, _ref1) < 0) {
           QR.error("" + file.name + ": Unsupported file type.");
-        }
+        } else if (!QR.replies[QR.replies.length - 1].file) {
-        if (!QR.replies[QR.replies.length - 1].file) {
           QR.replies[QR.replies.length - 1].setFile(file);
         } else {
           new QR.reply().setFile(file);
@@ -6079,7 +6078,7 @@
       }
 
       _Class.prototype.setFile = function(file) {
-        var fileURL, img,
+        var fileURL, img, reader,
           _this = this;
         this.file = file;
         this.filename = "" + file.name + " (" + ($.bytesToString(file.size)) + ")";
@@ -6087,40 +6086,48 @@
         if (QR.spoiler) {
           this.nodes.label.hidden = false;
         }
+        if (window.URL) {
+          URL.revokeObjectURL(this.url);
+        }
         this.showFileData();
         if (!/^image/.test(file.type)) {
-          this.el.style.backgroundImage = null;
+          this.nodes.el.style.backgroundImage = null;
           return;
         }
         if (!window.URL) {
+          reader = new FileReader();
+          reader.onload = function(e) {
+            return _this.nodes.el.style.backgroundImage = "url(" + e.target.result + ")";
+          };
+          reader.readAsDataURL(file);
           return;
         }
-        URL.revokeObjectURL(this.url);
         fileURL = URL.createObjectURL(file);
         img = $.el('img');
-        $.on(img, 'load', function() {
+        img.onload = function() {
-          var applyBlob, c, data, i, l, s, ui8a, _i;
+          var applyBlob, c, data, height, i, l, s, ui8a, width, _i;
           s = 90 * 3;
-          if (img.height < s || img.width < s) {
+          height = img.height, width = img.width;
+          if (height < s || width < s) {
             _this.url = fileURL;
             _this.nodes.el.style.backgroundImage = "url(" + _this.url + ")";
             return;
           }
-          if (img.height <= img.width) {
+          if (height <= width) {
-            img.width = s / img.height * img.width;
+            width = s / height * width;
-            img.height = s;
+            height = s;
           } else {
-            img.height = s / img.width * img.height;
+            height = s / width * height;
-            img.width = s;
+            width = s;
           }
           c = $.el('canvas');
-          c.height = img.height;
+          c.height = img.height = height;
-          c.width = img.width;
+          c.width = img.width = width;
-          c.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
+          c.getContext('2d').drawImage(img, 0, 0, width, height);
+          URL.revokeObjectURL(fileURL);
           applyBlob = function(blob) {
             _this.url = URL.createObjectURL(blob);
-            _this.nodes.el.style.backgroundImage = "url(" + _this.url + ")";
+            return _this.nodes.el.style.backgroundImage = "url(" + _this.url + ")";
-            return URL.revokeObjectURL(fileURL);
           };
           if (c.toBlob) {
             c.toBlob(applyBlob);
@@ -6135,7 +6142,7 @@
           return applyBlob(new Blob([ui8a], {
             type: 'image/png'
           }));
-        });
+        };
         return img.src = fileURL;
       };
 

changelog

@@ -20,6 +20,7 @@ beta
     Creating threads outside of the index is now possible.
     Selection-to-quote also applies to selected text inside the post, not just inside the comment.
     Quoting the OP will not insert the >>opnumber anymore unless the QR was already opened.
+    Added thumbnailing support for Opera.
 
   Image Expansion changes:
     Expanding OP images won't squish replies anymore.

lib/$.coffee

@@ -138,7 +138,7 @@ $.extend $,
   event: (event, detail, root=d) ->
     root.dispatchEvent new CustomEvent event, {bubbles: true, detail}
   open: (url) ->
-    (GM_openInTab or window.open) url, '_blank'
+    (window.GM_openInTab or window.open) url, '_blank'
   debounce: (wait, fn) ->
     timeout = null
     that    = null

src/qr.coffee

@@ -313,7 +313,7 @@ QR =
         QR.error "#{file.name}: File too large (file: #{$.bytesToString file.size}, max: #{$.bytesToString max})."
       else unless file.type in QR.mimeTypes
         QR.error "#{file.name}: Unsupported file type."
-      unless QR.replies[QR.replies.length - 1].file
+      else unless QR.replies[QR.replies.length - 1].file
         # set last reply's file
         QR.replies[QR.replies.length - 1].setFile file
       else
@@ -371,42 +371,49 @@ QR =
       @filename           = "#{file.name} (#{$.bytesToString file.size})"
       @nodes.el.title     = @filename
       @nodes.label.hidden = false if QR.spoiler
+      URL.revokeObjectURL @url if window.URL
       @showFileData()
       unless /^image/.test file.type
-        @el.style.backgroundImage = null
+        @nodes.el.style.backgroundImage = null
         return
+
       # XXX Opera does not support blob URL
-      return unless window.URL
+      unless window.URL
-      URL.revokeObjectURL @url
+        reader = new FileReader()
+        reader.onload = (e) =>
+          @nodes.el.style.backgroundImage = "url(#{e.target.result})"
+        reader.readAsDataURL file
+        return
 
       # Create a redimensioned thumbnail.
       fileURL = URL.createObjectURL file
       img     = $.el 'img'
 
-      $.on img, 'load', =>
+      img.onload = =>
         # Generate thumbnails only if they're really big.
         # Resized pictures through canvases look like ass,
         # so we generate thumbnails `s` times bigger then expected
         # to avoid crappy resized quality.
         s = 90*3
-        if img.height < s or img.width < s
+        {height, width} = img
+        if height < s or width < s
           @url = fileURL
           @nodes.el.style.backgroundImage = "url(#{@url})"
           return
-        if img.height <= img.width
+        if height <= width
-          img.width  = s / img.height * img.width
+          width  = s / height * width
-          img.height = s
+          height = s
         else
-          img.height = s / img.width  * img.height
+          height = s / width  * height
-          img.width  = s
+          width  = s
         c = $.el 'canvas'
-        c.height = img.height
+        c.height = img.height = height
-        c.width  = img.width
+        c.width  = img.width  = width
-        c.getContext('2d').drawImage img, 0, 0, img.width, img.height
+        c.getContext('2d').drawImage img, 0, 0, width, height
+        URL.revokeObjectURL fileURL
         applyBlob = (blob) =>
           @url = URL.createObjectURL blob
           @nodes.el.style.backgroundImage = "url(#{@url})"
-          URL.revokeObjectURL fileURL
         if c.toBlob
           c.toBlob applyBlob
           return