added preview filters...

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

ui (gen4)/css/experimenting.css

@@ -134,6 +134,17 @@ body {
 }
 
 
+/*********************************************************************/
+
+.image-bw {
+	filter: saturate(0);
+}
+.image-show-shadows {
+	filter: contrast(0.8) brightness(3) contrast(1.5);
+}
+
+
+
 /*********************************************************************/
 
 /* scrollbar setup... */

ui (gen4)/features/keyboard.js

@@ -383,6 +383,10 @@ module.GLOBAL_KEYBOARD = {
 		alt_S: 'sortDialog',
 
 
+		// filters...
+		';': 'togglePreviewFilter: "Show shadows" -- Preview shadows',
+		"'": 'togglePreviewFilter: "Black and white" -- Preview black and white',
+
 		// doc...
 		// XXX for debug...
 		//ctrl_G: function(){ $('.viewer').toggleClass('visible-gid') },

ui (gen4)/features/meta.js

@@ -77,6 +77,8 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 
 	'external-editor',
 
+	'ui-preview-filters',
+
 	// chrome...
 	'ui-app-buttons',
 	'ui-buttons',

ui (gen4)/features/ui.js

@@ -2521,6 +2521,85 @@ module.FailsafeDevTools = core.ImageGridFeatures.Feature({
 /*********************************************************************/
 // XXX experimental...
 
+var PreviewFilters
+module.PreviewFilters = core.ImageGridFeatures.Feature({
+	title: '',
+	doc: '',
+
+	tag: 'ui-preview-filters',
+	depends: [ 
+		'ui' 
+	],
+
+	config: {
+		'preview-filters': {
+			'Black and white': 'image-bw',
+			'Show shadows': 'image-show-shadows',
+			'No filters': 'none',
+		},
+	},
+
+	actions: actions.Actions({
+		togglePreviewFilter: ['Image/Preview filter',
+			core.doc`Toggle image preview filter
+
+			This is different to normal togglers in that toggling an explicit
+			state repeatedly will toggle between that state and 'No filters'
+			effectively toggling the filter on and off...
+
+				// toggle through all the filters...
+				.togglePreviewFilter()
+					-> state
+
+				// toggle 'Show shadows' on/off...
+				.togglePreviewFilter('Show shadows')
+					-> state
+
+				// togglue current filter off if applied... 
+				.togglePreviewFilter('!')
+					-> state
+
+			`,
+			toggler.Toggler(null,
+				function(_, state){ 
+					var filters = this.config['preview-filters']
+					var img = this.ribbons.getImage()
+
+					// get state...
+					if(state == null){
+						for(var s in filters){
+							if(img.hasClass(filters[s])){
+								return s
+							}
+						}
+						return 'No filters'
+					}
+
+					// clear filters...
+					var cls = filters[state]
+					var classes = Object.values(filters)
+						.filter(function(c){ return c != cls })
+					this.ribbons.viewer
+						.find('.'+ classes.join(', .'))
+							.removeClass(classes.join(' '))
+
+					// toggle filter...
+					if(state in filters){
+						img.toggleClass(cls)
+					}
+
+					return img.hasClass(cls) ? state : 'No filters'
+				},
+				function(){ 
+					return Object.keys(this.config['preview-filters']) })],
+	}),
+
+	handlers: [
+		['focusImage',
+			function(){ this.togglePreviewFilter('No filters') }],
+	],
+})
+
 // 		...not sure if this is the right way to go...
 // XXX need to get the minimal size and not the width as results will 
 // 		depend on viewer format...

ui (gen4)/lib/toggler.js

@@ -263,14 +263,14 @@ function(elem, state_accessor, states, callback_a, callback_b){
 		}
 
 		// update the element...
-		state_accessor.call(this, e, state)
+		//state_accessor.call(this, e, state)
+		var res = state_accessor.call(this, e, state)
+		action = res !== undefined ? res : action
 
 		// post callback...
 		if(callback_post != null){
 			var res = callback_post.apply(this, [action, e].concat(args))
-			if(res !== undefined){
-				action = res
-			}
+			action = res !== undefined ? res : action
 		}
 
 		return action