fluxx_compensator: Fix a number of glitches with handle control under certain conditions.

7 files changed, 178 insertions, 112 deletions

diff --git a/fluxx_compensator/appinfo/info.xml b/fluxx_compensator/appinfo/info.xml
index 5a11b4b49..8361eaf73 100644
--- a/fluxx_compensator/appinfo/info.xml
+++ b/fluxx_compensator/appinfo/info.xml
@@ -40,7 +40,7 @@
 		Simply click the handler to hide/show the navigation panel. To move the handler to where you want it to be, just hold the handler and drag it.
 		The older amongst us will know where the name 'FluXX Compensator (Y)' comes from... ;-)
 	</description>
-	<version>0.1.3</version>
+	<version>0.1.4</version>
 	<licence>AGPL</licence>
 	<author>Christian Reiner</author>
 	<require>4.93</require>
diff --git a/fluxx_compensator/appinfo/version b/fluxx_compensator/appinfo/version
index 7693c96bf..446ba66e7 100644
--- a/fluxx_compensator/appinfo/version
+++ b/fluxx_compensator/appinfo/version
@@ -1 +1 @@
-0.1.3
\ No newline at end of file
+0.1.4
\ No newline at end of file
diff --git a/fluxx_compensator/css/dynamic.css b/fluxx_compensator/css/dynamic.css
index edca71ef2..8cbdfc87b 100644
--- a/fluxx_compensator/css/dynamic.css
+++ b/fluxx_compensator/css/dynamic.css
@@ -65,19 +65,17 @@ html.fluxx-state-H-hidden body > header > #header {
 	-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5), inset 0 -2px 10px #222 !important;
 }
 /* move content up to top when header is hidden */
-html.fluxx-state-H-hidden body > nav> #navigation {
-	top: -45px !important;
-	height: 110%;
+html.fluxx-state-H-hidden body > nav > #navigation {
+	padding-top: 0;
+}
+html.fluxx-state-H-hidden body > nav > #navigation .fluxx-handle {
+	margin-top: -45px;
 }
 html.fluxx-state-H-hidden body #content-wrapper {
 	padding-top: 0px;
 }
-/* move bottom aligned 'settings' navigation entry down to the bottom again */
-html.fluxx-state-H-hidden body > nav > #navigation #settings {
-	bottom: 0;
-}
 
-/* some specific app dependent settings */
+/* below some specific app dependent settings to compensate for exotic in-app styles */
 
 /* no _known_ mode detected, so _guess_ */
 html.fluxx-modeless body { }
diff --git a/fluxx_compensator/css/fluxx.css b/fluxx_compensator/css/fluxx.css
index 83bc2a327..6cc148381 100644
--- a/fluxx_compensator/css/fluxx.css
+++ b/fluxx_compensator/css/fluxx.css
@@ -55,6 +55,7 @@
 	background-color: #ddd;
 	box-shadow: 0 0 2px #999;
 }
