MediaWiki:Rotate3Di.js

(function ($) {   // rotate3Di v0.9.2    // https://github.com/zachstronaut/rotate3Di    // 2012.10.04 - 2009.03.11 Zachary Johnson http://www.zachstronaut.com    // "3D" isometric rotation and animation using CSS3 transformations    // currently supported in Safari/Chrome/Webkit, Firefox 3.5+, IE 9+,    // and Opera 11+. Tested with jQuery 1.3.x through 1.7.2.    var calcRotate3Di = {        direction: function (now) {return (now < 0 ? -1 : 1);},       degrees: function (now) {return (Math.floor(Math.abs(now))) % 360;},        scale: function (degrees) {return (1 - (degrees % 180) / 90)                                            * (degrees >= 180 ? -1 : 1);}   }    // Custom animator    $.fx.step.rotate3Di = function (fx) {        direction = calcRotate3Di.direction(fx.now);        degrees = calcRotate3Di.degrees(fx.now);        scale = calcRotate3Di.scale(degrees);

if (fx.options && typeof fx.options['sideChange'] != 'undefined') { if (fx.options['sideChange']) { var prevScale = $(fx.elem).data('rotate3Di.prevScale'); // negative scale means back side // positive scale means front side // if one is pos and one is neg then we have changed sides // (but one could actually be zero). if (scale * prevScale <= 0) { // if one was zero, deduce from the other which way we are // flipping: to the front (pos) or to the back (neg)? fx.options['sideChange'].call(                       fx.elem,                        (scale > 0 || prevScale < 0)                    ); // this was commented out to prevent calling it more than // once, but then that broke legitimate need to call it                   // more than once for rotations of 270+ degrees! //fx.options['sideChange'] = null; // this is my answer to commenting the above thing out... // if we just flipped sides, flip-flop the old previous // scale so that we can fire the sideChange event correctly // if we flip sides again. $(fx.elem).data(                       'rotate3Di.prevScale',                        $(fx.elem).data('rotate3Di.prevScale') * -1                    ); }           }

// Making scale positive before setting it prevents flip-side // content from showing up mirrored/reversed. scale = Math.abs(scale); }

// Since knowing the current degrees is important for detecting side // change, and since Firefox 3.0.x seems to not be able to reliably get // a value for css('transform') the first time after the page is loaded // with my flipbox demo... I am storing degrees someplace where I know // I can get them. $(fx.elem).data('rotate3Di.degrees', direction * degrees); $(fx.elem).css(           'transform',            'skewY(' + direction * degrees + 'deg)'                + ' scale(' + scale + ', 1)'        ); }   // fx.cur must be monkey patched because otherwise it would always // return 0 for current rotate3Di value var proxied = $.fx.prototype.cur; $.fx.prototype.cur = function { if(this.prop == 'rotate3Di') { return $(this.elem).data('rotate3Di.degrees') || 0; }       return proxied.apply(this, arguments); }   $.fn.rotate3Di = function (degrees, duration, options) { if (typeof duration == 'undefined') { duration = 0; }       if (typeof options == 'object') { $.extend(options, {duration: duration}); } else { options = {duration: duration}; }       if (degrees == 'toggle') { // Yes, jQuery has the toggle event but that's only good for // clicks, and likewise hover is only good for mouse in/out. // What if you want to toggle based on a timer or something else? if ($(this).data('rotate3Di.flipped')) { degrees = 'unflip'; } else { degrees = 'flip'; }       }        if (degrees == 'flip') { $(this).data('rotate3Di.flipped', true);

var direction = -1; if (               typeof options == 'object'                && options['direction']                && options['direction'] == 'clockwise'            ) { direction = 1; }           degrees = direction * 180; } else if (degrees == 'unflip') { $(this).data('rotate3Di.flipped', false); degrees = 0; }       var d = $(this).data('rotate3Di.degrees') || 0; $(this).data(           'rotate3Di.prevScale',            calcRotate3Di.scale(calcRotate3Di.degrees(d))        ); $(this).animate({rotate3Di: degrees}, options); } })(jQuery);