browser-extension-settings 0.0.4 → 0.0.6

package/lib/common.ts

@@ -1,3 +1,3 @@
-export const version = 11
+export const besVersion = 13
 export const openButton = `<svg viewBox="0 0 60.2601318359375 84.8134765625" version="1.1" xmlns="http://www.w3.org/2000/svg" class=" glyph-box" style="height: 9.62969px; width: 6.84191px;"><g transform="matrix(1 0 0 1 -6.194965820312518 77.63671875)"><path d="M66.4551-35.2539C66.4551-36.4746 65.9668-37.5977 65.0391-38.4766L26.3672-76.3672C25.4883-77.1973 24.4141-77.6367 23.1445-77.6367C20.6543-77.6367 18.7012-75.7324 18.7012-73.1934C18.7012-71.9727 19.1895-70.8496 19.9707-70.0195L55.5176-35.2539L19.9707-0.488281C19.1895 0.341797 18.7012 1.41602 18.7012 2.68555C18.7012 5.22461 20.6543 7.12891 23.1445 7.12891C24.4141 7.12891 25.4883 6.68945 26.3672 5.81055L65.0391-32.0312C65.9668-32.959 66.4551-34.0332 66.4551-35.2539Z"></path></g></svg>`
 export const openInNewTabButton = `<svg viewBox="0 0 72.127685546875 72.2177734375" version="1.1" xmlns="http://www.w3.org/2000/svg" class=" glyph-box" style="height: 8.19958px; width: 8.18935px;"><g transform="matrix(1 0 0 1 -12.451127929687573 71.3388671875)"><path d="M84.5703-17.334L84.5215-66.4551C84.5215-69.2383 82.7148-71.1914 79.7852-71.1914L30.6641-71.1914C27.9297-71.1914 26.0742-69.0918 26.0742-66.748C26.0742-64.4043 28.1738-62.4023 30.4688-62.4023L47.4609-62.4023L71.2891-63.1836L62.207-55.2246L13.8184-6.73828C12.9395-5.85938 12.4512-4.73633 12.4512-3.66211C12.4512-1.31836 14.5508 0.878906 16.9922 0.878906C18.1152 0.878906 19.1895 0.488281 20.0684-0.439453L68.5547-48.877L76.6113-58.0078L75.7324-35.2051L75.7324-17.1387C75.7324-14.8438 77.7344-12.6953 80.127-12.6953C82.4707-12.6953 84.5703-14.6973 84.5703-17.334Z"></path></g></svg>`

package/lib/extension-list.ts

@@ -99,6 +99,20 @@ export const activeExtension = (id: string) => {
   }
 }
 
