manithree/theme-cards-flow - Change L3PX32UXE2SC4JK3VXLL654DHBZGVXSBLZRQIGUIB4RIXEVHU5IQC

New layout, additional apps setting

Created by Peter Siebler on May 26, 2019

L3PX32UXE2SC4JK3VXLL654DHBZGVXSBLZRQIGUIB4RIXEVHU5IQC

Dependencies

In channels

main

Change contents

File addition: thumbsup (d--x------)
[6.2]
File addition: src (d--x------)
[0.1]
File addition: website (d--x------)
[0.23]

File addition: website.js (----------)

[0.40]

const path = require('path')
const async = require('async')
const resolvePkg = require('resolve-pkg')
const Theme = require('./theme')
exports.build = function(rootAlbum, opts, callback) {
    // create the base layer assets
    // such as shared JS libs, common handlebars helpers, CSS reset...
    const baseDir = path.join(__dirname, 'theme-base')
    const base = new Theme(baseDir, opts.output, {
        stylesheetName: 'core.css'
    })
    // then create the actual theme assets
    const themeDir = opts.themePath || localThemePath(opts.theme)
    const theme = new Theme(themeDir, opts.output, {
        stylesheetName: 'theme.css',
        customStylesPath: opts.themeStyle
    })
    // and finally render each page
    const gallery = galleryModel(rootAlbum, opts)
    const tasks = createRenderingTasks(theme, rootAlbum, gallery, [])
    // now build everything
    async.series([
        next => base.prepare(next),
        next => theme.prepare(next),
        next => async.parallel(tasks, next)
    ], callback)
}
function galleryModel(rootAlbum, opts) {
    return {
        home: rootAlbum,
        title: opts.title,
        footer: opts.footer,
        thumbSize: opts.thumbSize,
        largeSize: opts.largeSize,
        googleAnalytics: opts.googleAnalytics,
        settings: opts.settings // NEW for application settings, see opitons.js
    }
}
function createRenderingTasks(theme, album, gallery, breadcrumbs) {
    // a function to render this album
    const thisAlbumTask = next => {
        theme.render(album, {
            gallery: gallery,
            breadcrumbs: breadcrumbs
        }, next)
    }
    const tasks = [thisAlbumTask]
        // and all nested albums
    album.albums.forEach(function(nested) {
        const nestedTasks = createRenderingTasks(theme, nested, gallery, breadcrumbs.concat([album]))
        Array.prototype.push.apply(tasks, nestedTasks)
    })
    return tasks
}
function localThemePath(themeName) {
    const local = resolvePkg(`@thumbsup/theme-${themeName}`, { cwd: __dirname })
    if (!local) {
        throw new Error(`Could not find a built-in theme called ${themeName}`)
    }
    return local
}

File addition: bin (d--x------)
[0.1]

File addition: options.js (----------)

[0.2273]

