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

Use vh for image expansion's "Fit height" on Chrome and Firefox.

Browse Source 
Should give much better performance when resizing for example.
This commit is contained in:
Mayhem 2013-05-21 21:07:41 +02:00
parent a2ac3d73e1
commit b5caa77df8
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/style.css
View File

@ -532,6 +532,9 @@ a.hide-announcement {
clear: both; clear: both;
display: table; display: table;
} }
:root.fit-height .full-image {
max-height: 100vh;
}
:root.fit-width .full-image { :root.fit-width .full-image {
max-width: 100%; max-width: 100%;
} }

13
src/Images/ImageExpand.coffee
View File

@ -51,16 +51,20 @@ ImageExpand =
$.queueTask func, post $.queueTask func, post
return return
setFitness: -> setFitness: ->
{checked} = @ (if @checked then $.addClass else $.rmClass) doc, @name.toLowerCase().replace /\s+/g, '-'
(if checked then $.addClass else $.rmClass) doc, @name.toLowerCase().replace /\s+/g, '-' <% if (type === 'userjs') { %>
# XXX Opera doesn't support CSS vh.
return unless @name is 'Fit height' return unless @name is 'Fit height'
if checked if @checked
$.on window, 'resize', ImageExpand.resize $.on window, 'resize', ImageExpand.resize
unless ImageExpand.style unless ImageExpand.style
ImageExpand.style = $.addStyle null ImageExpand.style = $.addStyle null
ImageExpand.resize() ImageExpand.resize()
else else
$.off window, 'resize', ImageExpand.resize $.off window, 'resize', ImageExpand.resize
resize: ->
ImageExpand.style.textContent = ":root.fit-height .full-image {max-height:#{doc.clientHeight}px}"
<% } %>
toggle: (post) -> toggle: (post) ->
{thumb} = post.file {thumb} = post.file
@ -189,6 +193,3 @@ ImageExpand =
$.event 'change', null, input $.event 'change', null, input
$.on input, 'change', $.cb.checked $.on input, 'change', $.cb.checked
el: label el: label
resize: ->
ImageExpand.style.textContent = ":root.fit-height .full-image {max-height:#{doc.clientHeight}px}"