+export const activeExtensionList = () => {
+  const extensionListContainer = $(".extension_list_container")
+  if (extensionListContainer) {
+    addClass(extensionListContainer, "bes_active")
+  }
+}
+
+export const deactiveExtensionList = () => {
+  const extensionListContainer = $(".extension_list_container")
+  if (extensionListContainer) {
+    removeClass(extensionListContainer, "bes_active")
+  }
+}
+
 const createInstalledExtension = (installedExtension: InstalledExtension) => {
   const div = createElement("div", {
     class: "installed_extension",
@@ -120,7 +134,7 @@ const updateRelatedExtensions = (container: HTMLElement) => {
   container.innerHTML = ""
 
   for (const relatedExtension of relatedExtensions) {
-    console.log(relatedExtension)
+    // console.log(relatedExtension)
 
     if (isInstalledExtension(relatedExtension.id)) {
       continue
@@ -154,7 +168,7 @@ export function createExtensionList(installedExtensions: InstalledExtension[]) {
     class: "installed_extension_list",
   })
   for (const installedExtension of installedExtensions) {
-    console.log(installedExtension)
+    // console.log(installedExtension)
 
     if (isInstalledExtension(installedExtension.id)) {
       continue

package/lib/settings.ts

@@ -6,6 +6,7 @@ import {
 import {
   $,
   $$,
+  addClass,
   addElement,
   addEventListener,
   addStyle,
@@ -19,8 +20,10 @@ import {
   createExtensionList,
   addCurrentExtension,
   activeExtension,
+  activeExtensionList,
+  deactiveExtensionList,
 } from "./extension-list"
-import { version } from "./common"
+import { besVersion } from "./common"
 
 const prefix = "browser_extension_settings_"
 
@@ -64,7 +67,7 @@ const settingsContainerId = prefix + "container_" + randomId
 const settingsElementId = prefix + "main_" + randomId
 const getSettingsElement = () => $("#" + settingsElementId)
 const getSettingsStyle: () => string = () =>
-  styleText
+  (styleText as string)
     .replace(/browser_extension_settings_container/gm, settingsContainerId)
     .replace(/browser_extension_settings_main/gm, settingsElementId)
 const storageKey = "settings"
@@ -94,22 +97,44 @@ export function getSettingsValue(key: string): boolean | string | undefined {
     : settingsTable[key]?.defaultValue
 }
 
-const modalHandler = (event) => {
-  let target = event.target as HTMLElement
+const closeModal = () => {
   const settingsContainer = getSettingsContainer()
   if (settingsContainer) {
-    while (target !== settingsContainer && target) {
-      target = target.parentNode as HTMLElement
-    }
+    settingsContainer.style.display = "none"
+  }
 
-    if (target === settingsContainer) {
-      return
+  removeEventListener(document, "click", onDocumentClick)
+  removeEventListener(document, "keydown", onDocumentKeyDown)
+}
+
+const onDocumentClick = (event: Event) => {
+  const target = event.target as HTMLElement
+  if (target?.closest(`.${prefix}container`)) {
+    return
+  }
+
+  closeModal()
+}
+
+const onDocumentKeyDown = (event: KeyboardEvent) => {
+  if (event.defaultPrevented) {
+    return // 如果事件已经在进行中，则不做任何事。
+  }
+
+  switch (event.key) {
+    case "Escape": {
+      // 按“ESC”键时要做的事。
+      closeModal()
+      break
     }
 
-    settingsContainer.style.display = "none"
+    default: {
+      return
+    } // 什么都没按就退出吧。
   }
 
-  removeEventListener(document, "click", modalHandler)
+  // 取消默认动作，从而避免处理两次。
+  event.preventDefault()
 }
 
 async function updateOptions() {
@@ -148,9 +173,9 @@ function getSettingsContainer() {
   const container = $(`.${prefix}container`)
   if (container) {
     const theVersion = Number.parseInt(container.dataset.besVersion || "0", 10)
-    if (theVersion < version) {
+    if (theVersion < besVersion) {
       container.id = settingsContainerId
-      container.dataset.besVersion = String(version)
+      container.dataset.besVersion = String(besVersion)
     }
 
     return container
@@ -159,14 +184,16 @@ function getSettingsContainer() {
   return addElement(doc.body, "div", {
     id: settingsContainerId,
     class: `${prefix}container`,
-    "data-bes-version": version,
+    "data-bes-version": besVersion,
+    style: "display: none;",
   })
 }
 
 function getSettingsWrapper() {
+  const container = getSettingsContainer()
   return (
-    $(`.${prefix}container .${prefix}wrapper`) ||
-    addElement(getSettingsContainer(), "div", {
+    $(`.${prefix}wrapper`, container) ||
+    addElement(container, "div", {
       class: `${prefix}wrapper`,
     })
   )
@@ -209,7 +236,7 @@ function createSettingsElement() {
       textContent: "Settings",
       class: "navigation_go_previous",
       onclick() {
-        console.log(1)
+        activeExtensionList()
       },
     })
 
@@ -223,8 +250,10 @@ function createSettingsElement() {
         const item = settingsTable[key]
         if (!item.type || item.type === "switch") {
           const switchOption = createSwitchOption(item.title, {
-            async onchange(event) {
-              await saveSattingsValue(key, event.target.checked)
+            async onchange(event: Event) {
+              if (event.target) {
+                await saveSattingsValue(key, event.target.checked)
+              }
             },
           })
 
@@ -238,21 +267,24 @@ function createSettingsElement() {
     const options2 = addElement(settingsMain, "div", {
       class: "option_groups",
     })
-    let timeoutId
+    let timeoutId: number | undefined
     addElement(options2, "textarea", {
       placeholder: `/* Custom rules for internal URLs, matching URLs will be opened in new tabs */`,
-      onkeyup(event) {
+      onkeyup(event: Event) {
+        const textArea = event.target as HTMLTextAreaElement
         if (timeoutId) {
           clearTimeout(timeoutId)
-          timeoutId = null
+          timeoutId = undefined
         }
 
         timeoutId = setTimeout(async () => {
           const host = location.host
-          await saveSattingsValue(
-            `customRulesForCurrentSite_${host}`,
-            event.target.value.trim()
-          )
+          if (textArea) {
+            await saveSattingsValue(
+              `customRulesForCurrentSite_${host}`,
+              textArea.value.trim()
+            )
+          }
         }, 100)
       },
     })
@@ -306,14 +338,14 @@ function addSideMenu() {
     $("#browser_extension_side_menu") ||
     addElement(doc.body, "div", {
       id: "browser_extension_side_menu",
-      "data-bes-version": version,
+      "data-bes-version": besVersion,
     })
 
   const button = $("button[data-bes-version]", menu)
 
   if (button) {
     const theVersion = Number.parseInt(button.dataset.besVersion || "0", 10)
-    if (theVersion >= version) {
+    if (theVersion >= besVersion) {
       return
     }
 
@@ -322,7 +354,7 @@ function addSideMenu() {
 
   addElement(menu, "button", {
     type: "button",
-    "data-bes-version": version,
+    "data-bes-version": besVersion,
     title: "设置",
     onclick() {
       setTimeout(showSettings, 1)
@@ -337,8 +369,10 @@ export async function showSettings() {
   await updateOptions()
   settingsContainer.style.display = "block"
 
-  addEventListener(document, "click", modalHandler)
+  addEventListener(document, "click", onDocumentClick)
+  addEventListener(document, "keydown", onDocumentKeyDown)
   activeExtension(settingsOptions.id)
+  deactiveExtensionList()
 }
 
 export const initSettings = async (options: SettingsOptions) => {

package/lib/style.scss

@@ -187,6 +187,7 @@
   }
 
   .option_groups textarea {
+    font-size: 12px;
     margin: 10px 0 10px 0;
     height: 100px;
     width: 100%;
@@ -359,3 +360,25 @@
 #browser_extension_side_menu button:active {
   opacity: 100%;
 }
+
+@media (max-width: 500px) {
+  #browser_extension_settings_container {
+    right: 10px;
+
+    .extension_list_container {
+      display: none;
+    }
+    .extension_list_container.bes_active {
+      display: block;
+    }
+    .extension_list_container.bes_active + div {
+      display: none;
+    }
+  }
+
+  #browser_extension_settings_main {
+    a.navigation_go_previous {
+      display: block;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension-settings",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Settings module for developing browser extensions and userscripts",
   "type": "module",
   "main": "./lib/index.ts",