optimize the function to show popup

web/build/filter.js

@@ -27,7 +27,7 @@ function init(React){
 							React.createElement("input", {className: "uk-form-large", ref: "keywordInput", onChange: self.dealChange, type: "text", placeholder: "keywords or /^regExp$/", width: "300"})
 						)
 					), 
-					React.createElement("dl", {class: "uk-description-list-horizontal"}, 
+					React.createElement("dl", {className: "uk-description-list-horizontal"}, 
 					    React.createElement("dt", null, "wrap your RegExp between two slashes"), 
 					    React.createElement("dd", null, 
 						    "e.g. ", React.createElement("br", null), 

web/build/index.js

@@ -6,10 +6,13 @@ var EventManager    = require('../lib/event'),
 
 var WsIndicator = require("./wsIndicator").init(React),
 	RecordPanel = require("./recordPanel").init(React),
-	MapPanel    = require("./mapPanel").init(React),
+	Popup       = require("./popup").init(React);
-	Detail      = require("./detailPanel").init(React),
+
-	Popup       = require("./popup").init(React),
+var PopupContent = {
-	Filter      = require("./filter").init(React);
+	map    : require("./mapPanel").init(React),
+	detail : require("./detailPanel").init(React),
+	filter : require("./filter").init(React)
+};
 
 var ifPause     = false,
     recordSet   = [];
@@ -20,6 +23,13 @@ var ifPause     = false,
 //Event : wsEnd
 var eventCenter = new EventManager();
 
+//merge : right --> left
+function util_merge(left,right){
+    for(var key in right){
+        left[key] = right[key];
+    }
+    return left;
+}
 
 //invoke AnyProxy web socket util
 (function(){
@@ -70,27 +80,31 @@ var eventCenter = new EventManager();
 
 
 //init popup
-var pop;
+var showPop;
 (function(){
 	$("body").append('<div id="J_popOuter"></div>');
-	pop = React.render(
+	var pop = React.render(
 		React.createElement(Popup, null),
 		document.getElementById("J_popOuter")
 	);
-})();
 
+	showPop = function(tag,props,popArg){
+		var tagEl = PopupContent[tag];
+		if(!tagEl) throw new Error("element not found, please make sure your panel has been pluged");
+
+		var contentEl = React.createElement(tagEl, props);
+		var defaultPopPara = {
+			show    : true,
+			content : contentEl
+		};
+
+		pop.setState(util_merge(defaultPopPara,popArg));
+	}
+})();
 
 //init record panel
 var recorder;
 (function(){
-	//merge : right --> left
-	function util_merge(left,right){
-	    for(var key in right){
-	        left[key] = right[key];
-	    }
-	    return left;
-	}
-
 	function updateRecordSet(newRecord){
 		if(ifPause) return;
 
@@ -108,14 +122,6 @@ var recorder;
 		}
 	}
 
-	function showDetail(data){
-		pop.setState({
-			show: true,
-			content : React.createElement(Detail, {data: data}),
-			left:"35%"
-		});
-	}
-
 	eventCenter.addListener("wsGetUpdate",updateRecordSet);
 
 	eventCenter.addListener('recordSetUpdated',function(){
@@ -130,6 +136,10 @@ var recorder;
 		});
 	});
 
+	function showDetail(data){
+		showPop("detail", {data:data}, {left:"35%"});
+	}
+
 	//init recorder panel
 	recorder = React.render(
 		React.createElement(RecordPanel, {onSelect: showDetail}),
@@ -187,34 +197,15 @@ var recorder;
 			eventCenter.dispatchEvent("filterUpdated",key);
 		}
 
-		var filter = (React.createElement(Filter, {onChangeKeyword: updateKeyword}));
-		function showFilter(){
-			pop.setState({
-				show    : true,
-				content : filter,
-				left:"50%"
-			});
-		}
-
 		$(".J_showFilter").on("click",function(){
-			showFilter();
+			showPop("filter", {onChangeKeyword : updateKeyword}, { left : "50%"});
 		});
 	})();
 
 	//map local
 	(function(){
-		var mapPanel = (React.createElement(MapPanel, null));
-		function showMap(){
-			pop.setState({
-				show : true,
-				content : mapPanel,
-				left:"40%"
-
-			})
-		}
-
 		$(".J_showMapPanel").on("click",function(){
-			showMap();
+			showPop("map", {}, {left : "40%"});
 		});
 	})();
 

web/page.js

@@ -52,10 +52,13 @@
 
 	var WsIndicator = __webpack_require__(6).init(React),
 		RecordPanel = __webpack_require__(8).init(React),
-		MapPanel    = __webpack_require__(7).init(React),
+		Popup       = __webpack_require__(9).init(React);
-		Detail      = __webpack_require__(1).init(React),
+
-		Popup       = __webpack_require__(9).init(React),
+	var PopupContent = {
-		Filter      = __webpack_require__(10).init(React);
+		map    : __webpack_require__(7).init(React),
+		detail : __webpack_require__(1).init(React),
+		filter : __webpack_require__(10).init(React)
+	};
 
 	var ifPause     = false,
 	    recordSet   = [];
@@ -66,6 +69,13 @@
 	//Event : wsEnd
 	var eventCenter = new EventManager();
 
+	//merge : right --> left
+	function util_merge(left,right){
+	    for(var key in right){
+	        left[key] = right[key];
+	    }
+	    return left;
+	}
 
 	//invoke AnyProxy web socket util
 	(function(){
@@ -116,27 +126,31 @@
 
 
 	//init popup
-	var pop;
+	var showPop;
 	(function(){
 		$("body").append('<div id="J_popOuter"></div>');
-		pop = React.render(
+		var pop = React.render(
 			React.createElement(Popup, null),
 			document.getElementById("J_popOuter")
 		);
-	})();
 
+		showPop = function(tag,props,popArg){
+			var tagEl = PopupContent[tag];
+			if(!tagEl) throw new Error("element not found, please make sure your panel has been pluged");
+
+			var contentEl = React.createElement(tagEl, props);
+			var defaultPopPara = {
+				show    : true,
+				content : contentEl
+			};
+
+			pop.setState(util_merge(defaultPopPara,popArg));
+		}
+	})();
 
 	//init record panel
 	var recorder;
 	(function(){
-		//merge : right --> left
-		function util_merge(left,right){
-		    for(var key in right){
-		        left[key] = right[key];
-		    }
-		    return left;
-		}
-
 		function updateRecordSet(newRecord){
 			if(ifPause) return;
 
@@ -154,14 +168,6 @@
 			}
 		}
 
-		function showDetail(data){
-			pop.setState({
-				show: true,
-				content : React.createElement(Detail, {data: data}),
-				left:"35%"
-			});
-		}
-
 		eventCenter.addListener("wsGetUpdate",updateRecordSet);
 
 		eventCenter.addListener('recordSetUpdated',function(){
@@ -176,6 +182,10 @@
 			});
 		});
 
+		function showDetail(data){
+			showPop("detail", {data:data}, {left:"35%"});
+		}
+
 		//init recorder panel
 		recorder = React.render(
 			React.createElement(RecordPanel, {onSelect: showDetail}),
@@ -233,34 +243,15 @@
 				eventCenter.dispatchEvent("filterUpdated",key);
 			}
 
-			var filter = (React.createElement(Filter, {onChangeKeyword: updateKeyword}));
-			function showFilter(){
-				pop.setState({
-					show    : true,
-					content : filter,
-					left:"50%"
-				});
-			}
-
 			$(".J_showFilter").on("click",function(){
-				showFilter();
+				showPop("filter", {onChangeKeyword : updateKeyword}, { left : "50%"});
 			});
 		})();
 
 		//map local
 		(function(){
-			var mapPanel = (React.createElement(MapPanel, null));
-			function showMap(){
-				pop.setState({
-					show : true,
-					content : mapPanel,
-					left:"40%"
-
-				})
-			}
-
 			$(".J_showMapPanel").on("click",function(){
-				showMap();
+				showPop("map", {}, {left : "40%"});
 			});
 		})();
 
