ImageHover.coffee

builds/appchan-x.user.js

@@ -11286,6 +11286,10 @@
 
   ImageHover = {
     init: function() {
+      var _ref;
+      if ((_ref = g.VIEW) !== 'index' && _ref !== 'thread') {
+        return;
+      }
       if (Conf['Image Hover']) {
         Post.callbacks.push({
           name: 'Image Hover',
@@ -11300,113 +11304,85 @@
       }
     },
     node: function() {
-      var _ref, _ref1;
-      if (!(((_ref = this.file) != null ? _ref.isImage : void 0) || ((_ref1 = this.file) != null ? _ref1.isVideo : void 0))) {
+      if (!(this.file && (this.file.isImage || this.file.isVideo))) {
         return;
       }
       return $.on(this.file.thumb, 'mouseover', ImageHover.mouseover);
     },
     catalogNode: function() {
       var file;
-      if (!((file = this.thread.OP.file) && (file.isImage || file.isVideo))) {
+      file = this.thread.OP.file;
+      if (!(file && (file.isImage || file.isVideo))) {
         return;
       }
       return $.on(this.nodes.thumb, 'mouseover', ImageHover.mouseover);
     },
     mouseover: function(e) {
-      var el, isVideo, post, thumb;
+      var el, error, file, isVideo, maxHeight, maxWidth, post, scale, _ref;
       post = $.hasClass(this, 'thumb') ? g.posts[this.parentNode.dataset.fullID] : Get.postFromNode(this);
-      isVideo = post.file.isVideo;
-      el = $.el((isVideo ? 'video' : 'img'), {
-        src: post.file.URL
-      });
-      thumb = post.file.thumb;
-      if (d.body.contains(thumb)) {
-        if (el !== thumb.nextSibling) {
-          $.after(thumb, el);
-        }
+      file = post.file;
+      isVideo = file.isVideo;
+      if (file.isExpanding || file.isExpanded) {
+        return;
+      }
+      error = ImageHover.error(post);
+      if (((_ref = ImageCommon.cache) != null ? _ref.dataset.fullID : void 0) === post.fullID) {
+        el = ImageCommon.popCache();
+        $.on(el, 'error', error);
       } else {
-        if (el.parentNode !== Header.hover) {
-          $.add(Header.hover, el);
-        }
+        el = $.el((isVideo ? 'video' : 'img'));
+        el.dataset.fullID = post.fullID;
       }
       el.id = 'ihover';
-      el.dataset.fullID = post.fullID;
+      $.add(Header.hover, el);
       if (isVideo) {
         el.loop = true;
         el.controls = false;
-        el.muted = !Conf['Allow Sound'];
         if (Conf['Autoplay']) {
           el.play();
         }
       }
-      UI.hover({
+      maxWidth = Math.max(left, doc.clientWidth - right);
+      maxHeight = doc.clientHeight - 16;
+      scale = Math.min(1, maxWidth / width, maxHeight / height);
+      el.style.maxWidth = "" + (scale * width) + "px";
+      el.style.maxHeight = "" + (scale * height) + "px";
+      return UI.hover({
         root: this,
         el: el,
         latestEvent: e,
         endEvents: 'mouseout click',
-        asapTest: post.file.isImage ? function() {
-          return el.naturalHeight;
-        } : function() {
-          return el.readyState >= el.HAVE_CURRENT_DATA;
+        asapTest: function() {
+          return true;
         },
+        height: scale * height + padding,
+        noRemove: true,
         cb: function() {
+          $.off(el, 'error', error);
+          ImageCommon.pushCache(el);
           if (isVideo) {
             el.pause();
-            TrashQueue.add(el, post);
           }
-          return el.removeAttribute('id');
+          $.rm(el);
+          return el.removeAttribute('style');
         }
       });
-      return $.on(el, 'error', ImageHover.error);
     },
-    error: function() {
-      var URL, post, src, timeoutID;
-      if (!doc.contains(this)) {
-        return;
-      }
-      post = g.posts[this.dataset.fullID];
-      src = this.src.split('/');
-      if (src[2] === 'i.4cdn.org') {
-        URL = Redirect.to('file', {
-          boardID: src[3],
-          filename: src[4].replace(/\?.+$/, '')
-        });
-        if (URL) {
-          this.src = URL;
+    error: function(post) {
+      return function() {
+        if (ImageCommon.decodeError(this, post)) {
           return;
         }
-        if (g.DEAD || post.isDead || post.file.isDead) {
-          return;
-        }
-      }
-      timeoutID = setTimeout(((function(_this) {
-        return function() {
-          return _this.src = post.file.URL + '?' + Date.now();
-        };
-      })(this)), 3000);
-      return $.ajax("//a.4cdn.org/" + post.board + "/thread/" + post.thread + ".json", {
-        onload: function() {
-          var postObj, _i, _len, _ref;
-          if (this.status !== 200) {
-            return;
-          }
-          _ref = this.response.posts;
-          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-            postObj = _ref[_i];
-            if (postObj.no === post.ID) {
-              break;
+        return ImageCommon.error(this, post, 3 * $.SECOND, (function(_this) {
+          return function(URL) {
+            if (URL) {
+              return _this.src = URL + (_this.src === URL ? '?' + Date.now() : '');
+            } else {
+              return $.rm(_this);
             }
-          }
-          if (postObj.no !== post.ID) {
-            clearTimeout(timeoutID);
-            return post.kill();
-          } else if (postObj.filedeleted) {
-            clearTimeout(timeoutID);
-            return post.kill(true);
-          }
-        }
-      });
+          };
+        })(this));
+      };
     }
   };
 

builds/crx/script.js

@@ -11308,6 +11308,10 @@
 
   ImageHover = {
     init: function() {
+      var _ref;
+      if ((_ref = g.VIEW) !== 'index' && _ref !== 'thread') {
+        return;
+      }
       if (Conf['Image Hover']) {
         Post.callbacks.push({
           name: 'Image Hover',
@@ -11322,102 +11326,85 @@
       }
     },
     node: function() {
-      var _ref, _ref1;
-      if (!(((_ref = this.file) != null ? _ref.isImage : void 0) || ((_ref1 = this.file) != null ? _ref1.isVideo : void 0))) {
+      if (!(this.file && (this.file.isImage || this.file.isVideo))) {
         return;
       }
       return $.on(this.file.thumb, 'mouseover', ImageHover.mouseover);
     },
     catalogNode: function() {
       var file;
-      if (!((file = this.thread.OP.file) && (file.isImage || file.isVideo))) {
+      file = this.thread.OP.file;
+      if (!(file && (file.isImage || file.isVideo))) {
         return;
       }
       return $.on(this.nodes.thumb, 'mouseover', ImageHover.mouseover);
     },
     mouseover: function(e) {
-      var el, isVideo, post, thumb;
+      var el, error, file, isVideo, maxHeight, maxWidth, post, scale, _ref;
       post = $.hasClass(this, 'thumb') ? g.posts[this.parentNode.dataset.fullID] : Get.postFromNode(this);
-      isVideo = post.file.isVideo;
-      el = $.el((isVideo ? 'video' : 'img'), {
-        src: post.file.URL
-      });
-      thumb = post.file.thumb;
-      if (d.body.contains(thumb)) {
-        if (el !== thumb.nextSibling) {
-          $.after(thumb, el);
-        }
+      file = post.file;
+      isVideo = file.isVideo;
+      if (file.isExpanding || file.isExpanded) {
+        return;
+      }
+      error = ImageHover.error(post);
+      if (((_ref = ImageCommon.cache) != null ? _ref.dataset.fullID : void 0) === post.fullID) {
+        el = ImageCommon.popCache();
+        $.on(el, 'error', error);
       } else {
-        if (el.parentNode !== Header.hover) {
-          $.add(Header.hover, el);
-        }
+        el = $.el((isVideo ? 'video' : 'img'));
+        el.dataset.fullID = post.fullID;
       }
       el.id = 'ihover';
-      el.dataset.fullID = post.fullID;
+      $.add(Header.hover, el);
       if (isVideo) {
         el.loop = true;
         el.controls = false;
-        el.muted = !Conf['Allow Sound'];
         if (Conf['Autoplay']) {
           el.play();
         }
       }
-      UI.hover({
+      maxWidth = Math.max(left, doc.clientWidth - right);
+      maxHeight = doc.clientHeight - 16;
+      scale = Math.min(1, maxWidth / width, maxHeight / height);
+      el.style.maxWidth = "" + (scale * width) + "px";
+      el.style.maxHeight = "" + (scale * height) + "px";
+      return UI.hover({
         root: this,
         el: el,
         latestEvent: e,
         endEvents: 'mouseout click',
-        asapTest: post.file.isImage ? function() {
-          return el.naturalHeight;
-        } : function() {
-          return el.readyState >= el.HAVE_CURRENT_DATA;
+        asapTest: function() {
+          return true;
         },
+        height: scale * height + padding,
+        noRemove: true,
         cb: function() {
+          $.off(el, 'error', error);
+          ImageCommon.pushCache(el);
           if (isVideo) {
             el.pause();
-            TrashQueue.add(el, post);
           }
-          return el.removeAttribute('id');
+          $.rm(el);
+          return el.removeAttribute('style');
         }
       });
-      return $.on(el, 'error', ImageHover.error);
     },
-    error: function() {
-      var URL, post, src, timeoutID;
-      if (!doc.contains(this)) {
-        return;
-      }
-      post = g.posts[this.dataset.fullID];
-      src = this.src.split('/');
-      if (src[2] === 'i.4cdn.org') {
-        URL = Redirect.to('file', {
-          boardID: src[3],
-          filename: src[4].replace(/\?.+$/, '')
-        });
-        if (URL) {
-          this.src = URL;
+    error: function(post) {
+      return function() {
+        if (ImageCommon.decodeError(this, post)) {
           return;
         }
-        if (g.DEAD || post.isDead || post.file.isDead) {
-          return;
-        }
-      }
-      timeoutID = setTimeout(((function(_this) {
-        return function() {
-          return _this.src = post.file.URL + '?' + Date.now();
-        };
-      })(this)), 3000);
-      return $.ajax(post.file.URL, {
-        onloadend: function() {
-          if (this.status !== 404) {
-            return;
-          }
-          clearTimeout(timeoutID);
-          return post.kill(true);
-        }
-      }, {
-        type: 'head'
-      });
+        return ImageCommon.error(this, post, 3 * $.SECOND, (function(_this) {
+          return function(URL) {
+            if (URL) {
+              return _this.src = URL + (_this.src === URL ? '?' + Date.now() : '');
+            } else {
+              return $.rm(_this);
+            }
+          };
+        })(this));
+      };
     }
   };
 

src/Images/ImageHover.coffee

@@ -1,5 +1,6 @@
 ImageHover =
   init: ->
+    return if g.VIEW not in ['index', 'thread']
     if Conf['Image Hover']
       Post.callbacks.push
         name: 'Image Hover'
@@ -8,82 +9,62 @@ ImageHover =
       CatalogThread.callbacks.push
         name: 'Image Hover'
         cb:   @catalogNode
+
   node: ->
-    return unless @file?.isImage or @file?.isVideo
+    return unless @file and (@file.isImage or @file.isVideo)
     $.on @file.thumb, 'mouseover', ImageHover.mouseover
+
   catalogNode: ->
-    return unless (file = @thread.OP.file) and (file.isImage or file.isVideo)
+    {file} = @thread.OP
+    return unless file and (file.isImage or file.isVideo)
     $.on @nodes.thumb, 'mouseover', ImageHover.mouseover
+
   mouseover: (e) ->
     post = if $.hasClass @, 'thumb'
       g.posts[@parentNode.dataset.fullID]
     else
       Get.postFromNode @
-    {isVideo} = post.file
-    el = $.el (if isVideo then 'video' else 'img'),
-      src: post.file.URL
-    {thumb} = post.file
-      
-    if d.body.contains thumb
-      $.after thumb, el unless el is thumb.nextSibling
+    {file}    = post
+    {isVideo} = file
+    return if file.isExpanding or file.isExpanded
+    error = ImageHover.error post
+    if ImageCommon.cache?.dataset.fullID is post.fullID
+      el = ImageCommon.popCache()
+      $.on el, 'error', error
     else
-      $.add Header.hover, el if el.parentNode isnt Header.hover
+      el = $.el (if isVideo then 'video' else 'img')
+      el.dataset.fullID = post.fullID
+
     el.id = 'ihover'
-    el.dataset.fullID = post.fullID
+    $.add Header.hover, el
     if isVideo
       el.loop     = true
       el.controls = false
-      el.muted    = not Conf['Allow Sound']
       el.play() if Conf['Autoplay']
+    maxWidth = Math.max left, doc.clientWidth - right
+    maxHeight = doc.clientHeight - 16
+    scale = Math.min 1, maxWidth / width, maxHeight / height
+    el.style.maxWidth = "#{scale * width}px"
+    el.style.maxHeight = "#{scale * height}px"
     UI.hover
       root: @
       el: el
       latestEvent: e
       endEvents: 'mouseout click'
-      asapTest: if post.file.isImage
-        -> el.naturalHeight
-      else
-        -> el.readyState >= el.HAVE_CURRENT_DATA
+      asapTest: -> true
+      height: scale * height + padding
+      noRemove: true
       cb: ->
-        if isVideo
-          el.pause()
-          TrashQueue.add el, post
-        el.removeAttribute 'id'
-    $.on el, 'error', ImageHover.error
-  error: ->
-    return unless doc.contains @
-    post = g.posts[@dataset.fullID]
+        $.off el, 'error', error
+        ImageCommon.pushCache el
+        el.pause() if isVideo
+        $.rm el
+        el.removeAttribute 'style'
 
-    src = @src.split '/'
-    if src[2] is 'i.4cdn.org'
-      URL = Redirect.to 'file',
-        boardID:  src[3]
-        filename: src[4].replace /\?.+$/, ''
+  error: (post) -> ->
+    return if ImageCommon.decodeError @, post
+    ImageCommon.error @, post, 3 * $.SECOND, (URL) =>
       if URL
-        @src = URL
-        return
-      if g.DEAD or post.isDead or post.file.isDead
-        return
-
-    timeoutID = setTimeout (=> @src = post.file.URL + '?' + Date.now()), 3000
-    <% if (type === 'crx') { %>
-    $.ajax post.file.URL,
-      onloadend: ->
-        return if @status isnt 404
-        clearTimeout timeoutID
-        post.kill true
-    ,
-      type: 'head'
-    <% } else { %>
-    # XXX CORS for i.4cdn.org WHEN?
-    $.ajax "//a.4cdn.org/#{post.board}/thread/#{post.thread}.json", onload: ->
-      return if @status isnt 200
-      for postObj in @response.posts
-        break if postObj.no is post.ID
-      if postObj.no isnt post.ID
-        clearTimeout timeoutID
-        post.kill()
-      else if postObj.filedeleted
-        clearTimeout timeoutID
-        post.kill true
-    <% } %>
+        @src = URL + if @src is URL then '?' + Date.now() else ''
+      else
+        $.rm @