https://zeus.vision/wp-content/themes/zeus_new/assets/js/form.js?ver=7.1.2

1/**
2 * nlform.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	var document = window.document;
16
17	if (!String.prototype.trim) {
18		String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};
19	}
20
21	function NLForm( el ) {	
22		this.el = el;
23		//this.overlay = this.el.querySelector( '.nl-overlay' );
24		this.fields = [];
25		this.fldOpen = -1;
26		this._init();
27	}
28
29	NLForm.prototype = {
30		_init : function() {
31			var self = this;
32			Array.prototype.slice.call( this.el.querySelectorAll( 'select' ) ).forEach( function( el, i ) {
33				self.fldOpen++;
34				self.fields.push( new NLField( self, el, 'dropdown', self.fldOpen ) );
35			} );
36			Array.prototype.slice.call( this.el.querySelectorAll( 'input' ) ).forEach( function( el, i ) {
37				self.fldOpen++;
38				self.fields.push( new NLField( self, el, 'input', self.fldOpen ) );
39			} );
40			//this.overlay.addEventListener( 'click', function(ev) { self._closeFlds(); } );
41			//this.overlay.addEventListener( 'touchstart', function(ev) { self._closeFlds(); } );
42		},
43		_closeFlds : function() {
44			if( this.fldOpen !== -1 ) {
45				this.fields[ this.fldOpen ].close();
46			}
47		}
48	}
49
50	function NLField( form, el, type, idx ) {
51		this.form = form;
52		this.elOriginal = el;
53		this.pos = idx;
54		this.type = type;
55		this._create();
56		this._initEvents();
57	}
58
59	NLField.prototype = {
60		_create : function() {
61			if( this.type === 'dropdown' ) {
62				this._createDropDown();	
63			}
64			else if( this.type === 'input' ) {
65				this._createInput();	
66			}
67		},
68		_createDropDown : function() {
69			var self = this;
70			this.fld = document.createElement( 'div' );
71			this.fld.className = 'nl-field nl-dd';
72			this.toggle = document.createElement( 'a' );
73			this.toggle.innerHTML = this.elOriginal.options[ this.elOriginal.selectedIndex ].innerHTML;
74			this.toggle.className = 'nl-field-toggle';
75			this.optionsList = document.createElement( 'ul' );
76			var ihtml = '';
77			Array.prototype.slice.call( this.elOriginal.querySelectorAll( 'option' ) ).forEach( function( el, i ) {
78				ihtml += self.elOriginal.selectedIndex === i ? '<li class="nl-dd-checked">' + el.innerHTML + '</li>' : '<li>' + el.innerHTML + '</li>';
79				// selected index value
80				if( self.elOriginal.selectedIndex === i ) {
81					self.selectedIdx = i;
82				}
83			} );
84			this.optionsList.innerHTML = ihtml;
85			this.fld.appendChild( this.toggle );
86			this.fld.appendChild( this.optionsList );
87			this.elOriginal.parentNode.insertBefore( this.fld, this.elOriginal );
88			this.elOriginal.style.display = 'none';
89		},
90		_createInput : function() {
91			var self = this;
92			this.fld = document.createElement( 'div' );
93			this.fld.className = 'nl-field nl-ti-text';
94			this.toggle = document.createElement( 'a' );
95			this.toggle.innerHTML = this.elOriginal.getAttribute( 'placeholder' );
96			this.toggle.className = 'nl-field-toggle';
97			this.optionsList = document.createElement( 'ul' );
98			this.getinput = document.createElement( 'input' );
99			this.getinput.setAttribute( 'type', 'text' );
100			this.getinput.setAttribute( 'placeholder', this.elOriginal.getAttribute( 'placeholder' ) );
101			this.getinputWrapper = document.createElement( 'li' );
102			this.getinputWrapper.className = 'nl-ti-input';
103			this.inputsubmit = document.createElement( 'button' );
104			this.inputsubmit.className = 'nl-field-go';
105			this.inputsubmit.innerHTML = 'Go';
106			this.getinputWrapper.appendChild( this.getinput );
107			this.getinputWrapper.appendChild( this.inputsubmit );
108			this.example = document.createElement( 'li' );
109			this.example.className = 'nl-ti-example';
110			this.example.innerHTML = this.elOriginal.getAttribute( 'data-subline' );
111			this.optionsList.appendChild( this.getinputWrapper );
112			this.optionsList.appendChild( this.example );
113			this.fld.appendChild( this.toggle );
114			this.fld.appendChild( this.optionsList );
115			this.elOriginal.parentNode.insertBefore( this.fld, this.elOriginal );
116			this.elOriginal.style.display = 'none';
117		},
118		_initEvents : function() {
119			var self = this;
120			this.toggle.addEventListener( 'click', function( ev ) { ev.preventDefault(); ev.stopPropagation(); self._open(); } );
121			this.toggle.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); ev.stopPropagation(); self._open(); } );
122
123			if( this.type === 'dropdown' ) {
124				var opts = Array.prototype.slice.call( this.optionsList.querySelectorAll( 'li' ) );

125				opts.forEach( function( el, i ) {
126					el.addEventListener( 'click', function( ev ) { ev.preventDefault(); self.close( el, opts.indexOf( el ) ); } );
127					el.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); self.close( el, opts.indexOf( el ) ); } );
128				} );
129			}
130			else if( this.type === 'input' ) {
131				this.getinput.addEventListener( 'keydown', function( ev ) {
132					if ( ev.keyCode == 13 ) {
133						self.close();
134					}
135				} );
136				this.inputsubmit.addEventListener( 'click', function( ev ) { ev.preventDefault(); self.close(); } );
137				this.inputsubmit.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); self.close(); } );
138			}
139
140		},
141		_open : function() {
142			if( this.open ) {
143				return false;
144			}
145			this.open = true;
146			this.form.fldOpen = this.pos;
147			var self = this;
148			this.fld.className += ' nl-field-open';
149		},
150		close : function( opt, idx ) {
151			if( !this.open ) {
152				return false;
153			}
154			this.open = false;
155			this.form.fldOpen = -1;
156			this.fld.className = this.fld.className.replace(/\b nl-field-open\b/,'');
157
158			if( this.type === 'dropdown' ) {
159				if( opt ) {
160					// remove class nl-dd-checked from previous option
161					var selectedopt = this.optionsList.children[ this.selectedIdx ];
162					selectedopt.className = '';
163					opt.className = 'nl-dd-checked';
164					this.toggle.innerHTML = opt.innerHTML;
165					// update selected index value
166					this.selectedIdx = idx;
167					// update original select element´s value
168					this.elOriginal.value = this.elOriginal.children[ this.selectedIdx ].value;
169				}
170			}
171			else if( this.type === 'input' ) {
172				this.getinput.blur();
173				this.toggle.innerHTML = this.getinput.value.trim() !== '' ? this.getinput.value : this.getinput.getAttribute( 'placeholder' );
174				this.elOriginal.value = this.getinput.value;
175			}
176		}
177	}
178
179	// add to global namespace
180	window.NLForm = NLForm;
181
182} )( window );