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

add .webm, .pdf support to gallery

Browse Source
This commit is contained in:
ccd0 2014-04-09 02:55:32 -07:00
parent cde38b64dd
commit 60f869d818
6 changed files with 167 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
LICENSE
View File

@ -1,5 +1,5 @@
/*
* 4chan X - Version 1.7.4 - 2014-04-08
* 4chan X - Version 1.7.4 - 2014-04-09
*
* Licensed under the MIT license.
* https://github.com/ccd0/4chan-x/blob/master/LICENSE

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

File diff suppressed because one or more lines are too long

68
builds/crx/script.js
View File

File diff suppressed because one or more lines are too long

4
src/General/Config.coffee
View File

@ -155,6 +155,10 @@ Config =
true
'Adds a simple and cute image gallery.'
]
'PDF in Gallery': [
false
'Show PDF files in gallery.'
]
'Sauce': [
true
'Add sauce links to images.'

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

@ -1364,20 +1364,26 @@ div.boardTitle {
/* Flex > Non-Flex child max-width and overflow fix (Firefox only?) */
width: 1%;
}
:root:not(.gal-fit-height) .gal-image {
:root:not(.gal-fit-height):not(.gal-pdf) .gal-image {
overflow-y: scroll !important;
}
:root:not(.gal-fit-width) .gal-image {
:root:not(.gal-fit-width):not(.gal-pdf) .gal-image {
overflow-x: scroll !important;
}
.gal-image a {
margin: auto;
line-height: 0;
}
.gal-fit-width .gal-image img {
:root.gal-pdf .gal-image a {
width: 100%;
height: 100%;
}
.gal-fit-width .gal-image img,
.gal-fit-width .gal-image video {
max-width: 100%;
}
.gal-fit-height .gal-image img {
.gal-fit-height .gal-image img,
.gal-fit-height .gal-image video {
/*
Chrome doesn't support viewpoint units in calc()
http://bugs.chromium.org/168840
@ -1387,11 +1393,22 @@ div.boardTitle {
max-height: 95vh;
max-height: calc(100vh - 25px);
}
.gal-image iframe {
width: 100%;
height: 100%;
}
.gal-buttons {
font-size: 2em;
margin-right: 10px;
margin-right: 3px;
padding-left: 7px;
padding-right: 7px;
top: 5px;
}
:root.gal-pdf .gal-buttons {
top: 40px;
background: rgba(0,0,0,0.6) !important;
border-radius: 3px;
}
.gal-buttons i {
vertical-align: baseline;
border-top-width: .4em;
@ -1411,12 +1428,12 @@ div.boardTitle {
.gal-name,
.gal-count {
position: fixed;
right: 178px;
right: 195px;
}
.gal-hide-thumbnails .gal-buttons,
.gal-hide-thumbnails .gal-count,
.gal-hide-thumbnails .gal-name {
right: 28px;
right: 44px;
}
.gal-name {
bottom: 6px;
@ -1431,6 +1448,10 @@ div.boardTitle {
.gal-buttons .menu-button:hover {
color: rgb(95, 95, 101) !important;
}
:root.gal-pdf .gal-close:hover,
:root.gal-pdf .gal-buttons .menu-button:hover {
color: rgb(204, 204, 204) !important;
}
.gal-count {
bottom: 27px;
background: rgba(0,0,0,0.6) !important;
@ -1438,21 +1459,21 @@ div.boardTitle {
padding: 1px 5px 2px 5px;
color: #ffffff !important;
}
:root:not(.gal-fit-width) .gal-name {
:root:not(.gal-fit-width):not(.gal-pdf) .gal-name {
bottom: 23px !important;
}
:root:not(.gal-fit-width) .gal-count {
:root:not(.gal-fit-width):not(.gal-pdf) .gal-count {
bottom: 44px !important;
}
:root:not(.gal-fit-height):not(.gal-hide-thumbnails) .gal-buttons,
:root:not(.gal-fit-height):not(.gal-hide-thumbnails) .gal-name,
:root:not(.gal-fit-height):not(.gal-hide-thumbnails) .gal-count {
right: 195px !important;
:root.gal-fit-height:not(.gal-pdf):not(.gal-hide-thumbnails) .gal-buttons,
:root.gal-fit-height:not(.gal-pdf):not(.gal-hide-thumbnails) .gal-name,
:root.gal-fit-height:not(.gal-pdf):not(.gal-hide-thumbnails) .gal-count {
right: 178px !important;
}
:root.gal-hide-thumbnails:not(.gal-fit-height) .gal-buttons,
:root.gal-hide-thumbnails:not(.gal-fit-height) .gal-name,
:root.gal-hide-thumbnails:not(.gal-fit-height) .gal-count {
right: 44px !important;
:root.gal-hide-thumbnails:.gal-fit-height:not(.gal-pdf) .gal-buttons,
:root.gal-hide-thumbnails:.gal-fit-height:not(.gal-pdf) .gal-name,
:root.gal-hide-thumbnails:.gal-fit-height:not(.gal-pdf) .gal-count {
right: 28px !important;
}
@media screen and (resolution: 1dppx) {
.fa-bars {

33
src/Images/Gallery.coffee
View File

@ -18,7 +18,7 @@ Gallery =
cb: @node
node: ->
return unless @file?.isImage
return unless @file
if Gallery.nodes
Gallery.generateThumb $ '.file', @nodes.root
Gallery.nodes.total.textContent = Gallery.images.length
@ -64,8 +64,7 @@ Gallery =
{cb} = Gallery
$.on nodes.frame, 'click', cb.blank
$.on nodes.current, 'click', cb.download
$.on nodes.next, 'click', cb.next
$.on nodes.next, 'click', cb.advance
$.on ($ '.gal-prev', dialog), 'click', cb.prev
$.on ($ '.gal-next', dialog), 'click', cb.next
$.on ($ '.gal-close', dialog), 'click', cb.close
@ -105,6 +104,7 @@ Gallery =
generateThumb: (file) ->
post = Get.postFromNode file
return unless post.file and (post.file.isImage or post.file.isVideo or Conf['PDF in Gallery'])
title = ($ '.fileText a', file).textContent
thumb = $.el 'a',
className: 'gal-thumb'
@ -130,8 +130,10 @@ Gallery =
cb = switch key
when 'Esc', Conf['Open Gallery']
Gallery.cb.close
when 'Right', 'Enter'
when 'Right'
Gallery.cb.next
when 'Enter'
Gallery.cb.advance
when 'Left', ''
Gallery.cb.prev
@ -150,11 +152,20 @@ Gallery =
$.rmClass el, 'gal-highlight' if el = $ '.gal-highlight', Gallery.thumbs
$.addClass @, 'gal-highlight'
img = $.el 'img',
elType = 'img'
elType = 'video' if /\.webm$/.test(@href)
elType = 'iframe' if /\.pdf$/.test(@href)
(if elType is 'iframe' then $.addClass else $.rmClass) doc, 'gal-pdf'
img = $.el elType,
src: name.href = @href
title: name.download = name.textContent = @title
if elType is 'video'
img.loop = true
img.autoplay = Conf['Autoplay']
img.muted = !Conf['Allow Sound']
$.extend img.dataset, @dataset
nodes.current.pause?()
$.replace nodes.current, img
nodes.count.textContent = +@dataset.id + 1
nodes.current = img
@ -183,18 +194,14 @@ Gallery =
delete post.file.fullImage
src = @src.split '/'
if src[2] is 'images.4chan.org'
if src[2] is 'i.4cdn.org'
URL = Redirect.to 'file',
boardID: src[3]
filename: src[5]
if URL
thumb.href = URL
return unless Gallery.nodes.current is img
revived = $.el 'img',
src: URL
title: img.title
$.extend revived.dataset, img.dataset
$.replace img, revived
img.src = URL
return
if g.DEAD or post.isDead or post.file.isDead
return
@ -213,10 +220,14 @@ Gallery =
prev: -> Gallery.cb.open.call Gallery.images[+Gallery.nodes.current.dataset.id - 1]
next: -> Gallery.cb.open.call Gallery.images[+Gallery.nodes.current.dataset.id + 1]
advance:-> if Gallery.nodes.current.paused then Gallery.nodes.current.play() else Gallery.cb.next()
pause: -> if Gallery.nodes.current.nodeType is 'VIDEO'
if Gallery.nodes.current.paused then Gallery.nodes.current.play() else Gallery.nodes.current.pause()
toggle: -> (if Gallery.nodes then Gallery.cb.close else Gallery.build)()
blank: (e) -> Gallery.cb.close() if e.target is @
close: ->
Gallery.nodes.current.pause?()
$.rm Gallery.nodes.el
delete Gallery.nodes
d.body.style.overflow = ''