allow user to config custom menu

lib/rule_default.js

@@ -113,6 +113,16 @@ module.exports = {
         });
 
         cb();
+    },
+
+    _getCustomMenu : function(){
+        return [
+            // {
+            //     name:"test",
+            //     icon:"uk-icon-lemon-o",
+            //     url :"http://anyproxy.io"
+            // }
+        ];
     }
 
 };

lib/webInterface.js

@@ -8,6 +8,7 @@ var express         = require("express"),
     util            = require("./util"),
     certMgr         = require("./certMgr"),
     logUtil         = require("./log"),
+    juicer          = require("juicer"),
     compress        = require('compression');
 
 
@@ -16,10 +17,12 @@ function webInterface(config){
         wsPort        = config.wsPort,
         ipAddress     = config.ip,
         userRule      = config.userRule,
-        ruleSummary   = "";
+        ruleSummary   = "",
+        customMenu    = [];
 
     try{
         ruleSummary = userRule.summary();
+        customMenu  = userRule._getCustomMenu();
     }catch(e){}
 
     var self         = this,
@@ -88,15 +91,16 @@ function webInterface(config){
         
     app.use(function(req,res,next){
         var indexTpl  = fs.readFileSync(path.join(staticDir,"/index.html"),{encoding:"utf8"}),
-            indexHTML = util.simpleRender(indexTpl, {
+            opt       = {
                 rule        : ruleSummary || "",
+                customMenu  : customMenu || [],
                 wsPort      : wsPort,
                 ipAddress   : ipAddress || "127.0.0.1"
-            });
+            };
 
         if(req.url == "/"){
             res.setHeader("Content-Type", "text/html");
-            res.end(indexHTML);
+            res.end(juicer(indexTpl, opt));
         }else{
             next();
         }

web/build/filter.js

@@ -21,18 +21,13 @@ function init(React){
 			return (
 				React.createElement("div", null, 
 					React.createElement("h4", {className: "subTitle"}, "Log Filter"), 
-
 					React.createElement("div", {className: "filterSection"}, 
 						React.createElement("form", {className: "uk-form"}, 
 							React.createElement("input", {className: "uk-form-large", ref: "keywordInput", onChange: self.dealChange, type: "text", placeholder: "keywords or /^regExp$/", width: "300"})
 						)
 					), 
-					React.createElement("dl", {className: "uk-description-list-horizontal"}, 
+				    React.createElement("p", null, 
-					    React.createElement("dt", null, "wrap your RegExp between two slashes"), 
+					    React.createElement("i", {className: "uk-icon-gift"}), "  type ", React.createElement("strong", null, "/id=\\d", 3, "/"), " will give you all the logs containing ", React.createElement("strong", null, "id=123")
-					    React.createElement("dd", null, 
-						    "e.g. ", React.createElement("br", null), 
-						    "type ", React.createElement("strong", null, "/id=\\d", 3, "/"), " will give you all the logs containing ", React.createElement("strong", null, "id=123")
-					    )
 				    )
 				)
 			);

web/build/index.js

@@ -88,18 +88,10 @@ var showPop;
 		document.getElementById("J_popOuter")
 	);
 
-	showPop = function(tag,props,popArg){
+	showPop = function(popArg){
-		var tagEl = PopupContent[tag];
+		var stateArg = util_merge({show : true },popArg);
-		if(!tagEl) throw new Error("element not found, please make sure your panel has been pluged");
+		pop.setState(stateArg);
-
-		var contentEl = React.createElement(tagEl, props);
-		var defaultPopPara = {
-			show    : true,
-			content : contentEl
 	};
-
-		pop.setState(util_merge(defaultPopPara,popArg));
-	}
 })();
 
 //init record panel
@@ -137,7 +129,7 @@ var recorder;
 	});
 
 	function showDetail(data){
-		showPop("detail", {data:data}, {left:"35%"});
+		showPop({left:"35%",content:React.createElement(PopupContent["detail"], {data:data})});
 	}
 
 	//init recorder panel
@@ -198,14 +190,29 @@ var recorder;
 		}
 
 		$(".J_showFilter").on("click",function(){
-			showPop("filter", {onChangeKeyword : updateKeyword}, { left : "50%"});
+			showPop({ left:"50%", content:React.createElement(PopupContent["filter"], {onChangeKeyword : updateKeyword})});
 		});
 	})();
 
 	//map local
 	(function(){
 		$(".J_showMapPanel").on("click",function(){
-			showPop("map", {}, {left : "40%"});
+			showPop({left:"40%", content:React.createElement(PopupContent["map"],null)});
+		});
+	})();
+
+	//other button
+	(function(){
+		$(".J_customButton").on("click",function(){
+			var thisEl = $(this),
+				iframeUrl = thisEl.attr("iframeUrl");
+
+			if(!iframeUrl){
+				throw new Error("cannot find the url assigned for this button");
+			}
+
+			var iframeEl = React.createElement("iframe",{src:iframeUrl,frameBorder:0});
+			showPop({left:"35%", content: iframeEl });
 		});
 	})();
 

