Reimplementation of handle placement logic to work around browser incompatibilities.

7 files changed, 161 insertions, 121 deletions

diff --git a/fluxx_compensator/appinfo/info.xml b/fluxx_compensator/appinfo/info.xml
index 8361eaf73..832557db4 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.4</version>
+	<version>0.2.0</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 446ba66e7..341cf11fa 100644
--- a/fluxx_compensator/appinfo/version
+++ b/fluxx_compensator/appinfo/version
@@ -1 +1 @@
-0.1.4
\ No newline at end of file
+0.2.0
\ No newline at end of file
diff --git a/fluxx_compensator/css/dynamic.css b/fluxx_compensator/css/dynamic.css
index 761879e0d..9b35d1703 100644
--- a/fluxx_compensator/css/dynamic.css
+++ b/fluxx_compensator/css/dynamic.css
@@ -28,11 +28,20 @@
  * @author Christian Reiner
  */
 
-/* some general mode specific modifications */
-
+/* default handle position rules, required by FF to animate the transitions */
+#fluxx-H {
+  top: 0;
+}
+#fluxx-N {
+  left: 0;
+}
+/* move navigation handle up, required due to the absolute positioning */
+html.fluxx-state-H-hidden #fluxx-N {
+  margin-top: 0 !important;
+}
 /* navigation hidden: move left and add a more impressive shadow as a hint */
 html.fluxx-state-N-hidden #navigation {
-	left: -64px;
+	left: -64px !important;
 	box-shadow: 0 0 20px rgba(0, 0, 0, .5), inset 0 -2px 10px #222;
 	-o-box-shadow: 0 0 20px rgba(0, 0, 0, .5), inset 0 -2px 10px #222;
 	-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .5), inset 0 -2px 10px #222;
@@ -59,14 +68,9 @@ html.fluxx-state-H-hidden #header {
 	-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5), inset 0 -2px 10px #222 !important;
 }
 /* move stuff up to top when header is hidden */
-html.fluxx-state-H-hidden #navigation {
-	padding-top: 0;
-}
-html.fluxx-state-H-hidden #navigation .fluxx-handle {
-	margin-top: -45px;
-}
+html.fluxx-state-H-hidden #navigation,
 html.fluxx-state-H-hidden #content-wrapper {
-	padding-top: 0px;
+	padding-top: 0;
 }
 
 /* below some specific app dependent settings to compensate for exotic in-app styles */
