3DPrint Lite / trunk

3DPrint Lite vtrunk

3dprint-lite / includes / ext / ProgressButtonStyles / js / progressButton.js

progressButton.js in 3DPrint Lite trunk, at includes/ext/ProgressButtonStyles/js/progressButton.js

217 lines 6.5 KB

Raw Download Zip

1	/**
2	* progressButton.js v1.0.0
3	* http://www.codrops.com
4	*
5	* Licensed under the MIT license.
6	* http://www.opensource.org/licenses/mit-license.php
7	*
8	* Copyright 2013, Codrops
9	* http://www.codrops.com
10	*/
11	;( function( window ) {
12
13	'use strict';
14
15	// https://gist.github.com/edankwan/4389601
16	Modernizr.addTest('csstransformspreserve3d', function () {
17	var prop = Modernizr.prefixed('transformStyle');
18	var val = 'preserve-3d';
19	var computedStyle;
20	if(!prop) return false;
21
22	prop = prop.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');
23
24	Modernizr.testStyles('#modernizr{' + prop + ':' + val + ';}', function (el, rule) {
25	computedStyle = window.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : '';
26	});
27
28	return (computedStyle === val);
29	});
30
31	function extend( a, b ) {
32	for( var key in b ) {
33	if( b.hasOwnProperty( key ) ) {
34	a[key] = b[key];
35	}
36	}
37	return a;
38	}
39
40	// support
41	var support = { transitions : Modernizr.csstransitions, transforms3d : Modernizr.csstransforms3d && Modernizr.csstransformspreserve3d },
42	// transition end event name
43	transEndEventNames = {
44	'WebkitTransition': 'webkitTransitionEnd',
45	'MozTransition': 'transitionend',
46	'OTransition': 'oTransitionEnd',
47	'msTransition': 'MSTransitionEnd',
48	'transition': 'transitionend'
49	},
50	transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ];
51
52	function ProgressButton( el, options ) {
53	if (!el) return;
54	this.button = el;
55	this.options = extend( {}, this.options );
56	extend( this.options, options );
57	this._init();
58	}
59
60	ProgressButton.prototype.options = {
61	// time in ms that the status (success or error will be displayed)
62	// during this time the button will be disabled
63	statusTime : 1500
64	};
65
66	ProgressButton.prototype._init = function() {
67	this._validate();
68	// create structure
69	this._create();
70	// init events
71	this._initEvents();
72	};
73
74	ProgressButton.prototype._validate = function() {
75	// we will consider the fill/horizontal as default
76	if( this.button.getAttribute( 'data-style' ) === null ) {
77	this.button.setAttribute( 'data-style', 'fill' );
78	}
79	if( this.button.getAttribute( 'data-vertical' ) === null && this.button.getAttribute( 'data-horizontal' ) === null ) {
80	this.button.setAttribute( 'data-horizontal', '' );
81	}
82	if( !support.transforms3d && this.button.getAttribute( 'data-perspective' ) !== null ) {
83	this.button.removeAttribute( 'data-perspective' );
84	this.button.setAttribute( 'data-style', 'fill' );
85	this.button.removeAttribute( 'data-vertical' );
86	this.button.setAttribute( 'data-horizontal', '' );
87	}
88	};
89
90	ProgressButton.prototype._create = function() {
91	var textEl = document.createElement( 'span' );
92	textEl.className = 'content';
93	textEl.innerHTML = this.button.innerHTML;
94	var progressEl = document.createElement( 'span' );
95	progressEl.className = 'progress';
96
97	var progressInnerEl = document.createElement( 'span' );
98	progressInnerEl.className = 'progress-inner';
99	progressEl.appendChild( progressInnerEl );
100	// clear content
101	this.button.innerHTML = '';
102
103	if( this.button.getAttribute( 'data-perspective' ) !== null ) {
104	var progressWrapEl = document.createElement( 'span' );
105	progressWrapEl.className = 'progress-wrap';
106	progressWrapEl.appendChild( textEl );
107	progressWrapEl.appendChild( progressEl );
108	this.button.appendChild( progressWrapEl );
109	}
110	else {
111	this.button.appendChild( textEl );
112	this.button.appendChild( progressEl );
113	}
114
115	// the element that serves as the progress bar
116	this.progress = progressInnerEl;
117
118	// property to change on the progress element
119	if( this.button.getAttribute( 'data-horizontal' ) !== null ) {
120	this.progressProp = 'width';
121	}
122	else if( this.button.getAttribute( 'data-vertical' ) !== null ) {
123	this.progressProp = 'height';
124	}
125	this._enable();
126	};
127
128	ProgressButton.prototype._setProgress = function( val ) {
129	this.progress.style[ this.progressProp ] = 100 * val + '%';
130	};
131
132	ProgressButton.prototype._initEvents = function() {
133	var self = this;
134	this.button.addEventListener( 'click', function() {
135	// disable the button
136	self.button.setAttribute( 'disabled', '' );
137	// add class state-loading to the button (applies a specific transform to the button depending which data-style is defined - defined in the stylesheets)
138	classie.remove( self.progress, 'notransition' );
139	classie.add( this, 'state-loading' );
140
141	setTimeout( function() {
142	if( typeof self.options.callback === 'function' ) {
143	self.options.callback( self );
144	}
145	else {
146	self._setProgress( 1 );
147	var onEndTransFn = function( ev ) {
148	if( support.transitions && ev.propertyName !== self.progressProp ) return;
149	this.removeEventListener( transEndEventName, onEndTransFn );
150	self._stop();
151	};
152
153	if( support.transitions ) {
154	self.progress.addEventListener( transEndEventName, onEndTransFn );
155	}
156	else {
157	onEndTransFn.call();
158	}
159
160	}
161	},
162	self.button.getAttribute( 'data-style' ) === 'fill' \|\|
163	self.button.getAttribute( 'data-style' ) === 'top-line' \|\|
164	self.button.getAttribute( 'data-style' ) === 'lateral-lines' ? 0 : 200 ); // TODO: change timeout to transitionend event callback
165	} );
166	};
167
168	ProgressButton.prototype._stop = function( status ) {
169	var self = this;
170
171	setTimeout( function() {
172	// fade out progress bar
173	self.progress.style.opacity = 0;
174	var onEndTransFn = function( ev ) {
175	if( support.transitions && ev.propertyName !== 'opacity' ) return;
176	this.removeEventListener( transEndEventName, onEndTransFn );
177	classie.add( self.progress, 'notransition' );
178	self.progress.style[ self.progressProp ] = '0%';
179	self.progress.style.opacity = 1;
180	};
181
182	if( support.transitions ) {
183	self.progress.addEventListener( transEndEventName, onEndTransFn );
184	}
185	else {
186	onEndTransFn.call();
187	}
188
189
190	// add class state-success to the button
191	if( typeof status === 'number' ) {
192	var statusClass = status >= 0 ? 'state-success' : 'state-error';
193	classie.add( self.button, statusClass );
194	// after options.statusTime remove status
195	setTimeout( function() {
196	classie.remove( self.button, statusClass );
197	self._enable();
198	}, self.options.statusTime );
199	}
200	else {
201	self._enable();
202	}
203
204	// remove class state-loading from the button
205	classie.remove( self.button, 'state-loading' );
206	}, 100 );
207	};
208
209	// enable button
210	ProgressButton.prototype._enable = function() {
211	this.button.removeAttribute( 'disabled' );
212	}
213
214	// add to global namespace
215	window.ProgressButton = ProgressButton;
216
217	})( window );