add luxe template
This commit is contained in:
325
web/travel/luxe/js/selectFx.js
Normal file
325
web/travel/luxe/js/selectFx.js
Normal file
@@ -0,0 +1,325 @@
|
||||
/**
|
||||
* selectFx.js v1.0.0
|
||||
* http://www.codrops.com
|
||||
*
|
||||
* Licensed under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Copyright 2014, Codrops
|
||||
* http://www.codrops.com
|
||||
*/
|
||||
;( function( window ) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* based on from https://github.com/inuyaksa/jquery.nicescroll/blob/master/jquery.nicescroll.js
|
||||
*/
|
||||
function hasParent( e, p ) {
|
||||
if (!e) return false;
|
||||
var el = e.target||e.srcElement||e||false;
|
||||
while (el && el != p) {
|
||||
el = el.parentNode||false;
|
||||
}
|
||||
return (el!==false);
|
||||
};
|
||||
|
||||
/**
|
||||
* extend obj function
|
||||
*/
|
||||
function extend( a, b ) {
|
||||
for( var key in b ) {
|
||||
if( b.hasOwnProperty( key ) ) {
|
||||
a[key] = b[key];
|
||||
}
|
||||
}
|
||||
return a;
|
||||
}
|
||||
|
||||
/**
|
||||
* SelectFx function
|
||||
*/
|
||||
function SelectFx( el, options ) {
|
||||
this.el = el;
|
||||
this.options = extend( {}, this.options );
|
||||
extend( this.options, options );
|
||||
this._init();
|
||||
}
|
||||
|
||||
/**
|
||||
* SelectFx options
|
||||
*/
|
||||
SelectFx.prototype.options = {
|
||||
// if true all the links will open in a new tab.
|
||||
// if we want to be redirected when we click an option, we need to define a data-link attr on the option of the native select element
|
||||
newTab : true,
|
||||
// when opening the select element, the default placeholder (if any) is shown
|
||||
stickyPlaceholder : true,
|
||||
// callback when changing the value
|
||||
onChange : function( val ) { return false; }
|
||||
}
|
||||
|
||||
/**
|
||||
* init function
|
||||
* initialize and cache some vars
|
||||
*/
|
||||
SelectFx.prototype._init = function() {
|
||||
// check if we are using a placeholder for the native select box
|
||||
// we assume the placeholder is disabled and selected by default
|
||||
var selectedOpt = this.el.querySelector( 'option[selected]' );
|
||||
this.hasDefaultPlaceholder = selectedOpt && selectedOpt.disabled;
|
||||
|
||||
// get selected option (either the first option with attr selected or just the first option)
|
||||
this.selectedOpt = selectedOpt || this.el.querySelector( 'option' );
|
||||
|
||||
// create structure
|
||||
this._createSelectEl();
|
||||
|
||||
// all options
|
||||
this.selOpts = [].slice.call( this.selEl.querySelectorAll( 'li[data-option]' ) );
|
||||
|
||||
// total options
|
||||
this.selOptsCount = this.selOpts.length;
|
||||
|
||||
// current index
|
||||
this.current = this.selOpts.indexOf( this.selEl.querySelector( 'li.cs-selected' ) ) || -1;
|
||||
|
||||
// placeholder elem
|
||||
this.selPlaceholder = this.selEl.querySelector( 'span.cs-placeholder' );
|
||||
|
||||
// init events
|
||||
this._initEvents();
|
||||
}
|
||||
|
||||
/**
|
||||
* creates the structure for the select element
|
||||
*/
|
||||
SelectFx.prototype._createSelectEl = function() {
|
||||
var self = this, options = '', createOptionHTML = function(el) {
|
||||
var optclass = '', classes = '', link = '';
|
||||
|
||||
if( el.selectedOpt && !this.foundSelected && !this.hasDefaultPlaceholder ) {
|
||||
classes += 'cs-selected ';
|
||||
this.foundSelected = true;
|
||||
}
|
||||
// extra classes
|
||||
if( el.getAttribute( 'data-class' ) ) {
|
||||
classes += el.getAttribute( 'data-class' );
|
||||
}
|
||||
// link options
|
||||
if( el.getAttribute( 'data-link' ) ) {
|
||||
link = 'data-link=' + el.getAttribute( 'data-link' );
|
||||
}
|
||||
|
||||
if( classes !== '' ) {
|
||||
optclass = 'class="' + classes + '" ';
|
||||
}
|
||||
|
||||
return '<li ' + optclass + link + ' data-option data-value="' + el.value + '"><span>' + el.textContent + '</span></li>';
|
||||
};
|
||||
|
||||
[].slice.call( this.el.children ).forEach( function(el) {
|
||||
if( el.disabled ) { return; }
|
||||
|
||||
var tag = el.tagName.toLowerCase();
|
||||
|
||||
if( tag === 'option' ) {
|
||||
options += createOptionHTML(el);
|
||||
}
|
||||
else if( tag === 'optgroup' ) {
|
||||
options += '<li class="cs-optgroup"><span>' + el.label + '</span><ul>';
|
||||
[].slice.call( el.children ).forEach( function(opt) {
|
||||
options += createOptionHTML(opt);
|
||||
} );
|
||||
options += '</ul></li>';
|
||||
}
|
||||
} );
|
||||
|
||||
var opts_el = '<div class="cs-options"><ul>' + options + '</ul></div>';
|
||||
this.selEl = document.createElement( 'div' );
|
||||
this.selEl.className = this.el.className;
|
||||
this.selEl.tabIndex = this.el.tabIndex;
|
||||
this.selEl.innerHTML = '<span class="cs-placeholder">' + this.selectedOpt.textContent + '</span>' + opts_el;
|
||||
this.el.parentNode.appendChild( this.selEl );
|
||||
this.selEl.appendChild( this.el );
|
||||
}
|
||||
|
||||
/**
|
||||
* initialize the events
|
||||
*/
|
||||
SelectFx.prototype._initEvents = function() {
|
||||
var self = this;
|
||||
|
||||
// open/close select
|
||||
this.selPlaceholder.addEventListener( 'click', function() {
|
||||
self._toggleSelect();
|
||||
} );
|
||||
|
||||
// clicking the options
|
||||
this.selOpts.forEach( function(opt, idx) {
|
||||
opt.addEventListener( 'click', function() {
|
||||
self.current = idx;
|
||||
self._changeOption();
|
||||
// close select elem
|
||||
self._toggleSelect();
|
||||
} );
|
||||
} );
|
||||
|
||||
// close the select element if the target it´s not the select element or one of its descendants..
|
||||
document.addEventListener( 'click', function(ev) {
|
||||
var target = ev.target;
|
||||
if( self._isOpen() && target !== self.selEl && !hasParent( target, self.selEl ) ) {
|
||||
self._toggleSelect();
|
||||
}
|
||||
} );
|
||||
|
||||
// keyboard navigation events
|
||||
this.selEl.addEventListener( 'keydown', function( ev ) {
|
||||
var keyCode = ev.keyCode || ev.which;
|
||||
|
||||
switch (keyCode) {
|
||||
// up key
|
||||
case 38:
|
||||
ev.preventDefault();
|
||||
self._navigateOpts('prev');
|
||||
break;
|
||||
// down key
|
||||
case 40:
|
||||
ev.preventDefault();
|
||||
self._navigateOpts('next');
|
||||
break;
|
||||
// space key
|
||||
case 32:
|
||||
ev.preventDefault();
|
||||
if( self._isOpen() && typeof self.preSelCurrent != 'undefined' && self.preSelCurrent !== -1 ) {
|
||||
self._changeOption();
|
||||
}
|
||||
self._toggleSelect();
|
||||
break;
|
||||
// enter key
|
||||
case 13:
|
||||
ev.preventDefault();
|
||||
if( self._isOpen() && typeof self.preSelCurrent != 'undefined' && self.preSelCurrent !== -1 ) {
|
||||
self._changeOption();
|
||||
self._toggleSelect();
|
||||
}
|
||||
break;
|
||||
// esc key
|
||||
case 27:
|
||||
ev.preventDefault();
|
||||
if( self._isOpen() ) {
|
||||
self._toggleSelect();
|
||||
}
|
||||
break;
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
/**
|
||||
* navigate with up/dpwn keys
|
||||
*/
|
||||
SelectFx.prototype._navigateOpts = function(dir) {
|
||||
if( !this._isOpen() ) {
|
||||
this._toggleSelect();
|
||||
}
|
||||
|
||||
var tmpcurrent = typeof this.preSelCurrent != 'undefined' && this.preSelCurrent !== -1 ? this.preSelCurrent : this.current;
|
||||
|
||||
if( dir === 'prev' && tmpcurrent > 0 || dir === 'next' && tmpcurrent < this.selOptsCount - 1 ) {
|
||||
// save pre selected current - if we click on option, or press enter, or press space this is going to be the index of the current option
|
||||
this.preSelCurrent = dir === 'next' ? tmpcurrent + 1 : tmpcurrent - 1;
|
||||
// remove focus class if any..
|
||||
this._removeFocus();
|
||||
// add class focus - track which option we are navigating
|
||||
classie.add( this.selOpts[this.preSelCurrent], 'cs-focus' );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* open/close select
|
||||
* when opened show the default placeholder if any
|
||||
*/
|
||||
SelectFx.prototype._toggleSelect = function() {
|
||||
// remove focus class if any..
|
||||
this._removeFocus();
|
||||
|
||||
if( this._isOpen() ) {
|
||||
if( this.current !== -1 ) {
|
||||
// update placeholder text
|
||||
this.selPlaceholder.textContent = this.selOpts[ this.current ].textContent;
|
||||
}
|
||||
classie.remove( this.selEl, 'cs-active' );
|
||||
}
|
||||
else {
|
||||
if( this.hasDefaultPlaceholder && this.options.stickyPlaceholder ) {
|
||||
// everytime we open we wanna see the default placeholder text
|
||||
this.selPlaceholder.textContent = this.selectedOpt.textContent;
|
||||
}
|
||||
classie.add( this.selEl, 'cs-active' );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* change option - the new value is set
|
||||
*/
|
||||
SelectFx.prototype._changeOption = function() {
|
||||
// if pre selected current (if we navigate with the keyboard)...
|
||||
if( typeof this.preSelCurrent != 'undefined' && this.preSelCurrent !== -1 ) {
|
||||
this.current = this.preSelCurrent;
|
||||
this.preSelCurrent = -1;
|
||||
}
|
||||
|
||||
// current option
|
||||
var opt = this.selOpts[ this.current ];
|
||||
|
||||
// update current selected value
|
||||
this.selPlaceholder.textContent = opt.textContent;
|
||||
|
||||
// change native select element´s value
|
||||
this.el.value = opt.getAttribute( 'data-value' );
|
||||
|
||||
// remove class cs-selected from old selected option and add it to current selected option
|
||||
var oldOpt = this.selEl.querySelector( 'li.cs-selected' );
|
||||
if( oldOpt ) {
|
||||
classie.remove( oldOpt, 'cs-selected' );
|
||||
}
|
||||
classie.add( opt, 'cs-selected' );
|
||||
|
||||
// if there´s a link defined
|
||||
if( opt.getAttribute( 'data-link' ) ) {
|
||||
// open in new tab?
|
||||
if( this.options.newTab ) {
|
||||
window.open( opt.getAttribute( 'data-link' ), '_blank' );
|
||||
}
|
||||
else {
|
||||
window.location = opt.getAttribute( 'data-link' );
|
||||
}
|
||||
}
|
||||
|
||||
// callback
|
||||
this.options.onChange( this.el.value );
|
||||
}
|
||||
|
||||
/**
|
||||
* returns true if select element is opened
|
||||
*/
|
||||
SelectFx.prototype._isOpen = function(opt) {
|
||||
return classie.has( this.selEl, 'cs-active' );
|
||||
}
|
||||
|
||||
/**
|
||||
* removes the focus class from the option
|
||||
*/
|
||||
SelectFx.prototype._removeFocus = function(opt) {
|
||||
var focusEl = this.selEl.querySelector( 'li.cs-focus' )
|
||||
if( focusEl ) {
|
||||
classie.remove( focusEl, 'cs-focus' );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* add to global namespace
|
||||
*/
|
||||
window.SelectFx = SelectFx;
|
||||
|
||||
} )( window );
|
||||
Reference in New Issue
Block a user