@alanizcreative/formation-static 1.3.0-beta.51 → 1.3.0-beta.52
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/cjs/utils/image/image.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getImageSizes=exports.getImageClosestSize=exports.getImage=void 0;const config_js_1=require("../../config/config.js"),string_js_1=require("../string/string.js"),array_js_1=require("../array/array.js"),number_js_1=require("../number/number.js"),object_js_1=require("../object/object.js"),dataSource_js_1=require("../dataSource/dataSource.js"),getImageUrl=(url,format,quality,width,height,params)=>{const urlObj=new URL(url);return Object.entries(params).forEach(([key,value])=>{let val=value;"%format"===val&&(val=format),"%quality"===val&&(val=`${quality}`),"%width"===val&&(val=`${width}`),"%height"===val&&(val=`${height}`),urlObj.searchParams.set(key,val)}),urlObj.toString()},getImage=(args,returnDetails=!1)=>{const{data:data,classes:classes,attr:attr,alt:imageAlt="inherit",width:width="auto",height:height="auto",lazy:lazy=!0,picture:picture=!1,quality:quality=75,source:source=config_js_1.config.source,maxWidth:maxWidth=1200,viewportWidth:viewportWidth=100,sizes:sizes,format:format="webp",params:params={fm:"%format",q:"%quality",w:"%width",h:"%height"}}=(0,object_js_1.isObjectStrict)(args)?args:{},fallback=returnDetails?{output:"",aspectRatio:0,naturalWidth:0,naturalHeight:0,src:"",srcFallback:"",srcset:[],sizes:""}:"";if(!(0,object_js_1.isObjectStrict)(data))return fallback;const{path:path="",alt:dataAlt="",width:naturalWidth=1,height:naturalHeight=1,format:naturalFormat="jpg",sizes:dataSizes}=data;let{url:url=config_js_1.config.image.remoteUrl}=data,alt="inherit"===imageAlt?dataAlt:imageAlt;(0,string_js_1.isStringStrict)(alt)||(alt="");const isLocal="local"===source,isRemote=dataSource_js_1.dataSource.isContentful(source)||"remote"===source,isWordpress=dataSource_js_1.dataSource.isWordPress(source);if(isLocal){if(!(0,string_js_1.isStringStrict)(path))return fallback;url=`${config_js_1.config.image.localUrl}/${path}`}const aspectRatio=naturalHeight/naturalWidth,aspectRatioReverse=naturalWidth/naturalHeight;let w=naturalWidth,h=naturalHeight;if((0,number_js_1.isNumber)(width)&&(w=width,h=(0,string_js_1.isString)(height)?w*aspectRatio:height),(0,number_js_1.isNumber)(height)&&(h=height,w=(0,string_js_1.isString)(width)?h*aspectRatioReverse:width),w>maxWidth&&(w=Math.round(maxWidth),h=Math.round(w*aspectRatio)),isWordpress&&dataSizes&&!dataSizes[w]){const isNatural=w===naturalWidth;isNatural||(w=getImageClosestSize(w,Object.keys(dataSizes).map(s=>parseInt(s,10))),h=Math.round(w*aspectRatio)),isNatural&&(dataSizes[w]=url)}let src=url,srcFallback=url;isLocal&&(src=`${url}.${format}`,srcFallback=`${url}.${naturalFormat}`),isRemote&&(src=getImageUrl(url,format,quality,w,h,params),srcFallback=getImageUrl(url,naturalFormat,quality,w,h,params));const sizesValue=sizes||`(min-width: ${w/16}rem) ${w/16}rem, ${viewportWidth}vw`,srcsetFallback=[];let srcset=[...config_js_1.config.image.sizes];srcset.includes(w)||srcset.push(w),srcset=srcset.filter(s=>s<=w),srcset.sort((a,b)=>a-b);const srcsetSource=[];srcset.forEach(s=>{if(isLocal){const base=`${url}${s!==naturalWidth?`@${s}`:""}`;srcsetFallback.push(`${base}.${naturalFormat} ${s}w`),srcsetSource.push(`${base}.${format} ${s}w`)}if(isRemote){const sizeHeight=Math.round(s*aspectRatio);srcsetFallback.push(getImageUrl(url,naturalFormat,quality,s,sizeHeight,params)+` ${s}w`),srcsetSource.push(getImageUrl(url,format,quality,s,sizeHeight,params)+` ${s}w`)}if(isWordpress){const sizeUrl=dataSizes?.[s];(0,string_js_1.isStringStrict)(sizeUrl)&&srcsetSource.push(`${sizeUrl} ${s}w`)}});let sourceOutput="";picture&&(sourceOutput=`<source srcset="${srcsetSource.join(", ")}" sizes="${sizesValue}" type="image/${format}">`);let eagerHackOutput="";lazy||(eagerHackOutput=`\n <img\n alt=""\n role="presentation"\n aria-hidden="true"\n src="data:image/svg+xml;charset=utf-8,%3Csvg height='${h}' width='${w}' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="pointerEvents: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%"\n >\n `);const output=`\n ${eagerHackOutput}\n ${sourceOutput}\n <img\n ${(0,string_js_1.isStringStrict)(classes)?` class="${classes}"`:""}\n alt="${alt}"\n src="${picture?srcFallback:src}"\n srcset="${picture?srcsetFallback.join(", "):srcsetSource.join(", ")}"\n sizes="${sizesValue}"\n width="${w}"\n height="${h}"\n ${(0,string_js_1.isStringStrict)(attr)?` ${attr}`:""}\n ${lazy?' loading="lazy" decoding="async"':' loading="eager" fetchpriority="high"'}\n >\n `;return returnDetails?{output:output,aspectRatio:aspectRatio,naturalWidth:naturalWidth,naturalHeight:naturalHeight,src:src,srcFallback:srcFallback,srcset:srcsetSource,sizes:sizesValue}:output};exports.getImage=getImage;const getImageClosestSize=(size,sizes=[])=>(sizes.length||(sizes=config_js_1.config.image.sizes),[...sizes].reduce((prev,curr)=>Math.abs(curr-size)<=Math.abs(prev-size)?curr:prev));exports.getImageClosestSize=getImageClosestSize;const getImageSizes=args=>{const fallback={maxWidth:0,sizes:""};if(!(0,object_js_1.isObjectStrict)(args))return fallback;const{parents:parents,widths:widths,maxWidths:maxWidths,breakpoints:breakpoints,source:source=config_js_1.config.source,viewportWidth:viewportWidth=100}=args;if(!((0,array_js_1.isArrayStrict)(parents)&&(0,object_js_1.isObjectStrict)(widths)&&(0,object_js_1.isObjectStrict)(maxWidths)&&(0,array_js_1.isArrayStrict)(breakpoints)))return fallback;let
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getImageSizes=exports.getImageClosestSize=exports.getImage=void 0;const config_js_1=require("../../config/config.js"),string_js_1=require("../string/string.js"),array_js_1=require("../array/array.js"),number_js_1=require("../number/number.js"),object_js_1=require("../object/object.js"),dataSource_js_1=require("../dataSource/dataSource.js"),getImageUrl=(url,format,quality,width,height,params)=>{const urlObj=new URL(url);return Object.entries(params).forEach(([key,value])=>{let val=value;"%format"===val&&(val=format),"%quality"===val&&(val=`${quality}`),"%width"===val&&(val=`${width}`),"%height"===val&&(val=`${height}`),urlObj.searchParams.set(key,val)}),urlObj.toString()},getImage=(args,returnDetails=!1)=>{const{data:data,classes:classes,attr:attr,alt:imageAlt="inherit",width:width="auto",height:height="auto",lazy:lazy=!0,picture:picture=!1,quality:quality=75,source:source=config_js_1.config.source,maxWidth:maxWidth=1200,viewportWidth:viewportWidth=100,sizes:sizes,format:format="webp",params:params={fm:"%format",q:"%quality",w:"%width",h:"%height"}}=(0,object_js_1.isObjectStrict)(args)?args:{},fallback=returnDetails?{output:"",aspectRatio:0,naturalWidth:0,naturalHeight:0,src:"",srcFallback:"",srcset:[],sizes:""}:"";if(!(0,object_js_1.isObjectStrict)(data))return fallback;const{path:path="",alt:dataAlt="",width:naturalWidth=1,height:naturalHeight=1,format:naturalFormat="jpg",sizes:dataSizes}=data;let{url:url=config_js_1.config.image.remoteUrl}=data,alt="inherit"===imageAlt?dataAlt:imageAlt;(0,string_js_1.isStringStrict)(alt)||(alt="");const isLocal="local"===source,isRemote=dataSource_js_1.dataSource.isContentful(source)||"remote"===source,isWordpress=dataSource_js_1.dataSource.isWordPress(source);if(isLocal){if(!(0,string_js_1.isStringStrict)(path))return fallback;url=`${config_js_1.config.image.localUrl}/${path}`}const aspectRatio=naturalHeight/naturalWidth,aspectRatioReverse=naturalWidth/naturalHeight;let w=naturalWidth,h=naturalHeight;if((0,number_js_1.isNumber)(width)&&(w=width,h=(0,string_js_1.isString)(height)?w*aspectRatio:height),(0,number_js_1.isNumber)(height)&&(h=height,w=(0,string_js_1.isString)(width)?h*aspectRatioReverse:width),w>maxWidth&&(w=Math.round(maxWidth),h=Math.round(w*aspectRatio)),isWordpress&&dataSizes&&!dataSizes[w]){const isNatural=w===naturalWidth;isNatural||(w=getImageClosestSize(w,Object.keys(dataSizes).map(s=>parseInt(s,10))),h=Math.round(w*aspectRatio)),isNatural&&(dataSizes[w]=url)}let src=url,srcFallback=url;isLocal&&(src=`${url}.${format}`,srcFallback=`${url}.${naturalFormat}`),isRemote&&(src=getImageUrl(url,format,quality,w,h,params),srcFallback=getImageUrl(url,naturalFormat,quality,w,h,params));const sizesValue=sizes||`(min-width: ${w/16}rem) ${w/16}rem, ${viewportWidth}vw`,srcsetFallback=[];let srcset=[...config_js_1.config.image.sizes];srcset.includes(w)||srcset.push(w),srcset=srcset.filter(s=>s<=w),srcset.sort((a,b)=>a-b);const srcsetSource=[];srcset.forEach(s=>{if(isLocal){const base=`${url}${s!==naturalWidth?`@${s}`:""}`;srcsetFallback.push(`${base}.${naturalFormat} ${s}w`),srcsetSource.push(`${base}.${format} ${s}w`)}if(isRemote){const sizeHeight=Math.round(s*aspectRatio);srcsetFallback.push(getImageUrl(url,naturalFormat,quality,s,sizeHeight,params)+` ${s}w`),srcsetSource.push(getImageUrl(url,format,quality,s,sizeHeight,params)+` ${s}w`)}if(isWordpress){const sizeUrl=dataSizes?.[s];(0,string_js_1.isStringStrict)(sizeUrl)&&srcsetSource.push(`${sizeUrl} ${s}w`)}});let sourceOutput="";picture&&(sourceOutput=`<source srcset="${srcsetSource.join(", ")}" sizes="${sizesValue}" type="image/${format}">`);let eagerHackOutput="";lazy||(eagerHackOutput=`\n <img\n alt=""\n role="presentation"\n aria-hidden="true"\n src="data:image/svg+xml;charset=utf-8,%3Csvg height='${h}' width='${w}' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="pointerEvents: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%"\n >\n `);const output=`\n ${eagerHackOutput}\n ${sourceOutput}\n <img\n ${(0,string_js_1.isStringStrict)(classes)?` class="${classes}"`:""}\n alt="${alt}"\n src="${picture?srcFallback:src}"\n srcset="${picture?srcsetFallback.join(", "):srcsetSource.join(", ")}"\n sizes="${sizesValue}"\n width="${w}"\n height="${h}"\n ${(0,string_js_1.isStringStrict)(attr)?` ${attr}`:""}\n ${lazy?' loading="lazy" decoding="async"':' loading="eager" fetchpriority="high"'}\n >\n `;return returnDetails?{output:output,aspectRatio:aspectRatio,naturalWidth:naturalWidth,naturalHeight:naturalHeight,src:src,srcFallback:srcFallback,srcset:srcsetSource,sizes:sizesValue}:output};exports.getImage=getImage;const getImageClosestSize=(size,sizes=[])=>(sizes.length||(sizes=config_js_1.config.image.sizes),[...sizes].reduce((prev,curr)=>Math.abs(curr-size)<=Math.abs(prev-size)?curr:prev));exports.getImageClosestSize=getImageClosestSize;const getImageSizes=args=>{const fallback={maxWidth:0,sizes:""};if(!(0,object_js_1.isObjectStrict)(args))return fallback;const{parents:parents,widths:widths,maxWidths:maxWidths,breakpoints:breakpoints,source:source=config_js_1.config.source,viewportWidth:viewportWidth=100}=args;if(!((0,array_js_1.isArrayStrict)(parents)&&(0,object_js_1.isObjectStrict)(widths)&&(0,object_js_1.isObjectStrict)(maxWidths)&&(0,array_js_1.isArrayStrict)(breakpoints)))return fallback;let containerWidth=0;const columnWidths=[];let col=1,colSmall=1,colMedium=1,colLarge=1;parents.forEach(parent=>{if(!(0,object_js_1.isObjectStrict)(parent))return;const{renderType:renderType,args:args}=parent;if((0,object_js_1.isObjectStrict)(args)){if("column"===renderType){const{width:width="Default",widthSmall:widthSmall="Default",widthMedium:widthMedium="Default",widthLarge:widthLarge="Default"}=args,base=(0,number_js_1.isNumber)(widths[width])&&widths[width]?widths[width]:1,baseSmall=(0,number_js_1.isNumber)(widths[widthSmall])&&widths[widthSmall]?widths[widthSmall]:base,baseMedium=(0,number_js_1.isNumber)(widths[widthMedium])&&widths[widthMedium]?widths[widthMedium]:baseSmall,baseLarge=(0,number_js_1.isNumber)(widths[widthLarge])&&widths[widthLarge]?widths[widthLarge]:baseMedium;col*=base,colSmall*=baseSmall,colMedium*=baseMedium,colLarge*=baseLarge,columnWidths[0]=col,columnWidths[1]=colSmall,columnWidths[2]=colMedium,columnWidths[3]=colLarge}if("container"===renderType){const{maxWidth:maxWidth="Default"}=args;(0,number_js_1.isNumber)(maxWidths[maxWidth])&&(containerWidth=maxWidths[maxWidth])}}});const columnWidthsLen=columnWidths.length,hasContainerWidth=!!containerWidth;if(!columnWidthsLen&&!hasContainerWidth)return fallback;const breakpointsLen=breakpoints.length,maxWidthArr=[],sizesArr=[],sizeFactor=viewportWidth/100;let lastWidth=1,lastBreakpoint=0,lastSize="",containerWidthAdded=!1;for(let i=0;i<breakpointsLen;i+=1){const breakpoint=breakpoints[i],width=columnWidths[i];if(!(0,number_js_1.isNumber)(width))continue;const gteContainerWidth=hasContainerWidth&&breakpoint>=containerWidth,breakpointWidth=Math.round(width*(gteContainerWidth?containerWidth:breakpoint)),sizeWidth=gteContainerWidth?breakpointWidth/16:100*width*sizeFactor,size=gteContainerWidth?`${sizeWidth}rem`:`${sizeWidth%1==0?sizeWidth:sizeWidth.toFixed(2)}vw`;if(hasContainerWidth&&containerWidth>lastBreakpoint&&containerWidth<breakpoint){const relMaxWidth=Math.round(lastWidth*containerWidth),relSize=relMaxWidth/16+"rem";maxWidthArr.push(relMaxWidth),sizesArr.push(`(min-width: ${containerWidth/16}rem) ${relSize}`),containerWidthAdded=!0,lastSize=relSize}maxWidthArr.push(breakpointWidth),lastSize!==size&&sizesArr.push(breakpoint?`(min-width: ${breakpoint/16}rem) ${size}`:size),lastWidth=width,lastBreakpoint=breakpoint,lastSize=size}if(!containerWidthAdded&&hasContainerWidth&&containerWidth>lastBreakpoint){const relMaxWidth=Math.round(lastWidth*containerWidth),relSize=relMaxWidth/16+"rem";maxWidthArr.push(relMaxWidth),sizesArr.push(`(min-width: ${containerWidth/16}rem) ${relSize}`)}const maxWidth=2*Math.max(...maxWidthArr);if(!columnWidthsLen||1===col&&1===colSmall&&1===colMedium&&1===colLarge){const sizeWidth=maxWidth/32+"rem";sizesArr[0]=`${viewportWidth}vw`,sizesArr[1]=`(min-width: ${sizeWidth}) ${sizeWidth}`}const sizes=sizesArr.reverse().join(", ");return"local"===source?{maxWidth:getImageClosestSize(maxWidth),sizes:sizes}:{maxWidth:maxWidth,sizes:sizes}};exports.getImageSizes=getImageSizes;
|
package/lib/utils/image/image.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{config}from"../../config/config.js";import{isString,isStringStrict}from"../string/string.js";import{isArrayStrict}from"../array/array.js";import{isNumber}from"../number/number.js";import{isObjectStrict}from"../object/object.js";import{dataSource}from"../dataSource/dataSource.js";const getImageUrl=(url,format,quality,width,height,params)=>{const urlObj=new URL(url);return Object.entries(params).forEach(([key,value])=>{let val=value;"%format"===val&&(val=format),"%quality"===val&&(val=`${quality}`),"%width"===val&&(val=`${width}`),"%height"===val&&(val=`${height}`),urlObj.searchParams.set(key,val)}),urlObj.toString()},getImage=(args,returnDetails=!1)=>{const{data:data,classes:classes,attr:attr,alt:imageAlt="inherit",width:width="auto",height:height="auto",lazy:lazy=!0,picture:picture=!1,quality:quality=75,source:source=config.source,maxWidth:maxWidth=1200,viewportWidth:viewportWidth=100,sizes:sizes,format:format="webp",params:params={fm:"%format",q:"%quality",w:"%width",h:"%height"}}=isObjectStrict(args)?args:{},fallback=returnDetails?{output:"",aspectRatio:0,naturalWidth:0,naturalHeight:0,src:"",srcFallback:"",srcset:[],sizes:""}:"";if(!isObjectStrict(data))return fallback;const{path:path="",alt:dataAlt="",width:naturalWidth=1,height:naturalHeight=1,format:naturalFormat="jpg",sizes:dataSizes}=data;let{url:url=config.image.remoteUrl}=data,alt="inherit"===imageAlt?dataAlt:imageAlt;isStringStrict(alt)||(alt="");const isLocal="local"===source,isRemote=dataSource.isContentful(source)||"remote"===source,isWordpress=dataSource.isWordPress(source);if(isLocal){if(!isStringStrict(path))return fallback;url=`${config.image.localUrl}/${path}`}const aspectRatio=naturalHeight/naturalWidth,aspectRatioReverse=naturalWidth/naturalHeight;let w=naturalWidth,h=naturalHeight;if(isNumber(width)&&(w=width,h=isString(height)?w*aspectRatio:height),isNumber(height)&&(h=height,w=isString(width)?h*aspectRatioReverse:width),w>maxWidth&&(w=Math.round(maxWidth),h=Math.round(w*aspectRatio)),isWordpress&&dataSizes&&!dataSizes[w]){const isNatural=w===naturalWidth;isNatural||(w=getImageClosestSize(w,Object.keys(dataSizes).map(s=>parseInt(s,10))),h=Math.round(w*aspectRatio)),isNatural&&(dataSizes[w]=url)}let src=url,srcFallback=url;isLocal&&(src=`${url}.${format}`,srcFallback=`${url}.${naturalFormat}`),isRemote&&(src=getImageUrl(url,format,quality,w,h,params),srcFallback=getImageUrl(url,naturalFormat,quality,w,h,params));const sizesValue=sizes||`(min-width: ${w/16}rem) ${w/16}rem, ${viewportWidth}vw`,srcsetFallback=[];let srcset=[...config.image.sizes];srcset.includes(w)||srcset.push(w),srcset=srcset.filter(s=>s<=w),srcset.sort((a,b)=>a-b);const srcsetSource=[];srcset.forEach(s=>{if(isLocal){const base=`${url}${s!==naturalWidth?`@${s}`:""}`;srcsetFallback.push(`${base}.${naturalFormat} ${s}w`),srcsetSource.push(`${base}.${format} ${s}w`)}if(isRemote){const sizeHeight=Math.round(s*aspectRatio);srcsetFallback.push(getImageUrl(url,naturalFormat,quality,s,sizeHeight,params)+` ${s}w`),srcsetSource.push(getImageUrl(url,format,quality,s,sizeHeight,params)+` ${s}w`)}if(isWordpress){const sizeUrl=dataSizes?.[s];isStringStrict(sizeUrl)&&srcsetSource.push(`${sizeUrl} ${s}w`)}});let sourceOutput="";picture&&(sourceOutput=`<source srcset="${srcsetSource.join(", ")}" sizes="${sizesValue}" type="image/${format}">`);let eagerHackOutput="";lazy||(eagerHackOutput=`\n <img\n alt=""\n role="presentation"\n aria-hidden="true"\n src="data:image/svg+xml;charset=utf-8,%3Csvg height='${h}' width='${w}' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="pointerEvents: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%"\n >\n `);const output=`\n ${eagerHackOutput}\n ${sourceOutput}\n <img\n ${isStringStrict(classes)?` class="${classes}"`:""}\n alt="${alt}"\n src="${picture?srcFallback:src}"\n srcset="${picture?srcsetFallback.join(", "):srcsetSource.join(", ")}"\n sizes="${sizesValue}"\n width="${w}"\n height="${h}"\n ${isStringStrict(attr)?` ${attr}`:""}\n ${lazy?' loading="lazy" decoding="async"':' loading="eager" fetchpriority="high"'}\n >\n `;return returnDetails?{output:output,aspectRatio:aspectRatio,naturalWidth:naturalWidth,naturalHeight:naturalHeight,src:src,srcFallback:srcFallback,srcset:srcsetSource,sizes:sizesValue}:output},getImageClosestSize=(size,sizes=[])=>(sizes.length||(sizes=config.image.sizes),[...sizes].reduce((prev,curr)=>Math.abs(curr-size)<=Math.abs(prev-size)?curr:prev)),getImageSizes=args=>{const fallback={maxWidth:0,sizes:""};if(!isObjectStrict(args))return fallback;const{parents:parents,widths:widths,maxWidths:maxWidths,breakpoints:breakpoints,source:source=config.source,viewportWidth:viewportWidth=100}=args;if(!(isArrayStrict(parents)&&isObjectStrict(widths)&&isObjectStrict(maxWidths)&&isArrayStrict(breakpoints)))return fallback;let
|
|
1
|
+
import{config}from"../../config/config.js";import{isString,isStringStrict}from"../string/string.js";import{isArrayStrict}from"../array/array.js";import{isNumber}from"../number/number.js";import{isObjectStrict}from"../object/object.js";import{dataSource}from"../dataSource/dataSource.js";const getImageUrl=(url,format,quality,width,height,params)=>{const urlObj=new URL(url);return Object.entries(params).forEach(([key,value])=>{let val=value;"%format"===val&&(val=format),"%quality"===val&&(val=`${quality}`),"%width"===val&&(val=`${width}`),"%height"===val&&(val=`${height}`),urlObj.searchParams.set(key,val)}),urlObj.toString()},getImage=(args,returnDetails=!1)=>{const{data:data,classes:classes,attr:attr,alt:imageAlt="inherit",width:width="auto",height:height="auto",lazy:lazy=!0,picture:picture=!1,quality:quality=75,source:source=config.source,maxWidth:maxWidth=1200,viewportWidth:viewportWidth=100,sizes:sizes,format:format="webp",params:params={fm:"%format",q:"%quality",w:"%width",h:"%height"}}=isObjectStrict(args)?args:{},fallback=returnDetails?{output:"",aspectRatio:0,naturalWidth:0,naturalHeight:0,src:"",srcFallback:"",srcset:[],sizes:""}:"";if(!isObjectStrict(data))return fallback;const{path:path="",alt:dataAlt="",width:naturalWidth=1,height:naturalHeight=1,format:naturalFormat="jpg",sizes:dataSizes}=data;let{url:url=config.image.remoteUrl}=data,alt="inherit"===imageAlt?dataAlt:imageAlt;isStringStrict(alt)||(alt="");const isLocal="local"===source,isRemote=dataSource.isContentful(source)||"remote"===source,isWordpress=dataSource.isWordPress(source);if(isLocal){if(!isStringStrict(path))return fallback;url=`${config.image.localUrl}/${path}`}const aspectRatio=naturalHeight/naturalWidth,aspectRatioReverse=naturalWidth/naturalHeight;let w=naturalWidth,h=naturalHeight;if(isNumber(width)&&(w=width,h=isString(height)?w*aspectRatio:height),isNumber(height)&&(h=height,w=isString(width)?h*aspectRatioReverse:width),w>maxWidth&&(w=Math.round(maxWidth),h=Math.round(w*aspectRatio)),isWordpress&&dataSizes&&!dataSizes[w]){const isNatural=w===naturalWidth;isNatural||(w=getImageClosestSize(w,Object.keys(dataSizes).map(s=>parseInt(s,10))),h=Math.round(w*aspectRatio)),isNatural&&(dataSizes[w]=url)}let src=url,srcFallback=url;isLocal&&(src=`${url}.${format}`,srcFallback=`${url}.${naturalFormat}`),isRemote&&(src=getImageUrl(url,format,quality,w,h,params),srcFallback=getImageUrl(url,naturalFormat,quality,w,h,params));const sizesValue=sizes||`(min-width: ${w/16}rem) ${w/16}rem, ${viewportWidth}vw`,srcsetFallback=[];let srcset=[...config.image.sizes];srcset.includes(w)||srcset.push(w),srcset=srcset.filter(s=>s<=w),srcset.sort((a,b)=>a-b);const srcsetSource=[];srcset.forEach(s=>{if(isLocal){const base=`${url}${s!==naturalWidth?`@${s}`:""}`;srcsetFallback.push(`${base}.${naturalFormat} ${s}w`),srcsetSource.push(`${base}.${format} ${s}w`)}if(isRemote){const sizeHeight=Math.round(s*aspectRatio);srcsetFallback.push(getImageUrl(url,naturalFormat,quality,s,sizeHeight,params)+` ${s}w`),srcsetSource.push(getImageUrl(url,format,quality,s,sizeHeight,params)+` ${s}w`)}if(isWordpress){const sizeUrl=dataSizes?.[s];isStringStrict(sizeUrl)&&srcsetSource.push(`${sizeUrl} ${s}w`)}});let sourceOutput="";picture&&(sourceOutput=`<source srcset="${srcsetSource.join(", ")}" sizes="${sizesValue}" type="image/${format}">`);let eagerHackOutput="";lazy||(eagerHackOutput=`\n <img\n alt=""\n role="presentation"\n aria-hidden="true"\n src="data:image/svg+xml;charset=utf-8,%3Csvg height='${h}' width='${w}' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="pointerEvents: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%"\n >\n `);const output=`\n ${eagerHackOutput}\n ${sourceOutput}\n <img\n ${isStringStrict(classes)?` class="${classes}"`:""}\n alt="${alt}"\n src="${picture?srcFallback:src}"\n srcset="${picture?srcsetFallback.join(", "):srcsetSource.join(", ")}"\n sizes="${sizesValue}"\n width="${w}"\n height="${h}"\n ${isStringStrict(attr)?` ${attr}`:""}\n ${lazy?' loading="lazy" decoding="async"':' loading="eager" fetchpriority="high"'}\n >\n `;return returnDetails?{output:output,aspectRatio:aspectRatio,naturalWidth:naturalWidth,naturalHeight:naturalHeight,src:src,srcFallback:srcFallback,srcset:srcsetSource,sizes:sizesValue}:output},getImageClosestSize=(size,sizes=[])=>(sizes.length||(sizes=config.image.sizes),[...sizes].reduce((prev,curr)=>Math.abs(curr-size)<=Math.abs(prev-size)?curr:prev)),getImageSizes=args=>{const fallback={maxWidth:0,sizes:""};if(!isObjectStrict(args))return fallback;const{parents:parents,widths:widths,maxWidths:maxWidths,breakpoints:breakpoints,source:source=config.source,viewportWidth:viewportWidth=100}=args;if(!(isArrayStrict(parents)&&isObjectStrict(widths)&&isObjectStrict(maxWidths)&&isArrayStrict(breakpoints)))return fallback;let containerWidth=0;const columnWidths=[];let col=1,colSmall=1,colMedium=1,colLarge=1;parents.forEach(parent=>{if(!isObjectStrict(parent))return;const{renderType:renderType,args:args}=parent;if(isObjectStrict(args)){if("column"===renderType){const{width:width="Default",widthSmall:widthSmall="Default",widthMedium:widthMedium="Default",widthLarge:widthLarge="Default"}=args,base=isNumber(widths[width])&&widths[width]?widths[width]:1,baseSmall=isNumber(widths[widthSmall])&&widths[widthSmall]?widths[widthSmall]:base,baseMedium=isNumber(widths[widthMedium])&&widths[widthMedium]?widths[widthMedium]:baseSmall,baseLarge=isNumber(widths[widthLarge])&&widths[widthLarge]?widths[widthLarge]:baseMedium;col*=base,colSmall*=baseSmall,colMedium*=baseMedium,colLarge*=baseLarge,columnWidths[0]=col,columnWidths[1]=colSmall,columnWidths[2]=colMedium,columnWidths[3]=colLarge}if("container"===renderType){const{maxWidth:maxWidth="Default"}=args;isNumber(maxWidths[maxWidth])&&(containerWidth=maxWidths[maxWidth])}}});const columnWidthsLen=columnWidths.length,hasContainerWidth=!!containerWidth;if(!columnWidthsLen&&!hasContainerWidth)return fallback;const breakpointsLen=breakpoints.length,maxWidthArr=[],sizesArr=[],sizeFactor=viewportWidth/100;let lastWidth=1,lastBreakpoint=0,lastSize="",containerWidthAdded=!1;for(let i=0;i<breakpointsLen;i+=1){const breakpoint=breakpoints[i],width=columnWidths[i];if(!isNumber(width))continue;const gteContainerWidth=hasContainerWidth&&breakpoint>=containerWidth,breakpointWidth=Math.round(width*(gteContainerWidth?containerWidth:breakpoint)),sizeWidth=gteContainerWidth?breakpointWidth/16:100*width*sizeFactor,size=gteContainerWidth?`${sizeWidth}rem`:`${sizeWidth%1==0?sizeWidth:sizeWidth.toFixed(2)}vw`;if(hasContainerWidth&&containerWidth>lastBreakpoint&&containerWidth<breakpoint){const relMaxWidth=Math.round(lastWidth*containerWidth),relSize=relMaxWidth/16+"rem";maxWidthArr.push(relMaxWidth),sizesArr.push(`(min-width: ${containerWidth/16}rem) ${relSize}`),containerWidthAdded=!0,lastSize=relSize}maxWidthArr.push(breakpointWidth),lastSize!==size&&sizesArr.push(breakpoint?`(min-width: ${breakpoint/16}rem) ${size}`:size),lastWidth=width,lastBreakpoint=breakpoint,lastSize=size}if(!containerWidthAdded&&hasContainerWidth&&containerWidth>lastBreakpoint){const relMaxWidth=Math.round(lastWidth*containerWidth),relSize=relMaxWidth/16+"rem";maxWidthArr.push(relMaxWidth),sizesArr.push(`(min-width: ${containerWidth/16}rem) ${relSize}`)}const maxWidth=2*Math.max(...maxWidthArr);if(!columnWidthsLen||1===col&&1===colSmall&&1===colMedium&&1===colLarge){const sizeWidth=maxWidth/32+"rem";sizesArr[0]=`${viewportWidth}vw`,sizesArr[1]=`(min-width: ${sizeWidth}) ${sizeWidth}`}const sizes=sizesArr.reverse().join(", ");return"local"===source?{maxWidth:getImageClosestSize(maxWidth),sizes:sizes}:{maxWidth:maxWidth,sizes:sizes}};export{getImage,getImageClosestSize,getImageSizes};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alanizcreative/formation-static",
|
|
3
|
-
"version": "1.3.0-beta.
|
|
3
|
+
"version": "1.3.0-beta.52",
|
|
4
4
|
"description": "Foundation and utilities to build static sites using local JSON files, Contentful, or WordPress",
|
|
5
5
|
"main": "./lib/config/config.js",
|
|
6
6
|
"packageManager": "pnpm@10.18.3",
|