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

(Almost the) rest of the redesign (#880)

Browse Source 
* Load demo img

* two-up styles

* Back button

* Button size tweak

* Move back btn

* Move options and back button into a single grid

* Simpler max height

* Responsive grid

* Feed index into options

* Option heading themes

* More option styles

* Changing checkbox position

* Theme range input & use transforms

* Range input underline theme

* Checkbox color

* Add toggle

* Reorder

* Arrow revealer

* Round two-up thumb

* Don't bundle CSS urls starting #

* Results in progress

* Fix Safari bugs

* Download blobs

* Loading spinner

* Hook up download button

* Different style for original image

* Mobile design for results

* Remove demo auto-loader

* Remove redundant colors

* Sticky headings
This commit is contained in:
Jake Archibald
2020-12-09 11:47:23 +00:00
committed by GitHub
parent 12889d9d50
commit fec826b106
36 changed files with 903 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/index.ts
View File

@@ -1,4 +1,3 @@
import PointerTracker from 'pointer-tracker';
import * as style from './style.css';
import 'add-css:./style.css';
@@ -28,7 +27,7 @@ function getPrescision(value: string): number {
class RangeInputElement extends HTMLElement {
private _input: HTMLInputElement;
private _valueDisplay?: HTMLDivElement;
private _valueDisplay?: HTMLSpanElement;
private _ignoreChange = false;
static get observedAttributes() {
@@ -41,15 +40,22 @@ class RangeInputElement extends HTMLElement {
this._input.type = 'range';
this._input.className = style.input;
const tracker = new PointerTracker(this._input, {
start: (): boolean => {
if (tracker.currentPointers.length !== 0) return false;
this._input.classList.add(style.touchActive);
return true;
},
end: () => {
let activePointer: number | undefined;
// Not using pointer-tracker here due to https://bugs.webkit.org/show_bug.cgi?id=219636.
this.addEventListener('pointerdown', (event) => {
if (activePointer) return;
activePointer = event.pointerId;
this._input.classList.add(style.touchActive);
const pointerUp = (event: PointerEvent) => {
if (event.pointerId !== activePointer) return;
activePointer = undefined;
this._input.classList.remove(style.touchActive);
},
window.removeEventListener('pointerup', pointerUp);
window.removeEventListener('pointercancel', pointerUp);
};
window.addEventListener('pointerup', pointerUp);
window.addEventListener('pointercancel', pointerUp);
});
for (const event of RETARGETED_EVENTS) {
@@ -66,13 +72,13 @@ class RangeInputElement extends HTMLElement {
this.innerHTML =
`<div class="${style.thumbWrapper}">` +
`<div class="${style.thumb}"></div>` +
`<div class="${style.valueDisplay}"></div>` +
`<div class="${style.valueDisplay}"><svg width="32" height="62"><path d="M27.3 27.3C25 29.6 17 35.8 17 43v3c0 3 2.5 5 3.2 5.8a6 6 0 1 1-8.5 0C12.6 51 15 49 15 46v-3c0-7.2-8-13.4-10.3-15.7A16 16 0 0 1 16 0a16 16 0 0 1 11.3 27.3z"/></svg><span></span></div>` +
'</div>';
this.insertBefore(this._input, this.firstChild);
this._valueDisplay = this.querySelector(
'.' + style.valueDisplay,
) as HTMLDivElement;
'.' + style.valueDisplay + ' > span',
) as HTMLSpanElement;
// Set inline styles (this is useful when used with frameworks which might clear inline styles)
this._update();
}