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

Gallery stuff.

Browse Source
This commit is contained in:
Zixaphir 2013-08-23 14:37:20 -07:00
parent fafc46952f
commit 8c1ac1710a
6 changed files with 323 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

136
builds/crx/script.js
View File

File diff suppressed because one or more lines are too long

6
src/General/Config.coffee
View File

@ -396,6 +396,12 @@ Config =
false
'Advance to next post when contracting an expanded image.'
]
gallery:
# Gallery mostly gets its config from imageExpansion
'Hide thumbnails': [
false
]
threadWatcher:
'Current Board': [

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

@ -1097,7 +1097,6 @@ a:only-of-type > .remove {
<%= align %>-items: stretch;
<%= flex %>-direction: row;
<%= flex %>: 1 1 auto;
position: relative;
}
.gal-thumbnails {
<%= flex %>: 0 0 150px;
@ -1107,24 +1106,29 @@ a:only-of-type > .remove {
<%= align %>-items: stretch;
text-align: center;
}
.gal-thumbnails img {
.hide-thumbnails .gal-thumbnails {
display: none;
}
.gal-thumb img {
max-width: 125px;
max-height: 125px;
height: auto;
width: auto;
}
.gal-thumbnails a {
.gal-thumb {
<%= flex %>: 0 0 auto;
padding: 3px;
line-height: 0;
transition: background .3s linear;
background: rgba(0,0,0,.5);
border-left: 1px solid #222;
}
.gal-highlight {
background: rgb(190, 190, 255);
}
.gal-prev {
order: 0;
border-right: 1px solid #222;
}
.gal-next {
order: 2;
@ -1135,7 +1139,6 @@ a:only-of-type > .remove {
<%= flex %>: 0 0 20px;
position: relative;
cursor: pointer;
border-right: 1px solid #222;
opacity: 0.7;
background-color: rgba(0, 0, 0, 0.3);
}
@ -1167,30 +1170,46 @@ a:only-of-type > .remove {
display: <%= flex %>;
<%= align %>-items: flex-start;
<%= justify %>: space-around;
overflow: hidden;
overflow: auto;
/* Flex > Non-Flex child max-width and overflow fix (Firefox only?) */
width: 1%;
}
.gal-image a {
margin: auto;
line-height: 0;
}
.gal-image img {
.fit-width .gal-image img {
max-width: 100%;
max-height: 100vh;
}
.gal-close {
.fit-height .gal-image img {
max-height: calc(100vh - 25px);
}
.gal-buttons {
font-size: 2em;
padding-right: 8px;
position: fixed;
margin-right: 10px;
top: 5px;
right: 180px;
color: #ffffff;
text-shadow: 0px 0px 1px #000000;
}
.gal-name {
.gal-buttons i {
vertical-align: baseline;
border-top-width: .5em;
border-right-width: .3em;
border-left-width: .3em;
}
.gal-buttons,
.gal-name,
.gal-count {
position: fixed;
bottom: 5px;
right: 178px;
}
.hide-thumbnails .gal-buttons,
.hide-thumbnails .gal-count,
.hide-thumbnails .gal-name {
right: 28px;
}
.gal-name {
bottom: 5px;
background: rgba(0,0,0,0.6) !important;
border-radius: 3px;
padding: 1px 5px 2px 5px;
@ -1202,9 +1221,7 @@ a:only-of-type > .remove {
color: rgb(95, 95, 101) !important;
}
.gal-count {
position: fixed;
bottom: 26px;
right: 178px;
background: rgba(0,0,0,0.6) !important;
border-radius: 3px;
padding: 1px 5px 2px 5px;

116
src/Images/Gallery.coffee
View File

@ -19,19 +19,25 @@ Gallery =
node: ->
return unless @file?.isImage
if Gallery.el
if Gallery.nodes
Gallery.generateThumb $ '.file', @nodes.root
Gallery.total.textContent = Gallery.images.length
Gallery.nodes.total.textContent = Gallery.images.length
unless Conf['Image Expansion']
$.on @file.thumb.parentNode, 'click', Gallery.cb.image
build: (image) ->
Gallery.el = dialog = $.el 'div',
Gallery.images = []
nodes = Gallery.nodes = {}
nodes.el = dialog = $.el 'div',
id: 'a-gallery'
innerHTML: """
<div class=gal-viewport>
<a href=javascript:; class=gal-close>×</a>
<span class=gal-buttons>
<a class="menu-button" href="javascript:;"><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>
@ -42,7 +48,8 @@ Gallery =
</div>
<div class=gal-thumbnails></div>
"""
Gallery[key] = $ value, dialog for key, value of {
nodes[key] = $ value, dialog for key, value of {
frame: '.gal-image'
name: '.gal-name'
count: '.count'
@ -51,27 +58,42 @@ Gallery =
next: '.gal-image a'
current: '.gal-image img'
}
menuButton = $ '.menu-button', dialog
nodes.menu = new UI.Menu 'gallery'
Gallery.images = []
{cb} = Gallery
$.on nodes.frame, 'click', cb.blank
$.on nodes.current, 'click', cb.download
$.on nodes.next, 'click', cb.next
$.on ($ '.gal-prev', dialog), 'click', cb.prev
$.on ($ '.gal-next', dialog), 'click', cb.next
$.on ($ '.gal-close', dialog), 'click', cb.close
$.on Gallery.frame, 'click', Gallery.cb.blank
$.on Gallery.current, 'click', Gallery.cb.download
$.on Gallery.next, 'click', Gallery.cb.next
$.on ($ '.gal-prev', dialog), 'click', Gallery.cb.prev
$.on ($ '.gal-next', dialog), 'click', Gallery.cb.next
$.on ($ '.gal-close', dialog), 'click', Gallery.cb.close
$.on menuButton, 'click', (e) ->
nodes.menu.toggle e, @, g
$.on d, 'keydown', Gallery.cb.keybinds
{createSubEntry} = Gallery.menu
for name in ['Fit width', 'Fit height', 'Hide thumbnails']
{el} = createSubEntry name
$.event 'AddMenuEntry',
type: 'gallery'
el: el
order: 0
$.on d, 'keydown', cb.keybinds
$.off d, 'keydown', Keybinds.keydown
i = 0
files = $$ '.post .file'
while file = files[i++]
continue if $ '.fileDeletedRes, .fileDeleted', file
Gallery.generateThumb file
$.add d.body, dialog
Gallery.thumbs.scrollTop = 0
Gallery.current.parentElement.scrollTop = 0
nodes.thumbs.scrollTop = 0
nodes.current.parentElement.scrollTop = 0
Gallery.cb.open.call if image
$ "[href='#{image.href.replace /https?:/, ''}']", Gallery.thumbs
@ -79,7 +101,7 @@ Gallery =
Gallery.images[0]
d.body.style.overflow = 'hidden'
Gallery.total.textContent = --i
nodes.total.textContent = --i
generateThumb: (file) ->
title = ($ '.fileText a', file).textContent
@ -87,7 +109,7 @@ Gallery =
if double = $ 'img + img', thumb
$.rm double
thumb.className = 'a-thumb'
thumb.className = 'gal-thumb'
thumb.title = title
thumb.dataset.id = Gallery.images.length
thumb.firstElementChild.style.cssText = ''
@ -95,7 +117,7 @@ Gallery =
$.on thumb, 'click', Gallery.cb.open
Gallery.images.push thumb
$.add Gallery.thumbs, thumb
$.add Gallery.nodes.thumbs, thumb
cb:
keybinds: (e) ->
@ -116,35 +138,67 @@ Gallery =
open: (e) ->
e.preventDefault() if e
{nodes} = Gallery
{name} = nodes
$.rmClass el, 'gal-highlight' if el = $ '.gal-highlight', Gallery.thumbs
$.addClass @, 'gal-highlight'
img = $.el 'img',
src: Gallery.name.href = @href
title: Gallery.name.download = Gallery.name.textContent = @title
src: name.href = @href
title: name.download = name.textContent = @title
img.dataset.id = @dataset.id
$.replace Gallery.current, img
Gallery.count.textContent = +@dataset.id + 1
Gallery.current = img
Gallery.frame.scrollTop = 0
Gallery.current.focus()
$.replace nodes.current, img
nodes.count.textContent = +@dataset.id + 1
nodes.current = img
nodes.frame.scrollTop = 0
nodes.current.focus()
image: (e) ->
e.preventDefault()
e.stopPropagation()
Gallery.build @
prev: -> Gallery.cb.open.call Gallery.images[+Gallery.current.dataset.id - 1]
next: -> Gallery.cb.open.call Gallery.images[+Gallery.current.dataset.id + 1]
toggle: -> (if Gallery.el then Gallery.cb.close else Gallery.build)()
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]
toggle: -> (if Gallery.nodes then Gallery.cb.close else Gallery.build)()
blank: (e) -> Gallery.cb.close() if e.target is @
close: ->
$.rm Gallery.el
delete Gallery.el
$.rm Gallery.nodes.el
delete Gallery.nodes
d.body.style.overflow = ''
$.off d, 'keydown', Gallery.cb.keybinds
$.on d, 'keydown', Keybinds.keydown
$.on d, 'keydown', Keybinds.keydown
menu:
init: ->
return if g.VIEW is 'catalog' or !Conf['Gallery'] or Conf['Image Expansion']
el = $.el 'span',
textContent: 'Gallery'
className: 'gallery-link'
{createSubEntry} = Gallery.menu
subEntries = []
for name in ['Fit width', 'Fit height', 'Hide thumbnails']
subEntries.push createSubEntry name
$.event 'AddMenuEntry',
type: 'header'
el: el
order: 105
subEntries: subEntries
createSubEntry: (name) ->
label = $.el 'label',
innerHTML: "<input type=checkbox name='#{name}'> #{name}"
input = label.firstElementChild
# Reusing ImageExpand here because this code doesn't need any auditing to work for what we need
$.on input, 'change', ImageExpand.cb.setFitness
input.checked = Conf[name]
$.event 'change', null, input
$.on input, 'change', $.cb.checked
el: label

3
src/Images/ImageExpand.coffee
View File

@ -189,6 +189,3 @@ ImageExpand =
$.event 'change', null, input
$.on input, 'change', $.cb.checked
el: label
menuToggle: (e) ->
ImageExpand.opmenu.toggle e, @, g