@cntrl-site/components 1.0.13 → 1.0.14
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/dist/index.js +4 -4
- package/dist/index.mjs +6 -9
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1689,7 +1689,7 @@ const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
|
|
|
1689
1689
|
.${e}-image-hover-grayscale:hover img {
|
|
1690
1690
|
filter: grayscale(100%);
|
|
1691
1691
|
}
|
|
1692
|
-
`}const Dc=30,zc=20,Vi=
|
|
1692
|
+
`}const Dc=30,zc=20,Vi=2,jc=2,Kc=(e,t)=>Array.from({length:t},()=>e).flat(),qc=(e,t)=>{const n=t.getBoundingClientRect(),i=e.getBoundingClientRect();return i.right>n.left&&i.left<n.right},Uc=(e,t)=>{const n=e.querySelectorAll(`[data-marquee-item-index="${t}"]`);return Array.from(n).some(i=>qc(i,e))},Gc=({item:e,prefix:t,imageFit:n,imageMaxWidth:i,imageMaxHeight:o,imageHoverClass:a,isFirstSet:s,scaled:c,onFirstSetImageDone:r})=>{var x,P,k;const p=u.useRef(null);u.useLayoutEffect(()=>{if(!s)return;const E=p.current;E!=null&&E.complete&&(r==null||r())},[s,(x=e.image)==null?void 0:x.url,r]);const d=n.display==="Cover",T=n.ratioValue??"1:1",b=n.reversed??!1,[y,g]=T.split(":").map(Number),w=(b?g:y)/(b?y:g);let f=i,S=f/w;S>o&&(S=o,f=S*w);const M=c(f),_=c(S),A=((P=e.image)==null?void 0:P.url)&&l.jsx("img",{ref:p,src:e.image.url,alt:((k=e.image)==null?void 0:k.name)??"",style:d?{pointerEvents:"auto",display:"block",width:"100%",height:"100%",objectFit:"cover"}:{pointerEvents:"auto",display:"block",height:"100%",width:"auto",maxWidth:c(i),objectFit:"contain"},onLoad:s?r:void 0,onError:s?r:void 0});return l.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"start",...d?{width:M}:{width:"fit-content",maxWidth:c(i),minWidth:0}},children:l.jsx("div",{className:a,style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",flexShrink:0,...d?{width:M,height:_,overflow:"hidden"}:{width:"fit-content",maxWidth:c(i),height:c(o)}},children:A&&e.link?l.jsx("a",{href:e.link,target:"_blank",rel:"noopener noreferrer",className:Le(`${t}-marquee-link`,!d&&`${t}-marquee-link-contain`),children:A}):A})})},Yc=({settings:e,content:t,isEditor:n,isPreviewMode:i,isEditMode:o})=>{const{prefix:a}=$.useScopedStyles(),s=u.useMemo(()=>Vc(a),[a]),{speed:c,direction:r,pauseOnHover:p,gap:d,imageMaxWidth:T,imageMaxHeight:b,imageFit:y,hoverEffect:g}=e,m=!!o,L=!n||!!i,w=L&&g!=="off"&&g!=="randomize"?`${a}-image-hover-${g}`:void 0,f=n?!!i:!0,M=((t==null?void 0:t.length)??0)>0&&(f||!!n),_=Math.max(0,c)*Dc,A=h=>$.scalingValue(h,n??!1),x=u.useRef(null),P=u.useRef(null),k=u.useRef(null),[E,I]=u.useState(0),[O,V]=u.useState(0),U=f&&p==="on",[J,v]=u.useState(!1),[W,H]=u.useState({}),F=u.useRef(W);F.current=W;const R=u.useRef(null),K=u.useRef(0),X=u.useRef(null),ie=u.useMemo(()=>(t??[]).map(h=>{var N;return((N=h.image)==null?void 0:N.url)??""}).join("\0"),[t]),[Z,pe]=u.useState(Vi),C=u.useMemo(()=>{const h=t??[];return!f||h.length===0?h:Kc(h,Z)},[t,f,Z]),oe=u.useMemo(()=>C.filter(h=>{var N;return!!((N=h.image)!=null&&N.url)}).length,[C]),Se=M?jc:1;u.useLayoutEffect(()=>{K.current=0,H({}),R.current=null,pe(Vi),I(0)},[ie]),u.useEffect(()=>{if(!L||g!=="randomize")return;const h=x.current;if(!h)return;const N=te=>{H(Q=>{let le=null;for(const ge of te)ge in Q&&(Uc(h,ge)||(le||(le={...Q}),delete le[ge]));return le??Q})},B=new IntersectionObserver(te=>{const Q=new Set;for(const le of te){const ge=le.target.dataset.marqueeItemIndex,he=ge!==void 0?Number(ge):NaN;Number.isNaN(he)||Q.add(he)}Q.size>0&&N(Q)},{root:h,threshold:0});Object.keys(W).forEach(te=>{const Q=Number(te);h.querySelectorAll(`[data-marquee-item-index="${Q}"]`).forEach(le=>B.observe(le))});let G=0;const re=()=>{const te=Object.keys(F.current);te.length!==0&&(N(te.map(Number)),G=requestAnimationFrame(re))};return Object.keys(F.current).length>0&&(G=requestAnimationFrame(re)),()=>{cancelAnimationFrame(G),B.disconnect()}},[g,W,L]),u.useLayoutEffect(()=>{if(!M)return;const h=x.current,N=k.current;if(!h||!N)return;let B=0;const G=()=>{const Q=h.getBoundingClientRect().width,le=N.getBoundingClientRect().width,ge=R.current,he=typeof ge=="number"&&Math.abs(ge-le)<=.25;if(R.current=le,f&&le>0&&Z>0){const j=le/Z;if(j>0&&Q>0){const ae=Math.max(Vi,Math.ceil(Q/j)+1);if(ae!==Z){pe(ae);return}}}if(le>0&&E<=0){I(le);return}he&&le!==E?I(le):!he&&E<=0&&(cancelAnimationFrame(B),B=requestAnimationFrame(G))},re=()=>{cancelAnimationFrame(B),B=requestAnimationFrame(G)};X.current=re,re();const te=new ResizeObserver(re);return te.observe(h),te.observe(N),()=>{X.current=null,cancelAnimationFrame(B),te.disconnect()}},[f,M,E,ie,Z]),u.useLayoutEffect(()=>{const h=P.current;if(!M||!h)return;const N=E>0?E:0,B=N>0&&_>0?N/_*1e3:0,G=`${Math.max(0,B)/1e3}s`;h.style.setProperty("--marquee-distance",`${N}px`),h.style.setProperty("--marquee-duration",G)},[f,M,_,E]),u.useLayoutEffect(()=>{if(!M){V(0);return}if(E<=0){V(0);return}const h=P.current;if(!h)return;const N=()=>{const G=h.getBoundingClientRect().height;V(G>0?G:0)};N();const B=new ResizeObserver(N);return B.observe(h),()=>B.disconnect()},[M,Se,C,n,d,T,b,E,y,W]);const ue=()=>{U&&v(!0)},ye=()=>{U&&v(!1)},ne=u.useCallback(()=>{var h;K.current=Math.min(oe,K.current+1),(h=X.current)==null||h.call(X)},[oe]),ce=u.useCallback((h,N)=>{H(B=>{const G=B[h]??N,re=(t??[]).filter(Q=>Q!==G);if(re.length===0)return B;const te=re[Math.floor(Math.random()*re.length)];return{...B,[h]:te}})},[t]),z=(h,N,B,G)=>{const re=L&&g==="randomize"&&y.display==="Cover"?W[B]??h:h,te=`max(${A(d)}, ${zc}px)`,Q=`calc(-0.5 * (${te} + ${A(d)}))`;return l.jsxs("div",{className:`${a}-marquee-card`,"data-marquee-item-index":B,onMouseEnter:L&&g==="randomize"&&y.display==="Cover"?()=>ce(B,h):void 0,children:[l.jsx(Gc,{item:re,prefix:a,imageFit:y,imageMaxWidth:T,imageMaxHeight:b,imageHoverClass:w,isEditor:n,isFirstSet:G,scaled:A,onFirstSetImageDone:ne}),m&&l.jsx("div",{"data-controls":"gap","data-controls-axis":"x",className:`${a}-gap-control`,style:{position:"absolute",top:0,right:Q,width:te,height:"100%"}})]},`${N}-${B}`)};if(M){const h=f?U&&J?"paused":"running":"paused";return l.jsxs("div",{ref:x,className:Le(`${a}-wrapper`,`${a}-marquee-wrapper`),"aria-label":"Marquee",style:E>0&&O>0?{height:O}:void 0,children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:s}}),l.jsx("div",{ref:P,className:`${a}-marquee-track`,"data-direction":r,onMouseEnter:ue,onMouseLeave:ye,style:{"--marquee-play-state":h},children:Array.from({length:Se},(N,B)=>l.jsx("div",{ref:B===0?k:void 0,className:Le(`${a}-marquee-row`,`${a}-marquee-set`),style:{gap:A(d),paddingRight:A(d)},"aria-hidden":B>0,children:C.map((G,re)=>z(G,B,re,B===0))},`set-${B}`))},"marquee-track")]})}return l.jsxs("div",{ref:x,className:`${a}-wrapper`,children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:s}}),l.jsx("div",{className:Le(`${a}-marquee-row`,`${a}-marquee-static`),style:{gap:A(d),transform:"none"},"aria-label":"Marquee",children:t==null?void 0:t.map((h,N)=>z(h,0,N))},"marquee-static")]})},Xc=`import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
1693
1693
|
import cn from 'classnames';
|
|
1694
1694
|
import { CommonComponentProps } from '../props';
|
|
1695
1695
|
import { scalingValue } from '../utils/scalingValue';
|
|
@@ -1833,8 +1833,8 @@ function getCSS(P: string): string {
|
|
|
1833
1833
|
|
|
1834
1834
|
const PX_PER_SEC_PER_SPEED_UNIT = 30;
|
|
1835
1835
|
const GAP_LABEL_AREA_PX = 20;
|
|
1836
|
-
const MIN_CONTENT_SEQUENCE_REPEAT =
|
|
1837
|
-
const OUTER_SET_COPIES =
|
|
1836
|
+
const MIN_CONTENT_SEQUENCE_REPEAT = 2;
|
|
1837
|
+
const OUTER_SET_COPIES = 2;
|
|
1838
1838
|
|
|
1839
1839
|
const expandSetContent = (items: MarqueeItem[], repeat: number) =>
|
|
1840
1840
|
Array.from({ length: repeat }, () => items).flat();
|
|
@@ -2320,7 +2320,7 @@ type MarqueeProps = {
|
|
|
2320
2320
|
isPreviewMode?: boolean;
|
|
2321
2321
|
isEditMode?: boolean;
|
|
2322
2322
|
} & CommonComponentProps;
|
|
2323
|
-
`,Zc={type:"object",version:1,settings:{sizing:"auto manual",properties:{speed:{type:"number",scope:"layout",title:"Speed",display:{type:"speed-control"},min:0,max:7},direction:{type:"string",scope:"common",title:"Direction",display:{type:"direction-control"},enum:["left","right"]},pauseOnHover:{title:"Pause on hover",type:"string",scope:"common",display:{type:"toggle-cycle",enum:["on","off"]}},hoverEffect:{type:"string",scope:"common",title:"Effect",display:{type:"toggle-cycle",enum:["off","brightness","grayscale"]}},gap:{type:"number",scope:"layout",title:"Gap",min:0,
|
|
2323
|
+
`,Zc={type:"object",version:1,settings:{sizing:"auto manual",properties:{speed:{type:"number",scope:"layout",title:"Speed",display:{type:"speed-control"},min:0,max:7},direction:{type:"string",scope:"common",title:"Direction",display:{type:"direction-control"},enum:["left","right"]},pauseOnHover:{title:"Pause on hover",type:"string",scope:"common",display:{type:"toggle-cycle",enum:["on","off"]}},hoverEffect:{type:"string",scope:"common",title:"Effect",display:{type:"toggle-cycle",enum:["off","brightness","grayscale"]}},gap:{type:"number",scope:"layout",title:"Gap",min:0,display:{type:"numeric-input"}},imageMaxWidth:{type:"number",scope:"layout",title:"Max width",min:10,display:{type:"numeric-input"}},imageMaxHeight:{type:"number",scope:"layout",title:"Max height",min:10,display:{type:"numeric-input"}},imageFit:{type:"object",scope:"common",title:"Display",display:{type:"image-ratio-control"},properties:{display:{type:"string",enum:["Fit","Cover"]},ratioValue:{type:"string",enum:["1:1","2:3","3:4","4:5","16:9"]},reversed:{type:"boolean"}}}},defaults:{direction:"left",pauseOnHover:"off",hoverEffect:"off",imageFit:{display:"Fit",ratioValue:"16:9",reversed:!1}},layoutDefaults:{m:{speed:.55,gap:.04,imageMaxWidth:.8,imageMaxHeight:.21},d:{speed:1.64,gap:.02,imageMaxWidth:.208,imageMaxHeight:.278}},displayRules:[{if:{name:"imageFit.display",value:"Cover"},then:{name:"properties.hoverEffect.display.enum",value:["off","brightness","grayscale","randomize"]}}],layout:["__componentName__","speed","direction","pauseOnHover","hoverEffect","gap","imageMaxWidth","imageMaxHeight","imageFit"]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__"]},{type:"row",items:["speed","imageFit"]},{type:"row",items:["imageMaxWidth","imageMaxHeight"]},{type:"row",items:["direction"]},{type:"row",title:"Hover Settings",items:[{type:"row",title:"",items:["hoverEffect","pauseOnHover"]}]}]}],content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{type:"media-input"}},link:{label:"URL",placeholder:"Enter link...",display:{type:"text-input"}}}},default:[{image:{url:"https://cdn.cntrl.site/component-assets/grid(1).webp",name:""},link:""},{image:{url:"https://cdn.cntrl.site/component-assets/grid(2).webp",name:""},link:""},{image:{url:"https://cdn.cntrl.site/component-assets/grid(3).webp",name:""},link:""},{image:{url:"https://cdn.cntrl.site/component-assets/grid(4).webp",name:""},link:""},{image:{url:"https://cdn.cntrl.site/component-assets/grid(5).webp",name:""},link:""}]}},Jc={element:Yc,id:"marquee",name:"Simple Marquee",category:"galleries",version:1,defaultSize:{d:{width:"100%",height:400},m:{width:390,height:80}},preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Simple_Marquee.mp4"},schema:Zc,sourceCode:Xc,assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[]},fontSettingsPaths:{content:[],parameters:[]}};function nr(e){return`
|
|
2324
2324
|
.${e}-marquee-wrapper {
|
|
2325
2325
|
overflow: hidden;
|
|
2326
2326
|
width: 100%;
|
package/dist/index.mjs
CHANGED
|
@@ -8428,7 +8428,7 @@ function Jc(e) {
|
|
|
8428
8428
|
}
|
|
8429
8429
|
`;
|
|
8430
8430
|
}
|
|
8431
|
-
const Qc = 30, ed = 20, Ji =
|
|
8431
|
+
const Qc = 30, ed = 20, Ji = 2, td = 2, nd = (e, t) => Array.from({ length: t }, () => e).flat(), id = (e, t) => {
|
|
8432
8432
|
const n = t.getBoundingClientRect(), i = e.getBoundingClientRect();
|
|
8433
8433
|
return i.right > n.left && i.left < n.right;
|
|
8434
8434
|
}, od = (e, t) => {
|
|
@@ -8887,8 +8887,8 @@ function getCSS(P: string): string {
|
|
|
8887
8887
|
|
|
8888
8888
|
const PX_PER_SEC_PER_SPEED_UNIT = 30;
|
|
8889
8889
|
const GAP_LABEL_AREA_PX = 20;
|
|
8890
|
-
const MIN_CONTENT_SEQUENCE_REPEAT =
|
|
8891
|
-
const OUTER_SET_COPIES =
|
|
8890
|
+
const MIN_CONTENT_SEQUENCE_REPEAT = 2;
|
|
8891
|
+
const OUTER_SET_COPIES = 2;
|
|
8892
8892
|
|
|
8893
8893
|
const expandSetContent = (items: MarqueeItem[], repeat: number) =>
|
|
8894
8894
|
Array.from({ length: repeat }, () => items).flat();
|
|
@@ -9412,7 +9412,6 @@ type MarqueeProps = {
|
|
|
9412
9412
|
scope: "layout",
|
|
9413
9413
|
title: "Gap",
|
|
9414
9414
|
min: 0,
|
|
9415
|
-
max: 200,
|
|
9416
9415
|
display: { type: "numeric-input" }
|
|
9417
9416
|
},
|
|
9418
9417
|
imageMaxWidth: {
|
|
@@ -9420,7 +9419,6 @@ type MarqueeProps = {
|
|
|
9420
9419
|
scope: "layout",
|
|
9421
9420
|
title: "Max width",
|
|
9422
9421
|
min: 10,
|
|
9423
|
-
max: 400,
|
|
9424
9422
|
display: { type: "numeric-input" }
|
|
9425
9423
|
},
|
|
9426
9424
|
imageMaxHeight: {
|
|
@@ -9428,7 +9426,6 @@ type MarqueeProps = {
|
|
|
9428
9426
|
scope: "layout",
|
|
9429
9427
|
title: "Max height",
|
|
9430
9428
|
min: 10,
|
|
9431
|
-
max: 400,
|
|
9432
9429
|
display: { type: "numeric-input" }
|
|
9433
9430
|
},
|
|
9434
9431
|
imageFit: {
|
|
@@ -9471,8 +9468,8 @@ type MarqueeProps = {
|
|
|
9471
9468
|
d: {
|
|
9472
9469
|
speed: 1.64,
|
|
9473
9470
|
gap: 0.02,
|
|
9474
|
-
imageMaxWidth: 0.
|
|
9475
|
-
imageMaxHeight: 0.
|
|
9471
|
+
imageMaxWidth: 0.208,
|
|
9472
|
+
imageMaxHeight: 0.278
|
|
9476
9473
|
}
|
|
9477
9474
|
},
|
|
9478
9475
|
displayRules: [
|
|
@@ -9581,7 +9578,7 @@ type MarqueeProps = {
|
|
|
9581
9578
|
defaultSize: {
|
|
9582
9579
|
d: {
|
|
9583
9580
|
width: "100%",
|
|
9584
|
-
height:
|
|
9581
|
+
height: 400
|
|
9585
9582
|
},
|
|
9586
9583
|
m: {
|
|
9587
9584
|
width: 390,
|