Committer: dpetrov
LJSUP-9528: Small improvemets for FriendsTimesU 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' ); } } ); }