Update viewComic.html

src/web/Manga/viewComic.html

@@ -8,7 +8,6 @@
 	<link rel="stylesheet" href="../script/semantic/semantic.min.css">
 	<script type='text/javascript' src="../script/semantic/semantic.min.js"></script>
 	<script type='text/javascript' src="../script/ao_module.js"></script>
-	<title></title>
 	<style>
 	body, html {
 		height: 100%;
@@ -19,38 +18,6 @@
 	#settingMenu .ui.toggle.checkbox input:checked ~ .box,#settingMenu  .ui.toggle.checkbox input:checked ~ label{
 		color: rgb(189, 189, 189) !important;
 	}
-
-	#SettingInterface{
-		position:fixed;
-		top:0;
-		left:0;
-		right:0;
-		bottom:0;
-		width:100%;
-		height:100%;
-		display:none;
-	}
-
-	#SettingInterface .dimmer {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 1500 !important;
-		background: rgba(0,0,0,0.35);
-		backdrop-filter: blur(3px);
-	}
-	
-	#SettingInterface #settingMenu {
-		position: relative;
-		left: 50%;
-		top: 50%;
-		transform: translate(-50%, -50%);
-		margin: 0 !important;
-		z-index:1502;
-	}
-	
 	</style>
 	<script>
 		//Scrolling Controller
@@ -118,11 +85,17 @@
 </div>
 
 <!-- Setting Config DIV -->
-<div id="SettingInterface" onClick="">
-	<div class="dimmer" onclick="HideSetting(event);"></div>
+<div id="SettingInterface" style="
+    position:fixed;
+    top:0; bottom:0; left:0; right:0;
+	width:100%;
+	height:100%;
+    display:block;
+    z-index:1501;
+	display:none;" onClick="">
 	<div id="settingMenu" class="ui very narrow container" style="top:15%;z-index:1502;">
 		<div class="ui container" style="color:white;">
-		<div class="ui inverted segment" style="background:rgba(61,61,61,0.8); ">
+		<div class="ui inverted segment" style="background:rgba(61,61,61,0.8);">
 			<p style="font-size:120%;"><i class='setting icon'></i>Settings</p>
 			<div class="ui toggle checkbox">
 				<input type="checkbox" id="lefthand">
@@ -203,20 +176,6 @@ Loading Page Data...
 	if(floatWindow){
 		$("#PageInfo").parent().css("bottom","0px");
 		$("body").css("padding-bottom","20px");
-	}else{
-		// Ensure PageInfo sits at bottom for non-floating mode and set page title once manga data is available
-		$("#PageInfo").parent().css("position","fixed");
-		$("#PageInfo").parent().css("bottom","0");
-		$("body").css("padding-bottom","20px");
-
-		(function waitAndSetTitle(){
-			var t = setInterval(function(){
-				if (Array.isArray(titles) && titles.length >= 2 && titles[0] && titles[1]){
-					document.title = titles[0] + " " + titles[1];
-					clearInterval(t);
-				}
-			}, 100);
-		})();
 	}
 
 	//Load the content of this manga chapter
@@ -494,7 +453,7 @@ Loading Page Data...
 			prerenderFinishIcon = "<i class='checkmark icon' style='color: green;'></i>"
 		}
 
-	  $('#PageInfo').html("  <i class='chevron left icon' onClick='back();'></i>  <i class='setting icon' onClick='ShowSetting();'></i>" + shortentitle  + " " + prerenderFinishIcon + " " +  currentPage.toString() + "/" +  positions.length.toString() + "    " + titles[0]  +  "  ");
+	  $('#PageInfo').html("  <i class='chevron left icon' onClick='back();'></i>  <i class='setting icon' onClick='ShowSetting();'></i>" + shortentitle  + " " + prerenderFinishIcon + " " +  currentPage.toString() + "/" +  positions.length.toString() + "    " + titles[0]  +  "  ");
 	  
 	  //if the page reached the end, hide the auto scroll div
 	  if($(window).scrollTop() + $(window).height() == $(document).height()) {
@@ -523,7 +482,7 @@ Loading Page Data...
 			prerenderFinishIcon = "<i class='checkmark icon'></i>"
 		}
 
-		$('#PageInfo').html("  <i class='chevron left icon' onClick='back();'></i>  <i class='setting icon' onClick='ShowSetting();'></i>" + shortentitle + " " +  prerenderFinishIcon + " " +  currentPage.toString() + "/" +  positions.length.toString() + "    " + titles[0]  + "  ");
+		$('#PageInfo').html("  <i class='chevron left icon' onClick='back();'></i>  <i class='setting icon' onClick='ShowSetting();'></i>" + shortentitle + " " +  prerenderFinishIcon + " " +  currentPage.toString() + "/" +  positions.length.toString() + "    " + titles[0]  + "  ");
 		
 	}
 	
@@ -532,13 +491,21 @@ Loading Page Data...
 	}
 	//Setting Interface controlling
 	function ShowSetting(){
-		$('#SettingInterface').fadeIn('fast');
+		$('#SettingInterface').fadeIn('slow');
 	}
-	
+	var ExitPanel = document.getElementById('SettingInterface');
+	ExitPanel.addEventListener("click", HideSetting, false);
 	function HideSetting(e){
-		e.preventDefault();
-		e.stopImmediatePropagation();
-		$('#SettingInterface').fadeOut('fast');
+		//console.log(e.clientX);
+		//console.log(e.clientY);
+		pleft = $('#settingMenu').offset().left;
+		pright = pleft + $('#settingMenu').width();
+		ptop = $('#settingMenu').offset().top;
+		pbottom = ptop + $('#settingMenu').height();
+		//console.log(e.clientX,e.clientY,pleft,pright,ptop,pbottom);
+		if (e.clientX < pleft || e.clientX > pright || e.clientY + $(window).scrollTop() < ptop || e.clientY + $(window).scrollTop()> pbottom){
+			$('#SettingInterface').fadeOut('slow');
+		}
 	}
 	
 	//Next chapter controlling algorithm