shoelace/src/components/image-comparer/image-comparer.ts

138 wiersze
4.4 KiB
TypeScript
Czysty Zwykły widok Historia

import { LitElement, html, property, query, unsafeCSS } from 'lit-element';
2021-03-06 17:01:39 +00:00
import { styleMap } from 'lit-html/directives/style-map';
import { event, EventEmitter, tag, watch } from '../../internal/decorators';
2021-02-26 14:09:13 +00:00
import styles from 'sass:./image-comparer.scss';
import { clamp } from '../../internal/math';
2020-08-21 21:27:11 +00:00
/**
* @since 2.0
2020-12-09 13:17:49 +00:00
* @status stable
2020-08-21 21:27:11 +00:00
*
2021-02-26 14:09:13 +00:00
* @dependency sl-icon
*
2020-08-24 13:32:39 +00:00
* @slot before - The before image, an `<img>` or `<svg>` element.
* @slot after - The after image, an `<img>` or `<svg>` element.
2021-01-25 13:56:59 +00:00
* @slot handle-icon - The icon used inside the handle.
2020-08-24 13:32:39 +00:00
*
2020-08-21 21:27:11 +00:00
* @part base - The component's base wrapper.
* @part before - The container that holds the "before" image.
* @part after - The container that holds the "after" image.
* @part divider - The divider that separates the images.
* @part handle - The handle that the user drags to expose the after image.
*/
@tag('sl-image-comparer')
2021-03-06 17:01:39 +00:00
export class SlImageComparer extends LitElement {
static styles = unsafeCSS(styles);
2020-08-21 21:27:11 +00:00
2021-03-06 17:01:39 +00:00
@query('.image-comparer') base: HTMLElement;
@query('.image-comparer__handle') handle: HTMLElement;
2020-08-21 21:27:11 +00:00
/** The position of the divider as a percentage. */
2021-03-06 17:01:39 +00:00
@property({ type: Number, reflect: true }) position = 50;
@event('sl-change') slChange: EventEmitter<void>;
2020-08-21 21:27:11 +00:00
handleDrag(event: any) {
const { width } = this.base.getBoundingClientRect();
function drag(event: any, container: HTMLElement, onMove: (x: number, y: number) => void) {
const move = (event: any) => {
const dims = container.getBoundingClientRect();
2021-02-26 14:09:13 +00:00
const defaultView = container.ownerDocument.defaultView!;
const offsetX = dims.left + defaultView.pageXOffset;
const offsetY = dims.top + defaultView.pageYOffset;
2020-08-21 21:27:11 +00:00
const x = (event.changedTouches ? event.changedTouches[0].pageX : event.pageX) - offsetX;
const y = (event.changedTouches ? event.changedTouches[0].pageY : event.pageY) - offsetY;
onMove(x, y);
};
// Move on init
move(event);
const stop = () => {
document.removeEventListener('mousemove', move);
document.removeEventListener('touchmove', move);
document.removeEventListener('mouseup', stop);
document.removeEventListener('touchend', stop);
};
document.addEventListener('mousemove', move);
document.addEventListener('touchmove', move);
document.addEventListener('mouseup', stop);
document.addEventListener('touchend', stop);
}
this.handle.focus();
event.preventDefault();
drag(event, this.base, x => {
2021-03-06 17:01:39 +00:00
this.position = Number(clamp((x / width) * 100, 0, 100).toFixed(2));
2020-08-21 21:27:11 +00:00
});
}
handleKeyDown(event: KeyboardEvent) {
if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
const incr = event.shiftKey ? 10 : 1;
let newPosition = this.position;
event.preventDefault();
if (event.key === 'ArrowLeft') newPosition = newPosition - incr;
if (event.key === 'ArrowRight') newPosition = newPosition + incr;
if (event.key === 'Home') newPosition = 0;
if (event.key === 'End') newPosition = 100;
newPosition = clamp(newPosition, 0, 100);
this.position = newPosition;
}
}
2021-03-06 19:39:48 +00:00
@watch('position')
handlePositionChange() {
this.slChange.emit();
}
2020-08-21 21:27:11 +00:00
render() {
2021-02-26 14:09:13 +00:00
return html`
2021-03-06 17:01:39 +00:00
<div part="base" class="image-comparer" @keydown=${this.handleKeyDown}>
2020-08-21 21:27:11 +00:00
<div class="image-comparer__image">
<div part="before" class="image-comparer__before">
2021-03-06 17:01:39 +00:00
<slot name="before"></slot>
2020-08-21 21:27:11 +00:00
</div>
<div
part="after"
class="image-comparer__after"
2021-03-06 17:01:39 +00:00
style=${styleMap({ clipPath: `inset(0 ${100 - this.position}% 0 0)` })}
2020-08-21 21:27:11 +00:00
>
2021-03-06 17:01:39 +00:00
<slot name="after"></slot>
2020-08-21 21:27:11 +00:00
</div>
</div>
<div
part="divider"
class="image-comparer__divider"
2021-03-06 17:01:39 +00:00
style=${styleMap({ left: this.position + '%' })}
@mousedown=${this.handleDrag}
@touchstart=${this.handleDrag}
2020-08-21 21:27:11 +00:00
>
<div
part="handle"
class="image-comparer__handle"
2020-08-24 13:22:52 +00:00
role="scrollbar"
2021-03-06 17:01:39 +00:00
aria-valuenow=${this.position}
2020-08-21 21:27:11 +00:00
aria-valuemin="0"
aria-valuemax="100"
2021-02-26 14:09:13 +00:00
tabindex="0"
2020-08-21 21:27:11 +00:00
>
2021-01-25 13:56:59 +00:00
<slot name="handle-icon">
2021-03-06 17:01:39 +00:00
<sl-icon class="image-comparer__handle-icon" name="grip-vertical"></sl-icon>
2021-01-25 13:56:59 +00:00
</slot>
2020-08-21 21:27:11 +00:00
</div>
</div>
</div>
2021-02-26 14:09:13 +00:00
`;
2020-08-21 21:27:11 +00:00
}
}