refactoring in ImageExpand

src/General/lib/clone.class

@@ -58,19 +58,14 @@ class Clone extends Post
       @file.text  = file.firstElementChild
       @file.thumb = $ 'img[data-md5]', file
       @file.fullImage = $ '.full-image', file
+      @file.videoControls = $ '.video-controls', @file.text
 
       # Contract thumbnails in quote preview
-      if contractThumb
+      ImageExpand.contract @ if contractThumb
-        $.rmClass root, 'expanded-image'
-        $.rmClass @file.thumb, 'expanding'
-      @file.isExpanded = $.hasClass root, 'expanded-image'
 
       # Remove any #ihover ID
       @file.fullImage?.removeAttribute 'id'
 
-      # Remove video controls.
-      ($ '.video-controls', @file.text)?.remove()
-
     @isDead  = true if origin.isDead
     @isClone = true
     root.dataset.clone = origin.clones.push(@) - 1

src/Images/ImageExpand.coffee

@@ -14,32 +14,30 @@ ImageExpand =
     Post.callbacks.push
       name: 'Image Expansion'
       cb: @node
+
   node: ->
-    return unless @file?.isImage or @file?.isVideo
+    return unless @file and (@file.isImage or @file.isVideo)
-    {thumb} = @file
+    $.on @file.thumb.parentNode, 'click', ImageExpand.cb.toggle
-    $.on thumb.parentNode, 'click', ImageExpand.cb.toggle
     if @isClone 
-      if $.hasClass thumb, 'expanding'
+      if @file.isExpanding
         # If we clone a post where the image is still loading,
         # make it loading in the clone too.
         ImageExpand.contract @
         ImageExpand.expand @
-
       else if @file.isExpanded and @file.isVideo
-        ImageExpand.setupVideoControls @
+        ImageExpand.setupVideoCB @
-        if !@origin.file.fullImage.paused or @origin.file.wasPlaying
+        ImageExpand.play @ if !@origin.file.fullImage?.paused or @origin.file.wasPlaying
-          $.queueTask => ImageExpand.play @
-
-      return
     else if ImageExpand.on and !@isHidden and
       (Conf['Expand spoilers'] or !@file.isSpoiler) and
       (Conf['Expand videos'] or !@file.isVideo)
         ImageExpand.expand @
+
   cb:
     toggle: (e) ->
       return if e.shiftKey or e.altKey or e.ctrlKey or e.metaKey or e.button isnt 0
       post = Get.postFromNode @
-      return if post.file.isExpanded and post.file.fullImage?.controls
+      {file} = post
+      return if file.isExpanded and file.isVideo and file.fullImage.controls
       e.preventDefault()
       ImageExpand.toggle post
 
@@ -85,7 +83,7 @@ ImageExpand =
       (if @checked then $.addClass else $.rmClass) doc, @name.toLowerCase().replace /\s+/g, '-'
 
   toggle: (post) ->
-    unless post.file.isExpanded or $.hasClass post.file.thumb, 'expanding'
+    unless post.file.isExpanding or post.file.isExpanded
       ImageExpand.expand post
       return
 
@@ -114,28 +112,26 @@ ImageExpand =
     ImageExpand.contract post
 
   contract: (post) ->
-    {thumb} = post.file
+    {file} = post
-    if el = post.file.fullImage
-      $.off el, 'error', ImageExpand.error
-    if el and post.file.isVideo
-      el.pause()
-      TrashQueue.add el, post
-      thumb.parentNode.href   = el.src
-      thumb.parentNode.target = '_blank'
-      for eventName, cb of ImageExpand.videoCB
-        $.off el, eventName, cb
-      if post.file.videoControls
-        $.rm   post.file.videoControls
-        delete post.file.videoControls
     $.rmClass post.nodes.root, 'expanded-image'
-    $.rmClass thumb, 'expanding'
+    $.rmClass file.thumb,      'expanding'
-    delete post.file.isExpanded
+    $.rm file.videoControls if file.videoControls
-    delete post.file.wasPlaying
+    for x in ['isExpanding', 'isExpanded', 'videoControls', 'wasPlaying']
+      delete file[x]
+    if el = file.fullImage
+      $.off el, 'error', ImageExpand.error
+      if file.isVideo
+        el.pause()
+        TrashQueue.add el, post
+        for eventName, cb of ImageExpand.videoCB
+          $.off el, eventName, cb
+        return
 
   expand: (post, src) ->
     # Do not expand images of hidden/filtered replies, or already expanded pictures.
     {thumb, isVideo} = post.file
-    return if post.isHidden or post.file.isExpanded or $.hasClass thumb, 'expanding'
+    return if post.isHidden or post.file.isExpanding or post.file.isExpanded
+    post.file.isExpanding = true
     $.addClass thumb, 'expanding'
     el = post.file.fullImage or $.el (if isVideo then 'video' else 'img'), className: 'full-image'
     $.on el, 'error', ImageExpand.error
