Improve codes

dnj · Apr 27, 2024 · df5981c · df5981c
1 parent 3030bc9
commit df5981c
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 47 deletions.
diff --git a/pages/docs.vue b/pages/docs.vue
@@ -49,17 +49,6 @@ interface IData {
     value: string,
 }
 
-interface IInput {
-    url: string,
-    width: number,
-    height: number,
-    maxAge: number,
-    format: string,
-    fullpage: boolean,
-    timeout: number,
-    viewportWidth: number,
-    viewportHeight: number
-}
 
 export default defineComponent({
     setup() {
@@ -81,16 +70,16 @@ export default defineComponent({
                 { title: this.$t("documents.options.table.header.value"), key: 'value', width: '20%' },
             ],
             inputData: {
-                url: 'https://www.google.com',
-                width: 1200,
-                height: 600,
-                maxAge: 86400,
-                format: 'jpeg',
-                fullpage: false,
-                timeout: 10000,
-                viewportWidth: 1200,
-                viewportHeight: 600
-            } as IInput
+                url: "https://www.google.com",
+                width: "1200",
+                height: "600",
+                maxAge: "86400",
+                format: "jpeg",
+                fullpage: "false",
+                timeout: "10000",
+                viewportWidth: "1200",
+                viewportHeight: "600"
+            }
         }
     },
     computed: {
@@ -171,32 +160,43 @@ export default defineComponent({
             ]
         },
         url(): string {
-            let params = {}
-            if (this.inputData.width != 1200) {
-                params = Object.assign(params, { width: this.inputData.width })
-            }
-            if (this.inputData.height != 600) {
-                params = Object.assign(params, { height: this.inputData.height })
-            }
-            if (this.inputData.maxAge != 86400 && this.inputData.maxAge > 9) {
-                params = Object.assign(params, { maxAge: this.inputData.maxAge })
-            }
-            if (this.inputData.format === "png") {
-                params = Object.assign(params, { format: this.inputData.format })
-            }
-            if (this.inputData.fullpage === true) {
-                params = Object.assign(params, { fullpage: this.inputData.fullpage })
-            }
-            if (this.inputData.timeout != 10000 && 2000 <= this.inputData.timeout && this.inputData.timeout <= 15000) {
-                params = Object.assign(params, { timeout: this.inputData.timeout })
-            }
-            if (this.inputData.viewportWidth != 1200 && 320 <= this.inputData.viewportWidth && this.inputData.viewportWidth <= 4096) {
-                params = Object.assign(params, { viewportWidth: this.inputData.viewportWidth })
-            }
-            if (this.inputData.viewportHeight != 600 && 320 <= this.inputData.viewportHeight && this.inputData.viewportHeight <= 4096) {
-                params = Object.assign(params, { viewportHeight: this.inputData.viewportHeight })
-            }
-            return getCaptureURL(this.inputData.url, params)
+
+            return getCaptureURL(this.inputData.url, {
+                width: this.inputData.width,
+                height: this.inputData.height,
+                maxAge: this.inputData.maxAge,
+                format: this.inputData.format,
+                fullpage: this.inputData.fullpage,
+                timeout: this.inputData.timeout,
+                viewportWidth: this.inputData.viewportWidth,
+                viewportHeight: this.inputData.viewportHeight
+            })
+
+
+            // if (this.inputData.width != 1200) {
+            //     params = Object.assign(params, { width: this.inputData.width })
+            // }
+            // if (this.inputData.height != 600) {
+            //     params = Object.assign(params, { height: this.inputData.height })
+            // }
+            // if (this.inputData.maxAge != 86400 && this.inputData.maxAge > 9) {
+            //     params = Object.assign(params, { maxAge: this.inputData.maxAge })
+            // }
+            // if (this.inputData.format === "png") {
+            //     params = Object.assign(params, { format: this.inputData.format })
+            // }
+            // if (this.inputData.fullpage === true) {
+            //     params = Object.assign(params, { fullpage: this.inputData.fullpage })
+            // }
+            // if (this.inputData.timeout != 10000 && 2000 <= this.inputData.timeout && this.inputData.timeout <= 15000) {
+            //     params = Object.assign(params, { timeout: this.inputData.timeout })
+            // }
+            // if (this.inputData.viewportWidth != 1200 && 320 <= this.inputData.viewportWidth && this.inputData.viewportWidth <= 4096) {
+            //     params = Object.assign(params, { viewportWidth: this.inputData.viewportWidth })
+            // }
+            // if (this.inputData.viewportHeight != 600 && 320 <= this.inputData.viewportHeight && this.inputData.viewportHeight <= 4096) {
+            //     params = Object.assign(params, { viewportHeight: this.inputData.viewportHeight })
+            // }
         }
     }
 })

diff --git a/utils/index.ts b/utils/index.ts
@@ -1,4 +1,22 @@
 export function getCaptureURL(url: string, query?: Record<string, string>): string {
+    const defaultQuery: Record<string, string> = {
+        width: "1200",
+        height: "600",
+        maxAge: "86400",
+        format: "jpeg",
+        fullpage: "false",
+        timeout: "10000",
+        viewportWidth: "1200",
+        viewportHeight: "600"
+    };
+    if (query !== undefined) {
+        for(const key in defaultQuery){
+            if(query[key] === defaultQuery[key]){
+                delete query[key];
+            }
+        }
+    }
+
     const params = (new URLSearchParams(Object.assign({ url }, query))).toString().replaceAll("%2F", "/").replaceAll("%3A", ":");
     const location = useRequestURL();
     const result = new URL((location.protocol || "http:") + "//" + location.host + "/capture?" + params);