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

implement slideshow mode for gallery

Browse Source
This commit is contained in:
ccd0 2014-07-05 07:47:45 -07:00
parent b22ea2b9cc
commit 642fe1b2d5
4 changed files with 88 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1410,20 +1410,35 @@ div.boardTitle {
background: rgba(0,0,0,0.6) !important;
border-radius: 3px;
}
.gal-buttons a {
color: #ffffff;
text-shadow: 0px 0px 1px #000000;
}
.gal-buttons i {
vertical-align: baseline;
border-top-width: .4em;
border-right-width: .25em;
border-left-width: .25em;
display: inline-block;
margin: 2px;
position: relative;
}
.gal-buttons .menu-button {
.gal-start i {
border-left: 10px solid;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
bottom: 1px;
}
.gal-stop i {
border: 5px solid;
bottom: 2px;
color: #ffffff;
text-shadow: 0px 0px 1px #000000;
}
.gal-close {
color: #ffffff;
text-shadow: 0px 0px 1px #000000;
.gal-buttons.gal-playing > .gal-start,
.gal-buttons:not(.gal-playing) > .gal-stop {
display: none;
}
.gal-buttons .menu-button i {
border-top-width: 10px;
border-right-width: 6px;
border-left-width: 6px;
bottom: 2px;
vertical-align: baseline;
}
.gal-buttons,
.gal-name,
@ -1445,12 +1460,10 @@ div.boardTitle {
color: white !important;
}
.gal-name:hover,
.gal-close:hover,
.gal-buttons .menu-button:hover {
.gal-buttons a:hover {
color: rgb(95, 95, 101) !important;
}
:root.gal-pdf .gal-close:hover,
:root.gal-pdf .gal-buttons .menu-button:hover {
:root.gal-pdf .gal-buttons a:hover {
color: rgb(204, 204, 204) !important;
}
.gal-count {

24
src/General/html/Features/Gallery.html
View File

@ -1,14 +1,16 @@
<div class=gal-viewport>
<span class=gal-buttons>
<a class="menu-button" href="javascript:;"><i></i></a>
<a href=javascript:; class=gal-close>×</a>
<div class="gal-viewport">
<span class="gal-buttons">
<a href="javascript:;" class="gal-start" title="Start slideshow"><i></i></a>
<a href="javascript:;" class="gal-stop" title="Stop slideshow"><i></i></a>
<a href="javascript:;" class="menu-button"><i></i></a>
<a href="javascript:;" class="gal-close">×</a>
</span>
<a class=gal-name target="_blank"></a>
<span class=gal-count><span class='count'></span> / <span class='total'></span></a></span>
<div class=gal-prev></div>
<div class=gal-image>
<a href=javascript:;><img></a>
<a class="gal-name" target="_blank"></a>
<span class="gal-count"><span class="count"></span> / <span class="total"></span></a></span>
<div class="gal-prev"></div>
<div class="gal-image">
<a href="javascript:;"><img></a>
</div>
<div class=gal-next></div>
<div class="gal-next"></div>
</div>
<div class=gal-thumbnails></div>
<div class="gal-thumbnails"></div>

50
src/Images/Gallery.coffee
View File

@ -17,6 +17,8 @@ Gallery =
name: 'Gallery'
cb: @node
interval: 5 * $.SECOND
node: ->
return unless @file
if Gallery.nodes
@ -29,19 +31,21 @@ Gallery =
build: (image) ->
Gallery.images = []
nodes = Gallery.nodes = {}
Gallery.slideshow = false
nodes.el = dialog = $.el 'div',
id: 'a-gallery'
innerHTML: <%= importHTML('Features/Gallery') %>
nodes[key] = $ value, dialog for key, value of {
frame: '.gal-image'
buttons: '.gal-buttons'
name: '.gal-name'
count: '.count'
total: '.total'
thumbs: '.gal-thumbnails'
frame: '.gal-image'
next: '.gal-image a'
current: '.gal-image img'
thumbs: '.gal-thumbnails'
}
menuButton = $ '.menu-button', dialog
@ -52,6 +56,8 @@ Gallery =
$.on nodes.next, 'click', cb.advance
$.on $('.gal-prev', dialog), 'click', cb.prev
$.on $('.gal-next', dialog), 'click', cb.next
$.on $('.gal-start', dialog), 'click', cb.start
$.on $('.gal-stop', dialog), 'click', cb.stop
$.on $('.gal-close', dialog), 'click', cb.close
$.on menuButton, 'click', (e) ->
@ -147,6 +153,7 @@ Gallery =
nodes.current = file
nodes.frame.scrollTop = 0
nodes.next.focus()
Gallery.cb.setupTimer() if Gallery.slideshow
# Scroll
rect = @getBoundingClientRect()
@ -206,7 +213,43 @@ Gallery =
pause: ->
{current} = Gallery.nodes
current[if current.paused then 'play' else 'pause']() if current.nodeType is 'VIDEO'
current[if current.paused then 'play' else 'pause']() if current.nodeName is 'VIDEO'
setupTimer: ->
clearTimeout Gallery.timeoutID
{current} = Gallery.nodes
isVideo = current.nodeName is 'VIDEO'
Video.start current if isVideo
return Gallery.cb.stop() if !Gallery.images[+Gallery.nodes.current.dataset.id + 1]
if (if isVideo then current.readyState > 4 else current.complete) or current.nodeName is 'IFRAME'
Gallery.cb.startTimer()
else
$.on current, (if isVideo then 'canplaythrough' else 'load'), Gallery.cb.startTimer
startTimer: ->
Gallery.timeoutID = setTimeout Gallery.cb.checkTimer, Gallery.interval
checkTimer: ->
{current} = Gallery.nodes
if current.nodeName is 'VIDEO' and !current.paused
$.on current, 'pause', Gallery.cb.next
current.loop = false
else
Gallery.cb.next()
start: ->
$.addClass Gallery.nodes.buttons, 'gal-playing'
Gallery.slideshow = true
Gallery.cb.setupTimer()
stop: ->
clearTimeout Gallery.timeoutID
{current} = Gallery.nodes
$.off current, 'canplaythrough load', Gallery.cb.startTimer
$.off current, 'pause', Gallery.cb.next
current.loop = true if current.nodeName is 'VIDEO'
$.rmClass Gallery.nodes.buttons, 'gal-playing'
Gallery.slideshow = false
close: ->
Gallery.nodes.current.pause?()
@ -216,6 +259,7 @@ Gallery =
$.off d, 'keydown', Gallery.cb.keybinds
$.on d, 'keydown', Keybinds.keydown
clearTimeout Gallery.timeoutID
setFitness: ->
(if @checked then $.addClass else $.rmClass) doc, "gal-#{@name.toLowerCase().replace /\s+/g, '-'}"

1
src/Images/Video.coffee
View File

@ -9,6 +9,7 @@ Video =
video.pause()
start: (video) ->
return unless video.paused
{controls} = video
video.controls = false
video.play()