compute height in Javascript to avoid hovered image jumping
This commit is contained in:
parent
194e869f29
commit
62a242e100
@ -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
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
@ -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 @
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user