@@ -147,38 +143,52 @@ ImageExpand =
       $.after thumb, el
       post.file.fullImage = el
     $.asap (-> if isVideo then el.readyState >= el.HAVE_CURRENT_DATA else el.naturalHeight), ->
-      ImageExpand.completeExpand post
+      if post.nodes.root.parentNode
+        {bottom} = post.nodes.root.getBoundingClientRect()
+        $.queueTask -> ImageExpand.completeExpand post, bottom
+      else
+        # Image might start/finish loading before the post is inserted; don't scroll.
+        ImageExpand.completeExpand post
 
-  completeExpand: (post) ->
+  completeExpand: (post, oldBottom) ->
-    return unless $.hasClass post.file.thumb, 'expanding' # contracted before the image loaded
+    {file} = post
-    unless post.nodes.root.parentNode
+    return unless file.isExpanding # contracted before the image loaded
-      # Image might start/finish loading before the post is inserted.
-      # Don't scroll when it's expanded in a QP for example.
-      ImageExpand.completeExpand2 post
-      return
-    {bottom} = post.nodes.root.getBoundingClientRect()
-    $.queueTask ->
-      ImageExpand.completeExpand2 post
-      return unless bottom <= 0
-      window.scrollBy 0, post.nodes.root.getBoundingClientRect().bottom - bottom
 
-  completeExpand2: (post) ->
+    $.rmClass  file.thumb,      'expanding'
     $.addClass post.nodes.root, 'expanded-image'
-    $.rmClass  post.file.thumb, 'expanding'
+    delete file.isExpanding
-    post.file.isExpanded = true
+    file.isExpanded = true
-    if post.file.isVideo
+
-      ImageExpand.setupVideoControls post
+    if file.isVideo
-      video = post.file.fullImage
+      if Conf['Show Controls']
+        # disable link to file so native controls can work
+        file.thumb.parentNode.removeAttribute 'href'
+        file.thumb.parentNode.removeAttribute 'target'
+
+        # setup controls in file info
+        file.videoControls = ImageExpand.videoControls.cloneNode true
+        $.add file.text, file.videoControls
+
+      video = file.fullImage
       video.loop = true
       video.controls = Conf['Show Controls']
+      ImageExpand.setupVideoCB post
       ImageExpand.play post if Conf['Autoplay']
 
+    # Scroll to keep our place in the thread when images are expanded above us.
+    if oldBottom? and oldBottom <= 0
+      window.scrollBy 0, post.nodes.root.getBoundingClientRect().bottom - oldBottom
+
   play: (post) ->
     if !d.hidden and Header.isNodeVisible post.file.fullImage
       Video.start post.file.fullImage
     else
       post.file.wasPlaying = true
 
+  videoControls: $.el 'span',
+    className: 'video-controls'
+    innerHTML: '\u00A0<a href="javascript:;" title="You can also contract the video by dragging it to the left.">contract</a>'
+
   videoCB: do ->
     # dragging to the left contracts the video
     mousedown = false
@@ -191,28 +201,11 @@ ImageExpand =
         @play()
         e.stopPropagation()
 
-  setupVideoControls: (post) ->
+  setupVideoCB: (post) ->
-    {file}  = post
+    for eventName, cb of ImageExpand.videoCB
-    video   = file.fullImage
+      $.on post.file.fullImage, eventName, cb
-
+    if {videoControls} = post.file
-    # disable link to file so native controls can work
+      $.on videoControls.firstElementChild, 'click', -> ImageExpand.contract post
-    file.thumb.parentNode.removeAttribute 'href'
-    file.thumb.parentNode.removeAttribute 'target'
-
-    # setup callbacks on video element
-    $.on video, eventName, cb for eventName, cb of ImageExpand.videoCB
-
-    # setup controls in file info
-    file.videoControls = $.el 'span',
-      className: 'video-controls'
-    if Conf['Show Controls']
-      contract = $.el 'a',
-        textContent: 'contract'
-        href: 'javascript:;'
-        title: 'You can also contract the video by dragging it to the left.'
-      $.on contract, 'click', (e) -> ImageExpand.contract post
-      $.add file.videoControls, [$.tn('\u00A0'), contract]
-    $.add file.text, file.videoControls
 
   error: ->
     post = Get.postFromNode @
@@ -221,7 +214,7 @@ ImageExpand =
     # Images can error:
     #  - before the image started loading.
     #  - after the image started loading.
-    unless $.hasClass(post.file.thumb, 'expanding') or $.hasClass post.nodes.root, 'expanded-image'
+    unless post.file.isExpanding or post.file.isExpanded
       # Don't try to re-expand if it was already contracted.
       return
     ImageExpand.contract post