Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | /** @import {StrictlyParseSelector} from "typed-query-selector/parser.d.ts" */
/** @typedef {import('../web-component/image-comparison.element.js').ImageComparisonElement} ImageComparisonElement */
export const containerEl = shadowQuery('div.container')
export const diffCanvasEl = shadowQuery('canvas.diff-image')
export const magnifierTooltipEl = shadowQuery('div.glass-magnifier-tooltip')
export const magnifierColorDiffInfoEl = shadowQuery('div.color-diff-info')
export const magnifierCanvasEl = shadowQuery('canvas.glass-magnifier')
export const toggleGridViewEl = shadowQuery('input.toggle-grid-view')
export const magnifierColorBoxesEl = shadowQueryAll('div.color-box')
export const isDivCanvasEl = elementMatcher('canvas.diff-image')
export const isImageComparisonElementSymbol = Symbol('its-an-image-comparison')
/**
* Gets hots DynamicSelect element from a shadow DOM element
*
* @param {EventTarget | null} target - target element in shadow DOM
* @returns {ImageComparisonElement} host element
*/
export function getHostImageComparisonElement (target) {
if (!(target instanceof Element)) { throw Error('target is not an element') }
const rootNode = target.getRootNode()
if (!(rootNode instanceof ShadowRoot)) { throw Error('target is not inside a shadow dom') }
const host = rootNode.host
if (!isImageComparisonElement(host)) { throw Error('target is not inside a image comparison element shadow dom') }
return host
}
/**
* @template {string} T
* @param {T} selector - css selector
* @returns {(imageComparisonElement: ImageComparisonElement) => StrictlyParseSelector<T, Element>} type guarded query function
*/
function shadowQuery (selector) {
return (imageComparisonElement) => {
const result = imageComparisonElement.shadowRoot?.querySelector(selector)
if (!result) { throw Error(`Error: no ${JSON.stringify(selector)} found in image comparison element shadow DOM`) }
return result
}
}
/**
* @template {string} T
* @param {T} selector - css selector
* @returns {(imageComparisonElement: ImageComparisonElement) => NodeListOf<StrictlyParseSelector<T, Element>>} type guarded query function
*/
function shadowQueryAll (selector) {
return (imageComparisonElement) => {
const result = imageComparisonElement.shadowRoot?.querySelectorAll(selector)
if (result == null) { throw Error('shadow is not yet defined') }
return result
}
}
/**
* @template {string} T
* @param {T} selector - selector to match
*/
function elementMatcher (selector) {
/**
* @param {EventTarget | null} element - target element
* @returns {element is StrictlyParseSelector<T, Element>} type guarded element matcher
*/
return function (element) {
return element instanceof Element && element.matches(selector)
}
}
/**
* @param {Node} node target DOM Node
* @returns {node is ImageComparisonElement} true if node is a DynamicSelect web component, false otherwise
*/
export function isImageComparisonElement (node) {
return node ? /** @type {ImageComparisonElement} */(node)[isImageComparisonElementSymbol] === true : false
}
|