Light12306/Web12306/js/ui/widget_cityselector.js

define(function (require, exports) {
	var $html = '<div id="city_selector"><ul class="city-tab-nav"><li class="selected">常用</li><li data-code="A-E">A-E</li><li data-code="F-J">F-J</li><li data-code="K-O">K-O</li><li data-code="P-T">P-T</li><li data-code="U-Z">U-Z</li></ul><div class="recent-city-list"><p>最近查询</p><dl></dl></div><div class="city-pop"><p>常用城市</p><ul class="city-list-container"></ul></div><div class="city-search"><p>站点列表</p><ul class="city-list-container"></ul><div class="city-list-pager"><button class="city-prev" disabled="disabled">上一页</button><button class="city-next">下一页</button></div></div></div>';
	var selector;
	var divCity;
	var data = require("../station/station_data.js");

	var cityMap = _(_.flatten(_.map(_.values(data.data), function (e) { return _.values(e); }))).mapObject(function (e) { return e.c; });

	var CitySelector = function (options) {
		var that = this;
		var dom = $("#city_selector");
		var currentList = null;
		var currentPage = 1;
		var totalPage = 1;
		var pageSize = options.rows * 4;
		var target = null;
		var prevTab = null;

		$(document).keydown("#city_selector", function() {
			if (target)
				target[0].focus();
		});

		that.performSearch = function () {
			var key = target.val().replace(/\s/g, "");

			if (!key) {
				that.switchTab(prevTab);
				return;
			}
			//清空选择
			that.switchTab();

			dom.find(".city-search").show().find(">p").html("搜索“" + key + "”");
			//搜索城市
			key = key.toUpperCase();
			var lkey = key.toLowerCase();

			currentList = _.filter(_.values(cityMap), function(e) {
				return e.p.indexOf(lkey) != -1 ||
					e.n.indexOf(key) != -1 ||
					e.c.indexOf(key) != -1 ||
					e.h.indexOf(lkey) != -1;
			});
			currentPage = 0;
			totalPage = Math.ceil(currentList.length / pageSize);
			that.renderPage(1);
		};
		that.showPopup = function (ele) {
			that.switchTab(dom.find(".city-tab-nav li:first"));

			var offset = ele.offset();
			divCity.css({ left: offset.left + "px", top: (offset.top + ele.height()) + "px" });
			divCity.addClass("open");

			target = ele;
			target.bind("keyup", that.performSearch);
		};
		that.hidePopup = function () {
			if (target) {
				target.unbind("keyup", that.performSearch);
				//target = null;
			}
			divCity.removeClass("open");
		};
		that.switchTab = function (tab) {
			dom.find(".city-tab-nav li").removeClass("selected");
			dom.find(".city-search, .city-pop, .recent-city-list").hide();

			if (!tab)
				return;

			tab.addClass("selected");
			prevTab = tab;

			var code = tab.attr("data-code");
			currentPage = 0;
			if (code) {
				dom.find(".city-search>p").html("站点列表");
				currentList = _.values(data.data[code]);
				totalPage = Math.ceil(currentList.length / pageSize);
				that.renderPage(1);
				dom.find(".city-search").show();
			} else {
				currentList = null;
				dom.find(".city-pop, .recent-city-list").show();
			}
		};
		that.renderPage = function (page) {
			/// <summary>切换当前的分页</summary>

			if (page < 1 || page === currentPage || page > totalPage)
				return;

			currentPage = page;
			//绑定数据
			var html = [];
			var listCount = 0;
			for (var i = (currentPage - 1) * pageSize; i < currentPage * pageSize && i < currentList.length; i++) {
				var city = currentList[i];
				listCount++;
				html.push("<li data-code='" + city.c + "' data-py='" + city.p + "' data-name='" + city.n + "' data-fl='" + city.h + "'>" + city.n + "</li>");
			}
			if (listCount % 4 !== 0) {
				for (var i = 0; i < 4 - listCount % 4; i++) {
					html.push("<li></li>");
				}
			}

			dom.find(".city-search ul").empty().append(html.join(""));

			//上一页下一页可用性
			$("button.city-prev")[0].disabled = currentPage <= 1;
			$("button.city-next")[0].disabled = currentPage >= totalPage - 1;
		};
		that.showNextPage = function () {
			that.renderPage(currentPage + 1);
		};
		that.showPrevPage = function () {
			that.renderPage(currentPage - 1);
		};

		dom.find("button.city-prev").click(that.showPrevPage);
		dom.find("button.city-next").click(that.showNextPage);

		return this;
	};

	exports.init = function (eleSelector, args) {
		$("body").append($html);
		divCity = $("#city_selector");

		//初始化常用城市
		(function () {
			var html = [];

			_.each(data.popcity, function (c) {
				var city = cityMap[c];

				html.push("<li data-code='" + city.c + "' data-py='" + city.p + "' data-name='" + city.n + "' data-fl='" + city.h + "'>" + city.n + "</li>");
			});

			if (data.popcity.length % 4 !== 0) {
				for (var i = 0; i < 4 - data.popcity.length % 4; i++) {
					html.push("<li></li>");
				}
			}

			$("#city_selector .city-pop ul").append(html.join(""));
		})();

		args = $.extend({ rows: 9 }, args);
		selector = new CitySelector(args);

		$(document).on("focus", eleSelector, function () {
			selector.showPopup($(this));
		}).on("blur", eleSelector, function () {
			selector.hidePopup($(this));
		});

		divCity.find(".city-tab-nav li").click(function () {
			var tab = $(this);
			if (tab.hasClass("selected"))
				return;

			selector.switchTab(tab);
		});
	};
});