r2378 - labs: implemented trigger option (default: click), for browsers that don't support transf...
Author: paul.bakaus
Date: Wed Mar 25 02:57:53 2009
New Revision: 2378
Modified:
branches/labs/source/ui.coverflow.js
Log:
labs: implemented trigger option (default: click), for browsers that don't
support transforms, a better fallback is used. Fixed reflow issue by
triggering scroll at the end of the animation.
Modified: branches/labs/source/ui.coverflow.js
==============================================================================
--- branches/labs/source/ui.coverflow.js (original)
+++ branches/labs/source/ui.coverflow.js Wed Mar 25 02:57:53 2009
@@ -11,6 +11,8 @@
*/
(function($){
+ var supportsTransforms = !($.browser.mozilla &&
(parseFloat($.browser.version) <= 1.9)) && !$.browser.opera;
+
$.easing.easeOutQuint = function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
};
@@ -22,11 +24,13 @@
var self = this, o = this.options;
this.items = $(o.items, this.element);
this.props = o.orientation == 'vertical' ?
['height', 'Height', 'top', 'Top'] : ['width', 'Width', 'left', 'Left'];
- this.itemSize = this.items['outer'+this.props[1]](true);
+ this.itemSize = this.items['outer'+this.props[1]](1);
+ this.itemWidth = this.items.width();
+ this.itemHeight = this.items.height();
this.current = o.item; //Start item
//Bind click events on individual items
- this.items.bind('click', function() {
+ this.items.bind(o.trigger, function() {
self.select(this);
});
@@ -91,14 +95,29 @@
css[($.browser.safari ? 'webkit' : 'moz')+'Transform']
= 'matrix(1,'+(mod * (side == 'right' ? -0.5 : 0.5))+',0,1,0,0)
scale('+(1+((1-mod)*0.5))+')';
css[self.props[2]] = ( (-i * (self.itemSize/2)) + (side == 'right'?
-self.itemSize/2 : self.itemSize/2) * mod );
+ if(!supportsTransforms) {
+ css.width = self.itemWidth * (1+((1-mod)*0.5));
+ css.height = css.width * (self.itemHeight / self.itemWidth);
+ css.top = -((css.height - self.itemHeight) / 2);
+ }
+
$(this).css(css);
//Use the opacity effect only if IE isn't used, IE has problems with
multiple filters
- if(!$.browser.msie && self.options.opacity)
- $(this).css('opacity', 1 - Math.abs((side == 'left' ? to-i : i-to)) /
self.opacityFactor);
+ if(!$.browser.msie && self.options.opacity) {
+ if(self.options.opacityElement) {
+ $(self.options.opacityElement, this).css('opacity', Math.abs((side
== 'left' ? to-i : i-to)) / self.opacityFactor);
+ } else {
+ $(this).css('opacity', 1 - Math.abs((side == 'left' ? to-i : i-to))
/ self.opacityFactor);
+ }
+ }
+
});
+ //This fixes Safari reflow issues
+ this.element.parent().scrollTop(0);
+
},
_uiHash: function() {
@@ -115,6 +134,7 @@
items: "> *",
orientation: 'horizontal',
item: 0,
+ trigger: 'click',
opacity: 'auto', //Can be set to a certain factor instead of auto, to
finetune opacity settings
center: true, //If set to false, the actual element's base position
isn't touched in any way
recenter: true //If set to false, the parent element's position doesn't
get animated while items change