Options ui (#222)

* wip

* Commenting stuff to keep the build happy

* Revealing sections

* Custom select elements & more form work

* Range input styles

* Text fields with inputs do the right thing

* Safari & Firefox fixes

* Large compress select

* oops

* MozJPEG options updated

* OptPNG options

* These asserts weren't true

* Generic options

* WebP options

* Hiding "edit" when "original image"

* Download icon

* Copy setting button - still not happy with this

* Progress indicator

* Loading icon enter/exit anim

* Preventing controls going under options

* Ahh so that's what was causing scrolling

* Ahh so that's what was causing outlines

* Simplifying range styles and fixing cross-browser

* Processing custom element styles

* Get precision from step by default

* I don't know how or when this happened.

* Don't need that many steps

* Avoid having an element that covers the pinch zoom

* Preventing overlap with zoom controls

* Prevent ts warning

* Fixing spinner position

* Simplifying FileSize

src/codecs/mozjpeg/options.tsx

@@ -2,158 +2,197 @@ import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
 import { inputFieldChecked, inputFieldValueAsNumber } from '../../lib/util';
 import { EncodeOptions, MozJpegColorSpace } from './encoder-meta';
-import '../../custom-els/RangeInput';
+import * as style from '../../components/Options/style.scss';
+import Checkbox from '../../components/checkbox';
+import Expander from '../../components/expander';
+import Select from '../../components/select';
+import Range from '../../components/range';
+import linkState from 'linkstate';
 
-type Props = {
-  options: EncodeOptions,
-  onChange(newOptions: EncodeOptions): void,
-};
+interface Props {
+  options: EncodeOptions;
+  onChange(newOptions: EncodeOptions): void;
+}
+
+interface State {
+  showAdvanced: boolean;
+}
+
+export default class MozJPEGEncoderOptions extends Component<Props, State> {
+  state: State = {
+    showAdvanced: false,
+  };
 
-export default class MozJPEGEncoderOptions extends Component<Props, {}> {
   @bind
   onChange(event: Event) {
     const form = (event.currentTarget as HTMLInputElement).closest('form') as HTMLFormElement;
+    const { options } = this.props;
 
-    const options: EncodeOptions = {
+    const newOptions: EncodeOptions = {
       // Copy over options the form doesn't currently care about, eg arithmetic
       ...this.props.options,
       // And now stuff from the form:
       // .checked
-      baseline: inputFieldChecked(form.baseline),
-      progressive: inputFieldChecked(form.progressive),
-      optimize_coding: inputFieldChecked(form.optimize_coding),
-      trellis_multipass: inputFieldChecked(form.trellis_multipass),
-      trellis_opt_zero: inputFieldChecked(form.trellis_opt_zero),
-      trellis_opt_table: inputFieldChecked(form.trellis_opt_table),
+      baseline: inputFieldChecked(form.baseline, options.baseline),
+      progressive: inputFieldChecked(form.progressive, options.progressive),
+      optimize_coding: inputFieldChecked(form.optimize_coding, options.optimize_coding),
+      trellis_multipass: inputFieldChecked(form.trellis_multipass, options.trellis_multipass),
+      trellis_opt_zero: inputFieldChecked(form.trellis_opt_zero, options.trellis_opt_zero),
+      trellis_opt_table: inputFieldChecked(form.trellis_opt_table, options.trellis_opt_table),
       // .value
-      quality: inputFieldValueAsNumber(form.quality),
-      smoothing: inputFieldValueAsNumber(form.smoothing),
-      color_space: inputFieldValueAsNumber(form.color_space),
-      quant_table: inputFieldValueAsNumber(form.quant_table),
-      trellis_loops: inputFieldValueAsNumber(form.trellis_loops),
+      quality: inputFieldValueAsNumber(form.quality, options.quality),
+      smoothing: inputFieldValueAsNumber(form.smoothing, options.smoothing),
+      color_space: inputFieldValueAsNumber(form.color_space, options.color_space),
+      quant_table: inputFieldValueAsNumber(form.quant_table, options.quant_table),
+      trellis_loops: inputFieldValueAsNumber(form.trellis_loops, options.trellis_loops),
     };
-    this.props.onChange(options);
+    this.props.onChange(newOptions);
   }
 
-  render({ options }: Props) {
+  render({ options }: Props, { showAdvanced }: State) {
     // I'm rendering both lossy and lossless forms, as it becomes much easier when
     // gathering the data.
     return (
-      <form>
-        <label>
-          Quality:
-          <range-input
+      <form class={style.optionsSection}>
+        <div class={style.optionOneCell}>
+          <Range
             name="quality"
             min="0"
             max="100"
-            value={'' + options.quality}
-            onChange={this.onChange}
-          />
-        </label>
-        <label>
-          <input
-            name="baseline"
-            type="checkbox"
-            checked={options.baseline}
-            onChange={this.onChange}
-          />
-          <span>Baseline (worse but legacy-compatible)</span>
-        </label>
-        <label style={{ display: options.baseline ? 'none' : '' }}>
-          <input
-            name="progressive"
-            type="checkbox"
-            checked={options.progressive}
-            onChange={this.onChange}
-          />
-          <span>Progressive multi-pass rendering</span>
-        </label>
-        <label style={{ display: options.baseline ? '' : 'none' }}>
-          <input
-            name="optimize_coding"
-            type="checkbox"
-            checked={options.optimize_coding}
-            onChange={this.onChange}
-          />
-          <span>Optimize Huffman table</span>
-        </label>
-        <label>
-          Smoothing:
-          <range-input
-            name="smoothing"
-            min="0"
-            max="100"
-            value={'' + options.smoothing}
-            onChange={this.onChange}
-          />
-        </label>
-        <label>
-          Output color space:
-          <select
-            name="color_space"
-            value={'' + options.color_space}
-            onChange={this.onChange}
+            value={options.quality}
+            onInput={this.onChange}
           >
-            <option value={MozJpegColorSpace.GRAYSCALE}>Grayscale</option>
-            <option value={MozJpegColorSpace.RGB}>RGB (sub-optimal)</option>
-            <option value={MozJpegColorSpace.YCbCr}>YCbCr (optimized for color)</option>
-          </select>
-        </label>
-        <label>
-          Quantization table:
-          <select
-            name="quant_table"
-            value={'' + options.quant_table}
-            onChange={this.onChange}
-          >
-            <option value="0">JPEG Annex K</option>
-            <option value="1">Flat</option>
-            <option value="2">MSSIM-tuned Kodak</option>
-            <option value="3">ImageMagick</option>
-            <option value="4">PSNR-HVS-M-tuned Kodak</option>
-            <option value="5">Klein et al</option>
-            <option value="6">Watson et al</option>
-            <option value="7">Ahumada et al</option>
-            <option value="8">Peterson et al</option>
-          </select>
-        </label>
-        <label>
-          <input
-            name="trellis_multipass"
-            type="checkbox"
-            checked={options.trellis_multipass}
-            onChange={this.onChange}
-          />
-          <span>Consider multiple scans during trellis quantization</span>
-        </label>
-        <label style={{ display: options.trellis_multipass ? '' : 'none' }}>
-          <input
-            name="trellis_opt_zero"
-            type="checkbox"
-            checked={options.trellis_opt_zero}
-            onChange={this.onChange}
-          />
-          <span>Optimize runs of zero blocks</span>
-        </label>
-        <label>
-          <input
-            name="trellis_opt_table"
-            type="checkbox"
-            checked={options.trellis_opt_table}
-            onChange={this.onChange}
-          />
-          <span>Optimize after trellis quantization</span>
-        </label>
-        <label>
-          Trellis quantization passes:
-          <range-input
-            name="trellis_loops"
-            min="1"
-            max="50"
-            value={'' + options.trellis_loops}
-            onChange={this.onChange}
+            Quality:
+          </Range>
+        </div>
+        <label class={style.optionInputFirst}>
+          <Checkbox
+            checked={showAdvanced}
+            onChange={linkState(this, 'showAdvanced')}
           />
+          Show advanced settings
         </label>
+        <Expander>
+          {showAdvanced ?
+            <div>
+              <label class={style.optionInputFirst}>
+                <Checkbox
+                  name="baseline"
+                  checked={options.baseline}
+                  onChange={this.onChange}
+                />
+                Pointless spec compliance
+              </label>
+              <Expander>
+                {options.baseline ? null :
+                  <label class={style.optionInputFirst}>
+                    <Checkbox
+                      name="progressive"
+                      checked={options.progressive}
+                      onChange={this.onChange}
+                    />
+                    Progressive rendering
+                  </label>
+                }
+              </Expander>
+              <Expander>
+                {options.baseline ?
+                  <label class={style.optionInputFirst}>
+                    <Checkbox
+                      name="optimize_coding"
+                      checked={options.optimize_coding}
+                      onChange={this.onChange}
+                    />
+                    Optimize Huffman table
+                  </label>
+                  : null
+                }
+              </Expander>
+              <div class={style.optionOneCell}>
+                <Range
+                  name="smoothing"
+                  min="0"
+                  max="100"
+                  value={options.smoothing}
+                  onInput={this.onChange}
+                >
+                  Smoothing:
+                </Range>
+              </div>
+              <label class={style.optionTextFirst}>
+                Channels:
+                <Select
+                  name="color_space"
+                  value={options.color_space}
+                  onChange={this.onChange}
+                >
+                  <option value={MozJpegColorSpace.GRAYSCALE}>Grayscale</option>
+                  <option value={MozJpegColorSpace.RGB}>RGB</option>
+                  <option value={MozJpegColorSpace.YCbCr}>YCbCr</option>
+                </Select>
+              </label>
+              <label class={style.optionTextFirst}>
+                Quantization:
+                <Select
+                  name="quant_table"
+                  value={options.quant_table}
+                  onChange={this.onChange}
+                >
+                  <option value="0">JPEG Annex K</option>
+                  <option value="1">Flat</option>
+                  <option value="2">MSSIM-tuned Kodak</option>
+                  <option value="3">ImageMagick</option>
+                  <option value="4">PSNR-HVS-M-tuned Kodak</option>
+                  <option value="5">Klein et al</option>
+                  <option value="6">Watson et al</option>
+                  <option value="7">Ahumada et al</option>
+                  <option value="8">Peterson et al</option>
+                </Select>
+              </label>
+              <label class={style.optionInputFirst}>
+                <Checkbox
+                  name="trellis_multipass"
+                  checked={options.trellis_multipass}
+                  onChange={this.onChange}
+                />
+                Trellis multipass
+              </label>
+              <Expander>
+                {options.trellis_multipass ?
+                  <label class={style.optionInputFirst}>
+                    <Checkbox
+                      name="trellis_opt_zero"
+                      checked={options.trellis_opt_zero}
+                      onChange={this.onChange}
+                    />
+                    Optimize zero block runs
+                  </label>
+                  : null
+                }
+              </Expander>
+              <label class={style.optionInputFirst}>
+                <Checkbox
+                  name="trellis_opt_table"
+                  checked={options.trellis_opt_table}
+                  onChange={this.onChange}
+                />
+                Optimize after trellis quantization
+              </label>
+              <div class={style.optionOneCell}>
+                <Range
+                  name="trellis_loops"
+                  min="1"
+                  max="50"
+                  value={options.trellis_loops}
+                  onInput={this.onChange}
+                >
+                  Trellis quantization passes:
+                </Range>
+              </div>
+            </div>
+            : null
+          }
+        </Expander>
       </form>
     );
   }