diff --git a/ui/compatibility.js b/ui/compatibility.js new file mode 100755 index 00000000..f42fd8b8 --- /dev/null +++ b/ui/compatibility.js @@ -0,0 +1,117 @@ +/********************************************************************** +* +* +* +**********************************************************************/ + +//var DEBUG = DEBUG != null ? DEBUG : true + + +/*********************************************************************/ + +// load the target-specific handlers... +// CEF +if(window.CEF_dumpJSON != null){ + + console.log('CEF mode: loading...') + + var dumpJSON = CEF_dumpJSON + var listDir = CEF_listDir + var removeFile = CEF_removeFile + var runSystem = CEF_runSystem + +// node-webkit +} else if(window.require != null){ + + console.log('node-webkit mode: loading...') + + var fs = require('fs') + var proc = require('child_process') + var gui = require('nw.gui') + + var fp = /file:\/\/\// + + // Things ImageGrid needs... + // XXX do we need assync versions?? + window.listDir = function(path){ + if(fp.test(path)){ + // XXX will this work on Mac??? + path = path.replace(fp, '') + } + return fs.readdirSync(path) + } + window.dumpJSON = function(path, data){ + if(fp.test(path)){ + // XXX will this work on Mac??? + path = path.replace(fp, '') + } + return fs.writeFileSync(path, JSON.stringify(data), encoding='utf8') + } + window.removeFile = function(path){ + if(fp.test(path)){ + // XXX will this work on Mac??? + path = path.replace(fp, '') + } + return fs.unlinkSync(path) + } + window.runSystem = function(path){ + if(fp.test(path)){ + // XXX will this work on Mac??? + path = path.replace(fp, '') + } + return proc.exec(path) + } + + // XXX use a real toggler... + window.toggleFullscreenMode = createCSSClassToggler( + document.body, + '.full-screen-mode', + function(action){ + gui.Window.get().toggleFullscreen() + }) + window.closeWindow = function(){ + gui.Window.get().close() + } + window.showDevTools = function(){ + gui.Window.get().showDevTools() + } + window.reload = function(){ + gui.Window.get().reload() + } + + // load UI stuff... + $(function(){ + $('
') + .append($('
') + .text($('title').text())) + .append($('
×
')) + .appendTo($('body')) + }) + +// PhoneGap +} else if(false){ + + console.log('PhoneGap mode: loading...') + // XXX + + // stubs... + window.toggleFullscreenMode = function(){} + window.closeWindow = function(){} + window.showDevTools = function(){} + window.reload = function(){} + +// Bare Chrome... +} else { + console.log('Chrome mode: loading...') + + // stubs... + window.toggleFullscreenMode = function(){} + window.closeWindow = function(){} + window.showDevTools = function(){} + window.reload = function(){} +} + + + +/********************************************************************** +* vim:set ts=4 sw=4 : */ diff --git a/ui/files.js b/ui/files.js index 45b52c75..07fb10c1 100755 --- a/ui/files.js +++ b/ui/files.js @@ -7,15 +7,6 @@ //var DEBUG = DEBUG != null ? DEBUG : true -// load the target-specific handlers... -// CEF -if(window.CEF_dumpJSON != null){ - var dumpJSON = CEF_dumpJSON - var listDir = CEF_listDir - var removeFile = CEF_removeFile - var runSystem = CEF_runSystem -} - /********************************************************************** * File storage (Extension API -- CEF/PhoneGap/...) diff --git a/ui/index.html b/ui/index.html index 2264db49..fb80cb77 100755 --- a/ui/index.html +++ b/ui/index.html @@ -54,6 +54,8 @@ less = { + + @@ -200,7 +202,7 @@ $(function(){ } }) - */ + */ // we have an image file... if((DATA_ATTR + '_BASE_URL') in localStorage){ @@ -283,6 +285,7 @@ Populated
+ diff --git a/ui/keybindings.js b/ui/keybindings.js index e9275305..41f1314b 100755 --- a/ui/keybindings.js +++ b/ui/keybindings.js @@ -539,7 +539,7 @@ var KEYBOARD_CONFIG = { // XXX make F4 a default editor and E a default viewer... F4: { default: 'E', - alt: doc('Close viewer'), + alt: doc('Close viewer', function(){ closeWindow() }), }, @@ -562,7 +562,11 @@ var KEYBOARD_CONFIG = { // NOTE: this is handled by the wrapper at this point, so we do // not have to do anything here... - F11: doc('Toggle full screen mode'), + F11: doc('Toggle full screen mode', function(){ toggleFullscreenMode() }), + + // XXX DEBUG MODE... + F12: doc('Show devTools', function(){ showDevTools() }), + F5: doc('Reload app', function(){ reload() }), // Help and info... diff --git a/ui/layout.css b/ui/layout.css index 248053c7..84d06ec8 100644 --- a/ui/layout.css +++ b/ui/layout.css @@ -19,6 +19,66 @@ body { padding: 0px; margin: 0px; } +/************************************************************** UI ***/ +.title-bar { + display: block; + position: fixed; + content: ""; + top: 0px; + left: 0px; + height: 20px; + width: 100%; + color: white; + background: black; + overflow: hidden; + opacity: 0; + z-index: 10000; + /* node-webkit */ + + -webkit-app-region: drag; +} +.title-bar:hover { + opacity: 1; +} +.title-bar .title { + display: inline-block; + float: left; + height: 20px; + width: auto; + color: white; + background: transparent; + font-size: 11px; + font-style: italic; + font-weight: bold; + vertical-align: middle; + text-align: left; + margin: 2px; + margin-left: 10px; +} +.title-bar .button { + display: inline-block; + float: right; + width: 20px; + height: 20px; + color: white; + background: transparent; + font-size: 18px; + vertical-align: middle; + /* node-webkit */ + + -webkit-app-region: no-drag; +} +.title-bar .button:hover { + cursor: hand; +} +.title-bar .close:hover { + color: red; +} +/* +.full-screen-mode .title-bar { + display: none; +} +*/ /********************************************************** Viewer ***/ .viewer { position: relative; diff --git a/ui/layout.less b/ui/layout.less index 7ee9fffe..125f99c3 100755 --- a/ui/layout.less +++ b/ui/layout.less @@ -72,6 +72,86 @@ body { +/************************************************************** UI ***/ + +.title-bar { + display: block; + position: fixed; + content: ""; + + top: 0px; + left: 0px; + height: 20px; + width: 100%; + + color: white; + background: black; + + overflow: hidden; + + opacity: 0; + + z-index: 10000; + + /* node-webkit */ + -webkit-app-region: drag; +} +.title-bar:hover { + opacity: 1; +} + +.title-bar .title { + display: inline-block; + float: left; + + height: 20px; + width: auto; + + color: white; + background: transparent; + + font-size: 11px; + font-style: italic; + font-weight: bold; + + vertical-align: middle; + text-align: left; + + margin: 2px; + margin-left: 10px; +} + +.title-bar .button { + display: inline-block; + float: right; + + width: 20px; + height: 20px; + + color: white; + background: transparent; + + font-size: 18px; + vertical-align: middle; + + /* node-webkit */ + -webkit-app-region: no-drag; +} +.title-bar .button:hover { + cursor: hand; +} + +.title-bar .close:hover { + color: red; +} + +/* +.full-screen-mode .title-bar { + display: none; +} +*/ + + /********************************************************** Viewer ***/ .viewer { position: relative; diff --git a/ui/package.json b/ui/package.json new file mode 100755 index 00000000..87ee0d28 --- /dev/null +++ b/ui/package.json @@ -0,0 +1,16 @@ +{ + "name": "ImageGrid.Viewer", + "main": "index.html", + "version": "0.0.1", + + "window": { + "title": "ImageGrid.Viewer", + "position": "center", + "width": 900, + "height": 700, + "min_width": 400, + "min_height": 400, + "frame": false, + "toolbar": false + } +} diff --git a/ui/ui.js b/ui/ui.js index 516a36e8..0b458fca 100755 --- a/ui/ui.js +++ b/ui/ui.js @@ -75,7 +75,7 @@ function flashIndicator(direction){ // shift up/down... prev: '.up-indicator', next: '.down-indicator', - // hit start/end/top/bottom... + // hit start/end/top/bottom of view... start: '.start-indicator', end: '.end-indicator', top: '.top-indicator',