js城市選擇器組件

 

 

KISSY.add(function(S,Base,Template,Switchable,Data){
    var $ = S.all,
        Evt = S.Event,
        IO = S.io;
    //首字符排序
    var  wordsList;
    var NewCitySelector = function(id,cfg){
        this.init(id,cfg);
    };


    function findCityByCityId(cityId){
        return __findByProp(0,cityId);
    }

    function findCityByCityName(cityName){
        return __findByProp(1,cityName);
    }

    function __findByProp(index,val){
        for(var i in Data){
            for(var j in Data[i]){
                if(val == Data[i][j][index]){
                    return {
                        cityId:Data[i][j][0],
                        cityName:Data[i][j][1],
                        category:i
                    };
                }
            }
        }
    }

    /**
        判斷元素在元素內部
      **/
      function isIn(t,p){
        var $t = $(t),
            $p = $(p);

        if($t[0] && $p[0] && $t[0] === $p[0]){
            return true;
        }

        if($($t,$p)[0]){
            return true;
        }
      }

    var CLS_PREFIX = "ks-newcityselector-";
    var CONTAINER_TPL = "<div class='"+CLS_PREFIX+"container'>" + "</div>";
    var INNER_CONTAINER_TPL = "`wordsList``citiesList`";
    // var WORDS
    S.extend(NewCitySelector,Base,{
        init:function(id,cfg){
            var self = this;
            var defaultCfg = {
                autoOpen:false,
                cityId:330100,
                css:{
                    "position":"absolute",
                    "z-index":"9999"
                },
                target:$(id),
                tpl:INNER_CONTAINER_TPL,
                slideWidth:672
            };
            if(!id || !$(id)[0]){
                S.log("no container");
                return;
            }

            self.$el = $(id);

            self.cfg = S.mix(defaultCfg,cfg,undefined,undefined,true);

            self.render();
        },
        render:function(){
            var self = this;
            self.$pop = $(CONTAINER_TPL).insertAfter(self.$el);
            self.$pop.css(self.cfg.css);
            wordsList = [];
            var citiesListHTML  = "<div class="+CLS_PREFIX+"citycontainer"+"><div class='scroll'>";
            for(var i in Data){
                wordsList.push(i);
                var citiesHTML =  self.getListHTML(Data[i],'city');
                citiesListHTML += "<div class="+CLS_PREFIX+"tab-content"+" tab="+i+">" + citiesHTML +"</div>"
            }
            citiesListHTML += "</div></div>"
            var wordsListHTML = self.getListHTML(wordsList,'words');
            var tplData = {
                wordsList : wordsListHTML,
                citiesList : citiesListHTML
            };
            self.$pop = self.$pop.html(Template("<div class='"+CLS_PREFIX+"inner'>" + self.cfg.tpl + "</div>").render(tplData));

            self.$cityContainer = $("."+CLS_PREFIX+"citycontainer",self.$pop);

            self.$wordListContainer = $("."+CLS_PREFIX+"words",self.$pop);

            self.bindEvt();

            self.autoOpen && self.show();

            S.log(self)
        },
        bindEvt:function(){
            var self = this;

            var timeout;

            self.$el.on("click",function(){
                self.show();
            });

            $("li",$("." + CLS_PREFIX + "words",self.$pop)).on("click",function(e){
                e.preventDefault();
                var $li = $(e.currentTarget);
                var stype = $li.attr("stype");
                self.switchTo(stype);
            });
            //自動隱藏覆層
            self.$pop.on("mouseleave",function(e){
                e.stopPropagation();
                self.isOnPop = false;
                clearTimeout(timeout);
                timeout = setTimeout(function(){self.hide()},1000);
            });

            self.$pop.on("mousemove",function(e){
                e.stopPropagation();
                self.isOnPop = 1;
            });

            self.$el.on("mousemove",function(e){
                e.stopPropagation();
                self.isOnPop = 1;
            });

            $("li",$("." + CLS_PREFIX + "city",self.$pop)).on("click",function(e){
                e.preventDefault();
                var $a = $("a",$(e.currentTarget));
                self.onSelect({cityName:$a.text(),cityId:$a.attr("cityId")});
            });

            $("body").on("click",function(e){
                if(!isIn($(e.target),self.$pop) && !isIn($(e.target),self.$el)){
                    self.isOnPop = false;
                    self.hide();
                    self.fire("blur");
                }
            });
        },
        switchTo:function(stype,cb){
            var self = this,
                index,
                slideWidth = self.cfg.slideWidth;
            index = S.isNumber(stype) ? stype - 0 : self.indexOfArray(stype,wordsList);
            $(".scroll",self.$pop).animate({marginLeft:-index * slideWidth},0.5,"easeOut",cb)
            $("li",$("."+CLS_PREFIX+"words")).item(index-0).addClass("cur").siblings().removeClass("cur");
            self.set("category",stype);
        },
        /**
            TODO 設置city
        **/
        setCity:function(city){
            var self = this,
                cityObj;
            if(city){
                if(city > 0){
                    cityObj = findCityByCityId(city);
                }else{
                    cityObj = findCityByCityName(city);
                }
                if(cityObj){
                    self.switchTo(cityObj.category);
                    self.set("currentCity",cityObj);
                    self.set("cityId",cityObj.cityId);
                    self.set("cityName",cityObj.cityName);
                    self.set("category",cityObj.category);
                    // var index = self.indexOfArray(cityObj.category,wordsList);
                    // alert(index)
                    // $("li",self.$cityContainer).item(index)
                    $(self.cfg.target).html(cityObj.cityName);
                }

            }
        },
        indexOfArray:function(el,ary){
            for(var i in ary){
                if(el == ary[i]) return i || 0;
            }
        },
        show:function(){
            var self = this;

            self.$pop.fadeIn(0.3);

        },
        hide:function(){
            var self = this;

            !self.isOnPop && self.$pop.fadeOut(0.3);
        },
        getListHTML:function(ary,cls){
            if(!ary || !cls) return "";
            var html = "<ul class=" + CLS_PREFIX + cls + ">";
            for(var i in ary){
                if(S.isArray(ary[i])){
                    html += '<li><a href="#" cityId='+ary[i][0]+' title='+ary[i][1]+' >' + ary[i][1] + '</a></li>';
                }else{
                    if(ary[i] == "hot"){
                        html += '<li stype="hot"><a href="#">熱門</a></li>';
                    }else{
                        html += '<li stype='+ ary[i] +'><a href="#">' + ary[i] + '</a></li>';
                    }
                }
            }
            return html + '</ul>';
        },
        onSelect:function(e){
            var self = this;
            self.fire("select",e);
            self.isOnPop = false;
            self.hide();
        }
    });


    return NewCitySelector;

},{requires:['base','template','switchable','./data','./assets/index.css']});