@autofe/carpicker
Version:
A Carpicker library based on jQuery
6 lines • 7.61 kB
JavaScript
/*!
* @autofe/carpicker v0.2.0
* (c) 2018 Autohome Inc.
* Released under the MIT License.
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],e):(t.AutoFE=t.AutoFE||{},t.AutoFE.Carpicker=e(t.jQuery))}(this,function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var e="carpicker",i="fe.carpicker",s="."+i,n=t.fn[e],a={INIT:"init"+s,SHOW:"show"+s,SHOWN:"shown"+s,HIDE:"hide"+s,HIDDEN:"hidden"+s,CHANGE:"change"+s,CLICK:"click"+s,CLICK_DISMISS:"click.dismiss"+s,CLICK_DATA_API:"click"+s+".data-api"},r='[data-toggle="carpicker"]',o="[data-value]",l="data-text",d="data-value";function c(e,i){this.options=t.extend({},c.Default,i),this.$elem=t(e),this.$picker=t(this.options.selectPicker,this.$elem),this.$value=t(this.options.selectValue,this.$elem),this.$dropdown=t(this.options.selectDropdown,this.$elem),this.$brand=t(this.options.selectBrand,this.$elem),this.$series=t(this.options.selectSeries,this.$elem),this.$spec=t(this.options.selectSpec,this.$elem),this.$level=this.options.selectLevel,this.isActive=!1,this._data=null,this._brandData=null,this._init()}function p(e){return this.each(function(){var s=t(this),n=s.data(i),a=t.extend({},c.Default,s.data(),"object"==typeof e&&e);if(n||(n=new c(this,a),s.data(i,n)),"string"==typeof e){if("undefined"==typeof n[e])throw new TypeError('No method named "'+e+'"');n[e]()}})}return c.Default={selectPicker:"[data-select-picker]",selectValue:"[data-select-value]",selectDropdown:"[data-select-dropdown]",selectBrand:"[data-select-brand]",selectSeries:"[data-select-series]",selectSpec:"[data-select-spec]",selectedClass:"selected",disabledClass:"disabled",activeClass:"active",selectNav:!1,selectLevel:"brand",onInitPicker:null,onBrandPicker:null,onSeriesPicker:null,onSpecPicker:null},c.prototype._init=function(){var e=this;e.$elem.trigger(a.INIT,e),e.$picker.on(a.CLICK,t.proxy(e.toggle,e)),e.options.selectNav&&(0==e.$brand.prev("ul.pop-nav").length&&e.$brand.parent().prepend('<ul class="pop-nav"></ul>'),e.$dropdown.on(a.CLICK,"em",function(){switch(t(this).parent().index()){case 0:e.$brand.show(),e.$series.hide(),e.$spec.hide(),e.$brand.prev(".pop-nav").html("<li><em>品牌</em></li>");break;case 1:e.$brand.hide(),e.$series.show(),e.$spec.hide(),e.$brand.prev(".pop-nav").html("<li><em>品牌</em></li>\n <li><span>></span><em>车系</em></li>")}return!1})),e.$dropdown.on(a.CLICK,o,function(){var i=t(this),s=i.attr("data-target");"brand"===s&&"function"==typeof e.options.onBrandPicker&&e.options.onBrandPicker(i.attr(d),this),"series"===s&&"function"==typeof e.options.onSeriesPicker&&e.options.onSeriesPicker(i.attr(d),this),"spec"!==s||"function"!=typeof e.options.onSpecPicker||i.hasClass("disabled")||e.options.onSpecPicker(i.attr(d),this),"brand"===s&&"brand"==e.options.selectLevel&&(e.setValue({text:i.attr(l),value:i.attr(d)}),e.hide()),"series"!==s||"series"!=e.options.selectLevel&&("spec"!=e.options.selectLevel||e.options.selectNav)||(e.setValue({text:i.attr(l),value:i.attr(d)}),e.hide()),"spec"!==s||i.hasClass("disabled")||(e.setValue({text:i.attr(l),value:i.attr(d)}),e.hide())}),t(document).on(a.CLICK_DISMISS,function(i){0===t(i.target).closest(e.$elem).length&&e.isActive&&e.hide()}),"function"==typeof e.options.onInitPicker&&(e._brandData=e.options.onInitPicker(),e.setBrand())},c.prototype.setValue=function(t){var e=this.options.selectedClass;if((this.getValue()||{}).value!==t.value){var i=this.$dropdown.find(o),s=this.$dropdown.find('[data-value="'+String(t.value)+'"]');i.removeClass(e),s.addClass(e),this.$value.text(t.text),this._data={text:t.text,value:t.value},this.$elem.trigger(a.CHANGE,[t,s])}},c.prototype.getValue=function(){return this._data},c.prototype.toggle=function(){this.isActive?this.hide():this.show()},c.prototype.show=function(){var e=this.options.activeClass,i=this.options.disabledClass;if(!this.$elem.hasClass(i)){var s=t.Event(a.SHOW);this.$elem.trigger(s,this),s.isDefaultPrevented()||(this.isActive=!0,this.$elem.addClass(e),this.$dropdown.show(),this.$elem.trigger(a.SHOWN,this))}},c.prototype.hide=function(){var e=this.options.activeClass,i=t.Event(a.HIDE);this.$elem.trigger(i,this),i.isDefaultPrevented()||(this.isActive=!1,this.$elem.removeClass(e),this.$dropdown.hide(),this.$elem.trigger(a.HIDDEN,this))},c.prototype.disable=function(){var t=this.options.disabledClass;this.$elem.addClass(t)},c.prototype.enable=function(){var t=this.options.disabledClass;this.$elem.removeClass(t)},c.prototype.setBrand=function(){var e=this;e.options.selectNav&&e.$brand.prev(".pop-nav").html("<li><em>品牌</em></li>");var i=[];if(e._brandData.forEach(function(t){i.includes(t.letter)||i.push(t.letter)}),""===t.trim(e.$brand.html())){for(var s='<ol class="index">',n='<dl class="list">',a=0;a<i.length;a++)s+="<li data-target='jump-"+String(i[a])+"'>"+String(i[a])+"</li>",n+="<dt id='jump-"+String(i[a])+"'>"+String(i[a])+"</dt>",e._brandData.forEach(function(t){t.letter==i[a]&&(n+='<dd data-value="'+String(t.id)+'" \n data-text="'+String(t.name)+'" \n '+(t.pinyin?"data-pinyin="+String(t.pinyin):"")+'\n data-target="brand">'+String(t.name)+"</dd>")});s+="</ol>",n+="</dl>",e.$brand.html(s+n),e.setIndexLoca()}e.$brand.show()},c.prototype.setSeries=function(t,e){var i=this;if(t.length>0){i.options.selectNav&&(i.$brand.prev(".pop-nav").html("<li><em>品牌</em></li>\n <li><span>></span><em>车系</em></li>"),i.$brand.hide()),i.$series.show();var s='<dl class="list">';return t.forEach(function(t,i){e&&e.show&&0==i&&(e.link?s+='<dd><a class="all" href="'+String(e.url)+'" target="_blank">全部车系</a></dd>':s+='<dd data-value="'+String(t.brandId)+'" data-text="全部车系" data-target="series">全部车系</dd>'),s+="<dt>"+String(t.name)+"</dt>",t.list.forEach(function(t){s+='<dd data-value="'+String(t.id)+'" \n data-text="'+String(t.name)+'" \n '+(t.pinyin?"data-pinyin="+String(t.pinyin):"")+'\n data-target="series">'+String(t.name)+"</dd>"})}),s+="</dl>",void i.$series.html(s)}},c.prototype.setSpec=function(e,i){var s=this;s.options.selectNav&&(s.$brand.prev(".pop-nav").html("<li><em>品牌</em></li>\n <li><span>></span><em>车系</em></li>\n <li><span>></span><em>车型</em></li>"),s.$brand.hide(),s.$series.hide()),s.$spec.show();var n='<dl class="list">';e.length>0?(e.forEach(function(e){n+="<dt>"+String(e.name)+"</dt>",e.list.forEach(function(e){n+='<dd data-value="'+String(e.id)+'" \n data-text="'+String(e.name)+'"\n data-target="spec"\n '+(i&&t.isArray(i)&&i.includes(e.id.toString())?'class="disabled"':"")+">\n "+String(e.name)+"\n "+(e.price?"<span>"+(e.price>0?(e.price/1e4).toFixed(2)+"万":"暂无")+"</span>":"")+"\n </dd>"})}),n+="<dd></dd>"):n+="<dd>暂无相关车型</dd>",n+="</dl>",s.$spec.html(n)},c.prototype.setIndexLoca=function(){var e=this;e.$brand.on(a.CLICK,'li[data-target^="jump"]',function(){t(".list",e.$brand).scrollTop(0),t(this).addClass("active").siblings().removeClass("active");var i=t(this).attr("data-target"),s=t("dt#"+i,e.$brand).position("list").top;t(".list",e.$brand).scrollTop(s)})},c.prototype.destroy=function(){this.$elem.removeData(i),this.$picker.off(a.CLICK),this.$dropdown.off(a.CLICK,o),this.onInitPicker=null,this.onBrandPicker=null,this.onSeriesPicker=null,this.onSpecPicker=null,this._brandData=null,this.setValue({})},t(function(){p.call(t(r))}),t.fn[e]=p,t.fn[e].Constructor=c,t.fn[e].noConflict=function(){return t.fn[e]=n,p},c});