import HTMLElement from '../html-element/HTMLElement.js'; import IHTMLImageElement from './IHTMLImageElement.js'; import * as PropertySymbol from '../../PropertySymbol.js'; /** * HTML Image Element. * * Reference: * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement. */ export default class HTMLImageElement extends HTMLElement implements IHTMLImageElement { public [PropertySymbol.tagName] = 'IMG'; public [PropertySymbol.complete] = false; public [PropertySymbol.naturalHeight] = 0; public [PropertySymbol.naturalWidth] = 0; public [PropertySymbol.loading] = 'auto'; public [PropertySymbol.x] = 0; public [PropertySymbol.y] = 0; /** * Returns complete. * * @returns Complete. */ public get complete(): boolean { return this[PropertySymbol.complete]; } /** * Returns natural height. * * @returns Natural height. */ public get naturalHeight(): number { return this[PropertySymbol.naturalHeight]; } /** * Returns natural width. * * @returns Natural width. */ public get naturalWidth(): number { return this[PropertySymbol.naturalWidth]; } /** * Returns loading. * * @returns Loading. */ public get loading(): string { return this[PropertySymbol.loading]; } /** * Returns x. */ public get x(): number { return this[PropertySymbol.x]; } /** * Returns y. */ public get y(): number { return this[PropertySymbol.y]; } /** * Returns decoding. * * @returns Decoding. */ public get decoding(): string { return this.getAttribute('decoding') || 'auto'; } /** * Sets decoding. * * @param decoding Decoding. */ public set decoding(decoding: string) { this.setAttribute('decoding', decoding); } /** * Returns cross origin. * * @returns Cross origin. */ public get crossOrigin(): string | null { return this.getAttribute('crossOrigin'); } /** * Sets cross origin. * * @param crossOrigin Cross origin. */ public set crossOrigin(crossOrigin: string | null) { if (crossOrigin === 'anonymous' || crossOrigin === 'use-credentials') { this.setAttribute('crossOrigin', crossOrigin); } } /** * Returns alt. * * @returns Alt. */ public get alt(): string { return this.getAttribute('alt') || ''; } /** * Sets alt. * * @param alt Alt. */ public set alt(alt: string) { this.setAttribute('alt', alt); } /** * Returns current src. * * @returns Current src. */ public get currentSrc(): string { return this.src; } /** * Returns width. * * @returns Width. */ public get width(): number { const width = this.getAttribute('width'); return width !== null ? Number(width) : 0; } /** * Sets width. * * @param width Width. */ public set width(width: number) { this.setAttribute('width', String(width)); } /** * Returns height. * * @returns Height. */ public get height(): number { const height = this.getAttribute('height'); return height !== null ? Number(height) : 0; } /** * Sets height. * * @param height Height. */ public set height(height: number) { this.setAttribute('height', String(height)); } /** * Returns is map. * * @returns Is map. */ public get isMap(): boolean { return this.getAttribute('ismap') !== null; } /** * Sets is map. * * @param ismap Is map. */ public set isMap(isMap: boolean) { if (!isMap) { this.removeAttribute('ismap'); } else { this.setAttribute('ismap', ''); } } /** * Returns referrer policy. * * @returns Referrer policy. */ public get referrerPolicy(): string { return this.getAttribute('referrerpolicy') || ''; } /** * Sets referrer policy. * * @param referrerPolicy Referrer policy. */ public set referrerPolicy(referrerPolicy: string) { this.setAttribute('referrerpolicy', referrerPolicy); } /** * Returns sizes. * * @returns Sizes. */ public get sizes(): string { return this.getAttribute('sizes') || ''; } /** * Sets sizes. * * @param sizes Sizes. */ public set sizes(sizes: string) { this.setAttribute('sizes', sizes); } /** * Returns source. * * @returns Source. */ public get src(): string { return this.getAttribute('src') || ''; } /** * Sets source. * * @param source Source. */ public set src(src: string) { this.setAttribute('src', src); } /** * Returns srcset. * * @returns Source. */ public get srcset(): string { return this.getAttribute('srcset') || ''; } /** * Sets src set. * * @param srcset Src set. */ public set srcset(srcset: string) { this.setAttribute('srcset', srcset); } /** * Returns use map. * * @returns Use map. */ public get useMap(): string { return this.getAttribute('usemap') || ''; } /** * Sets is map. * * @param useMap Is map. */ public set useMap(useMap: string) { this.setAttribute('usemap', useMap); } /** * The decode() method of the HTMLImageElement interface returns a Promise that resolves when the image is decoded and it is safe to append the image to the DOM. * * @returns Promise. */ public decode(): Promise { return Promise.resolve(); } /** * Clones a node. * * @override * @param [deep=false] "true" to clone deep. * @returns Cloned node. */ public cloneNode(deep = false): IHTMLImageElement { return super.cloneNode(deep); } }