From f7a43d780f8424662c58cf8af53958daf521822f Mon Sep 17 00:00:00 2001
From: eight <eight04@gmail.com>
Date: Tue, 5 Sep 2017 18:39:27 +0800
Subject: [PATCH] Add: draw different type of input

---
 manage/manage.css | 27 ++++++++++++++++++++
 manage/manage.js  | 65 +++++++++++++++++++++++++++++++++++++++--------
 msgbox/msgbox.css |  9 -------
 3 files changed, 81 insertions(+), 20 deletions(-)

diff --git a/manage/manage.css b/manage/manage.css
index 762f7c45..5b04087f 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -641,6 +641,33 @@ fieldset > *:not(legend) {
   text-overflow: ellipsis;
 }
 
+/* config dialog */
+#message-box.config-dialog input,
+#message-box.config-dialog select {
+  display: block;
+  width: 100%;
+  margin: .4rem 0 .6rem;
+  padding-left: .25rem;
+  border-radius: .25rem;
+  border-width: 1px;
+}
+
+#message-box.config-dialog .config-checkbox::after {
+  content: "";
+  display: block;
+}
+
+#message-box.config-dialog .config-checkbox > * {
+  display: inline-block;
+  vertical-align: middle;
+  margin: .4rem 0 .6rem;
+}
+
+#message-box.config-dialog input[type=checkbox] {
+  width: auto;
+  margin-right: 0.4em;
+}
+
 @keyframes fadein {
   from {
     opacity: 0;
diff --git a/manage/manage.js b/manage/manage.js
index 36d02a43..9524406e 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -286,7 +286,7 @@ Object.assign(handleEvent, {
 
     messageBox({
       title: `Configure ${style.name}`,
-      className: 'regular-form',
+      className: 'config-dialog',
       contents: form.el,
       buttons: [
         t('confirmSave'),
@@ -320,24 +320,67 @@ Object.assign(handleEvent, {
       const vars = deepCopy(style.vars);
       for (const key of Object.keys(vars)) {
         const va = vars[key];
-        va.input = $element({tag: 'input', type: 'text', value: va.value});
-        va.input.oninput = () => {
-          va.dirty = true;
-          va.value = va.input.value;
-        };
-        const label = $element({
+        let appendChild;
+        if (va.type === 'color') {
+          va.inputColor = $element({tag: 'input', type: 'color'});
+          // FIXME: i18n
+          va.inputAlpha = $element({tag: 'input', type: 'range', min: 0, max: 255, title: 'Opacity'});
+          va.inputColor.onchange = va.inputAlpha.oninput = () => {
+            va.dirty = true;
+            va.value = va.inputColor.value + Number(va.inputAlpha.value).toString(16);
+            va.inputColor.style.opacity = va.inputAlpha.value / 255;
+          };
+          appendChild = [va.label, va.inputColor, va.inputAlpha];
+        } else if (va.type === 'checkbox') {
+          va.input = $element({tag: 'input', type: 'checkbox'});
+          va.input.onchange = () => {
+            va.dirty = true;
+            va.value = String(Number(va.input.checked));
+          };
+          appendChild = [va.input, $element({tag: 'span', appendChild: va.label})];
+        } else if (va.type === 'select') {
+          va.input = $element({
+            tag: 'select',
+            appendChild: Object.keys(va.select).map(key => $element({
+              tag: 'option', value: key, appendChild: va.select[key]
+            }))
+          });
+          va.input.onchange = () => {
+            va.dirty = true;
+            va.value = va.input.value;
+          };
+          appendChild = [va.label, va.input];
+        } else {
+          va.input = $element({tag: 'input', type: 'text'});
+          va.input.oninput = () => {
+            va.dirty = true;
+            va.value = va.input.value;
+          };
+          appendChild = [va.label, va.input];
+        }
+        labels.push($element({
           tag: 'label',
-          appendChild: [va.label, va.input]
-        });
-        labels.push(label);
+          className: `config-${va.type}`,
+          appendChild
+        }));
       }
       drawValues();
 
       function drawValues() {
         for (const key of Object.keys(vars)) {
           const va = vars[key];
-          va.input.value = va.value === null || va.value === undefined ?
+          const value = va.value === null || va.value === undefined ?
             va.default : va.value;
+
+          if (va.type === 'color') {
+            va.inputColor.value = value.slice(0, -2);
+            va.inputAlpha.value = parseInt(value.slice(-2), 16);
+            va.inputColor.style.opacity = va.inputAlpha.value / 255;
+          } else if (va.type === 'checkbox') {
+            va.input.checked = Number(value);
+          } else {
+            va.input.value = value;
+          }
         }
       }
 
diff --git a/msgbox/msgbox.css b/msgbox/msgbox.css
index 59b87984..36c78405 100644
--- a/msgbox/msgbox.css
+++ b/msgbox/msgbox.css
@@ -136,12 +136,3 @@
     opacity: 0;
   }
 }
-
-#message-box.regular-form input[type=text] {
-  display: block;
-  width: 100%;
-  margin: .4rem 0 .6rem;
-  padding-left: .25rem;
-  border-radius: .25rem;
-  border-width: 1px;
-}