Port Appchan's Gallery
This commit is contained in:
Zixaphir
parent
ccc0335b79
commit
8e4d88eb16
@ -144,6 +144,20 @@ module.exports = (grunt) ->
|
||||
pkg = grunt.config 'pkg'
|
||||
pkg.type = type
|
||||
grunt.config 'pkg', pkg
|
||||
|
||||
if type is 'crx'
|
||||
pkg.flex = '-webkit-flex'
|
||||
pkg.order = '-webkit-order'
|
||||
pkg.align = '-webkit-align'
|
||||
pkg.justify = '-webkit-justify-content'
|
||||
pkg.transform = '-webkit-transform'
|
||||
else
|
||||
pkg.flex = 'flex'
|
||||
pkg.order = 'order'
|
||||
pkg.align = 'align'
|
||||
pkg.justify = 'justify-content'
|
||||
pkg.transform = 'transform'
|
||||
|
||||
grunt.log.ok 'pkg.type = %s', type
|
||||
|
||||
grunt.registerTask 'build', [
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -147,6 +147,10 @@ Config =
|
||||
true
|
||||
'Show full image on mouseover.'
|
||||
]
|
||||
'Gallery': [
|
||||
true
|
||||
'Adds a simple and cute image gallery.'
|
||||
]
|
||||
'Sauce': [
|
||||
true
|
||||
'Add sauce links to images.'
|
||||
|
||||
@ -124,6 +124,7 @@ Main =
|
||||
'Relative Post Dates': RelativeDates
|
||||
'File Info Formatting': FileInfo
|
||||
'Fappe Tyme': FappeTyme
|
||||
'Gallery': Gallery
|
||||
'Sauce': Sauce
|
||||
'Image Expansion': ImageExpand
|
||||
'Image Expansion (Menu)': ImageExpand.menu
|
||||
|
||||
@ -1079,3 +1079,122 @@ a:only-of-type > .remove {
|
||||
background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/installgentoo.png", {encoding: "base64"}) %>') center left no-repeat!important;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
/* Gallery */
|
||||
#a-gallery {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 30;
|
||||
display: <%= flex %>;
|
||||
<%= flex %>-direction: row;
|
||||
background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0.5));
|
||||
}
|
||||
.gal-viewport {
|
||||
display: <%= flex %>;
|
||||
<%= align %>-items: stretch;
|
||||
<%= flex %>-direction: row;
|
||||
<%= flex %>: 1 1 auto;
|
||||
position: relative;
|
||||
}
|
||||
.gal-thumbnails {
|
||||
<%= flex %>: 0 0 150px;
|
||||
overflow-y: auto;
|
||||
display: <%= flex %>;
|
||||
<%= flex %>-direction: column;
|
||||
<%= align %>-items: stretch;
|
||||
text-align: center;
|
||||
}
|
||||
.gal-thumbnails img {
|
||||
max-width: 125px;
|
||||
max-height: 125px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
.gal-thumbnails a {
|
||||
<%= flex %>: 0 0 auto;
|
||||
padding: 3px;
|
||||
line-height: 0;
|
||||
transition: background .3s linear;
|
||||
}
|
||||
.gal-highlight {
|
||||
background: rgb(190, 190, 255);
|
||||
}
|
||||
.gal-prev {
|
||||
order: 0;
|
||||
}
|
||||
.gal-next {
|
||||
order: 2;
|
||||
}
|
||||
.gal-prev,
|
||||
.gal-next {
|
||||
<%= flex %>: 0 0 20px;
|
||||
background-color: #000;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.gal-prev:hover,
|
||||
.gal-next:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.gal-prev::after,
|
||||
.gal-next::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 2px;
|
||||
<%= transform %>: translateY(-50%)
|
||||
display: inline-block;
|
||||
border-top: 15px solid transparent;
|
||||
border-bottom: 15px solid transparent;
|
||||
content: "";
|
||||
}
|
||||
.gal-prev::after {
|
||||
border-right: 15px solid #fff;
|
||||
}
|
||||
.gal-next::after {
|
||||
border-left: 15px solid #fff;
|
||||
}
|
||||
.gal-image {
|
||||
order: 1;
|
||||
<%= flex %>: 1 0 auto;
|
||||
display: <%= flex %>;
|
||||
<%= align %>-items: flex-start;
|
||||
<%= justify %>: space-around;
|
||||
overflow: auto;
|
||||
/* Flex > Non-Flex child max-width and overflow fix (Firefox only?) */
|
||||
width: 1%;
|
||||
padding-top: 2.4em;
|
||||
}
|
||||
.gal-image a {
|
||||
margin: auto;
|
||||
}
|
||||
.gal-image img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.gal-info {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 40px;
|
||||
left: 20px;
|
||||
height: 2.4em;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.gal-close {
|
||||
font-size: 2em;
|
||||
float: right;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.gal-name {
|
||||
font-size: 2em;
|
||||
color: #ddd;
|
||||
}
|
||||
.gal-count {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
152
src/Images/Gallery.coffee
Normal file
152
src/Images/Gallery.coffee
Normal file
@ -0,0 +1,152 @@
|
||||
Gallery =
|
||||
init: ->
|
||||
return if g.VIEW is 'catalog' or g.BOARD is 'f' or !Conf['Gallery']
|
||||
|
||||
el = $.el 'a',
|
||||
href: 'javascript:;'
|
||||
id: 'appchan-gal'
|
||||
title: 'Gallery'
|
||||
className: 'fourchanx-icon icon-picture'
|
||||
textContent: 'Gallery'
|
||||
|
||||
$.on el, 'click', @cb.toggle
|
||||
|
||||
Header.addShortcut el
|
||||
|
||||
Post::callbacks.push
|
||||
name: 'Gallery'
|
||||
cb: @node
|
||||
|
||||
node: ->
|
||||
return unless @file?.isImage
|
||||
if Gallery.el
|
||||
Gallery.generateThumb $ '.file', @nodes.root
|
||||
Gallery.total.textContent = Gallery.images.length
|
||||
|
||||
unless Conf['Image Expansion']
|
||||
$.on @file.thumb.parentNode, 'click', Gallery.cb.image
|
||||
|
||||
build: (image) ->
|
||||
Gallery.el = dialog = $.el 'div',
|
||||
id: 'a-gallery'
|
||||
innerHTML: """
|
||||
<div class=gal-viewport>
|
||||
<div class=gal-info>
|
||||
<a href=javascript:; class=gal-close>×</a>
|
||||
<a class=gal-name></a>
|
||||
<span class=gal-count>(<span class='count'></span> / <span class='total'></span>)</a>
|
||||
</div>
|
||||
<div class=gal-prev></div>
|
||||
<div class=gal-image>
|
||||
<a href=javascript:;><img></a>
|
||||
</div>
|
||||
<div class=gal-next></div>
|
||||
</div>
|
||||
<div class=gal-thumbnails></div>
|
||||
"""
|
||||
Gallery[key] = $ value, dialog for key, value of {
|
||||
frame: '.gal-image'
|
||||
name: '.gal-name'
|
||||
count: '.count'
|
||||
total: '.total'
|
||||
thumbs: '.gal-thumbnails'
|
||||
next: '.gal-image a'
|
||||
current: '.gal-image img'
|
||||
}
|
||||
|
||||
Gallery.images = []
|
||||
|
||||
$.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 d, 'keydown', Gallery.cb.keybinds
|
||||
$.off d, 'keydown', Keybinds.keydown
|
||||
|
||||
i = 0
|
||||
files = $$ '.post .file'
|
||||
while file = files[i++]
|
||||
Gallery.generateThumb file
|
||||
$.add d.body, dialog
|
||||
|
||||
Gallery.thumbs.scrollTop = 0
|
||||
Gallery.current.parentElement.scrollTop = 0
|
||||
|
||||
Gallery.cb.open.call if image
|
||||
$ "[href='#{image.href.replace /https?:/, ''}']", Gallery.thumbs
|
||||
else
|
||||
Gallery.images[0]
|
||||
|
||||
d.body.style.overflow = 'hidden'
|
||||
Gallery.total.textContent = --i
|
||||
|
||||
generateThumb: (file) ->
|
||||
title = ($ '.fileText a', file).textContent
|
||||
thumb = ($ '.fileThumb', file).cloneNode true
|
||||
if double = $ 'img + img', thumb
|
||||
$.rm double
|
||||
|
||||
thumb.className = 'a-thumb'
|
||||
thumb.title = title
|
||||
thumb.dataset.id = Gallery.images.length
|
||||
thumb.firstElementChild.style.cssText = ''
|
||||
|
||||
$.on thumb, 'click', Gallery.cb.open
|
||||
|
||||
Gallery.images.push thumb
|
||||
$.add Gallery.thumbs, thumb
|
||||
|
||||
cb:
|
||||
keybinds: (e) ->
|
||||
return unless key = Keybinds.keyCode e
|
||||
|
||||
cb = switch key
|
||||
when 'Esc', Conf['Open Gallery']
|
||||
Gallery.cb.close
|
||||
when 'Right', 'Enter'
|
||||
Gallery.cb.next
|
||||
when 'Left', ''
|
||||
Gallery.cb.prev
|
||||
|
||||
return unless cb
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
cb()
|
||||
|
||||
open: (e) ->
|
||||
e.preventDefault() if e
|
||||
|
||||
$.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
|
||||
|
||||
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()
|
||||
|
||||
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)()
|
||||
blank: (e) -> Gallery.cb.close() if e.target is @
|
||||
|
||||
close: ->
|
||||
$.rm Gallery.el
|
||||
delete Gallery.el
|
||||
d.body.style.overflow = ''
|
||||
|
||||
$.off d, 'keydown', Gallery.cb.keybinds
|
||||
$.on d, 'keydown', Keybinds.keydown
|
||||
Loading…
x
Reference in New Issue
Block a user