gongjijin/fund_h5/js/city_picker.js

(function($, win, doc) {
    var CityPicker = function(ele, cities) {
        this.ele = $(ele);
        this.cities = cities || [];
        this.hotCities = cities.hot || [];
        this.city = null;
        this.code = null;
        this.init();
    };

    var p = CityPicker.prototype;

    p.init = function() {
        this.renderHotCityList();
        this.renderCityList();
        this.initCityListEvent();
        this.renderCityNav();
        this.initCityNavEvent();
    };

    p.renderCityList = function() {
        var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split("");
        var cities = this.cities;
        var cityListStr = "";
        for (var letter of letters) {
            var val = cities[letter];
            if (val && val.length > 0) {
                var dt = "<dt id='" + letter + "'>" + letter + "</dt>";
                var dd = "";
                for (var city of val) {
                    dd += "<dd data-letter='" + letter + "'' data-code='" + city.regionCode + "'>" + city.region + "</dd>";
                }
                cityListStr += "<dl>" + dt + dd + "</dl>";
            }
        }
        $(".city-list").append(cityListStr);
    };

    p.renderHotCityList = function() {
        var hotCitiesStr = '';
        for (var city of this.hotCities) {
            hotCitiesStr += "<li data-code='" + city.regionCode + "'>" + city.region + "</li>"
        }
        $('.city-list-hot').html(hotCitiesStr);
    };

    p.initCityListEvent = function() {
        var that = this;
        $(".city-list-wrapper").on("click", function(e) {
            var target = e.target;
            if ($(target).is("dd") || $(target).is("li")) {
                that.city = $(target).text().trim();
                that.code = $(target).attr('data-code');
                var letter = $(target).data("letter");
                $('.current-city span').text(that.city);
                if (document.referrer.indexOf('&name=') === -1) {
                    window.location.href = './fund_h5_api.html?token=' + token + '&name=' + that.city + '&code=' + that.code;
                } else {
                    window.location.href = document.referrer.replace(/&name=[^&]+&code=[^&]+/, '&name=' + that.city + '&code=' + that.code);
                }
            }
        });
    };

    p.renderCityNav = function() {
        // var str = "热" + Object.keys(this.cities).toString().replace(/,/g, '');
        var str = '热ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        var arr = str.split("");
        var a = "<a href='#top' class='to-top'></a>";
        arr.forEach(function(item, i) {
            if (item === '热') {
                a += '<a href="#hot">' + item + '</a>';
            } else {
                a += '<a href="#' + item + '">' + item + '</a>';
            }
        });
        var div = '<div class="navbar">' + a + '</div>';
        $(".city-list-wrapper").append(div);
    };

    p.initCityNavEvent = function() {
        var that = this;
        var navBar = $(".navbar");
        var width = navBar.find("a").width();
        var height = navBar.find("a").height();
        navBar.on("touchstart", function(e) {
            $(this).addClass("active");
            that.createLetterPrompt($(e.target).html());
        });
        navBar.on("touchmove", function(e) {
            e.preventDefault();
            var touch = e.originalEvent.touches[0];
            var pos = { "x": touch.pageX, "y": touch.pageY };
            var x = pos.x,
                y = pos.y;
            $(this).find("a").each(function(i, item) {
                var offset = $(item).offset();
                var left = offset.left,
                    top = offset.top;
                if (x > left && x < (left + width) && y > top && y < (top + height)) {
                    that.changeLetter($(item).html());
                    var targetEle = $($(item).attr('href'));
                    if (targetEle.length > 0) {
                        targetEle[0].scrollIntoView();
                        window.scrollBy(0, -56);
                    }
                    return e.preventDefault();
                }
            });
        });

        navBar.on("touchend", function(e) {
            $(this).removeClass("active");
            $(".prompt").hide();
        });

        navBar.click(function(e) {
            var currentEle = $(e.target);
            that.changeLetter(currentEle.html());
            var targetEle = $(currentEle.attr('href'));
            if (targetEle.length > 0) {
                targetEle[0].scrollIntoView();
                window.scrollBy(0, -56);
            }
            return e.preventDefault();
        });
    };

    p.createLetterPrompt = function(letter) {
        var prompt = $(".prompt");
        if (prompt[0]) {
            prompt.show();
        } else {
            var span = "<span class='prompt'>" + letter + "</span>";
            $(".city-list").append(span);
        }
    };

    p.changeLetter = function(letter) {
        var prompt = $(".prompt");
        prompt.html(letter);
    };

    $.fn.CityPicker = function(cities) {
        return new CityPicker(this, cities);
    }
}(window.jQuery, window, document));