update overlay to web interface

lib/requestHandler.js

@@ -150,6 +150,9 @@ function userRequestHandler(req,userRes){
                 }catch(e){}
                 
             });
+            res.on('error',function(error){
+                console.log('error',error);
+            });
 
         });
 
@@ -253,12 +256,17 @@ function mergeCORSHeader(reqHeader,originHeader){
     targetObj["access-control-allow-methods"]     = "GET, POST, PUT";
     targetObj["access-control-allow-headers"]     = reqHeader['access-control-request-headers'] || "-___-||";
 
+    //
+    targetObj["Transfer-Encoding"]                = "chunked";
+
     // Disable caching
     // If the response status is 304 not modified, the data event of response will not emmit
-    targetObj["Transfer-Encoding"]                = "chunked"
     targetObj["Cache-Control"]                    = "no-cache, no-store, must-revalidate";
     targetObj["Pragma"]                           = "no-cache";
     targetObj["Expires"]                          = 0;
+    //
+    targetObj["server"]                           = "anyproxy server";
+    targetObj["x-powered-by"]                     = "Alipay-ct-wd";
 
     return targetObj;
 }

web/css/page.css

@@ -148,3 +148,23 @@
 {
 	color: #910A0A;
 }
+
+
+#dragbar{
+	position:absolute;
+	left:0px;
+	top:0px;
+	height: 100%;
+	float: left;
+	background-color:#CCC;
+	width: 3px;
+	cursor: col-resize;
+}
+#ghostbar{
+    width:3px;
+    background-color:#000;
+    opacity:0.5;
+    position:absolute;
+    cursor: col-resize;
+    z-index:999
+}

web/index.html

@@ -28,9 +28,12 @@
 	</div>
 
 	<div class="recordDetailOverlay J_recordDetailOverlay" style="display:none">
+		<div id="dragbar"></div>
 		<span class="escBtn J_escBtn">Close (ESC)</span>
+		<div class="J_recordDetailOverlayContentWrapper">
 			<div class="J_recordDetailOverlayContent"></div>
 		</div>
+	</div>
 
 	<script type="text/template" id="main_table_row">
 		<td class="data_id"><%= _id %></td>

web/page.js

@@ -176,4 +176,52 @@ seajs.use(['$','Underscore' ,'Backbone'], function($, _, Backbone) {
 
 	});
 
+	//draggable panel
+	(function(){
+		var i = 0;
+		var dragging = false,
+		pageX = 0;
+		$('#dragbar').mousedown(function(e){
+			pageX = e.pageX;
+			e.preventDefault();
+			dragging = true;
+			var main = $('.J_recordDetailOverlay');
+			var ghostbar = $('<div>',{
+				id:'ghostbar',
+				css: {
+					height: main.outerHeight(),
+					top: main.offset().top,
+					left: main.offset().left
+				}
+			}).appendTo('body');
+
+			$(document).mousemove(function(e){
+				ghostbar.css("left",e.pageX);
+			});
+		});
+
+		$(document).mouseup(function(e){
+			if (dragging) {
+				var deltaPageX = e.pageX - pageX;
+				
+				$('.J_recordDetailOverlay').css("width",$('.J_recordDetailOverlay').width() - deltaPageX);
+				$('.J_recordDetailOverlay').css("left",pageX + deltaPageX);
+				if($('.J_recordDetailOverlay').width()<=100){
+					$('.J_recordDetailOverlay').animate({
+						'right': $('.J_recordDetailOverlay').width()
+					},300,function(){
+						$('.J_escBtn').trigger('click');
+					});
+					
+				}
+				pageX = e.pageX;
+				$('#ghostbar').remove();
+				$(document).unbind('mousemove');
+				dragging = false;
+				
+			}
+		});
+
+	})();
+
 });