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><dd>TEST</dd></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 data = require("../data.js");

	var cityMap = data.cities;
	var citydata = data.citydata.data;
	var popcity = data.citydata.popcity;
	var maxRecentCity = 8;
	var sessMgr = require("../account/sessionMgr.js");

	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;
		var searchKey;
		var tplRecentCity = doT.template("{{~it:c:i}}<dd data-code='{{=c.c}}'>{{!c.n}}</dd>{{~}}");
		var cp;
		var container = $("#city_selector");

		var initRecentCity = function () {
			cp = sessMgr.current;
			container.find("dd").remove();

			if (!cp || !cp.recentCity)
				return;
			var cities = _.filter(cp.recentCity.map(function (e) {
				return cityMap[e];
			}), function (e) { return e != null; });
			container.find("dl").html(tplRecentCity(cities));
		};
		initRecentCity();
		sessMgr.on("sessionChanged", initRecentCity);

		this.addCityToRecent = function (code) {
			if (!code || !cp)
				return;
			cp.recentCity = cp.recentCity || [];
			var idx = _.indexOf(cp.recentCity, code);
			if (idx != -1) {
				return;
			}
			container.find("dd[data-code='" + code + "']").remove();
			cp.recentCity.unshift(code);
			sessMgr.save();
			container.find("dl").prepend(tplRecentCity([cityMap[code]]));
		};

		that.findExtractCity = function (val) {
			if (!val)
				return null;

			if (cityMap[val])
				return cityMap[val];

			for (var c in cityMap) {
				var city = cityMap[c];

				if (city.p === val || city.c === val || city.n === val)
					return city;
			}

			return null;
		};

		that.getSelectedCity = function () {
			var ele = $(this);
			var val = ele.val();
			var city = null;

			//取得当前选择的城市。逻辑：如果有输入内容，则查找对应的城市是否存在，存在则直接返回；
			//否则如果当前输入不为空，则找已选择的，有则返回，没有则取列表第一个返回；
			//如果都无法返回，则返回null

			if (val) {
				city = that.findExtractCity(val);
			}
			if (city === null) {
				//查找已经选中的
				var e = dom.find("dd.selected[data-code]:visible, li.selected[data-code]:visible");
				if (e.length) {
					var code = e.attr("data-code");
					city = that.findExtractCity(code);
				}
			}
			if (city === null) {
				var nodes = that.currentShownCities;
				if (nodes.length) {
					city = that.findExtractCity(nodes.eq(0).attr("data-code"));
				}
			}

			return city;
		};

		that.performSearch = function () {
			target = $(this);

			var key = target.val().replace(/\s/g, "");
			if (key === searchKey) return;
			searchKey = key;

			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) {
			if (selector.isVisible)
				return;

			searchKey = null;
			that.switchTab(dom.find(".city-tab-nav li:first"));
			dom.find(".city-list-container li, dd[data-code]").removeClass("selected");

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

			target = ele;
		};
		that.hidePopup = function (force) {
			dom.removeClass("open");

			//验证
			var str = target.val();
			var city = that.findExtractCity(str);
			if (!city) {
				target.val("");
				target.attr("data-code", "");
			} else {
				target.val(city.n);
				target.attr("data-code", city.c);
			}
			target[0].dispatchEvent(new UIEvent("change"));


			if (force) {
				dom.css("top", "-2000px");
			}
		};
		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(citydata[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();
			}
			dom.find(".city-list-container ul, dd[data-code]").removeClass("selected");
			that.currentShownCities = null;
		};
		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.currentShownCities = null;
		};
		that.showNextPage = function () {
			that.renderPage(currentPage + 1);
		};
		that.showPrevPage = function () {
			that.renderPage(currentPage - 1);
		};
		that.selectNext = function (offset) {
			offset = offset || 1;

			//当前的列表
			var eles = dom.find("div.recent-city-list:visible dd[data-code], ul.city-list-container:visible li[data-code]");
			var current = eles.filter(".selected");
			var nextSelect = null;
			if (!current.length) {
				//尚没有选择
				if (offset > 0) {
					//向下移动，则默认选择第一个
					(nextSelect = eles.first()).addClass("selected");
				} else {
					(nextSelect = eles.last()).addClass("selected");
				}
			} else {
				var index = eles.index(current);
				index += offset;

				if (index < 0) {
					if (currentPage > 1) {
						that.showPrevPage();
						(nextSelect = dom.find("div.city-search ul.city-list-container li[data-code]:last")).addClass("selected");
					}
				} else if (index >= eles.length) {
					if (currentPage < totalPage) {
						that.showNextPage();
						(nextSelect = dom.find("div.city-search ul.city-list-container li[data-code]:first")).addClass("selected");
					}
				} else {
					current.removeClass("selected");
					nextSelect = eles.eq(index).addClass("selected");
				}
			}
			if (nextSelect) {
				that.selectToTarget(nextSelect.attr("data-code"));
			}
		};

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

		Object.defineProperty(this, "isVisible", {
			get: function () {
				return dom.is(":visible");
			}
		});

		//当前显示的城市节点
		var _currnetShownNodes;
		Object.defineProperty(this, "currentShownCities", {
			get: function () {
				return _currnetShownNodes || (_currnetShownNodes = dom.find("div.recent-city-list:visible dd[data-code], ul.city-list-container:visible li[data-code]"));
			},
			set: function (value) {
				_currnetShownNodes = value;
			}
		});
		dom.find(".city-tab-nav li").click(function () {
			var tab = $(this);
			if (tab.hasClass("selected"))
				return;

			selector.switchTab(tab);
		});
		that.selectToTarget = function (city, ele) {
			ele = ele || target;
			if (!ele)
				return;

			if (typeof (city) === "string")
				city = that.findExtractCity(city);
			if (!city)
				city = that.getSelectedCity.call(ele);
			if (!city)
				return;

			ele.data("data-code", city.c);
			ele.val(city.n);

			var ce = new UIEvent("change");
			ele[0].dispatchEvent(ce);
		};
		$(document).on("click", ".recent-city-list dd[data-code], .city-list-container li[data-code]", function () {
			//选定城市
			that.selectToTarget(this.dataset.code);
			that.hidePopup(true);
			if (target) {
				target[0].blur();
			}
		});
		$("#city_selector").mousedown(function (e) {
			e.stopPropagation();
			e.preventDefault();
		});

		return this;
	};

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

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

			_.each(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 (popcity.length % 4 !== 0) {
				for (var i = 0; i < 4 - 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);
		exports.cityui = selector;

		$(document).on("focus", eleSelector, function () {
			selector.showPopup($(this));
			setTimeout((function() { this.select(); }).bind(this), 1);
		}).on("blur", eleSelector, function () {
			selector.hidePopup();
		}).on("keydown", eleSelector, function (e) {
			var code = e.key || e.keyCode;

			if ((code >= 37 && code <= 40) || code === 13) {
				e.stopPropagation();
				e.preventDefault();

				switch (code) {
					case 37:
						//<
						selector.selectNext(-1);
						break;
					case 38:
						//^
						selector.selectNext(-4);
						break;
					case 39:
						//>
						selector.selectNext();
						break;
					case 40:
						//下
						selector.selectNext(4);
						break;
					case 13:
						//选定
						selector.selectToTarget();
						this.blur();
						break;
					default:
				}

				return false;
			}
		}).on("keyup", eleSelector, function (e) {
			var code = e.key || e.keyCode;

			if ((code >= 65 && code <= 90) || code === 8 || e.ctrlKey)
				selector.performSearch.call(this);
		});
	}
});