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

WebM Gallery Mode.

Browse Source
This commit is contained in:
Zixaphir 2014-04-06 22:40:16 -07:00
parent 23cc92d7cc
commit 13605179cd
4 changed files with 69 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
builds/4chan-X.user.js
View File

File diff suppressed because one or more lines are too long

27
builds/crx/script.js
View File

File diff suppressed because one or more lines are too long

9
src/General/css/style.css
View File

@ -1471,18 +1471,13 @@ div.boardTitle {
margin: auto; margin: auto;
line-height: 0; line-height: 0;
} }
.gal-fit-width .gal-image video,
.gal-fit-width .gal-image img { .gal-fit-width .gal-image img {
max-width: 100%; max-width: 100%;
} }
.gal-fit-height .gal-image video,
.gal-fit-height .gal-image img { .gal-fit-height .gal-image img {
/*
Chrome doesn't support viewpoint units in calc()
http://bugs.chromium.org/168840
"It looks like the original author of viewport units in WebKit is not coming back to fix this stuff."
Well, fuck.
*/
max-height: 95vh; max-height: 95vh;
max-height: calc(100vh - 25px);
} }
.gal-buttons { .gal-buttons {
font-size: 2em; font-size: 2em;

55
src/Images/Gallery.coffee
View File

@ -33,21 +33,21 @@ Gallery =
nodes.el = dialog = $.el 'div', nodes.el = dialog = $.el 'div',
id: 'a-gallery' id: 'a-gallery'
innerHTML: """ innerHTML: """
<div class=gal-viewport> <div class=gal-viewport>
<span class=gal-buttons> <span class=gal-buttons>
<a class="menu-button" href="javascript:;"><i></i></a> <a class="menu-button" href="javascript:;"><i></i></a>
<a href=javascript:; class=gal-close>×</a> <a href=javascript:; class=gal-close>×</a>
</span> </span>
<a class=gal-name target="_blank"></a> <a class=gal-name target="_blank"></a>
<span class=gal-count><span class='count'></span> / <span class='total'></span></a></span> <span class=gal-count><span class='count'></span> / <span class='total'></span></a></span>
<div class=gal-prev></div> <div class=gal-prev></div>
<div class=gal-image> <div class=gal-image>
<a href=javascript:;><img></a> <a href=javascript:;><img></a>
</div> </div>
<div class=gal-next></div> <div class=gal-next></div>
</div> </div>
<div class=gal-thumbnails></div> <div class=gal-thumbnails></div>
""" """
nodes[key] = $ value, dialog for key, value of { nodes[key] = $ value, dialog for key, value of {
frame: '.gal-image' frame: '.gal-image'
@ -107,13 +107,14 @@ Gallery =
post = Get.postFromNode file post = Get.postFromNode file
title = ($ '.fileText a', file).textContent title = ($ '.fileText a', file).textContent
thumb = post.file.thumb.parentNode.cloneNode true thumb = post.file.thumb.parentNode.cloneNode true
if double = $ 'img + img', thumb if double = $ '* + *', thumb
$.rm double $.rm double
thumb.className = 'gal-thumb' thumb.className = 'gal-thumb'
thumb.title = title thumb.title = title
thumb.dataset.id = Gallery.images.length thumb.dataset.id = Gallery.images.length
thumb.dataset.post = $('a[title="Highlight this post"]', post.nodes.info).href thumb.dataset.post = $('a[title="Highlight this post"]', post.nodes.info).href
thumb.dataset.isVideo = true if post.file.isVideo
thumb.firstElementChild.style.cssText = '' thumb.firstElementChild.style.cssText = ''
$.on thumb, 'click', Gallery.cb.open $.on thumb, 'click', Gallery.cb.open
@ -148,14 +149,20 @@ Gallery =
$.rmClass el, 'gal-highlight' if el = $ '.gal-highlight', Gallery.thumbs $.rmClass el, 'gal-highlight' if el = $ '.gal-highlight', Gallery.thumbs
$.addClass @, 'gal-highlight' $.addClass @, 'gal-highlight'
img = $.el 'img', file = $.el (if @dataset.isVideo then 'video' else 'img'),
src: name.href = @href src: name.href = @href
title: name.download = name.textContent = @title title: name.download = name.textContent = @title
$.extend img.dataset, @dataset if @dataset.isVideo
$.replace nodes.current, img file.muted = !Conf['Allow Sound']
file.controls = Conf['Show Controls']
file.loop = true
file.autoplay = true
$.extend file.dataset, @dataset
$.replace nodes.current, file
nodes.count.textContent = +@dataset.id + 1 nodes.count.textContent = +@dataset.id + 1
nodes.current = img nodes.current = file
nodes.frame.scrollTop = 0 nodes.frame.scrollTop = 0
nodes.next.focus() nodes.next.focus()
@ -168,8 +175,8 @@ Gallery =
nodes.thumbs.scrollTop += top nodes.thumbs.scrollTop += top
$.on img, 'error', -> $.on file, 'error', ->
Gallery.cb.error img, thumb Gallery.cb.error file, thumb
image: (e) -> image: (e) ->
e.preventDefault() e.preventDefault()