feat: add hidden option

closes #8

Author: fent

README.md

@@ -68,7 +68,8 @@ Options can all have the following properties,
 * `string` - `desc`
 * `string` - `preview` - A preview image. Represents the extension of the image, example "png". If this is used, the image must be placed in a `previews` folder where `options.html` is, and named the name as this option's key, which is its name prepended by tab name if any.
 * `Object` - `default` - Default value.
-* `boolean` - `disabled` - The field can be disabled, for whatever reason...
+* `boolean` - `disabled` - The field can be disabled.
+* `boolean` - `hidden` - A hidden field, default options will still be saved.
 * `boolean` - `singleline` - If you'd like to position the label and the field on the same line, instead of the default multiline layout.
 * `Function` - `validate` - Called with the new value of field, will only save if it returns `true`.
 

src/css/chrome-options.css

@@ -310,6 +310,10 @@ body.show-tab-title .frame .mainview header {
   display: inline-block;
 }
 
+.chrome-bootstrap .hidden {
+  display: none;
+}
+
 .chrome-bootstrap .preview-container {
   position: relative;
   padding: 0 1em;

src/js/base.js

@@ -63,17 +63,17 @@ chrome.options.addOption = (key, value, save, option) => {
       }
   }
 
-  // `key` is passed down from parent options to be used here.
-  if (option.preview) {
-    const $label = $option.querySelector('label');
-    $label.append(h('span.preview-container', h('span.preview')),
-      h('img.preview-image', { src: 'previews/' + key + '.' + option.preview }));
-  }
-
-  if (option.disabled) {
+  if (option.hidden) {
+    $option.classList.add('hidden');
+  } else if (option.disabled) {
     $option.querySelectorAll('input, select, textarea').forEach(($f) => {
       $f.setAttribute('disabled', true);
     });
+  } else if (option.preview) {
+    // `key` is passed down from parent options to be used here.
+    const $label = $option.querySelector('label');
+    $label.append(h('span.preview-container', h('span.preview')),
+      h('img.preview-image', { src: 'previews/' + key + '.' + option.preview }));
   }
 
   return $option;