@@ -20409,7 +20400,7 @@
 								React.createElement("input", {className: "uk-form-large", ref: "keywordInput", onChange: self.dealChange, type: "text", placeholder: "keywords or /^regExp$/", width: "300"})
 							)
 						), 
-						React.createElement("dl", {class: "uk-description-list-horizontal"}, 
+						React.createElement("dl", {className: "uk-description-list-horizontal"}, 
 						    React.createElement("dt", null, "wrap your RegExp between two slashes"), 
 						    React.createElement("dd", null, 
 							    "e.g. ", React.createElement("br", null), 

web/src/filter.js

@@ -27,7 +27,7 @@ function init(React){
 							<input className="uk-form-large" ref="keywordInput" onChange={self.dealChange} type="text" placeholder="keywords or /^regExp$/" width="300"/>
 						</form>
 					</div>
-					<dl class="uk-description-list-horizontal">
+					<dl className="uk-description-list-horizontal">
 					    <dt>wrap your RegExp between two slashes</dt>
 					    <dd>
 						    e.g. <br />

web/src/index.js

@@ -6,10 +6,13 @@ var EventManager    = require('../lib/event'),
 
 var WsIndicator = require("./wsIndicator").init(React),
 	RecordPanel = require("./recordPanel").init(React),
-	MapPanel    = require("./mapPanel").init(React),
+	Popup       = require("./popup").init(React);
-	Detail      = require("./detailPanel").init(React),
+
-	Popup       = require("./popup").init(React),
+var PopupContent = {
-	Filter      = require("./filter").init(React);
+	map    : require("./mapPanel").init(React),
+	detail : require("./detailPanel").init(React),
+	filter : require("./filter").init(React)
+};
 
 var ifPause     = false,
     recordSet   = [];
@@ -20,6 +23,13 @@ var ifPause     = false,
 //Event : wsEnd
 var eventCenter = new EventManager();
 
+//merge : right --> left
+function util_merge(left,right){
+    for(var key in right){
+        left[key] = right[key];
+    }
+    return left;
+}
 
 //invoke AnyProxy web socket util
 (function(){
@@ -70,27 +80,31 @@ var eventCenter = new EventManager();
 
 
 //init popup
-var pop;
+var showPop;
 (function(){
 	$("body").append('<div id="J_popOuter"></div>');
-	pop = React.render(
+	var pop = React.render(
 		<Popup />,
 		document.getElementById("J_popOuter")
 	);
-})();
 
+	showPop = function(tag,props,popArg){
+		var tagEl = PopupContent[tag];
+		if(!tagEl) throw new Error("element not found, please make sure your panel has been pluged");
+
+		var contentEl = React.createElement(tagEl, props);
+		var defaultPopPara = {
+			show    : true,
+			content : contentEl
+		};
+
+		pop.setState(util_merge(defaultPopPara,popArg));
+	}
+})();
 
 //init record panel
 var recorder;
 (function(){
-	//merge : right --> left
-	function util_merge(left,right){
-	    for(var key in right){
-	        left[key] = right[key];
-	    }
-	    return left;
-	}
-
 	function updateRecordSet(newRecord){
 		if(ifPause) return;
 
@@ -108,14 +122,6 @@ var recorder;
 		}
 	}
 
-	function showDetail(data){
-		pop.setState({
-			show: true,
-			content : <Detail data={data}/>,
-			left:"35%"
-		});
-	}
-
 	eventCenter.addListener("wsGetUpdate",updateRecordSet);
 
 	eventCenter.addListener('recordSetUpdated',function(){
@@ -130,6 +136,10 @@ var recorder;
 		});
 	});
 
+	function showDetail(data){
+		showPop("detail", {data:data}, {left:"35%"});
+	}
+
 	//init recorder panel
 	recorder = React.render(
 		<RecordPanel onSelect={showDetail}/>,
@@ -187,34 +197,15 @@ var recorder;
 			eventCenter.dispatchEvent("filterUpdated",key);
 		}
 
-		var filter = (<Filter onChangeKeyword={updateKeyword} />);
-		function showFilter(){
-			pop.setState({
-				show    : true,
-				content : filter,
-				left:"50%"
-			});
-		}
-
 		$(".J_showFilter").on("click",function(){
-			showFilter();
+			showPop("filter", {onChangeKeyword : updateKeyword}, { left : "50%"});
 		});
 	})();
 
 	//map local
 	(function(){
-		var mapPanel = (<MapPanel />);
-		function showMap(){
-			pop.setState({
-				show : true,
-				content : mapPanel,
-				left:"40%"
-
-			})
-		}
-
 		$(".J_showMapPanel").on("click",function(){
-			showMap();
+			showPop("map", {}, {left : "40%"});
 		});
 	})();