Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow image hover previews to use full width of screen.

Browse Source
This commit is contained in:
ccd0 2019-03-17 05:42:50 -07:00
parent cafb7250c7
commit fafdc4fa44
3 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/General/UI.coffee
View File

@ -308,7 +308,7 @@ dragend = ->
$.off d, 'mouseup', @up $.off d, 'mouseup', @up
$.set "#{@id}.position", @style.cssText $.set "#{@id}.position", @style.cssText
hoverstart = ({root, el, latestEvent, endEvents, height, cb, noRemove}) -> hoverstart = ({root, el, latestEvent, endEvents, height, width, cb, noRemove}) ->
o = { o = {
root root
el el
@ -320,6 +320,7 @@ hoverstart = ({root, el, latestEvent, endEvents, height, cb, noRemove}) ->
clientHeight: doc.clientHeight clientHeight: doc.clientHeight
clientWidth: doc.clientWidth clientWidth: doc.clientWidth
height height
width
noRemove noRemove
} }
o.hover = hover.bind o o.hover = hover.bind o
@ -344,6 +345,7 @@ hoverstart.padding = 25
hover = (e) -> hover = (e) ->
@latestEvent = e @latestEvent = e
height = (@height or @el.offsetHeight) + hoverstart.padding height = (@height or @el.offsetHeight) + hoverstart.padding
width = (@width or @el.offsetWidth)
{clientX, clientY} = e {clientX, clientY} = e
top = if @isImage top = if @isImage
@ -353,10 +355,10 @@ hover = (e) ->
threshold = @clientWidth / 2 threshold = @clientWidth / 2
threshold = Math.max threshold, @clientWidth - 400 unless @isImage threshold = Math.max threshold, @clientWidth - 400 unless @isImage
[left, right] = if clientX <= threshold marginX = (if clientX <= threshold then clientX else @clientWidth - clientX) + 45
[clientX + 45 + 'px', ''] marginX = Math.min(marginX, @clientWidth - width) if @isImage
else marginX += 'px'
['', @clientWidth - clientX + 45 + 'px'] [left, right] = if clientX <= threshold then [marginX, ''] else ['', marginX]
{style} = @ {style} = @
style.top = top + 'px' style.top = top + 'px'

3
src/Images/ImageHover.coffee
View File

@ -48,7 +48,7 @@ ImageHover =
@currentTime = el.currentTime if @nodeName is 'VIDEO' @currentTime = el.currentTime if @nodeName is 'VIDEO'
[width, height] = (+x for x in file.dimensions.split 'x') [width, height] = (+x for x in file.dimensions.split 'x')
{left, right} = @getBoundingClientRect() {left, right} = @getBoundingClientRect()
maxWidth = Math.max left, doc.clientWidth - right maxWidth = doc.clientWidth
maxHeight = doc.clientHeight - UI.hover.padding maxHeight = doc.clientHeight - UI.hover.padding
scale = Math.min 1, maxWidth / width, maxHeight / height scale = Math.min 1, maxWidth / width, maxHeight / height
el.style.maxWidth = "#{scale * width}px" el.style.maxWidth = "#{scale * width}px"
@ -59,6 +59,7 @@ ImageHover =
latestEvent: e latestEvent: e
endEvents: 'mouseout click' endEvents: 'mouseout click'
height: scale * height height: scale * height
width: scale * width
noRemove: true noRemove: true
cb: -> cb: ->
$.off el, 'error', error $.off el, 'error', error

3
src/css/style.css
View File

@ -1344,6 +1344,9 @@ span.hide-announcement {
.fileThumb > .warning { .fileThumb > .warning {
clear: both; clear: both;
} }
#ihover {
pointer-events: none;
}
/* WEBM Metadata */ /* WEBM Metadata */
.webm-title > a::before { .webm-title > a::before {
content: "title"; content: "title";