+/* flip and move handle when panel is shown */
 .fluxx-handle.fluxx-horizontal.fluxx-shown {
 	transform: scale(-1,1) translate(15px,0);
 	-o-transform: scale(-1,1) translate(15px,0);
diff --git a/fluxx_compensator/css/transitions.css b/fluxx_compensator/css/transitions.css
index 2d2009f51..993dd692f 100644
--- a/fluxx_compensator/css/transitions.css
+++ b/fluxx_compensator/css/transitions.css
@@ -67,7 +67,7 @@ html.fluxx-mode-gallery { }
 html.fluxx-mode-media { }
 
 /* 'notes' app */
-html.fluxx-mode-notes #entries { }
+html.fluxx-mode-notes { }
 
 /* 'shorty' app */
 html.fluxx-mode-shorty { }
diff --git a/fluxx_compensator/doc/CHANGELOG b/fluxx_compensator/doc/CHANGELOG
index efeca5ac6..5f53c9446 100644
--- a/fluxx_compensator/doc/CHANGELOG
+++ b/fluxx_compensator/doc/CHANGELOG
@@ -23,13 +23,17 @@
 
 Changelog: 
 
+* Sun Apr 28 2013 Christian Reiner: version 0.1.4
+Include navigation handle in moving of content when header panel is hidden.
+Apply intelligent positioning to navigation handle when header is hidden too.
+Fixed a few glitches in handle movements under certain conditions.
 * Wed Apr 17 2013 Christian Reiner: version 0.1.3
 Some optical fixes to the handles position and shadow. 
 Slide navigations content up too when the header panel is hidden. 
 * Mon Apr 09 2013 Christian Reiner: version 0.1.2
 Fixed handle positioning for non-priviledged user accounts.
 * Sat Mar 23 2013 Christian Reiner: version 0.1.1
-Corrected handles anchor definition to work correct on more exotic page layouts. 
+Corrected handles anchor definition to work correct on exotic page layouts. 
 This is required by the 'external' app which embeds a frame as main widgets. 
 * Tue Feb 19 2013 Christian Reiner: version 0.1.0
 Initial release.
diff --git a/fluxx_compensator/js/fluxx.js b/fluxx_compensator/js/fluxx.js
index 92ec653e3..31b46024f 100644
--- a/fluxx_compensator/js/fluxx.js
+++ b/fluxx_compensator/js/fluxx.js
@@ -33,42 +33,18 @@ $(document).ready(function(){
 	// setup handle objects
 	if ($('body#body-user, body#body-settings').length){
 		if ($('body header > #header').length)
-			OC.FluXX.Handle['H']=OC.FluXX.create('H', OC.FluXX.C_VERTICAL,   0, 'body header > #header');
+			OC.FluXX.Handle['H']=OC.FluXX.create('H', OC.FluXX.C_VERTICAL, 'body header > #header', 0, 0);
 		if ($('body nav > #navigation').length)
-			OC.FluXX.Handle['N']=OC.FluXX.create('N', OC.FluXX.C_HORIZONTAL, 1, 'body nav > #navigation');
+			OC.FluXX.Handle['N']=OC.FluXX.create('N', OC.FluXX.C_HORIZONTAL, 'body nav > #navigation', 0, 0);
 	}
+	// initilize handles
+	OC.FluXX.init();
+	// initilize scripts
 	OC.FluXX.mode();
-	// initialize created handles
-	$.each(OC.FluXX.Handle, function(){
-		var handle=this;
-		// hide or show the navigation in a persistent manner
-// 		OC.AppConfig.getValue('fluxx_compensator','fluxx-status-'+handle.Id,'shown',function(status){
-		OC.FluXX.preference(false,'fluxx-status-'+handle.Id,'shown',function(status){
-			if ('hidden'==status){
-				OC.FluXX.hide(handle);
-				OC.FluXX.state(handle, false);}
-			else{
-				OC.FluXX.show(handle);
-				OC.FluXX.state(handle, true);}
-		});
-		// handle mouse reactions
-		// 1.) click => toggle navigation hidden or shown
-		// 2.) hold => enter vertical handle move mode
-		$(handle.Selector).on('mousedown',function(event){
-			// swallow click event
-			event.stopPropagation();
-			OC.FluXX.click(handle);
-		});
-	});
 	// reposition the handles upon resize of the window
 	$(window).on('resize',function(){
 		$.each(OC.FluXX.Handle, function(){
-			var handle=this;
-			var closeToMax=(handle.Position.Max-handle.Position.Val);
-			OC.FluXX.limit(handle);
-			// reposition close to max if been there before, just within limits otherwise
-			var position=(closeToMax>10)?handle.Position.Val:handle.Position.Max-closeToMax;
-			OC.FluXX.position(handle, position);
+			OC.FluXX.maximize(this);
 		});
 	});
 })
@@ -87,15 +63,15 @@ OC.FluXX={
 	* @brief Static reference to the handle object inside the DOM
 	* @author Christian Reinerowncloud-core-master-2013-01-08/apps/fluxx_compensator
 	*/
-	Handle:{},
+ 	Handle:{},
 	/**
-	* @method OC.FluXX.click
-	* @brief Handle click actions on a handle object
-	* @param object handle: handle object as defined clas internal
-	* @author Christian Reiner
-	*/
+	 * @method OC.FluXX.click
+	 * @brief Handle click actions on a handle object
+	 * @param object handle: handle object as defined class internal
+	 * @author Christian Reiner
+	 */
 	click:function(handle){
-		// 1.) click => toggle navigation hidden or shown
+			// 1.) click => toggle navigation hidden or shown
 		// 2.) hold => enter vertical handle move mode
 		// so only enter move mode after holding mouse down for an amount of time
 		var timer=setTimeout(function(){
@@ -118,29 +94,31 @@ OC.FluXX={
 			$(handle.Selector).off('mouseup');
 		});
 		return false;
-	}, // OC.FluXX.clickhandle.Id
+	}, // OC.FluXX.click
 	/**
 	* @method OC.FluXX.create
-	* @brief Hide the navigation area if visible
+	* @brief Create js handle objects
 	* @author Christian Reiner
 	*/
-	create:function(id, orientation, offset, anchor){
+	create:function(id, orientation, anchor, offset, preset){
 		var handle={};
-		handle.Anchor=anchor;
-		handle.Id=id;
-		handle.Offset=offset;
-		handle.Orientation=orientation;
-		handle.Position={Val:0,Min:0,Max:0};
-		handle.Selector='body #fluxx-'+id;
+		handle.Anchor=anchor;						// selector to anchor handle onto
+		handle.Id=id;								// handles id
+		handle.Orientation=orientation;				// vertical or horizontal
+		handle.Offset=offset;						// offset from min position
+		handle.Preset=preset;						// preset from max position
+		handle.Position={Val:0,Margin:0,Min:0,Max:0};// initial position values
+		handle.Selector='body #fluxx-'+id;			// handle's own selector
 		// generate DOM node
 		OC.FluXX.generate(handle);
 		// compute position limits
 		OC.FluXX.limit(handle);
 		// position handle object
-// 		OC.AppConfig.getValue('fluxx_compensator','fluxx-position-'+handle.Id,handle.Position.Max,function(pos){
 		OC.FluXX.preference(false,'fluxx-position-'+handle.Id,handle.Position.Max,function(pos){
 			OC.FluXX.position(handle, pos);
 		});
+		// re-compute position limits
+		OC.FluXX.maximize(handle);
 		return handle;
 	}, // OC.FluXX.create
 	/**
@@ -164,7 +142,7 @@ OC.FluXX={
 			// move to visible position
 			node.css('top',($(handle.Anchor).outerHeight()-1.5)+'px');
 		}
-		$(handle.Anchor).append(node);
+		$(handle.Anchor).prepend(node);
 	}, // OC.FluXX.generate
 	/**
 	* @method OC.FluXX.hide
@@ -173,33 +151,102 @@ OC.FluXX={
 	*/
 	hide:function(handle){
 		var dfd = new $.Deferred();
-		if ($(handle.Selector).hasClass('fluxx-shown')){
+		if (!$(handle.Selector).hasClass('fluxx-hidden')){
 			$.when(
-				$(handle.Selector).addClass('fluxx-hidden'),
-				$(handle.Selector).removeClass('fluxx-shown')
+				// mark handle with new classmargin-top
+				$(handle.Selector).addClass('fluxx-hidden').removeClass('fluxx-shown')
 			).done(function(){
 				dfd.resolve();
 				// store current handle status inside user preferences
-// 				OC.AppConfig.setValue('fluxx_compensator','fluxx-status-'+handle.Id,'hidden');
 				OC.FluXX.preference(true,'fluxx-status-'+handle.Id,'hidden',null);
-			}).fail(dfd.reject)}
+			}).fail(dfd.reject)
+			// recalculate handle positions
+			$.each(OC.FluXX.Handle, function(){OC.FluXX.limit(this);});
+		}
 		else dfd.resolve();
 		return dfd.promise();
 	}, // OC.FluXX.hide
 	/**
+	 * @method OC.FluXX.init
+	 * @brief Initializes state of the handles
+	 * @author Christian Reiner
+	 */
+	init:function(){
+		// dynamically load stylesheet to make sure it is loaded LAST
+		OC.addStyle('fluxx_compensator','dynamic');
+		// initialize created handles
+		$.each(OC.FluXX.Handle, function(){
+			var handle=this;
+			// hide or show the navigation in a persistent manner
+			OC.FluXX.preference(false,'fluxx-status-'+handle.Id,'shown',function(status){
+				if ('hidden'==status){
+					OC.FluXX.hide(handle);
+					OC.FluXX.state(handle, false);
+					OC.FluXX.limit(handle);
+				}else{
+					OC.FluXX.show(handle);
+					OC.FluXX.state(handle, true);
+					OC.FluXX.limit(handle);
+				}
+			});
+			// handle mouse reactions
+			// 1.) click => toggle navigation hidden or shown
+			// 2.) hold => enter vertical handle move mode
+			$(handle.Selector).on('mousedown',function(event){
+				// swallow click event
+				event.stopPropagation();
+				OC.FluXX.click(handle);
+			});
+		});
+	},
+	/**
 	* @method OC.FluXX.limit
 	* @brief Compute limits for the handles positions
 	* @author Christian Reiner
 	*/
 	limit:function(handle){
-		handle.Position.Min=handle.Offset;
-		if (OC.FluXX.C_HORIZONTAL==handle.Orientation)
-			handle.Position.Max=$(handle.Anchor).outerHeight()-$(handle.Anchor).position().top-handle.Offset-$(handle.Selector).outerHeight();
+		// some handle specific corrections
+		switch (handle.Id){
+			case 'N':
+				handle.Position.Margin=$(handle.Selector).css('margin-top').replace(/[^-\d\.]/g, '');
+console.log('limit(): ',handle.Id,handle.Position);
+				;// case 'N';
+		}// switch
+		// general orientation specific values
+		if (OC.FluXX.C_HORIZONTAL==handle.Orientation){
+			handle.Position.Min=$(handle.Anchor).css('padding-top').replace(/[^-\d\.]/g, '')
+								+handle.Offset-handle.Position.Margin;
+			handle.Position.Max=$(handle.Anchor).outerHeight()-$(handle.Anchor).position().top
+								-$(handle.Selector).outerHeight()-handle.Preset-handle.Position.Margin;
+		}
 		else{
-			handle.Position.Max=$(handle.Anchor).outerWidth()-$(handle.Anchor).position().left-handle.Offset-$(handle.Selector).outerWidth();
+			handle.Position.Min=$(handle.Anchor).css('padding-left').replace(/[^-\d\.]/g, '')
+								+handle.Offset-handle.Position.Margin;
+			handle.Position.Max=$(handle.Anchor).outerWidth()-$(handle.Anchor).position().left
+								-$(handle.Selector).outerWidth()-handle.Preset-handle.Position.Margin;
 		}
 	}, // OC.FluXX.limit
 	/**
+	 * @method OC.FluXX.maximize
+	 * @brief Reposition handle "close to max position" if it has been there before
+	 * @param object handle: handle object as defined class internal
+	 * @author Christian Reinermargin-top
+	 */
+	maximize:function(handle){
+		// consider all handles
+		$.each(OC.FluXX.Handle, function(){
+			var candidate=this;
+			// act for all handles except the triggering one
+			if (candidate!=handle){
+				var closeToMax=(candidate.Position.Max-candidate.Position.Val);
+				OC.FluXX.limit(candidate);
+				// reposition close to max if been there before, just within limits otherwise
+				var position=(closeToMax>20)?candidate.Position.Val:candidate.Position.Max-closeToMax;
+				OC.FluXX.position(candidate, position);
+			}
+		})
+	}, // OC.FluXX.maximize
+	/**
 	* @method OC.FluXX.mode
 	* @brief Set global app mode
 	* @description 
@@ -209,8 +256,6 @@ OC.FluXX={
 	* @author Christian Reiner
 	*/
 	mode:function(){
-		// dynamically load stylesheet to make sure it is loaded LAST
-		OC.addStyle('fluxx_compensator','dynamic');
 		// mark mode and active app as class of the html tag
 		// this acts like a 'switch' command inside the dynamically loaded css
 		var mode={
@@ -221,7 +266,7 @@ OC.FluXX={
 			calendar_index:		'calendar',
 			contacts_index:		'contacts',
 			gallery_index:		'gallery',
-			shorty_index:		'shorty',
+			shorty_index:		'shorty'
 		};
 		var index=$('body nav #navigation #apps').find('li .active').parents('li').attr('data-id');
 		// mark current mode (active app) as class of the html element
@@ -254,27 +299,43 @@ OC.FluXX={
 			$(handle.Selector).css('cursor','pointer');
 			$(handle.Selector).find('img').css('cursor','inherit');
 			// store final handle position
-// 			OC.AppConfig.setValue('fluxx_compensator','fluxx-position-'+handle.Id,handle.Position.Val);
 			OC.FluXX.preference(true,'fluxx-position-'+handle.Id,handle.Position.Val,null);
 		});
 		// reaction on mouse move: position handle
 		$(document).on('mousemove',function(event){
+			var delta;
 			if (OC.FluXX.C_HORIZONTAL==handle.Orientation){
-				// we have to correct the raw mouse position by two factors: 
+				// we have to correct the raw vertical mouse position by two factors: 
 				// 1. half the handles size and 2. the start position of the anchor which is changed by the other handle
-				var delta=($(handle.Selector).height()/2);
-				if (handle.Orientation==OC.FluXX.C_HORIZONTAL)
-					delta+=$(handle.Anchor).position().top;
-				OC.FluXX.position(handle, event.pageY-delta);
+				delta=$(handle.Selector).height()/2.0;	// correction by half the handles size
+				OC.FluXX.position(handle, event.pageY-delta-handle.Position.Margin);
 				handle.Position.Val=$(handle.Selector).position().top;
 			}
 			else{
-				OC.FluXX.position(handle, event.pageX-($(handle.Selector).width()/2));
+				delta=$(handle.Selector).width()/2.0;	// correction by half the handles size
+				OC.FluXX.position(handle, event.pageX-delta-handle.Position.Margin);
 				handle.Position.Val=$(handle.Selector).position().left;
 			}
 		});
 	}, // OC.FluXX.move
 	/**
+	* @method OC.FluXX.position
+	* @brief Position handle upon drag action
+	* @author Christian Reiner
+	*/
+	position:function(handle, pos){
+		// hide handle whilst being repositioned
+		$(handle.Anchor).css('overflow','hidden !important');
+		// use specified value as new position, but only inside the given limits
+		handle.Position.Val=(pos>handle.Position.Max)?handle.Position.Max:((pos<handle.Position.Min)?handle.Position.Min:pos);
+		if (OC.FluXX.C_HORIZONTAL==handle.Orientation)
+			$(handle.Selector).css('top',handle.Position.Val+'px');
+		else
+			$(handle.Selector).css('left',handle.Position.Val+'px');
+		// show handle after having been repositioned
+		$(handle.Anchor).css('overflow','visible');
+	}, // OC.FluXX.position
+	/**
 	 * @method OC.FluXX.preference
 	 * @brief Get or set a personal preference
 	 * @author Christian Reiner
@@ -307,39 +368,24 @@ OC.FluXX={
 		}
 	}, // OC.FluXX.preference
 	/**
-	* @method OC.FluXX.position
-	* @brief Position handle upon drag action
-	* @author Christian Reiner
-	*/
-	position:function(handle, pos){
-		// hide handle whilst being repositioned
-		$(handle.Anchor).css('overflow','hidden !important');
-		// use specified x as new position, ob only inside the given limits
-		handle.Position.Val=(pos>handle.Position.Max)?handle.Position.Max:((pos<handle.Position.Min)?handle.Position.Min:pos);
-		if (OC.FluXX.C_HORIZONTAL==handle.Orientation)
-			$(handle.Selector).css('top',handle.Position.Val+'px');
-		else
-			$(handle.Selector).css('left',handle.Position.Val+'px');
-		// show handle after having been repositioned
-		$(handle.Anchor).css('overflow','visible');
-	}, // OC.FluXX.position
-	/**
 	* @method OC.FluXX.show
 	* @brief Show the panel if visible
 	* @author Christian Reiner
 	*/
 	show:function(handle){
 		var dfd = new $.Deferred();
-		if ($(handle.Selector).hasClass('fluxx-hidden')){
+		if (!$(handle.Selector).hasClass('fluxx-shown')){
 			$.when(
-				$(handle.Selector).addClass('fluxx-shown'),
-				$(handle.Selector).removeClass('fluxx-hidden')
+				// mark handle with new class
+				$(handle.Selector).addClass('fluxx-shown').removeClass('fluxx-hidden')
 			).done(function(){
 				dfd.resolve();
 				// store current handle status inside user preferences
-// 				OC.AppConfig.setValue('fluxx_compensator','fluxx-status-'+handle.Id,'shown');
 				OC.FluXX.preference(true,'fluxx-status-'+handle.Id,'shown',null);
-			}).fail(dfd.reject)}
+			}).fail(dfd.reject)
+			// recalculate handle positions
+			$.each(OC.FluXX.Handle, function(){OC.FluXX.limit(this);});
+		}
 		else dfd.resolve();
 		return dfd.promise();
 	}, // OC.FluXX.show
