compute height in Javascript to avoid hovered image jumping

This commit is contained in:
ccd0 2014-09-25 22:25:29 -07:00
parent 194e869f29
commit 62a242e100
3 changed files with 14 additions and 10 deletions

View File

@ -302,7 +302,7 @@ UI = do ->
$.off d, 'mouseup', @up $.off d, 'mouseup', @up
$.set "#{@id}.position", @style.cssText $.set "#{@id}.position", @style.cssText
hoverstart = ({root, el, latestEvent, endEvents, asapTest, cb, noRemove}) -> hoverstart = ({root, el, latestEvent, endEvents, asapTest, height, cb, noRemove}) ->
o = { o = {
root root
el el
@ -313,6 +313,7 @@ UI = do ->
latestEvent latestEvent
clientHeight: doc.clientHeight clientHeight: doc.clientHeight
clientWidth: doc.clientWidth clientWidth: doc.clientWidth
height
noRemove noRemove
} }
o.hover = hover.bind o o.hover = hover.bind o
@ -335,7 +336,7 @@ UI = do ->
hover = (e) -> hover = (e) ->
@latestEvent = e @latestEvent = e
height = @el.offsetHeight height = @height or @el.offsetHeight
{clientX, clientY} = e {clientX, clientY} = e
top = if @isImage top = if @isImage

View File

@ -837,13 +837,6 @@ span.hide-announcement {
.fileThumb > .warning { .fileThumb > .warning {
clear: both; clear: both;
} }
#ihover {
-moz-box-sizing: border-box;
box-sizing: border-box;
max-height: 100%;
max-width: 75%;
padding-bottom: 16px;
}
/* Fappe Tyme */ /* Fappe Tyme */
:root.fappeTyme .thread > .noFile, :root.fappeTyme .thread > .noFile,
:root.fappeTyme .threadContainer > .noFile { :root.fappeTyme .threadContainer > .noFile {

View File

@ -31,18 +31,28 @@ ImageHover =
el.loop = true el.loop = true
el.controls = false el.controls = false
el.play() if Conf['Autoplay'] el.play() if Conf['Autoplay']
[width, height] = file.dimensions.split('x').map (x) -> +x
{left, right} = file.thumb.getBoundingClientRect()
padding = 16
maxWidth = Math.max left, doc.clientWidth - right
maxHeight = doc.clientHeight - padding
scale = Math.min 1, maxWidth / width, maxHeight / height
el.style.maxWidth = "#{scale * width}px"
el.style.maxHeight = "#{scale * height}px"
UI.hover UI.hover
root: @ root: @
el: el el: el
latestEvent: e latestEvent: e
endEvents: 'mouseout click' endEvents: 'mouseout click'
asapTest: -> (if isVideo then el.readyState >= el.HAVE_CURRENT_DATA else el.naturalHeight) asapTest: -> true
height: scale * height + padding
noRemove: true noRemove: true
cb: -> cb: ->
if isVideo if isVideo
el.pause() el.pause()
TrashQueue.add el, post TrashQueue.add el, post
el.removeAttribute 'id' el.removeAttribute 'id'
el.removeAttribute 'style'
$.queueTask -> delete file.isHovered $.queueTask -> delete file.isHovered
error: -> error: ->
post = Get.postFromNode @ post = Get.postFromNode @