Committer: dpetrov
LJSUP-9790: Cannot view picsA trunk/htdocs/js/jquery/jquery.lj.spinner.js
Added: trunk/htdocs/js/jquery/jquery.lj.spinner.js =================================================================== --- trunk/htdocs/js/jquery/jquery.lj.spinner.js (rev 0) +++ trunk/htdocs/js/jquery/jquery.lj.spinner.js 2011-09-15 03:16:02 UTC (rev 11006) @@ -0,0 +1,156 @@ +/** + * Spinner widget. + * + * Copyright 2011, dmitry.petrov@sup.com + * + * Spinner widget deals with rotating spinner functionality. The source + * has to be an alement with desired image as a bckground and with width + * and height set. Image will be rotated using css3 transformations if + * availible or will use canvas fallback with excanvas for older internet + * explorer browsers. + * + * So, spinner will rotate in IE7+, Firefox 1.5+, Opera 9+, Safari, Chrome + */ +(function($, window) { + + //TODO: well, we need modernizr! + var hasTransitionsSupport = function() { + return false; + var testDiv = document.createElement('div'); + return !(typeof testDiv.style.webkitTransform == 'undefined' && + typeof testDiv.style.MozTransform == 'undefined' && + typeof testDiv.style.OTransform == 'undefined' && + typeof testDiv.style.msTransform == 'undefined' && + typeof testDiv.style.transform == 'undefined'); + }(); + + var hasCanvasSupport = function() { + //we use excanvas, so msie > 6 always has canvas + return !!document.createElement('canvas').getContext || (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) > 6); + }(); + + var requestAnimationFrame = function() { + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + function(callback, element) { + return window.setTimeout(function() { + callback(+new Date()); + }, 1000 / 60); + }; + }(); + + var widget; + + $.widget( 'lj.spinner', $.lj.basicWidget, { + _create: function() { + widget = this; + + this._animating = false; + $.lj.basicWidget.prototype._create.call( this ); + + this._createNodes(); + }, + + _createNodes: function() { + if (hasTransitionsSupport || !hasCanvasSupport) { return; } + + var background = this.element.css('backgroundImage'), + match = /^url\("?([a-z.\/:_0-9-]*)/i.exec(background), + width = this.element.width(), + height = this.element.height(), + url, context, canvasImg; + + if (!match) { return } + url = match[1]; + + this.element.css('backgroundImage', 'url()'); + + this.canvas = document.createElement('canvas'); + //we need 1px lag for explorer excanvas, because the image float in range of 1px + this.canvas.width = width + 1; + this.canvas.height = height + 1; + this.element.append(this.canvas) + + if (jQuery.browser.msie) { + //init excanvas + G_vmlCanvasManager.initElement(this.canvas); + } + context = this.canvas.getContext('2d'); + + this.canvasImg = new Image; + this.canvasImg.onload = function() { + context.drawImage(widget.canvasImg, width, height); + }; + this.canvasImg.src = url; + }, + + start: function() { + this._animating = true; + this._runAnimation(); + }, + + stop: function() { + this._animating = false; + }, + + _runAnimation: function() { + var currentDegree = 0, + step = 4, + el = (hasTransitionsSupport) ? widget.element.get(0) : widget.canvas; + + function transformStep() { + widget._setTransform(el, 'rotate({currentDegree}deg)'.replace('{currentDegree}', currentDegree)); + } + + function canvasStep() { + var context = el.getContext('2d'), + center = { + x: Math.ceil(el.width/2), + y: Math.ceil(el.height/2), + imx: Math.ceil(widget.canvasImg.width/2), + imy: Math.ceil(widget.canvasImg.height/2) + }; + context.save(); + context.clearRect(0, 0, el.width, el.height) + context.translate(center.x, center.y); + context.rotate(currentDegree * Math.PI / 180 ); + context.drawImage(widget.canvasImg, -center.imx, -center.imy); + context.restore(); + } + + function animStep() { + currentDegree = currentDegree + step; + if (hasTransitionsSupport) { + transformStep(); + } else { + canvasStep(); + } + + // return; + + if (widget._animating) { + requestAnimationFrame(animStep); + } else { + if (hasTransitionsSupport) { + widget._setTransform(el, ''); + } else { + // canvasStep(); + } + } + } + + animStep(); + }, + + _setTransform: function(el, newProp) { + el.style.webkitTransform = newProp; + el.style.MozTransform = newProp; + el.style.OTransform = newProp; + el.style.msTransform = newProp; + el.style.transofrm = newProp; + } + }); +})(jQuery, window);