varg/gallerymaker
1
0
Fork 0
mirror of https://github.com/tomasvarg/gallerymaker.git synced 2026-03-01 08:28:48 +00:00
Code Issues Releases Wiki Activity

Added lightbox; adjusted grouping and sorting

Browse Source
This commit is contained in:
Tomas Varga 2016-11-01 00:06:13 +01:00
parent 7752de29ee
commit abb593cdc8
7 changed files with 80 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
node_modules node_modules
bower_components
npm-debug.log npm-debug.log

11
README.md
View File

@ -31,9 +31,11 @@ Commands:
- provide <img/> tag literals for copy-pasting - provide <img/> tag literals for copy-pasting
- create the gallery - create the gallery
- ~~list the images (thumbnail based)~~ - ~~list the images (thumbnail based)~~
- generate actual thumbnails - generate & use actual thumbnails
- list non-image entries of a dir first so it's clear where they belong - ~~group entries of the same level beginning with four numbers (a year) together & sort them desc~~
- use some lightbox on the prepared directory - ~~list files before directories (on the same level)~~
- list non-image files before images
- ~~use some lightbox on the prepared directory~~
- further development - further development
- ~~style the stuff a bit~~ - ~~style the stuff a bit~~
- integration with other projects (iframe? ajax? web component? Polymer?) - integration with other projects (iframe? ajax? web component? Polymer?)
@ -41,4 +43,5 @@ Commands:
## Attributions ## 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)).

5
config.json
View File

@ -1,5 +1,8 @@
{ {
"width": 700, "width": 800,
"quality": 80, "quality": 80,
"fnames": {
"gallery": "index.html"
},
"debug": true "debug": true
} }

1
package.json
View File

@ -28,6 +28,7 @@
"author": "Tomas Varga <tomas.varga.cz@gmail.com>", "author": "Tomas Varga <tomas.varga.cz@gmail.com>",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"jsonlylightbox": "git+https://github.com/felixhagspiel/jsonlylightbox.git",
"sharp": "^0.16.2" "sharp": "^0.16.2"
} }
} }

6
src/client/index.html
View File

@ -3,8 +3,10 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Gallery</title> <title>Gallery</title>
<link href="index.css" rel="stylesheet" type="text/css"> <link href="lib/index.css" rel="stylesheet" type="text/css">
<script src="index.js" type="text/javascript"></script> <script src="lib/index.js" type="text/javascript"></script>
<link href="lib/lightbox.css" rel="stylesheet">
<script src="lib/lightbox.js" type="text/javascript"></script>
</head> </head>
<body> <body>
</body> </body>

5
src/client/index.js
View File

@ -1,10 +1,15 @@
(function () { (function () {
'use strict'; 'use strict';
/* global Lightbox */
addEventListener('DOMContentLoaded', init); addEventListener('DOMContentLoaded', init);
function init() { function init() {
console.log('index initialized'); console.log('index initialized');
if (Lightbox) {
var lightbox = new Lightbox();
lightbox.load();
}
} }
}()); }());

87
src/index.js
View File

