https://www.luze.es/common/js/cuteFields.js

1function cuteSelect(options)
2{
3	this.options = options || {};
4	this.targets = this.options.targets || 'select';
5	this.cuteClass = this.options.className || 'cuteSelect';
6	this.positionMode = this.options.positionMode || 2;
7	this.refresh = this.options.refresh || 0;
8	
9	this.init = function()
10	{
11		var targets = $$(this.targets);
12		var selectObj, size;
13		
14		for(var i=0; i<targets.length; i++)
15		{
16			selectObj = targets[i];
17			if( !selectObj.hasClass('cuted') )
18			{
19				if(selectObj.getStyle('display') != 'none'){
20					selectObj.addClass('cuted');
21					selectObj.mask = new Element('div', {'class':this.cuteClass} );
22					size = selectObj.getSize();
23					selectObj.mask.setStyles( {width:size.x, height:size.y, lineHeight:size.y } );
24					selectObj.mask.innerHTML = selectObj.options[selectObj.selectedIndex].innerHTML;
25					
26					selectObj.addEvent('change', function(){ this.mask.innerHTML = this.options[this.selectedIndex].innerHTML; } );
27					
28					if(this.positionMode == 2)
29					{
30						selectObj.setStyles( {opacity:0.01} );
31						selectObj.mask.setStyles( {position:'absolute'} );
32						selectObj.mask.setStyles( selectObj.getCoordinates() );
33						selectObj.mask.inject(selectObj, 'before');
34					}
35					else/*doesnt work with floating elements*/
36					{
37						selectObj.setStyles( {position:'absolute', opacity:0.01} );
38						selectObj.mask.inject(selectObj, 'after');
39					}
40				}
41			}
42		}	
43	}
44	
45	if(this.refresh) setInterval( this.init.bind(this), this.refresh );
46	this.init();
47	
48}
49
50function cuteCheckbox(options)
51{
52	this.options = options || {};
53	this.targets = this.options.targets || 'input[type=checkbox]';
54	this.cuteClass = this.options.className || 'cuteCheckbox';
55	this.refresh = this.options.refresh || 0;
56	
57	this.onCheck = function()
58	{
59		if(this.checked)
60		{
61			this.mask.addClass('checked');
62		}
63		else
64		{
65			this.mask.removeClass('checked');
66			if(this.disabled){
67				this.mask.addClass('disabled');
68			}else{
69				this.mask.removeClass('disabled');
70			}
71		}
72	}
73	
74	this.init = function()
75	{
76		var targets = $$(this.targets);
77		var selectObj, size;
78		
79		for(var i=0; i<targets.length; i++)
80		{
81			checkboxObj = targets[i];
82			checkboxObj = $(checkboxObj);
83			if( !checkboxObj.hasClass('cuted') )
84			{
85				checkboxObj.addClass('cuted');
86				
87				//checkboxObj.mask = new Element('span', {'class':this.cuteClass,'id':'checkCuted'+this.popUp+checkboxObj.value} ); this.popUp ¿????
88				checkboxObj.mask = new Element('span', {'class':this.cuteClass,'id':'checkCuted'+checkboxObj.value} );
89
90				checkboxObj.addEvent('click', this.onCheck );
91				
92				checkboxObj.setStyles( {opacity:0.01} );
93				
94				checkboxObj.mask.replaces(checkboxObj);
95				checkboxObj.mask.adopt(checkboxObj);
96				
97				this.onCheck.run( [] , checkboxObj);
98			}
99		}
100		
101	}
102	
103	if(this.refresh) setInterval( this.init.bind(this), this.refresh );
104	
105	this.init();
106}
107
108/*function cuteCheckbox(options)
109{
110	this.options = options || {};
111	this.targets = this.options.targets || 'input[type=checkbox]';
112	this.cuteClass = this.options.className || 'cuteCheckbox';
113	this.positionMode = this.options.positionMode || 2;
114	this.refresh = this.options.refresh || 0;
115	
116	this.onCheck = function()
117	{
118		if(this.checked)
119		{
120			this.mask.addClass('checked');
121		}
122		else
123		{
124			this.mask.removeClass('checked');
125		}
126	}
127	
128	this.init = function()
129	{
130		var targets = $$(this.targets);
131		var selectObj, size;
132		
133		for(var i=0; i<targets.length; i++)
134		{
135			checkboxObj = targets[i];
136			if( !checkboxObj.hasClass('cuted') )
137			{
138				checkboxObj.addClass('cuted');
139				checkboxObj.mask = new Element('div', {'class':this.cuteClass} );
140				
141				checkboxObj.addEvent('click', this.onCheck );
142				
143				if(this.positionMode == 2)
144				{
145					checkboxObj.setStyles( {opacity:0.01} );
146					checkboxObj.mask.setStyles( {position:'absolute'} );
147					
148					size = checkboxObj.getCoordinates();

149					size = {left:size.left, top:size.top};
150
151					checkboxObj.mask.setStyles( size );
152					checkboxObj.mask.inject(checkboxObj, 'before');
153				}
154				else //doesnt work with floating elements
155				{
156					checkboxObj.setStyles( {position:'absolute', opacity:0.01} );
157					checkboxObj.mask.inject(checkboxObj, 'after');
158				}
159				
160			}
161			
162			checkboxObj.fireEvent('click');
163			
164		}
165		
166	}
167	
168	if(this.refresh) setInterval( this.init.bind(this), this.refresh );
169	
170	this.init();
171}*/