browser-extension-settings 0.3.0 → 0.4.0

package/lib/common.ts

@@ -1,4 +1,4 @@
-export const besVersion = 30
+export const besVersion = 40
 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>`
 export const settingButton = `<svg viewBox="0 0 16 16" version="1.1">

package/lib/index.ts

@@ -3,6 +3,6 @@ export {
   showSettings,
   hideSettings,
   getSettingsValue,
-  saveSattingsValues,
-  resetSattingsValues,
+  saveSettingsValues,
+  resetSettingsValues,
 } from "./settings"

package/lib/settings.ts

@@ -13,7 +13,7 @@ import {
   doc,
   parseInt10,
   removeEventListener,
-  runWhenBodyExists,
+  runWhenDomReady,
   runWhenHeadExists,
 } from "browser-extension-utils"
 import styleText from "data-text:./style.scss"
@@ -41,11 +41,16 @@ type SettingsOptions = {
 
 type SettingsTable = Record<
   string,
-  SettingsSwitchItem | SettingsInputItem | SettingsActionItem | SettingsTipItem
+  | SettingsSwitchItem
+  | SettingsInputItem
+  | SettingsActionItem
+  | SettingsSelectItem
+  | SettingsTipItem
 >
 
 type SettingsSwitchItem = {
   title: string
+  icon?: string
   defaultValue: boolean
   type?: "switch"
   group?: number
@@ -53,6 +58,7 @@ type SettingsSwitchItem = {
 
 type SettingsInputItem = {
   title: string
+  icon?: string
   defaultValue: string
   placeholder?: string
   type: string
@@ -61,6 +67,7 @@ type SettingsInputItem = {
 
 type SettingsActionItem = {
   title: string
+  icon?: string
   type: string
   onclick?: () => void
   url?: string
@@ -68,8 +75,18 @@ type SettingsActionItem = {
   defaultValue?: any
 }
 
+type SettingsSelectItem = {
+  title: string
+  icon?: string
+  type: "select"
+  options: { string: { string: any } }
+  group?: number
+  defaultValue?: any
+}
+
 type SettingsTipItem = {
   title: string
+  icon?: string
   type: string
   tipContent: string
   group?: number
@@ -108,7 +125,7 @@ async function getSettings() {
   )
 }
 
-async function saveSattingsValue(key: string, value: any) {
+async function saveSettingsValue(key: string, value: any) {
   const settings = await getSettings()
   settings[key] =
     settingsTable[key] && settingsTable[key].defaultValue === value
@@ -118,11 +135,11 @@ async function saveSattingsValue(key: string, value: any) {
   await setValue(storageKey, settings)
 }
 
-export async function resetSattingsValues() {
+export async function resetSettingsValues() {
   await setValue(storageKey, {})
 }
 
-export async function saveSattingsValues(
+export async function saveSettingsValues(
   values: Record<string, boolean | string | undefined>
 ) {
   const settings = await getSettings()
@@ -206,6 +223,18 @@ async function updateOptions() {
           break
         }
 
+        case "select": {
+          const options = $$(
+            `#${settingsElementId} .option_groups .select_option[data-key="${key}"] .bes_select option`
+          ) as HTMLOptionElement[]
+
+          for (const option of options) {
+            option.selected = option.value === String(getSettingsValue(key))
+          }
+
+          break
+        }
+
         case "textarea": {
           const textArea = $(
             `#${settingsElementId} .option_groups textarea[data-key="${key}"]`
@@ -324,11 +353,11 @@ function createSettingsElement() {
         // console.log(key, item, type, group)
         switch (type) {
           case "switch": {
-            const switchOption = createSwitchOption(item.title, {
+            const switchOption = createSwitchOption(item.icon, item.title, {
               async onchange(event: Event) {
                 const checkbox = event.target as HTMLInputElement
                 if (checkbox) {
-                  await saveSattingsValue(key, checkbox.checked)
+                  await saveSettingsValue(key, checkbox.checked)
                 }
               },
             })
@@ -357,7 +386,7 @@ function createSettingsElement() {
 
                 timeoutId = setTimeout(async () => {
                   if (textArea) {
-                    await saveSattingsValue(key, textArea.value.trim())
+                    await saveSettingsValue(key, textArea.value.trim())
                   }
                 }, 100)
               },
@@ -389,6 +418,39 @@ function createSettingsElement() {
             break
           }
 
+          case "select": {
+            const div = addElement(optionGroup, "div", {
+              class: "select_option bes_option",
+              "data-key": key,
+            })
+            if (item.icon) {
+              addElement(div, "img", { src: item.icon, class: "bes_icon" })
+            }
+
+            addElement(div, "span", {
+              textContent: item.title,
+              class: "bes_title",
+            })
+
+            const select = addElement(div, "select", {
+              class: "bes_select",
+              onchange: async () => {
+                console.log(select.value)
+                await saveSettingsValue(key, select.value)
+              },
+            }) as HTMLSelectElement
+
+            for (const option of Object.entries(
+              (item as SettingsSelectItem).options
+            )) {
+              addElement(select, "option", {
+                textContent: option[0],
+                value: option[1],
+              })
+            }
+            break
+          }
+
           case "tip": {
             const tip = addElement(optionGroup, "div", {
               class: "bes_tip",
@@ -518,7 +580,7 @@ export const initSettings = async (options: SettingsOptions) => {
   runWhenHeadExists(() => {
     addStyle(getSettingsStyle())
   })
-  runWhenBodyExists(() => {
+  runWhenDomReady(() => {
     initExtensionList()
     addSideMenu()
   })

package/lib/style.scss

@@ -30,12 +30,18 @@
       font-size: 26px;
       font-weight: 800;
       border: none;
+      color: var(--browser-extension-settings-text-color);
+      margin: 18px 0;
+      padding: 0;
     }
 
     h2 {
       font-size: 18px;
       font-weight: 600;
       border: none;
+      color: var(--browser-extension-settings-text-color);
+      margin: 14px 0;
+      padding: 0;
     }
 
     .extension_list_container {
@@ -134,6 +140,7 @@
     font-size: 18px;
     font-weight: 600;
     border: none;
+    color: var(--browser-extension-settings-text-color);
   }
 
   footer {
@@ -208,7 +215,8 @@
     box-sizing: border-box;
   }
 
-  .switch_option {
+  .switch_option,
+  .select_option {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -224,8 +232,29 @@
     border-top: none;
   }
 
-  .switch_option > span {
+  .bes_option > .bes_icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 10px;
+  }
+  .bes_option > .bes_title {
     margin-right: 10px;
+    flex-grow: 1;
+  }
+
+  .bes_option > .bes_select {
+    box-sizing: border-box;
+    background-color: #fff;
+    height: 24px;
+    padding: 0 2px 0 2px;
+    margin: 0;
+    border-radius: 6px;
+    border: 1px solid #ccc;
+    /*
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    */
   }
 
   .option_groups .bes_tip {

package/lib/switch.ts

@@ -29,9 +29,27 @@ export function createSwitch(options = {} as SwichOptions): HTMLElement {
 export function createSwitchOption(
   text: string,
   options: SwichOptions
+): HTMLElement
+export function createSwitchOption(
+  icon: string | undefined,
+  text: string,
+  options: SwichOptions
+): HTMLElement
+export function createSwitchOption(
+  icon: string,
+  text: string | SwichOptions,
+  options?: SwichOptions
 ): HTMLElement {
-  const div = createElement("div", { class: "switch_option" })
-  addElement(div, "span", { textContent: text })
+  if (typeof text !== "string") {
+    return createSwitchOption(undefined, icon, text)
+  }
+
+  const div = createElement("div", { class: "switch_option bes_option" })
+  if (icon) {
+    addElement(div, "img", { src: icon, class: "bes_icon" })
+  }
+
+  addElement(div, "span", { textContent: text, class: "bes_title" })
   div.append(createSwitch(options))
   return div
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension-settings",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Settings module for developing browser extensions and userscripts",
   "type": "module",
   "main": "./lib/index.ts",
@@ -28,7 +28,7 @@
   "homepage": "https://github.com/utags/browser-extension-settings#readme",
   "dependencies": {
     "browser-extension-storage": "^0.1.2",
-    "browser-extension-utils": "^0.1.15"
+    "browser-extension-utils": "^0.1.17"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.243",