@stencil/core/screenshot/compare/build/p-37sbvn89.entry.js

A Compiler for Web Components and Progressive Web Apps

import{r as e,h as i}from"./p-c001178f.js";import{g as s}from"./p-7ebf1169.js";function t(e,i){const s=Object.assign({},e,i),t=Object.keys(s),a=[];return t.map(e=>{const i=s[e];!0===i?a.push(e):null!=i&&""!==i&&a.push(e+"-"+i)}),window.location.hash=a.sort().join(";"),s}class a{constructor(i){e(this,i),this.appSrcUrl="",this.imagesUrl="/data/images/",this.buildsUrl="/data/builds/",this.comparesUrl="/data/compares/",this.jsonpUrl=null,this.diffs=[]}async componentWillLoad(){this.match&&this.match.params.buildIdA&&this.match.params.buildIdB&&await this.loadBuilds(this.match.params.buildIdA,this.match.params.buildIdB),this.diffs=await function(e,i,t){const a=[];return i&&t?(t.screenshots.forEach(i=>{a.push({id:i.id,desc:i.desc,testPath:i.testPath,imageA:null,imageUrlA:null,imageB:i.image,imageUrlB:`${e}${i.image}`,identical:!1,comparable:!1,mismatchedPixels:null,width:i.width,height:i.height,deviceScaleFactor:i.deviceScaleFactor,device:i.device||i.userAgent,show:!1,hasIntersected:!1,threshold:"number"==typeof i.threshold?i.threshold:.05})}),i.screenshots.forEach(i=>{const s=a.find(e=>e.id===i.id);s&&(s.imageA=i.image,s.imageUrlA=`${e}${i.image}`)}),a.forEach(e=>{if(e.comparable=null!=e.imageA&&null!=e.imageB,e.identical=e.comparable&&e.imageA===e.imageB,e.identical)e.mismatchedPixels=0;else{const i=s(e.imageA,e.imageB,e.threshold);"number"==typeof i&&(e.mismatchedPixels=i,0===e.mismatchedPixels&&(e.identical=!0))}}),a):a}(this.imagesUrl,this.a,this.b),this.filter=function(){const e={},i=location.hash.replace("#","");return""!==i&&i.split(";").forEach(i=>{const s=i.split("-");e[s[0]]=!(s.length>1)||s[1]}),e}(),this.updateDiffs()}componentDidLoad(){if("IntersectionObserver"in window){const e={root:document.querySelector(".scroll-y"),rootMargin:"1200px"},i=new IntersectionObserver(e=>{let i=!1;e.forEach(e=>{if(e.isIntersecting){const s=this.diffs.find(i=>e.target.id===`d-${i.id}`);s&&(s.hasIntersected=!0,i=!0)}}),i&&(window.requestIdleCallback?window.requestIdleCallback(()=>{this.updateDiffs()}):window.requestAnimationFrame(()=>{this.updateDiffs()}))},e),s=document.querySelectorAll("compare-row");for(let e=0;e<s.length;e++)i.observe(s[e])}else this.diffs.forEach(e=>{e.hasIntersected=!0}),this.updateDiffs();this.filter&&this.filter.diff&&this.navToDiff(this.filter.diff)}async loadBuilds(e,i){let s=`${this.buildsUrl}${e}.json`;"master"===e&&(s+=`?ts=${Date.now()}`);let t=`${this.buildsUrl}${i}.json`;"master"===i&&(t+=`?ts=${Date.now()}`);const a=await Promise.all([fetch(s),fetch(t)]),o=await a[0],d=await a[1];o.ok&&d.ok&&(this.a=await o.json(),this.b=await d.json())}filterChange(e){this.filter=t(this.filter,e.detail),this.updateDiffs()}diffNavChange(e){const i=e.detail;this.filter=t(this.filter,{diff:i}),this.updateDiffs(),this.navToDiff(i)}navToDiff(e){const i=document.getElementById(`d-${e}`),s=document.querySelector(".scroll-y");i&&s&&(s.scrollTop=i.offsetTop-84)}compareLoaded(e){const i=e.detail,s=this.diffs.find(e=>e.id===i.id);s&&(s.mismatchedPixels=i.mismatchedPixels),this.updateDiffs()}updateDiffs(){var e;this.diffs=(e=this.filter,this.diffs.map(i=>(i=Object.assign({},i),function(e,i){const s=!e.device||e.device===i.device,t=!e.search||i.desc.includes(e.search);let a=!0;return e.diff&&e.diff===i.id?a=!0:e.mismatch?null!=i.mismatchedPixels&&"all"!==e.mismatch&&(a=parseInt(e.mismatch,10)<i.mismatchedPixels):a=i.mismatchedPixels>0||null==i.mismatchedPixels,i.show=s&&t&&a,i}(e,i))).sort((e,i)=>e.mismatchedPixels>i.mismatchedPixels?-1:e.mismatchedPixels<i.mismatchedPixels?1:e.desc.toLowerCase()<i.desc.toLowerCase()?-1:e.desc.toLowerCase()>i.desc.toLowerCase()?1:e.device.toLowerCase()<i.device.toLowerCase()?-1:e.device.toLowerCase()>i.device.toLowerCase()?1:0))}render(){return[i("compare-header",{diffs:this.diffs,filter:this.filter,appSrcUrl:this.appSrcUrl}),i("section",{class:"scroll-x"},i("compare-thead",{a:this.a,b:this.b,diffs:this.diffs}),i("section",{class:"scroll-y"},i("compare-table",null,i("compare-tbody",null,this.diffs.map(e=>i("compare-row",{key:e.id,aId:this.a.id,bId:this.b.id,id:"d-"+e.id,show:e.show,hidden:!e.show,imagesUrl:this.imagesUrl,jsonpUrl:this.jsonpUrl,diff:e}))))))]}}export{a as screenshot_compare};