@@ -364,22 +410,16 @@ OC.FluXX={
 	swap: function(handle){
 		var dfd = new $.Deferred();
 		// call action depending on the current mode
-		if ($(handle.Selector).hasClass('fluxx-shown')){
+		if ($(handle.Selector).hasClass('fluxx-shown'))
 			$.when(
 				OC.FluXX.hide(handle),
 				OC.FluXX.state(handle,false)
-			).done(dfd.resolve)}
-		else{
+			).done(dfd.resolve)
+		else
 			$.when(
 				OC.FluXX.show(handle),
 				OC.FluXX.state(handle,true)
-			).done(dfd.resolve)}
-		// make sure temporary transition style rules are removed, preferably upon event, time based as catchall
-		var timer=setTimeout(function(){$('head link#fluxx-transitions').remove();},10000);
-		$(handle.Selector).on('webkitTransitionEnd oTransitionEnd transitionEnd',function(){
-			clearTimeout(timer);
-			$('head link#fluxx-transitions').remove();
-		});
+			).done(dfd.resolve)
 		return dfd.promise();
 	}, // OC.FluXX.swap
 	/**
@@ -402,8 +442,31 @@ OC.FluXX={
 			$('head link#fluxx-transitions').on('load',function(){
 				$('head link#fluxx-transitions').off('load');
 				OC.FluXX.swap(handle);
+				// make sure temporary transition style rules are removed, preferably upon event, time based as catchall
+				OC.FluXX.wait(handle,function(){
+					$('head link#fluxx-transitions').remove();
+					OC.FluXX.maximize(handle);
+				});
 			});
 		}
 		return dfd.promise();
-	} // OC.FluXX.toggle
+	}, // OC.FluXX.toggle
+	/**
+	 * @method OC.FluXX.wait
+	 * @brief Wait for transitions to finish
+	 * @author Christian Reiner
+	 */
+	wait: function(handle,callback){
+		// safety-catch in case we somehow miss the trnsitionend event...
+		var timer=setTimeout(function(){$('head link#fluxx-transitions').remove();},10000);
+		// when all planned transitions have finished...
+		$(handle.Selector).on('webkitTransitionEnd oTransitionEnd transitionEnd',function(){
+			// remove transition styles to prevent interfering with other transitions
+			$(handle.Selector).off('webkitTransitionEnd oTransitionEnd transitionEnd');
+			// remove safety-catch from above
+			clearTimeout(timer);
+			// finally execute call callback
+			callback();
+		});
+	} // OC.FluXX.wait
 }