can3p (can3p) wrote in changelog,
can3p
can3p
changelog

[ljcom] r11006: LJSUP-9790: Cannot view pics

Committer: dpetrov
LJSUP-9790: Cannot view pics
A   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);

Tags: can3p, js, ljcom
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 0 comments