browser-extension-settings 0.0.8 → 0.2.0

package/lib/common.ts

@@ -1,3 +1,3 @@
-export const besVersion = 14
+export const besVersion = 15
 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/index.ts

@@ -1 +1,7 @@
-export { initSettings, showSettings, getSettingsValue } from "./settings"
+export {
+  initSettings,
+  showSettings,
+  getSettingsValue,
+  saveSattingsValues,
+  resetSattingsValues,
+} from "./settings"

package/lib/settings.ts

@@ -33,20 +33,44 @@ type SettingsOptions = {
   footer?: string
   settingsTable?: SettingsTable
   onValueChange?: () => void
+  onViewUpdate?: (settingsMainView: HTMLElement) => void
   relatedExtensions?: RelatedExtension[]
 }
 
-type SettingsTable = Record<string, SettingsSwitchItem | SettingsInputItem>
+type SettingsTable = Record<
+  string,
+  SettingsSwitchItem | SettingsInputItem | SettingsActionItem | SettingsTipItem
+>
 
 type SettingsSwitchItem = {
   title: string
   defaultValue: boolean
+  type?: "switch"
+  group?: number
 }
 
 type SettingsInputItem = {
   title: string
   defaultValue: string
+  placeholder?: string
   type: string
+  group?: number
+}
+
+type SettingsActionItem = {
+  title: string
+  type: string
+  onclick?: () => void
+  group?: number
+  defaultValue?: any
+}
+
+type SettingsTipItem = {
+  title: string
+  type: string
+  tipContent: string
+  group?: number
+  defaultValue?: any
 }
 
 type RelatedExtension = {
@@ -91,10 +115,33 @@ async function saveSattingsValue(key: string, value: any) {
   await setValue(storageKey, settings)
 }
 
+export async function resetSattingsValues() {
+  await setValue(storageKey, {})
+}
+
+export async function saveSattingsValues(
+  values: Record<string, boolean | string | undefined>
+) {
+  const settings = await getSettings()
+
+  for (const key in values) {
+    if (Object.hasOwn(values, key)) {
+      const value = values[key]
+
+      settings[key] =
+        settingsTable[key] && settingsTable[key].defaultValue === value
+          ? undefined
+          : value
+    }
+  }
+
+  await setValue(storageKey, settings)
+}
+
 export function getSettingsValue(key: string): boolean | string | undefined {
   return Object.hasOwn(settings, key)
-    ? settings[key]
-    : settingsTable[key]?.defaultValue
+    ? (settings[key] as boolean | string | undefined)
+    : (settingsTable[key]?.defaultValue as boolean | string | undefined)
 }
 
 const closeModal = () => {
@@ -136,28 +183,43 @@ async function updateOptions() {
 
   for (const key in settingsTable) {
     if (Object.hasOwn(settingsTable, key)) {
-      const checkbox = $(
-        `#${settingsElementId} .option_groups .switch_option[data-key="${key}"] input`
-      )
-      if (checkbox) {
-        checkbox.checked = getSettingsValue(key)
+      const item = settingsTable[key]
+      const type = item.type || "switch"
+
+      // console.log(key, type)
+      switch (type) {
+        case "switch": {
+          const checkbox = $(
+            `#${settingsElementId} .option_groups .switch_option[data-key="${key}"] input`
+          ) as HTMLInputElement
+          if (checkbox) {
+            checkbox.checked = getSettingsValue(key) as boolean
+          }
+
+          break
+        }
+
+        case "textarea": {
+          const textArea = $(
+            `#${settingsElementId} .option_groups textarea[data-key="${key}"]`
+          ) as HTMLTextAreaElement
+          if (textArea) {
+            textArea.value = getSettingsValue(key) as string
+          }
+
+          break
+        }
+
+        default: {
+          break
+        }
       }
     }
   }
 
-  const host = location.host
-  const group2 = $(`#${settingsElementId} .option_groups:nth-of-type(2)`)
-  if (group2) {
-    group2.style.display = getSettingsValue(
-      `enableCustomRulesForCurrentSite_${host}`
-    )
-      ? "block"
-      : "none"
-  }
-
-  const customStyleValue = $(`#${settingsElementId} .option_groups textarea`)
-  if (customStyleValue) {
-    customStyleValue.value = settings[`customRulesForCurrentSite_${host}`] || ""
+  if (typeof settingsOptions.onViewUpdate === "function") {
+    const settingsMain = createSettingsElement()
+    settingsOptions.onViewUpdate(settingsMain)
   }
 }
 
@@ -231,74 +293,98 @@ function createSettingsElement() {
       addElement(settingsMain, "h2", { textContent: settingsOptions.title })
     }
 
-    const options = addElement(settingsMain, "div", { class: "option_groups" })
-    for (const key in settingsTable) {
-      if (Object.hasOwn(settingsTable, key)) {
-        const item = settingsTable[key]
-        if (!item.type || item.type === "switch") {
-          const switchOption = createSwitchOption(item.title, {
-            async onchange(event: Event) {
-              if (event.target) {
-                await saveSattingsValue(key, event.target.checked)
-              }
-            },
-          })
-
-          switchOption.dataset.key = key
-
-          addElement(options, switchOption)
+    const optionGroups: HTMLElement[] = []
+    const getOptionGroup = (index: number) => {
+      if (index > optionGroups.length) {
+        for (let i = optionGroups.length; i < index; i++) {
+          optionGroups.push(
+            addElement(settingsMain!, "div", {
+              class: "option_groups",
+            })
+          )
         }
       }
+
+      return optionGroups[index - 1]
     }
 
-    const options2 = addElement(settingsMain, "div", {
-      class: "option_groups",
-    })
-    let timeoutId: number | undefined
-    addElement(options2, "textarea", {
-      placeholder: `/* Custom rules for internal URLs, matching URLs will be opened in new tabs */`,
-      onkeyup(event: Event) {
-        const textArea = event.target as HTMLTextAreaElement
-        if (timeoutId) {
-          clearTimeout(timeoutId)
-          timeoutId = undefined
-        }
+    for (const key in settingsTable) {
+      if (Object.hasOwn(settingsTable, key)) {
+        const item = settingsTable[key]
+        const type = item.type || "switch"
+        const group = item.group || 1
+        const optionGroup = getOptionGroup(group)
+        // console.log(key, item, type, group)
+        switch (type) {
+          case "switch": {
+            const switchOption = createSwitchOption(item.title, {
+              async onchange(event: Event) {
+                const checkbox = event.target as HTMLInputElement
+                if (checkbox) {
+                  await saveSattingsValue(key, checkbox.checked)
+                }
+              },
+            })
+
+            switchOption.dataset.key = key
+
+            addElement(optionGroup, switchOption)
+
+            break
+          }
 
-        timeoutId = setTimeout(async () => {
-          const host = location.host
-          if (textArea) {
-            await saveSattingsValue(
-              `customRulesForCurrentSite_${host}`,
-              textArea.value.trim()
-            )
+          case "textarea": {
+            let timeoutId: number | undefined
+            addElement(optionGroup, "textarea", {
+              "data-key": key,
+              placeholder: (item as SettingsInputItem).placeholder || "",
+              onkeyup(event: Event) {
+                const textArea = event.target as HTMLTextAreaElement
+                if (timeoutId) {
+                  clearTimeout(timeoutId)
+                  timeoutId = undefined
+                }
+
+                timeoutId = setTimeout(async () => {
+                  if (textArea) {
+                    await saveSattingsValue(key, textArea.value.trim())
+                  }
+                }, 100)
+              },
+            })
+
+            break
           }
-        }, 100)
-      },
-    })
 
-    const tip = addElement(options2, "div", {
-      class: "tip",
-    })
-    addElement(tip, "a", {
-      class: "tip_anchor",
-      textContent: "Examples",
-    })
-    const tipContent = addElement(tip, "div", {
-      class: "tip_content",
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      innerHTML: `<p>Custom rules for internal URLs, matching URLs will be opened in new tabs</p>
-      <p>
-      - One line per url pattern<br>
-      - All URLs contains '/posts' or '/users/'<br>
-      <pre>/posts/
-/users/</pre>
-
-      - Regex is supported<br>
-      <pre>^/(posts|members)/d+</pre>
-
-      - '*' for all URLs
-      </p>`,
-    })
+          case "action": {
+            addElement(optionGroup, "a", {
+              class: "action",
+              textContent: item.title,
+              onclick: (item as SettingsActionItem).onclick,
+            })
+
+            break
+          }
+
+          case "tip": {
+            const tip = addElement(optionGroup, "div", {
+              class: "bes_tip",
+            })
+            addElement(tip, "a", {
+              class: "bes_tip_anchor",
+              textContent: item.title,
+            })
+            const tipContent = addElement(tip, "div", {
+              class: "bes_tip_content",
+              // eslint-disable-next-line @typescript-eslint/naming-convention
+              innerHTML: (item as SettingsTipItem).tipContent,
+            })
+            break
+          }
+          // No default
+        }
+      }
+    }
 
     if (settingsOptions.footer) {
       const footer = addElement(settingsMain, "footer")
@@ -362,6 +448,7 @@ export const initSettings = async (options: SettingsOptions) => {
   settingsTable = options.settingsTable || {}
   addValueChangeListener(storageKey, async () => {
     settings = await getSettings()
+    // console.log(JSON.stringify(settings, null, 2))
     await updateOptions()
     if (typeof options.onValueChange === "function") {
       options.onValueChange()

package/lib/style.scss

@@ -213,7 +213,7 @@
     margin-right: 10px;
   }
 
-  .option_groups .tip {
+  .option_groups .bes_tip {
     position: relative;
     margin: 0;
     padding: 0 15px 0 0;
@@ -221,11 +221,11 @@
     max-width: none;
     font-size: 14px;
 
-    .tip_anchor {
+    .bes_tip_anchor {
       cursor: help;
       text-decoration: underline;
     }
-    .tip_content {
+    .bes_tip_content {
       position: absolute;
       bottom: 15px;
       left: 0;
@@ -240,8 +240,8 @@
       box-shadow: 0px 10px 39px 10px rgba(62, 66, 66, 0.22) !important;
     }
 
-    .tip_anchor:hover + .tip_content,
-    .tip_content:hover {
+    .bes_tip_anchor:hover + .bes_tip_content,
+    .bes_tip_content:hover {
       display: block;
     }
 

package/lib/switch.ts

@@ -4,7 +4,12 @@ import {
   createElement,
 } from "browser-extension-utils"
 
-export function createSwitch(options = {}): HTMLElement {
+type SwichOptions = {
+  checked?: boolean
+  onchange?: (event: Event) => void | Promise<void>
+}
+
+export function createSwitch(options = {} as SwichOptions): HTMLElement {
   const container = createElement("label", { class: "container" })
   const checkbox = createElement(
     "input",
@@ -21,7 +26,10 @@ export function createSwitch(options = {}): HTMLElement {
   return container
 }
 
-export function createSwitchOption(text: string, options): HTMLElement {
+export function createSwitchOption(
+  text: string,
+  options: SwichOptions
+): HTMLElement {
   const div = createElement("div", { class: "switch_option" })
   addElement(div, "span", { textContent: text })
   div.append(createSwitch(options))

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "browser-extension-settings",
-  "version": "0.0.8",
+  "version": "0.2.0",
   "description": "Settings module for developing browser extensions and userscripts",
   "type": "module",
   "main": "./lib/index.ts",
   "scripts": {
     "p": "prettier --write .",
-    "lint": "prettier --write . && xo --fix",
+    "lint": "run-s lint:*",
+    "lint:code": "prettier --write . && xo --fix",
+    "lint:type": "tsc --noemit",
     "test": "echo \"Error: no test specified\" && exit 0"
   },
   "repository": {
@@ -30,7 +32,9 @@
   },
   "devDependencies": {
     "@types/chrome": "^0.0.237",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
+    "typescript": "^5.1.6",
     "xo": "^0.54.2"
   },
   "files": [