web/css/page.css

@@ -205,7 +205,7 @@ body, html {
 	border-left: 1px solid #CCC;
 	top: 0;
 	padding: 10px 20px 10px 10px;
-	overflow-y:scroll;
+	overflow-y:auto;
 	box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	-webkit-box-sizing: border-box;
@@ -225,6 +225,12 @@ body, html {
 	word-wrap: break-word;
 }
 
+.recordDetailOverlay iframe{
+	position: relative;
+	height: 92vh;
+	width: 100%; 
+}
+
 .data_id{
 	color: #777;
 }

web/index.html

@@ -2,6 +2,7 @@
 <html>
 <head>
     <title>AnyProxy</title>
+    <meta charset="UTF-8" />
     <link rel="stylesheet" href="/css/uikit.gradient.min.css" />
     <link rel="stylesheet" href="/css/page.css" />
 	<link rel="stylesheet" type="text/css" href="/css/jstree_style/style.min.css">
@@ -35,7 +36,15 @@
 
 				<span class="sep">|</span>
 			</span>
-			<span><i class="uk-icon-chain"></i>Rule : {{rule}}</span>
+
+			{@if customMenu.length}
+				{@each customMenu as item}
+					<a href="#"><span class="topBtn J_customButton" iframeUrl="${item.url}"><i class="${item.icon}"></i>${item.name}</span></a>
+				{@/each}
+				<span class="sep">|</span>
+			{@/if}
+
+			<span><i class="uk-icon-chain"></i>Rule : ${rule}</span>
 		</div>
 
 		<div style="clear:both"></div>
@@ -43,8 +52,8 @@
 
 	<div class="mainTableWrapper" id="J_content"></div>
 
-	<input type="hidden" id="socketPort" value="{{wsPort}}" />
+	<input type="hidden" id="socketPort" value="${wsPort}" />
-	<input type="hidden" id="baseUrl" value="{{ipAddress}}" />
+	<input type="hidden" id="baseUrl" value="${ipAddress}" />
 
     <script src="./page.js"></script>
 </body>

web/page.js

@@ -52,11 +52,11 @@
 
 	var WsIndicator = __webpack_require__(6).init(React),
 		RecordPanel = __webpack_require__(8).init(React),
-		Popup       = __webpack_require__(9).init(React);
+		Popup       = __webpack_require__(7).init(React);
 
 	var PopupContent = {
-		map    : __webpack_require__(7).init(React),
+		map    : __webpack_require__(1).init(React),
-		detail : __webpack_require__(1).init(React),
+		detail : __webpack_require__(9).init(React),
 		filter : __webpack_require__(10).init(React)
 	};
 
@@ -134,18 +134,10 @@
 			document.getElementById("J_popOuter")
 		);
 