const messages = require('./messages')
const path = require('path')
const yargs = require('yargs')
const os = require('os')
const OPTIONS = {
    // ------------------------------------
    // Required arguments
    // ------------------------------------
    'input': {
        group: 'Required:',
        description: 'Path to the folder with all photos/videos',
        normalize: true,
        demand: true
    },
    'output': {
        group: 'Required:',
        description: 'Output path for the static website',
        normalize: true,
        demand: true
    },
    // ------------------------------------
    // Input options
    // ------------------------------------
    'include-photos': {
        group: 'Input options:',
        description: 'Include photos in the gallery',
        type: 'boolean',
        'default': true
    },
    'include-videos': {
        group: 'Input options:',
        description: 'Include videos in the gallery',
        type: 'boolean',
        'default': true
    },
    'include-raw-photos': {
        group: 'Input options:',
        description: 'Include raw photos in the gallery',
        type: 'boolean',
        'default': false
    },
    'include': {
        group: 'Input options:',
        description: 'Glob pattern of files to include',
        type: 'array'
    },
    'exclude': {
        group: 'Input options:',
        description: 'Glob pattern of files to exclude',
        type: 'array'
    },
    // ------------------------------------
    // Output options
    // ------------------------------------
    'thumb-size': {
        group: 'Output options:',
        description: 'Pixel size of the square thumbnails',
        type: 'number',
        'default': 120
    },
    'large-size': {
        group: 'Output options:',
        description: 'Pixel height of the fullscreen photos',
        type: 'number',
        'default': 1000
    },
    'photo-quality': {
        group: 'Output options:',
        description: 'Quality of the resized/converted photos',
        type: 'number',
        'default': 90
    },
    'video-quality': {
        group: 'Output options:',
        description: 'Quality of the converted video (percent)',
        type: 'number',
        'default': 75
    },
    'video-bitrate': {
        group: 'Output options:',
        description: 'Bitrate of the converted videos (e.g. 120k)',
        type: 'string',
        'default': null
    },
    'video-format': {
        group: 'Output options:',
        description: 'Video output format',
        choices: ['mp4', 'webm'],
        'default': 'mp4'
    },
    'photo-preview': {
        group: 'Output options:',
        description: 'How lightbox photos are generated',
        choices: ['resize', 'copy', 'symlink', 'link'],
        'default': 'resize'
    },
    'video-preview': {
        group: 'Output options:',
        description: 'How lightbox videos are generated',
        choices: ['resize', 'copy', 'symlink', 'link'],
        'default': 'resize'
    },
    'photo-download': {
        group: 'Output options:',
        description: 'How downloadable photos are generated',
        choices: ['resize', 'copy', 'symlink', 'link'],
        'default': 'resize'
    },
    'video-download': {
        group: 'Output options:',
        description: 'How downloadable videos are generated',
        choices: ['resize', 'copy', 'symlink', 'link'],
        'default': 'resize'
    },
    'link-prefix': {
        group: 'Output options:',
        description: 'Path or URL prefix for "linked" photos and videos',
        type: 'string'
    },
    'cleanup': {
        group: 'Output options:',
        description: 'Remove any output file that\'s no longer needed',
        type: 'boolean',
        'default': false
    },
    'concurrency': {
        group: 'Output options:',
        description: 'Number of parallel parsing/processing operations',
        type: 'number',
        'default': os.cpus().length
    },
    'output-structure': {
        group: 'Output options:',
        description: 'File and folder structure for output media',
        choices: ['folders', 'suffix'],
        'default': 'folders'
    },
    'gm-args': {
        group: 'Output options:',
        description: 'Custom image processing arguments for GraphicsMagick',
        type: 'array'
    },
    'watermark': {
        group: 'Output options:',
        description: 'Path to a transparent PNG to be overlaid on all images',
        type: 'string'
    },
    'watermark-position': {
        group: 'Output options:',
        description: 'Position of the watermark',
        choices: [
            'Repeat', 'Center', 'NorthWest', 'North', 'NorthEast',
            'West', 'East', 'SouthWest', 'South', 'SouthEast'
        ]
    },
    // ------------------------------------
    // Album options
    // ------------------------------------
    'albums-from': {
        group: 'Album options:',
        description: 'How files are grouped into albums',
        type: 'array',
        'default': ['%path']
    },
    'sort-albums-by': {
        group: 'Album options:',
        description: 'How to sort albums',
        choices: ['title', 'start-date', 'end-date'],
        'default': 'start-date'
    },
    'sort-albums-direction': {
        group: 'Album options:',
        description: 'Album sorting direction',
        choices: ['asc', 'desc'],
        'default': 'asc'
    },
    'sort-media-by': {
        group: 'Album options:',
        description: 'How to sort photos and videos',
        choices: ['filename', 'date'],
        'default': 'date'
    },
    'sort-media-direction': {
        group: 'Album options:',
        description: 'Media sorting direction',
        choices: ['asc', 'desc'],
        'default': 'asc'
    },
    'album-zip-files': {
        group: 'Album options:',
        description: 'Create a ZIP file per album',
        type: 'boolean',
        'default': false
    },
    // ------------------------------------
    // Website options
    // ------------------------------------
    'index': {
        group: 'Website options:',
        description: 'Filename of the home page',
        'default': 'index.html'
    },
    'albums-output-folder': {
        group: 'Website options:',
        description: 'Output subfolder for HTML albums (default: website root)',
        'default': '.'
    },
    'theme': {
        group: 'Website options:',
        description: 'Name of a built-in gallery theme',
        choices: ['classic', 'cards', 'mosaic', 'flow'],
        'default': 'classic'
    },
    'theme-path': {
        group: 'Website options:',
        description: 'Path to a custom theme',
        normalize: true
    },
    'theme-style': {
        group: 'Website options:',
        description: 'Path to a custom LESS/CSS file for additional styles',
        normalize: true
    },
    'title': {
        group: 'Website options:',
        description: 'Website title',
        'default': 'Photo album'
    },
    'footer': {
        group: 'Website options:',
        description: 'Text or HTML footer',
        'default': null
    },
    'google-analytics': {
        group: 'Website options:',
        description: 'Code for Google Analytics tracking',
        type: 'string'
    },
    'embed-exif': {
        group: 'Website options:',
        description: 'Embed the exif metadata for each image into the gallery page',
        type: 'boolean',
        'default': false
    },
    // ------------------------------------
    // Misc options
    // ------------------------------------
    'config': {
        group: 'Misc options:',
        description: 'JSON config file (one key per argument)',
        normalize: true
    },
    'log': {
        group: 'Misc options:',
        description: 'Print a detailed text log',
        choices: [null, 'info', 'debug', 'trace'],
        'default': null
    },
    'usage-stats': {
        group: 'Misc options:',
        description: 'Enable anonymous usage statistics',
        type: 'boolean',
        'default': true
    },
    'dry-run': {
        group: 'Misc options:',
        description: "Update the index, but don't create the media files / website",
        type: 'boolean',
        'default': false
    },
    // ------------------------------------
    // Applciation settings ! added by PS
    // ------------------------------------
    'settings': {
        group: 'Application settings:',
        description: 'JSON config file (one key per argument)',
        'default': null
    },
    // ------------------------------------
    // Deprecated options
    // ------------------------------------
    'original-photos': {
        group: 'Deprecated:',
        description: 'Copy and allow download of full-size photos',
        type: 'boolean'
    },
    'original-videos': {
        group: 'Deprecated:',
        description: 'Copy and allow download of full-size videos',
        type: 'boolean'
    },
    'albums-date-format': {
        group: 'Deprecated:',
        description: 'How albums are named in <date> mode [moment.js pattern]'
    },
    'css': {
        group: 'Deprecated:',
        description: 'Path to a custom provided CSS/LESS file for styling',
        normalize: true
    },
    'download-photos': {
        group: 'Deprecated:',
        description: 'Target of the photo download links',
        choices: ['large', 'copy', 'symlink', 'link']
    },
    'download-videos': {
        group: 'Deprecated:',
        description: 'Target of the video download links',
        choices: ['large', 'copy', 'symlink', 'link']
    },
    'download-link-prefix': {
        group: 'Deprecated:',
        description: 'Path or URL prefix for linked downloads',
        type: 'string'
    }
}
// explicitly pass <process.argv> so we can unit test this logic
// otherwise it pre-loads all process arguments on require()
exports.get = (args) => {
    const opts = yargs(args)
        .usage(messages.USAGE())
        .wrap(null)
        .help('help')
        .config('config')
        .options(OPTIONS)
        .epilogue(messages.CONFIG_USAGE())
        .argv
    // Warn users when they use deprecated options
    const deprecated = Object.keys(OPTIONS).filter(name => OPTIONS[name].group === 'Deprecated:')
    const specified = deprecated.filter(name => typeof opts[name] !== 'undefined')
    if (specified.length > 0) {
        const warnings = specified.map(name => `Warning: --${name} is deprecated`)
        console.error(warnings.join('\n') + '\n')
    }
    // Make input/output folder absolute paths
    opts['input'] = path.resolve(opts['input'])
    opts['output'] = path.resolve(opts['output'])
    // By default, use relative links to the input folder
    if (opts['download-link-prefix']) opts['link-prefix'] = opts['download-link-prefix']
    if (!opts['link-prefix']) {
        opts['link-prefix'] = path.relative(opts['output'], opts['input'])
    }
    // Convert deprecated --download
    if (opts['original-photos']) opts['download-photos'] = 'copy'
    if (opts['original-videos']) opts['download-videos'] = 'copy'
    if (opts['download-photos']) opts['photo-download'] = opts['download-photos']
    if (opts['download-videos']) opts['video-download'] = opts['download-videos']
    if (opts['photo-download'] === 'large') opts['photo-download'] = 'resize'
    if (opts['video-download'] === 'large') opts['video-download'] = 'resize'
    // Convert deprecated --albums-from
    replaceInArray(opts['albums-from'], 'folders', '%path')
    replaceInArray(opts['albums-from'], 'date', `{${opts['albums-date-format']}}`)
    // Convert deprecated --css
    if (opts['css']) opts['theme-style'] = opts['css']
    // Add a dash prefix to any --gm-args value
    // We can't specify the prefix on the CLI otherwise the parser thinks it's a thumbsup arg
    if (opts['gm-args']) {
        opts['gm-args'] = opts['gm-args'].map(val => `-${val}`)
    }
    // All options as an object
    return {
        input: opts['input'],
        output: opts['output'],
        includePhotos: opts['include-photos'],
        includeVideos: opts['include-videos'],
        includeRawPhotos: opts['include-raw-photos'],
        include: opts['include'],
        exclude: opts['exclude'],
        cleanup: opts['cleanup'],
        title: opts['title'],
        thumbSize: opts['thumb-size'],
        largeSize: opts['large-size'],
        photoQuality: opts['photo-quality'],
        videoQuality: opts['video-quality'],
        videoBitrate: opts['video-bitrate'],
        videoFormat: opts['video-format'],
        photoPreview: opts['photo-preview'],
        videoPreview: opts['video-preview'],
        photoDownload: opts['photo-download'],
        videoDownload: opts['video-download'],
        linkPrefix: opts['link-prefix'],
        albumsFrom: opts['albums-from'],
        albumsDateFormat: opts['albums-date-format'],
        sortAlbumsBy: opts['sort-albums-by'],
        sortAlbumsDirection: opts['sort-albums-direction'],
        sortMediaBy: opts['sort-media-by'],
        sortMediaDirection: opts['sort-media-direction'],
        albumZipFiles: opts['album-zip-files'],
        theme: opts['theme'],
        themePath: opts['theme-path'],
        themeStyle: opts['theme-style'],
        css: opts['css'],
        googleAnalytics: opts['google-analytics'],
        index: opts['index'],
        footer: opts['footer'],
        albumsOutputFolder: opts['albums-output-folder'],
        usageStats: opts['usage-stats'],
        log: opts['log'],
        dryRun: opts['dry-run'],
        concurrency: opts['concurrency'],
        outputStructure: opts['output-structure'],
        gmArgs: opts['gm-args'],
        watermark: opts['watermark'],
        watermarkPosition: opts['watermark-position'],
        embedExif: opts['embed-exif'],
        settings: getSettings(opts['settings']), // NEW for settings
    }
}
function replaceInArray(list, match, replacement) {
    for (var i = 0; i < list.length; ++i) {
        if (list[i] === match) {
            list[i] = replacement
        }
    }
}
/**
 * read the config settings 
 * @param {*} filename 
 */
