Committer: mchervonniy
LJSUP-9952: Singapore LiveJournal Stage 2. Client sideA trunk/htdocs/js/jquery/jquery.lj.slider.js
Added: trunk/htdocs/js/jquery/jquery.lj.slider.js =================================================================== --- trunk/htdocs/js/jquery/jquery.lj.slider.js (rev 0) +++ trunk/htdocs/js/jquery/jquery.lj.slider.js 2011-11-07 15:42:39 UTC (rev 11156) @@ -0,0 +1,132 @@ +(function($) { + var options = { + rightBtn: '', + leftBtn: '', + item: '', + showBlock: '', + slideBlock: '', + timeAnimate: 300, + eventTypeStart: 'mousedown', + eventTypeStop: 'mouseup', + itemWidth: 70, + onUpdate: null + }; + var animation = (function() { + var currentOptions, currentSide, stop; + + function onEndAnimation() { + updateElements(currentOptions); + if (currentOptions) { + delete currentOptions.animate; + } + if (stop) { + currentOptions.onUpdate && currentOptions.onUpdate(currentOptions); + currentOptions = null; + stop = false; + } else { + animation.start(); + } + } + + return { + start: function(opt, side) { + if (!currentOptions) { + currentOptions = opt; + currentSide = side; + } + if (currentOptions.animate) { + return; + } + if (currentOptions.timeAnimate > 0) { + var slideBlockLeft = parseInt($(currentOptions.slideBlock, currentOptions.parent).css('left')); + var itemsWidth = 0, leftHiddenItems = 0; + $(currentOptions.item, currentOptions.parent).each(function(index) { + itemsWidth += $(this).width(); + if (itemsWidth == -slideBlockLeft) { + leftHiddenItems = currentSide ? index + 1 : index; + } + }); + var leftShowItem = $(currentOptions.item, currentOptions.parent).eq(leftHiddenItems).width(); + $(currentOptions.slideBlock, currentOptions.parent).animate({ + left: (currentSide ? slideBlockLeft - leftShowItem : slideBlockLeft + leftShowItem) + 'px' + }, currentOptions.timeAnimate, 'linear', onEndAnimation); + stop = false; + currentOptions.animate = true; + } + }, + stop: function() { + stop = true; + } + } + })(); + + function onStartSlide(evt) { + evt.preventDefault(); + animation.start(evt.data, $(this).data('side')); + } + + function onEndSlide(evt) { + evt.preventDefault(); + animation.stop(); + } + + function updateElements(opt) { + $(opt.showBlock, opt.parent).css({ + width: 'auto' + }); + var showBlockWidth = $(opt.showBlock, opt.parent).width(); + var slideBlockLeft = parseInt($(opt.slideBlock, opt.parent).css('left')); + var showItemsWidth = slideBlockLeft, newShowBlockWidth = 0; + $(opt.item, opt.parent).each(function() { + var itemWidth = $(this).width(); + showItemsWidth += itemWidth; + if (showItemsWidth > showBlockWidth && !newShowBlockWidth) { + newShowBlockWidth = showItemsWidth - itemWidth; + } + }); + showBlockWidth = newShowBlockWidth || showItemsWidth; + $(opt.showBlock, opt.parent).css({ + width: showBlockWidth + }); + if (showItemsWidth == showBlockWidth) { + $(opt.rightBtn, opt.parent).hide(); + animation.stop(); + } else { + $(opt.rightBtn, opt.parent).show(); + } + if (slideBlockLeft >= 0) { + $(opt.leftBtn, opt.parent).hide(); + animation.stop(); + } else { + $(opt.leftBtn, opt.parent).show(); + } + } + + $.fn.slider = function(opt) { + opt = $.extend(options, opt); + $(opt.rightBtn + ', ' + opt.leftBtn, this).bind(opt.eventTypeStop, onEndSlide).bind('click', function(evt) { + evt.preventDefault(); + }); + $(opt.slideBlock, this).css({ + position: 'relative', + left: isNaN(opt.left) ? 0 : opt.left + }); + this.each(function() { + var thisOpt = {}; + for (var property in options) { + thisOpt[property] = opt[property]; + } + thisOpt.parent = this; + if (!thisOpt.itemWidth) { + thisOpt.itemWidth = $(thisOpt.items, this).width(); + } + $(thisOpt.rightBtn, this).data('side', 1); + $(thisOpt.leftBtn, this).data('side', 0); + $(thisOpt.rightBtn + ', ' + thisOpt.leftBtn, this).bind(thisOpt.eventTypeStart, thisOpt, onStartSlide); + $(window).bind('resize', thisOpt, function(evt) { + updateElements(evt.data); + }); + updateElements(thisOpt); + }); + }; +})(jQuery); \ No newline at end of file