https://alphavillejournal.com/js/jquick.transform.js

1// jQuick CSS3 Transform Plugin - http://www.codingjack.com/playground/jquick/
2// © Jason McElwaine aka CodingJack - http://codecanyon.net/user/CodingJack
3// License: http://creativecommons.org/licenses/by-sa/3.0/deed.en_US
4// 4kb minified, http://www.codingjack.com/playground/jquick/js/jquick.transform.min.js
5
6;(function($) {
7	
8	'use strict';
9	
10	var css = $.transitions(),
11	transformProp,
12	skeleton,
13	
14	comma = /,/g,
15	dollar = /{}/g,
16	reg = /[A-Z]/g,
17	regT = / cj-tween/g,
18	trim = /^\s+|\s+$/g,
19	regP = new RegExp('{props}'),
20	regE = new RegExp('{easing}'),
21	regD = new RegExp('{duration}'),
22	gotcha = /(auto|inherit|rgb|%|#)/,
23	
24	// credit: http://matthewlein.com/ceaser/
25	ceaserEasing = {
26		
27		linear: {
28			
29			easenone: "0.250, 0.250, 0.750, 0.750",
30			easein: "0.420, 0.000, 1.000, 1.000",
31			easeout: "0.000, 0.000, 0.580, 1.000",
32			easeinout: "0.420, 0.000, 0.580, 1.000"
33			
34		},
35		
36		quint: {
37			
38			easein: "0.755, 0.050, 0.855, 0.060",
39			easeout: "0.230, 1.000, 0.320, 1.000",
40			easeinout: "0.860, 0.000, 0.070, 1.000"
41			
42		},
43		
44		quad: {
45			
46			easein: "0.550, 0.085, 0.680, 0.530",
47			easeout: "0.250, 0.460, 0.450, 0.940",
48			easeinout: "0.455, 0.030, 0.515, 0.955"
49			
50		},
51		
52		quart: {
53			
54			easein: "0.895, 0.030, 0.685, 0.220",
55			easeout: "0.165, 0.840, 0.440, 1.000",
56			easeinout: "0.770, 0.000, 0.175, 1.000"
57			
58		},
59		
60		cubic: {
61			
62			easein: "0.550, 0.055, 0.675, 0.190",
63			easeout: "0.215, 0.610, 0.355, 1.000",
64			easeinout: "0.645, 0.045, 0.355, 1.000"
65			
66		},
67		
68		circ: {
69			
70			easein: "0.600, 0.040, 0.980, 0.335",
71			easeout: "0.075, 0.820, 0.165, 1.000",
72			easeinout: "0.785, 0.135, 0.150, 0.860"
73			
74		},
75		
76		sine: {
77			
78			easein: "0.470, 0.000, 0.745, 0.715",
79			easeout: "0.390, 0.575, 0.565, 1.000",
80			easeinout: "0.445, 0.050, 0.550, 0.950"
81			
82		},
83		
84		expo: {
85		
86			easein: "0.950, 0.050, 0.795, 0.035",
87			easeout: "0.190, 1.000, 0.220, 1.000",
88			easeinout: "1.000, 0.000, 0.000, 1.000"
89			
90		}
91		
92	};
93	
94	if(css) {
95	
96		var pre = css.property, sheet = document.createElement('style');
97		transformProp = $.transforms();
98		css = css.end;
99
100		sheet.type = 'text/css';
101		sheet.innerHTML = '.cj-tween{' + pre + '-property:none !important;}';
102		document.getElementsByTagName('head')[0].appendChild(sheet);
103		
104		skeleton = pre + '-property:{props};' + pre + '-duration:{duration}s;' + pre + '-timing-function:cubic-bezier({easing});';
105		
106	}
107	
108	function Transform(obj, to, sets) {
109	
110		this.onComplete = sets.onComplete;
111		this.onCompleteParams = sets.onCompleteParams;
112		
113		if(sets.duration === 0) {
114
115			this.stop();
116			return;
117			
118		}
119		
120		obj.style.visibility = 'visible';
121		obj.cjTransform = this;
122		
123		this.to = to;
124		this.obj = obj;
125		this.duration = sets.duration || jQuick.defaultDuration;
126		this.ease = (sets.ease || jQuick.defaultEase).toLowerCase().split('.'); 
127		
128		if(!sets.delay) {
129			
130			this.timer(30);
131			
132		}
133		else {
134			
135			this.timer(sets.delay > 30 ? sets.delay : 30);
136			
137		}
138		
139	}
140	
141	Transform.prototype = {
142		
143		timer: function(delay) {
144			
145			var $this = this;
146			
147			this.delayed = setTimeout(function() {
148				
149				$this.animate();
150				
151			}, delay);
152			
153		},
154		
155		animate: function() {
156			
157			var j,
158			key,
159			str,
160			cur,
161			orig,
162			bgPos,
163			i = 0,
164			total,  
165			finder,
166			moving,
167			replaced,
168			values = [], 
169			tweens = [],
170			to = this.to, 
171			obj = this.obj,
172			easing = this.ease,
173			duration = this.duration,
174			current = obj.getAttribute('style');
175			
176			for(key in to) {
177				
178				if(!to.hasOwnProperty(key)) continue;
179				
180				str = key;
181				finder = str.match(reg);
182				
183				if(finder) {
184					
185					j = finder.length;
186						
187					while(j--) {
188						
189						cur = finder[j];
190						str = str.replace(new RegExp(cur, 'g'), '-' + cur.toLowerCase());
191						
192					}
193					
194					if(str === 'ms-transform') str = '-ms-transform';
195					
196				}
197				
198				cur = orig = to[key];
199				bgPos = key === "backgroundPosition";
200				
201				if(!gotcha.test(cur) && key !== "opacity" && key.search(transformProp) === -1 && !bgPos) {
202					
203					cur += "px;";
204					
205				}
206				else if(!bgPos) {
207					
208					cur += ";";
209					
210				}
211				else {
212				
213					var x = orig.x, y = orig.y, isX = isNaN(x), isY = isNaN(y);
214					
215					if(!isX && !isY) {
216					
217						x += "px";
218						y += "px";
219						
220					}
221					else {
222					
223						var val = obj.style.backgroundPosition,
224						tick = (val !== "") ? val.split(" ") : window.getComputedStyle(obj, null).backgroundPosition.split(" ");
225						
226						(!isX) ? x += "px" : x = tick[0];
227						(!isY) ? y += "px" : y = tick[1];
228						
229					}
230	
231					cur = x + " " + y + ";";
232					
233				}
234				
235				values[i] = str + ':' + cur.replace(comma, "{}");
236				tweens[i++] = str;
237				
238				if(!current) continue;
239				finder = current.search(str);
240				
241				if(finder !== -1) {
242					
243					total = current.length - 1;
244					j = finder - 1;
245					
246					while(++j < total) {
247						
248						if(current[j] === ';') break;
249						
250					}
251					
252					current = current.split(current.substring(finder, j + 1)).join('');
253					
254				}
255				
256			}
257			
258			this.moves = moving = skeleton.replace(regP, tweens.toString()).replace(regD, (duration * 0.001).toFixed(2)).replace(regE, ceaserEasing[easing[0]][easing[1]]);
259			
260			replaced = values.toString();
261			replaced = replaced.replace(comma, '');
262			replaced = replaced.replace(dollar, ',');
263			
264			obj.className = obj.className.replace(regT, '');
265			obj.addEventListener(css, cssEnded, false);  
266			obj.setAttribute('style', current.replace(trim, '') + moving + replaced);
267			
268			this.running = true;
269			
270		},
271		
272		stop: function(callback) {
273		
274			var element = this.obj;
275			if(element) delete element.cjTransform;
276			
277			if(!this.running) {
278				
279				clearTimeout(this.delayed);	
280				if(callback) this.onComplete.apply(element, this.onCompleteParams);
281			
282				return;
283				
284			}
285			
286			element.removeEventListener(css, cssEnded, false);  
287			element.className += " cj-tween";
288			element.setAttribute("style", element.getAttribute("style").split(this.moves).join(";").split(";;").join(";"));
289			
290			if(callback) this.onComplete.apply(element, this.onCompleteParams);
291		
292		}
293		
294	};
295	
296	function cssEnded(event) {
297		
298		var $this = this.cjTransform;
299		
300		if($this) {
301			
302			if(event.target === event.currentTarget) $this.stop($this.onComplete);
303			$this.running = false;

304			
305		}
306		
307	}
308	
309	function transform(type, to, sets) {
310		
311		if(type === 'animate') {
312				
313			if(this.cjTransform) this.cjTransform.stop();
314			if(!sets) sets = {};
315			
316			if('transform' in to) {
317					
318				to[transformProp] = to.transform;
319				if(transformProp !== 'transform') delete to.transform;
320				
321			}
322			
323			new Transform(this, to, sets);	
324			
325		}
326		else if(type === 'stop' && this.cjTransform) {
327			
328			this.cjTransform.stop(to);
329			
330		}
331		
332	}
333	
334	$.fn('transform', function(type, to, sets) {
335		
336		if(transformProp) {
337
338			return this.each(transform, [type, to, sets]);
339			
340		}
341		else {
342		
343			return this;
344			
345		}
346		
347	});
348	
349	
350})(jQuick);