function getSettings(filename) {
    var contents,
        jsonContent = {
            "logo": null,
            "tabHome": "Home",
            "application": "tumbsUp Fotobook",
            "appVersion": "2.1.0",
            "albumPrefix": "Album",
            "albumsPrefix": "Alben",
            "albumCardTitle": "Show Album ",
            "copyright": null,
            "footerLeft": null,
            "footerCenter": null,
            "footerRight": null
        };
    if (filename) {
        var fs = require("fs");
        try {
            contents = fs.readFileSync(filename, 'utf-8');
            jsonContent = JSON.parse(contents);
            return jsonContent;
        } catch (ex) {
            console.log("ERROR application settings", filename);
        }
    }
    return jsonContent;
}

File addition: README.md (----------)

[0.1]

# @thumbsup/theme-card-flow
[![NPM](https://img.shields.io/npm/v/@thumbsup/theme-flow.svg?style=flat)](https://www.npmjs.com/package/@thumbsup/theme-flow)
[![Travis CI](https://travis-ci.org/thumbsup/theme-flow.svg?branch=master)](https://travis-ci.org/thumbsup/theme-flow)
**Update**
To get the settings from the JSON file to be available in the application, 
the two files of the thumbsUp application must be adapted.
**../thumbsup/bin/options.js**
```javascript
   // add this lines to  Misc options section
   'settings': {
        group: 'Application settings:',
        description: 'JSON config file (one key per argument)',
        'default': null
    },
    ....
    return {
        .....
        watermarkPosition: opts['watermark-position'],
        embedExif: opts['embed-exif'],
        settings: getSettings(opts['settings']), // NEW for settings
    }
    **
    * read the config settings 
    * @param {*} filename 
    */
    function getSettings(filename) {
        var contents,
            jsonContent = {  // default settings
                "logo": null,
                "tabHome": "Home",
                "application": "tumbsUp Fotobook",
                "appVersion": "2.1.0",
                "albumPrefix": "Album",
                "albumsPrefix": "Alben",
                "albumCardTitle": "Show Album ",
                "copyright": null,
                "footerLeft": null,
                "footerCenter": null,
                "footerRight": null
            };
        if (filename) {
            var fs = require("fs");
            try {
                // try to get the settings from the file
                contents = fs.readFileSync(filename, 'utf-8');
                jsonContent = JSON.parse(contents);
                return jsonContent;
            } catch (ex) {
                console.log("ERROR application settings", filename);
            }
        }
        return jsonContent;
    }
```
**.../thumbsup/src/website/website.js**
```javascript
function galleryModel(rootAlbum, opts) {
    return {
        home: rootAlbum,
        title: opts.title,
        footer: opts.footer,
        thumbSize: opts.thumbSize,
        largeSize: opts.largeSize,
        googleAnalytics: opts.googleAnalytics,
        settings: opts.settings // NEW for application settings, see opitons.js
    }
}
```
**sample settings**
```
{
    "author": "Peter Siebler",
    "logo": "public/assets/avatar.jpg",
    "application": "tumbsUp Fotobook",
    "appVersion": "2.1.0",
    "tabHome": "Start",
    "albumPrefix": "Album",
    "albumsPrefix": "Alben",
    "albumCardTitle": "Öffne Album ",
    "copyright": "2019 Peter Siebler. All rights reserved."
}
```
**usage**
```javascript
   gallery.settings.ATTRIBUTE
   // for example:
   gallery.settings.logo
   gallery.settings.author
   gallery.settings.application
   .....
```

Replacement in theme/theme.less at line 8 [6.23]
∅:D[7.31] → [6.200:248]
B:BD[6.200] → [6.200:248]
```
@header-shadowcolor: 0 0 7px 0 rgba(0,0,0,.35);
```
[7.31]
[6.248]
```
@header-shadowcolor: 0 0 7px 0 rgba(0, 0, 0, .35);
```

Replacement in theme/theme.less at line 14 [6.23]

B:BD[6.377] → [6.377:424]

@crumbs-box-shadow: 0 0 4px 0 rgba(0,0,0,.25);

[6.377]

[8.2]

@crumbs-box-shadow: 0 0 4px 0 rgba(0, 0, 0, .25);

Replacement in theme/theme.less at line 21 [6.23]
B:BD[6.485] → [6.485:505]
```
@fontcolor:#424242;
```
[6.485]
[6.505]
```
@fontcolor: #424242;
```
Replacement in theme/theme.less at line 31 [6.23]
∅:D[7.219] → [9.2:23]
B:BD[6.612] → [9.2:23]
```
@hovercolor:#f16821;
```
[7.219]
[6.612]
```
@hovercolor: #f16821;
```
Replacement in theme/theme.less at line 33 [6.23]
B:BD[6.613] → [6.613:641]
```
@footer-foreground:#E0E0E0;
```
[6.613]
[3.2]
```
@footer-foreground: #E0E0E0;
```
Insertion in theme/theme.less at line 56 [6.23]
[6.1170]
[6.1170]
```
@import "public/styles/modal.less";
```
Replacement in theme/theme.less at line 58 [6.23]
B:BD[6.1207] → [6.1207:1248]
```
@import "public/styles/scrollbars.less";
```
[6.1207]
```
@import "public/styles/scrollbars.less";
```
Replacement in theme/public/styles/pagemenu.less at line 40 [9.320]
B:BD[9.1214] → [9.1214:1261]
```
    object-fit: cover;
    border-radius: 50%;
```
[9.1214]
[9.1261]
```
    object-fit: cover;    
```

File addition: modal.less (----------)

[6.276492]

.img-replace {
    /* replace text with an image */
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    color: transparent;
    white-space: nowrap;
}
.cd-popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.78);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
    transition: opacity 0.3s 0s, visibility 0s 0.3s;
    z-index: 10000;
}
.cd-popup.is-visible {
    opacity: 1;
    visibility: visible;
    z-index: 10000;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
    transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup-container {
    position: relative;
    width: 90%;
    max-width: 400px;
    margin: 4em auto;
    background: @card-background-color;
    border-radius: .25em .25em .4em .4em;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
    /* Force Hardware Acceleration in WebKit */
    -webkit-backface-visibility: hidden;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.cd-popup-container h2 {
    line-height: 3em;
    font-weight: 500;
}
.cd-popup-container div {
    padding: 3em 1em;
}
.cd-popup-container .cd-buttons:after {
    content: "";
    display: table;
    clear: both;
}
.cd-popup-container .cd-buttons li {
    float: left;
    width: 50%;
    list-style: none;
}
.cd-popup-container .cd-buttons a {
    display: block;
    height: 60px;
    line-height: 60px;
    text-transform: uppercase;
    color: #FFF;
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    transition: background-color 0.2s;
}
.cd-popup-container .cd-buttons li:first-child a {
    background: #fc7169;
    border-radius: 0 0 0 .25em;
}
.no-touch .cd-popup-container .cd-buttons li:first-child a:hover {
    background-color: #fc8982;
}
.cd-popup-container .cd-buttons li:last-child a {
    background: #b6bece;
    border-radius: 0 0 .25em 0;
}
.no-touch .cd-popup-container .cd-buttons li:last-child a:hover {
    background-color: #c5ccd8;
}
.cd-popup-container .cd-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
}
.cd-popup-container .cd-popup-close::before,
.cd-popup-container .cd-popup-close::after {
    content: '';
    position: absolute;
    top: 12px;
    width: 14px;
    height: 3px;
    background-color: #8f9cb5;
}
.cd-popup-container .cd-popup-close::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 8px;
}
.cd-popup-container .cd-popup-close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 8px;
}
.is-visible .cd-popup-container {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
@media only screen and (min-width: 1170px) {
    .cd-popup-container {
        margin: 8em auto;
    }
}

Replacement in theme/public/styles/mobile.less at line 61 [6.279920]
B:BD[10.2940] → [10.2940:2962]
```
        width: 300px;
```
[10.2940]
[10.2962]
```
        width: 360px;
        margin-right: 0;
```

Insertion in theme/public/styles/generic.less at line 98 [6.281978]

[6.283303]

}
.space36{
    display: inline-block;
    height:36px;    
    width:100%;
}
.space3em{
    display: inline-block;
    height:3em;
    line-height: 3em;
    width:100%;

File addition: icons (d--x------)
[6.1101376]

File addition: site.webmanifest (----------)

[0.24557]

{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

File addition: mstile-150x150.png (----------)
[0.24557]
File addition: favicon.ico (----------)
[0.24557]
File addition: favicon-32x32.png (----------)
[0.24557]
File addition: favicon-16x16.png (----------)
[0.24557]

File addition: browserconfig.xml (----------)

[0.24557]

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/mstile-150x150.png"/>
            <TileColor>#da532c</TileColor>
        </tile>
    </msapplication>
</browserconfig>

File addition: apple-touch-icon.png (----------)
[0.24557]
File addition: android-chrome-512x512.png (----------)
[0.24557]
File addition: android-chrome-192x192.png (----------)
[0.24557]

File deletion: crumbs.hbs

BF:BFD[6.4094746] → [6.4097452:4097486]

BF:BFD[6.4097486] → [6.4097069:4097069]

B:BD[6.4097069] → [6.4097070:4097150]

∅:D[9.14657] → [6.4097176:4097451]

B:BD[6.4097176] → [6.4097176:4097451]

B:BD[6.4097150] → [9.14618:14657]

{{!-- 
   Breadcrumbs 
   uses helper method to get the text for the crumb
--}}
    {{#each breadcrumbs~}}       
        <a class="breadcrumb-item" href="{{relative url}}">{{albumname this.title}}</a><span class="breadcrumb-sepeartor icon-arrow-right"></span>
    {{~/each~}}
    <span class="breadcrumb-item-last">{{albumname album.title}}</span>
</nav>
<nav id="menubar" class="breadcrumbs">

File addition: modal-window.hbs (----------)

[6.4094746]

<div class="cd-popup" role="alert">
	<div class="cd-popup-container">
        <h2>Modal Dialog</h2>
        <a href="#0" class="cd-popup-close img-replace"></a>
		<div id="cd-content">Are you sure you want to delete this element?</div>
	</div>
</div>

Replacement in theme/partials/mediaItems.hbs at line 16 [6.4094768]

B:BD[3.2117] → [3.2117:2294]

                           <img class="fotopreview" src="{{relative urls.small}}" alt="{{#if meta.exif}} {{{meta.exif.DateTimeOriginal}}}  {{else}}  {{{meta.date}}} {{/if}}" />

[3.2117]

[3.2294]

                           <img class="fotopreview" src="{{relative urls.small}}" alt="{{#if meta.exif}} {{{meta.exif.DateTimeOriginal}}}  {{else}}  {{{date meta.date "MMMM YYYY HH:mm"}}} {{/if}}" />

Replacement in theme/partials/galleryHeader.hbs at line 5 [11.1575]
∅:D[10.8212] → [9.12826:12854]
B:BD[9.12826] → [9.12826:12854]
```
    <h1 class="logo">      
```
[10.8212]
[9.12854]
```
    <h1 class="logo">
```

Replacement in theme/partials/galleryHeader.hbs at line 7 [11.1575]

B:BD[9.12903] → [9.12903:12958]

            <img src="public/assets/avatar.jpg"></img>

[9.12903]

[9.12958]

            {{#if gallery.settings.logo }}
            <img src="{{gallery.settings.logo}}"></img>
            {{/if}}

Replacement in theme/partials/galleryHeader.hbs at line 13 [11.1575]

B:BD[9.13026] → [9.13026:13060]

B:BD[9.13060] → [10.8213:8323]

    {{#each breadcrumbs~}}       
        <a class="menubar-item" href="{{relative url}}">{{this.title}}</a><span class="desktop">&nbsp;</span>

[9.13026]

[9.13154]

    {{#each breadcrumbs~}}
        <a class="menubar-item" href="{{relative url}}">{{#compare this.title '==' 'Home'}}{{@root.gallery.settings.tabHome}}{{else}}{{this.title}}{{/compare}}</a><span class="desktop">&nbsp;</span>

Deletion in theme/partials/galleryHeader.hbs at line 20 [11.1575]
B:BD[9.13192] → [9.13192:13193]
Replacement in theme/partials/galleryHeader.hbs at line 28 [11.1575]
∅:D[12.891498] → [9.13461:13508]
B:BD[9.13461] → [9.13461:13508]
```
            <h2>{{albumname album.title}}</h2>
```
[12.891498]
[12.891499]
```
            <h2>{{gallery.settings.albumsPrefix}}&nbsp;{{album.title}}</h2>
```
Replacement in theme/partials/galleryHeader.hbs at line 49 [11.1575]
B:BD[12.891610] → [12.891610:891647]
```
  <h2>{{albumname album.title}}</h2>
```
[12.891610]
[12.891647]
```
  <h2>{{gallery.settings.albumPrefix}} {{album.title}}</h2>
```

Replacement in theme/partials/galleryHeader-home.hbs at line 4 [9.14203]

B:BD[9.14288] → [9.14288:14356]

          <img src="public/assets/avatar.jpg" class="avatar"></img>

[9.14288]

[9.14356]

          {{#if gallery.settings.logo }}
          <img src="{{gallery.settings.logo}}" class="avatar"></img>
          {{/if}}

Replacement in theme/partials/footer.hbs at line 2 [13.113711]

B:BD[3.2398] → [3.2398:2811]

<footer>
    {{#compare album.title '==' 'Home'}}
    <div class="left">&bullet; {{gallery.title}}&nbsp;&bullet;{{album.summary}}</div>
    {{else}}
    <div class="left">&bullet; {{album.title}}&nbsp;&bullet;{{album.summary}}</div>
    {{/compare}}
    <div class="right">{{#if gallery.footer}}{{{gallery.footer}}}: {{/if}}&nbsp;&bullet; Copyright &copy; 2019 Peter Siebler. All rights reserved.</div>
</footer>

[3.2398]

[3.2811]

{{#if gallery.footer}}
    <footer>
        {{#compare album.title '==' 'Home'}}
        <div class="left cd-open">&bullet; {{gallery.title}}&nbsp;&bullet;{{album.summary}}</div>
        {{else}}
        <div class="left">&bullet; {{album.title}}&nbsp;&bullet;{{album.summary}}</div>
        {{/compare}}
        <div class="right">{{#if gallery.footer}}{{{gallery.footer}}}{{/if}}
            {{#if gallery.settings.copyright}}&nbsp;&bullet;Copyright &copy;{{gallery.settings.copyright}}{{/if}}
        </div>    
    </footer>
{{/if}}

Replacement in theme/partials/coverItem.hbs at line 7 [13.113863]

B:BD[11.2476] → [9.14720:14763]

        <h2>{{albumname album.title}}</h2>

[11.2476]

[7.1406]

        <h2>{{gallery.settings.albumPrefix}}&nbsp;{{album.title}}</h2>

Replacement in theme/partials/ablumTeaser.hbs at line 2 [13.115144]

B:BD[13.115248] → [13.115248:115291]

B:BD[13.115291] → [9.15471:15580]

∅:D[11.3055] → [13.115344:115394]

∅:D[9.15580] → [13.115344:115394]

B:BD[13.115344] → [13.115344:115394]

B:BD[13.115394] → [3.2821:2911]

    {{!-- render all album teaser--}}     
    <div id="albums" class="cards clearfix{{#compare album.files.length '==' 0}} nocover{{/compare}}">      
      {{#each album.albums~}}                    
        <a href="{{relative url}}" class="card" title="Show Gallery {{title}}">

[13.115169]

[3.2911]

    {{!-- render all album teaser--}}
    {{#compare album.files.length '>' 1}}
      <div class="space3em">&nbsp;</div>
    {{/compare}}
    <div id="albums" class="cards clearfix{{#compare album.files.length '==' 0}} nocover{{/compare}}">
      {{#each album.albums~}}
        <a href="{{relative url}}" class="card" title="{{@root.gallery.settings.albumCardTitle}}{{title}}">

Insertion in theme/partials/ablumTeaser.hbs at line 18 [13.115144]

[13.115820]

    {{#compare album.files.length '>' 1}}
      <div class="space3em">&nbsp;</div>
    {{/compare}}

Deletion in theme/partials/README.md at line 7 [6.4100036]
B:BD[6.4100342] → [6.4100342:4100396]
```
* **crumbs.hbs**
render the curmbsbar and the crumbs
```
Insertion in theme/partials/README.md at line 46 [6.4100036]
[14.416]
```
* **README.md**
this file...
```

File deletion: readSettings.js

BF:BFD[6.4100967] → [5.2654:2693]

BF:BFD[5.2693] → [5.1927:1927]

B:BD[5.1927] → [5.1928:2653]

/*
 *  read the application settings
 *  just for testing - not for production
 *  appsettings 
 */
"use strict";
module.exports = obj => {
    if (!global.thumbsup) {
        var fs = require("fs");
        var appsroot = require('path').resolve(__dirname, '../../..');
        try {
            var contents = fs.readFileSync(appsroot + "/appsettings.json", 'utf-8');
            if (contents) {
                global.thumbsup = {};
                global.thumbsup.basedir = appsroot;
                global.thumbsup.settings = JSON.parse(contents);
                global.thumbsup.appsettings = true;
            }
        } catch (ex) {
            console.log("ERROR application settings", appsroot);
        }
    }
}

File deletion: covertitle.js
BF:BFD[6.4100967] → [13.116846:116883]
BF:BFD[13.116883] → [13.116725:116725]
B:BD[13.116725] → [13.116726:116845]
```
/*
 *  check album name
 */
"use strict";
module.exports = name => {
    return (name == 'Home') ? 'Fotobuch' : name;
}
```
File deletion: albumname.js
BF:BFD[6.4100967] → [6.4101164:4101200]
BF:BFD[6.4101200] → [6.4100988:4100988]
B:BD[6.4100988] → [6.4100989:4101058]
∅:D[13.116945] → [6.4101162:4101163]
B:BD[6.4101162] → [6.4101162:4101163]
B:BD[6.4101058] → [13.116885:116945]
```
/*
 *  check album name
 */
"use strict";
module.exports = name => {
}
    return (name == 'Home') ? 'Fotobuch' : 'Album ' + name;
```
Deletion in theme/helpers/README.md at line 7 [6.4103141]
B:BD[6.4103444] → [6.4103444:4103445]
Deletion in theme/helpers/README.md at line 8 [6.4103141]
B:BD[6.4103446] → [6.4103446:4103542]
B:BD[6.4103542] → [4.464:465]
```
**albumname.js**: checks if the crumbsname is "home" otherwise the album name will be rendered.
```
Deletion in theme/helpers/README.md at line 10 [6.4103141]
B:BD[6.4103543] → [14.421:518]
B:BD[14.518] → [4.520:521]
```
**covertitle.js**: checks if the crumbsname is "home" otherwise the album name will be rendered.
```

Replacement in theme/album.hbs at line 11 [6.4103770]

B:BD[6.4104045] → [6.4104045:4104189]

      <meta name="viewport" content="width=device-width, user-scalable=no" />      
      <title>{{gallery.title}} - {{album.title}}</title>

[6.4104045]

[6.4104189]

      <title>{{gallery.title}} - {{album.title}}</title>
      <meta name="viewport" content="width=device-width, user-scalable=no" /> 
      <meta name="application-name" content="{{gallery.settings.application}} {{gallery.settings.appVersion}}">     
      <meta name="author" content="{{gallery.settings.author}}">
      <meta name="robots" content="noindex,nofollow">
      <meta name="format-detection" content="telephone=no">
      <meta name="generator" content="thumbsup">
      <link rel="apple-touch-icon" sizes="180x180" href="public/assets/icons/apple-touch-icon.png">
      <link rel="icon" type="image/png" sizes="32x32" href="public/assets/icons/favicon-32x32.png">
      <link rel="icon" type="image/png" sizes="16x16" href="public/assets/icons/favicon-16x16.png">
      <link rel="manifest" href="public/assets/icons/site.webmanifest">
      <meta name="msapplication-TileColor" content="#da532c">
      <meta name="theme-color" content="#ffffff">

Insertion in theme/album.hbs at line 36 [6.4103770]
[6.4104900]
[6.4104900]
```
    {{> modal-window}}
```
Replacement in theme/album.hbs at line 69 [6.4103770]
B:BD[6.4106305] → [9.15678:15690]
B:BD[9.15690] → [10.8509:8510]
```
      });  
```
[6.4106305]
[10.8510]
```
      });
```
Deletion in theme/album.hbs at line 74 [6.4103770]
∅:D[10.8638] → [9.15690:15691]
B:BD[9.15690] → [9.15690:15691]

Replacement in theme/album.hbs at line 80 [6.4103770]

∅:D[10.8831] → [9.15691:16336]

B:BD[9.15691] → [9.15691:16336]

      var scrollWindow = function() {
        $('body').scroll(function(){        
          var $w = $(this), st =$(".page-top").position().top,navbar = $('.menubar'),y = (st) ? Math.abs(st):0;
          if (y > 150)  { if ( !navbar.hasClass('scrolled')) {navbar.addClass('scrolled');}}
          if (y < 150)  { if ( navbar.hasClass('scrolled'))  {navbar.removeClass('scrolled sleep');}}
          if ( y > 600) { if ( !navbar.hasClass('awake') )   {navbar.addClass('awake'); }}
          if ( y < 600 ) {if ( navbar.hasClass('awake') )    {navbar.removeClass('awake');navbar.addClass('sleep');}}
        });
      };
      // scrollWindow();

[10.8831]

[9.16336]

      //open popup
      $('.cd-open').on('click', function(event){
        event.preventDefault();
        $('.cd-popup').addClass('is-visible');
      });      
      //close popup
      $('.cd-popup-close').on('click', function(event){
          event.preventDefault();
          $('.cd-popup').removeClass('is-visible');
      });
      //close popup when clicking the esc keyboard button
      $(document).keyup(function(event){
          if(event.which=='27'){
            $('.cd-popup').removeClass('is-visible');
          }
      });

File addition: thumbsUp_app.png (----------)
[6.4107179]
File addition: thumbsUp.png (----------)
[6.4107179]
Insertion in README.md at line 9 [6.5728420]
[9.16720]
[9.16720]
```
![albums](docs/thumbsUp_app.png)
```
Insertion in README.md at line 22 [6.5728420]
[6.5728894]
[13.117503]
```
- Update appsettings.json
```

Deletion in README.md at line 29 [6.5728420]

B:BD[6.5729001] → [5.2710:2798]

∅:D[5.2798] → [6.5729001:5729002]

B:BD[6.5729001] → [6.5729001:5729002]

B:BD[6.5729002] → [5.2799:2948]


## Open Task 
How to add or handle additional setting (appsettings) with config.json ?
```bash
sample: appsettings.json
{
  "tab-home": "Fotobuch",
  "ablum-prefix-title": "Meine Alben",
  "album-card-title": "Öffne Album",
  .....
}

Replacement in README.md at line 51 [6.5728420]
B:BD[6.5730166] → [5.2954:3001]
```
    "appsettings": "PATH TO PROPERTYFILE.json"
```
[6.5730166]
[6.5730206]
```
    "settings": "PATH TO PROPERTYFILE.json"
```
Insertion in README.md at line 53 [6.5728420]
[6.5730208]
[13.117792]
Insertion in README.md at line 108 [6.5728420]
[13.119082]
[6.5731682]
```
  
```
Deletion in README.md at line 110 [6.5728420]
B:BD[6.5731686] → [6.5731686:5731732]
```
## Screenshots
![albums](docs/fotobook.png)
```
Deletion in README.md at line 111 [6.5728420]
∅:D[2.123] → [6.5731732:5731757]
B:BD[6.5731732] → [6.5731732:5731757]
B:BD[6.5731757] → [2.124:125]
∅:D[2.125] → [6.5731757:5731783]
B:BD[6.5731757] → [6.5731757:5731783]
```
![media](docs/album.png)
![media](docs/media.png)
```

New layout, additional apps setting

Dependencies

In channels

Change contents

File addition: thumbsup (d--x------)

File addition: src (d--x------)

File addition: website (d--x------)

File addition: website.js (----------)

File addition: bin (d--x------)

File addition: options.js (----------)

File addition: README.md (----------)

Replacement in theme/theme.less at line 8 [6.23]

Replacement in theme/theme.less at line 14 [6.23]

Replacement in theme/theme.less at line 21 [6.23]

Replacement in theme/theme.less at line 31 [6.23]

Replacement in theme/theme.less at line 33 [6.23]

Insertion in theme/theme.less at line 56 [6.23]

Replacement in theme/theme.less at line 58 [6.23]

Replacement in theme/public/styles/pagemenu.less at line 40 [9.320]

File addition: modal.less (----------)

Replacement in theme/public/styles/mobile.less at line 61 [6.279920]

Insertion in theme/public/styles/generic.less at line 98 [6.281978]

File addition: icons (d--x------)

File addition: site.webmanifest (----------)

File addition: mstile-150x150.png (----------)

File addition: favicon.ico (----------)

File addition: favicon-32x32.png (----------)

File addition: favicon-16x16.png (----------)

File addition: browserconfig.xml (----------)

File addition: apple-touch-icon.png (----------)

File addition: android-chrome-512x512.png (----------)

File addition: android-chrome-192x192.png (----------)

File deletion: crumbs.hbs

File addition: modal-window.hbs (----------)

Replacement in theme/partials/mediaItems.hbs at line 16 [6.4094768]

Replacement in theme/partials/galleryHeader.hbs at line 5 [11.1575]

Replacement in theme/partials/galleryHeader.hbs at line 7 [11.1575]

Replacement in theme/partials/galleryHeader.hbs at line 13 [11.1575]

Deletion in theme/partials/galleryHeader.hbs at line 20 [11.1575]

Replacement in theme/partials/galleryHeader.hbs at line 28 [11.1575]

Replacement in theme/partials/galleryHeader.hbs at line 49 [11.1575]

Replacement in theme/partials/galleryHeader-home.hbs at line 4 [9.14203]

Replacement in theme/partials/footer.hbs at line 2 [13.113711]

Replacement in theme/partials/coverItem.hbs at line 7 [13.113863]

Replacement in theme/partials/ablumTeaser.hbs at line 2 [13.115144]

Insertion in theme/partials/ablumTeaser.hbs at line 18 [13.115144]

Deletion in theme/partials/README.md at line 7 [6.4100036]

Insertion in theme/partials/README.md at line 46 [6.4100036]

File deletion: readSettings.js

File deletion: covertitle.js

File deletion: albumname.js

Deletion in theme/helpers/README.md at line 7 [6.4103141]

Deletion in theme/helpers/README.md at line 8 [6.4103141]

Deletion in theme/helpers/README.md at line 10 [6.4103141]

Replacement in theme/album.hbs at line 11 [6.4103770]

Insertion in theme/album.hbs at line 36 [6.4103770]

Replacement in theme/album.hbs at line 69 [6.4103770]

Deletion in theme/album.hbs at line 74 [6.4103770]

Replacement in theme/album.hbs at line 80 [6.4103770]

File addition: thumbsUp_app.png (----------)

File addition: thumbsUp.png (----------)

Insertion in README.md at line 9 [6.5728420]

Insertion in README.md at line 22 [6.5728420]

Deletion in README.md at line 29 [6.5728420]

Replacement in README.md at line 51 [6.5728420]

Insertion in README.md at line 53 [6.5728420]

Insertion in README.md at line 108 [6.5728420]

Deletion in README.md at line 110 [6.5728420]

Deletion in README.md at line 111 [6.5728420]