{"version":3,"file":"score-image.js","sources":["../../../../src/components/score/score-image/score-image.ts"],"sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { OutlineElement } from '../../base/outline-element/outline-element';\nimport { customElement } from 'lit/decorators.js';\n\n/**\n * The Score image component\n * @element score-image\n * @slot - default\n */\n@customElement('score-image')\nexport class scoreImage extends OutlineElement {\n /**\n * From the spec (http://www.w3.org/TR/cssom-view/#dom-element-clientwidth)\n *\n * The clientWidth attribute must run these steps:\n * If the element has no associated CSS layout box or if the CSS layout box is inline, return zero.\n *\n * :host (parent of img) is given display: block, so it has a layout box\n */\n static styles = css`\n :host {\n display: block;\n height: 100%;\n }\n `;\n\n firstUpdated() {\n this.resizer();\n }\n\n // code adopted to TS from easy_responsive_images JS file - http://git.drupalcode.org/project/easy_responsive_images/-/blob/1.3.x/js/resizer.js\n resizer() {\n // Fetch all images containing a \"data-srcset\" attribute.\n const images = this.querySelectorAll(\n 'img[data-srcset]'\n ) as NodeListOf;\n\n // Find the best suitable image to display.\n const updateImage = function (image: HTMLImageElement) {\n const imgWidth = Math.floor(image.clientWidth);\n const parentWidth = Math.floor(\n (image.parentNode as HTMLElement).clientWidth\n );\n const availableWidth = parentWidth > imgWidth ? parentWidth : imgWidth;\n const attrWidth = image.getAttribute('width');\n //const attrHeight = image.getAttribute('height');\n const sources = image.getAttribute('data-srcset')?.split(',');\n const currentSrc = image.getAttribute('src');\n\n // If the selected image is already bigger than the available width,\n // we do not update the image.\n if (attrWidth && +attrWidth > availableWidth) {\n return;\n }\n\n // Find the best matching source based on actual image space.\n let source!: string;\n let responsiveImgPath!: string;\n let responsiveImgWidth!: string;\n\n for (source of sources!) {\n const array = source.split(' ');\n responsiveImgPath = array[0];\n responsiveImgWidth = array[1].slice(0, -1);\n if (availableWidth < +responsiveImgWidth) {\n break;\n }\n }\n\n if (responsiveImgPath === currentSrc) {\n return;\n }\n\n // Clear the image src attribute to force the image to update and work\n // around browser caching issues.\n image.src = '';\n\n // Update the \"src\" with the new image and also set the \"width\"\n // attribute to easily check if we need a new image after resize.\n image.src = responsiveImgPath;\n image.setAttribute('width', responsiveImgWidth);\n image.setAttribute('height', '100%');\n\n // Interpolate height from new width to prevent layout shift\n // if (attrWidth && attrHeight) {\n // image.setAttribute(\n // 'height',\n // Math.round(\n // (parseInt(responsiveImgWidth) * parseInt(attrHeight)) /\n // parseInt(attrWidth)\n // ).toString()\n // );\n // }\n\n // easy_responsive_images sets property. We need to either\n // update it to the natural image height if available, or remove the\n // property entirely if not available.\n // const naturalImageHeight = image.naturalHeight;\n // if (naturalImageHeight > 0) {\n // image.setAttribute('height', naturalImageHeight.toString());\n // } else {\n // image.removeAttribute('height');\n // }\n // image.removeAttribute('height');\n\n // Update the image width/height onload to make it easier for the\n // browser to show the image.\n image.onload = function () {\n const onloadImage = this as HTMLImageElement;\n onloadImage.setAttribute('width', Math.floor(onloadImage.width) + '');\n };\n };\n\n // Create a ResizeObserver to update the image \"src\" attribute when its\n // parent container resizes.\n const observer = new ResizeObserver(entries => {\n for (const entry of entries) {\n const images = entry.target.querySelectorAll(\n 'img[data-srcset]'\n ) as NodeListOf;\n images.forEach(image => {\n updateImage(image);\n });\n }\n });\n\n // Attach the ResizeObserver to the image containers.\n images.forEach(image => {\n updateImage(image);\n observer.observe(image.parentNode as HTMLElement);\n });\n }\n\n render(): TemplateResult {\n return html` `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'score-image': scoreImage;\n }\n}\n"],"names":["scoreImage","OutlineElement","firstUpdated","this","resizer","images","querySelectorAll","updateImage","image","imgWidth","Math","floor","clientWidth","parentWidth","parentNode","availableWidth","attrWidth","getAttribute","sources","_a","split","currentSrc","source","responsiveImgPath","responsiveImgWidth","array","slice","src","setAttribute","onload","width","observer","ResizeObserver","entries","entry","target","forEach","observe","render","html","styles","css","__decorate","customElement"],"mappings":"owBAUO,IAAMA,EAAN,cAAyBC,EAgB9BC,eACEC,KAAKC,SACN,CAGDA,UAEE,MAAMC,EAASF,KAAKG,iBAClB,oBAIIC,EAAc,SAAUC,SAC5B,MAAMC,EAAWC,KAAKC,MAAMH,EAAMI,aAC5BC,EAAcH,KAAKC,MACtBH,EAAMM,WAA2BF,aAE9BG,EAAiBF,EAAcJ,EAAWI,EAAcJ,EACxDO,EAAYR,EAAMS,aAAa,SAE/BC,EAA6C,QAAnCC,EAAAX,EAAMS,aAAa,sBAAgB,IAAAE,OAAA,EAAAA,EAAAC,MAAM,KACnDC,EAAab,EAAMS,aAAa,OAItC,GAAID,IAAcA,EAAYD,EAC5B,OAIF,IAAIO,EACAC,EACAC,EAEJ,IAAKF,KAAUJ,EAAU,CACvB,MAAMO,EAAQH,EAAOF,MAAM,KAG3B,GAFAG,EAAoBE,EAAM,GAC1BD,EAAqBC,EAAM,GAAGC,MAAM,GAAI,GACpCX,GAAkBS,EACpB,KAEH,CAEGD,IAAsBF,IAM1Bb,EAAMmB,IAAM,GAIZnB,EAAMmB,IAAMJ,EACZf,EAAMoB,aAAa,QAASJ,GAC5BhB,EAAMoB,aAAa,SAAU,QA0B7BpB,EAAMqB,OAAS,WACO1B,KACRyB,aAAa,QAASlB,KAAKC,MADnBR,KACqC2B,OAAS,GACpE,EACF,EAIMC,EAAW,IAAIC,gBAAeC,IAClC,IAAK,MAAMC,KAASD,EAAS,CACZC,EAAMC,OAAO7B,iBAC1B,oBAEK8B,SAAQ5B,IACbD,EAAYC,EAAM,GAErB,KAIHH,EAAO+B,SAAQ5B,IACbD,EAAYC,GACZuB,EAASM,QAAQ7B,EAAMM,WAA0B,GAEpD,CAEDwB,SACE,OAAOC,CAAI,iBACZ,GApHMvC,EAAMwC,OAAGC,CAAG;;;;;IATRzC,EAAU0C,EAAA,CADtBC,EAAc,gBACF3C"} " class="hidden">昆明卫生职业学院