@ -12,30 +12,42 @@ var idir = process.argv[3];
var odir = sanitize(process.argv[4] || idir + '.web'); var odir = sanitize(process.argv[4] || idir + '.web');
var clientDir = path.join(__dirname, 'client'); var clientDir = path.join(__dirname, 'client');
var nodeModDir = path.join(__dirname, '..', 'node_modules');
var conf; var conf;
try { conf = require(path.join(__dirname, '..', 'config.json')); } try { conf = require(path.join(__dirname, '..', 'config.json')); }
catch (e) { conf = {}; } catch (e) { conf = {}; }
if (!conf.width) conf.width = 700; if (!conf.width) conf.width = 800;
if (!conf.quality) conf.quality = 80; if (!conf.quality) conf.quality = 80;
if (!conf.thumb_width) conf.thumb_width = 100; if (!conf.thumb_width) conf.thumb_width = 100;
if (!conf.thumb_quality) conf.thumb_quality = 70; 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) conf.fnames = {}; // odir
if (!conf.fnames.list) conf.fnames.list = 'list.html'; if (!conf.fnames.list) conf.fnames.list = 'list.html';
if (!conf.fnames.gallery) conf.fnames.gallery = 'gallery.html'; if (!conf.fnames.gallery) conf.fnames.gallery = 'gallery.html';
if (!conf.templates) conf.templates = {}; // clientDir if (!conf.templates) conf.templates = {}; // clientDir
if (!conf.templates.index) conf.templates.index = 'index.html'; if (!conf.templates.index) conf.templates.index = 'index.html';
if (!conf.assets) conf.assets = {}; // clientDir if (!conf.assets) conf.assets = {};
if (!conf.assets.common) conf.assets.common = ['index.js', 'index.css']; 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.ignored_files || !conf.ignored_files.push) conf.ignored_files = [];
if (conf.debug === undefined) conf.debug = false; 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]); for (var fk in conf.fnames) conf.ignored_files.push(conf.fnames[fk]);
var EOL = conf.eol ? conf.eol : "\n"; var EOL = conf.eol ? conf.eol : "\n";
var DEPTH = conf.html_init_depth ? conf.html_init_depth : 2; 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 IMG_TYPES = ['jpeg', 'jpg', 'png', 'gif'];
var log = conf.debug ? console.log.bind(console) : function () {}; var log = conf.debug ? console.log.bind(console) : function () {};
@ -54,7 +66,8 @@ var cmds = {
copyAssets('common'), copyAssets('common'),
['content.json'].concat(cont.cont.map(c => c.dir)), ['content.json'].concat(cont.cont.map(c => c.dir)),
generateList(cont), generateList(cont),
generateGallery(cont) generateGallery(cont),
copyAssets('gallery')
])) ]))
.then(res => log('All tasks done! Files:', res.reduce((c, n) => c.concat(n), []).join(', '))) .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) { function copyAssets(asskey) {
log('Copying', asskey, 'assets'); 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 => { .then(files => {
console.log('Copying', asskey, 'assets done:', files.join(', ')); console.log('Copying', asskey, 'assets done:', files.join(', '));
return files; return files;
@ -176,7 +192,6 @@ function mirrorDirTree(dir, cb, nomkdir, depth) {
if (files === undefined) reject('Directory "' + dir +'" does not exist!'); if (files === undefined) reject('Directory "' + dir +'" does not exist!');
if (files.length && !fs.existsSync(destDir) && !nomkdir) fs.mkdirSync(destDir); if (files.length && !fs.existsSync(destDir) && !nomkdir) fs.mkdirSync(destDir);
if (files.filter) files = files.filter(file => conf.ignored_files.indexOf(file) === -1); if (files.filter) files = files.filter(file => conf.ignored_files.indexOf(file) === -1);
if (SORT_DESC) files.reverse();
resolve(files); resolve(files);
})) }))
.then(files => Promise.all(files.map(file => .then(files => Promise.all(files.map(file =>
@ -236,15 +251,18 @@ function getListEntryHtml(cont, dir, depth) {
var rootClass = depth === 0 ? ' list' : ''; var rootClass = depth === 0 ? ' list' : '';
var html = ''; var html = '';
cont.forEach(item => { if (!conf.list.sort_desc)
var key = item.dir ? 'dir' : 'file'; cont.reverse();
cont.forEach(it => {
var key = it.dir ? 'dir' : 'file';
html += ind(depth) + '<div class="' + key + rootClass + '" data-level="' + depth + '"' html += ind(depth) + '<div class="' + key + rootClass + '" data-level="' + depth + '"'
+ (key === 'file' && item.name ? ' title="' + item.name + '"' : '') + '>' + EOL + (key === 'file' && it.name ? ' title="' + it.name + '"' : '') + '>' + EOL
+ (item.dir ? ind(depth +1) + '<div class="name"' + (it.dir ? ind(depth +1) + '<div class="name"'
+ (item.name ? ' title="' + item.name + '"' : '') + '>' + item[key] + '</div>' + EOL : '') + (it.name ? ' title="' + it.name + '"' : '') + '>' + it[key] + '</div>' + EOL : '')
+ (item.cont ? getListEntryHtml(item.cont, dir ? path.join(dir, item.dir) : item.dir, depth +1) + (it.cont ? getListEntryHtml(it.cont, dir ? path.join(dir, it.dir) : it.dir, depth +1)
: ind(depth +1) + '<a href="' + (dir ? path.join(dir, item[key]) : item[key]) + '">' : ind(depth +1) + '<a href="' + (dir ? path.join(dir, it[key]) : it[key]) + '">'
+ item[key] + '</a>' + EOL) + it[key] + '</a>' + EOL)
+ ind(depth) + '</div>' + EOL + ind(depth) + '</div>' + EOL
}); });
@ -256,22 +274,33 @@ function getGalleryEntryHtml(cont, dir, depth) {
var rootClass = depth === 0 ? ' gallery' : ''; var rootClass = depth === 0 ? ' gallery' : '';
var htag = depth + 1 <= 6 ? 'h' + (depth + 1) : 'div' var htag = depth + 1 <= 6 ? 'h' + (depth + 1) : 'div'
var html = ''; var html = '';
var rxYear = /^[0-9]{4}/;
cont.forEach(item => { if (conf.gallery.years_desc)
var key = item.dir ? 'dir' : 'file'; cont = cont.filter(it => rxYear.test(it.name))
var isImg = IMG_TYPES.indexOf(item.ext) !== -1; .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; var className = (isImg ? 'img' : key) + rootClass;
html += ind(depth) + '<div class="' + className + '" data-level="' + depth + '">' + EOL html += ind(depth) + '<div class="' + className + '" data-level="' + depth + '">' + EOL
+ (item.dir ? ind(depth +1) + '<' + htag + ' class="name">' + (item.name || item[key]) + (it.dir ? ind(depth +1) + '<a name="' + it[key] + '"></a>' + EOL : '')
+ '</' + htag + '>' + EOL : '') + (it.dir ? ind(depth +1) + '<' + htag + ' class="name">' + it.name + '</' + htag + '>' + EOL : '')
+ (item.cont ? getGalleryEntryHtml(item.cont, dir ? path.join(dir, item.dir) : item.dir, depth +1) + (it.cont ? getGalleryEntryHtml(it.cont, dir ? path.join(dir, it.dir) : it.dir, depth +1)
: ind(depth +1) + '<a href="' + (dir ? path.join(dir, item[key]) : item[key]) + '"' : ind(depth +1) + '<a href="' + (dir ? path.join(dir, it[key]) : it[key]) + '"'
+ ' title="' + (item.name || item[key]) + '">' + ' title="' + it.name + '">'
+ (isImg + (isImg ? EOL + ind(depth +2)
? '<img src="' + (dir ? path.join(dir, item[key]) : item[key]) + '"' + '<img src="' + (dir ? path.join(dir, it[key]) : it[key]) + '"'
+ ' width="' + conf.thumb_width + '"/>' + ' width="' + conf.thumb_width + '"'
: (item.name || item[key]) + (item.ext ? ' [' + item.ext + ']' : '')) + ' data-jslghtbx data-jslghtbx-group="' + dir + '"'
+ ' data-jslghtbx-caption="' + it.name + '"'
+ ' />'
: it.name + (it.ext ? ' [' + it.ext + ']' : ''))
+ '</a>' + EOL) + '</a>' + EOL)
+ ind(depth) + '</div>' + EOL + ind(depth) + '</div>' + EOL
}); });