console-front/js/spa.js

$.define(["jQuery", "util", "doc", "win", "body"], "spa", function($, util, doc, win, body) {
	var head = doc.head || doc.getElementsByTagName("head")[0] || doc.documentElement,
		baseElement = head.getElementsByTagName("base")[0],
		ahref = { an: "href", av: "javascript:;" },
		spa_modal_index = 0,
		spa_css_ref = 0,
		resCache = {},
		cssCache = {},
		htmlCache = { "#": "#" },
		modelCache = {"_def_error_form":{}},
		scriptCache = {}, resUri, menuUri, menuEle,
		main, mainEle,
		cfg = {
			ajaxCfg: { mask: true },
			mask: true,
			loadEnabled: true
		},
		load_res = function() {
			if(resUri) {
				util.get(resUri, null, function(data) {
					/**
					 * res =[{id:"",uri:"",css:"",script:""},{id:"",uri:"",css:"",script:""},...........]
					 */
					if(data && data.length) {
						data.forEach(function(item) {
							resCache[item.id] = item;
						});
					}
					menuUri ? load_menu() : showMain();
				},false, cfg.ajaxCfg);
			}
		},
		load_menu = function() {
			util.get(menuUri, null, function(menu) {
				build_menu(menu);
				showMain();
			},false, cfg.ajaxCfg);
		},
		build_menu = function(menu) {
			if(menuEle && menuEle.length && menu && menu.length) {
				var ul = { tn: "ul", attrs: [{ an: "class", av: "nav nav-root" }], chs: [] };
				build_menu_item(ul.chs, menu);
				menuEle.empty();
				util.appendChild(menuEle[0], ul);
				menuEle.find(".nav-hand").on("click", function(e) {
					var $this = $(this);
					menuEle.find(".nav-hand.active").removeClass("active");
					$this.addClass("active");
					if($this.hasClass("spa-modal")) {
						showModal($this.attr("res"));
					} else {
						location.hash = "#" + $this.attr("res");
						showMain();
					}
				});
				menuEle.find(".nav-branch-hand").on("click", function(e) {
					var prt = $(this).parent();
					if(prt.hasClass("open")) {
						prt.removeClass("open");
					} else {
						prt.parent().children(".open").removeClass("open");
						prt.addClass("open");
					}
				});
			}
		},
		build_menu_item = function(po, items) {
			var item, res, caption, iconClass;
			items.forEach(function(item) {
				var li = { tn: "li" },
					attrs = li.attrs = [],
					chses = li.chs = [],
					lia = { tn: "a", attrs: [ahref], chs: [] };
				chses.push(lia);
				var ic = "icon-" + (item.icon || (item.res ? "book" : "branch"));
				lia.chs.push({ tn: "i", attrs: [{ an: "class", av: ic }] });
				lia.chs.push(item.caption);
				var lac = "";
				if(item.res) {
					lia.attrs.push({ an: "res", av: item.res });
					lac = lac + (item.modal ? " nav-hand spa-modal" : " nav-hand");
					lia.attrs.push({ an: "class", av: lac })
				} else {
					lia.chs.push({ tn: "i", attrs: [{ an: "class", av: "icon fold" }] });
					lac = lac + " nav-branch-hand";
					attrs.push({ an: "class", av: "nav-parent" });
					var ul = { tn: "ul", attrs: [{ an: "class", av: "nav" }], chs: [] };
					chses.push(ul);
					build_menu_item(ul.chs, item.children);
				}
				lia.attrs.push({ an: "class", av: lac });
				po.push(li);
			});
		},
		loadModelCss = function(model) {
			if(model.css) {
				var uri = model.css;
				if(cssCache[uri]) {
					cssCache[uri]['ref'] = cssCache[uri]['ref'] + 1;
				} else {
					++spa_css_ref;
					var css_id = "___spa_css_id_" + spa_css_ref;
					cssCache[uri] = { ref: 1, id: css_id };
					var link = doc.createElement('link');
					link.rel = 'stylesheet';
					link.href = model.css;
					link.media = 'all';
					link.setAttribute("id", css_id);
					head.appendChild(link);
				}
			}
		},
		showMainInternal = function(model) {
			cleanMain();
			main = model;
			loadModelCss(model);
			if(model.uri) {
				mainEle.html(htmlCache[model.uri]);
			}
			mainEle.attr("spa-model-id", model.id);
			if(model.factory && model.factory.main) {
				model.factory.main.call();
			}
		},
		showModalInternal = function(model, data) {
			loadModelCss(model);
			var ly = util.showModal(model.uri ? htmlCache[model.uri] : null);
			++spa_modal_index;
			ly.ctn.addClass("spa-modal").addClass("spa-modal-index-" + spa_modal_index).attr("spa-model-id", model.id);
			if(model.factory && model.factory.modal) {
				model.factory.modal(data);
			}
		},
		cacheModel = function(model) {
			var m = modelCache[model.id] = {};
			m.uri = model.uri;
			m.factory = model.factory;
			m.css = model.css;
			m.id = model.id;
			m.data = model.data;
			delete resCache[model.id];
			return m;
		},
		afterLoadByMain = function(model, data) {
			showMainInternal(cacheModel(model));
		},
		afterLoadByModal = function(model, data) {
			showModalInternal(cacheModel(model), data);
		},
		loadModel = function(model, handler, data) {
			if(htmlCache[model.uri || "#"]) {
				model.state = 11;
				if(model.script) {
					loadModelScript(model, handler, data);
				} else {
					handler(model, data);
				}
			} else {
				if(cfg.mask) {
					util.showLoading();
				}
				model.state = 10;
				$.ajax({ url: model.uri, dataType: "html", type: "GET" }).done(function(hc) {
					model.state = 11;
					htmlCache[model.uri] = hc;
					if(cfg.mask) {
						util.hideLoading();
					}
					if(model.script) {
						loadModelScript(model, handler, data);
					} else {
						handler(model, data);
					}
				}).fail(function(jqXHR, textStatus, errorThrown) {
					model.state = 12;
					if(cfg.mask) { util.hideLoading(); }
					util.raise({
						code: "loadModelHtml_" + (textStatus || ""),
						msg: textStatus,
						detailMsg: textStatus,
						xhr: jqXHR,
						eObj: errorThrown,
						url: model.uri
					});
				});
			}
		},
		removeModelCss = function(model) {
			if(model.css) {
				var cm = cssCache[model.css];
				if(cm) {
					cm.ref = cm.ref - 1;
					if(!cm.ref) {
						var link = doc.getElementById(cm.id);
						if(link) link.parentNode.removeChild(link);
						delete cssCache[model.css];
					}
				}
			}
		},
		loadModelScript = function(model, handler, data) {
			model.factory = scriptCache[model.script];
			if(model.factory) {
				model.state = 31;
				handler.call(model, data);
				return;
			}
			var node = doc.createElement("script");
			node.async = true;
			node.src = model.script;
			node.charset = "UTF-8";
			var supportOnload = "onload" in node;
			if(cfg.mask) {
				util.showLoading();
			}
			window.spa_define = function(factoryBuilder) {
				model.state = 30;
				if(cfg.mask) {
					util.showLoading();
				}
				try {
					scriptCache[model.script] = model.factory = factoryBuilder(spa);
					model.state = 31;
					if(cfg.mask) {
						util.hideLoading();
					}
				} catch(err) {
					model.state = 32;
					if(cfg.mask) {
						util.hideLoading();
					}
					util.raise({
						code: "buildModelFactory_" + err.toString(),
						msg: err.toString() || "",
						detailMsg: err.toString() || "",
						url: model.script
					});
				}
				handler(model, data);
			};

			if(supportOnload) {
				node.onload = function() {
					if(model.state < 21) model.state = 21;
					node.onerror = null;
					node.onload = null;
					head.removeChild(node);
					if(cfg.mask) {
						util.hideLoading();
					}
				};
				node.onerror = function() {
					node.onload = null;
					node.onerror = null;
					head.removeChild(node);
					if(cfg.mask) {
						util.hideLoading();
					}
					if(model.state < 22) {
						model.state = 22;
						util.raise({
							code: "loadModelScript_",
							msg:"",
							detailMsg: "",
							url: model.script
						});
					}
				};
			} else {
				node.onreadystatechange = function() {
					if(/loaded|complete/.test(node.readyState)) {
						node.onreadystatechange = null;
						if(model.state < 21) {
							model.state = 21;
							var to = model.timeout || 1000;
							setTimeout(function() {
								if(model.state == 21) {
									model.state = 22;
									head.removeChild(node);
									if(cfg.mask) {
										util.hideLoading();
									}
									util.raise({
										code: "loadModelScript_timeout",
										msg: "",
										detailMsg: "",
										url: model.script
									});
								}
							}, model.timeout || 1000);
						} else {
							head.removeChild(node);
							if(cfg.mask) {
								util.hideLoading();
							}
						}
					}
				};
			}
			model.state = 20;
			baseElement ?
				head.insertBefore(node, baseElement) :
				head.appendChild(node);
		},
		cleanMain = function() {
			if(main) {
				removeModelCss(main);
				if(main.factory && main.factory.mainDestory) { main.factory.mainDestory() };
				mainEle.empty();
				main = null;
			}
		},
		getModel = function(id) {
			return modelCache[id];
		},
		showModal = function(id, data) {
			var model = modelCache[id];
			if(model) {
				showModalInternal(model, data);
			} else {
				model = resCache[id];
				if(model) {
					loadModel(model, afterLoadByModal, data);
				} else {
					util.raise({ code: "invalid_model", msg: "不正确的模块[" + id + "]", detailMsg: "不正确的模块[" + id + "]" });
				}
			}
		},
		showMain = function() {
			var id = win.location.hash;
			if(id && id.length > 1) {
				id = id.substring(1);
			} else return;
			if(main && id == main.id) return;
			var model = modelCache[id];
			if(model) {
				showMainInternal(model);
			} else {
				var model = resCache[id];
				if(model) {
					loadModel(model, afterLoadByMain);
				} else {
					util.raise({ code: "invalid_model", msg: "不正确的模块[" + id + "]", detailMsg: "不正确的模块[" + id + "]" });
				}
			}
		},
		getLastModalIndex = function() {
			return spa_modal_index;
		},
		getLastModalCtn = function() {
			return $(".spa-modal-index-" + spa_modal_index);
		},
		getLastModalModel = function() {
			var ctn = $(".spa-modal-index-" + spa_modal_index);
			var id = modalCtn.attr("spa-model-id");
			return getModel(id);
		},
		closeModal = function() {
			var ctn = $(".spa-modal-index-" + spa_modal_index);
			var id = ctn.attr("spa-model-id");
			var inx = util.listModalIndex();
			if(ctn.hasClass("layer-" + inx)) {
				var model = modelCache[id];
				if(model) {
					if(model.factory.modalDestory) {
						model.factory.modalDestory.call(this);
					}
					if(model.css) {
						removeModelCss(model);
					}
					--spa_modal_index;
					util.closeModal();
				}
			} else {
				util.raise({ code: "invalid_dir", msg: "can't close modal:has top layer", detailMsg: "can't close modal:has top layer" });
			}
		},
		build = function(config) {
			$.extend(cfg, config);
			resUri = cfg.resUri || body.attr("resource");
			menuUri = cfg.menuUri || body.attr("menu");
			mainEle = cfg.mainEle || $(".spa-main");
			menuEle = cfg.menuEle || $(".spa-menu");
			resCache = cfg.resCache || resCache;
			htmlCache = cfg.htmlCache || htmlCache;
			htmlCache["#"] = "#";
			if(cfg.loadEnabled) load_res();
		},
	    spa = {
			build: build,
			closeModal: closeModal,
			getLastModalModel: getLastModalModel,
			getLastModalCtn: getLastModalCtn,
			getLastModalIndex: getLastModalIndex,
			showMain: showMain,
			showModal: showModal,
			mainChildren:function(selector){
				return mainEle.children(selector);
			},
			modalChildren:function(selector){
				return getLastModalCtn.children(selector);
			},
			findInMain:function(selector){
				return mainEle.find(selector);
			},
			findInModal:function(selector){
				return getLastModalCtn().find(selector);
			}
		};
		$.spa=spa;
	return spa;
});