flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-28 18:00:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

reworked svg filters, some tweaking and refactoring...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2020-12-11 06:24:22 +03:00
parent 6b88e8f596
commit ec301c6fa4
13 changed files with 140 additions and 327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Viewer/css/experimenting.css
View File

@ -159,6 +159,12 @@ body {
/* XXX this does not work in chrome + local file... */ /* XXX this does not work in chrome + local file... */
/*filter: url(filters.svg#EdgeDetect);*/ /*filter: url(filters.svg#EdgeDetect);*/
} }
.image-shadows-and-highlights {
filter: url(#ShadowsAndHilights);
}
.image-gamma-shadows {
filter: url(#GammaShadows);
}

23
Viewer/css/filters.svg
View File

@ -2,8 +2,31 @@
<!-- edge detect --> <!-- edge detect -->
<filter id="EdgeDetect"> <filter id="EdgeDetect">
<!--feConvolveMatrix order="3 3" preserveAlpha="true" divisor="1" bias="-1.4" kernelMatrix="-1 -1 -1 -1 9 -1 -1 -1 -1"/-->
<feConvolveMatrix order="3 3" preserveAlpha="true" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1"/> <feConvolveMatrix order="3 3" preserveAlpha="true" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1"/>
</filter> </filter>
<!-- shadows and highlights
gradient map: [blue 0-5% black 93-96% white]
via: https://justcode.today/filters/ -->
<filter id="ShadowsAndHilights">
<fecolormatrix type="saturate" values="0" />
<feComponentTransfer color-interpolation-filters="sRGB" result="cutoff">
<feFuncR type="table" tableValues="0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.33,0.67,1,1,1,1"/>
<feFuncG type="table" tableValues="0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.33,0.67,1,1,1,1"/>
<feFuncB type="table" tableValues="1,0.8,0.6,0.4,0.2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.33,0.67,1,1,1,1"/>
</feComponentTransfer>
<feBlend mode="difference" in="SourceGraphic" in2="cutoff"/>
</filter>
<!-- gamma shadows -->
<filter id="GammaShadows">
<feComponentTransfer color-interpolation-filters="sRGB">
<feFuncR type="gamma" exponent="0.3" amplitude="1.0" offset="0"></feFuncR>
<feFuncG type="gamma" exponent="0.3" amplitude="1.0" offset="0"></feFuncG>
<feFuncB type="gamma" exponent="0.3" amplitude="1.0" offset="0"></feFuncB>
</feComponentTransfer>
</filter>
</svg> </svg>
<!-- vim:set sw=4 ts=4 : --> <!-- vim:set sw=4 ts=4 : -->

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 300 B

After

Width:  |  Height:  |  Size: 1.9 KiB

20
Viewer/doc/NOTES
View File

@ -37,3 +37,23 @@ This seems a bit confusing, so at least the naming convention should be
revised. revised.
Entry points
============
The current state of things is far from optimal -- we have "three"
"different" entry points:
- index.html - Browser
- e.js - electron
-> electron.html - electron-specific html
- ig.js - node
-> e.js - node can spawn an electron app
The goal is to simplify this by merging the electron/node entry points
and merging the html files into one.

77
Viewer/e.js
View File

@ -4,40 +4,24 @@
* ImageGrid.Viewer Electron entry point... * ImageGrid.Viewer Electron entry point...
* *
* *
* NOTE: this is kept as simple as possible to speed up initial loading.
*
**********************************************************************/ **********************************************************************/
//require('v8-compile-cache') //require('v8-compile-cache')
var electron = require('electron') var electron = require('electron')
var app = electron.app
var BrowserWindow = electron.BrowserWindow
var path = require('path') var path = require('path')
var url = require('url') var url = require('url')
//var fs = require('fs')
var argv = require('ig-argv')
var VERSION = require('./version').version var VERSION = require('./version').version
//--------------------------------------------------------------------- //---------------------------------------------------------------------
//require('./cfg/requirejs') var app = electron.app
var BrowserWindow = electron.BrowserWindow
//var _require = require
//require = requirejs
/*********************************************************************/
// XXX process args...
// ...might be a good idea to process args in two stages:
// 1) process pre-start args:
// splash screen opts
// debug stuff (dev tools etc)
// start mode (ui vs cli ...)
// 2) process the rest of the args within the started context...
@ -45,13 +29,10 @@ var VERSION = require('./version').version
var win var win
// XXX move this to splash.js (or an electron-specific variant of it) // XXX might be nice to show load progress on splash...
// and use both here and in app.js...
// ...another way would be to make this module importable...
function createSplash(){ function createSplash(){
// NOTE: this is done here as this does not depend on code loading, // NOTE: this is done here as this does not depend on code loading,
// thus showing the splash significantly faster... // thus showing the splash significantly faster...
// XXX also show load progress here...
var splash = global.splash = new BrowserWindow({ var splash = global.splash = new BrowserWindow({
// let the window to get ready before we show it to the user... // let the window to get ready before we show it to the user...
show: false, show: false,
@ -73,8 +54,6 @@ function createSplash(){
autoHideMenuBar: true, autoHideMenuBar: true,
}) })
splash.loadURL(url.format({ splash.loadURL(url.format({
// XXX unify this with index.html
//pathname: path.join(__dirname, 'index.html'),
pathname: path.join(__dirname, 'splash.html'), pathname: path.join(__dirname, 'splash.html'),
protocol: 'file:', protocol: 'file:',
slashes: true slashes: true
@ -93,9 +72,10 @@ function createSplash(){
disabled ? disabled ?
splash.destroy() splash.destroy()
: splash.show() }) }) : splash.show() }) })
return splash return splash }
}
// XXX get initial settings from config...
// XXX unify index.html and electron.html
function createWindow(){ function createWindow(){
// Create the browser window. // Create the browser window.
win = new BrowserWindow({ win = new BrowserWindow({
@ -105,14 +85,11 @@ function createWindow(){
enableRemoteModule: true, enableRemoteModule: true,
}, },
// let the window to get ready before we show it to the user... // let the window get ready before we show it to the user...
show: false, show: false,
// XXX get from config... (???)
// XXX for some reason this shows as black...
backgroundColor: '#333333', backgroundColor: '#333333',
width: 800, width: 800,
height: 600, height: 600,
@ -122,38 +99,23 @@ function createWindow(){
}) })
// disable default menu... // disable default menu...
win.setMenu(null) win.setMenu(null)
//win.openDevTools()
// and load the index.html of the app.
win.loadURL(url.format({ win.loadURL(url.format({
// XXX unify this with index.html pathname: path.join(__dirname, 'index.html'),
//pathname: path.join(__dirname, 'index.html'), //pathname: path.join(__dirname, 'electron.html'),
pathname: path.join(__dirname, 'electron.html'),
protocol: 'file:', protocol: 'file:',
slashes: true slashes: true
})) }))
// XXX HACK: pass this in a formal way... (???)
win.once('ready-to-show',
function(){ global.readyToShow = true })
win.on('closed',
function(){ win = null })
// XXX HACK: pass this in a formal way... // devtools for different windows...
win.once('ready-to-show', function(){
global.readyToShow = true
})
// Open the DevTools.
//win.webContents.openDevTools() //win.webContents.openDevTools()
//win.openDevTools()
// Emitted when the window is closed. return win }
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
return win
}
@ -182,5 +144,6 @@ app.on('activate', function(){
/********************************************************************** /**********************************************************************
* vim:set ts=4 sw=4 : */ * vim:set ts=4 sw=4 : */

161
Viewer/electron.html
View File

@ -1,161 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--meta http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline' 'unsafe-eval';"-->
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-Bold.ttf" />
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-BoldItalic.ttf" />
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-ExtraBold.ttf" />
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf" />
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-Italic.ttf" />
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-Light.ttf" />
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-LightItalic.ttf" />
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-Regular.ttf" />
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-Semibold.ttf" />
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-SemiboldItalic.ttf" />
<link rel="stylesheet" href="css/fonts.css" />
<link rel="stylesheet" href="css/layout.css" />
<link rel="stylesheet" href="css/editor.css" />
<link rel="stylesheet" href="css/widget/browse.css" />
<link rel="stylesheet" href="css/widget/overlay.css" />
<link rel="stylesheet" href="css/widget/drawer.css" />
<link rel="stylesheet" href="css/loader.css" />
<link rel="stylesheet" href="css/experimenting.css" />
<script>
if(window.require){
Object.defineProperty(window, 'STARTUP_DEVTOOLS_TIMEOUT', {
get: function(){
return parseInt(localStorage.STARTUP_DEVTOOLS_TIMEOUT || 5000) },
set: function(value){
if(value == null){
delete localStorage.STARTUP_DEVTOOLS_TIMEOUT
return
}
value = parseInt(value)
;(value || value == 0)
&& (localStorage.STARTUP_DEVTOOLS_TIMEOUT = value) }, })
window.__devtools_failsafe = setTimeout(function(){
// nw...
if(window.nw){
nw.Window.get().showDevTools()
// electron...
} else {
try{
require('electron').remote.getCurrentWindow().openDevTools()
} catch(err){ }
}
}, STARTUP_DEVTOOLS_TIMEOUT)
}
</script>
<!-- Electron related fix -->
<script>if(typeof module === 'object'){ window.module = module; module = undefined }</script>
<!-- jQuery -->
<script src="ext-lib/jquery.js"></script>
<!--script src="ext-lib\jquery-1.9.1.js"></script-->
<!-- migrating to jQuery 1.9.x -->
<!--script src="ext-lib/jquery-migrate-1.4.1.js"></script-->
<!-- migrating to jQuery 3.x -->
<!--script src="ext-lib/jquery-migrate-3.0.0.js"></script-->
<script src="ext-lib/jquery-ui.js"></script>
<script src="ext-lib/jquery.ui.touch-punch.min.js"></script>
<!-- preact.js -->
<!--script src="node_modules/preact/dist/preact.min.js"></script-->
<!-- velocity.js -->
<script src="ext-lib/velocity.min.js"></script>
<script src="ext-lib/virtual-dom.js"></script>
<!-- hammer.js -->
<script src="ext-lib/hammer.min.js"></script>
<script src="ext-lib/jquery.hammer.js"></script>
<script src="lib/jli.js"></script>
<!-- Electron related unfix -->
<script>if(window.module){ module = window.module }</script>
<script>
require('./cfg/requirejs')
requirejs('ui')
</script>
</head>
<body>
<!--
XXX STUB: this fixes Chrome's tendency to mess up full screen colors unless a
video is present and visible...
-->
<video style="display:block; position:absolute; width:1px; height:1px; top:0px; left:0px" tabindex="-1">
<source src="data/blank.mp4" type="video/mp4">
</video>
<!--
XXX this lives in css/filters.svg but Chrome refuses to reference
it's internals from the file: protocol...
-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0%" height="0%" class="svg-filters">
<!-- edge detect -->
<filter id="EdgeDetect">
<feConvolveMatrix order="3 3" preserveAlpha="true" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1"/>
</filter>
</svg>
<!-- for viewer structure doc see: ribbons.js... -->
<!--div class="viewer gray marks-visible" empty-help="Press 'O' to load, 'F1' for help or '?' for keyboard mappings."-->
<!--div class="ribbon-set"-->
<!-- DEBUG: remove when not needed... -->
<!--div class="point" title="current origin point"> </div-->
<!-- DEBUG: end -->
<!--/div-->
<!-- XXX should these be here???
<div class="overlay-block">
<div class="background"></div>
<div class="content"></div>
</div>
-->
<!-- DEBUG: remove when not needed... -->
<!--div class="container-center"> </div-->
<!-- DEBUG: end -->
<!--/div-->
<div class="viewer gray marks-visible" tabindex="0"></div>
<!-- vim:set ts=4 sw=4 spell : -->
</body>
</html>

4
Viewer/features/all.js
View File

@ -28,13 +28,9 @@ require('features/ui')
// XXX // XXX
require('features/ui-blank-render') require('features/ui-blank-render')
require('features/ui-ribbons') require('features/ui-ribbons')
//require('features/ui-preact-render')
//require('features/ui-virtual-dom')
//require('features/ui-react')
// XXX // XXX
require('features/ui-partial-ribbons-precache') require('features/ui-partial-ribbons-precache')
require('features/ui-partial-ribbons-2') require('features/ui-partial-ribbons-2')
//require('features/ui-partial-ribbons-vdom')
require('features/ui-single-image') require('features/ui-single-image')
require('features/ui-chrome') require('features/ui-chrome')
require('features/ui-progress') require('features/ui-progress')

10
Viewer/features/cli.js
View File

@ -122,7 +122,7 @@ var CLIActions = actions.Actions({
}], }],
// handle logger progress... // handle logger progress...
// XXX this is a copy from ui-progress -- need to reuse... // XXX this is a copy from ui-progress -- need to reuse if possible...
handleLogItem: ['- System/', handleLogItem: ['- System/',
function(logger, path, status, ...rest){ function(logger, path, status, ...rest){
var msg = path.join(': ') var msg = path.join(': ')
@ -230,7 +230,7 @@ var CLIActions = actions.Actions({
|| global.ig.isStopped()) || global.ig.isStopped())
&& process.exit() }) && process.exit() })
this.__keep_running = true }], this.__keep_running = true }],
// XXX /*/ XXX
startWorker: ['- System/Start as worker', startWorker: ['- System/Start as worker',
{cli: '-worker'}, {cli: '-worker'},
function(){ function(){
@ -239,7 +239,7 @@ var CLIActions = actions.Actions({
// Actions... // Actions...
// //
/*/ XXX // XXX
// XXX this should be a nested parser... // XXX this should be a nested parser...
// args: // args:
// from=PATH // from=PATH
@ -305,13 +305,13 @@ var CLIActions = actions.Actions({
doc: 'Include virtual blocks', doc: 'Include virtual blocks',
arg: '| include-virtual', arg: '| include-virtual',
type: 'bool', type: 'bool',
value: true, //value: true,
default: true, }, default: true, },
'-clean-target': { '-clean-target': {
doc: 'Cleanup target before export (backup)', doc: 'Cleanup target before export (backup)',
arg: '| clean-target', arg: '| clean-target',
type: 'bool', type: 'bool',
value: true, //value: true,
default: true, }, default: true, },
'-no-*': { '-no-*': {
doc: 'Negate boolean option value', doc: 'Negate boolean option value',

4
Viewer/features/keyboard.js
View File

@ -456,8 +456,8 @@ module.GLOBAL_KEYBOARD = {
// filters... // filters...
// NOTE: Esc will also clear the filter (see "Preview filter" mode above)... // NOTE: Esc will also clear the filter (see "Preview filter" mode above)...
shift_F: 'browseActions: "/Image/Preview filter/" -- Preview filters...', shift_F: 'browseActions: "/Image/Preview filter/" -- Preview filters...',
';': 'togglePreviewFilter: "Show shadows" -- Preview shadows', ';': 'togglePreviewFilter: "Show clipping" -- Preview clipping',
':': 'togglePreviewFilter: "Show highlights" -- Preview highlights', ':': 'togglePreviewFilter: "Show shadows" -- Preview shadows',
'caps+:': ':', 'caps+:': ':',
'"': 'togglePreviewFilter: "Black and white" -- Preview black and white', '"': 'togglePreviewFilter: "Black and white" -- Preview black and white',
"'": 'togglePreviewFilter: "Edge detect" -- Show edges', "'": 'togglePreviewFilter: "Edge detect" -- Show edges',

7
Viewer/features/ui.js
View File

@ -2220,13 +2220,16 @@ module.PreviewFilters = core.ImageGridFeatures.Feature({
config: { config: {
'preview-filters': { 'preview-filters': {
// exposure aids... // exposure aids...
'Show shadows': 'image-show-shadows', //'Show shadows': 'image-show-shadows',
'Show highlights': 'image-show-highlights', //'Show highlights': 'image-show-highlights',
'Show clipping': 'image-shadows-and-highlights',
'Show shadows': 'image-gamma-shadows',
// sharpness aids... // sharpness aids...
'Black and white': 'image-bw', 'Black and white': 'image-bw',
'Edge detect': 'image-edge-detect', 'Edge detect': 'image-edge-detect',
'No filters': 'none', 'No filters': 'none',
}, },
}, },

13
Viewer/ig.js
View File

@ -25,27 +25,23 @@ global.requirejs =
//--------------------------------------------------------------------- /*********************************************************************/
// XXX need to automate this...
var core = require('features/core') var core = require('features/core')
var base = require('features/base') // XXX for some reason if this is not loaded here things break in CLI...
// ...setting priority does not help...
var cli = require('features/cli') var cli = require('features/cli')
var meta = require('features/meta') var meta = require('features/meta')
/*********************************************************************/ //---------------------------------------------------------------------
// NOTE: this is here to simplify importing... // NOTE: this is here to simplify importing...
var ImageGridFeatures = var ImageGridFeatures =
module.ImageGridFeatures = module.ImageGridFeatures =
core.ImageGridFeatures core.ImageGridFeatures
//---------------------------------------------------------------------
// setup actions and start... // setup actions and start...
ImageGridFeatures ImageGridFeatures
.setup([ .setup([
@ -56,5 +52,6 @@ ImageGridFeatures
/********************************************************************** /**********************************************************************
* vim:set ts=4 sw=4 : */ * vim:set ts=4 sw=4 : */

3
Viewer/imagegrid/file.js
View File

@ -26,7 +26,6 @@ var data = require('imagegrid/data')
var images = require('imagegrid/images') var images = require('imagegrid/images')
var util = require('lib/util') var util = require('lib/util')
var tasks = require('lib/tasks')
@ -735,8 +734,6 @@ function(base, pattern, previews, index_dir, absolute_path){
var copyPreviews = var copyPreviews =
module.copyPreviews = module.copyPreviews =
function(){ function(){
var q = tasks.Queue.clone()
// XXX // XXX
} }

137
Viewer/index.html
View File

@ -1,15 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>ImageGrid.Viewer</title>
<title></title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<!--meta http-equiv="Content-Security-Policy" <!--meta http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline' 'unsafe-eval';"--> content="script-src 'self' 'unsafe-inline' 'unsafe-eval';"-->
<meta name="msapplication-tap-highlight" content="no" /> <meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="width=device-width, user-scalable=no" /> <meta name="viewport" content="width=device-width, user-scalable=no" />
<!-- Fonts -->
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-Bold.ttf" /> <link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-Bold.ttf" />
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-BoldItalic.ttf" /> <link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-BoldItalic.ttf" />
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-ExtraBold.ttf" /> <link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-ExtraBold.ttf" />
@ -20,20 +18,18 @@
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-Regular.ttf" /> <link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-Regular.ttf" />
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-Semibold.ttf" /> <link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-Semibold.ttf" />
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-SemiboldItalic.ttf" /> <link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-SemiboldItalic.ttf" />
<!-- CSS -->
<link rel="stylesheet" href="css/fonts.css" /> <link rel="stylesheet" href="css/fonts.css" />
<link rel="stylesheet" href="css/layout.css" /> <link rel="stylesheet" href="css/layout.css" />
<link rel="stylesheet" href="css/editor.css" /> <link rel="stylesheet" href="css/editor.css" />
<link rel="stylesheet" href="css/widget/browse.css" /> <link rel="stylesheet" href="css/widget/browse.css" />
<link rel="stylesheet" href="css/widget/overlay.css" /> <link rel="stylesheet" href="css/widget/overlay.css" />
<link rel="stylesheet" href="css/widget/drawer.css" /> <link rel="stylesheet" href="css/widget/drawer.css" />
<link rel="stylesheet" href="css/loader.css" /> <link rel="stylesheet" href="css/loader.css" />
<link rel="stylesheet" href="css/experimenting.css" /> <link rel="stylesheet" href="css/experimenting.css" />
<!-- Scripts -->
<!-- DevTools fail-safe for electron/nw... -->
<script> <script>
if(window.require){ if(window.require){
Object.defineProperty(window, 'STARTUP_DEVTOOLS_TIMEOUT', { Object.defineProperty(window, 'STARTUP_DEVTOOLS_TIMEOUT', {
@ -42,8 +38,7 @@ if(window.require){
set: function(value){ set: function(value){
if(value == null){ if(value == null){
delete localStorage.STARTUP_DEVTOOLS_TIMEOUT delete localStorage.STARTUP_DEVTOOLS_TIMEOUT
return return }
}
value = parseInt(value) value = parseInt(value)
;(value || value == 0) ;(value || value == 0)
&& (localStorage.STARTUP_DEVTOOLS_TIMEOUT = value) }, }) && (localStorage.STARTUP_DEVTOOLS_TIMEOUT = value) }, })
@ -52,116 +47,90 @@ if(window.require){
// nw... // nw...
if(window.nw){ if(window.nw){
nw.Window.get().showDevTools() nw.Window.get().showDevTools()
// electron... // electron...
} else { } else {
try{ try{
require('electron').remote.getCurrentWindow().openDevTools() require('electron').remote.getCurrentWindow().openDevTools()
} catch(err){ } } catch(err){ } }
} }, STARTUP_DEVTOOLS_TIMEOUT) }
}, STARTUP_DEVTOOLS_TIMEOUT)
}
</script> </script>
<!-- Electron related fix --> <!-- Electron fix -->
<script>if(typeof module === 'object'){ window.module = module; module = undefined }</script> <script>if(typeof(module) == 'object'){ window.module = module; module = undefined }</script>
<!-- jQuery --> <!-- jQuery -->
<script src="ext-lib/jquery.js"></script> <script src="ext-lib/jquery.js"></script>
<!--script src="ext-lib\jquery-1.9.1.js"></script-->
<!-- migrating to jQuery 1.9.x -->
<!--script src="ext-lib/jquery-migrate-1.4.1.js"></script-->
<!-- migrating to jQuery 3.x -->
<!--script src="ext-lib/jquery-migrate-3.0.0.js"></script-->
<script src="ext-lib/jquery-ui.js"></script> <script src="ext-lib/jquery-ui.js"></script>
<script src="ext-lib/jquery.ui.touch-punch.min.js"></script> <script src="ext-lib/jquery.ui.touch-punch.min.js"></script>
<!-- preact.js -->
<!--script src="node_modules/preact/dist/preact.min.js"></script-->
<!-- velocity.js --> <!-- velocity.js -->
<script src="ext-lib/velocity.min.js"></script> <script src="ext-lib/velocity.min.js"></script>
<script src="ext-lib/virtual-dom.js"></script>
<!-- hammer.js --> <!-- hammer.js -->
<script src="ext-lib/hammer.min.js"></script> <script src="ext-lib/hammer.min.js"></script>
<script src="ext-lib/jquery.hammer.js"></script> <script src="ext-lib/jquery.hammer.js"></script>
<!-- lib -->
<script src="lib/jli.js"></script> <script src="lib/jli.js"></script>
<!-- Electron unfix -->
<!-- Electron related unfix -->
<script>if(window.module){ module = window.module }</script> <script>if(window.module){ module = window.module }</script>
<!-- RequireJS -->
<script src="ext-lib/require.js"></script> <script>
<script src="cfg/requirejs.js"></script> // Electron...
<script> // NOTE: we need to load the electron way first because the other way
// around requirejs messes things up...
typeof(process) != 'undefined' ? if(typeof(process) != 'undefined'){
require('./cfg/requirejs') require('./cfg/requirejs')
: requirejs(['cfg/requirejs']) requirejs('ui') }
requirejs(['ui']) </script>
<script src="ext-lib/require.js"></script>
<script>
// Browser...
if(typeof(process) == 'undefined'){
requirejs(['cfg/requirejs'])
requirejs(['ui']) }
</script> </script>
</head> </head>
<body> <body>
<!-- XXX STUB: this fixes Chrome's tendency to mess up full screen colors
<!-- unless a video is present and visible... -->
XXX STUB: this fixes Chrome's tendency to mess up full screen colors unless a
video is present and visible...
-->
<video style="display:block; position:absolute; width:1px; height:1px; top:0px; left:0px" tabindex="-1"> <video style="display:block; position:absolute; width:1px; height:1px; top:0px; left:0px" tabindex="-1">
<source src="data/blank.mp4" type="video/mp4"> <source src="data/blank.mp4" type="video/mp4">
</video> </video>
<!-- XXX STUB: this lives in css/filters.svg but Chrome refuses to reference
it's internals from the file:// protocol... -->
<!--
XXX this lives in css/filters.svg but Chrome refuses to reference
it's internals from the file: protocol...
-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0%" height="0%" class="svg-filters"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0%" height="0%" class="svg-filters">
<!-- edge detect --> <!-- edge detect -->
<filter id="EdgeDetect"> <filter id="EdgeDetect">
<!--feConvolveMatrix order="3 3" preserveAlpha="true" divisor="1" bias="-1.4" kernelMatrix="-1 -1 -1 -1 9 -1 -1 -1 -1"/-->
<feConvolveMatrix order="3 3" preserveAlpha="true" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1"/> <feConvolveMatrix order="3 3" preserveAlpha="true" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1"/>
</filter> </filter>
<!-- shadows and highlights
gradient map: [blue 0-5% black 93-96% white]
via: https://justcode.today/filters/ -->
<filter id="ShadowsAndHilights">
<fecolormatrix type="saturate" values="0" />
<feComponentTransfer color-interpolation-filters="sRGB" result="cutoff">
<feFuncR type="table" tableValues="0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.33,0.67,1,1,1,1"/>
<feFuncG type="table" tableValues="0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.33,0.67,1,1,1,1"/>
<feFuncB type="table" tableValues="1,0.8,0.6,0.4,0.2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.33,0.67,1,1,1,1"/>
</feComponentTransfer>
<feBlend mode="difference" in="SourceGraphic" in2="cutoff"/>
</filter>
<!-- gamma shadows -->
<filter id="GammaShadows">
<feComponentTransfer color-interpolation-filters="sRGB">
<feFuncR type="gamma" exponent="0.3" amplitude="1.0" offset="0"></feFuncR>
<feFuncG type="gamma" exponent="0.3" amplitude="1.0" offset="0"></feFuncG>
<feFuncB type="gamma" exponent="0.3" amplitude="1.0" offset="0"></feFuncB>
</feComponentTransfer>
</filter>
</svg> </svg>
<!-- The Viewer block (see: imagegrid/ribbons.js) -->
<!-- for viewer structure doc see: ribbons.js... -->
<!--div class="viewer gray marks-visible" empty-help="Press 'O' to load, 'F1' for help or '?' for keyboard mappings."-->
<!--div class="ribbon-set"-->
<!-- DEBUG: remove when not needed... -->
<!--div class="point" title="current origin point"> </div-->
<!-- DEBUG: end -->
<!--/div-->
<!-- XXX should these be here???
<div class="overlay-block">
<div class="background"></div>
<div class="content"></div>
</div>
-->
<!-- DEBUG: remove when not needed... -->
<!--div class="container-center"> </div-->
<!-- DEBUG: end -->
<!--/div-->
<div class="viewer gray marks-visible" tabindex="0"></div> <div class="viewer gray marks-visible" tabindex="0"></div>

2
Viewer/splash.html
View File

@ -46,7 +46,7 @@ body {
} }
</style> </style>
<body> <body onclick="window.close()">
<div class="block"> <div class="block">
<div class="title"> <div class="title">
ImageGrid.Viewer ImageGrid.Viewer