-
Notifications
You must be signed in to change notification settings - Fork 1
/
selects-v1.3-min.js
11 lines (10 loc) · 11.5 KB
/
selects-v1.3-min.js
1
2
3
4
5
6
7
8
9
10
11
/*
*
* selects.js v1.3 (c) 2014
* Cross-Browser <select> Styling
*
* @author : Zach Winter ([email protected])
* @license : MIT (http://www.opensource.org/licenses/mit-license.php)
*
*/
;(function(e){"use strict";e.fn.selects=function(t){var n=this,r=[],i=false,s=false;var o={9:false,13:false,16:false,38:false,40:false};var u={overrideMobileBehavior:false,useCssTransitions:true,slideSpeed:300,dropdownHeight:150,proxy:{select:'[data-form-element="select"]',dropdown:'[data-form-element="select-dropdown"]',button:'[data-form-element="select-button"]',honeyPot:".hp"}};u.proxy=e.extend(u.proxy,t.proxy);var a=e.extend(u,t);if(a.useCssTransitions===true){if(typeof Modernizr!=="undefined"&&typeof Modernizr.csstransitions!=="undefined"){i=Modernizr.csstransitions}else{var f=document.createElement("div").style,l=[f.transition,f.WebkitTransition,f.MozTransition];for(var c=0;c<l.length;c++)if(l[c]!==undefined)i=true}}if(a.overrideMobileBehavior===false){var h=function(){return function(e,t){return/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(e)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(e.substr(0,4))}(navigator.userAgent||navigator.vendor||window.opera)};s=h()}if(!Object.create){Object.create=function(){function e(){}return function(t){if(arguments.length!==1)throw new Error("Object.create implementation only accepts one parameter.");e.prototype=t;return new e}}()}var p={form:null,proxy:null,select:null,options:null,dropdown:null,button:null,selected:null,namespace:null,createElement:function(){var t=this;t.proxy.append('<ul data-form-element="select-dropdown" />');t.proxy.prepend('<a data-form-element="select-button" />');t.form=t.proxy.find("select").attr("data-form");t.select=t.proxy.find("select");t.options=t.proxy.find("option");t.dropdown=t.proxy.find(a.proxy.dropdown);t.button=t.proxy.find(a.proxy.button);t.selected=t.proxy.find(":selected");t.namespace=".form"+t.form+"element"+e('[data-marker="form-element"]').index(t.select);t.select.attr("data-namespace",t.namespace);t.proxy.css("position","relative");t.select.css({display:"block",position:"absolute","z-index":"-1",top:"0px",right:"0px",bottom:"0px",left:"0px",width:"100%",height:"100%","-webkit-appearance":"none","-moz-appearance":"none",appearance:"none",opacity:"0","-ms-filter":"progid:DXImageTransform.Microsoft.Alpha(opacity=0)",filter:"alpha(opaicty = 0)","font-size":"20px"});t.button.css({display:"block",position:"relative","z-index":"1",cursor:"pointer"});t.dropdown.css({position:"absolute",top:"100%",right:"0%",bottom:"auto",left:"0%",margin:"0",padding:"0",height:"0px","list-style-type":"none",overflow:"hidden","-webkit-overflow-style":"auto","-ms-overflow-style":"auto","overflow-style":"auto","-webkit-overflow-scrolling":"touch","overflow-scrolling":"touch"});t.options.each(function(){var n={select:' data-select="option" ',option:' data-option="'+e(this).index()+'" ',selected:' data-selected="'+e(this).attr("selected")+'" ',disabled:' data-disabled="'+e(this).attr("disabled")+'" ',cursor:e(this).attr("disabled")?"default":"pointer",image:e(this).attr("data-image")?'<img src="'+e(this).attr("data-image")+'" alt="" />':"",span:e(this).attr("data-span")?e(this).attr("data-span"):null,html:e(this).html()};if(n.span!==null){n.html=n.html.replace(n.span,function(e){return'<span class="style">'+e+"</span>"})}if(n.image!==""){n.html=n.html.replace(n.html,function(e){return'<span class="text">'+e+"</span>"})}t.dropdown.append("<li><a "+n.select+n.option+n.selected+n.disabled+'style="display: block; cursor: '+n.cursor+';">'+n.image+n.html+"</a></li>")});if(t.selected.length){var n=t.dropdown.find("li:eq("+t.selected.index()+") a");t.button.html(n.html());n.addClass("focus")}else{t.button.html(t.dropdown.find("li:first-child a").html());t.options.eq(0).prop("selected",true).attr("selected","selected");t.dropdown.find("li:first-child a").addClass("focus")}if(a.useCssTransitions===true&&i===true){t.dropdown.css({"-webkit-transition":"height "+a.slideSpeed/1e3+"s ease","-moz-transition":"height "+a.slideSpeed/1e3+"s ease",transition:"height "+a.slideSpeed/1e3+"s ease"})}if(a.overrideMobileBehavior===false&&s===true){t.select.css("z-index","10").on("change"+t.namespace,function(){t.button.html(t.options.filter(":selected").text())})}t.select.on("change",function(){t.updateProxy(t.options.filter(":selected").index())})},toggleDropdown:function(){var t=this;var n=function(){e(document).one("click"+t.namespace,function(){o();t.proxy.removeClass("focus")})};var r=function(){if(!t.dropdown.attr("data-height")){var e=t.dropdown.clone();e.css({position:"fixed",top:"-500%",left:"-500%",display:"block",height:"auto","max-height":"none"});t.proxy.append(e);var n=e.height();e.remove();if(n>a.dropdownHeight){n=a.dropdownHeight;t.dropdown.css("overflow-y","scroll")}t.dropdown.attr("data-height",n);return n}else{return t.dropdown.attr("data-height")}};var s=function(){t.dropdown.addClass("vis");if(a.useCssTransitions===true&&i===true){t.dropdown.css({display:"block","z-index":"10",height:r})}else{r();t.dropdown.css({height:"auto",display:"none","z-index":"10","max-height":a.dropdownHeight}).slideDown(a.slideSpeed)}};var o=function(){t.dropdown.removeClass("vis");if(a.useCssTransitions===true&&i===true){t.dropdown.on("transitionend"+t.namespace+" webkitTransitionEnd"+t.namespace,function(){t.dropdown.off("transitionend"+t.namespace+" webkitTransitionEnd"+t.namespace);t.dropdown.css({"z-index":"auto",display:"none"})}).css("height","0")}else{t.dropdown.slideUp(a.slideSpeed,function(){t.dropdown.css("z-index","auto")})}};if(t.dropdown.hasClass("vis")){o()}else{s();setTimeout(n,a.slideSpeed)}},selectOption:function(e){var t=this;if(e.attr("data-selected")==="undefined"){var n=e.attr("data-option");t.options.prop("selected",false).removeAttr("selected");t.options.eq(n).prop("selected",true).attr("selected","selected");t.select.trigger("change")}},updateProxy:function(e){var t=this;var n=t.dropdown.find('[data-option="'+e+'"]');t.dropdown.find(".focus").removeClass("focus");n.addClass("focus");t.dropdown.find('[data-selected="selected"]').attr("data-selected","undefined");n.attr("data-selected","selected");t.button.html(n.html())},bind:function(){var t=this;t.button.on("click"+t.namespace,function(e){if(!t.select.attr("disabled")){if(a.overrideMobileBehavior===false&&s===true){e.preventDefault()}else{if(s===false)t.keyBind(t.proxy);t.toggleDropdown();t.proxy.addClass("focus")}}});t.dropdown.find("a").on("click"+t.namespace,function(){var n=e(this);if(n.attr("data-disabled")!=="true"){e(document).off("keydown"+t.namespace);t.selectOption(n)}})},KV:{focused:null,index:null,scroll:null},updateFocusedOption:function(e){var t=this;t.KV.focused=t.dropdown.find(".focus");t.KV.index=parseInt(t.KV.focused.attr("data-option"));t.KV.index=e==="next"?t.KV.index+1:t.KV.index-1;t.KV.focused.removeClass("focus");t.KV.focused=t.dropdown.find('[data-option="'+t.KV.index+'"]').addClass("focus");if(!t.dropdown.hasClass("vis")){t.selectOption(t.dropdown.find('[data-option="'+t.KV.index+'"]'));t.updateScrollTop(true)}else{t.updateScrollTop()}},updateScrollTop:function(e){var t=this;if(e===true){t.KV.scroll=t.KV.focused.position().top+t.dropdown.scrollTop()}else{if(t.KV.focused.position().top+t.KV.focused.outerHeight()>t.dropdown.height()){t.KV.scroll=t.dropdown.scrollTop()+t.KV.focused.position().top}else if(t.KV.focused.position().top+t.KV.focused.outerHeight()<t.KV.focused.outerHeight()){t.KV.scroll=t.dropdown.scrollTop()-t.dropdown.height()+(t.KV.focused.position().top+t.KV.focused.outerHeight())}}t.dropdown.scrollTop(t.KV.scroll)},keyBind:function(){var t=this;e(document).on("keydown"+t.namespace,function(n){if(o[9]===true&&o[16]===false){if(t.dropdown.hasClass("vis"))t.toggleDropdown();t.focusNewElement();e(document).off("keydown"+t.namespace);n.preventDefault()}if(o[9]===true&&o[16]===true){if(t.dropdown.hasClass("vis"))t.toggleDropdown();t.focusNewElement();e(document).off("keydown"+t.namespace);n.preventDefault()}if(o[13]){if(t.dropdown.hasClass("vis")){t.selectOption(t.dropdown.find(".focus"));t.focusNewElement();e(document).off("keydown"+t.namespace)}t.toggleDropdown();n.preventDefault()}if(o[38]){n.preventDefault();if(!t.dropdown.find("li:first-child a").hasClass("focus"))t.updateFocusedOption("prev")}if(o[40]){n.preventDefault();if(!t.dropdown.find("li:last-child a").hasClass("focus"))t.updateFocusedOption("next")}})},focusRouting:function(){var e=this;if(s===false||s===true&&a.overrideMobileBehavior===true){e.select.on("focus"+e.namespace,function(t){t.preventDefault();e.select.trigger("blur"+e.namespace);e.proxy.addClass("focus");if(o[9]===true||o[13]===true)e.toggleDropdown();e.keyBind()})}},focusNewElement:function(){var e=this,t=null;if(o[9]===true&&o[16]===true){t=-1}else{t=1}var n=r[e.form].indexing.index(e.select)+t,i=r[e.form].indexing.eq(n);e.proxy.removeClass("focus");i.trigger("focus"+e.namespace)},init:function(){var e=this;e.createElement();e.bind();e.focusRouting()}};e(document).on("keydown.selects",function(e){if(e.keyCode in o)o[e.keyCode]=true});e(document).on("keyup.selects",function(e){if(e.keyCode in o)o[e.keyCode]=false});e(window).on("resize.selects",function(){var t=e(a.proxy.dropdown.selector);if(t.attr("data-height"))t.removeAttr("data-height")});n.each(function(){var t=e(this);if(t.find("select").length){r.push({html:t,indexing:null,selects:[]});var n=r.length-1;r[n].html.find("input, textarea, select, button").not('[type="hidden"], [disabled], [type="disabled"]').attr({"data-marker":"form-element","data-form":n});if(typeof e(a.proxy.honeyPot)!=="undefined"&&e(a.proxy.honeyPot).find("input").length){a.proxy.honeyPot.find("input").removeAttr("data-marker")}r[n].indexing=r[n].html.find('[data-marker="form-element"]');r[n].html.find(a.proxy.select).each(function(t){r[n].selects[t]=Object.create(p);r[n].selects[t].proxy=e(this);r[n].selects[t].init()})}})}})(jQuery);