@automattic/jetpack-image-guide 0.5.14 → 0.5.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +5 -0
- package/build/index.js +1 -1
- package/package.json +2 -6
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [0.5.15] - 2025-01-06
|
|
9
|
+
### Changed
|
|
10
|
+
- Updated package dependencies. [#40797]
|
|
11
|
+
|
|
8
12
|
## [0.5.14] - 2024-11-28
|
|
9
13
|
### Changed
|
|
10
14
|
- Updated package dependencies. [#40060]
|
|
@@ -136,6 +140,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
136
140
|
### Removed
|
|
137
141
|
- Minor package.json change - removing private entry.
|
|
138
142
|
|
|
143
|
+
[0.5.15]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.14...v0.5.15
|
|
139
144
|
[0.5.14]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.13...v0.5.14
|
|
140
145
|
[0.5.13]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.12...v0.5.13
|
|
141
146
|
[0.5.12]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.11...v0.5.12
|
package/build/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
class t{constructor(t,e,n=null){this.node=t,this.getURLCallback=e,this.fetch=null!=n?n:window.fetch.bind(window)}getURL(){return this.getURLCallback(this.node)}getSizeOnPage(){const{width:t,height:e}=this.node.getBoundingClientRect();return{width:Math.round(t),height:Math.round(e)}}async getFileSize(t){const[e,{width:n,height:i}]=await Promise.all([this.fetchFileWeight(t),this.fetchFileDimensions(t)]);return{width:n,height:i,weight:e}}getPotentialSavings(t,e){const n=this.getOversizedRatio(t,e);return n<=1?null:Math.round(t.weight-t.weight/n)}getExpectedSize(t){const e=window.devicePixelRatio||1;return{width:Math.round(t.width*e),height:Math.round(t.height*e)}}getOversizedRatio(t,e){if(0===t.width||0===t.height)return 1;const{width:n,height:i}=this.getExpectedSize(e);return 0===n||0===i?1:t.width*t.height/(n*i)}async fetchFileWeight(t){const e=await this.fetch(t);return e.ok?parseInt(e.headers.get("content-length"),10)/1024:(console.log(`Can't get image size for ${t} likely due to a CORS error.`),-1)}async fetchFileDimensions(t){const e=new Image;return e.src=t,new Promise(((t,n)=>{e.onload=()=>{t({width:Math.round(e.width),height:Math.round(e.height)})},e.onerror=()=>{n("Unable to load image.")}}))}async isImageTiny(){try{const t=65,e=await this.fetchFileDimensions(this.getURL());return e.width<t||e.height<t}catch(t){return!0}}}function e(){}const n=t=>t;function i(t){return t()}function o(){return Object.create(null)}function r(t){t.forEach(i)}function s(t){return"function"==typeof t}function c(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}let l;function a(t,e){return t===e||(l||(l=document.createElement("a")),l.href=e,t===l.href)}function u(t,...n){if(null==t){for(const t of n)t(void 0);return e}const i=t.subscribe(...n);return i.unsubscribe?()=>i.unsubscribe():i}function d(t){let e;return u(t,(t=>e=t))(),e}function h(t,e,n){t.$$.on_destroy.push(u(e,n))}function f(t,e,n,i){return t[1]&&i?function(t,e){for(const n in e)t[n]=e[n];return t}(n.ctx.slice(),t[1](i(e))):n.ctx}function p(t){const e="string"==typeof t&&t.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);return e?[parseFloat(e[1]),e[2]||"px"]:[t,"px"]}const g="undefined"!=typeof window;let m=g?()=>window.performance.now():()=>Date.now(),$=g?t=>requestAnimationFrame(t):e;const v=new Set;function w(t){v.forEach((e=>{e.c(t)||(v.delete(e),e.f())})),0!==v.size&&$(w)}function y(t){let e;return 0===v.size&&$(w),{promise:new Promise((n=>{v.add(e={c:t,f:n})})),abort(){v.delete(e)}}}function b(t,e){t.appendChild(e)}function x(t){if(!t)return document;const e=t.getRootNode?t.getRootNode():t.ownerDocument;return e&&e.host?e:t.ownerDocument}function k(t){const e=S("style");return e.textContent="/* empty */",function(t,e){b(t.head||t,e),e.sheet}(x(t),e),e.sheet}function _(t,e,n){t.insertBefore(e,n||null)}function z(t){t.parentNode&&t.parentNode.removeChild(t)}function S(t){return document.createElement(t)}function C(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function E(t){return document.createTextNode(t)}function L(){return E(" ")}function P(){return E("")}function M(t,e,n,i){return t.addEventListener(e,n,i),()=>t.removeEventListener(e,n,i)}function j(t,e,n){null==n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function O(t,e){e=""+e,t.data!==e&&(t.data=e)}function T(t,e,n,i){null==n?t.style.removeProperty(e):t.style.setProperty(e,n,i?"important":"")}function I(t,e,n){t.classList.toggle(e,!!n)}function R(t,e,{bubbles:n=!1,cancelable:i=!1}={}){return new CustomEvent(t,{detail:e,bubbles:n,cancelable:i})}const F=new Map;let U,A=0;function B(t,e,n,i,o,r,s,c=0){const l=16.666/i;let a="{\n";for(let t=0;t<=1;t+=l){const i=e+(n-e)*r(t);a+=100*t+`%{${s(i,1-i)}}\n`}const u=a+`100% {${s(n,1-n)}}\n}`,d=`__svelte_${function(t){let e=5381,n=t.length;for(;n--;)e=(e<<5)-e^t.charCodeAt(n);return e>>>0}(u)}_${c}`,h=x(t),{stylesheet:f,rules:p}=F.get(h)||function(t,e){const n={stylesheet:k(e),rules:{}};return F.set(t,n),n}(h,t);p[d]||(p[d]=!0,f.insertRule(`@keyframes ${d} ${u}`,f.cssRules.length));const g=t.style.animation||"";return t.style.animation=`${g?`${g}, `:""}${d} ${i}ms linear ${o}ms 1 both`,A+=1,d}function H(t,e){const n=(t.style.animation||"").split(", "),i=n.filter(e?t=>t.indexOf(e)<0:t=>-1===t.indexOf("__svelte")),o=n.length-i.length;o&&(t.style.animation=i.join(", "),A-=o,A||$((()=>{A||(F.forEach((t=>{const{ownerNode:e}=t.stylesheet;e&&z(e)})),F.clear())})))}function N(t){U=t}function D(){if(!U)throw new Error("Function called outside component initialization");return U}function W(t){D().$$.on_mount.push(t)}function V(t,e){const n=t.$$.callbacks[e.type];n&&n.slice().forEach((t=>t.call(this,e)))}const G=[],q=[];let Z=[];const K=[],X=Promise.resolve();let Y=!1;function J(t){Z.push(t)}const Q=new Set;let tt,et=0;function nt(){if(0!==et)return;const t=U;do{try{for(;et<G.length;){const t=G[et];et++,N(t),it(t.$$)}}catch(t){throw G.length=0,et=0,t}for(N(null),G.length=0,et=0;q.length;)q.pop()();for(let t=0;t<Z.length;t+=1){const e=Z[t];Q.has(e)||(Q.add(e),e())}Z.length=0}while(G.length);for(;K.length;)K.pop()();Y=!1,Q.clear(),N(t)}function it(t){if(null!==t.fragment){t.update(),r(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(J)}}function ot(){return tt||(tt=Promise.resolve(),tt.then((()=>{tt=null}))),tt}function rt(t,e,n){t.dispatchEvent(R(`${e?"intro":"outro"}${n}`))}const st=new Set;let ct;function lt(){ct={r:0,c:[],p:ct}}function at(){ct.r||r(ct.c),ct=ct.p}function ut(t,e){t&&t.i&&(st.delete(t),t.i(e))}function dt(t,e,n,i){if(t&&t.o){if(st.has(t))return;st.add(t),ct.c.push((()=>{st.delete(t),i&&(n&&t.d(1),i())})),t.o(e)}else i&&i()}const ht={duration:0};function ft(t,i,o){const r={direction:"in"};let c,l,a=i(t,o,r),u=!1,d=0;function h(){c&&H(t,c)}function f(){const{delay:i=0,duration:o=300,easing:r=n,tick:s=e,css:f}=a||ht;f&&(c=B(t,0,1,o,i,r,f,d++)),s(0,1);const p=m()+i,g=p+o;l&&l.abort(),u=!0,J((()=>rt(t,!0,"start"))),l=y((e=>{if(u){if(e>=g)return s(1,0),rt(t,!0,"end"),h(),u=!1;if(e>=p){const t=r((e-p)/o);s(t,1-t)}}return u}))}let p=!1;return{start(){p||(p=!0,H(t),s(a)?(a=a(r),ot().then(f)):f())},invalidate(){p=!1},end(){u&&(h(),u=!1)}}}function pt(t,i,o,c){let l,a=i(t,o,{direction:"both"}),u=c?0:1,d=null,h=null,f=null;function p(){f&&H(t,f)}function g(t,e){const n=t.b-u;return e*=Math.abs(n),{a:u,b:t.b,d:n,duration:e,start:t.start,end:t.start+e,group:t.group}}function $(i){const{delay:o=0,duration:s=300,easing:c=n,tick:$=e,css:v}=a||ht,w={start:m()+o,b:i};i||(w.group=ct,ct.r+=1),"inert"in t&&(i?void 0!==l&&(t.inert=l):(l=t.inert,t.inert=!0)),d||h?h=w:(v&&(p(),f=B(t,u,i,s,o,c,v)),i&&$(0,1),d=g(w,s),J((()=>rt(t,i,"start"))),y((e=>{if(h&&e>h.start&&(d=g(h,s),h=null,rt(t,d.b,"start"),v&&(p(),f=B(t,u,d.b,d.duration,0,c,a.css))),d)if(e>=d.end)$(u=d.b,1-u),rt(t,d.b,"end"),h||(d.b?p():--d.group.r||r(d.group.c)),d=null;else if(e>=d.start){const t=e-d.start;u=d.a+d.d*c(t/d.duration),$(u,1-u)}return!(!d&&!h)})))}return{run(t){s(a)?ot().then((()=>{a=a({direction:t?"in":"out"}),$(t)})):$(t)},end(){p(),d=h=null}}}function gt(t){return void 0!==t?.length?t:Array.from(t)}function mt(t){t&&t.c()}function $t(t,e,n){const{fragment:o,after_update:c}=t.$$;o&&o.m(e,n),J((()=>{const e=t.$$.on_mount.map(i).filter(s);t.$$.on_destroy?t.$$.on_destroy.push(...e):r(e),t.$$.on_mount=[]})),c.forEach(J)}function vt(t,e){const n=t.$$;null!==n.fragment&&(!function(t){const e=[],n=[];Z.forEach((i=>-1===t.indexOf(i)?e.push(i):n.push(i))),n.forEach((t=>t())),Z=e}(n.after_update),r(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function wt(t,e){-1===t.$$.dirty[0]&&(G.push(t),Y||(Y=!0,X.then(nt)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function yt(t,n,i,s,c,l,a=null,u=[-1]){const d=U;N(t);const h=t.$$={fragment:null,ctx:[],props:l,update:e,not_equal:c,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(n.context||(d?d.$$.context:[])),callbacks:o(),dirty:u,skip_bound:!1,root:n.target||d.$$.root};a&&a(h.root);let f=!1;if(h.ctx=i?i(t,n.props||{},((e,n,...i)=>{const o=i.length?i[0]:n;return h.ctx&&c(h.ctx[e],h.ctx[e]=o)&&(!h.skip_bound&&h.bound[e]&&h.bound[e](o),f&&wt(t,e)),n})):[],h.update(),f=!0,r(h.before_update),h.fragment=!!s&&s(h.ctx),n.target){if(n.hydrate){const t=function(t){return Array.from(t.childNodes)}(n.target);h.fragment&&h.fragment.l(t),t.forEach(z)}else h.fragment&&h.fragment.c();n.intro&&ut(t.$$.fragment),$t(t,n.target,n.anchor),nt()}N(d)}class bt{$$=void 0;$$set=void 0;$destroy(){vt(this,1),this.$destroy=e}$on(t,n){if(!s(n))return e;const i=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return i.push(n),()=>{const t=i.indexOf(n);-1!==t&&i.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const xt=[];function kt(t,n=e){let i;const o=new Set;function r(e){if(c(t,e)&&(t=e,i)){const e=!xt.length;for(const e of o)e[1](),xt.push(e,t);if(e){for(let t=0;t<xt.length;t+=2)xt[t][0](xt[t+1]);xt.length=0}}}function s(e){r(e(t))}return{set:r,update:s,subscribe:function(c,l=e){const a=[c,l];return o.add(a),1===o.size&&(i=n(r,s)||e),c(t),()=>{o.delete(a),0===o.size&&i&&(i(),i=null)}}}}function _t(t,n,i){const o=!Array.isArray(t),c=o?[t]:t;if(!c.every(Boolean))throw new Error("derived() expects stores as input, got a falsy value");const l=n.length<2;return a=(t,i)=>{let a=!1;const d=[];let h=0,f=e;const p=()=>{if(h)return;f();const r=n(o?d[0]:d,t,i);l?t(r):f=s(r)?r:e},g=c.map(((t,e)=>u(t,(t=>{d[e]=t,h&=~(1<<e),a&&p()}),(()=>{h|=1<<e}))));return a=!0,p(),function(){r(g),f(),a=!1}},{subscribe:kt(i,a).subscribe};var a}const zt="jetpack-boost-guide",St={active:"Active",paused:"Paused"};let Ct=localStorage.getItem(zt);Ct&&St[Ct]||(localStorage.setItem(zt,"Active"),Ct="active");const{set:Et,update:Lt,subscribe:Pt}=kt(Ct);Pt((t=>{localStorage.setItem(zt,t)}));const Mt={subscribe:Pt,set:Et,update:Lt,cycle:()=>{Lt((t=>{const e=Object.keys(St),n=e.indexOf(t);return e[(n+1)%e.length]}))}},jt=_t(Mt,(t=>St[t]));class Ot{constructor(t){this.loading=kt(!0),this.currentSrc="",this.image=t,this.node=t.node;this.url=kt(t.getURL()),this.fileSize=kt({width:0,height:0,weight:0}),this.sizeOnPage=kt({width:0,height:0}),this.potentialSavings=this.derivePotentialSavings(),this.oversizedRatio=this.deriveOversizedRatio(),this.expectedSize=this.deriveExpectedSize()}deriveOversizedRatio(){return _t([this.fileSize,this.sizeOnPage],(([t,e])=>this.image.getOversizedRatio(t,e)))}deriveExpectedSize(){return _t(this.sizeOnPage,(t=>this.image.getExpectedSize(t)))}derivePotentialSavings(){return _t([this.fileSize,this.sizeOnPage],(([t,e])=>this.image.getPotentialSavings(t,e)))}async updateDimensions(){const t=this.image.getSizeOnPage();this.sizeOnPage.set(t),await this.maybeUpdateWeight()}async maybeUpdateWeight(){if(this.image.getURL()===this.currentSrc)return;let t;this.loading.set(!0),this.currentSrc=this.image.getURL();try{t=await this.image.getFileSize(this.currentSrc)}catch(e){t={weight:-1,height:-1,width:-1}}this.url.set(this.currentSrc),this.fileSize.set(t),this.loading.set(!1)}}class Tt{static setTracksCallback(t){Tt.tracksCallback=t}static async trackImageOutcome(t){return new Promise((e=>{t.loading.subscribe((n=>{if(!n){const n=d(t.oversizedRatio),i=function(t){return t>4?"red":t>2.5?"yellow":"green"}(n),o=d(t.fileSize),r=d(t.sizeOnPage),s=d(t.expectedSize),c=d(t.potentialSavings),l=d(t.url),a={severity:i,oversized_ratio:n,file_weight:o.weight,file_width:o.width,file_height:o.height,size_on_page_width:r.width,size_on_page_height:r.height,expected_width:s.width,expected_height:s.height,potential_savings:c,image_url:l};Tt.tracksCallback("image_guide_image_outcome",{...a,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio}),e(a)}}))}))}static async trackPage(t){if(!t.length||Tt.trackingComplete)return;Tt.trackingComplete=!0;const e=t.map(Tt.trackImageOutcome),n=await Promise.all(e),i=n.reduce(((t,e)=>t+(e.potential_savings||0)),0);Tt.tracksCallback("image_guide_page_outcome",{total_potential_savings:i,red_severity_count:n.filter((t=>"red"===t.severity)).length,yellow_severity_count:n.filter((t=>"yellow"===t.severity)).length,green_severity_count:n.filter((t=>"green"===t.severity)).length,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio})}static trackInitialState(){Tt.tracksCallback("image_guide_initial_ui_state",{image_guide_state:d(Mt)})}static trackUIStateChange(){Tt.tracksCallback("image_guide_ui_state_change",{image_guide_state:d(Mt)})}}function It(t){return t.filter((t=>{if(t instanceof HTMLImageElement){if(!t.src.trim())return!1;try{if(e=t.src,new URL(e).pathname.toLowerCase().endsWith(".svg"))return!1}catch(t){return!1}return!0}var e;if(t instanceof HTMLElement){return"none"!==getComputedStyle(t).backgroundImage}return!1}))}function Rt(t){return At(t.currentSrc)?t.currentSrc:At(t.src)?t.src:null}function Ft(t){const e=getComputedStyle(t).backgroundImage.match(/url\(\s*(['"])(.*?)\1\s*\)/i),n=window.location.href.split("#")[0];return e&&e[2]&&e[2]!==n&&At(e[2])?e[2]:null}async function Ut(e,n=null){return It(e).map((e=>e instanceof HTMLImageElement?new t(e,Rt,n):e instanceof HTMLElement&&Ft(e)?new t(e,Ft):null)).filter((t=>null!==t))}function At(t){if(t.startsWith("/")){return!t.split("?")[0].endsWith(".svg")}try{const e=new URL(t);return"http:"===e.protocol||"https:"===e.protocol}catch(t){return!1}}function Bt(t){const e=1.70158;return--t*t*((e+1)*t+e)+1}function Ht(t){const e=t-1;return e*e*e+1}function Nt(t,{delay:e=0,duration:i=400,easing:o=n}={}){const r=+getComputedStyle(t).opacity;return{delay:e,duration:i,easing:o,css:t=>"opacity: "+t*r}}function Dt(t,{delay:e=0,duration:n=400,easing:i=Ht,x:o=0,y:r=0,opacity:s=0}={}){const c=getComputedStyle(t),l=+c.opacity,a="none"===c.transform?"":c.transform,u=l*(1-s),[d,h]=p(o),[f,g]=p(r);return{delay:e,duration:n,easing:i,css:(t,e)=>`\n\t\t\ttransform: ${a} translate(${(1-t)*d}${h}, ${(1-t)*f}${g});\n\t\t\topacity: ${l-u*e}`}}function Wt(t){let n,i,o,r,s;return{c(){n=S("div"),i=C("svg"),o=C("path"),r=C("path"),s=C("path"),j(o,"d","M55.4 107.8C84.3397 107.8 107.8 84.3397 107.8 55.4C107.8 26.4603 84.3397 3 55.4 3C26.4603 3 3 26.4603 3 55.4C3 84.3397 26.4603 107.8 55.4 107.8Z"),j(o,"fill",t[1]),j(r,"d","M58 46.6V97.4L84.2 46.6H58Z"),j(r,"fill","white"),j(s,"d","M52.7 64.1V13.4L26.6 64.1H52.7Z"),j(s,"fill","white"),j(i,"viewBox","0 0 110 110"),j(i,"fill","none"),j(i,"xmlns","http://www.w3.org/2000/svg"),T(n,"width",t[0]+"px"),T(n,"height",t[0]+"px"),j(n,"class","svelte-f6jc8")},m(t,e){_(t,n,e),b(n,i),b(i,o),b(i,r),b(i,s)},p(t,[e]){2&e&&j(o,"fill",t[1]),1&e&&T(n,"width",t[0]+"px"),1&e&&T(n,"height",t[0]+"px")},i:e,o:e,d(t){t&&z(n)}}}function Vt(t,e,n){let{size:i=16}=e,{bg:o="#069E08"}=e;return t.$$set=t=>{"size"in t&&n(0,i=t.size),"bg"in t&&n(1,o=t.bg)},[i,o]}Tt.trackingComplete=!1,"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class Gt extends bt{constructor(t){super(),yt(this,t,Vt,Wt,c,{size:0,bg:1})}}function qt(t){let i,o,c,l;return o=new Gt({props:{size:12,bg:"transparent"}}),{c(){i=S("div"),mt(o.$$.fragment),j(i,"class","spinner svelte-2eb8gc")},m(t,e){_(t,i,e),$t(o,i,null),l=!0},p:e,i(t){l||(ut(o.$$.fragment,t),c&&c.end(1),l=!0)},o(t){dt(o.$$.fragment,t),t&&(c=function(t,i,o){const c={direction:"out"};let l,a=i(t,o,c),u=!0;const d=ct;let h;function f(){const{delay:i=0,duration:o=300,easing:s=n,tick:c=e,css:f}=a||ht;f&&(l=B(t,1,0,o,i,s,f));const p=m()+i,g=p+o;J((()=>rt(t,!1,"start"))),"inert"in t&&(h=t.inert,t.inert=!0),y((e=>{if(u){if(e>=g)return c(0,1),rt(t,!1,"end"),--d.r||r(d.c),!1;if(e>=p){const t=s((e-p)/o);c(1-t,t)}}return u}))}return d.r+=1,s(a)?ot().then((()=>{a=a(c),f()})):f(),{end(e){e&&"inert"in t&&(t.inert=h),e&&a.tick&&a.tick(1,0),u&&(l&&H(t,l),u=!1)}}}(i,Nt,{duration:300})),l=!1},d(t){t&&z(i),vt(o),t&&c&&c.end()}}}class Zt extends bt{constructor(t){super(),yt(this,t,null,qt,c,{})}}function Kt(t){let n,i;return{c(){n=C("svg"),i=C("path"),j(i,"stroke-linecap","round"),j(i,"stroke-linejoin","round"),j(i,"stroke-width","2"),j(i,"d","M5 13l4 4L19 7"),j(n,"class","w-6 h-6 svelte-jkeb2"),j(n,"fill","none"),j(n,"stroke","white"),j(n,"width","18"),j(n,"height","18"),j(n,"viewBox","0 0 24 24"),j(n,"xmlns","http://www.w3.org/2000/svg")},m(t,e){_(t,n,e),b(n,i)},p:e,i:e,o:e,d(t){t&&z(n)}}}class Xt extends bt{constructor(t){super(),yt(this,t,null,Kt,c,{})}}function Yt(t){let n,i,o;return i=new Zt({}),{c(){n=S("div"),mt(i.$$.fragment),j(n,"class","bubble-inner svelte-18vhu7m")},m(t,e){_(t,n,e),$t(i,n,null),o=!0},p:e,i(t){o||(ut(i.$$.fragment,t),o=!0)},o(t){dt(i.$$.fragment,t),o=!1},d(t){t&&z(n),vt(i)}}}function Jt(t){let e,n,i,o,r,s;const c=[ee,te,Qt],l=[];function a(t,e){return t[0]>9?0:t[0]>.99?1:2}return i=a(t),o=l[i]=c[i](t),{c(){e=S("div"),n=S("div"),o.c(),j(n,"class","label"),j(e,"class","bubble-inner svelte-18vhu7m")},m(t,o){_(t,e,o),b(e,n),l[i].m(n,null),s=!0},p(t,e){let r=i;i=a(t),i===r?l[i].p(t,e):(lt(),dt(l[r],1,1,(()=>{l[r]=null})),at(),o=l[i],o?o.p(t,e):(o=l[i]=c[i](t),o.c()),ut(o,1),o.m(n,null))},i(t){s||(ut(o),t&&(r||J((()=>{r=ft(n,Nt,{delay:200,duration:300}),r.start()}))),s=!0)},o(t){dt(o),s=!1},d(t){t&&z(e),l[i].d()}}}function Qt(t){let n,i;return{c(){n=S("span"),n.textContent="<",i=E(" 1x"),T(n,"font-size","0.75em")},m(t,e){_(t,n,e),_(t,i,e)},p:e,i:e,o:e,d(t){t&&(z(n),z(i))}}}function te(t){let e,n,i,o;const r=[ie,ne],s=[];function c(t,e){return"normal"===t[1]?0:1}return e=c(t),n=s[e]=r[e](t),{c(){n.c(),i=P()},m(t,n){s[e].m(t,n),_(t,i,n),o=!0},p(t,o){let l=e;e=c(t),e===l?s[e].p(t,o):(lt(),dt(s[l],1,1,(()=>{s[l]=null})),at(),n=s[e],n?n.p(t,o):(n=s[e]=r[e](t),n.c()),ut(n,1),n.m(i.parentNode,i))},i(t){o||(ut(n),o=!0)},o(t){dt(n),o=!1},d(t){t&&z(i),s[e].d(t)}}}function ee(t){let n,i,o=Math.floor(t[0])+"";return{c(){n=E(o),i=E("x")},m(t,e){_(t,n,e),_(t,i,e)},p(t,e){1&e&&o!==(o=Math.floor(t[0])+"")&&O(n,o)},i:e,o:e,d(t){t&&(z(n),z(i))}}}function ne(t){let n,i,o=t[0].toFixed(1)+"";return{c(){n=E(o),i=E("x")},m(t,e){_(t,n,e),_(t,i,e)},p(t,e){1&e&&o!==(o=t[0].toFixed(1)+"")&&O(n,o)},i:e,o:e,d(t){t&&(z(n),z(i))}}}function ie(t){let n,i;return n=new Xt({}),{c(){mt(n.$$.fragment)},m(t,e){$t(n,t,e),i=!0},p:e,i(t){i||(ut(n.$$.fragment,t),i=!0)},o(t){dt(n.$$.fragment,t),i=!1},d(t){vt(n,t)}}}function oe(t){let e,n,i,o,r,s,c,l,a;const u=[Jt,Yt],d=[];function h(t,e){return!1===t[3]?0:1}return i=h(t),o=d[i]=u[i](t),{c(){e=S("div"),n=S("div"),o.c(),j(n,"class","bubble svelte-18vhu7m"),j(e,"class",r="interaction-area "+t[1]+" svelte-18vhu7m")},m(o,r){_(o,e,r),b(e,n),d[i].m(n,null),t[10](e),c=!0,l||(a=M(e,"mouseenter",t[7]),l=!0)},p(s,[l]){let a=i;i=h(t=s),i===a?d[i].p(t,l):(lt(),dt(d[a],1,1,(()=>{d[a]=null})),at(),o=d[i],o?o.p(t,l):(o=d[i]=u[i](t),o.c()),ut(o,1),o.m(n,null)),(!c||2&l&&r!==(r="interaction-area "+t[1]+" svelte-18vhu7m"))&&j(e,"class",r)},i(n){c||(ut(o),n&&J((()=>{c&&(s||(s=pt(e,Dt,t[6],!0)),s.run(1))})),c=!0)},o(n){dt(o),n&&(s||(s=pt(e,Dt,t[6],!1)),s.run(0)),c=!1},d(n){n&&z(e),d[i].d(),t[10](null),n&&s&&s.end(),l=!1,a()}}}function re(t,e,n){let i,o,r,{index:s}=e,{store:c}=e;const l=c.oversizedRatio;h(t,l,(t=>n(0,i=t)));const a=c.loading;h(t,a,(t=>n(3,o=t)));const u={delay:150+50*s,duration:250,y:2,easing:Bt};let d;const f=function(){const t=D();return(e,n,{cancelable:i=!1}={})=>{const o=t.$$.callbacks[e];if(o){const r=R(e,n,{cancelable:i});return o.slice().forEach((e=>{e.call(t,r)})),!r.defaultPrevented}return!0}}();return t.$$set=t=>{"index"in t&&n(8,s=t.index),"store"in t&&n(9,c=t.store)},t.$$.update=()=>{1&t.$$.dirty&&n(1,r=i>4?"high":i>2.5?"medium":"normal")},[i,r,d,o,l,a,u,function(){const t=d.getBoundingClientRect();f("hover",{index:s,position:{top:t.top+t.height+10,left:t.left}})},s,c,function(t){q[t?"unshift":"push"]((()=>{d=t,n(2,d)}))}]}class se extends bt{constructor(t){super(),yt(this,t,re,oe,c,{index:8,store:9})}}function ce(t){let e,n;const i=t[2].default,o=function(t,e,n,i){if(t){const o=f(t,e,n,i);return t[0](o)}}(i,t,t[1],null);return{c(){e=S("div"),o&&o.c(),j(e,"class","jetpack-boost-guide-portal")},m(i,r){_(i,e,r),o&&o.m(e,null),t[3](e),n=!0},p(t,[e]){o&&o.p&&(!n||2&e)&&function(t,e,n,i,o,r){if(o){const s=f(e,n,i,r);t.p(s,o)}}(o,i,t,t[1],n?function(t,e,n,i){if(t[2]&&i){const o=t[2](i(n));if(void 0===e.dirty)return o;if("object"==typeof o){const t=[],n=Math.max(e.dirty.length,o.length);for(let i=0;i<n;i+=1)t[i]=e.dirty[i]|o[i];return t}return e.dirty|o}return e.dirty}(i,t[1],e,null):function(t){if(t.ctx.length>32){const e=[],n=t.ctx.length/32;for(let t=0;t<n;t++)e[t]=-1;return e}return-1}(t[1]),null)},i(t){n||(ut(o,t),n=!0)},o(t){dt(o,t),n=!1},d(n){n&&z(e),o&&o.d(n),t[3](null)}}}function le(t,e,n){let i,{$$slots:o={},$$scope:r}=e;var s;return W((()=>{document.body.appendChild(i)})),s=()=>{document.body.removeChild(i)},D().$$.on_destroy.push(s),t.$$set=t=>{"$$scope"in t&&n(1,r=t.$$scope)},[i,r,o,function(t){q[t?"unshift":"push"]((()=>{i=t,n(0,i)}))}]}class ae extends bt{constructor(t){super(),yt(this,t,le,ce,c,{})}}function ue(t){let n,i;return{c(){n=C("svg"),i=C("path"),j(i,"d","M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z"),j(n,"xmlns","http://www.w3.org/2000/svg"),j(n,"viewBox","0 0 24 24"),j(n,"class","svelte-1g2gjwn")},m(t,e){_(t,n,e),b(n,i)},p:e,i:e,o:e,d(t){t&&z(n)}}}class de extends bt{constructor(t){super(),yt(this,t,null,ue,c,{})}}function he(t){let e,n,i,o,r=t[27]+"";return{c(){e=S("div"),n=E("The image file is "),i=E(r),o=E("x smaller than expected on this screen. This might be\n\t\t\t\t\t\tfine, but you may want to check if the image appears blurry."),j(e,"class","explanation svelte-52p8v6")},m(t,r){_(t,e,r),b(e,n),b(e,i),b(e,o)},p(t,e){8&e&&r!==(r=t[27]+"")&&O(i,r)},d(t){t&&z(e)}}}function fe(t){let e,n,i=t[6]>1&&me(t);return{c(){e=S("div"),n=E("The image size is very close to the size it appears in the browser.\n\t\t\t\t\t\t"),i&&i.c(),j(e,"class","explanation svelte-52p8v6")},m(t,o){_(t,e,o),b(e,n),i&&i.m(e,null)},p(t,n){t[6]>1?i?i.p(t,n):(i=me(t),i.c(),i.m(e,null)):i&&(i.d(1),i=null)},d(t){t&&z(e),i&&i.d()}}}function pe(t){let n;return{c(){n=S("div"),n.textContent="The image is exactly the correct size for this screen.",j(n,"class","explanation svelte-52p8v6")},m(t,e){_(t,n,e)},p:e,d(t){t&&z(n)}}}function ge(t){let e,n,i,o,r,s,c=t[4].weight>450&&$e();return{c(){e=S("div"),n=E("The image loaded is "),i=S("strong"),o=E(t[6]),r=E("x"),s=E(" larger than it appears in the browser.\n\t\t\t\t\t\t"),c&&c.c(),j(e,"class","explanation svelte-52p8v6")},m(t,l){_(t,e,l),b(e,n),b(e,i),b(i,o),b(i,r),b(e,s),c&&c.m(e,null)},p(t,n){64&n&&O(o,t[6]),t[4].weight>450?c||(c=$e(),c.c(),c.m(e,null)):c&&(c.d(1),c=null)},d(t){t&&z(e),c&&c.d()}}}function me(t){let e,n,i,o,r;return{c(){e=E("Because there are various screen sizes, it's okay for the image to be\n\t\t\t\t\t\t\t"),n=S("strong"),i=E(t[6]),o=E("x"),r=E(" than it appears on the page.")},m(t,s){_(t,e,s),_(t,n,s),b(n,i),b(n,o),_(t,r,s)},p(t,e){64&e&&O(i,t[6])},d(t){t&&(z(e),z(n),z(r))}}}function $e(t){let e;return{c(){e=E("Try using a smaller image or reduce the file size by compressing it.")},m(t,n){_(t,e,n)},d(t){t&&z(e)}}}function ve(t){let e,n;return{c(){e=S("img"),a(e.src,n=t[5])||j(e,"src",n),j(e,"alt",t[8]),T(e,"width",t[2]+"px"),T(e,"height",t[7]+"px"),j(e,"width",t[2]),j(e,"height",t[7]),j(e,"class","svelte-52p8v6")},m(t,n){_(t,e,n)},p(t,i){32&i&&!a(e.src,n=t[5])&&j(e,"src",n),256&i&&j(e,"alt",t[8]),4&i&&T(e,"width",t[2]+"px"),128&i&&T(e,"height",t[7]+"px"),4&i&&j(e,"width",t[2]),128&i&&j(e,"height",t[7])},d(t){t&&z(e)}}}function we(t){let e;function n(t,e){return t[16]?xe:be}let i=n(t),o=i(t);return{c(){e=S("div"),o.c(),j(e,"class","value")},m(t,n){_(t,e,n),o.m(e,null)},p(t,r){i!==(i=n(t))&&(o.d(1),o=i(t),o&&(o.c(),o.m(e,null)))},d(t){t&&z(e),o.d()}}}function ye(t){let e,n,i,o,r=t[4].width+"",s=t[4].height+"";return{c(){e=S("div"),n=E(r),i=E(" x "),o=E(s),j(e,"class","value")},m(t,r){_(t,e,r),b(e,n),b(e,i),b(e,o)},p(t,e){16&e&&r!==(r=t[4].width+"")&&O(n,r),16&e&&s!==(s=t[4].height+"")&&O(o,s)},d(t){t&&z(e)}}}function be(t){let e;return{c(){e=S("em"),e.textContent="Unknown"},m(t,n){_(t,e,n)},d(t){t&&z(e)}}}function xe(t){let e;return{c(){e=E("Loading...")},m(t,n){_(t,e,n)},d(t){t&&z(e)}}}function ke(t){let n;return{c(){n=S("em"),n.textContent="Unknown"},m(t,e){_(t,n,e)},p:e,d(t){t&&z(n)}}}function _e(t){let n;return{c(){n=E("Loading...")},m(t,e){_(t,n,e)},p:e,d(t){t&&z(n)}}}function ze(t){let e,n,i=Math.round(t[4].weight)+"";return{c(){e=E(i),n=E(" KB")},m(t,i){_(t,e,i),_(t,n,i)},p(t,n){16&n&&i!==(i=Math.round(t[4].weight)+"")&&O(e,i)},d(t){t&&(z(e),z(n))}}}function Se(t){let n;return{c(){n=S("em"),n.textContent="N/A"},m(t,e){_(t,n,e)},p:e,d(t){t&&z(n)}}}function Ce(t){let n;return{c(){n=E("Loading...")},m(t,e){_(t,n,e)},p:e,d(t){t&&z(n)}}}function Ee(t){let e,n,i;return{c(){e=S("strong"),n=E(t[19]),i=E(" KB")},m(t,o){_(t,e,o),b(e,n),b(e,i)},p(t,e){524288&e&&O(n,t[19])},d(t){t&&z(e)}}}function Le(t){let e,n,i,o,r,s,c,l,a,u,d,h,f,p,g,m,$,v,w,y,x,k,C,P,I,R,F,U,A,B,H,N,D,W,V,G,q,Z,K,X,Y,Q,tt,et,nt,it,ot,rt,st,ct,lt,at=t[17].width+"",ht=t[17].height+"",pt=t[18].width+"",gt=t[18].height+"",wt=`${t[0].top}px`,yt=`${t[0].left}px`;function bt(t,e){return t[6]>=1.3?ge:1===t[6]?pe:t[6]>=.99&&t[6]<1.3?fe:he}function xt(t,e){return e===he?function(t){const e=t.slice(),n=je(1/e[3]);return e[27]=n,e}(t):t}i=new Gt({props:{size:250}});let kt=bt(t),_t=kt(xt(t,kt)),zt=t[5]&&ve(t);function St(t,e){return t[4].width>0&&t[4].height>0?ye:we}let Ct=St(t),Et=Ct(t);function Lt(t,e){return t[4].weight>0?ze:t[16]?_e:ke}let Pt=Lt(t),Mt=Pt(t);function jt(t,e){return t[19]>0?Ee:t[16]?Ce:Se}let Ot=jt(t),Tt=Ot(t);return ot=new de({}),{c(){e=S("div"),n=S("div"),mt(i.$$.fragment),o=L(),r=S("div"),s=S("div"),c=S("div"),l=S("a"),a=E(t[8]),u=L(),_t.c(),d=L(),zt&&zt.c(),h=L(),f=S("div"),p=S("div"),g=S("div"),g.textContent="Image File Dimensions",m=L(),Et.c(),$=L(),v=S("div"),w=S("div"),w.textContent="Expected Dimensions",y=L(),x=S("div"),k=E(at),C=E(" x "),P=E(ht),I=L(),R=S("div"),F=S("div"),F.textContent="Size on screen",U=L(),A=S("div"),B=E(pt),H=E(" x "),N=E(gt),D=L(),W=S("div"),V=S("div"),V.textContent="Image Size",G=L(),q=S("div"),Mt.c(),Z=L(),K=S("div"),X=S("div"),X.textContent="Potential savings",Y=L(),Q=S("div"),Tt.c(),tt=L(),et=S("div"),nt=S("a"),it=E("Learn how to improve site speed by optimizing images "),mt(ot.$$.fragment),j(n,"class","logo svelte-52p8v6"),j(l,"href",t[5]),j(l,"target","_blank noreferrer"),j(l,"class","svelte-52p8v6"),j(c,"class","title svelte-52p8v6"),j(s,"class","description svelte-52p8v6"),j(r,"class","preview svelte-52p8v6"),j(g,"class","label"),j(p,"class","row svelte-52p8v6"),j(w,"class","label"),j(x,"class","value"),j(v,"class","row svelte-52p8v6"),j(F,"class","label"),j(A,"class","value"),j(R,"class","row svelte-52p8v6"),j(V,"class","label"),j(q,"class","value"),j(W,"class","row svelte-52p8v6"),j(X,"class","label"),j(Q,"class","value"),j(K,"class","row svelte-52p8v6"),j(nt,"class","documentation svelte-52p8v6"),j(nt,"href",Me),j(nt,"target","_blank noreferrer"),j(et,"class","info svelte-52p8v6"),j(f,"class","meta"),j(e,"class","jetpack-boost-guide-popup keep-guide-open svelte-52p8v6"),T(e,"top",wt),T(e,"left",yt)},m(z,S){_(z,e,S),b(e,n),$t(i,n,null),b(e,o),b(e,r),b(r,s),b(s,c),b(c,l),b(l,a),b(s,u),_t.m(s,null),b(r,d),zt&&zt.m(r,null),b(e,h),b(e,f),b(f,p),b(p,g),b(p,m),Et.m(p,null),b(f,$),b(f,v),b(v,w),b(v,y),b(v,x),b(x,k),b(x,C),b(x,P),b(f,I),b(f,R),b(R,F),b(R,U),b(R,A),b(A,B),b(A,H),b(A,N),b(f,D),b(f,W),b(W,V),b(W,G),b(W,q),Mt.m(q,null),b(f,Z),b(f,K),b(K,X),b(K,Y),b(K,Q),Tt.m(Q,null),b(f,tt),b(f,et),b(et,nt),b(nt,it),$t(ot,nt,null),st=!0,ct||(lt=M(e,"mouseleave",t[22]),ct=!0)},p(t,n){(!st||256&n)&&O(a,t[8]),(!st||32&n)&&j(l,"href",t[5]),kt===(kt=bt(t))&&_t?_t.p(xt(t,kt),n):(_t.d(1),_t=kt(xt(t,kt)),_t&&(_t.c(),_t.m(s,null))),t[5]?zt?zt.p(t,n):(zt=ve(t),zt.c(),zt.m(r,null)):zt&&(zt.d(1),zt=null),Ct===(Ct=St(t))&&Et?Et.p(t,n):(Et.d(1),Et=Ct(t),Et&&(Et.c(),Et.m(p,null))),(!st||131072&n)&&at!==(at=t[17].width+"")&&O(k,at),(!st||131072&n)&&ht!==(ht=t[17].height+"")&&O(P,ht),(!st||262144&n)&&pt!==(pt=t[18].width+"")&&O(B,pt),(!st||262144&n)&>!==(gt=t[18].height+"")&&O(N,gt),Pt===(Pt=Lt(t))&&Mt?Mt.p(t,n):(Mt.d(1),Mt=Pt(t),Mt&&(Mt.c(),Mt.m(q,null))),Ot===(Ot=jt(t))&&Tt?Tt.p(t,n):(Tt.d(1),Tt=Ot(t),Tt&&(Tt.c(),Tt.m(Q,null))),1&n&&wt!==(wt=`${t[0].top}px`)&&T(e,"top",wt),1&n&&yt!==(yt=`${t[0].left}px`)&&T(e,"left",yt)},i(t){st||(ut(i.$$.fragment,t),ut(ot.$$.fragment,t),t&&(rt||J((()=>{rt=ft(e,Dt,{duration:150,y:4,easing:Bt}),rt.start()}))),st=!0)},o(t){dt(i.$$.fragment,t),dt(ot.$$.fragment,t),st=!1},d(t){t&&z(e),vt(i),_t.d(),zt&&zt.d(),Et.d(),Mt.d(),Tt.d(),vt(ot),ct=!1,lt()}}}function Pe(t){let e,n,i,o,r,s=!1,c=()=>{s=!1};return J(t[23]),n=new ae({props:{$$slots:{default:[Le]},$$scope:{ctx:t}}}),{c(){mt(n.$$.fragment)},m(l,a){$t(n,l,a),i=!0,o||(r=M(window,"scroll",(()=>{s=!0,clearTimeout(e),e=setTimeout(c,100),t[23]()})),o=!0)},p(t,[i]){2&i&&!s&&(s=!0,clearTimeout(e),scrollTo(window.pageXOffset,t[1]),e=setTimeout(c,100));const o={};269419005&i&&(o.$$scope={dirty:i,ctx:t}),n.$set(o)},i(t){i||(ut(n.$$.fragment,t),i=!0)},o(t){dt(n.$$.fragment,t),i=!1},d(t){vt(n,t),o=!1,r()}}}const Me="https://jetpack.com/support/jetpack-boost/image-performance-guide/";function je(t){return t%1==0?t:parseFloat(t.toFixed(2))}function Oe(t,n,i){let o,r,s,c,l,a,d,h,f,p,g,m,$,v,w,y,b,x,k=e,_=e,z=e,S=e,C=e,E=e,L=e;t.$$.on_destroy.push((()=>k())),t.$$.on_destroy.push((()=>_())),t.$$.on_destroy.push((()=>z())),t.$$.on_destroy.push((()=>S())),t.$$.on_destroy.push((()=>C())),t.$$.on_destroy.push((()=>E())),t.$$.on_destroy.push((()=>L()));let{store:P}=n,{size:M}=n,{position:j}=n,O=0,T=0,I=0;return W((()=>{T=O,I=j.top})),t.$$set=t=>{"store"in t&&i(20,P=t.store),"size"in t&&i(21,M=t.size),"position"in t&&i(0,j=t.position)},t.$$.update=()=>{var e;1048576&t.$$.dirty&&(i(15,o=P.loading),S(),S=u(o,(t=>i(16,w=t)))),1048576&t.$$.dirty&&(i(14,r=P.oversizedRatio),k(),k=u(r,(t=>i(3,m=t)))),1048576&t.$$.dirty&&(i(13,s=P.fileSize),_(),_=u(s,(t=>i(4,$=t)))),1048576&t.$$.dirty&&(i(12,c=P.sizeOnPage),E(),E=u(c,(t=>i(18,b=t)))),1048576&t.$$.dirty&&(i(11,l=P.potentialSavings),L(),L=u(l,(t=>i(19,x=t)))),1048576&t.$$.dirty&&(i(10,a=P.expectedSize),C(),C=u(a,(t=>i(17,y=t)))),1048576&t.$$.dirty&&(i(9,d=P.url),z(),z=u(d,(t=>i(5,v=t)))),32&t.$$.dirty&&i(8,h=v.split("/").pop()),2097152&t.$$.dirty&&i(2,f="normal"===M?100:50),20&t.$$.dirty&&i(7,p=Math.floor(f/($.width/$.height))),8&t.$$.dirty&&i(6,g=je(m)),2&t.$$.dirty&&0!==(e=O)&&T!==e&&i(0,j.top=I+(T-e),j)},[j,O,f,m,$,v,g,p,h,d,a,l,c,s,r,o,w,y,b,x,P,M,function(e){V.call(this,t,e)},function(){i(1,O=window.pageYOffset)}]}class Te extends bt{constructor(t){super(),yt(this,t,Oe,Pe,c,{store:20,size:21,position:0})}}function Ie(t,e,n){const i=t.slice();return i[12]=e[n],i[14]=n,i}function Re(t){let e,n,i,o,r,s,c,l=gt(t[0]),a=[];for(let e=0;e<l.length;e+=1)a[e]=Fe(Ie(t,l,e));const u=t=>dt(a[t],1,1,(()=>{a[t]=null}));let d=!1!==t[1]&&Ue(t);return{c(){e=S("div"),n=S("div");for(let t=0;t<a.length;t+=1)a[t].c();i=L(),d&&d.c(),j(n,"class","previews svelte-1828btn"),j(e,"class",o="guide "+t[3]+" svelte-1828btn"),I(e,"show",!1!==t[1]),I(e,"keep-guide-open",!1!==t[1])},m(o,l){_(o,e,l),b(e,n);for(let t=0;t<a.length;t+=1)a[t]&&a[t].m(n,null);b(e,i),d&&d.m(e,null),r=!0,s||(c=M(e,"mouseleave",t[6]),s=!0)},p(t,i){if(257&i){let e;for(l=gt(t[0]),e=0;e<l.length;e+=1){const o=Ie(t,l,e);a[e]?(a[e].p(o,i),ut(a[e],1)):(a[e]=Fe(o),a[e].c(),ut(a[e],1),a[e].m(n,null))}for(lt(),e=l.length;e<a.length;e+=1)u(e);at()}!1!==t[1]?d?(d.p(t,i),2&i&&ut(d,1)):(d=Ue(t),d.c(),ut(d,1),d.m(e,null)):d&&(lt(),dt(d,1,1,(()=>{d=null})),at()),(!r||8&i&&o!==(o="guide "+t[3]+" svelte-1828btn"))&&j(e,"class",o),(!r||10&i)&&I(e,"show",!1!==t[1]),(!r||10&i)&&I(e,"keep-guide-open",!1!==t[1])},i(t){if(!r){for(let t=0;t<l.length;t+=1)ut(a[t]);ut(d),r=!0}},o(t){a=a.filter(Boolean);for(let t=0;t<a.length;t+=1)dt(a[t]);dt(d),r=!1},d(t){t&&z(e),function(t,e){for(let n=0;n<t.length;n+=1)t[n]&&t[n].d(e)}(a,t),d&&d.d(),s=!1,c()}}}function Fe(t){let e,n;return e=new se({props:{index:t[14],store:t[12]}}),e.$on("hover",t[8]),{c(){mt(e.$$.fragment)},m(t,i){$t(e,t,i),n=!0},p(t,n){const i={};1&n&&(i.store=t[12]),e.$set(i)},i(t){n||(ut(e.$$.fragment,t),n=!0)},o(t){dt(e.$$.fragment,t),n=!1},d(t){vt(e,t)}}}function Ue(t){let e,n;return e=new Te({props:{store:t[0][t[1]],size:t[3],position:t[2]}}),e.$on("mouseleave",t[6]),{c(){mt(e.$$.fragment)},m(t,i){$t(e,t,i),n=!0},p(t,n){const i={};3&n&&(i.store=t[0][t[1]]),8&n&&(i.size=t[3]),4&n&&(i.position=t[2]),e.$set(i)},i(t){n||(ut(e.$$.fragment,t),n=!0)},o(t){dt(e.$$.fragment,t),n=!1},d(t){vt(e,t)}}}function Ae(t){let e,n,i="active"===t[4]&&t[5]&&Re(t);return{c(){i&&i.c(),e=P()},m(t,o){i&&i.m(t,o),_(t,e,o),n=!0},p(t,[n]){"active"===t[4]&&t[5]?i?(i.p(t,n),48&n&&ut(i,1)):(i=Re(t),i.c(),ut(i,1),i.m(e.parentNode,e)):i&&(lt(),dt(i,1,1,(()=>{i=null})),at())},i(t){n||(ut(i),n=!0)},o(t){dt(i),n=!1},d(t){t&&z(e),i&&i.d(t)}}}function Be(t,e,n){let i,o,r,s;h(t,Mt,(t=>n(4,r=t)));let{stores:c}=e,l=!1;W((()=>{c.forEach((t=>t.updateDimensions()))}));const a=c[0].sizeOnPage;h(t,a,(t=>n(10,o=t)));let u={top:0,left:0};const d=_t(c.map((t=>t.fileSize)),(t=>t.some((t=>-1!==t.width&&-1!==t.height))));return h(t,d,(t=>n(5,s=t))),t.$$set=t=>{"stores"in t&&n(0,c=t.stores)},t.$$.update=()=>{1024&t.$$.dirty&&n(3,i=function(t=-1,e=-1){return t<200||e<200?"micro":t<400||e<400?"small":"normal"}(o.width,o.height)),2&t.$$.dirty&&function(t=!1){t?c.forEach((t=>t.node.classList.add("jetpack-boost-guide__backdrop"))):c.forEach((t=>t.node.classList.remove("jetpack-boost-guide__backdrop")))}(!1!==l)},[c,l,u,i,r,s,function(t){t.relatedTarget&&t.relatedTarget.classList.contains("keep-guide-open")||n(1,l=!1)},a,function(t){const e=t.detail,i=e.index;n(2,u=e.position),n(1,l=i)},d,o]}class He extends bt{constructor(t){super(),yt(this,t,Be,Ae,c,{stores:0})}}const Ne=[];let De;function We(t){window.frameElement||(De=t,window.addEventListener("load",Ve))}function Ve(){window.addEventListener("resize",function(){let t;return()=>{t&&clearTimeout(t),t=setTimeout((()=>{Ne.forEach((t=>{t.updateDimensions()}))}),500)}}()),Tt.trackInitialState(),Mt.subscribe((async t=>{if("paused"===t)return;const e=await Ut(Array.from(document.querySelectorAll("body *:not(.jetpack-boost-guide > *):not(.jetpack-boost-guide)")),De),n=await Promise.all(e.map((t=>t.isImageTiny())));Ne.push(...function(t){const e=t.reduce(((t,e)=>{var n;if(!e.node.parentNode)return console.error("Image has no parent",e.node),t;const i=function(t){const e=t.node;if(!(t.node instanceof HTMLImageElement)&&["static","relative"].includes(getComputedStyle(e).position))return e.classList.contains("jetpack-boost-guide")||(e.classList.add("jetpack-boost-guide","relative"),e.dataset.jetpackBoostGuideId=(++Ge).toString()),e;if(!e.parentNode||!e.parentElement)return;const n=function(t){let e,n=t.parentElement;for(;n&&n instanceof HTMLElement&&n!==document.body;){const t=getComputedStyle(n),i="inline"!==t.display,o="static"===t.position,r="relative"===t.position,s="auto"!==t.zIndex;i&&(!e&&(o||r)||r&&s)&&(e=n),n=n.parentElement}return e}(e);if(null==n?void 0:n.classList.contains("jetpack-boost-guide"))return n;if(n){const e=getComputedStyle(n);if("relative"===e.position){const t=Array.from(n.children).find((t=>t.classList.contains("jetpack-boost-guide")));if(t&&t instanceof HTMLElement)return t}const i=document.createElement("div");return i.classList.add("jetpack-boost-guide"),i.dataset.jetpackBoostGuideId=(++Ge).toString(),"static"===e.position&&(n.style.position="relative"),t.node instanceof HTMLImageElement&&(i.style.top=`${t.node.offsetTop}px`),n.prepend(i),i}return e.parentElement}(e);if(!i)return console.error("Could not find a parent for image",e),t;const o=parseInt(i.dataset.jetpackBoostGuideId||""),r=(null===(n=t[o])||void 0===n?void 0:n.props.stores)||[],s=new Ot(e);return r.push(s),1===r.length&&(t[o]={target:i,intro:!0,props:{stores:r}}),t}),{});return Object.values(e).map((t=>(new He(t),t.props.stores))).flat()}(e.filter(((t,e)=>!n[e])))),Tt.trackPage(Ne)}))}let Ge=0;function qe(t){let e,n,i,o,r,s,c,l,a,u;return n=new Gt({}),{c(){e=S("a"),mt(n.$$.fragment),i=L(),o=S("span"),r=E("Image Guide: "),s=E(t[2]),j(e,"id","jetpack-boost-guide-bar"),j(e,"href",t[0]),j(e,"class",c="ab-item "+t[1]+" svelte-itog5b")},m(c,d){var h;_(c,e,d),$t(n,e,null),b(e,i),b(e,o),b(o,r),b(o,s),l=!0,a||(u=M(e,"click",(h=t[3],function(t){return t.preventDefault(),h.call(this,t)})),a=!0)},p(t,[n]){(!l||4&n)&&O(s,t[2]),(!l||1&n)&&j(e,"href",t[0]),(!l||2&n&&c!==(c="ab-item "+t[1]+" svelte-itog5b"))&&j(e,"class",c)},i(t){l||(ut(n.$$.fragment,t),l=!0)},o(t){dt(n.$$.fragment,t),l=!1},d(t){t&&z(e),vt(n),a=!1,u()}}}function Ze(t,e,n){let i,o;h(t,Mt,(t=>n(1,i=t))),h(t,jt,(t=>n(2,o=t)));let{href:r}=e,{tracksCallback:s}=e;return t.$$set=t=>{"href"in t&&n(0,r=t.href),"tracksCallback"in t&&n(4,s=t.tracksCallback)},t.$$.update=()=>{16&t.$$.dirty&&Tt.setTracksCallback(s)},[r,i,o,function(){Mt.cycle(),Tt.trackUIStateChange()},s]}class Ke extends bt{constructor(t){super(),yt(this,t,Ze,qe,c,{href:0,tracksCallback:4})}}function Xe(t,{href:e,tracksCallback:n,fetchFunction:i}){return We(i),new Ke({target:t,props:{href:e,tracksCallback:n}})}export{t as MeasurableImage,Ut as getMeasurableImages,Xe as setupImageGuideUI};
|
|
1
|
+
class t{constructor(t,e,n=null){this.node=t,this.getURLCallback=e,this.fetch=null!=n?n:window.fetch.bind(window)}getURL(){return this.getURLCallback(this.node)}getSizeOnPage(){const{width:t,height:e}=this.node.getBoundingClientRect();return{width:Math.round(t),height:Math.round(e)}}async getFileSize(t){const[e,{width:n,height:i}]=await Promise.all([this.fetchFileWeight(t),this.fetchFileDimensions(t)]);return{width:n,height:i,weight:e}}getPotentialSavings(t,e){const n=this.getOversizedRatio(t,e);return n<=1?null:Math.round(t.weight-t.weight/n)}getExpectedSize(t){const e=window.devicePixelRatio||1;return{width:Math.round(t.width*e),height:Math.round(t.height*e)}}getOversizedRatio(t,e){if(0===t.width||0===t.height)return 1;const{width:n,height:i}=this.getExpectedSize(e);return 0===n||0===i?1:t.width*t.height/(n*i)}async fetchFileWeight(t){const e=await this.fetch(t);return e.ok?parseInt(e.headers.get("content-length"),10)/1024:(console.log(`Can't get image size for ${t} likely due to a CORS error.`),-1)}async fetchFileDimensions(t){const e=new Image;return e.src=t,new Promise(((t,n)=>{e.onload=()=>{t({width:Math.round(e.width),height:Math.round(e.height)})},e.onerror=()=>{n("Unable to load image.")}}))}async isImageTiny(){try{const t=65,e=await this.fetchFileDimensions(this.getURL());return e.width<t||e.height<t}catch{return!0}}}function e(){}const n=t=>t;function i(t){return t()}function o(){return Object.create(null)}function r(t){t.forEach(i)}function s(t){return"function"==typeof t}function c(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}let l;function a(t,e){return t===e||(l||(l=document.createElement("a")),l.href=e,t===l.href)}function u(t,...n){if(null==t){for(const t of n)t(void 0);return e}const i=t.subscribe(...n);return i.unsubscribe?()=>i.unsubscribe():i}function d(t){let e;return u(t,(t=>e=t))(),e}function h(t,e,n){t.$$.on_destroy.push(u(e,n))}function f(t,e,n,i){return t[1]&&i?function(t,e){for(const n in e)t[n]=e[n];return t}(n.ctx.slice(),t[1](i(e))):n.ctx}function p(t){const e="string"==typeof t&&t.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);return e?[parseFloat(e[1]),e[2]||"px"]:[t,"px"]}const g="undefined"!=typeof window;let m=g?()=>window.performance.now():()=>Date.now(),$=g?t=>requestAnimationFrame(t):e;const v=new Set;function w(t){v.forEach((e=>{e.c(t)||(v.delete(e),e.f())})),0!==v.size&&$(w)}function y(t){let e;return 0===v.size&&$(w),{promise:new Promise((n=>{v.add(e={c:t,f:n})})),abort(){v.delete(e)}}}function b(t,e){t.appendChild(e)}function x(t){if(!t)return document;const e=t.getRootNode?t.getRootNode():t.ownerDocument;return e&&e.host?e:t.ownerDocument}function k(t){const e=S("style");return e.textContent="/* empty */",function(t,e){b(t.head||t,e),e.sheet}(x(t),e),e.sheet}function _(t,e,n){t.insertBefore(e,n||null)}function z(t){t.parentNode&&t.parentNode.removeChild(t)}function S(t){return document.createElement(t)}function C(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function E(t){return document.createTextNode(t)}function L(){return E(" ")}function P(){return E("")}function M(t,e,n,i){return t.addEventListener(e,n,i),()=>t.removeEventListener(e,n,i)}function j(t,e,n){null==n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function O(t,e){e=""+e,t.data!==e&&(t.data=e)}function T(t,e,n,i){null==n?t.style.removeProperty(e):t.style.setProperty(e,n,i?"important":"")}function I(t,e,n){t.classList.toggle(e,!!n)}function R(t,e,{bubbles:n=!1,cancelable:i=!1}={}){return new CustomEvent(t,{detail:e,bubbles:n,cancelable:i})}const F=new Map;let U,A=0;function B(t,e,n,i,o,r,s,c=0){const l=16.666/i;let a="{\n";for(let t=0;t<=1;t+=l){const i=e+(n-e)*r(t);a+=100*t+`%{${s(i,1-i)}}\n`}const u=a+`100% {${s(n,1-n)}}\n}`,d=`__svelte_${function(t){let e=5381,n=t.length;for(;n--;)e=(e<<5)-e^t.charCodeAt(n);return e>>>0}(u)}_${c}`,h=x(t),{stylesheet:f,rules:p}=F.get(h)||function(t,e){const n={stylesheet:k(e),rules:{}};return F.set(t,n),n}(h,t);p[d]||(p[d]=!0,f.insertRule(`@keyframes ${d} ${u}`,f.cssRules.length));const g=t.style.animation||"";return t.style.animation=`${g?`${g}, `:""}${d} ${i}ms linear ${o}ms 1 both`,A+=1,d}function H(t,e){const n=(t.style.animation||"").split(", "),i=n.filter(e?t=>t.indexOf(e)<0:t=>-1===t.indexOf("__svelte")),o=n.length-i.length;o&&(t.style.animation=i.join(", "),A-=o,A||$((()=>{A||(F.forEach((t=>{const{ownerNode:e}=t.stylesheet;e&&z(e)})),F.clear())})))}function N(t){U=t}function D(){if(!U)throw new Error("Function called outside component initialization");return U}function W(t){D().$$.on_mount.push(t)}function V(t,e){const n=t.$$.callbacks[e.type];n&&n.slice().forEach((t=>t.call(this,e)))}const G=[],q=[];let Z=[];const K=[],X=Promise.resolve();let Y=!1;function J(t){Z.push(t)}const Q=new Set;let tt,et=0;function nt(){if(0!==et)return;const t=U;do{try{for(;et<G.length;){const t=G[et];et++,N(t),it(t.$$)}}catch(t){throw G.length=0,et=0,t}for(N(null),G.length=0,et=0;q.length;)q.pop()();for(let t=0;t<Z.length;t+=1){const e=Z[t];Q.has(e)||(Q.add(e),e())}Z.length=0}while(G.length);for(;K.length;)K.pop()();Y=!1,Q.clear(),N(t)}function it(t){if(null!==t.fragment){t.update(),r(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(J)}}function ot(){return tt||(tt=Promise.resolve(),tt.then((()=>{tt=null}))),tt}function rt(t,e,n){t.dispatchEvent(R(`${e?"intro":"outro"}${n}`))}const st=new Set;let ct;function lt(){ct={r:0,c:[],p:ct}}function at(){ct.r||r(ct.c),ct=ct.p}function ut(t,e){t&&t.i&&(st.delete(t),t.i(e))}function dt(t,e,n,i){if(t&&t.o){if(st.has(t))return;st.add(t),ct.c.push((()=>{st.delete(t),i&&(n&&t.d(1),i())})),t.o(e)}else i&&i()}const ht={duration:0};function ft(t,i,o){const r={direction:"in"};let c,l,a=i(t,o,r),u=!1,d=0;function h(){c&&H(t,c)}function f(){const{delay:i=0,duration:o=300,easing:r=n,tick:s=e,css:f}=a||ht;f&&(c=B(t,0,1,o,i,r,f,d++)),s(0,1);const p=m()+i,g=p+o;l&&l.abort(),u=!0,J((()=>rt(t,!0,"start"))),l=y((e=>{if(u){if(e>=g)return s(1,0),rt(t,!0,"end"),h(),u=!1;if(e>=p){const t=r((e-p)/o);s(t,1-t)}}return u}))}let p=!1;return{start(){p||(p=!0,H(t),s(a)?(a=a(r),ot().then(f)):f())},invalidate(){p=!1},end(){u&&(h(),u=!1)}}}function pt(t,i,o,c){let l,a=i(t,o,{direction:"both"}),u=c?0:1,d=null,h=null,f=null;function p(){f&&H(t,f)}function g(t,e){const n=t.b-u;return e*=Math.abs(n),{a:u,b:t.b,d:n,duration:e,start:t.start,end:t.start+e,group:t.group}}function $(i){const{delay:o=0,duration:s=300,easing:c=n,tick:$=e,css:v}=a||ht,w={start:m()+o,b:i};i||(w.group=ct,ct.r+=1),"inert"in t&&(i?void 0!==l&&(t.inert=l):(l=t.inert,t.inert=!0)),d||h?h=w:(v&&(p(),f=B(t,u,i,s,o,c,v)),i&&$(0,1),d=g(w,s),J((()=>rt(t,i,"start"))),y((e=>{if(h&&e>h.start&&(d=g(h,s),h=null,rt(t,d.b,"start"),v&&(p(),f=B(t,u,d.b,d.duration,0,c,a.css))),d)if(e>=d.end)$(u=d.b,1-u),rt(t,d.b,"end"),h||(d.b?p():--d.group.r||r(d.group.c)),d=null;else if(e>=d.start){const t=e-d.start;u=d.a+d.d*c(t/d.duration),$(u,1-u)}return!(!d&&!h)})))}return{run(t){s(a)?ot().then((()=>{a=a({direction:t?"in":"out"}),$(t)})):$(t)},end(){p(),d=h=null}}}function gt(t){return void 0!==t?.length?t:Array.from(t)}function mt(t){t&&t.c()}function $t(t,e,n){const{fragment:o,after_update:c}=t.$$;o&&o.m(e,n),J((()=>{const e=t.$$.on_mount.map(i).filter(s);t.$$.on_destroy?t.$$.on_destroy.push(...e):r(e),t.$$.on_mount=[]})),c.forEach(J)}function vt(t,e){const n=t.$$;null!==n.fragment&&(!function(t){const e=[],n=[];Z.forEach((i=>-1===t.indexOf(i)?e.push(i):n.push(i))),n.forEach((t=>t())),Z=e}(n.after_update),r(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function wt(t,e){-1===t.$$.dirty[0]&&(G.push(t),Y||(Y=!0,X.then(nt)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function yt(t,n,i,s,c,l,a=null,u=[-1]){const d=U;N(t);const h=t.$$={fragment:null,ctx:[],props:l,update:e,not_equal:c,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(n.context||(d?d.$$.context:[])),callbacks:o(),dirty:u,skip_bound:!1,root:n.target||d.$$.root};a&&a(h.root);let f=!1;if(h.ctx=i?i(t,n.props||{},((e,n,...i)=>{const o=i.length?i[0]:n;return h.ctx&&c(h.ctx[e],h.ctx[e]=o)&&(!h.skip_bound&&h.bound[e]&&h.bound[e](o),f&&wt(t,e)),n})):[],h.update(),f=!0,r(h.before_update),h.fragment=!!s&&s(h.ctx),n.target){if(n.hydrate){const t=function(t){return Array.from(t.childNodes)}(n.target);h.fragment&&h.fragment.l(t),t.forEach(z)}else h.fragment&&h.fragment.c();n.intro&&ut(t.$$.fragment),$t(t,n.target,n.anchor),nt()}N(d)}class bt{$$=void 0;$$set=void 0;$destroy(){vt(this,1),this.$destroy=e}$on(t,n){if(!s(n))return e;const i=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return i.push(n),()=>{const t=i.indexOf(n);-1!==t&&i.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const xt=[];function kt(t,n=e){let i;const o=new Set;function r(e){if(c(t,e)&&(t=e,i)){const e=!xt.length;for(const e of o)e[1](),xt.push(e,t);if(e){for(let t=0;t<xt.length;t+=2)xt[t][0](xt[t+1]);xt.length=0}}}function s(e){r(e(t))}return{set:r,update:s,subscribe:function(c,l=e){const a=[c,l];return o.add(a),1===o.size&&(i=n(r,s)||e),c(t),()=>{o.delete(a),0===o.size&&i&&(i(),i=null)}}}}function _t(t,n,i){const o=!Array.isArray(t),c=o?[t]:t;if(!c.every(Boolean))throw new Error("derived() expects stores as input, got a falsy value");const l=n.length<2;return a=(t,i)=>{let a=!1;const d=[];let h=0,f=e;const p=()=>{if(h)return;f();const r=n(o?d[0]:d,t,i);l?t(r):f=s(r)?r:e},g=c.map(((t,e)=>u(t,(t=>{d[e]=t,h&=~(1<<e),a&&p()}),(()=>{h|=1<<e}))));return a=!0,p(),function(){r(g),f(),a=!1}},{subscribe:kt(i,a).subscribe};var a}const zt="jetpack-boost-guide",St={active:"Active",paused:"Paused"};let Ct=localStorage.getItem(zt);Ct&&St[Ct]||(localStorage.setItem(zt,"Active"),Ct="active");const{set:Et,update:Lt,subscribe:Pt}=kt(Ct);Pt((t=>{localStorage.setItem(zt,t)}));const Mt={subscribe:Pt,set:Et,update:Lt,cycle:()=>{Lt((t=>{const e=Object.keys(St),n=e.indexOf(t);return e[(n+1)%e.length]}))}},jt=_t(Mt,(t=>St[t]));class Ot{constructor(t){this.loading=kt(!0),this.currentSrc="",this.image=t,this.node=t.node;this.url=kt(t.getURL()),this.fileSize=kt({width:0,height:0,weight:0}),this.sizeOnPage=kt({width:0,height:0}),this.potentialSavings=this.derivePotentialSavings(),this.oversizedRatio=this.deriveOversizedRatio(),this.expectedSize=this.deriveExpectedSize()}deriveOversizedRatio(){return _t([this.fileSize,this.sizeOnPage],(([t,e])=>this.image.getOversizedRatio(t,e)))}deriveExpectedSize(){return _t(this.sizeOnPage,(t=>this.image.getExpectedSize(t)))}derivePotentialSavings(){return _t([this.fileSize,this.sizeOnPage],(([t,e])=>this.image.getPotentialSavings(t,e)))}async updateDimensions(){const t=this.image.getSizeOnPage();this.sizeOnPage.set(t),await this.maybeUpdateWeight()}async maybeUpdateWeight(){if(this.image.getURL()===this.currentSrc)return;let t;this.loading.set(!0),this.currentSrc=this.image.getURL();try{t=await this.image.getFileSize(this.currentSrc)}catch{t={weight:-1,height:-1,width:-1}}this.url.set(this.currentSrc),this.fileSize.set(t),this.loading.set(!1)}}class Tt{static setTracksCallback(t){Tt.tracksCallback=t}static async trackImageOutcome(t){return new Promise((e=>{t.loading.subscribe((n=>{if(!n){const n=d(t.oversizedRatio),i=function(t){return t>4?"red":t>2.5?"yellow":"green"}(n),o=d(t.fileSize),r=d(t.sizeOnPage),s=d(t.expectedSize),c=d(t.potentialSavings),l=d(t.url),a={severity:i,oversized_ratio:n,file_weight:o.weight,file_width:o.width,file_height:o.height,size_on_page_width:r.width,size_on_page_height:r.height,expected_width:s.width,expected_height:s.height,potential_savings:c,image_url:l};Tt.tracksCallback("image_guide_image_outcome",{...a,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio}),e(a)}}))}))}static async trackPage(t){if(!t.length||Tt.trackingComplete)return;Tt.trackingComplete=!0;const e=t.map(Tt.trackImageOutcome),n=await Promise.all(e),i=n.reduce(((t,e)=>t+(e.potential_savings||0)),0);Tt.tracksCallback("image_guide_page_outcome",{total_potential_savings:i,red_severity_count:n.filter((t=>"red"===t.severity)).length,yellow_severity_count:n.filter((t=>"yellow"===t.severity)).length,green_severity_count:n.filter((t=>"green"===t.severity)).length,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio})}static trackInitialState(){Tt.tracksCallback("image_guide_initial_ui_state",{image_guide_state:d(Mt)})}static trackUIStateChange(){Tt.tracksCallback("image_guide_ui_state_change",{image_guide_state:d(Mt)})}}function It(t){return t.filter((t=>{if(t instanceof HTMLImageElement){if(!t.src.trim())return!1;try{if(e=t.src,new URL(e).pathname.toLowerCase().endsWith(".svg"))return!1}catch{return!1}return!0}var e;if(t instanceof HTMLElement){return"none"!==getComputedStyle(t).backgroundImage}return!1}))}function Rt(t){return At(t.currentSrc)?t.currentSrc:At(t.src)?t.src:null}function Ft(t){const e=getComputedStyle(t).backgroundImage.match(/url\(\s*(['"])(.*?)\1\s*\)/i),n=window.location.href.split("#")[0];return e&&e[2]&&e[2]!==n&&At(e[2])?e[2]:null}async function Ut(e,n=null){return It(e).map((e=>e instanceof HTMLImageElement?new t(e,Rt,n):e instanceof HTMLElement&&Ft(e)?new t(e,Ft):null)).filter((t=>null!==t))}function At(t){if(t.startsWith("/")){return!t.split("?")[0].endsWith(".svg")}try{const e=new URL(t);return"http:"===e.protocol||"https:"===e.protocol}catch{return!1}}function Bt(t){const e=1.70158;return--t*t*((e+1)*t+e)+1}function Ht(t){const e=t-1;return e*e*e+1}function Nt(t,{delay:e=0,duration:i=400,easing:o=n}={}){const r=+getComputedStyle(t).opacity;return{delay:e,duration:i,easing:o,css:t=>"opacity: "+t*r}}function Dt(t,{delay:e=0,duration:n=400,easing:i=Ht,x:o=0,y:r=0,opacity:s=0}={}){const c=getComputedStyle(t),l=+c.opacity,a="none"===c.transform?"":c.transform,u=l*(1-s),[d,h]=p(o),[f,g]=p(r);return{delay:e,duration:n,easing:i,css:(t,e)=>`\n\t\t\ttransform: ${a} translate(${(1-t)*d}${h}, ${(1-t)*f}${g});\n\t\t\topacity: ${l-u*e}`}}function Wt(t){let n,i,o,r,s;return{c(){n=S("div"),i=C("svg"),o=C("path"),r=C("path"),s=C("path"),j(o,"d","M55.4 107.8C84.3397 107.8 107.8 84.3397 107.8 55.4C107.8 26.4603 84.3397 3 55.4 3C26.4603 3 3 26.4603 3 55.4C3 84.3397 26.4603 107.8 55.4 107.8Z"),j(o,"fill",t[1]),j(r,"d","M58 46.6V97.4L84.2 46.6H58Z"),j(r,"fill","white"),j(s,"d","M52.7 64.1V13.4L26.6 64.1H52.7Z"),j(s,"fill","white"),j(i,"viewBox","0 0 110 110"),j(i,"fill","none"),j(i,"xmlns","http://www.w3.org/2000/svg"),T(n,"width",t[0]+"px"),T(n,"height",t[0]+"px"),j(n,"class","svelte-f6jc8")},m(t,e){_(t,n,e),b(n,i),b(i,o),b(i,r),b(i,s)},p(t,[e]){2&e&&j(o,"fill",t[1]),1&e&&T(n,"width",t[0]+"px"),1&e&&T(n,"height",t[0]+"px")},i:e,o:e,d(t){t&&z(n)}}}function Vt(t,e,n){let{size:i=16}=e,{bg:o="#069E08"}=e;return t.$$set=t=>{"size"in t&&n(0,i=t.size),"bg"in t&&n(1,o=t.bg)},[i,o]}Tt.trackingComplete=!1,"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class Gt extends bt{constructor(t){super(),yt(this,t,Vt,Wt,c,{size:0,bg:1})}}function qt(t){let i,o,c,l;return o=new Gt({props:{size:12,bg:"transparent"}}),{c(){i=S("div"),mt(o.$$.fragment),j(i,"class","spinner svelte-2eb8gc")},m(t,e){_(t,i,e),$t(o,i,null),l=!0},p:e,i(t){l||(ut(o.$$.fragment,t),c&&c.end(1),l=!0)},o(t){dt(o.$$.fragment,t),t&&(c=function(t,i,o){const c={direction:"out"};let l,a=i(t,o,c),u=!0;const d=ct;let h;function f(){const{delay:i=0,duration:o=300,easing:s=n,tick:c=e,css:f}=a||ht;f&&(l=B(t,1,0,o,i,s,f));const p=m()+i,g=p+o;J((()=>rt(t,!1,"start"))),"inert"in t&&(h=t.inert,t.inert=!0),y((e=>{if(u){if(e>=g)return c(0,1),rt(t,!1,"end"),--d.r||r(d.c),!1;if(e>=p){const t=s((e-p)/o);c(1-t,t)}}return u}))}return d.r+=1,s(a)?ot().then((()=>{a=a(c),f()})):f(),{end(e){e&&"inert"in t&&(t.inert=h),e&&a.tick&&a.tick(1,0),u&&(l&&H(t,l),u=!1)}}}(i,Nt,{duration:300})),l=!1},d(t){t&&z(i),vt(o),t&&c&&c.end()}}}class Zt extends bt{constructor(t){super(),yt(this,t,null,qt,c,{})}}function Kt(t){let n,i;return{c(){n=C("svg"),i=C("path"),j(i,"stroke-linecap","round"),j(i,"stroke-linejoin","round"),j(i,"stroke-width","2"),j(i,"d","M5 13l4 4L19 7"),j(n,"class","w-6 h-6 svelte-jkeb2"),j(n,"fill","none"),j(n,"stroke","white"),j(n,"width","18"),j(n,"height","18"),j(n,"viewBox","0 0 24 24"),j(n,"xmlns","http://www.w3.org/2000/svg")},m(t,e){_(t,n,e),b(n,i)},p:e,i:e,o:e,d(t){t&&z(n)}}}class Xt extends bt{constructor(t){super(),yt(this,t,null,Kt,c,{})}}function Yt(t){let n,i,o;return i=new Zt({}),{c(){n=S("div"),mt(i.$$.fragment),j(n,"class","bubble-inner svelte-18vhu7m")},m(t,e){_(t,n,e),$t(i,n,null),o=!0},p:e,i(t){o||(ut(i.$$.fragment,t),o=!0)},o(t){dt(i.$$.fragment,t),o=!1},d(t){t&&z(n),vt(i)}}}function Jt(t){let e,n,i,o,r,s;const c=[ee,te,Qt],l=[];function a(t,e){return t[0]>9?0:t[0]>.99?1:2}return i=a(t),o=l[i]=c[i](t),{c(){e=S("div"),n=S("div"),o.c(),j(n,"class","label"),j(e,"class","bubble-inner svelte-18vhu7m")},m(t,o){_(t,e,o),b(e,n),l[i].m(n,null),s=!0},p(t,e){let r=i;i=a(t),i===r?l[i].p(t,e):(lt(),dt(l[r],1,1,(()=>{l[r]=null})),at(),o=l[i],o?o.p(t,e):(o=l[i]=c[i](t),o.c()),ut(o,1),o.m(n,null))},i(t){s||(ut(o),t&&(r||J((()=>{r=ft(n,Nt,{delay:200,duration:300}),r.start()}))),s=!0)},o(t){dt(o),s=!1},d(t){t&&z(e),l[i].d()}}}function Qt(t){let n,i;return{c(){n=S("span"),n.textContent="<",i=E(" 1x"),T(n,"font-size","0.75em")},m(t,e){_(t,n,e),_(t,i,e)},p:e,i:e,o:e,d(t){t&&(z(n),z(i))}}}function te(t){let e,n,i,o;const r=[ie,ne],s=[];function c(t,e){return"normal"===t[1]?0:1}return e=c(t),n=s[e]=r[e](t),{c(){n.c(),i=P()},m(t,n){s[e].m(t,n),_(t,i,n),o=!0},p(t,o){let l=e;e=c(t),e===l?s[e].p(t,o):(lt(),dt(s[l],1,1,(()=>{s[l]=null})),at(),n=s[e],n?n.p(t,o):(n=s[e]=r[e](t),n.c()),ut(n,1),n.m(i.parentNode,i))},i(t){o||(ut(n),o=!0)},o(t){dt(n),o=!1},d(t){t&&z(i),s[e].d(t)}}}function ee(t){let n,i,o=Math.floor(t[0])+"";return{c(){n=E(o),i=E("x")},m(t,e){_(t,n,e),_(t,i,e)},p(t,e){1&e&&o!==(o=Math.floor(t[0])+"")&&O(n,o)},i:e,o:e,d(t){t&&(z(n),z(i))}}}function ne(t){let n,i,o=t[0].toFixed(1)+"";return{c(){n=E(o),i=E("x")},m(t,e){_(t,n,e),_(t,i,e)},p(t,e){1&e&&o!==(o=t[0].toFixed(1)+"")&&O(n,o)},i:e,o:e,d(t){t&&(z(n),z(i))}}}function ie(t){let n,i;return n=new Xt({}),{c(){mt(n.$$.fragment)},m(t,e){$t(n,t,e),i=!0},p:e,i(t){i||(ut(n.$$.fragment,t),i=!0)},o(t){dt(n.$$.fragment,t),i=!1},d(t){vt(n,t)}}}function oe(t){let e,n,i,o,r,s,c,l,a;const u=[Jt,Yt],d=[];function h(t,e){return!1===t[3]?0:1}return i=h(t),o=d[i]=u[i](t),{c(){e=S("div"),n=S("div"),o.c(),j(n,"class","bubble svelte-18vhu7m"),j(e,"class",r="interaction-area "+t[1]+" svelte-18vhu7m")},m(o,r){_(o,e,r),b(e,n),d[i].m(n,null),t[10](e),c=!0,l||(a=M(e,"mouseenter",t[7]),l=!0)},p(s,[l]){let a=i;i=h(t=s),i===a?d[i].p(t,l):(lt(),dt(d[a],1,1,(()=>{d[a]=null})),at(),o=d[i],o?o.p(t,l):(o=d[i]=u[i](t),o.c()),ut(o,1),o.m(n,null)),(!c||2&l&&r!==(r="interaction-area "+t[1]+" svelte-18vhu7m"))&&j(e,"class",r)},i(n){c||(ut(o),n&&J((()=>{c&&(s||(s=pt(e,Dt,t[6],!0)),s.run(1))})),c=!0)},o(n){dt(o),n&&(s||(s=pt(e,Dt,t[6],!1)),s.run(0)),c=!1},d(n){n&&z(e),d[i].d(),t[10](null),n&&s&&s.end(),l=!1,a()}}}function re(t,e,n){let i,o,r,{index:s}=e,{store:c}=e;const l=c.oversizedRatio;h(t,l,(t=>n(0,i=t)));const a=c.loading;h(t,a,(t=>n(3,o=t)));const u={delay:150+50*s,duration:250,y:2,easing:Bt};let d;const f=function(){const t=D();return(e,n,{cancelable:i=!1}={})=>{const o=t.$$.callbacks[e];if(o){const r=R(e,n,{cancelable:i});return o.slice().forEach((e=>{e.call(t,r)})),!r.defaultPrevented}return!0}}();return t.$$set=t=>{"index"in t&&n(8,s=t.index),"store"in t&&n(9,c=t.store)},t.$$.update=()=>{1&t.$$.dirty&&n(1,r=i>4?"high":i>2.5?"medium":"normal")},[i,r,d,o,l,a,u,function(){const t=d.getBoundingClientRect();f("hover",{index:s,position:{top:t.top+t.height+10,left:t.left}})},s,c,function(t){q[t?"unshift":"push"]((()=>{d=t,n(2,d)}))}]}class se extends bt{constructor(t){super(),yt(this,t,re,oe,c,{index:8,store:9})}}function ce(t){let e,n;const i=t[2].default,o=function(t,e,n,i){if(t){const o=f(t,e,n,i);return t[0](o)}}(i,t,t[1],null);return{c(){e=S("div"),o&&o.c(),j(e,"class","jetpack-boost-guide-portal")},m(i,r){_(i,e,r),o&&o.m(e,null),t[3](e),n=!0},p(t,[e]){o&&o.p&&(!n||2&e)&&function(t,e,n,i,o,r){if(o){const s=f(e,n,i,r);t.p(s,o)}}(o,i,t,t[1],n?function(t,e,n,i){if(t[2]&&i){const o=t[2](i(n));if(void 0===e.dirty)return o;if("object"==typeof o){const t=[],n=Math.max(e.dirty.length,o.length);for(let i=0;i<n;i+=1)t[i]=e.dirty[i]|o[i];return t}return e.dirty|o}return e.dirty}(i,t[1],e,null):function(t){if(t.ctx.length>32){const e=[],n=t.ctx.length/32;for(let t=0;t<n;t++)e[t]=-1;return e}return-1}(t[1]),null)},i(t){n||(ut(o,t),n=!0)},o(t){dt(o,t),n=!1},d(n){n&&z(e),o&&o.d(n),t[3](null)}}}function le(t,e,n){let i,{$$slots:o={},$$scope:r}=e;var s;return W((()=>{document.body.appendChild(i)})),s=()=>{document.body.removeChild(i)},D().$$.on_destroy.push(s),t.$$set=t=>{"$$scope"in t&&n(1,r=t.$$scope)},[i,r,o,function(t){q[t?"unshift":"push"]((()=>{i=t,n(0,i)}))}]}class ae extends bt{constructor(t){super(),yt(this,t,le,ce,c,{})}}function ue(t){let n,i;return{c(){n=C("svg"),i=C("path"),j(i,"d","M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z"),j(n,"xmlns","http://www.w3.org/2000/svg"),j(n,"viewBox","0 0 24 24"),j(n,"class","svelte-1g2gjwn")},m(t,e){_(t,n,e),b(n,i)},p:e,i:e,o:e,d(t){t&&z(n)}}}class de extends bt{constructor(t){super(),yt(this,t,null,ue,c,{})}}function he(t){let e,n,i,o,r=t[27]+"";return{c(){e=S("div"),n=E("The image file is "),i=E(r),o=E("x smaller than expected on this screen. This might be\n\t\t\t\t\t\tfine, but you may want to check if the image appears blurry."),j(e,"class","explanation svelte-52p8v6")},m(t,r){_(t,e,r),b(e,n),b(e,i),b(e,o)},p(t,e){8&e&&r!==(r=t[27]+"")&&O(i,r)},d(t){t&&z(e)}}}function fe(t){let e,n,i=t[6]>1&&me(t);return{c(){e=S("div"),n=E("The image size is very close to the size it appears in the browser.\n\t\t\t\t\t\t"),i&&i.c(),j(e,"class","explanation svelte-52p8v6")},m(t,o){_(t,e,o),b(e,n),i&&i.m(e,null)},p(t,n){t[6]>1?i?i.p(t,n):(i=me(t),i.c(),i.m(e,null)):i&&(i.d(1),i=null)},d(t){t&&z(e),i&&i.d()}}}function pe(t){let n;return{c(){n=S("div"),n.textContent="The image is exactly the correct size for this screen.",j(n,"class","explanation svelte-52p8v6")},m(t,e){_(t,n,e)},p:e,d(t){t&&z(n)}}}function ge(t){let e,n,i,o,r,s,c=t[4].weight>450&&$e();return{c(){e=S("div"),n=E("The image loaded is "),i=S("strong"),o=E(t[6]),r=E("x"),s=E(" larger than it appears in the browser.\n\t\t\t\t\t\t"),c&&c.c(),j(e,"class","explanation svelte-52p8v6")},m(t,l){_(t,e,l),b(e,n),b(e,i),b(i,o),b(i,r),b(e,s),c&&c.m(e,null)},p(t,n){64&n&&O(o,t[6]),t[4].weight>450?c||(c=$e(),c.c(),c.m(e,null)):c&&(c.d(1),c=null)},d(t){t&&z(e),c&&c.d()}}}function me(t){let e,n,i,o,r;return{c(){e=E("Because there are various screen sizes, it's okay for the image to be\n\t\t\t\t\t\t\t"),n=S("strong"),i=E(t[6]),o=E("x"),r=E(" than it appears on the page.")},m(t,s){_(t,e,s),_(t,n,s),b(n,i),b(n,o),_(t,r,s)},p(t,e){64&e&&O(i,t[6])},d(t){t&&(z(e),z(n),z(r))}}}function $e(t){let e;return{c(){e=E("Try using a smaller image or reduce the file size by compressing it.")},m(t,n){_(t,e,n)},d(t){t&&z(e)}}}function ve(t){let e,n;return{c(){e=S("img"),a(e.src,n=t[5])||j(e,"src",n),j(e,"alt",t[8]),T(e,"width",t[2]+"px"),T(e,"height",t[7]+"px"),j(e,"width",t[2]),j(e,"height",t[7]),j(e,"class","svelte-52p8v6")},m(t,n){_(t,e,n)},p(t,i){32&i&&!a(e.src,n=t[5])&&j(e,"src",n),256&i&&j(e,"alt",t[8]),4&i&&T(e,"width",t[2]+"px"),128&i&&T(e,"height",t[7]+"px"),4&i&&j(e,"width",t[2]),128&i&&j(e,"height",t[7])},d(t){t&&z(e)}}}function we(t){let e;function n(t,e){return t[16]?xe:be}let i=n(t),o=i(t);return{c(){e=S("div"),o.c(),j(e,"class","value")},m(t,n){_(t,e,n),o.m(e,null)},p(t,r){i!==(i=n(t))&&(o.d(1),o=i(t),o&&(o.c(),o.m(e,null)))},d(t){t&&z(e),o.d()}}}function ye(t){let e,n,i,o,r=t[4].width+"",s=t[4].height+"";return{c(){e=S("div"),n=E(r),i=E(" x "),o=E(s),j(e,"class","value")},m(t,r){_(t,e,r),b(e,n),b(e,i),b(e,o)},p(t,e){16&e&&r!==(r=t[4].width+"")&&O(n,r),16&e&&s!==(s=t[4].height+"")&&O(o,s)},d(t){t&&z(e)}}}function be(t){let e;return{c(){e=S("em"),e.textContent="Unknown"},m(t,n){_(t,e,n)},d(t){t&&z(e)}}}function xe(t){let e;return{c(){e=E("Loading...")},m(t,n){_(t,e,n)},d(t){t&&z(e)}}}function ke(t){let n;return{c(){n=S("em"),n.textContent="Unknown"},m(t,e){_(t,n,e)},p:e,d(t){t&&z(n)}}}function _e(t){let n;return{c(){n=E("Loading...")},m(t,e){_(t,n,e)},p:e,d(t){t&&z(n)}}}function ze(t){let e,n,i=Math.round(t[4].weight)+"";return{c(){e=E(i),n=E(" KB")},m(t,i){_(t,e,i),_(t,n,i)},p(t,n){16&n&&i!==(i=Math.round(t[4].weight)+"")&&O(e,i)},d(t){t&&(z(e),z(n))}}}function Se(t){let n;return{c(){n=S("em"),n.textContent="N/A"},m(t,e){_(t,n,e)},p:e,d(t){t&&z(n)}}}function Ce(t){let n;return{c(){n=E("Loading...")},m(t,e){_(t,n,e)},p:e,d(t){t&&z(n)}}}function Ee(t){let e,n,i;return{c(){e=S("strong"),n=E(t[19]),i=E(" KB")},m(t,o){_(t,e,o),b(e,n),b(e,i)},p(t,e){524288&e&&O(n,t[19])},d(t){t&&z(e)}}}function Le(t){let e,n,i,o,r,s,c,l,a,u,d,h,f,p,g,m,$,v,w,y,x,k,C,P,I,R,F,U,A,B,H,N,D,W,V,G,q,Z,K,X,Y,Q,tt,et,nt,it,ot,rt,st,ct,lt,at=t[17].width+"",ht=t[17].height+"",pt=t[18].width+"",gt=t[18].height+"",wt=`${t[0].top}px`,yt=`${t[0].left}px`;function bt(t,e){return t[6]>=1.3?ge:1===t[6]?pe:t[6]>=.99&&t[6]<1.3?fe:he}function xt(t,e){return e===he?function(t){const e=t.slice(),n=je(1/e[3]);return e[27]=n,e}(t):t}i=new Gt({props:{size:250}});let kt=bt(t),_t=kt(xt(t,kt)),zt=t[5]&&ve(t);function St(t,e){return t[4].width>0&&t[4].height>0?ye:we}let Ct=St(t),Et=Ct(t);function Lt(t,e){return t[4].weight>0?ze:t[16]?_e:ke}let Pt=Lt(t),Mt=Pt(t);function jt(t,e){return t[19]>0?Ee:t[16]?Ce:Se}let Ot=jt(t),Tt=Ot(t);return ot=new de({}),{c(){e=S("div"),n=S("div"),mt(i.$$.fragment),o=L(),r=S("div"),s=S("div"),c=S("div"),l=S("a"),a=E(t[8]),u=L(),_t.c(),d=L(),zt&&zt.c(),h=L(),f=S("div"),p=S("div"),g=S("div"),g.textContent="Image File Dimensions",m=L(),Et.c(),$=L(),v=S("div"),w=S("div"),w.textContent="Expected Dimensions",y=L(),x=S("div"),k=E(at),C=E(" x "),P=E(ht),I=L(),R=S("div"),F=S("div"),F.textContent="Size on screen",U=L(),A=S("div"),B=E(pt),H=E(" x "),N=E(gt),D=L(),W=S("div"),V=S("div"),V.textContent="Image Size",G=L(),q=S("div"),Mt.c(),Z=L(),K=S("div"),X=S("div"),X.textContent="Potential savings",Y=L(),Q=S("div"),Tt.c(),tt=L(),et=S("div"),nt=S("a"),it=E("Learn how to improve site speed by optimizing images "),mt(ot.$$.fragment),j(n,"class","logo svelte-52p8v6"),j(l,"href",t[5]),j(l,"target","_blank noreferrer"),j(l,"class","svelte-52p8v6"),j(c,"class","title svelte-52p8v6"),j(s,"class","description svelte-52p8v6"),j(r,"class","preview svelte-52p8v6"),j(g,"class","label"),j(p,"class","row svelte-52p8v6"),j(w,"class","label"),j(x,"class","value"),j(v,"class","row svelte-52p8v6"),j(F,"class","label"),j(A,"class","value"),j(R,"class","row svelte-52p8v6"),j(V,"class","label"),j(q,"class","value"),j(W,"class","row svelte-52p8v6"),j(X,"class","label"),j(Q,"class","value"),j(K,"class","row svelte-52p8v6"),j(nt,"class","documentation svelte-52p8v6"),j(nt,"href",Me),j(nt,"target","_blank noreferrer"),j(et,"class","info svelte-52p8v6"),j(f,"class","meta"),j(e,"class","jetpack-boost-guide-popup keep-guide-open svelte-52p8v6"),T(e,"top",wt),T(e,"left",yt)},m(z,S){_(z,e,S),b(e,n),$t(i,n,null),b(e,o),b(e,r),b(r,s),b(s,c),b(c,l),b(l,a),b(s,u),_t.m(s,null),b(r,d),zt&&zt.m(r,null),b(e,h),b(e,f),b(f,p),b(p,g),b(p,m),Et.m(p,null),b(f,$),b(f,v),b(v,w),b(v,y),b(v,x),b(x,k),b(x,C),b(x,P),b(f,I),b(f,R),b(R,F),b(R,U),b(R,A),b(A,B),b(A,H),b(A,N),b(f,D),b(f,W),b(W,V),b(W,G),b(W,q),Mt.m(q,null),b(f,Z),b(f,K),b(K,X),b(K,Y),b(K,Q),Tt.m(Q,null),b(f,tt),b(f,et),b(et,nt),b(nt,it),$t(ot,nt,null),st=!0,ct||(lt=M(e,"mouseleave",t[22]),ct=!0)},p(t,n){(!st||256&n)&&O(a,t[8]),(!st||32&n)&&j(l,"href",t[5]),kt===(kt=bt(t))&&_t?_t.p(xt(t,kt),n):(_t.d(1),_t=kt(xt(t,kt)),_t&&(_t.c(),_t.m(s,null))),t[5]?zt?zt.p(t,n):(zt=ve(t),zt.c(),zt.m(r,null)):zt&&(zt.d(1),zt=null),Ct===(Ct=St(t))&&Et?Et.p(t,n):(Et.d(1),Et=Ct(t),Et&&(Et.c(),Et.m(p,null))),(!st||131072&n)&&at!==(at=t[17].width+"")&&O(k,at),(!st||131072&n)&&ht!==(ht=t[17].height+"")&&O(P,ht),(!st||262144&n)&&pt!==(pt=t[18].width+"")&&O(B,pt),(!st||262144&n)&>!==(gt=t[18].height+"")&&O(N,gt),Pt===(Pt=Lt(t))&&Mt?Mt.p(t,n):(Mt.d(1),Mt=Pt(t),Mt&&(Mt.c(),Mt.m(q,null))),Ot===(Ot=jt(t))&&Tt?Tt.p(t,n):(Tt.d(1),Tt=Ot(t),Tt&&(Tt.c(),Tt.m(Q,null))),1&n&&wt!==(wt=`${t[0].top}px`)&&T(e,"top",wt),1&n&&yt!==(yt=`${t[0].left}px`)&&T(e,"left",yt)},i(t){st||(ut(i.$$.fragment,t),ut(ot.$$.fragment,t),t&&(rt||J((()=>{rt=ft(e,Dt,{duration:150,y:4,easing:Bt}),rt.start()}))),st=!0)},o(t){dt(i.$$.fragment,t),dt(ot.$$.fragment,t),st=!1},d(t){t&&z(e),vt(i),_t.d(),zt&&zt.d(),Et.d(),Mt.d(),Tt.d(),vt(ot),ct=!1,lt()}}}function Pe(t){let e,n,i,o,r,s=!1,c=()=>{s=!1};return J(t[23]),n=new ae({props:{$$slots:{default:[Le]},$$scope:{ctx:t}}}),{c(){mt(n.$$.fragment)},m(l,a){$t(n,l,a),i=!0,o||(r=M(window,"scroll",(()=>{s=!0,clearTimeout(e),e=setTimeout(c,100),t[23]()})),o=!0)},p(t,[i]){2&i&&!s&&(s=!0,clearTimeout(e),scrollTo(window.pageXOffset,t[1]),e=setTimeout(c,100));const o={};269419005&i&&(o.$$scope={dirty:i,ctx:t}),n.$set(o)},i(t){i||(ut(n.$$.fragment,t),i=!0)},o(t){dt(n.$$.fragment,t),i=!1},d(t){vt(n,t),o=!1,r()}}}const Me="https://jetpack.com/support/jetpack-boost/image-performance-guide/";function je(t){return t%1==0?t:parseFloat(t.toFixed(2))}function Oe(t,n,i){let o,r,s,c,l,a,d,h,f,p,g,m,$,v,w,y,b,x,k=e,_=e,z=e,S=e,C=e,E=e,L=e;t.$$.on_destroy.push((()=>k())),t.$$.on_destroy.push((()=>_())),t.$$.on_destroy.push((()=>z())),t.$$.on_destroy.push((()=>S())),t.$$.on_destroy.push((()=>C())),t.$$.on_destroy.push((()=>E())),t.$$.on_destroy.push((()=>L()));let{store:P}=n,{size:M}=n,{position:j}=n,O=0,T=0,I=0;return W((()=>{T=O,I=j.top})),t.$$set=t=>{"store"in t&&i(20,P=t.store),"size"in t&&i(21,M=t.size),"position"in t&&i(0,j=t.position)},t.$$.update=()=>{var e;1048576&t.$$.dirty&&(i(15,o=P.loading),S(),S=u(o,(t=>i(16,w=t)))),1048576&t.$$.dirty&&(i(14,r=P.oversizedRatio),k(),k=u(r,(t=>i(3,m=t)))),1048576&t.$$.dirty&&(i(13,s=P.fileSize),_(),_=u(s,(t=>i(4,$=t)))),1048576&t.$$.dirty&&(i(12,c=P.sizeOnPage),E(),E=u(c,(t=>i(18,b=t)))),1048576&t.$$.dirty&&(i(11,l=P.potentialSavings),L(),L=u(l,(t=>i(19,x=t)))),1048576&t.$$.dirty&&(i(10,a=P.expectedSize),C(),C=u(a,(t=>i(17,y=t)))),1048576&t.$$.dirty&&(i(9,d=P.url),z(),z=u(d,(t=>i(5,v=t)))),32&t.$$.dirty&&i(8,h=v.split("/").pop()),2097152&t.$$.dirty&&i(2,f="normal"===M?100:50),20&t.$$.dirty&&i(7,p=Math.floor(f/($.width/$.height))),8&t.$$.dirty&&i(6,g=je(m)),2&t.$$.dirty&&0!==(e=O)&&T!==e&&i(0,j.top=I+(T-e),j)},[j,O,f,m,$,v,g,p,h,d,a,l,c,s,r,o,w,y,b,x,P,M,function(e){V.call(this,t,e)},function(){i(1,O=window.pageYOffset)}]}class Te extends bt{constructor(t){super(),yt(this,t,Oe,Pe,c,{store:20,size:21,position:0})}}function Ie(t,e,n){const i=t.slice();return i[12]=e[n],i[14]=n,i}function Re(t){let e,n,i,o,r,s,c,l=gt(t[0]),a=[];for(let e=0;e<l.length;e+=1)a[e]=Fe(Ie(t,l,e));const u=t=>dt(a[t],1,1,(()=>{a[t]=null}));let d=!1!==t[1]&&Ue(t);return{c(){e=S("div"),n=S("div");for(let t=0;t<a.length;t+=1)a[t].c();i=L(),d&&d.c(),j(n,"class","previews svelte-1828btn"),j(e,"class",o="guide "+t[3]+" svelte-1828btn"),I(e,"show",!1!==t[1]),I(e,"keep-guide-open",!1!==t[1])},m(o,l){_(o,e,l),b(e,n);for(let t=0;t<a.length;t+=1)a[t]&&a[t].m(n,null);b(e,i),d&&d.m(e,null),r=!0,s||(c=M(e,"mouseleave",t[6]),s=!0)},p(t,i){if(257&i){let e;for(l=gt(t[0]),e=0;e<l.length;e+=1){const o=Ie(t,l,e);a[e]?(a[e].p(o,i),ut(a[e],1)):(a[e]=Fe(o),a[e].c(),ut(a[e],1),a[e].m(n,null))}for(lt(),e=l.length;e<a.length;e+=1)u(e);at()}!1!==t[1]?d?(d.p(t,i),2&i&&ut(d,1)):(d=Ue(t),d.c(),ut(d,1),d.m(e,null)):d&&(lt(),dt(d,1,1,(()=>{d=null})),at()),(!r||8&i&&o!==(o="guide "+t[3]+" svelte-1828btn"))&&j(e,"class",o),(!r||10&i)&&I(e,"show",!1!==t[1]),(!r||10&i)&&I(e,"keep-guide-open",!1!==t[1])},i(t){if(!r){for(let t=0;t<l.length;t+=1)ut(a[t]);ut(d),r=!0}},o(t){a=a.filter(Boolean);for(let t=0;t<a.length;t+=1)dt(a[t]);dt(d),r=!1},d(t){t&&z(e),function(t,e){for(let n=0;n<t.length;n+=1)t[n]&&t[n].d(e)}(a,t),d&&d.d(),s=!1,c()}}}function Fe(t){let e,n;return e=new se({props:{index:t[14],store:t[12]}}),e.$on("hover",t[8]),{c(){mt(e.$$.fragment)},m(t,i){$t(e,t,i),n=!0},p(t,n){const i={};1&n&&(i.store=t[12]),e.$set(i)},i(t){n||(ut(e.$$.fragment,t),n=!0)},o(t){dt(e.$$.fragment,t),n=!1},d(t){vt(e,t)}}}function Ue(t){let e,n;return e=new Te({props:{store:t[0][t[1]],size:t[3],position:t[2]}}),e.$on("mouseleave",t[6]),{c(){mt(e.$$.fragment)},m(t,i){$t(e,t,i),n=!0},p(t,n){const i={};3&n&&(i.store=t[0][t[1]]),8&n&&(i.size=t[3]),4&n&&(i.position=t[2]),e.$set(i)},i(t){n||(ut(e.$$.fragment,t),n=!0)},o(t){dt(e.$$.fragment,t),n=!1},d(t){vt(e,t)}}}function Ae(t){let e,n,i="active"===t[4]&&t[5]&&Re(t);return{c(){i&&i.c(),e=P()},m(t,o){i&&i.m(t,o),_(t,e,o),n=!0},p(t,[n]){"active"===t[4]&&t[5]?i?(i.p(t,n),48&n&&ut(i,1)):(i=Re(t),i.c(),ut(i,1),i.m(e.parentNode,e)):i&&(lt(),dt(i,1,1,(()=>{i=null})),at())},i(t){n||(ut(i),n=!0)},o(t){dt(i),n=!1},d(t){t&&z(e),i&&i.d(t)}}}function Be(t,e,n){let i,o,r,s;h(t,Mt,(t=>n(4,r=t)));let{stores:c}=e,l=!1;W((()=>{c.forEach((t=>t.updateDimensions()))}));const a=c[0].sizeOnPage;h(t,a,(t=>n(10,o=t)));let u={top:0,left:0};const d=_t(c.map((t=>t.fileSize)),(t=>t.some((t=>-1!==t.width&&-1!==t.height))));return h(t,d,(t=>n(5,s=t))),t.$$set=t=>{"stores"in t&&n(0,c=t.stores)},t.$$.update=()=>{1024&t.$$.dirty&&n(3,i=function(t=-1,e=-1){return t<200||e<200?"micro":t<400||e<400?"small":"normal"}(o.width,o.height)),2&t.$$.dirty&&function(t=!1){t?c.forEach((t=>t.node.classList.add("jetpack-boost-guide__backdrop"))):c.forEach((t=>t.node.classList.remove("jetpack-boost-guide__backdrop")))}(!1!==l)},[c,l,u,i,r,s,function(t){t.relatedTarget&&t.relatedTarget.classList.contains("keep-guide-open")||n(1,l=!1)},a,function(t){const e=t.detail,i=e.index;n(2,u=e.position),n(1,l=i)},d,o]}class He extends bt{constructor(t){super(),yt(this,t,Be,Ae,c,{stores:0})}}const Ne=[];let De;function We(t){window.frameElement||(De=t,window.addEventListener("load",Ve))}function Ve(){window.addEventListener("resize",function(){let t;return()=>{t&&clearTimeout(t),t=setTimeout((()=>{Ne.forEach((t=>{t.updateDimensions()}))}),500)}}()),Tt.trackInitialState(),Mt.subscribe((async t=>{if("paused"===t)return;const e=await Ut(Array.from(document.querySelectorAll("body *:not(.jetpack-boost-guide > *):not(.jetpack-boost-guide)")),De),n=await Promise.all(e.map((t=>t.isImageTiny())));Ne.push(...function(t){const e=t.reduce(((t,e)=>{var n;if(!e.node.parentNode)return console.error("Image has no parent",e.node),t;const i=function(t){const e=t.node;if(!(t.node instanceof HTMLImageElement)&&["static","relative"].includes(getComputedStyle(e).position))return e.classList.contains("jetpack-boost-guide")||(e.classList.add("jetpack-boost-guide","relative"),e.dataset.jetpackBoostGuideId=(++Ge).toString()),e;if(!e.parentNode||!e.parentElement)return;const n=function(t){let e,n=t.parentElement;for(;n&&n instanceof HTMLElement&&n!==document.body;){const t=getComputedStyle(n),i="inline"!==t.display,o="static"===t.position,r="relative"===t.position,s="auto"!==t.zIndex;i&&(!e&&(o||r)||r&&s)&&(e=n),n=n.parentElement}return e}(e);if(null==n?void 0:n.classList.contains("jetpack-boost-guide"))return n;if(n){const e=getComputedStyle(n);if("relative"===e.position){const t=Array.from(n.children).find((t=>t.classList.contains("jetpack-boost-guide")));if(t&&t instanceof HTMLElement)return t}const i=document.createElement("div");return i.classList.add("jetpack-boost-guide"),i.dataset.jetpackBoostGuideId=(++Ge).toString(),"static"===e.position&&(n.style.position="relative"),t.node instanceof HTMLImageElement&&(i.style.top=`${t.node.offsetTop}px`),n.prepend(i),i}return e.parentElement}(e);if(!i)return console.error("Could not find a parent for image",e),t;const o=parseInt(i.dataset.jetpackBoostGuideId||""),r=(null===(n=t[o])||void 0===n?void 0:n.props.stores)||[],s=new Ot(e);return r.push(s),1===r.length&&(t[o]={target:i,intro:!0,props:{stores:r}}),t}),{});return Object.values(e).map((t=>(new He(t),t.props.stores))).flat()}(e.filter(((t,e)=>!n[e])))),Tt.trackPage(Ne)}))}let Ge=0;function qe(t){let e,n,i,o,r,s,c,l,a,u;return n=new Gt({}),{c(){e=S("a"),mt(n.$$.fragment),i=L(),o=S("span"),r=E("Image Guide: "),s=E(t[2]),j(e,"id","jetpack-boost-guide-bar"),j(e,"href",t[0]),j(e,"class",c="ab-item "+t[1]+" svelte-itog5b")},m(c,d){var h;_(c,e,d),$t(n,e,null),b(e,i),b(e,o),b(o,r),b(o,s),l=!0,a||(u=M(e,"click",(h=t[3],function(t){return t.preventDefault(),h.call(this,t)})),a=!0)},p(t,[n]){(!l||4&n)&&O(s,t[2]),(!l||1&n)&&j(e,"href",t[0]),(!l||2&n&&c!==(c="ab-item "+t[1]+" svelte-itog5b"))&&j(e,"class",c)},i(t){l||(ut(n.$$.fragment,t),l=!0)},o(t){dt(n.$$.fragment,t),l=!1},d(t){t&&z(e),vt(n),a=!1,u()}}}function Ze(t,e,n){let i,o;h(t,Mt,(t=>n(1,i=t))),h(t,jt,(t=>n(2,o=t)));let{href:r}=e,{tracksCallback:s}=e;return t.$$set=t=>{"href"in t&&n(0,r=t.href),"tracksCallback"in t&&n(4,s=t.tracksCallback)},t.$$.update=()=>{16&t.$$.dirty&&Tt.setTracksCallback(s)},[r,i,o,function(){Mt.cycle(),Tt.trackUIStateChange()},s]}class Ke extends bt{constructor(t){super(),yt(this,t,Ze,qe,c,{href:0,tracksCallback:4})}}function Xe(t,{href:e,tracksCallback:n,fetchFunction:i}){return We(i),new Ke({target:t,props:{href:e,tracksCallback:n}})}export{t as MeasurableImage,Ut as getMeasurableImages,Xe as setupImageGuideUI};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/jetpack-image-guide",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.15",
|
|
4
4
|
"description": "Go through the dom to analyze image size on screen vs actual file size.",
|
|
5
5
|
"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/image-guide/#readme",
|
|
6
6
|
"type": "module",
|
|
@@ -23,8 +23,6 @@
|
|
|
23
23
|
"dev-validate-ts": "tsc --watch --pretty --strict false # Note: Disable Strict mode to avoid noisy development, while keeping strict errors visible in IDEs.",
|
|
24
24
|
"dev-compile": "pnpm run clear-dist && rollup -c -w",
|
|
25
25
|
"dev": "concurrently 'pnpm:dev-validate-ts' 'pnpm:dev-compile'",
|
|
26
|
-
"reformat-files": "../../../tools/js-tools/node_modules/.bin/prettier --ignore-path .eslintignore --write --plugin-search-dir=. ./**/*.{svelte,js,ts,json}",
|
|
27
|
-
"lint": "pnpm run reformat-files && echo 'Running eslint...' && pnpm eslint app/assets/src/js tests/e2e --fix && echo '✔ prettier and eslint ran successfully.'",
|
|
28
26
|
"clear-dist": "rm -rf app/assets/dist/*",
|
|
29
27
|
"test-coverage": "pnpm run test --coverage",
|
|
30
28
|
"test": "NODE_OPTIONS=--experimental-vm-modules jest --config=tests/jest.config.cjs"
|
|
@@ -35,7 +33,7 @@
|
|
|
35
33
|
"devDependencies": {
|
|
36
34
|
"@babel/core": "^7.0.0",
|
|
37
35
|
"@babel/preset-env": "7.26.0",
|
|
38
|
-
"@babel/preset-react": "7.
|
|
36
|
+
"@babel/preset-react": "7.26.3",
|
|
39
37
|
"@babel/preset-typescript": "7.26.0",
|
|
40
38
|
"@rollup/plugin-babel": "6.0.4",
|
|
41
39
|
"@rollup/plugin-commonjs": "26.0.1",
|
|
@@ -44,8 +42,6 @@
|
|
|
44
42
|
"@rollup/plugin-replace": "5.0.2",
|
|
45
43
|
"@rollup/plugin-terser": "0.4.3",
|
|
46
44
|
"@rollup/plugin-typescript": "12.1.0",
|
|
47
|
-
"@typescript-eslint/parser": "6.21.0",
|
|
48
|
-
"eslint": "8.57.1",
|
|
49
45
|
"jest": "29.7.0",
|
|
50
46
|
"postcss": "8.4.47",
|
|
51
47
|
"rollup": "3.29.5",
|