/**
* nlform.js v1.0.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2013, Codrops
* http://www.codrops.com
*/
;( function( window ) {
'use strict';
var document = window.document;
if (!String.prototype.trim) {
String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};
}
function NLForm( el ) {
this.el = el;
this.overlay = this.el.querySelector( '.nl-overlay' );
this.fields = [];
this.fldOpen = -1;
this._init();
}
NLForm.prototype = {
_init : function() {
var self = this;
Array.prototype.slice.call( this.el.querySelectorAll( 'select' ) ).forEach( function( el, i ) {
self.fldOpen++;
self.fields.push( new NLField( self, el, 'dropdown', self.fldOpen ) );
} );
Array.prototype.slice.call( this.el.querySelectorAll( 'input' ) ).forEach( function( el, i ) {
self.fldOpen++;
self.fields.push( new NLField( self, el, 'input', self.fldOpen ) );
} );
this.overlay.addEventListener( 'click', function(ev) { self._closeFlds(); } );
this.overlay.addEventListener( 'touchstart', function(ev) { self._closeFlds(); } );
},
_closeFlds : function() {
if( this.fldOpen !== -1 ) {
this.fields[ this.fldOpen ].close();
}
}
}
function NLField( form, el, type, idx ) {
this.form = form;
this.elOriginal = el;
this.pos = idx;
this.type = type;
this._create();
this._initEvents();
}
NLField.prototype = {
_create : function() {
if( this.type === 'dropdown' ) {
this._createDropDown();
}
else if( this.type === 'input' ) {
this._createInput();
}
},
_createDropDown : function() {
var self = this;
this.fld = document.createElement( 'div' );
this.fld.className = 'nl-field nl-dd';
this.toggle = document.createElement( 'a' );
this.toggle.innerHTML = this.elOriginal.options[ this.elOriginal.selectedIndex ].innerHTML;
this.toggle.className = 'nl-field-toggle';
this.optionsList = document.createElement( 'ul' );
var ihtml = '';
Array.prototype.slice.call( this.elOriginal.querySelectorAll( 'option' ) ).forEach( function( el, i ) {
ihtml += self.elOriginal.selectedIndex === i ? '
' + el.innerHTML + '' : '' + el.innerHTML + '';
// selected index value
if( self.elOriginal.selectedIndex === i ) {
self.selectedIdx = i;
}
} );
this.optionsList.innerHTML = ihtml;
this.fld.appendChild( this.toggle );
this.fld.appendChild( this.optionsList );
this.elOriginal.parentNode.insertBefore( this.fld, this.elOriginal );
this.elOriginal.style.display = 'none';
},
_createInput : function() {
var self = this;
this.fld = document.createElement( 'div' );
this.fld.className = 'nl-field nl-ti-text';
this.toggle = document.createElement( 'a' );
this.toggle.innerHTML = this.elOriginal.getAttribute( 'placeholder' );
this.toggle.className = 'nl-field-toggle';
this.optionsList = document.createElement( 'ul' );
this.getinput = document.createElement( 'input' );
this.getinput.setAttribute( 'type', 'text' );
this.getinput.setAttribute( 'placeholder', this.elOriginal.getAttribute( 'placeholder' ) );
this.getinputWrapper = document.createElement( 'li' );
this.getinputWrapper.className = 'nl-ti-input';
this.inputsubmit = document.createElement( 'button' );
this.inputsubmit.className = 'nl-field-go';
this.inputsubmit.innerHTML = 'Go';
this.getinputWrapper.appendChild( this.getinput );
this.getinputWrapper.appendChild( this.inputsubmit );
this.example = document.createElement( 'li' );
this.example.className = 'nl-ti-example';
this.example.innerHTML = this.elOriginal.getAttribute( 'data-subline' );
this.optionsList.appendChild( this.getinputWrapper );
this.optionsList.appendChild( this.example );
this.fld.appendChild( this.toggle );
this.fld.appendChild( this.optionsList );
this.elOriginal.parentNode.insertBefore( this.fld, this.elOriginal );
this.elOriginal.style.display = 'none';
},
_initEvents : function() {
var self = this;
this.toggle.addEventListener( 'click', function( ev ) { ev.preventDefault(); ev.stopPropagation(); self._open(); } );
this.toggle.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); ev.stopPropagation(); self._open(); } );
if( this.type === 'dropdown' ) {
var opts = Array.prototype.slice.call( this.optionsList.querySelectorAll( 'li' ) );
opts.forEach( function( el, i ) {
el.addEventListener( 'click', function( ev ) { ev.preventDefault(); self.close( el, opts.indexOf( el ) ); } );
el.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); self.close( el, opts.indexOf( el ) ); } );
} );
}
else if( this.type === 'input' ) {
this.getinput.addEventListener( 'keydown', function( ev ) {
if ( ev.keyCode == 13 ) {
self.close();
}
} );
this.inputsubmit.addEventListener( 'click', function( ev ) { ev.preventDefault(); self.close(); } );
this.inputsubmit.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); self.close(); } );
}
},
_open : function() {
if( this.open ) {
return false;
}
this.open = true;
this.form.fldOpen = this.pos;
var self = this;
this.fld.className += ' nl-field-open';
},
close : function( opt, idx ) {
if( !this.open ) {
return false;
}
this.open = false;
this.form.fldOpen = -1;
this.fld.className = this.fld.className.replace(/\b nl-field-open\b/,'');
if( this.type === 'dropdown' ) {
if( opt ) {
// remove class nl-dd-checked from previous option
var selectedopt = this.optionsList.children[ this.selectedIdx ];
selectedopt.className = '';
opt.className = 'nl-dd-checked';
this.toggle.innerHTML = opt.innerHTML;
// update selected index value
this.selectedIdx = idx;
// update original select element´s value
this.elOriginal.value = this.elOriginal.children[ this.selectedIdx ].value;
}
}
else if( this.type === 'input' ) {
this.getinput.blur();
this.toggle.innerHTML = this.getinput.value.trim() !== '' ? this.getinput.value : this.getinput.getAttribute( 'placeholder' );
this.elOriginal.value = this.getinput.value;
}
}
}
// add to global namespace
window.NLForm = NLForm;
} )( window );