feat: introduce auto detection

tonik · Mar 18, 2023 · 77e105f · 77e105f
1 parent 62ee294
commit 77e105f
Showing 1 changed file with 33 additions and 24 deletions.
diff --git a/packages/status/ui.html b/packages/status/ui.html
@@ -200,39 +200,48 @@
     if (appearanceInput) {
       appearanceInput.checked = true
     }
+    onAppearanceChange(appearance)
   }
 
-  typeInputs.forEach((elem) => {
-    elem.addEventListener('change', () => {
-      parent.postMessage(
-        {
-          pluginMessage: {
-            type: 'change-status',
-            payload: {
-              status: elem.value,
-              appearance: document.querySelector('input[name="appearance"]:checked').value,
-            },
+  const onStatusChange = (status) => {
+    parent.postMessage(
+      {
+        pluginMessage: {
+          type: 'change-status',
+          payload: {
+            status,
+            appearance: document.querySelector('input[name="appearance"]:checked')?.value,
+          },
+        },
+      },
+      '*'
+    )
+  }
+
+  const onAppearanceChange = (appearance) => {
+    parent.postMessage(
+      {
+        pluginMessage: {
+          type: 'change-status',
+          payload: {
+            status: document.querySelector('input[name="type"]:checked')?.value,
+            appearance: appearance,
           },
         },
-        '*'
-      )
+      },
+      '*'
+    )
+  }
+
+  typeInputs.forEach((elem) => {
+    elem.addEventListener('change', () => {
+      onStatusChange(elem.value)
     })
   })
 
   appearanceInputs.forEach((elem) => {
     elem.addEventListener('change', () => {
-      parent.postMessage(
-        {
-          pluginMessage: {
-            type: 'change-status',
-            payload: {
-              status: document.querySelector('input[name="type"]:checked')?.value,
-              appearance: elem.value,
-            },
-          },
-        },
-        '*'
-      )
+      onAppearanceChange(elem.value)
     })
   })