-		showPop = function(tag,props,popArg){
+		showPop = function(popArg){
-			var tagEl = PopupContent[tag];
+			var stateArg = util_merge({show : true },popArg);
-			if(!tagEl) throw new Error("element not found, please make sure your panel has been pluged");
+			pop.setState(stateArg);
-
-			var contentEl = React.createElement(tagEl, props);
-			var defaultPopPara = {
-				show    : true,
-				content : contentEl
 		};
-
-			pop.setState(util_merge(defaultPopPara,popArg));
-		}
 	})();
 
 	//init record panel
@@ -183,7 +175,7 @@
 		});
 
 		function showDetail(data){
-			showPop("detail", {data:data}, {left:"35%"});
+			showPop({left:"35%",content:React.createElement(PopupContent["detail"], {data:data})});
 		}
 
 		//init recorder panel
@@ -244,14 +236,29 @@
 			}
 
 			$(".J_showFilter").on("click",function(){
-				showPop("filter", {onChangeKeyword : updateKeyword}, { left : "50%"});
+				showPop({ left:"50%", content:React.createElement(PopupContent["filter"], {onChangeKeyword : updateKeyword})});
 			});
 		})();
 
 		//map local
 		(function(){
 			$(".J_showMapPanel").on("click",function(){
-				showPop("map", {}, {left : "40%"});
+				showPop({left:"40%", content:React.createElement(PopupContent["map"],null)});
+			});
+		})();
+
+		//other button
+		(function(){
+			$(".J_customButton").on("click",function(){
+				var thisEl = $(this),
+					iframeUrl = thisEl.attr("iframeUrl");
+
+				if(!iframeUrl){
+					throw new Error("cannot find the url assigned for this button");
+				}
+
+				var iframeEl = React.createElement("iframe",{src:iframeUrl,frameBorder:0});
+				showPop({left:"35%", content: iframeEl });
 			});
 		})();
 
