varg/gallerymaker
1
0
Fork 0
mirror of https://github.com/tomasvarg/gallerymaker.git synced 2026-03-01 00:18: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
bower_components
npm-debug.log

11
README.md
View File

@ -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)).

5
config.json
View File

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

1
package.json
View File

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

6
src/client/index.html
View File

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

5
src/client/index.js
View File

@ -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();
}
}
}());

87
src/index.js
View File

@ -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) + '<div class="' + key + rootClass + '" data-level="' + depth + '"'
+ (key === 'file' && item.name ? ' title="' + item.name + '"' : '') + '>' + EOL
+ (item.dir ? ind(depth +1) + '<div class="name"'
+ (item.name ? ' title="' + item.name + '"' : '') + '>' + item[key] + '</div>' + EOL : '')
+ (item.cont ? getListEntryHtml(item.cont, dir ? path.join(dir, item.dir) : item.dir, depth +1)
: ind(depth +1) + '<a href="' + (dir ? path.join(dir, item[key]) : item[key]) + '">'
+ item[key] + '</a>' + EOL)
+ (key === 'file' && it.name ? ' title="' + it.name + '"' : '') + '>' + EOL
+ (it.dir ? ind(depth +1) + '<div class="name"'
+ (it.name ? ' title="' + it.name + '"' : '') + '>' + it[key] + '</div>' + EOL : '')
+ (it.cont ? getListEntryHtml(it.cont, dir ? path.join(dir, it.dir) : it.dir, depth +1)
: ind(depth +1) + '<a href="' + (dir ? path.join(dir, it[key]) : it[key]) + '">'
+ it[key] + '</a>' + EOL)
+ ind(depth) + '</div>' + 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) + '<div class="' + className + '" data-level="' + depth + '">' + EOL
+ (item.dir ? ind(depth +1) + '<' + htag + ' class="name">' + (item.name || item[key])
+ '</' + htag + '>' + EOL : '')
+ (item.cont ? getGalleryEntryHtml(item.cont, dir ? path.join(dir, item.dir) : item.dir, depth +1)
: ind(depth +1) + '<a href="' + (dir ? path.join(dir, item[key]) : item[key]) + '"'
+ ' title="' + (item.name || item[key]) + '">'
+ (isImg
? '<img src="' + (dir ? path.join(dir, item[key]) : item[key]) + '"'
+ ' width="' + conf.thumb_width + '"/>'
: (item.name || item[key]) + (item.ext ? ' [' + item.ext + ']' : ''))
+ (it.dir ? ind(depth +1) + '<a name="' + it[key] + '"></a>' + EOL : '')
+ (it.dir ? ind(depth +1) + '<' + htag + ' class="name">' + it.name + '</' + htag + '>' + EOL : '')
+ (it.cont ? getGalleryEntryHtml(it.cont, dir ? path.join(dir, it.dir) : it.dir, depth +1)
: ind(depth +1) + '<a href="' + (dir ? path.join(dir, it[key]) : it[key]) + '"'
+ ' title="' + it.name + '">'
+ (isImg ? EOL + ind(depth +2)
+ '<img src="' + (dir ? path.join(dir, it[key]) : it[key]) + '"'
+ ' width="' + conf.thumb_width + '"'
+ ' data-jslghtbx data-jslghtbx-group="' + dir + '"'
+ ' data-jslghtbx-caption="' + it.name + '"'
+ ' />'
: it.name + (it.ext ? ' [' + it.ext + ']' : ''))
+ '</a>' + EOL)
+ ind(depth) + '</div>' + EOL
});