diff --git a/.gitignore b/.gitignore index 93f1361..4ff040b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules +bower_components npm-debug.log diff --git a/README.md b/README.md index 57f2c3f..b86c7a1 100644 --- a/README.md +++ b/README.md @@ -31,9 +31,11 @@ Commands: - provide <img/> tag literals for copy-pasting - create the gallery - ~~list the images (thumbnail based)~~ - - generate actual thumbnails - - list non-image entries of a dir first so it's clear where they belong - - use some lightbox on the prepared directory + - generate & use actual thumbnails + - ~~group entries of the same level beginning with four numbers (a year) together & sort them desc~~ + - ~~list files before directories (on the same level)~~ + - list non-image files before images + - ~~use some lightbox on the prepared directory~~ - further development - ~~style the stuff a bit~~ - integration with other projects (iframe? ajax? web component? Polymer?) @@ -41,4 +43,5 @@ Commands: ## Attributions -Image processing done by [sharp](http://sharp.dimens.io/) ([github](https://github.com/lovell/sharp)). +Image processing done by [sharp](http://sharp.dimens.io/) ([github](https://github.com/lovell/sharp)). +Gallery frontend uses [jsOnlyLightbox](http://jslightbox.felixhagspiel.de/) ([github](https://github.com/felixhagspiel/jsOnlyLightbox)). diff --git a/config.json b/config.json index f8b7913..c800fab 100644 --- a/config.json +++ b/config.json @@ -1,5 +1,8 @@ { - "width": 700, + "width": 800, "quality": 80, + "fnames": { + "gallery": "index.html" + }, "debug": true } diff --git a/package.json b/package.json index 3c57dc9..c8a9b9a 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "author": "Tomas Varga ", "license": "ISC", "dependencies": { + "jsonlylightbox": "git+https://github.com/felixhagspiel/jsonlylightbox.git", "sharp": "^0.16.2" } } diff --git a/src/client/index.html b/src/client/index.html index 45f4bf6..15d2da0 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -3,8 +3,10 @@ Gallery - - + + + + diff --git a/src/client/index.js b/src/client/index.js index 9f386fd..666a020 100644 --- a/src/client/index.js +++ b/src/client/index.js @@ -1,10 +1,15 @@ (function () { 'use strict'; + /* global Lightbox */ addEventListener('DOMContentLoaded', init); function init() { console.log('index initialized'); + if (Lightbox) { + var lightbox = new Lightbox(); + lightbox.load(); + } } }()); diff --git a/src/index.js b/src/index.js index 3bc625b..e920c30 100644 --- a/src/index.js +++ b/src/index.js @@ -12,30 +12,42 @@ var idir = process.argv[3]; var odir = sanitize(process.argv[4] || idir + '.web'); var clientDir = path.join(__dirname, 'client'); +var nodeModDir = path.join(__dirname, '..', 'node_modules'); var conf; try { conf = require(path.join(__dirname, '..', 'config.json')); } catch (e) { conf = {}; } -if (!conf.width) conf.width = 700; +if (!conf.width) conf.width = 800; if (!conf.quality) conf.quality = 80; if (!conf.thumb_width) conf.thumb_width = 100; if (!conf.thumb_quality) conf.thumb_quality = 70; +if (!conf.list) conf.list = {}; +if (!conf.list.sort_desc) conf.list.sort_desc = false; +if (!conf.gallery) conf.gallery = {}; +if (!conf.gallery.years_desc) conf.gallery.years_desc = true; +if (!conf.gallery.files_first) conf.gallery.files_first = true; if (!conf.fnames) conf.fnames = {}; // odir if (!conf.fnames.list) conf.fnames.list = 'list.html'; if (!conf.fnames.gallery) conf.fnames.gallery = 'gallery.html'; if (!conf.templates) conf.templates = {}; // clientDir if (!conf.templates.index) conf.templates.index = 'index.html'; -if (!conf.assets) conf.assets = {}; // clientDir -if (!conf.assets.common) conf.assets.common = ['index.js', 'index.css']; +if (!conf.assets) conf.assets = {}; +if (!conf.assets.common) conf.assets.common = [ + { sdir: clientDir, fname: 'index.js', ddir: odir + '/lib' }, + { sdir: clientDir, fname: 'index.css', ddir: odir + '/lib' }, +]; +if (!conf.assets.gallery) conf.assets.gallery = [ + { sdir: nodeModDir + '/jsonlylightbox/js', fname: 'lightbox.js', ddir: odir + '/lib' }, + { sdir: nodeModDir + '/jsonlylightbox/css', fname: 'lightbox.css', ddir: odir + '/lib' }, +]; if (!conf.ignored_files || !conf.ignored_files.push) conf.ignored_files = []; if (conf.debug === undefined) conf.debug = false; -for (var ak in conf.assets) conf.ignored_files.push.apply(conf.ignored_files, conf.assets[ak]); +for (var ak in conf.assets) conf.ignored_files.push.apply(conf.ignored_files, conf.assets[ak].map(a => a.fname)); for (var fk in conf.fnames) conf.ignored_files.push(conf.fnames[fk]); var EOL = conf.eol ? conf.eol : "\n"; var DEPTH = conf.html_init_depth ? conf.html_init_depth : 2; -var SORT_DESC = conf.sort_desc ? conf.sort_desc : true; var IMG_TYPES = ['jpeg', 'jpg', 'png', 'gif']; var log = conf.debug ? console.log.bind(console) : function () {}; @@ -54,7 +66,8 @@ var cmds = { copyAssets('common'), ['content.json'].concat(cont.cont.map(c => c.dir)), generateList(cont), - generateGallery(cont) + generateGallery(cont), + copyAssets('gallery') ])) .then(res => log('All tasks done! Files:', res.reduce((c, n) => c.concat(n), []).join(', '))) }; @@ -149,9 +162,12 @@ function generateGallery(cont) { function copyAssets(asskey) { log('Copying', asskey, 'assets'); - var fnames = conf.assets[asskey] ? conf.assets[asskey] : asskey && asskey.map ? asskey : []; + var ass = conf.assets[asskey] ? conf.assets[asskey] : asskey && asskey.map ? asskey : []; - return Promise.all(fnames.map(fname => utils.copyFile(clientDir, fname, odir))) + return Promise.all(ass.map(a => { + if (!fs.existsSync(a.ddir)) fs.mkdirSync(a.ddir); + return utils.copyFile(a.sdir, a.fname, a.ddir); + })) .then(files => { console.log('Copying', asskey, 'assets done:', files.join(', ')); return files; @@ -176,7 +192,6 @@ function mirrorDirTree(dir, cb, nomkdir, depth) { if (files === undefined) reject('Directory "' + dir +'" does not exist!'); if (files.length && !fs.existsSync(destDir) && !nomkdir) fs.mkdirSync(destDir); if (files.filter) files = files.filter(file => conf.ignored_files.indexOf(file) === -1); - if (SORT_DESC) files.reverse(); resolve(files); })) .then(files => Promise.all(files.map(file => @@ -236,15 +251,18 @@ function getListEntryHtml(cont, dir, depth) { var rootClass = depth === 0 ? ' list' : ''; var html = ''; - cont.forEach(item => { - var key = item.dir ? 'dir' : 'file'; + if (!conf.list.sort_desc) + cont.reverse(); + + cont.forEach(it => { + var key = it.dir ? 'dir' : 'file'; html += ind(depth) + '
' + EOL - + (item.dir ? ind(depth +1) + '
' + item[key] + '
' + EOL : '') - + (item.cont ? getListEntryHtml(item.cont, dir ? path.join(dir, item.dir) : item.dir, depth +1) - : ind(depth +1) + '' - + item[key] + '' + EOL) + + (key === 'file' && it.name ? ' title="' + it.name + '"' : '') + '>' + EOL + + (it.dir ? ind(depth +1) + '
' + it[key] + '
' + EOL : '') + + (it.cont ? getListEntryHtml(it.cont, dir ? path.join(dir, it.dir) : it.dir, depth +1) + : ind(depth +1) + '' + + it[key] + '' + EOL) + ind(depth) + '
' + EOL }); @@ -256,22 +274,33 @@ function getGalleryEntryHtml(cont, dir, depth) { var rootClass = depth === 0 ? ' gallery' : ''; var htag = depth + 1 <= 6 ? 'h' + (depth + 1) : 'div' var html = ''; + var rxYear = /^[0-9]{4}/; - cont.forEach(item => { - var key = item.dir ? 'dir' : 'file'; - var isImg = IMG_TYPES.indexOf(item.ext) !== -1; + if (conf.gallery.years_desc) + cont = cont.filter(it => rxYear.test(it.name)) + .concat(cont.filter(it => !rxYear.test(it.name)).reverse()); + + if (conf.gallery.files_first) + cont = cont.filter(it => it.file).concat(cont.filter(it => !it.file)); + + cont.forEach(it => { + var key = it.dir ? 'dir' : 'file'; + var isImg = IMG_TYPES.indexOf(it.ext) !== -1; var className = (isImg ? 'img' : key) + rootClass; html += ind(depth) + '
' + EOL - + (item.dir ? ind(depth +1) + '<' + htag + ' class="name">' + (item.name || item[key]) - + '' + EOL : '') - + (item.cont ? getGalleryEntryHtml(item.cont, dir ? path.join(dir, item.dir) : item.dir, depth +1) - : ind(depth +1) + '' - + (isImg - ? '' - : (item.name || item[key]) + (item.ext ? ' [' + item.ext + ']' : '')) + + (it.dir ? ind(depth +1) + '' + EOL : '') + + (it.dir ? ind(depth +1) + '<' + htag + ' class="name">' + it.name + '' + EOL : '') + + (it.cont ? getGalleryEntryHtml(it.cont, dir ? path.join(dir, it.dir) : it.dir, depth +1) + : ind(depth +1) + '' + + (isImg ? EOL + ind(depth +2) + + '' + : it.name + (it.ext ? ' [' + it.ext + ']' : '')) + '' + EOL) + ind(depth) + '
' + EOL });