From 95531a35588f5211a041c1ea00779384b086a6b7 Mon Sep 17 00:00:00 2001
From: OttoMao <ottomao@gmail.com>
Date: Sat, 11 Jul 2015 20:19:41 +0800
Subject: [PATCH] optimize the function to show popup
---
web/build/filter.js | 2 +-
web/build/index.js | 79 ++++++++++++++++++++-----------------------
web/page.js | 81 ++++++++++++++++++++-------------------------
web/src/filter.js | 2 +-
web/src/index.js | 79 ++++++++++++++++++++-----------------------
5 files changed, 108 insertions(+), 135 deletions(-)
diff --git a/web/build/filter.js b/web/build/filter.js
index f4183f7..54eeef1 100644
--- a/web/build/filter.js
+++ b/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),
diff --git a/web/build/index.js b/web/build/index.js
index fe8ab2f..744772a 100644
--- a/web/build/index.js
+++ b/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),
- Detail = require("./detailPanel").init(React),
- Popup = require("./popup").init(React),
- Filter = require("./filter").init(React);
+ Popup = require("./popup").init(React);
+
+var PopupContent = {
+ 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%"});
});
})();
diff --git a/web/page.js b/web/page.js
index 34b9a41..82ad8d8 100644
--- a/web/page.js
+++ b/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),
- Detail = __webpack_require__(1).init(React),
- Popup = __webpack_require__(9).init(React),
- Filter = __webpack_require__(10).init(React);
+ Popup = __webpack_require__(9).init(React);
+
+ var PopupContent = {
+ 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),
diff --git a/web/src/filter.js b/web/src/filter.js
index 4930d8b..140bdc1 100644
--- a/web/src/filter.js
+++ b/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 />
diff --git a/web/src/index.js b/web/src/index.js
index 7c88d12..cbdbb2f 100644
--- a/web/src/index.js
+++ b/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),
- Detail = require("./detailPanel").init(React),
- Popup = require("./popup").init(React),
- Filter = require("./filter").init(React);
+ Popup = require("./popup").init(React);
+
+var PopupContent = {
+ 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%"});
});
})();