@alanizcreative/formation-static 1.3.0-beta.49 → 1.3.0-beta.51
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/components/Pagination/Pagination.js +1 -1
- package/cjs/components/Pagination/PaginationTypes.d.ts +10 -0
- package/cjs/utils/image/image.d.ts +3 -3
- package/cjs/utils/image/image.js +1 -1
- package/cjs/utils/image/imageTypes.d.ts +9 -3
- package/lib/components/Pagination/Pagination.js +1 -1
- package/lib/components/Pagination/PaginationTypes.d.ts +10 -0
- package/lib/utils/image/image.d.ts +3 -3
- package/lib/utils/image/image.js +1 -1
- package/lib/utils/image/imageTypes.d.ts +9 -3
- package/package.json +9 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Pagination=void 0;const object_js_1=require("../../utils/object/object.js"),string_js_1=require("../../utils/string/string.js"),Pagination=props=>{const fallback={output:"",data:{}};if(!(0,object_js_1.isObjectStrict)(props))return fallback;const{total:total=1,display:display=5,current:current=1,filters:filters,url:url,ellipsis:ellipsis,prev:prev="",next:next="",prevLabel:prevLabel="Previous page",nextLabel:nextLabel="Next page",currentLabel:currentLabel="Current page",pageLabel:pageLabel="Page",titleTemplate:titleTemplate="Page %current of %total",args:args}=props,{listClass:listClass,listAttr:listAttr,itemClass:itemClass,itemAttr:itemAttr,linkClass:linkClass,linkAttr:linkAttr,currentClass:currentClass,a11yClass:a11yClass="a-hide-vis",prevSpanClass:prevSpanClass,prevLinkClass:prevLinkClass,nextSpanClass:nextSpanClass,nextLinkClass:nextLinkClass}=(0,object_js_1.isObjectStrict)(args)?args:{};if(total<=1||!(0,string_js_1.isStringStrict)(url))return fallback;let output="";const hasFilters=(0,object_js_1.isObjectStrict)(filters);let prevParams={},nextParams={},currentParams={};const prevPage=current-1,nextPage=current+1<=total?current+1:0;current>1&&(currentParams.page=current.toString()),prevPage>1&&(prevParams.page=prevPage.toString()),nextPage&&(nextParams.page=nextPage.toString()),hasFilters&&(currentParams={...currentParams,...filters},prevParams={...prevParams,...filters},current<total&&(nextParams={...nextParams,...filters}));let prevParamsStr=new URLSearchParams(prevParams).toString(),nextParamsStr=new URLSearchParams(nextParams).toString(),currentParamsStr=new URLSearchParams(currentParams).toString();prevParamsStr&&(prevParamsStr=`?${prevParamsStr}`),nextParamsStr&&(nextParamsStr=`?${nextParamsStr}`),currentParamsStr&&(currentParamsStr=`?${currentParamsStr}`);const data={current:current,total:total};nextPage&&(data.next=nextPage),prevPage&&(data.prev=prevPage),currentParamsStr&&(data.currentParams=currentParams),nextParamsStr&&(data.nextParams=nextParams),prevParamsStr&&(data.prevParams=prevParams),current>1&&(data.title=titleTemplate.replace("%current",current.toString()).replace("%total",total.toString()));const max=display-1,half=Math.ceil(display/2),maxHalf=max/2,center=total>max,limit=center?max:total-1;let start=1;center&&(start=current<max?1:current-maxHalf),start>total-limit&&(start=total-limit);const totalPagesItems=start+limit,listAttrs=[];(0,string_js_1.isStringStrict)(listClass)&&listAttrs.push(`class="${listClass}"`),(0,string_js_1.isStringStrict)(listAttr)&&listAttrs.push(listAttr);const hasEllipsis=(0,string_js_1.isStringStrict)(ellipsis),itemAttrs=`${(0,string_js_1.isStringStrict)(itemClass)?` class="${itemClass}"`:""}${(0,string_js_1.isStringStrict)(itemAttr)?` ${itemAttr}`:""}`;let prevItem=`<span${(0,string_js_1.isStringStrict)(prevSpanClass)?` class="${prevSpanClass}"`:""}>${prev}</span>`,isPrevLink=!1;current>1&&(isPrevLink=!0,prevItem=`\n <a\n href="${url}${prevParamsStr}"\n aria-label="${prevLabel}"${(0,string_js_1.isStringStrict)(prevLinkClass)?` class="${prevLinkClass}"`:""}\n >\n ${prev}\n </a>\n `),output+=`<li${itemAttrs} data-pag-prev="${isPrevLink?"link":"text"}">${prevItem}</li>`;let ellipsisOutput="";hasEllipsis&&(ellipsisOutput=`<li${itemAttrs} aria-hidden="true" data-pag-ellipsis>${ellipsis}</li>`),center&¤t>=limit&¤t>half&&(output+=ellipsisOutput);for(let i=start;i<=totalPagesItems;i+=1){const isCurrent=i===current;let content="";if(isCurrent)content=`\n <span${(0,string_js_1.isStringStrict)(currentClass)?` class="${currentClass}"`:""}>\n <span class="${a11yClass}">${currentLabel} </span>\n ${i}\n </span>\n `;else{let params={};i>1&&(params.page=i.toString()),hasFilters&&(params={...params,...filters});let paramsStr=new URLSearchParams(params).toString();paramsStr&&(paramsStr=`?${paramsStr}`),content=`\n <a href="${url}${paramsStr}"${(0,string_js_1.isStringStrict)(linkClass)?` class="${linkClass}"`:""}${(0,string_js_1.isStringStrict)(linkAttr)?` ${linkAttr}`:""}>\n <span class="${a11yClass}">${pageLabel} </span>\n ${i}\n </a>\n `}output+=`<li${itemAttrs}${isCurrent?" data-pag-current":""}>${content}</li>`}center&¤t<total-maxHalf&&(output+=ellipsisOutput);let nextItem=`<span${(0,string_js_1.isStringStrict)(nextSpanClass)?` class="${nextSpanClass}"`:""}>${next}</span>`,nextLink=!1;return current<total&&(nextLink=!0,nextItem=`\n <a\n href="${url}${nextParamsStr}"\n aria-label="${nextLabel}"${(0,string_js_1.isStringStrict)(nextLinkClass)?` class="${nextLinkClass}"`:""}\n >\n ${next}\n </a>\n `),output+=`<li${itemAttrs} data-pag-next="${nextLink?"link":"text"}">${nextItem}</li>`,{output:`\n <ol${listAttrs.length?` ${listAttrs.join(" ")}`:""}>\n ${output}\n </ol>\n `,data:data}};exports.Pagination=Pagination;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Pagination=void 0;const object_js_1=require("../../utils/object/object.js"),string_js_1=require("../../utils/string/string.js"),Pagination=props=>{const fallback={output:"",data:{}};if(!(0,object_js_1.isObjectStrict)(props))return fallback;const{total:total=1,display:display=5,current:current=1,filters:filters,url:url,ellipsis:ellipsis,first:first,last:last,prev:prev="",next:next="",firstLabel:firstLabel="First page",lastLabel:lastLabel="Last page",prevLabel:prevLabel="Previous page",nextLabel:nextLabel="Next page",currentLabel:currentLabel="Current page",pageLabel:pageLabel="Page",titleTemplate:titleTemplate="Page %current of %total",args:args}=props,{listClass:listClass,listAttr:listAttr,itemClass:itemClass,itemAttr:itemAttr,linkClass:linkClass,linkAttr:linkAttr,currentClass:currentClass,a11yClass:a11yClass="a-hide-vis",firstClass:firstClass,lastClass:lastClass,prevSpanClass:prevSpanClass,prevLinkClass:prevLinkClass,nextSpanClass:nextSpanClass,nextLinkClass:nextLinkClass}=(0,object_js_1.isObjectStrict)(args)?args:{};if(total<=1||!(0,string_js_1.isStringStrict)(url))return fallback;let output="";const hasFilters=(0,object_js_1.isObjectStrict)(filters);let firstParams={},lastParams={page:total.toString()},prevParams={},nextParams={},currentParams={};const prevPage=current-1,nextPage=current+1<=total?current+1:0;current>1&&(currentParams.page=current.toString()),prevPage>1&&(prevParams.page=prevPage.toString()),nextPage&&(nextParams.page=nextPage.toString()),hasFilters&&(firstParams={...firstParams,...filters},lastParams={...lastParams,...filters},currentParams={...currentParams,...filters},prevParams={...prevParams,...filters},current<total&&(nextParams={...nextParams,...filters}));let firstParamsStr=new URLSearchParams(firstParams).toString(),lastParamsStr=new URLSearchParams(lastParams).toString(),prevParamsStr=new URLSearchParams(prevParams).toString(),nextParamsStr=new URLSearchParams(nextParams).toString(),currentParamsStr=new URLSearchParams(currentParams).toString();firstParamsStr&&(firstParamsStr=`?${firstParamsStr}`),lastParamsStr&&(lastParamsStr=`?${lastParamsStr}`),prevParamsStr&&(prevParamsStr=`?${prevParamsStr}`),nextParamsStr&&(nextParamsStr=`?${nextParamsStr}`),currentParamsStr&&(currentParamsStr=`?${currentParamsStr}`);const data={current:current,total:total};nextPage&&(data.next=nextPage),prevPage&&(data.prev=prevPage),currentParamsStr&&(data.currentParams=currentParams),nextParamsStr&&(data.nextParams=nextParams),prevParamsStr&&(data.prevParams=prevParams),firstParamsStr&&(data.firstParams=firstParams),lastParamsStr&&(data.lastParams=lastParams),current>1&&(data.title=titleTemplate.replace("%current",current.toString()).replace("%total",total.toString()));const max=display-1,half=Math.ceil(display/2),maxHalf=max/2,center=total>max,limit=center?max:total-1;let start=1;center&&(start=current<max?1:current-maxHalf),start>total-limit&&(start=total-limit);const totalPagesItems=start+limit,listAttrs=[];(0,string_js_1.isStringStrict)(listClass)&&listAttrs.push(`class="${listClass}"`),(0,string_js_1.isStringStrict)(listAttr)&&listAttrs.push(listAttr);const hasEllipsis=(0,string_js_1.isStringStrict)(ellipsis),itemAttrs=`${(0,string_js_1.isStringStrict)(itemClass)?` class="${itemClass}"`:""}${(0,string_js_1.isStringStrict)(itemAttr)?` ${itemAttr}`:""}`;(0,string_js_1.isStringStrict)(first)&&(output+=`\n <li${itemAttrs} data-pag-first>\n <a\n href="${url}${firstParamsStr}"\n aria-label="${firstLabel}"${(0,string_js_1.isStringStrict)(firstClass)?` class="${firstClass}"`:""}\n >\n ${first}\n </a>\n </li>\n `);let prevItem=`<span${(0,string_js_1.isStringStrict)(prevSpanClass)?` class="${prevSpanClass}"`:""}>${prev}</span>`,isPrevLink=!1;current>1&&(isPrevLink=!0,prevItem=`\n <a\n href="${url}${prevParamsStr}"\n aria-label="${prevLabel}"${(0,string_js_1.isStringStrict)(prevLinkClass)?` class="${prevLinkClass}"`:""}\n >\n ${prev}\n </a>\n `),output+=`<li${itemAttrs} data-pag-prev="${isPrevLink?"link":"text"}">${prevItem}</li>`;let ellipsisOutput="";hasEllipsis&&(ellipsisOutput=`<li${itemAttrs} aria-hidden="true" data-pag-ellipsis>${ellipsis}</li>`),center&¤t>=limit&¤t>half&&(output+=ellipsisOutput);for(let i=start;i<=totalPagesItems;i+=1){const isCurrent=i===current;let content="";if(isCurrent)content=`\n <span${(0,string_js_1.isStringStrict)(currentClass)?` class="${currentClass}"`:""}>\n <span class="${a11yClass}">${currentLabel} </span>\n ${i}\n </span>\n `;else{let params={};i>1&&(params.page=i.toString()),hasFilters&&(params={...params,...filters});let paramsStr=new URLSearchParams(params).toString();paramsStr&&(paramsStr=`?${paramsStr}`),content=`\n <a href="${url}${paramsStr}"${(0,string_js_1.isStringStrict)(linkClass)?` class="${linkClass}"`:""}${(0,string_js_1.isStringStrict)(linkAttr)?` ${linkAttr}`:""}>\n <span class="${a11yClass}">${pageLabel} </span>\n ${i}\n </a>\n `}output+=`<li${itemAttrs}${isCurrent?" data-pag-current":""}>${content}</li>`}center&¤t<total-maxHalf&&(output+=ellipsisOutput);let nextItem=`<span${(0,string_js_1.isStringStrict)(nextSpanClass)?` class="${nextSpanClass}"`:""}>${next}</span>`,nextLink=!1;return current<total&&(nextLink=!0,nextItem=`\n <a\n href="${url}${nextParamsStr}"\n aria-label="${nextLabel}"${(0,string_js_1.isStringStrict)(nextLinkClass)?` class="${nextLinkClass}"`:""}\n >\n ${next}\n </a>\n `),output+=`<li${itemAttrs} data-pag-next="${nextLink?"link":"text"}">${nextItem}</li>`,(0,string_js_1.isStringStrict)(last)&&(output+=`\n <li${itemAttrs} data-pag-last>\n <a\n href="${url}${lastParamsStr}"\n aria-label="${lastLabel}"${(0,string_js_1.isStringStrict)(lastClass)?` class="${lastClass}"`:""}\n >\n ${last}\n </a>\n </li>\n `),{output:`\n <ol${listAttrs.length?` ${listAttrs.join(" ")}`:""}>\n ${output}\n </ol>\n `,data:data}};exports.Pagination=Pagination;
|
|
@@ -5,8 +5,12 @@ export interface PaginationProps {
|
|
|
5
5
|
filters?: Record<string, string>;
|
|
6
6
|
url?: string;
|
|
7
7
|
ellipsis?: string;
|
|
8
|
+
first?: string;
|
|
9
|
+
last?: string;
|
|
8
10
|
prev?: string;
|
|
9
11
|
next?: string;
|
|
12
|
+
firstLabel?: string;
|
|
13
|
+
lastLabel?: string;
|
|
10
14
|
prevLabel?: string;
|
|
11
15
|
nextLabel?: string;
|
|
12
16
|
currentLabel?: string;
|
|
@@ -23,6 +27,8 @@ export interface PaginationArgs {
|
|
|
23
27
|
linkAttr?: string;
|
|
24
28
|
currentClass?: string;
|
|
25
29
|
a11yClass?: string;
|
|
30
|
+
firstClass?: string;
|
|
31
|
+
lastClass?: string;
|
|
26
32
|
prevSpanClass?: string;
|
|
27
33
|
prevLinkClass?: string;
|
|
28
34
|
nextSpanClass?: string;
|
|
@@ -32,8 +38,12 @@ export interface PaginationData {
|
|
|
32
38
|
current?: number;
|
|
33
39
|
total?: number;
|
|
34
40
|
title?: string;
|
|
41
|
+
first?: number;
|
|
42
|
+
last?: number;
|
|
35
43
|
next?: number;
|
|
36
44
|
prev?: number;
|
|
45
|
+
firstParams?: Record<string, string>;
|
|
46
|
+
lastParams?: Record<string, string>;
|
|
37
47
|
nextParams?: Record<string, string>;
|
|
38
48
|
prevParams?: Record<string, string>;
|
|
39
49
|
currentParams?: Record<string, string>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { ImageArgs, ImageReturnType,
|
|
1
|
+
import type { ImageArgs, ImageReturnType, ImageSizesArgs, ImageSizesReturn } from './imageTypes.js';
|
|
2
2
|
declare const getImage: <V extends boolean = false>(args: ImageArgs, returnDetails?: V) => ImageReturnType<V>;
|
|
3
3
|
declare const getImageClosestSize: (size: number, sizes?: number[]) => number;
|
|
4
|
-
declare const
|
|
5
|
-
export { getImage, getImageClosestSize,
|
|
4
|
+
declare const getImageSizes: (args: ImageSizesArgs) => ImageSizesReturn;
|
|
5
|
+
export { getImage, getImageClosestSize, getImageSizes };
|
package/cjs/utils/image/image.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.
|
|
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 newMaxWidth=0;const newWidths=[];if(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;newWidths[0]=(0,number_js_1.isNumber)(widths[width])&&widths[width]?widths[width]:1,newWidths[1]=(0,number_js_1.isNumber)(widths[widthSmall])&&widths[widthSmall]?widths[widthSmall]:newWidths[0],newWidths[2]=(0,number_js_1.isNumber)(widths[widthMedium])&&widths[widthMedium]?widths[widthMedium]:newWidths[1],newWidths[3]=(0,number_js_1.isNumber)(widths[widthLarge])&&widths[widthLarge]?widths[widthLarge]:newWidths[2]}if("container"===renderType){const{maxWidth:maxWidth="Default"}=args;(0,number_js_1.isNumber)(maxWidths[maxWidth])&&(newMaxWidth=maxWidths[maxWidth])}}}),!newWidths.length&&0===newMaxWidth)return fallback;const newBreakpoints=[...breakpoints],newBreakpointsLen=newBreakpoints.length,maxWidthArr=[],sizesArr=[],sizesSet=new Set,sizeFactor=viewportWidth/100;let lastWidth=1;for(let i=0;i<newBreakpointsLen;i+=1){const breakpoint=newBreakpoints[i],width=newWidths[i];if(!(0,number_js_1.isNumber)(width))continue;lastWidth=width;const exceedsMaxWidth=newMaxWidth&&breakpoint>newMaxWidth,breakpointWidth=exceedsMaxWidth?Math.round(width*newMaxWidth):Math.round(width*breakpoint),sizeWidth=i===newBreakpointsLen-1&&newMaxWidth?breakpointWidth/16+"rem":100*width*sizeFactor+"vw";if(maxWidthArr.push(breakpointWidth),sizesSet.has(sizeWidth)||(sizesSet.add(sizeWidth),sizesArr.push(breakpoint?`(min-width: ${breakpoint/16}rem) ${sizeWidth}`:sizeWidth)),exceedsMaxWidth)break}newMaxWidth&&maxWidthArr.push(Math.round(lastWidth*newMaxWidth));const maxWidth=2*Math.max(...maxWidthArr);if(sizesSet.size<=1){const sizeWidth=maxWidth/32+"rem";sizesArr[0]=100*sizeFactor+"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;
|
|
@@ -16,6 +16,7 @@ export interface ImageArgs {
|
|
|
16
16
|
source?: Source | 'remote';
|
|
17
17
|
maxWidth?: number;
|
|
18
18
|
viewportWidth?: number;
|
|
19
|
+
sizes?: string;
|
|
19
20
|
format?: string;
|
|
20
21
|
params?: Record<string, string>;
|
|
21
22
|
}
|
|
@@ -30,14 +31,19 @@ export interface ImageReturn {
|
|
|
30
31
|
naturalHeight: number;
|
|
31
32
|
}
|
|
32
33
|
export type ImageReturnType<V extends false | true> = V extends true ? ImageReturn : string;
|
|
33
|
-
export type
|
|
34
|
-
export type
|
|
35
|
-
export interface
|
|
34
|
+
export type ImageSizesParents = ParentArgs & ColumnProps & ContainerProps;
|
|
35
|
+
export type ImageSizesParentsArgs = ParentArgs & ColumnProps<string, string | number> & ContainerProps<string, string | number>;
|
|
36
|
+
export interface ImageSizesArgs<T = ImageSizesParents> {
|
|
36
37
|
parents: T[];
|
|
37
38
|
widths: GenericNumbers;
|
|
38
39
|
maxWidths: GenericNumbers;
|
|
39
40
|
breakpoints: number[];
|
|
40
41
|
source?: Source;
|
|
42
|
+
viewportWidth?: number;
|
|
43
|
+
}
|
|
44
|
+
export interface ImageSizesReturn {
|
|
45
|
+
maxWidth: number;
|
|
46
|
+
sizes: string;
|
|
41
47
|
}
|
|
42
48
|
export interface ImageLocal {
|
|
43
49
|
instance: sharp.Sharp;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{isObjectStrict}from"../../utils/object/object.js";import{isStringStrict}from"../../utils/string/string.js";const Pagination=props=>{const fallback={output:"",data:{}};if(!isObjectStrict(props))return fallback;const{total:total=1,display:display=5,current:current=1,filters:filters,url:url,ellipsis:ellipsis,prev:prev="",next:next="",prevLabel:prevLabel="Previous page",nextLabel:nextLabel="Next page",currentLabel:currentLabel="Current page",pageLabel:pageLabel="Page",titleTemplate:titleTemplate="Page %current of %total",args:args}=props,{listClass:listClass,listAttr:listAttr,itemClass:itemClass,itemAttr:itemAttr,linkClass:linkClass,linkAttr:linkAttr,currentClass:currentClass,a11yClass:a11yClass="a-hide-vis",prevSpanClass:prevSpanClass,prevLinkClass:prevLinkClass,nextSpanClass:nextSpanClass,nextLinkClass:nextLinkClass}=isObjectStrict(args)?args:{};if(total<=1||!isStringStrict(url))return fallback;let output="";const hasFilters=isObjectStrict(filters);let prevParams={},nextParams={},currentParams={};const prevPage=current-1,nextPage=current+1<=total?current+1:0;current>1&&(currentParams.page=current.toString()),prevPage>1&&(prevParams.page=prevPage.toString()),nextPage&&(nextParams.page=nextPage.toString()),hasFilters&&(currentParams={...currentParams,...filters},prevParams={...prevParams,...filters},current<total&&(nextParams={...nextParams,...filters}));let prevParamsStr=new URLSearchParams(prevParams).toString(),nextParamsStr=new URLSearchParams(nextParams).toString(),currentParamsStr=new URLSearchParams(currentParams).toString();prevParamsStr&&(prevParamsStr=`?${prevParamsStr}`),nextParamsStr&&(nextParamsStr=`?${nextParamsStr}`),currentParamsStr&&(currentParamsStr=`?${currentParamsStr}`);const data={current:current,total:total};nextPage&&(data.next=nextPage),prevPage&&(data.prev=prevPage),currentParamsStr&&(data.currentParams=currentParams),nextParamsStr&&(data.nextParams=nextParams),prevParamsStr&&(data.prevParams=prevParams),current>1&&(data.title=titleTemplate.replace("%current",current.toString()).replace("%total",total.toString()));const max=display-1,half=Math.ceil(display/2),maxHalf=max/2,center=total>max,limit=center?max:total-1;let start=1;center&&(start=current<max?1:current-maxHalf),start>total-limit&&(start=total-limit);const totalPagesItems=start+limit,listAttrs=[];isStringStrict(listClass)&&listAttrs.push(`class="${listClass}"`),isStringStrict(listAttr)&&listAttrs.push(listAttr);const hasEllipsis=isStringStrict(ellipsis),itemAttrs=`${isStringStrict(itemClass)?` class="${itemClass}"`:""}${isStringStrict(itemAttr)?` ${itemAttr}`:""}`;let prevItem=`<span${isStringStrict(prevSpanClass)?` class="${prevSpanClass}"`:""}>${prev}</span>`,isPrevLink=!1;current>1&&(isPrevLink=!0,prevItem=`\n <a\n href="${url}${prevParamsStr}"\n aria-label="${prevLabel}"${isStringStrict(prevLinkClass)?` class="${prevLinkClass}"`:""}\n >\n ${prev}\n </a>\n `),output+=`<li${itemAttrs} data-pag-prev="${isPrevLink?"link":"text"}">${prevItem}</li>`;let ellipsisOutput="";hasEllipsis&&(ellipsisOutput=`<li${itemAttrs} aria-hidden="true" data-pag-ellipsis>${ellipsis}</li>`),center&¤t>=limit&¤t>half&&(output+=ellipsisOutput);for(let i=start;i<=totalPagesItems;i+=1){const isCurrent=i===current;let content="";if(isCurrent)content=`\n <span${isStringStrict(currentClass)?` class="${currentClass}"`:""}>\n <span class="${a11yClass}">${currentLabel} </span>\n ${i}\n </span>\n `;else{let params={};i>1&&(params.page=i.toString()),hasFilters&&(params={...params,...filters});let paramsStr=new URLSearchParams(params).toString();paramsStr&&(paramsStr=`?${paramsStr}`),content=`\n <a href="${url}${paramsStr}"${isStringStrict(linkClass)?` class="${linkClass}"`:""}${isStringStrict(linkAttr)?` ${linkAttr}`:""}>\n <span class="${a11yClass}">${pageLabel} </span>\n ${i}\n </a>\n `}output+=`<li${itemAttrs}${isCurrent?" data-pag-current":""}>${content}</li>`}center&¤t<total-maxHalf&&(output+=ellipsisOutput);let nextItem=`<span${isStringStrict(nextSpanClass)?` class="${nextSpanClass}"`:""}>${next}</span>`,nextLink=!1;return current<total&&(nextLink=!0,nextItem=`\n <a\n href="${url}${nextParamsStr}"\n aria-label="${nextLabel}"${isStringStrict(nextLinkClass)?` class="${nextLinkClass}"`:""}\n >\n ${next}\n </a>\n `),output+=`<li${itemAttrs} data-pag-next="${nextLink?"link":"text"}">${nextItem}</li>`,{output:`\n <ol${listAttrs.length?` ${listAttrs.join(" ")}`:""}>\n ${output}\n </ol>\n `,data:data}};export{Pagination};
|
|
1
|
+
import{isObjectStrict}from"../../utils/object/object.js";import{isStringStrict}from"../../utils/string/string.js";const Pagination=props=>{const fallback={output:"",data:{}};if(!isObjectStrict(props))return fallback;const{total:total=1,display:display=5,current:current=1,filters:filters,url:url,ellipsis:ellipsis,first:first,last:last,prev:prev="",next:next="",firstLabel:firstLabel="First page",lastLabel:lastLabel="Last page",prevLabel:prevLabel="Previous page",nextLabel:nextLabel="Next page",currentLabel:currentLabel="Current page",pageLabel:pageLabel="Page",titleTemplate:titleTemplate="Page %current of %total",args:args}=props,{listClass:listClass,listAttr:listAttr,itemClass:itemClass,itemAttr:itemAttr,linkClass:linkClass,linkAttr:linkAttr,currentClass:currentClass,a11yClass:a11yClass="a-hide-vis",firstClass:firstClass,lastClass:lastClass,prevSpanClass:prevSpanClass,prevLinkClass:prevLinkClass,nextSpanClass:nextSpanClass,nextLinkClass:nextLinkClass}=isObjectStrict(args)?args:{};if(total<=1||!isStringStrict(url))return fallback;let output="";const hasFilters=isObjectStrict(filters);let firstParams={},lastParams={page:total.toString()},prevParams={},nextParams={},currentParams={};const prevPage=current-1,nextPage=current+1<=total?current+1:0;current>1&&(currentParams.page=current.toString()),prevPage>1&&(prevParams.page=prevPage.toString()),nextPage&&(nextParams.page=nextPage.toString()),hasFilters&&(firstParams={...firstParams,...filters},lastParams={...lastParams,...filters},currentParams={...currentParams,...filters},prevParams={...prevParams,...filters},current<total&&(nextParams={...nextParams,...filters}));let firstParamsStr=new URLSearchParams(firstParams).toString(),lastParamsStr=new URLSearchParams(lastParams).toString(),prevParamsStr=new URLSearchParams(prevParams).toString(),nextParamsStr=new URLSearchParams(nextParams).toString(),currentParamsStr=new URLSearchParams(currentParams).toString();firstParamsStr&&(firstParamsStr=`?${firstParamsStr}`),lastParamsStr&&(lastParamsStr=`?${lastParamsStr}`),prevParamsStr&&(prevParamsStr=`?${prevParamsStr}`),nextParamsStr&&(nextParamsStr=`?${nextParamsStr}`),currentParamsStr&&(currentParamsStr=`?${currentParamsStr}`);const data={current:current,total:total};nextPage&&(data.next=nextPage),prevPage&&(data.prev=prevPage),currentParamsStr&&(data.currentParams=currentParams),nextParamsStr&&(data.nextParams=nextParams),prevParamsStr&&(data.prevParams=prevParams),firstParamsStr&&(data.firstParams=firstParams),lastParamsStr&&(data.lastParams=lastParams),current>1&&(data.title=titleTemplate.replace("%current",current.toString()).replace("%total",total.toString()));const max=display-1,half=Math.ceil(display/2),maxHalf=max/2,center=total>max,limit=center?max:total-1;let start=1;center&&(start=current<max?1:current-maxHalf),start>total-limit&&(start=total-limit);const totalPagesItems=start+limit,listAttrs=[];isStringStrict(listClass)&&listAttrs.push(`class="${listClass}"`),isStringStrict(listAttr)&&listAttrs.push(listAttr);const hasEllipsis=isStringStrict(ellipsis),itemAttrs=`${isStringStrict(itemClass)?` class="${itemClass}"`:""}${isStringStrict(itemAttr)?` ${itemAttr}`:""}`;isStringStrict(first)&&(output+=`\n <li${itemAttrs} data-pag-first>\n <a\n href="${url}${firstParamsStr}"\n aria-label="${firstLabel}"${isStringStrict(firstClass)?` class="${firstClass}"`:""}\n >\n ${first}\n </a>\n </li>\n `);let prevItem=`<span${isStringStrict(prevSpanClass)?` class="${prevSpanClass}"`:""}>${prev}</span>`,isPrevLink=!1;current>1&&(isPrevLink=!0,prevItem=`\n <a\n href="${url}${prevParamsStr}"\n aria-label="${prevLabel}"${isStringStrict(prevLinkClass)?` class="${prevLinkClass}"`:""}\n >\n ${prev}\n </a>\n `),output+=`<li${itemAttrs} data-pag-prev="${isPrevLink?"link":"text"}">${prevItem}</li>`;let ellipsisOutput="";hasEllipsis&&(ellipsisOutput=`<li${itemAttrs} aria-hidden="true" data-pag-ellipsis>${ellipsis}</li>`),center&¤t>=limit&¤t>half&&(output+=ellipsisOutput);for(let i=start;i<=totalPagesItems;i+=1){const isCurrent=i===current;let content="";if(isCurrent)content=`\n <span${isStringStrict(currentClass)?` class="${currentClass}"`:""}>\n <span class="${a11yClass}">${currentLabel} </span>\n ${i}\n </span>\n `;else{let params={};i>1&&(params.page=i.toString()),hasFilters&&(params={...params,...filters});let paramsStr=new URLSearchParams(params).toString();paramsStr&&(paramsStr=`?${paramsStr}`),content=`\n <a href="${url}${paramsStr}"${isStringStrict(linkClass)?` class="${linkClass}"`:""}${isStringStrict(linkAttr)?` ${linkAttr}`:""}>\n <span class="${a11yClass}">${pageLabel} </span>\n ${i}\n </a>\n `}output+=`<li${itemAttrs}${isCurrent?" data-pag-current":""}>${content}</li>`}center&¤t<total-maxHalf&&(output+=ellipsisOutput);let nextItem=`<span${isStringStrict(nextSpanClass)?` class="${nextSpanClass}"`:""}>${next}</span>`,nextLink=!1;return current<total&&(nextLink=!0,nextItem=`\n <a\n href="${url}${nextParamsStr}"\n aria-label="${nextLabel}"${isStringStrict(nextLinkClass)?` class="${nextLinkClass}"`:""}\n >\n ${next}\n </a>\n `),output+=`<li${itemAttrs} data-pag-next="${nextLink?"link":"text"}">${nextItem}</li>`,isStringStrict(last)&&(output+=`\n <li${itemAttrs} data-pag-last>\n <a\n href="${url}${lastParamsStr}"\n aria-label="${lastLabel}"${isStringStrict(lastClass)?` class="${lastClass}"`:""}\n >\n ${last}\n </a>\n </li>\n `),{output:`\n <ol${listAttrs.length?` ${listAttrs.join(" ")}`:""}>\n ${output}\n </ol>\n `,data:data}};export{Pagination};
|
|
@@ -5,8 +5,12 @@ export interface PaginationProps {
|
|
|
5
5
|
filters?: Record<string, string>;
|
|
6
6
|
url?: string;
|
|
7
7
|
ellipsis?: string;
|
|
8
|
+
first?: string;
|
|
9
|
+
last?: string;
|
|
8
10
|
prev?: string;
|
|
9
11
|
next?: string;
|
|
12
|
+
firstLabel?: string;
|
|
13
|
+
lastLabel?: string;
|
|
10
14
|
prevLabel?: string;
|
|
11
15
|
nextLabel?: string;
|
|
12
16
|
currentLabel?: string;
|
|
@@ -23,6 +27,8 @@ export interface PaginationArgs {
|
|
|
23
27
|
linkAttr?: string;
|
|
24
28
|
currentClass?: string;
|
|
25
29
|
a11yClass?: string;
|
|
30
|
+
firstClass?: string;
|
|
31
|
+
lastClass?: string;
|
|
26
32
|
prevSpanClass?: string;
|
|
27
33
|
prevLinkClass?: string;
|
|
28
34
|
nextSpanClass?: string;
|
|
@@ -32,8 +38,12 @@ export interface PaginationData {
|
|
|
32
38
|
current?: number;
|
|
33
39
|
total?: number;
|
|
34
40
|
title?: string;
|
|
41
|
+
first?: number;
|
|
42
|
+
last?: number;
|
|
35
43
|
next?: number;
|
|
36
44
|
prev?: number;
|
|
45
|
+
firstParams?: Record<string, string>;
|
|
46
|
+
lastParams?: Record<string, string>;
|
|
37
47
|
nextParams?: Record<string, string>;
|
|
38
48
|
prevParams?: Record<string, string>;
|
|
39
49
|
currentParams?: Record<string, string>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { ImageArgs, ImageReturnType,
|
|
1
|
+
import type { ImageArgs, ImageReturnType, ImageSizesArgs, ImageSizesReturn } from './imageTypes.js';
|
|
2
2
|
declare const getImage: <V extends boolean = false>(args: ImageArgs, returnDetails?: V) => ImageReturnType<V>;
|
|
3
3
|
declare const getImageClosestSize: (size: number, sizes?: number[]) => number;
|
|
4
|
-
declare const
|
|
5
|
-
export { getImage, getImageClosestSize,
|
|
4
|
+
declare const getImageSizes: (args: ImageSizesArgs) => ImageSizesReturn;
|
|
5
|
+
export { getImage, getImageClosestSize, 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,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 sizes
|
|
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 newMaxWidth=0;const newWidths=[];if(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;newWidths[0]=isNumber(widths[width])&&widths[width]?widths[width]:1,newWidths[1]=isNumber(widths[widthSmall])&&widths[widthSmall]?widths[widthSmall]:newWidths[0],newWidths[2]=isNumber(widths[widthMedium])&&widths[widthMedium]?widths[widthMedium]:newWidths[1],newWidths[3]=isNumber(widths[widthLarge])&&widths[widthLarge]?widths[widthLarge]:newWidths[2]}if("container"===renderType){const{maxWidth:maxWidth="Default"}=args;isNumber(maxWidths[maxWidth])&&(newMaxWidth=maxWidths[maxWidth])}}}),!newWidths.length&&0===newMaxWidth)return fallback;const newBreakpoints=[...breakpoints],newBreakpointsLen=newBreakpoints.length,maxWidthArr=[],sizesArr=[],sizesSet=new Set,sizeFactor=viewportWidth/100;let lastWidth=1;for(let i=0;i<newBreakpointsLen;i+=1){const breakpoint=newBreakpoints[i],width=newWidths[i];if(!isNumber(width))continue;lastWidth=width;const exceedsMaxWidth=newMaxWidth&&breakpoint>newMaxWidth,breakpointWidth=exceedsMaxWidth?Math.round(width*newMaxWidth):Math.round(width*breakpoint),sizeWidth=i===newBreakpointsLen-1&&newMaxWidth?breakpointWidth/16+"rem":100*width*sizeFactor+"vw";if(maxWidthArr.push(breakpointWidth),sizesSet.has(sizeWidth)||(sizesSet.add(sizeWidth),sizesArr.push(breakpoint?`(min-width: ${breakpoint/16}rem) ${sizeWidth}`:sizeWidth)),exceedsMaxWidth)break}newMaxWidth&&maxWidthArr.push(Math.round(lastWidth*newMaxWidth));const maxWidth=2*Math.max(...maxWidthArr);if(sizesSet.size<=1){const sizeWidth=maxWidth/32+"rem";sizesArr[0]=100*sizeFactor+"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};
|
|
@@ -16,6 +16,7 @@ export interface ImageArgs {
|
|
|
16
16
|
source?: Source | 'remote';
|
|
17
17
|
maxWidth?: number;
|
|
18
18
|
viewportWidth?: number;
|
|
19
|
+
sizes?: string;
|
|
19
20
|
format?: string;
|
|
20
21
|
params?: Record<string, string>;
|
|
21
22
|
}
|
|
@@ -30,14 +31,19 @@ export interface ImageReturn {
|
|
|
30
31
|
naturalHeight: number;
|
|
31
32
|
}
|
|
32
33
|
export type ImageReturnType<V extends false | true> = V extends true ? ImageReturn : string;
|
|
33
|
-
export type
|
|
34
|
-
export type
|
|
35
|
-
export interface
|
|
34
|
+
export type ImageSizesParents = ParentArgs & ColumnProps & ContainerProps;
|
|
35
|
+
export type ImageSizesParentsArgs = ParentArgs & ColumnProps<string, string | number> & ContainerProps<string, string | number>;
|
|
36
|
+
export interface ImageSizesArgs<T = ImageSizesParents> {
|
|
36
37
|
parents: T[];
|
|
37
38
|
widths: GenericNumbers;
|
|
38
39
|
maxWidths: GenericNumbers;
|
|
39
40
|
breakpoints: number[];
|
|
40
41
|
source?: Source;
|
|
42
|
+
viewportWidth?: number;
|
|
43
|
+
}
|
|
44
|
+
export interface ImageSizesReturn {
|
|
45
|
+
maxWidth: number;
|
|
46
|
+
sizes: string;
|
|
41
47
|
}
|
|
42
48
|
export interface ImageLocal {
|
|
43
49
|
instance: sharp.Sharp;
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alanizcreative/formation-static",
|
|
3
|
-
"version": "1.3.0-beta.
|
|
3
|
+
"version": "1.3.0-beta.51",
|
|
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
|
-
"packageManager": "pnpm@10.
|
|
6
|
+
"packageManager": "pnpm@10.18.3",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"files": [
|
|
9
9
|
"./lib",
|
|
@@ -40,19 +40,18 @@
|
|
|
40
40
|
"license": "MIT",
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@types/contentful-resolve-response": "^0.1.33",
|
|
43
|
-
"@types/node": "^24.
|
|
44
|
-
"@types/uuid": "^10.0.0",
|
|
43
|
+
"@types/node": "^24.8.1",
|
|
45
44
|
"@vitest/coverage-v8": "^3.2.4",
|
|
46
|
-
"eslint": "9.
|
|
47
|
-
"memfs": "4.
|
|
48
|
-
"release-it": "^19.0.
|
|
45
|
+
"eslint": "9.38.0",
|
|
46
|
+
"memfs": "4.49.0",
|
|
47
|
+
"release-it": "^19.0.5",
|
|
49
48
|
"terser": "5.44.0",
|
|
50
|
-
"typescript": "^5.9.
|
|
51
|
-
"typescript-eslint": "8.
|
|
49
|
+
"typescript": "^5.9.3",
|
|
50
|
+
"typescript-eslint": "8.46.1",
|
|
52
51
|
"vitest": "^3.2.4"
|
|
53
52
|
},
|
|
54
53
|
"dependencies": {
|
|
55
|
-
"uuid": "^
|
|
54
|
+
"uuid": "^13.0.0"
|
|
56
55
|
},
|
|
57
56
|
"peerDependencies": {
|
|
58
57
|
"@wordpress/block-serialization-default-parser": "^5.25.0",
|