kopia lustrzana https://github.com/shoelace-style/shoelace
46 wiersze
1.2 KiB
TypeScript
46 wiersze
1.2 KiB
TypeScript
import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
|
|
import styles from 'sass:./responsive-embed.scss';
|
|
|
|
/**
|
|
* @since 2.0
|
|
* @status stable
|
|
*
|
|
* @part base - The component's base wrapper.
|
|
*/
|
|
@customElement('sl-responsive-embed')
|
|
export class SlResponsiveEmbed extends LitElement {
|
|
static styles = unsafeCSS(styles);
|
|
|
|
@query('.responsive-embed') base: HTMLElement;
|
|
|
|
/**
|
|
* The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`. Ratios not in
|
|
* this format will be ignored.
|
|
*/
|
|
@property({ attribute: 'aspect-ratio' }) aspectRatio = '16:9';
|
|
|
|
update(changedProps: Map<string, any>) {
|
|
super.update(changedProps);
|
|
|
|
if (changedProps.has('aspectRatio')) {
|
|
this.updateAspectRatio();
|
|
}
|
|
}
|
|
|
|
updateAspectRatio() {
|
|
const split = this.aspectRatio.split(':');
|
|
const x = parseInt(split[0]);
|
|
const y = parseInt(split[1]);
|
|
|
|
this.base.style.paddingBottom = x && y ? `${(y / x) * 100}%` : '';
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<div part="base" class="responsive-embed">
|
|
<slot @slotchange=${() => this.updateAspectRatio()}></slot>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|