[ljcom] r10867: LJSUP-9528: Small improvemets for Friend...

U   trunk/htdocs/js/jquery/jquery.lj.sidePane.js

Modified: trunk/htdocs/js/jquery/jquery.lj.sidePane.js
===================================================================
--- trunk/htdocs/js/jquery/jquery.lj.sidePane.js	2011-08-16 07:08:15 UTC (rev 10866)
+++ trunk/htdocs/js/jquery/jquery.lj.sidePane.js	2011-08-16 08:47:55 UTC (rev 10867)
@@ -32,10 +32,11 @@
 		options: {
 			selectors: {
 				inner: '.w-friendstimes-inner',
-				toggle: '.b-friendstimes-hidden-comments-icon'
+				toggle: '.b-friendstimes-hidden-comments-icon, .b-friendstimes-toolbar-title'
 			},
 			classNames: {
-				open: 'w-friendstimes-opened'
+				open: 'w-friendstimes-opened',
+				hidden: 'w-friendstimes-closed'
 			},
 
 			/**
@@ -82,9 +83,6 @@
 				} else {
 					self.close();
 				}
-
-				ev.preventDefault();
-				ev.stopPropagation();
 			} );
 
 			this.element.click( function( ev ) {
@@ -124,7 +122,28 @@
 		 * Show panel.
 		 */
 		show: function() {
-			this.element.show();
+			var widget = this;
+
+			if(transitionsSupported) {
+				this.element
+					.removeClass(this.options.classNames.hidden);
+			} else {
+				//if transitions are not supported we show program animation.
+				//Css options below were taken from the css file.
+				this._inner
+					.animate( {
+					left: "100%",
+					marginLeft: "-47px"
+				}, {
+					duration: 300,
+					complete: function() {
+						widget.element
+							.removeClass(widget.options.classNames.hidden);
+
+						widget._inner.removeAttr('style');
+					}
+				} );
+			}
 			this.options.visibility = 'visible';
 		},
 
@@ -132,7 +151,28 @@
 		 * Hide panel.
 		 */
 		hide: function() {
-			this.element.hide();
+			var widget = this;
+
+			if(transitionsSupported) {
+				this.element
+					.removeClass(this.options.classNames.open)
+					.addClass(this.options.classNames.hidden);
+			} else {
+				this._inner.animate( {
+					left: "100%",
+					marginLeft: "4px"
+				}, {
+					duration: 300,
+					complete: function() {
+						widget.element
+							.removeClass(widget.options.classNames.open)
+							.addClass(widget.options.classNames.hidden);
+
+						widget._inner.removeAttr('style');
+					}
+				} );
+			}
+
 			this.options.visibility = 'hidden';
 		},
 
@@ -148,13 +188,11 @@
 				//if transitions are not supported we show program animation.
 				//Css options below were taken from the css file.
 				this.element.css( {
-					overflow: 'visible',
 					zoom: 1,
 					zIndex: 10
 				} );
-				this._inner.animate( {
-					left: "1%",
-					marginLeft: "0px"
+				this._inner.css({ marginLeft: "0px" }).animate( {
+					left: "1%"
 				}, {
 					duration: 300, 
 					queue: true,
@@ -162,7 +200,7 @@
 						widget.element
 							.addClass( widget.options.classNames.open );
 
-						widget.element.removeAttr( 'style' );
+						widget._inner.removeAttr( 'style' );
 					}
 				} );
 			}
@@ -187,19 +225,15 @@
 			} else {
 				//if transitions are not supported we show program animation.
 				//Css options below were taken from the css file.
-				this._inner.animate( {
-					left: "100%",
-					marginLeft: "-47px"
+				this._inner.css({ marginLeft: "-47px" }).animate( {
+					left: "90%"
 				}, {
 					duration: 300,
 					complete: function() {
 						widget.element
 							.removeClass( widget.options.classNames.open );
 
-						widget.element.removeAttr( 'style' );
-						if (widget.options.visibility === 'hidden') {
-							widget.hide();
-						}
+						widget._inner.removeAttr( 'style' );
 					}
 				} );
 			}