added dropping files, does not work in-browser from local file... also the whole thing gets slugish on large images...

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

ui/fullscreen.html

@@ -46,6 +46,54 @@ body {
 
 <script>
 
+// XXX stub DnD handlers...
+$(document)
+	.bind('dragover', function(e){
+		e.stopPropagation()
+		e.preventDefault()
+		// XXX is there a jQuery way out of this??
+		e.originalEvent.dataTransfer.dropEffect = 'copy' // Explicitly show this is a copy.
+
+		showInOverlay($('<div class="overlay-message">Drop files anywhere on the the screen...</div>'))
+	})
+	.bind('drop', function(e){
+		e.stopPropagation()
+		e.preventDefault()
+
+		// XXX is there a jQuery way out of this??
+		var files = e.originalEvent.dataTransfer.files
+
+		// XXX should we be using the loadJSON here???
+		// XXX desperatly need image caching and preview generation...
+
+		$('.field').children('.ribbon').remove()
+		var ribbon = $('<div class="ribbon"></div>')
+			.appendTo($('.field'))
+
+		for (var i = 0, f; f = files[i]; i++) {
+
+			if (!f.type.match('image.*')) {
+				continue
+			}
+
+			var reader = new FileReader()
+			reader.onload = function(i, ribbon){
+				return function(e){
+					// XXX need to avoid data URLs here and use plain old paths...
+					ribbon.append(makeImage(e.target.result, i))
+				}
+			}(i, ribbon)
+			reader.readAsDataURL(f)
+		}
+
+		$('.image').first().click()
+
+		$('.overlay').click()
+
+
+	})
+
+
 
 function setup(){
 	// XXX load state...

ui/gallery-prototype.js

@@ -900,10 +900,10 @@ function setupEvents(){
 	// keyboard...
 	if(DEBUG){
 		$(document)
-			.keydown(makeKeyboardHandler(keybindings, function(k){alert(k)}))
+			.keydown(makeKeyboardHandler(keybindings, ignorekeys, function(k){alert(k)}))
 	} else {
 		$(document)
-			.keydown(makeKeyboardHandler(keybindings))
+			.keydown(makeKeyboardHandler(keybindings, ignorekeys))
 	}
 	// swipe...
 	$('.viewer')
@@ -1111,12 +1111,15 @@ var KEYBOARD_HANDLER_PROPAGATE = false
  *
  * XXX might need to add meta information to generate sensible help...
  */
-function makeKeyboardHandler(keybindings, unhandled){
+function makeKeyboardHandler(keybindings, ignore, unhandled){
 	if(unhandled == null){
 		unhandled = function(){return false}
 	}
 	return function(evt){
 		var key = evt.keyCode
+		if(ignore != null && ignore.indexOf(key) != -1){
+			return true
+		}
 		// XXX ugly...
 		var modifers = evt.ctrlKey ? 'ctrl' : ''
 		modifers += evt.altKey ? (modifers != '' ? '+alt' : 'alt') : ''

ui/gallery.css

@@ -9,6 +9,14 @@
 .overlay {
 	display: none;
 }
+
+.overlay-message {
+	color: gray;
+	margin: 30px;
+	font-weight: bold;
+	font-style: italic;
+}
+
 .splash {
 	color: gray;
 	background-color: white;

ui/keybindings.js

@@ -1,5 +1,10 @@
 /*********************************************************************/
 // NOTE: use String.fromCharCode(code)...
+// list of keys to be ignored by handler...
+var ignorekeys = [
+	116,													//	F5
+	123,													//	F12
+]
 var keybindings = {
 	// togglable modes and options...
 	191: {
@@ -59,6 +64,8 @@ var keybindings = {
 	},
 	32:		39,												//	Space
 	188:	39,												//	>
+	186:	ImageGrid.prevScreenImages,						//	;
+	222:	ImageGrid.nextScreenImages,						//	'
 	// move view...
 	// XXX should these be s-up, s-down, ... ??
 	75:		ImageGrid.moveViewUp,							//	k
@@ -85,11 +92,12 @@ var keybindings = {
 	16:		function(){},
 	17:		16,
 	18:		16,
-	20:		16,												// Caps Lock
+	20:		16,												//	Caps Lock
 
 	// refresh...
 	// XXX make this into a real action...
-	116:	function(){ return DEBUG?true:false }			// F5
+	116:	function(){ return DEBUG?true:false },			//	F5
+	112:	116,											//	F12
 }
 
 

ui/transitions.css

@@ -1,11 +1,3 @@
-.unanimated {
-	-webkit-transition: none;
-	-moz-transition: none;
-	-o-transition: all 0 ease;
-	-ms-transition: none;	
-	transition: none;
-}
-
 .animated,
 /* mostly to animate the background... */
 .transitions-enabled.viewer,
@@ -14,6 +6,7 @@
 .transitions-enabled .demo-buttons,
 .transitions-enabled .controller,
 .transitions-enabled .controller-mini,
+.transitions-enabled .current-indicator,
 .transitions-enabled .container,
 .transitions-enabled .field,
 .transitions-enabled .ribbon, 
@@ -25,3 +18,13 @@
 	-ms-transition: all 0.2s ease;	
 	transition: all 0.2s ease;
 }
+
+
+.unanimated {
+	-webkit-transition: none;
+	-moz-transition: none;
+	-o-transition: all 0 ease;
+	-ms-transition: none;	
+	transition: none;
+}
+