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

Range bubble now behaves properly on mobile

Browse Source
This commit is contained in:
Jake Archibald
2018-10-28 15:52:41 +00:00
parent c125af564a
commit 849441f23a
2 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
import { bind } from '../../lib/initial-util'; import { bind } from '../../lib/initial-util';
import * as style from './styles.css'; import * as style from './styles.css';
import { PointerTracker, Pointer } from '../../lib/PointerTracker';
const RETARGETED_EVENTS = ['focus', 'blur']; const RETARGETED_EVENTS = ['focus', 'blur'];
const UPDATE_EVENTS = ['input', 'change']; const UPDATE_EVENTS = ['input', 'change'];
@@ -26,6 +27,17 @@ class RangeInputElement extends HTMLElement {
this._input.type = 'range'; this._input.type = 'range';
this._input.className = style.input; 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: () => {
this._input.classList.remove(style.touchActive);
},
});
for (const event of RETARGETED_EVENTS) { for (const event of RETARGETED_EVENTS) {
this._input.addEventListener(event, this._retargetEvent, true); this._input.addEventListener(event, this._retargetEvent, true);
} }

4
src/custom-els/RangeInput/styles.css
View File

@@ -84,11 +84,11 @@ range-input::before {
overflow: hidden; overflow: hidden;
} }
.input:active + .thumb-wrapper .value-display { .touch-active + .thumb-wrapper .value-display {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
} }
.input:active + .thumb-wrapper .thumb { .touch-active + .thumb-wrapper .thumb {
box-shadow: 0 1px 3px rgba(0,0,0,0.5); box-shadow: 0 1px 3px rgba(0,0,0,0.5);
} }