@@ -261,107 +268,35 @@
 /* 1 */
 /***/ function(module, exports, __webpack_require__) {
 
+	__webpack_require__(12);
+
 	function init(React){
+		var MapForm = __webpack_require__(13).init(React),
+			MapList = __webpack_require__(14).init(React);
 
-		var DetailPanel = React.createClass({displayName: "DetailPanel",
+		var MapPanel = React.createClass({displayName: "MapPanel",
-			getInitialState : function(){
+			appendRecord : function(data){
-				return {
-					body : {id : -1, content : null},
-					left : "35%"
-				};
-			},
-			loadBody:function(){
 				var self          = this,
-				    id   = self.props.data.id;
+					listComponent = self.refs.list;
-				if(!id) return;
 				
-				ws.reqBody(id,function(content){
+				listComponent.appendRecord(data);
-					if(content.id == self.props.data.id){
-						self.setState({
-							body : content
-						});
-					}
-				});
 			},
-			render : function(){
-				var reqHeaderSection = [],
-					resHeaderSection = [],
-					summarySection,
-					detailSection,
-					bodyContent;
-
-				if(this.props.data.reqHeader){
-					for(var key in this.props.data.reqHeader){
-						reqHeaderSection.push(React.createElement("li", {key: "reqHeader_" + key}, React.createElement("strong", null, key), " : ", this.props.data.reqHeader[key]))
-					}
-				}
-
-				summarySection = (
-					React.createElement("div", null, 
-						React.createElement("section", {className: "req"}, 
-							React.createElement("h4", {className: "subTitle"}, "request"), 
-							React.createElement("div", {className: "detail"}, 
-								React.createElement("ul", {className: "uk-list"}, 
-								    React.createElement("li", null, this.props.data.method, " ", React.createElement("span", {title: "{this.props.data.path}"}, this.props.data.path), " HTTP/1.1"), 
-								    reqHeaderSection
-								)
-							)
-						), 
-						
-						React.createElement("section", {className: "reqBody"}, 
-							React.createElement("h4", {className: "subTitle"}, "request body"), 
-							React.createElement("div", {className: "detail"}, 
-								React.createElement("p", null, this.props.data.reqBody)
-							)
-						)
-					)
-				);
-
-				if(this.props.data.statusCode){
-
-					if(this.state.body.id == this.props.data.id){
-						bodyContent = (React.createElement("pre", {className: "resBodyContent"}, this.state.body.body));
-					}else{
-						bodyContent = null;
-						this.loadBody();
-					}
-
-					if(this.props.data.resHeader){
-						for(var key in this.props.data.resHeader){
-							resHeaderSection.push(React.createElement("li", {key: "resHeader_" + key}, React.createElement("strong", null, key), " : ", this.props.data.resHeader[key]))
-						}
-					}
-
-					detailSection = (
-						React.createElement("div", null, 
-							React.createElement("section", {className: "resHeader"}, 
-								React.createElement("h4", {className: "subTitle"}, "response header"), 
-								React.createElement("div", {className: "detail"}, 
-									React.createElement("ul", {className: "uk-list"}, 
-									    React.createElement("li", null, "HTTP/1.1 ", React.createElement("span", {className: "http_status http_status_" + this.props.data.statusCode}, this.props.data.statusCode)), 
-									    resHeaderSection
-									)
-								)
-							), 
-							
-							React.createElement("section", {className: "resBody"}, 
-								React.createElement("h4", {className: "subTitle"}, "response body"), 
-								React.createElement("div", {className: "detail"}, bodyContent)
-							)
-						)
-					);
-				}
 			
+			render:function(){
+				var self = this;
 				return (
-					React.createElement("div", null, 
+					React.createElement("div", {className: "mapWrapper"}, 
-						summarySection, 
+						React.createElement("h4", {className: "subTitle"}, "Current Config"), 
-						detailSection
+						React.createElement(MapList, {ref: "list"}), 
+						
+						React.createElement("h4", {className: "subTitle"}, "Add Map Rule"), 
+						React.createElement(MapForm, {onSubmit: self.appendRecord})
 					)
 				);
 			}
 		});
 
-		return DetailPanel;	
+		return MapPanel;
 	}
 
 	module.exports.init = init;
@@ -20156,120 +20091,6 @@
 
 /***/ },
 /* 7 */
-/***/ function(module, exports, __webpack_require__) {
-
-	__webpack_require__(12);
-
-	function init(React){
-		var MapForm = __webpack_require__(13).init(React),
-			MapList = __webpack_require__(14).init(React);
-
-		var MapPanel = React.createClass({displayName: "MapPanel",
-			appendRecord : function(data){
-				var self          = this,
-					listComponent = self.refs.list;
-				
-				listComponent.appendRecord(data);
-			},
-			
-			render:function(){
-				var self = this;
-				return (
-					React.createElement("div", {className: "mapWrapper"}, 
-						React.createElement("h4", {className: "subTitle"}, "Current Config"), 
-						React.createElement(MapList, {ref: "list"}), 
-						
-						React.createElement("h4", {className: "subTitle"}, "Add Map Rule"), 
-						React.createElement(MapForm, {onSubmit: self.appendRecord})
-					)
-				);
-			}
-		});
-
-		return MapPanel;
-	}
-
-	module.exports.init = init;
-
-/***/ },
-/* 8 */
-/***/ function(module, exports, __webpack_require__) {
-
-	function init(React){
-		var RecordRow   = __webpack_require__(11).init(React);
-
-		var RecordPanel = React.createClass({displayName: "RecordPanel",
-			getInitialState : function(){
-				return {
-					list  : [],
-					filter: ""
-				};
-			},
-			render : function(){
-				var self          = this,
-					rowCollection = [],
-					filterStr     = self.state.filter,
-					filter        = filterStr;
-
-				//regexp
-				if(filterStr[0]=="/" && filterStr[filterStr.length-1]=="/"){
-					try{
-						filter = new RegExp(filterStr.substr(1,filterStr.length-2));
-					}catch(e){}
-				}
-
-				for(var i = self.state.list.length-1 ; i >=0 ; i--){
-					var item = self.state.list[i];
-					if(item){
-						if(filter && item){
-							try{
-								if(typeof filter == "object" && !filter.test(item.url)){
-									continue;
-								}else if(typeof filter == "string" && item.url.indexOf(filter) < 0){
-									continue;
-								}
-							}catch(e){}
-						}
-
-						if(item._justUpdated){
-							item._justUpdated = false;
-							item._needRender  = true;
-						}else{
-							item._needRender  = false;
-						}
-
-						rowCollection.push(React.createElement(RecordRow, {key: item.id, data: item, onSelect: self.props.onSelect.bind(self,item)}));
-					}
-				}
-
-				return (
-					React.createElement("table", {className: "uk-table uk-table-condensed uk-table-hover"}, 
-						React.createElement("thead", null, 
-							React.createElement("tr", null, 
-								React.createElement("th", {className: "col_id"}, "#"), 
-								React.createElement("th", {className: "col_method"}, "method"), 
-								React.createElement("th", {className: "col_code"}, "code"), 
-								React.createElement("th", {className: "col_host"}, "host"), 
-								React.createElement("th", {className: "col_path"}, "path"), 
-								React.createElement("th", {className: "col_mime"}, "mime type"), 
-								React.createElement("th", {className: "col_time"}, "time")
-							)
-						), 
-						React.createElement("tbody", null, 
-							rowCollection
-						)
-					)
-				);
-			}
-		});
-
-		return RecordPanel;
-	}
-
-	module.exports.init = init;
-
-/***/ },
-/* 9 */
 /***/ function(module, exports, __webpack_require__) {
 
 	function init(React){
@@ -20367,6 +20188,192 @@
 
 	module.exports.init = init;
 
+/***/ },
+/* 8 */
+/***/ function(module, exports, __webpack_require__) {
+
+	function init(React){
+		var RecordRow   = __webpack_require__(11).init(React);
+
+		var RecordPanel = React.createClass({displayName: "RecordPanel",
+			getInitialState : function(){
+				return {
+					list  : [],
+					filter: ""
+				};
+			},
+			render : function(){
+				var self          = this,
+					rowCollection = [],
+					filterStr     = self.state.filter,
+					filter        = filterStr;
+
+				//regexp
+				if(filterStr[0]=="/" && filterStr[filterStr.length-1]=="/"){
+					try{
+						filter = new RegExp(filterStr.substr(1,filterStr.length-2));
+					}catch(e){}
+				}
+
+				for(var i = self.state.list.length-1 ; i >=0 ; i--){
+					var item = self.state.list[i];
+					if(item){
+						if(filter && item){
+							try{
+								if(typeof filter == "object" && !filter.test(item.url)){
+									continue;
+								}else if(typeof filter == "string" && item.url.indexOf(filter) < 0){
+									continue;
+								}
+							}catch(e){}
+						}
+
+						if(item._justUpdated){
+							item._justUpdated = false;
+							item._needRender  = true;
+						}else{
+							item._needRender  = false;
+						}
+
+						rowCollection.push(React.createElement(RecordRow, {key: item.id, data: item, onSelect: self.props.onSelect.bind(self,item)}));
+					}
+				}
+
+				return (
+					React.createElement("table", {className: "uk-table uk-table-condensed uk-table-hover"}, 
+						React.createElement("thead", null, 
+							React.createElement("tr", null, 
+								React.createElement("th", {className: "col_id"}, "#"), 
+								React.createElement("th", {className: "col_method"}, "method"), 
+								React.createElement("th", {className: "col_code"}, "code"), 
+								React.createElement("th", {className: "col_host"}, "host"), 
+								React.createElement("th", {className: "col_path"}, "path"), 
+								React.createElement("th", {className: "col_mime"}, "mime type"), 
+								React.createElement("th", {className: "col_time"}, "time")
+							)
+						), 
+						React.createElement("tbody", null, 
+							rowCollection
+						)
+					)
+				);
+			}
+		});
+
+		return RecordPanel;
+	}
+
+	module.exports.init = init;
+
+/***/ },
+/* 9 */
+/***/ function(module, exports, __webpack_require__) {
+
+	function init(React){
+
+		var DetailPanel = React.createClass({displayName: "DetailPanel",
+			getInitialState : function(){
+				return {
+					body : {id : -1, content : null},
+					left : "35%"
+				};
+			},
+			loadBody:function(){
+				var self = this,
+				    id   = self.props.data.id;
+				if(!id) return;
+
+				ws.reqBody(id,function(content){
+					if(content.id == self.props.data.id){
+						self.setState({
+							body : content
+						});
+					}
+				});
+			},
+			render : function(){
+				var reqHeaderSection = [],
+					resHeaderSection = [],
+					summarySection,
+					detailSection,
+					bodyContent;
+
+				if(this.props.data.reqHeader){
+					for(var key in this.props.data.reqHeader){
+						reqHeaderSection.push(React.createElement("li", {key: "reqHeader_" + key}, React.createElement("strong", null, key), " : ", this.props.data.reqHeader[key]))
+					}
+				}
+
+				summarySection = (
+					React.createElement("div", null, 
+						React.createElement("section", {className: "req"}, 
+							React.createElement("h4", {className: "subTitle"}, "request"), 
+							React.createElement("div", {className: "detail"}, 
+								React.createElement("ul", {className: "uk-list"}, 
+								    React.createElement("li", null, this.props.data.method, " ", React.createElement("span", {title: "{this.props.data.path}"}, this.props.data.path), " HTTP/1.1"), 
+								    reqHeaderSection
+								)
+							)
+						), 
+						
+						React.createElement("section", {className: "reqBody"}, 
+							React.createElement("h4", {className: "subTitle"}, "request body"), 
+							React.createElement("div", {className: "detail"}, 
+								React.createElement("p", null, this.props.data.reqBody)
+							)
+						)
+					)
+				);
+
+				if(this.props.data.statusCode){
+
+					if(this.state.body.id == this.props.data.id){
+						bodyContent = (React.createElement("pre", {className: "resBodyContent"}, this.state.body.body));
+					}else{
+						bodyContent = null;
+						this.loadBody();
+					}
+
+					if(this.props.data.resHeader){
+						for(var key in this.props.data.resHeader){
+							resHeaderSection.push(React.createElement("li", {key: "resHeader_" + key}, React.createElement("strong", null, key), " : ", this.props.data.resHeader[key]))
+						}
+					}
+
+					detailSection = (
+						React.createElement("div", null, 
+							React.createElement("section", {className: "resHeader"}, 
+								React.createElement("h4", {className: "subTitle"}, "response header"), 
+								React.createElement("div", {className: "detail"}, 
+									React.createElement("ul", {className: "uk-list"}, 
+									    React.createElement("li", null, "HTTP/1.1 ", React.createElement("span", {className: "http_status http_status_" + this.props.data.statusCode}, this.props.data.statusCode)), 
+									    resHeaderSection
+									)
+								)
+							), 
+							
+							React.createElement("section", {className: "resBody"}, 
+								React.createElement("h4", {className: "subTitle"}, "response body"), 
+								React.createElement("div", {className: "detail"}, bodyContent)
+							)
+						)
+					);
+				}
+
+				return (
+					React.createElement("div", null, 
+						summarySection, 
+						detailSection
+					)
+				);
+			}
+		});
+
+		return DetailPanel;	
+	}
+
+	module.exports.init = init;
+
 /***/ },
 /* 10 */
 /***/ function(module, exports, __webpack_require__) {
@@ -20394,18 +20401,13 @@
 				return (
 					React.createElement("div", null, 
 						React.createElement("h4", {className: "subTitle"}, "Log Filter"), 
-
 						React.createElement("div", {className: "filterSection"}, 
 							React.createElement("form", {className: "uk-form"}, 
 								React.createElement("input", {className: "uk-form-large", ref: "keywordInput", onChange: self.dealChange, type: "text", placeholder: "keywords or /^regExp$/", width: "300"})
 							)
 						), 
-						React.createElement("dl", {className: "uk-description-list-horizontal"}, 
+					    React.createElement("p", null, 
-						    React.createElement("dt", null, "wrap your RegExp between two slashes"), 
+						    React.createElement("i", {className: "uk-icon-gift"}), "  type ", React.createElement("strong", null, "/id=\\d", 3, "/"), " will give you all the logs containing ", React.createElement("strong", null, "id=123")
-						    React.createElement("dd", null, 
-							    "e.g. ", React.createElement("br", null), 
-							    "type ", React.createElement("strong", null, "/id=\\d", 3, "/"), " will give you all the logs containing ", React.createElement("strong", null, "id=123")
-						    )
 					    )
 					)
 				);

web/src/filter.js

@@ -21,19 +21,14 @@ function init(React){
 			return (
 				<div>
 					<h4 className="subTitle">Log Filter</h4>
-
 					<div className="filterSection">
 						<form className="uk-form">
 							<input className="uk-form-large" ref="keywordInput" onChange={self.dealChange} type="text" placeholder="keywords or /^regExp$/" width="300"/>
 						</form>
 					</div>
-					<dl className="uk-description-list-horizontal">
+				    <p>
-					    <dt>wrap your RegExp between two slashes</dt>
+					    <i className="uk-icon-gift"></i>&nbsp;&nbsp;type <strong>/id=\d{3}/</strong> will give you all the logs containing <strong>id=123</strong>
-					    <dd>
+				    </p>
-						    e.g. <br />
-						    type <strong>/id=\d{3}/</strong> will give you all the logs containing <strong>id=123</strong>
-					    </dd>
-					</dl>
 				</div>
 			);
 		},

web/src/index.js

@@ -88,18 +88,10 @@ var showPop;
 		document.getElementById("J_popOuter")
 	);
 
-	showPop = function(tag,props,popArg){
+	showPop = function(popArg){
-		var tagEl = PopupContent[tag];
+		var stateArg = util_merge({show : true },popArg);
-		if(!tagEl) throw new Error("element not found, please make sure your panel has been pluged");
+		pop.setState(stateArg);
-
-		var contentEl = React.createElement(tagEl, props);
-		var defaultPopPara = {
-			show    : true,
-			content : contentEl
 	};
-
-		pop.setState(util_merge(defaultPopPara,popArg));
-	}
 })();
 
 //init record panel
@@ -137,7 +129,7 @@ var recorder;
 	});
 
 	function showDetail(data){
-		showPop("detail", {data:data}, {left:"35%"});
+		showPop({left:"35%",content:React.createElement(PopupContent["detail"], {data:data})});
 	}
 
 	//init recorder panel
@@ -198,14 +190,29 @@ var recorder;
 		}
 
 		$(".J_showFilter").on("click",function(){
-			showPop("filter", {onChangeKeyword : updateKeyword}, { left : "50%"});
+			showPop({ left:"50%", content:React.createElement(PopupContent["filter"], {onChangeKeyword : updateKeyword})});
 		});
 	})();
 
 	//map local
 	(function(){
 		$(".J_showMapPanel").on("click",function(){
-			showPop("map", {}, {left : "40%"});
+			showPop({left:"40%", content:React.createElement(PopupContent["map"],null)});
+		});
+	})();
+
+	//other button
+	(function(){
+		$(".J_customButton").on("click",function(){
+			var thisEl = $(this),
+				iframeUrl = thisEl.attr("iframeUrl");
+
+			if(!iframeUrl){
+				throw new Error("cannot find the url assigned for this button");
+			}
+
+			var iframeEl = React.createElement("iframe",{src:iframeUrl,frameBorder:0});
+			showPop({left:"35%", content: iframeEl });
 		});
 	})();