https://tunegenie.com/page/js/libraries/kemso-more.js

1/*
2---
3Kemso More Extensions
4
5copyrights:
6  - [Kemso](http://kemso.com)
7
8licenses:
9  - You may not under any circumstances copy, redistribute, or re-sell this code, 
10  	or use it as the basis for another site or application.
11  - You may modify this code for the purposes of modifying a single insillation of the 
12  	purchased product which which this code was distributed
13  - http://whiteloupe.com/license.txt
14...
15*/
16
17
18
19
20
21/*
22---
23
24name: LoadImage
25
26description: Loads an image, showing a spinner and fading in on load. 
27Optionally replaces image with pixel.gif, setting source to background-image
28
29license: MIT-style license.
30
31authors: Kemso, LLC (http://www.kemso.com)
32			- Matt McCloskey
33
34provides: [Touch]
35
36...
37*/
38
39var LoadImage = new Class({
40	Implements: [Options, Events],
41	options: {
42		replace: true,
43		spinner_size: 'large'
44	},
45	initialize: function(el, options)
46	{
47		this.setOptions(options);
48		this.img = document.id(el);
49		
50		if(this.img.retrieve('loading') || this.img.retrieve('loaded'))
51		{
52			// image has been loaded already, check the source
53			//if(document.id(this.img).src == this.img)
54			return $C(this.img);
55		}
56		
57		this.img.store('ClassRef', this);
58		
59		this.spinner = new Spinner({relativeTo: this.img.getParent(), 'size': this.options.spinner_size}).start();
60		document.id(this.spinner).position({relativeTo: this.img});
61		
62		// Are we lazy loading this image?
63		if(this.img.get('data-src')){
64			this.img.set('src', this.img.get('data-src'));
65		}
66		
67		// Fade the image in when it's loaded
68		this.img.style.visibility = 'hidden';
69		this.img.store('loading', true);
70		this.src = this.img.get('src');
71		new AssetLoader(this.src, {
72			events: {
73				'load': function(){
74					
75					document.id(this.img).addClass('loaded');
76					this.img.store('loading', false);
77					this.img.store('loaded', true);
78					// Use CSS transitions where available for better results
79					var usecss = false;
80					if(usecss && (Browser.Platform.ios || Browser.Platform.android || Browser.Platform.webos || Browser.safari || Browser.chrome))
81					{
82						setTimeout(function(){
83							this.img.style.webkitTransition = 'opacity 500ms cubic-bezier(0,0,0.25,1)';
84							this.img.setStyle('opacity', 1);
85						}.bind(this), 1);
86					}
87					else
88					{
89						//document.id(this.img).setStyle('opacity', 1);
90						document.id(this.img).tween('opacity', [0,1]);
91						//this.img.style.visibility = 'visible';
92					}
93					
94					this.spinner.destroy();
95					this.fireEvent('load', this.img);
96				}.bind(this)
97			}
98		});
99		
100		// Swap image src with pixel.gif and set background-image to original source
101		// This helps prevent image theft, and gets around mobile web-kit memory issues
102		if(this.options.replace && config && config.get('site_url')) 
103		this.img.setStyles({
104			'background-image': 'url('+this.src+')',
105			'background-repeat': 'no-repeat'
106		}).set('src', config.get('site_url')+'assets/images/pixel.gif');
107	},
108	
109	toElement: function()
110	{
111		return this.img;
112	}
113});
114
115
116
117
118
119
120/*
121---
122description: A Cross Broser rotation Fx
123
124license: MIT-style
125
126authors:
127- Arieh Glazer
128
129requires:
130- core/1.2.4: Element,Fx,Class
131
132provides: [Fx.Rotate]
133
134...
135*/
136Fx.Rotate = new Class({
137	Extends: Fx,
138	options: {
139		origin: 'center center'
140	},
141	initialize: function(element, options) {
142		this.parent(options);
143		
144		this.element = document.id(element);
145		this.prefix = (Browser.firefox ? 'moz' : (Browser.safari || Browser.chrome ? 'webkit' : 'o'));
146		this.radions = Math.PI * 2 / 360;
147
148		if(Browser.ie) { // IE
149			this.element.setStyle('filter','progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand")');
150		}
151		else {
152			this.element.setStyle('-' + this.prefix + '-transform-origin',this.options.origin);
153		}
154		
155	},
156	
157	start: function(from,to) {
158		if(typeOf(to) == 'null') to = from, from = this.element.retrieve('rotate:current', 0);
159		this.parent(from,to);
160		
161		return this;
162	},
163	
164	set: function(current) {
165	
166		if (Browser.ie) current *=-1;
167		var matrix = this.getMatrix(current);
168
169		if (Browser.ie){
170			this.element.filters.item(0).M11 = matrix[0];
171			this.element.filters.item(0).M12 = matrix[1];
172			this.element.filters.item(0).M21 = matrix[2];
173			this.element.filters.item(0).M22 = matrix[3];
174		}else{
175			this.element.setStyle('-' + this.prefix + '-transform', 'matrix(' + matrix[0] + ',' + matrix[1] + ',' + matrix[2] + ', ' + matrix[3] + ', 0, 0)');
176		}
177		
178		this.element.store('rotate:current', current);
179		
180		return this;
181	},
182	
183	getMatrix: function(deg) {
184		var rad = deg * (this.radions), costheta = Math.cos(rad), sintheta = Math.sin(rad);
185		var a = parseFloat(costheta).toFixed(8),
186			c = parseFloat(-sintheta).toFixed(8),
187			b = parseFloat(sintheta).toFixed(8),
188			d = parseFloat(costheta).toFixed(8);
189		return [a,b,c,d];
190	}
191});
192
193
194
195Element.implement({
196
197	inView: function(){
198		
199		var status = this.retrieve('inview:status'),
200			scroll = InView.scroll,
201			lats = this.retrieve('inview:lats') || [1, .5, 0],
202			pos = this.getCoordinates(),
203			args = [];
204			pos.y = pos.top;
205		
206		// Is it on the page?
207		if(pos.top < scroll.y + scroll.height && pos.bottom > scroll.y)
208		{
209			if( ! status)
210			{
211				this.fireEvent('enterview');
212				this.store('inview:status', true);
213			}
214			
215			// What percentage of the element height is laying on the window lat
216			var lat_percs = [];
217			for(var i = 0, l = lats.length; i < l; i++){
218				args.push((scroll.y + (scroll.height * lats[i]) - pos.top) / pos.height);
219			}
220			
221			// how much is on the page?
222			/*
223var showing = Math.min(scroll.y + scroll.height - pos.top, scroll.height);
224			showing -= Math.max(scroll.y + scroll.height - pos.bottom, 0);
225			args.push(showing);
226*/
227			
228			args.push(scroll);
229			args.push(pos);
230			
231			for(var i = 0, l = lats.length; i < l; i++){
232				args.push((scroll.y + (scroll.height * lats[i]) - pos.top) / (scroll.height * (1-lats[i])));
233			}
234			
235			return args;
236		}
237		else
238		{
239			if(status)
240			{
241				this.fireEvent('leaveview');
242				this.store('inview:status', false);
243			}
244			
245			return false;

246		}
247	}
248});
249
250var InView = {};
251InView.active = false;
252InView.elements = [];
253InView.scroll = { y: 0, height: 0 };
254InView.register = function(el){
255	if( ! InView.active) InView.start();
256	InView.elements.push(el);
257	
258	args = el.inView();
259	if(args) el.fireEvent.delay(2, el, ['inview', args]);
260};
261
262InView.start = function(){
263	InView.scroll = { y: window.getScroll().y, height: window.getSize().y };
264	window.addEvent('scroll', function(){
265		
266		InView.check();
267		
268	});
269	
270	InView.active = true;
271};
272
273InView.check = function(){
274	InView.scroll = { y: window.getScroll().y, height: window.getSize().y };
275		
276	for(var i = 0, l = InView.elements.length; i < l; i++){
277		var el = InView.elements[i],
278		args = el.inView();
279		if(args) el.fireEvent('inview', args);
280	};
281}
282
283
284Element.Events.inview = {
285    onAdd: function(){
286    	InView.register(this);
287    }
288};
289
290
291Element.Events.enterview = {
292	onAdd: function(){
293		InView.register(this);
294	}
295};
296Element.Events.leaveview = {
297	onAdd: function(){
298		InView.register(this);
299	}	
300};
301
302
303// OverLabel
304var OverLabel = new Class({
305	
306	initialize: function(input)
307	{
308		OverLabel.register(this);
309			
310		input = document.id(input);
311		if(document.id(document.body).getElement('label[for="'+input.get('id')+'"]') && ! input.retrieve('overlabel'))
312		{
313			input.store('overlabel', this);
314			
315			var label = document.id(document).getElement('label[for="'+input.get('id')+'"]');
316			
317			this.input = input;
318			this.label = label.addClass('overlabel');
319			
320			label.setStyles({
321				'position': 'absolute',
322				'color': input.getStyle('color'),
323				'font-size': input.getStyle('font-size'),
324				'line-height': input.getStyle('line-height'),
325				'width': input.getStyle('width'),
326				'padding-top': input.getStyle('padding-top').toInt() + 1,
327				'padding-right': input.getStyle('padding-right').toInt() + 1,
328				'padding-bottom': input.getStyle('padding-bottom').toInt() + 1,
329				'padding-left': input.getStyle('padding-left').toInt() + 1
330			});
331			label.position({relativeTo: input, position: 'topLeft', edge: 'topLeft'});
332			
333			input.addEvent('blur', function(){ input.store('hasFocus', false); });
334			input.addEvents({
335				'click': this.enterEdit.bind(this),

336				'focus': this.enterEdit.bind(this),
337				'blur': this.leaveEdit.bind(this),
338				'keyup': this.assert.bind(this),
339				'keypress': function(){ label.setStyles({'display': 'none'}); }
340			});
341			input.addEvents({
342				'click': this.update.bind(this),
343				'focus': this.update.bind(this),
344				'blur': this.update.bind(this)
345			});
346			label.addEvents({
347				'click': this.enterEdit.bind(this)
348			});
349			
350			this.assert();			
351		}
352	},
353	
354	assert: function()
355	{
356		if(this.input.get('value').length > 0){
357			this.label.setStyles({'display': 'none'});
358		} else {
359			this.leaveEdit();
360		}
361	},
362	
363	enterEdit: function()
364	{
365		this.assert();
366		this.input.store('hasFocus', true);
367		this.input.focus();
368		this.label.setStyle('opacity', .5);
369	},
370	
371	leaveEdit: function()
372	{
373		if(this.input.get('value') == '') this.label.setStyles({'display': 'block', 'opacity': this.input.retrieve('hasFocus') ? .5 : 1});
374		else this.label.setStyles({'display': 'none'});
375	},
376	
377	update: function(all)
378	{
379		this.label.position({relativeTo: this.input, position: 'topLeft', edge: 'topLeft'});
380		this.assert();
381		
382		if(typeOf(all) == 'null' || all == true)
383		{
384			// Update the rest
385			OverLabel.instances.each(function(i){
386				if(i !== this) i.update(false); 
387			}.bind(this));
388		}
389	}
390});
391
392
393OverLabel.instances = [];
394OverLabel.register = function(el){
395	return OverLabel.instances.push(el);
396};
397OverLabel.update = function(){
398	OverLabel.instances.each(function(i){ i.update(false); });
399};
400
401
402OverLabel.init = function(){
403	document.id(document.body).getElements('input[type="text"].overlabel, input[type="password"], textarea.overlabel').each(function(el){ new OverLabel(el); });
404};
405
406window.addEvent('domready', function(){
407	OverLabel.init();
408});