diff --git a/fluxx_compensator/css/fluxx.css b/fluxx_compensator/css/fluxx.css
index 5683cf069..f46ae067b 100644
--- a/fluxx_compensator/css/fluxx.css
+++ b/fluxx_compensator/css/fluxx.css
@@ -30,7 +30,6 @@
 
 /* style the 'handle' itself used to switch the navigation */
 .fluxx-handle {
-	z-index: 9000;
 	opacity: 0.6;
 	position: absolute;
 	width: 16px;
@@ -105,11 +104,9 @@ html .fluxx-handle.fluxx-vertical img {
 }
 
 /* switch cursor to a 'move' indication during move mode */
-html.fluxx-handle-move-H, 
-html.fluxx-handle-move-H img {
+html.fluxx-handle-move-H * {
 	cursor: col-resize !important;
 }
-html.fluxx-handle-move-N, 
-html.fluxx-handle-move-N img {
+html.fluxx-handle-move-N * {
 	cursor: row-resize !important;
 }
diff --git a/fluxx_compensator/doc/CHANGELOG b/fluxx_compensator/doc/CHANGELOG
index 5f53c9446..3529db4d2 100644
--- a/fluxx_compensator/doc/CHANGELOG
+++ b/fluxx_compensator/doc/CHANGELOG
@@ -23,6 +23,10 @@
 
 Changelog: 
 
+* Thu Jun 13 2013 Christian Reiner: version 0.2.0
+Changed strategy for for fluxx handles, ugly but less cross browser problems. 
+Some style rules defaults now set explicitly to enable transitions in forefox. 
+Much enhanced cross browser compatibility, only very few issues in that area left. 
 * 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.
diff --git a/fluxx_compensator/img/actions/fluxx.png b/fluxx_compensator/img/actions/fluxx.png
index 9adf7bf4e..830e46895 100644
--- a/fluxx_compensator/img/actions/fluxx.png
+++ b/fluxx_compensator/img/actions/fluxx.png
diff --git a/fluxx_compensator/js/fluxx.js b/fluxx_compensator/js/fluxx.js
index 7ea0ff678..b51fe57b7 100644
--- a/fluxx_compensator/js/fluxx.js
+++ b/fluxx_compensator/js/fluxx.js
@@ -28,8 +28,17 @@
  * @author Christian Reiner
  */
 
-// add handle to navigation area
 $(document).ready(function(){
+  // set a few default style rules to make transitions work in firefox
+  OC.FluXX.defaults();
+	// setup a prefetch relation to prepare toggling the transition styles without having to load them later
+	OC.FluXX.transitions=$('<link/>',{
+// 		'id':'fluxx-transitions',
+		'rel':'prefetch',
+		'type':'text/css',
+		'href':OC.filePath('fluxx_compensator','css','transitions.css')
+	});
+	OC.FluXX.transitions.appendTo('head');
 	// setup handle objects
 	if ($('body#body-user, body#body-settings').length){
 		if ($('body header > #header').length)
@@ -37,9 +46,9 @@ $(document).ready(function(){
 		if ($('body nav > #navigation').length)
 			OC.FluXX.Handle['N']=OC.FluXX.create('N', OC.FluXX.C_HORIZONTAL, 'body nav > #navigation', 0, 0);
 	}
-	// initilize handles
+	// initialize handles
 	OC.FluXX.init();
-	// initilize scripts
+	// initialize logic
 	OC.FluXX.mode();
 	// reposition the handles upon resize of the window
 	$(window).on('resize',function(){
@@ -71,19 +80,21 @@ OC.FluXX={
 	 * @author Christian Reiner
 	 */
 	click:function(handle){
-			// 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(){
-			OC.FluXX.move(handle);
-		},OC.FluXX.C_THRESHOLD);
+console.log('click');
+		// 1.) click & release => toggle navigation hidden or shown
+		// 2.) click & hold => enter handle move mode
 		// raise normal click handling
 		$(handle.Selector).on('mouseup',function(){
-			// remove _this_ handler
-			$(handle.Selector).off('mouseup');
 			// start click reaction
 			OC.FluXX.toggle(handle);
 		});
+		// only enter move mode after holding mouse down for an amount of time
+		var timer=setTimeout(function(){
+			// remove _this_ handler
+			$(handle.Selector).off('mouseup');
+			// enter handle move mode
+			OC.FluXX.move(handle);
+		},OC.FluXX.C_THRESHOLD);
 		// make sure to cancel move mode if mouse is released before C_THRESHOLD duration has passed (500ms)
 		$(document).on('mouseup',function(){
 			// don't enter move mode
@@ -101,6 +112,7 @@ OC.FluXX={
 	* @author Christian Reiner
 	*/
 	create:function(id, orientation, anchor, offset, preset){
+console.log('create');
 		var handle={};
 		handle.Anchor=anchor;						// selector to anchor handle onto
 		handle.Id=id;								// handles id
@@ -121,28 +133,55 @@ OC.FluXX={
 		OC.FluXX.maximize(handle);
 		return handle;
 	}, // OC.FluXX.create
+  /**
+  * @method OC.FluXX.defaults
+  * @brief Injects a few default style rules
+  * @description 
+  * Firefox only animates transitions when the start style is explicitly set!
+  * Instead of writing static rules we fetch those default rule settings from the live document
+  * This way things should be more robust against changes in the OC layout 
+  * @author Christian Reiner
+  */
+  defaults: function(){
+console.log('defaults');
+    OC.FluXX.style('#navigation',      'left:'+$('#navigation').css('left')+'; padding-top:'+$('#navigation').css('padding-top')+';');
+    OC.FluXX.style('#content-wrapper', 'padding-left:'+$('#content-wrapper').css('padding-left')+'; padding-top:'+$('#content-wrapper').css('padding-top')+';');
+    OC.FluXX.style('#controls',        'padding-right:'+$('#controls').css('padding-right')+';');
+    OC.FluXX.style('#header',          'top:'+$('#header').css('top')+';');
+    OC.FluXX.style('#fluxx-N',         'margin-top:'+$('#fluxx-N').css('margin-top')+'; left:'+$('#fluxx-N').css('left')+';');
+    OC.FluXX.style('#fluxx-H',         'top:'+$('#fluxx-H').css('top')+';');
+  }, // OC.FluXX.defaults
 	/**
 	* @method OC.FluXX.generate
 	* @brief Generate handles DOM node
 	* @author Christian Reiner
 	*/
 	generate:function(handle){
+console.log('generate');
 		// create a new handle node
-		var node=$('<span id="fluxx-'+handle.Id+'" class="fluxx-handle fluxx-shown" />');
-		var img=$('<img class="svg" draggable="false">');
+		var id='fluxx-'+handle.Id;
+		var node=$('<span />').attr('id',id).addClass('fluxx-handle fluxx-shown');
+		var img=$('<img>').attr('draggable','false').addClass('svg');
 		img.attr('src',OC.filePath('fluxx_compensator','img','actions/fluxx.svg'));
 		node.append(img);
-		if (handle.Orientation==OC.FluXX.C_HORIZONTAL){
-			node.addClass('fluxx-horizontal');
-			// move to visible position
-			node.css('left',($(handle.Anchor).outerWidth()-1.5)+'px');
-		}
-		else{
-			node.addClass('fluxx-vertical');
-			// move to visible position
-			node.css('top',($(handle.Anchor).outerHeight()-1.5)+'px');
-		}
-		$(handle.Anchor).prepend(node);
+		switch (handle.Id){
+			case 'N':
+				node.addClass('fluxx-horizontal');
+				// move to visible position
+				OC.FluXX.style('#'+id,'margin-top:'+($('#header').outerHeight())+'px;');
+				OC.FluXX.style('html.fluxx-state-N-shown #'+id,'left:'+($(handle.Anchor).outerWidth()-1.5)+'px;');
+				break;
+			case 'H':
+				node.addClass('fluxx-vertical');
+				// move to visible position
+				OC.FluXX.style('html.fluxx-state-H-shown #'+id,'top:'+($(handle.Anchor).outerHeight()-1.5)+'px;');
+				break;
+			default:
+				; // unknown handle...
+		} // switch
+		// explicitly inherit z-index from anchor
+		OC.FluXX.style('#'+id,'z-index:'+(parseInt($(handle.Anchor).css('z-index'))+1)+';');
+		$(handle.Anchor).after(node);
 	}, // OC.FluXX.generate
 	/**
 	* @method OC.FluXX.hide
@@ -150,20 +189,16 @@ OC.FluXX={
 	* @author Christian Reiner
 	*/
 	hide:function(handle){
+console.log('hide');
 		var dfd = new $.Deferred();
-		if (!$(handle.Selector).hasClass('fluxx-hidden')){
-			$.when(
-				// 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.FluXX.preference(true,'fluxx-status-'+handle.Id,'hidden',null);
-			}).fail(dfd.reject)
-			// recalculate handle positions
-			$.each(OC.FluXX.Handle, function(){OC.FluXX.limit(this);});
+		if ($(handle.Selector).hasClass('fluxx-hidden'))
+			dfd.resolve();
+		else {
+			// trigger action by marking handle with new class
+			$(handle.Selector).addClass('fluxx-hidden').removeClass('fluxx-shown')
+			// store current handle status inside user preferences
+			OC.FluXX.preference(true,'fluxx-status-'+handle.Id,'hidden',null);
 		}
-		else dfd.resolve();
 		return dfd.promise();
 	}, // OC.FluXX.hide
 	/**
@@ -172,6 +207,7 @@ OC.FluXX={
 	 * @author Christian Reiner
 	 */
 	init:function(){
+console.log('init');
 		// dynamically load stylesheet to make sure it is loaded LAST
 		OC.addStyle('fluxx_compensator','dynamic');
 		// initialize created handles
@@ -194,6 +230,7 @@ OC.FluXX={
 			// 2.) hold => enter vertical handle move mode
 			$(handle.Selector).on('mousedown',function(event){
 				// swallow click event
+        event.preventDefault();
 				event.stopPropagation();
 				OC.FluXX.click(handle);
 			});
@@ -205,6 +242,7 @@ OC.FluXX={
 	* @author Christian Reiner
 	*/
 	limit:function(handle){
+console.log('limit');
 		// some handle specific corrections
 		switch (handle.Id){
 			case 'N':
@@ -229,9 +267,10 @@ OC.FluXX={
 	 * @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
+	 * @author Christian Reiner
 	 */
 	maximize:function(handle){
+console.log('maximize');
 		// consider all handles
 		$.each(OC.FluXX.Handle, function(){
 			var candidate=this;
@@ -250,11 +289,12 @@ OC.FluXX={
 	* @brief Set global app mode
 	* @description 
 	* Depending on the active app the global html root element is marked with a css class. 
-	* That class controls any actions or compensations that might be required by that apps apge layout. 
+	* That class controls any actions or compensations that might be required by that apps page layout. 
 	* This way all changes and animations can later be done purely in css, as opposed to js. 
 	* @author Christian Reiner
 	*/
 	mode:function(){
+console.log('mode');
 		// mark mode and active app as class of the html tag
 		// this acts like a 'switch' command inside the dynamically loaded css
 		var mode={
@@ -281,12 +321,15 @@ OC.FluXX={
 	* @author Christian Reiner
 	*/
 	move:function(handle){
+console.log('move');
 		// enable cursor move mode
 		$('html').addClass('fluxx-handle-move-'+handle.Id);
-		$(handle.Selector).effect('highlight',{color:'#FFF'},400);
+		$(handle.Selector).effect('highlight',{color:'#FFF'},'slow');
 		// remove _outer_ reactions (2!) on mouseup
 		$(document).off('mouseup');
 		$(handle.Selector).off('mouseup');
+		// compute limits
+		OC.FluXX.limit(handle);
 		// react on mouseup
 		$(document).on('mouseup',function(){
 			// remove _this_ handler
@@ -295,8 +338,6 @@ OC.FluXX={
 			$(document).off('mousemove');
 			// disable cursor move mode
 			$('html').removeClass('fluxx-handle-move-'+handle.Id);
-			$(handle.Selector).css('cursor','pointer');
-			$(handle.Selector).find('img').css('cursor','inherit');
 			// store final handle position
 			OC.FluXX.preference(true,'fluxx-position-'+handle.Id,handle.Position.Val,null);
 		});
@@ -305,7 +346,8 @@ OC.FluXX={
 			var delta;
 			if (OC.FluXX.C_HORIZONTAL==handle.Orientation){
 				// 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
+				// 1. half the handles size, 
+				// 2. the start position of the anchor which is changed by the other handle and
 				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;
@@ -323,8 +365,9 @@ OC.FluXX={
 	* @author Christian Reiner
 	*/
 	position:function(handle, pos){
+console.log('position');
 		// hide handle whilst being repositioned
-		$(handle.Anchor).css('overflow','hidden !important');
+		$(handle).css('visibility','hidden');
 		// 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)
@@ -332,7 +375,7 @@ OC.FluXX={
 		else
 			$(handle.Selector).css('left',handle.Position.Val+'px');
 		// show handle after having been repositioned
-		$(handle.Anchor).css('overflow','visible');
+		$(handle).css('visibility','visible');
 	}, // OC.FluXX.position
 	/**
 	 * @method OC.FluXX.preference
@@ -340,6 +383,7 @@ OC.FluXX={
 	 * @author Christian Reiner
 	 */
 	preference:function(set, key, value, callback){
+console.log('preference');
 		switch(set){
 			case true:
 				// set a preference
@@ -352,6 +396,7 @@ OC.FluXX={
 				}).fail(function(){
 					return value;
 				})
+				;
 			default:
 			case false:
 				// get a preference
@@ -364,6 +409,7 @@ OC.FluXX={
 				}).fail(function(){
 					return value;
 				})
+				;
 		}
 	}, // OC.FluXX.preference
 	/**
@@ -372,20 +418,16 @@ OC.FluXX={
 	* @author Christian Reiner
 	*/
 	show:function(handle){
+console.log('show');
 		var dfd = new $.Deferred();
-		if (!$(handle.Selector).hasClass('fluxx-shown')){
-			$.when(
-				// 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.FluXX.preference(true,'fluxx-status-'+handle.Id,'shown',null);
-			}).fail(dfd.reject)
-			// recalculate handle positions
-			$.each(OC.FluXX.Handle, function(){OC.FluXX.limit(this);});
+		if ($(handle.Selector).hasClass('fluxx-shown'))
+			dfd.resolve();
+		else {
+			// mark handle with new class
+			$(handle.Selector).addClass('fluxx-shown').removeClass('fluxx-hidden')
+			// store current handle status inside user preferences
+			OC.FluXX.preference(true,'fluxx-status-'+handle.Id,'shown',null);
 		}
-		else dfd.resolve();
 		return dfd.promise();
 	}, // OC.FluXX.show
 	/**
@@ -394,6 +436,7 @@ OC.FluXX={
 	* @author Christian Reiner
 	*/
 	state:function(handle,shown){
+console.log('state');
 		// mark the current state (hidden or shown) as class of the html element
 		if (shown){
 			$('html').removeClass('fluxx-state-'+handle.Id+'-hidden').addClass('fluxx-state-'+handle.Id+'-shown');
@@ -402,23 +445,40 @@ OC.FluXX={
 		}
 	}, // OC.FluXX.state
 	/**
+	* @method OC.FluXX.style
+	* @brief Add style rule directly to the css definitions instead of using inline styles
+	* @author Christian Reiner
+	*/
+	style:function(selector,rule){
+console.log('style');
+		rule = '{' + rule + '}'
+		var stylesheet = document.styleSheets[0];
+		if (stylesheet.insertRule) {
+			stylesheet.insertRule(selector + rule, stylesheet.cssRules.length);
+		} else if (stylesheet.addRule) {
+			stylesheet.addRule(selector, rule, -1);
+		}
+	},
+	/**
 	* @method OC.FluXX.swap
 	* @brief Swaps the mode of the app between hidden and shown
 	* @author Christian Reiner
 	*/
 	swap: function(handle){
+console.log('swap');
 		var dfd = new $.Deferred();
+		// delay resolution until the animations have finished
+		var events='transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd';
 		// call action depending on the current mode
-		if ($(handle.Selector).hasClass('fluxx-shown'))
-			$.when(
-				OC.FluXX.hide(handle),
-				OC.FluXX.state(handle,false)
-			).done(dfd.resolve)
-		else
-			$.when(
-				OC.FluXX.show(handle),
-				OC.FluXX.state(handle,true)
-			).done(dfd.resolve)
+		if ($(handle.Selector).hasClass('fluxx-shown')) {
+			$('.fluxx-handle').one(events,dfd.resolve);
+			OC.FluXX.hide(handle);
+			OC.FluXX.state(handle,false);
+		} else {
+			$('.fluxx-handle').one(events,dfd.resolve);
+			OC.FluXX.show(handle);
+			OC.FluXX.state(handle,true);
+		}
 		return dfd.promise();
 	}, // OC.FluXX.swap
 	/**
@@ -427,45 +487,20 @@ OC.FluXX={
 	* @author Christian Reiner
 	*/
 	toggle: function(handle){
+console.log('toggle');
 		var dfd = new $.Deferred();
 		// temporarily include transition style rules if not yet present (should not be!)
-		if ($('head link#fluxx-transitions').length)
-			OC.FluXX.swap(handle);
-		else{
-			$('<link/>',{
-				id:'fluxx-transitions',
-				rel:'stylesheet',
-				type:'text/css',
-				href:OC.filePath('fluxx_compensator','css','transitions.css')
-			}).appendTo('head');
-			$('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);
-				});
-			});
-		}
+		var transitions=OC.FluXX.transitions.clone().attr('rel','stylesheet').attr('id','fluxx-transitions').appendTo('head');
+		$('head #fluxx-transitions').one('load',function(){
+			// swap handle (animation)
+			$.when(
+				OC.FluXX.swap(handle)
+			).done(function(){
+				// remove temporarily included transition rules
+				$('head #fluxx-transitions').remove();
+				dfd.resolve();
+			}).fail(dfd.reject);
+		});
 		return dfd.promise();
 	}, // 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
-}
+} // OC.FluXX