fixed pikvm/pikvm#223: confirm stream window closing

4 files changed, 24 insertions, 9 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 63e511e7..8e71e029 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -472,7 +472,7 @@
         </div>
       </li>
     </ul>
-        <div class="window" id="stream-window">
+        <div class="window" id="stream-window" data-close-confirm="Do you want to close the stream? This action will temporarily stop&lt;br&gt;the video transmission until you open the broadcast again.&lt;br&gt;This can be useful for saving traffic.">
           <div class="window-header" id="stream-window-header">
             <div class="window-grab">Stream</div>
             <button class="window-button-close">&times;</button>
@@ -501,7 +501,7 @@
             </div>
           </div>
         </div>
-        <div class="window" id="keyboard-window">
+        <div class="window" id="keyboard-window" data-close-confirm="">
           <div class="window-header" id="keyboard-window-header">
             <div class="window-grab">Virtual Keyboard</div>
             <button class="window-button-close">&times;</button>
@@ -1345,7 +1345,7 @@
             </div>
           </div>
         </div>
-        <div class="window" id="about-window">
+        <div class="window" id="about-window" data-close-confirm="">
           <div class="window-header" id="">
             <div class="window-grab">About</div>
             <button class="window-button-close">&times;</button>
diff --git a/web/kvm/window-stream.pug b/web/kvm/window-stream.pug
index f3493c39..84f1d4dc 100644
--- a/web/kvm/window-stream.pug
+++ b/web/kvm/window-stream.pug
@@ -1,4 +1,7 @@
-+window("stream-window", "Stream", true)
+- let confirm_msg = "Do you want to close the stream? This action will temporarily stop<br>";
+- confirm_msg += "the video transmission until you open the broadcast again.<br>";
+- confirm_msg += "This can be useful for saving traffic.";
++window("stream-window", "Stream", true, confirm_msg)
 	div(id="stream-info")
 	div(id="stream-box" class="stream-box-inactive")
 		img(id="stream-image" class="stream-image-inactive" src=`${png_dir}/blank-stream.png`)
diff --git a/web/kvm/windows.pug b/web/kvm/windows.pug
index 15fdf131..d735b65d 100644
--- a/web/kvm/windows.pug
+++ b/web/kvm/windows.pug
@@ -1,5 +1,5 @@
-mixin window(id, title, with_header_id=false)
-	div(id=id class="window")
+mixin window(id, title, with_header_id=false, close_confirm_msg="")
+	div(id=id class="window" data-close-confirm=close_confirm_msg)
 		div(id=(with_header_id ? `${id}-header` : "") class="window-header")
 			div(class="window-grab") #{title}
 			button(class="window-button-close") &times;
diff --git a/web/share/js/wm.js b/web/share/js/wm.js
index e857bac0..f879e3e8 100644
--- a/web/share/js/wm.js
+++ b/web/share/js/wm.js
@@ -62,8 +62,20 @@ function __WindowManager() {
 			let el_button = el_window.querySelector(".window-header .window-button-close");
 			if (el_button) {
 				tools.setOnClick(el_button, function() {
-					__closeWindow(el_window);
-					__activateLastWindow(el_window);
+					let close_window = function() {
+						__closeWindow(el_window);
+						__activateLastWindow(el_window);
+					};
+					let confirm_msg = el_window.getAttribute("data-close-confirm");
+					if (confirm_msg) {
+						self.confirm(confirm_msg).then(function(ok) {
+							if (ok) {
+								close_window();
+							}
+						});
+					} else {
+						close_window();
+					}
 				});
 			}
 		}
@@ -456,7 +468,7 @@ function __WindowManager() {
 		}
 
 		el_window.setAttribute("data-centered", "");
-		el_window.onclick = el_window.ontouchend = () => __activateWindow(el_window);
+		el_window.onmousedown = el_window.ontouchstart = () => __activateWindow(el_window);
 
 		el_grab.onmousedown = startMoving;
 		el_grab.ontouchstart = startMoving;