feat: jquery-confirm popup

webrdp/assets/file.js

@@ -1,7 +1,9 @@
 window.filegatewayUrl = "/filegw/"
 function initFile() {
     window.fileShareName = "drive_c$";
+    $('option').val(window.fileShareName).appendTo('#shares');
     window.currentPath = [];
+    updatePathText();
     listFile();
     setInterval(listFile, 20000);
 }
@@ -44,13 +46,13 @@ function listFile() {
                     cell2.innerHTML = "目录";
                 }
                 else {
-                    cell1.innerHTML = "<a href='" + getCurrentPath() + encodeURI(filename) +"'>" + filename + "</a>";
+                    cell1.innerHTML = "<a href='" + getCurrentPath() + encodeURI(filename) +"' target=\"_blank\">" + filename + "</a>";
                     cell2.innerHTML = getSize(data.entries[i].fileSize);
                 }
             }
         },
         error: function (xhr, status, error) {
-            alert("文件夹列出失败，可能没有权限或者凭证过期，刷新网页后再试");
+            $.alert("文件夹列出失败，可能没有权限或者凭证过期，刷新网页后再试");
         }
     });
 
@@ -60,8 +62,6 @@ function uploadFile(force) {
     var file = fileInput.files[0];
     var suffix = "";
     var blob = new Blob([file], { type: "application/octet-stream" });
-    if (force)
-        suffix="?force=1"
     $.ajax({
         url: getCurrentPath() + encodeURI(file.name) + suffix,
         method: "POST",
@@ -69,35 +69,80 @@ function uploadFile(force) {
         contentType: false,
         processData: false,
         success: function (response) {
-            if (response.exist && !force) {
+            console.log("upload response", response)
-                if (confirm("文件已存在，是否覆盖？")) {
+            if (response.exists && !force) {
-                    uploadFile(true);
+                $.confirm({
-                }
+                    title: '文件已存在!',
+                    content: '是否替换？',
+                    buttons: {
+                        replace: {
+                            text: '替换',
+                            btnClass: 'btn-red',
+                            keys: ['enter', 'shift'],
+                            action: function () {
+                                uploadFile(true)
+                            }
+                        },
+                        cancel: {
+                            text: '取消',
+                            action: function () {}
+                        }
+                    }
+                });
             }
-            else if (!response.exist && !response.error)
+            else if (!response.exists && !response.error)
-                alert("上传成功");
+                $.alert("上传成功");
         },
         error: function (xhr, status, error) {
-            alert("上传失败，可能没有权限访问。")
+            $.alert("上传失败，可能没有权限访问。")
             console.error("upload error", xhr, status, error)
         }
     });
 }
 function mkdir() {
-    var dirName = prompt("请输入文件夹名称");
+    $.confirm({
-    if (dirName) {
+        title: "请输入文件夹名称",
-        $.ajax({
+        content: '' +
-            url: getCurrentPath() + encodeURI(dirName),
+            '<form action="" class="formName">' +
-            method: "PUT",
+            '<div class="form-group">' +
-            success: function (response) {
+            '<label>文件夹：</label>' +
-                if (!response.error)
+            '<input type="text" placeholder="名称" class="name form-control" required />' +
-                    alert("创建成功");
+            '</div>' +
+            '</form>',
+        buttons: {
+            formSubmit: {
+                text: '确定',
+                btnClass: 'btn-blue',
+                action: function () {
+                    var dirName = this.$content.find('.name').val();
+                    $.ajax({
+                        url: getCurrentPath() + encodeURI(dirName),
+                        method: "PUT",
+                        success: function (response) {
+                            if (!response.error)
+                                $.alert("创建成功");
+                        },
+                        error: function (xhr, status, error) {
+                            $.alert("创建文件夹失败，可能是没有权限");
+                        }
+                    });
+                }
             },
-            error: function (xhr, status, error) {
+            cancel: {
-                alert("创建文件夹失败，可能是没有权限");
+                text: '取消',
-            }
+                action: function() {}
-        });
+            },
-    }
+        },
+        onContentReady: function () {
+            // bind to events
+            var jc = this;
+            this.$content.find('form').on('submit', function (e) {
+                // if the user submits the form by pressing enter in the field.
+                e.preventDefault();
+                jc.$$formSubmit.trigger('click'); // reference the button and click it
+            });
+        }
+    });
 }
 function onClickOpenDir(element) {
     window.currentPath = window.currentPath.concat(element.innerHTML);

webrdp/assets/rdp.css

@@ -127,8 +127,8 @@
     transform: translateY(-50%);
     float: left;
     background: white;
-    border-bottom-left-radius: 15px;
+    border-bottom-right-radius: 15px;
-    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
 }
 
 .fileshareback-open {
@@ -141,7 +141,7 @@
 
 #filesharelist {
     width: 295px;
-    height: 200px;
+    height: 35vh;
     border: 1px dotted #000;
 }
 

webrdp/assets/rdp.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>远程桌面</title>
     <link rel="stylesheet" href="./bootstrap.min.css">
+    <link rel="stylesheet" href="./jquery-confirm.min.css">
     <link rel="stylesheet" href="./rdp.css">
     <link rel="stylesheet" href="./login.css">
     <link rel="prefetch" href="./webrdp_bg.wasm">
@@ -49,7 +50,7 @@
         }
 
         function disconnectedAndRefresh(msg) {
-            alert(msg ?? "抱歉，与服务器连接断开。");
+            $.alert(msg ?? "抱歉，与服务器连接断开。");
             window.location.reload();
         }
     </script>
@@ -93,9 +94,8 @@
                 <button id="filesharebtn">»</button>
                 <div id="filesharebox" class="vertical-centre">
                     <div style="position: relative; top: 50%; transform: translateY(-50%);">
-                        <div>当前路径: <span id="currentPath">/drive_c$/</span></div>
+                        <div>当前路径: <span id="currentPath"></span></div>
-                        <div>分享:<select name="" id="">
+                        <div>分享:<select id="shares">
-                            <option value="drive_c$">drive_c$</option>
                         </select></div>
                         <table id="filesharelist">
                         </table>
@@ -107,6 +107,7 @@
         </div>
     </div>
     <script src="./jquery-3.6.1.min.js" type="text/javascript"></script>
+    <script src="./jquery-confirm.min.js" type="text/javascript"></script>
     <script type="text/javascript" src="./ui.js"></script>
     <script type="text/javascript" src="./rdp.js"></script>
     <script type="text/javascript" src="./file.js"></script>

webrdp/assets/ui.js

@@ -77,3 +77,64 @@ function fileshare_close() {
 $("#canvas").on("touchmove", function (e) {
     e.preventDefault();
 });
+
+jconfirm.defaults = {
+    title: '提示',
+    titleClass: '',
+    type: 'default',
+    typeAnimated: true,
+    draggable: true,
+    dragWindowGap: 15,
+    dragWindowBorder: true,
+    animateFromElement: true,
+    smoothContent: true,
+    content: '你确定要继续吗？',
+    buttons: {},
+    defaultButtons: {
+        ok: {
+            text: '确定',
+            action: function () {}
+        },
+        close: {
+            text: '关闭',
+            action: function () {}
+        },
+    },
+    contentLoaded: function (data, status, xhr) {
+    },
+    icon: '',
+    lazyOpen: false,
+    bgOpacity: null,
+    theme: 'light',
+    animation: 'scale',
+    closeAnimation: 'scale',
+    animationSpeed: 400,
+    animationBounce: 1,
+    rtl: false,
+    container: 'body',
+    containerFluid: false,
+    backgroundDismiss: false,
+    backgroundDismissAnimation: 'shake',
+    autoClose: false,
+    closeIcon: null,
+    closeIconClass: false,
+    watchInterval: 100,
+    columnClass: 'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1',
+    boxWidth: '50%',
+    scrollToPreviousElement: true,
+    scrollToPreviousElementAnimate: true,
+    useBootstrap: true,
+    offsetTop: 40,
+    offsetBottom: 40,
+    bootstrapClasses: {
+        container: 'container',
+        containerFluid: 'container-fluid',
+        row: 'row',
+    },
+    onContentReady: function () { },
+    onOpenBefore: function () { },
+    onOpen: function () { },
+    onClose: function () { },
+    onDestroy: function () { },
+    onAction: function () { }
+};