added cursor auto-hide...

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

ui (gen4)/css/layout.css

@@ -100,6 +100,13 @@
   font-size: small;
   opacity: 0.9;
 }
+.cursor-hidden {
+  cursor: none;
+}
+.cursor-hidden-r,
+.cursor-hidden-r * {
+  cursor: none !important;
+}
 /*********************************************************************/
 body {
   font-family: opensans, sans-serif;

ui (gen4)/css/layout.less

@@ -184,6 +184,15 @@
 
 
 
+.cursor-hidden {
+	cursor: none;
+}
+.cursor-hidden-r,
+.cursor-hidden-r * {
+	cursor: none !important;
+}
+
+
 /*********************************************************************/
 
 body {

ui (gen4)/features/meta.js

@@ -111,6 +111,8 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 
 	// ui control...
 	'ui-clickable',
+	//'ui-autohide-cursor',
+	'ui-autohide-cursor-single-image-view',
 	//'ui-direct-control-jquery',
 	// XXX BUG: on touch down and first move this gets offset by a distance
 	// 		not sure why...

ui (gen4)/features/ui.js

@@ -719,12 +719,10 @@ module.Viewer = core.ImageGridFeatures.Feature({
 				var that = this
 
 				// load themes from config...
-				if(this.config.theme){
+				this.config.theme 
-					this.toggleTheme(this.config.theme)
+					&& this.toggleTheme(this.config.theme)
-				}
+				this.config['ribbon-theme'] 
-				if(this.config['ribbon-theme']){
+					&& this.toggleRibbonTheme(this.config['ribbon-theme'])
-					this.toggleRibbonTheme(this.config['ribbon-theme'])
-				}
 
 				// center viewer on resize events...
 				if(!this.__viewer_resize){
@@ -1061,6 +1059,131 @@ module.Clickable = core.ImageGridFeatures.Feature({
 
 
 
+//---------------------------------------------------------------------
+
+var AutoHideCursor = 
+module.AutoHideCursor = core.ImageGridFeatures.Feature({
+	title: '',
+	doc: '',
+
+	tag: 'ui-autohide-cursor',
+	depends: ['ui'],
+
+	config: {
+		'cursor-hide-timeout': 1000,
+	},
+
+	actions: actions.Actions({
+		toggleAutoHideCursor: ['Interface/Toggle cursor auto hiding',
+			toggler.CSSClassToggler(
+				function(){ return this.ribbons.viewer }, 
+				'cursor-hidden',
+				function(state){
+					var that = this
+					var viewer = this.ribbons.viewer
+
+					// setup...
+					if(state == 'on'){
+						var timer
+						var timeout = this.config['cursor-hide-timeout']
+						var handler 
+							= this.__cursor_autohide_handler 
+							= (this.__cursor_autohide_handler 
+								|| function(){
+									timer && clearTimeout(timer)
+
+									that.ribbons.viewer
+										.removeClass('cursor-hidden')
+
+									if(!viewer.prop('cursor-auto-hide')){
+										return
+									}
+
+									var timeout = that.config['cursor-hide-timeout']
+									if(timeout && timeout > 0){
+										timer = setTimeout(function(){
+											var viewer = that.ribbons.viewer
+
+											if(!viewer.prop('cursor-auto-hide')){
+												viewer.removeClass('cursor-hidden')
+												return
+											}
+
+											timer && viewer.addClass('cursor-hidden')
+										}, timeout)
+									}
+								})
+
+						!viewer.prop('cursor-auto-hide')
+							&& viewer
+								.prop('cursor-auto-hide', true)
+								.mousemove(handler)
+
+					// teardown...
+					} else {
+						viewer
+							.off('mousemove', this.__cursor_autohide_handler)
+							.prop('cursor-auto-hide', false)
+							.removeClass('cursor-hidden')
+						delete this.__cursor_autohide_handler
+					}
+				})],
+	}),
+})
+
+
+// This will store/restore autohide state for single-image and ribbon 
+// views...
+var AutoHideCursorSingleImage = 
+module.AutoHideCursorSingleImage = core.ImageGridFeatures.Feature({
+	title: '',
+	doc: '',
+
+	tag: 'ui-autohide-cursor-single-image-view',
+	depends: [
+		'ui-autohide-cursor',
+		'ui-single-image-view',
+	],
+
+	config: {
+		'cursor-autohide-single-image-view': 'on',
+		'cursor-autohide-ribbon-view': 'off',
+	},
+
+	handlers: [
+		// setup...
+		['load',
+			function(){
+				var mode = this.toggleSingleImage('?') == 'on' ? 
+					'cursor-autohide-single-image-view'
+					: 'cursor-autohide-ribbon-view'
+
+				this.toggleAutoHideCursor(this.config[mode] || 'off')
+			}],
+		// store state for each mode...
+		['toggleAutoHideCursor',
+			function(){
+				var mode = this.toggleSingleImage('?') == 'on' ? 
+					'cursor-autohide-single-image-view'
+					: 'cursor-autohide-ribbon-view'
+
+				this.config[mode] = this.toggleAutoHideCursor('?')
+			}],
+		// restore state per mode...
+		['toggleSingleImage', 
+			function(){
+				if(this.toggleSingleImage('?') == 'on'){
+					this.toggleAutoHideCursor(this.config['cursor-autohide-single-image-view'])
+
+				} else {
+					this.toggleAutoHideCursor(this.config['cursor-autohide-ribbon-view'])
+				}
+			}]
+	]
+})
+
+
+
 //---------------------------------------------------------------------
 
 var ConfigLocalStorageActions = actions.Actions({