external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-14 09:39:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Options ui (#222)

Browse Source 
* 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
This commit is contained in:
Jake Archibald
2018-11-06 13:36:23 +00:00
committed by GitHub
parent 0cec90c7ca
commit bdd3c11f1a
37 changed files with 1291 additions and 948 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/custom-els/RangeInput/index.ts
View File

@@ -1,15 +1,19 @@
import { bind } from '../../lib/initial-util';
import './styles.css';
import * as style from './styles.css';
const RETARGETED_EVENTS = ['focus', 'blur'];
const UPDATE_EVENTS = ['input', 'change'];
const REFLECTED_PROPERTIES = ['name', 'min', 'max', 'step', 'value', 'disabled'];
const REFLECTED_ATTRIBUTES = ['name', 'min', 'max', 'step', 'value', 'disabled'];
function getPrescision(value: string): number {
const afterDecimal = value.split('.')[1];
return afterDecimal ? afterDecimal.length : 0;
}
class RangeInputElement extends HTMLElement {
private _input = document.createElement('input');
private _valueDisplayWrapper = document.createElement('div');
private _valueDisplay = document.createElement('span');
private _input: HTMLInputElement;
private _valueDisplay?: HTMLDivElement;
private _ignoreChange = false;
static get observedAttributes() {
@@ -18,7 +22,9 @@ class RangeInputElement extends HTMLElement {
constructor() {
super();
this._input = document.createElement('input');
this._input.type = 'range';
this._input.className = style.input;
for (const event of RETARGETED_EVENTS) {
this._input.addEventListener(event, this._retargetEvent, true);
@@ -29,6 +35,18 @@ class RangeInputElement extends HTMLElement {
}
}
connectedCallback() {
if (this.contains(this._input)) return;
this.innerHTML =
`<div class="${style.thumbWrapper}">` +
`<div class="${style.thumb}"></div>` +
`<div class="${style.valueDisplay}"></div>` +
'</div>';
this.insertBefore(this._input, this.firstChild);
this._valueDisplay = this.querySelector('.' + style.valueDisplay) as HTMLDivElement;
}
get labelPrecision(): string {
return this.getAttribute('label-precision') || '';
}
@@ -37,14 +55,6 @@ class RangeInputElement extends HTMLElement {
this.setAttribute('label-precision', precision);
}
connectedCallback() {
if (this._input.parentNode !== this) {
this.appendChild(this._input);
this._valueDisplayWrapper.appendChild(this._valueDisplay);
this.appendChild(this._valueDisplayWrapper);
}
}
attributeChangedCallback(name: string, oldValue: string, newValue: string | null) {
if (this._ignoreChange) return;
if (newValue === null) {
@@ -65,15 +75,15 @@ class RangeInputElement extends HTMLElement {
@bind
private _update() {
const value = parseFloat(this.value || '0');
const min = parseFloat(this.min || '0');
const max = parseFloat(this.max || '100');
const labelPrecision = parseFloat(this.labelPrecision || '0');
const value = Number(this.value) || 0;
const min = Number(this.min) || 0;
const max = Number(this.max) || 100;
const labelPrecision = Number(this.labelPrecision) || getPrescision(this.step) || 0;
const percent = 100 * (value - min) / (max - min);
const displayValue = labelPrecision ? value.toPrecision(labelPrecision) :
const displayValue = labelPrecision ? value.toFixed(labelPrecision) :
Math.round(value).toString();
this._valueDisplay.textContent = displayValue;
this._valueDisplay!.textContent = displayValue;
this.style.setProperty('--value-percent', percent + '%');
this.style.setProperty('--value-width', '' + displayValue.length);
}