started integrating widgets and actions...

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

ui (gen4)/css/widget/overlay.css

@@ -48,10 +48,12 @@
 		...need a way to go around this...
 */
 .blur>* {
-	-webkit-filter: blur(2px);
+	-webkit-filter: blur(2px) saturate(0.5);
-	filter: blur(2px);
+	filter: blur(2px) saturate(0.5);
 }
 .blur>.overlay-widget {
 	-webkit-filter: none;
 	filter: none;
 }
+
+

ui (gen4)/index.html

@@ -4,6 +4,8 @@
 
 <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">
 
 <!-- XXX remove before use... -->
 <style>

ui (gen4)/lib/actions.js

@@ -306,10 +306,12 @@ module.MetaActions = {
 			: arguments.length > 1 ? args2array(arguments)
 			: typeof(actions) == typeof('str') ? [actions]
 			: actions
+
 		// get the first defined set of docs in the inheritance chain...
 		actions.forEach(function(n){
 			var cur = that
 			res[n] = []
+			// go up the proto chain...
 			while(cur.__proto__ != null){
 				if(cur[n] != null && cur[n].doc != null){
 					res[n] = [ cur[n].doc, cur[n].long_doc ]
@@ -321,6 +323,33 @@ module.MetaActions = {
 		return res
 	},
 
+	getPath: function(actions){
+		var res = {}
+		var that = this
+		actions = actions == null ? this.actions
+			: arguments.length > 1 ? args2array(arguments)
+			: typeof(actions) == typeof('str') ? [actions]
+			: actions
+
+		// get the first defined set of docs in the inheritance chain...
+		actions.forEach(function(n){
+			var cur = that
+			// go up the proto chain...
+			while(cur.__proto__ != null){
+				if(cur[n] != null && cur[n].doc != null){
+					var doc = cur[n].doc
+					var long_doc = cur[n].long_doc
+					break
+				}
+				cur = cur.__proto__
+			}
+
+			res[(doc && doc.replace(/[\\\/]$/, '/'+n)) || n] = [n, doc, long_doc]
+		})
+		return res
+	},
+
+
 	// Get action handlers from the inheritance chain...
 	//
 	// NOTE: this collects both the event handlers (in order of hierarchy,

ui (gen4)/lib/widget/browse.js

@@ -19,6 +19,7 @@ define(function(require){ var module = {}
 console.log('>>> browse')
 
 
+var keyboard = require('../keyboard')
 // XXX
 var object = require('../../object')
 var widget = require('./widget')
@@ -135,6 +136,8 @@ var BrowserPrototype = {
 			'update',
 			'select',
 			'deselect',
+
+			'keydown',
 		],
 	},
 

ui (gen4)/lib/widget/overlay.js

@@ -20,7 +20,7 @@ var OverlayClassPrototype = {
 		var that = this
 		var overlay = $('<div>')
 			.addClass('overlay-widget')
-			.click(function(){
+			.on(options.nonPropagatedEvents.join(' '), function(){
 				event.stopPropagation()
 			})
 			.append($('<div>')
@@ -37,6 +37,12 @@ var OverlayClassPrototype = {
 
 var OverlayPrototype = {
 	dom: null,
+	options: {
+		nonPropagatedEvents: [
+			'clik',
+			//'keydown',
+		],
+	},
 
 	// XXX triggering events from here and from jQuery/dom has a 
 	// 		different effect...
@@ -70,6 +76,12 @@ var OverlayPrototype = {
 	__init__: function(parent, client, options){
 		var that = this
 		parent = this.parent = $(parent || 'body')
+		options = options || {}
+
+		// merge options...
+		var opts = Object.create(this.options)
+		Object.keys(options).forEach(function(n){ opts[n] = options[n] })
+		options = this.options = opts
 
 		var dom = this.dom = this.constructor.make(client, options)
 			.click(function(){

ui (gen4)/ribbons.js

@@ -11,7 +11,7 @@ console.log('>>> ribbons')
 //var DEBUG = DEBUG != null ? DEBUG : true
 
 // XXX is this correct...
-require('ext-lib/jquery')
+//require('ext-lib/jquery')
 
 var object = require('object')
 

ui (gen4)/ui.js

@@ -4,6 +4,7 @@
 *
 **********************************************************************/
 
+
 window.nodejs = (typeof(process) === 'object' && process.features.uv) 
 	? {
 		require: window.require,
@@ -54,6 +55,7 @@ var viewer = require('viewer')
 
 // widgets...
 var browse = require('lib/widget/browse')
+var overlay = require('lib/widget/overlay')
 
 
 
@@ -204,6 +206,8 @@ module.GLOBAL_KEYBOARD = {
 			default: 'toggleMark',
 		},
 		A: {
+			// XXX STUB...
+			alt: function(){ browseActions() },
 			ctrl: 'toggleMark!: "ribbon" "on"',
 		},
 		D: {
@@ -229,6 +233,29 @@ module.GLOBAL_KEYBOARD = {
 
 $(function(){
 
+	window.browse = browse
+	window.overlay = overlay
+
+
+	window.browseActions = function(){
+		var paths = a.getPath()
+		var actions = {}
+
+		Object.keys(paths).forEach(function(k){
+			var n = paths[k][0]
+			actions[k] = function(){
+				return a[n].apply(a)
+			}
+		})
+
+		var b = browse.makePathList(null, actions)
+		var o = overlay.Overlay($('body'), b.dom)
+
+		b.open(function(){ o.close() })
+
+		b.focus()
+	}
+
 	// XXX
 	window.a = testing.setupActions()
 		.load({

ui (gen4)/viewer.js

@@ -2421,23 +2421,23 @@ var ImageBookmarkActions = actions.Actions({
 		return this.data.tags['bookmark'].slice()
 	},
 
-	toggleBookmark: ['',
+	toggleBookmark: ['Bookmark/',
 		makeTagTogglerAction('bookmark')],
 	// action can be:
 	// 	'on'	- toggle all on
 	// 	'off'	- toggle all off
 	// 	'next'	- toggle each image to next state
-	toggleBookmarkOnMarked: ['',
+	toggleBookmarkOnMarked: ['Bookmark|Mark/',
 		function(action){ 
 			return this.toggleBookmark(this.data.getTaggedByAny('selected'), action) 
 		}],
 
-	prevBookmarked: ['',
+	prevBookmarked: ['Bookmark|Navigate/',
 		function(mode){ this.prevTagged('bookmark', mode) }],
-	nextBookmarked: ['',
+	nextBookmarked: ['Bookmark|Navigate/',
 		function(mode){ this.nextTagged('bookmark', mode) }],
 
-	cropBookmarked: ['',
+	cropBookmarked: ['Bookmark|Crop/',
 		function(flatten){ this.cropTagged('bookmark', 'any', flatten) }],
 })