added node-webkit support, not yet final...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

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(){
+		$('<div class="title-bar"/>')
+			.append($('<div class="title"></div>')
+				.text($('title').text()))
+			.append($('<div class="button close" onclick="closeWindow()">&times;</div>'))
+			.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 :                                                */

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

ui/index.html

@@ -54,6 +54,8 @@ less = {
 <script src="lib/keyboard.js"></script>
 <script src="lib/scroller.js"></script>
 
+<script src="compatibility.js"></script>
+
 <script src="base.js"></script>
 <script src="modes.js"></script>
 <script src="marks.js"></script>
@@ -200,7 +202,7 @@ $(function(){
 			}
 
 		})
-		*/
+	*/
 
 	// we have an image file...
 	if((DATA_ATTR + '_BASE_URL') in localStorage){
@@ -283,6 +285,7 @@ Populated
 		<div class="background"></div>
 		<div class="content"></div>
 	</div>
+
 </div>
 
 

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

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;

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;

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
+  }
+}

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',