@cntrl-site/components 1.0.16-alpha.5 → 1.0.17-alpha.0
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 +6 -6
- package/dist/index.mjs +6 -6
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2320,7 +2320,7 @@ type MarqueeProps = {
|
|
|
2320
2320
|
isPreviewMode?: boolean;
|
|
2321
2321
|
isEditMode?: boolean;
|
|
2322
2322
|
} & CommonComponentProps;
|
|
2323
|
-
`,zd={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:["
|
|
2323
|
+
`,zd={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:["direction"]},{type:"row",items:["speed","imageFit"]},{type:"row",items:["imageMaxWidth","imageMaxHeight"]},{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:""}]}},Vd={element:Dd,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:zd,sourceCode:jd,assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[]},fontSettingsPaths:{content:[],parameters:[]}};function _r(e){return`
|
|
2324
2324
|
.${e}-marquee-wrapper {
|
|
2325
2325
|
overflow: hidden;
|
|
2326
2326
|
width: 100%;
|
|
@@ -2407,7 +2407,7 @@ type MarqueeProps = {
|
|
|
2407
2407
|
pointer-events: auto;
|
|
2408
2408
|
z-index: 10;
|
|
2409
2409
|
}
|
|
2410
|
-
`}const Kd=30,Rr=2,Gd=({settings:e,content:t,isEditor:n,isPreviewMode:i,isEditMode:o})=>{const{prefix:a}=E.useScopedStyles(),{align:l,speed:d,direction:s,pauseOnHover:p,gap:u,cardWidth:L,corners:b,stroke:y,strokeColor:m,bgColor:h,padding:C,logoMarginTop:w,logoWidth:v,logoHeight:x,captionMarginTop:O}=e,R=!!o,B=((t==null?void 0:t.length)??0)>0,T=d>0&&(!n
|
|
2410
|
+
`}const Kd=30,Rr=2,Gd=({settings:e,content:t,isEditor:n,isPreviewMode:i,isEditMode:o})=>{const{prefix:a}=E.useScopedStyles(),{align:l,speed:d,direction:s,pauseOnHover:p,gap:u,cardWidth:L,corners:b,stroke:y,strokeColor:m,bgColor:h,padding:C,logoMarginTop:w,logoWidth:v,logoHeight:x,captionMarginTop:O}=e,R=!!o,B=((t==null?void 0:t.length)??0)>0,T=d>0&&(!n||i),P=B&&(T||n),D=Math.max(0,d)*Kd,g=N=>E.scalingValue(N,n??!1),$=c.useRef(null),A=c.useRef(null),H=c.useRef(null),[K,Q]=c.useState(0),[k,_]=c.useState(0),[I,M]=c.useState(0),W=T&&p==="on",[j,U]=c.useState(!1),ie=c.useRef(null),[F,J]=c.useState(0),[f,ne]=c.useState(0),Ce=c.useRef(null),ue=N=>{var Y,te,ce,he,Fe;return{fontSettings:{fontFamily:(e==null?void 0:e[`${N}FontFamily`])??"Arial",fontWeight:((Y=e==null?void 0:e[`${N}FontSettings`])==null?void 0:Y.fontWeight)??400,fontStyle:((te=e==null?void 0:e[`${N}FontSettings`])==null?void 0:te.fontStyle)??"normal"},textAppearance:{textTransform:((ce=e==null?void 0:e[`${N}TextAppearance`])==null?void 0:ce.textTransform)??"none",textDecoration:((he=e==null?void 0:e[`${N}TextAppearance`])==null?void 0:he.textDecoration)??"none",fontVariant:((Fe=e==null?void 0:e[`${N}TextAppearance`])==null?void 0:Fe.fontVariant)??"normal"},letterSpacing:(e==null?void 0:e[`${N}LetterSpacing`])??0,wordSpacing:(e==null?void 0:e[`${N}WordSpacing`])??0,fontSize:(e==null?void 0:e[`${N}FontSize`])??.01,lineHeight:(e==null?void 0:e[`${N}LineHeight`])??.01,color:(e==null?void 0:e[`${N}Color`])??"#000000"}},ye=ue("text"),re=ue("caption"),me=c.useMemo(()=>((t==null?void 0:t.length)??0)>1&&(t??[]).some(N=>{var X,Y;return(((X=N.text)==null?void 0:X.length)??0)>0||(((Y=N.caption)==null?void 0:Y.length)??0)>0}),[t]),q=c.useMemo(()=>!P||(t==null?void 0:t.length)===0?1:k<=0||K<=0?Rr:Math.max(Rr,Math.ceil(K/k)+1),[P,t==null?void 0:t.length,k,K]);c.useLayoutEffect(()=>{if(!P)return;const N=$.current,X=H.current;if(!N||!X)return;let Y=0;const te=()=>{const Fe=N.getBoundingClientRect().width,$e=X.getBoundingClientRect().width,we=Ce.current,Ne=typeof we=="number"&&Math.abs(we-$e)<=.25;if(Ce.current=$e,Q(Fe),typeof $e=="number"&&$e>0&&k<=0){_($e);return}Ne&&$e!==k?_($e):!Ne&&k<=0&&(cancelAnimationFrame(Y),Y=requestAnimationFrame(te))},ce=()=>{cancelAnimationFrame(Y),Y=requestAnimationFrame(te)};ce();const he=new ResizeObserver(ce);return he.observe(N),he.observe(X),()=>{cancelAnimationFrame(Y),he.disconnect()}},[T,P,k]),c.useLayoutEffect(()=>{const N=A.current;if(!P||!N)return;const X=k>0?k:0,Y=X>0&&D>0?X/D*1e3:0,te=`${Math.max(0,Y)/1e3}s`;N.style.setProperty("--marquee-distance",`${X}px`),N.style.setProperty("--marquee-duration",te)},[T,P,D,k]),c.useLayoutEffect(()=>{if(!P){M(0);return}const N=H.current,X=A.current;if(!N||!X)return;const Y=()=>{let ce=0;for(let he=0;he<N.children.length;he++){const $e=N.children[he].firstElementChild;$e&&(ce=Math.max(ce,$e.offsetHeight))}ce<=0&&(ce=X.offsetHeight),M(ce>0?ce:0)};Y();const te=new ResizeObserver(Y);return te.observe(N),te.observe(X),()=>{te.disconnect()}},[P,q,t,n,u,L,C,y,b,v,x,F,f]);const ee=()=>{W&&U(!0)},ae=()=>{W&&U(!1)},oe=c.useMemo(()=>{switch(l){case"center":return"center";case"end":return"flex-end";case"start":default:return"flex-start"}},[l]),be=c.useMemo(()=>{switch(l){case"center":return"center";case"end":return"right";case"start":default:return"left"}},[l]),Re=c.useCallback((N,X,Y,te)=>r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:oe,width:"100%"},children:[r.jsx("div",{"data-controls":R?te==null?void 0:te.controlsName:void 0,"data-controls-axis":R?"y":void 0,className:R?`${a}-control`:void 0,style:{height:g((te==null?void 0:te.marginTop)??0)}}),r.jsx("div",{...te!=null&&te.dataMeasureKind?{"data-testimonial-measure":te.dataMeasureKind}:{},style:{...pt(N,n),textAlign:be,pointerEvents:"auto",...typeof(te==null?void 0:te.minHeightPx)=="number"&&te.minHeightPx>0?{minHeight:te.minHeightPx}:{}},children:r.jsx(Yn,{content:X})})]},Y),[oe,be,n,R,a,g]),xe=c.useCallback((N,X,Y)=>{var te,ce,he;return r.jsxs("div",{style:{padding:`${g(C.top)} ${g(C.right)} ${g(C.bottom)} ${g(C.left)}`,width:g(L+y*2),height:"100%",borderRadius:g(b),border:`${g(y)} solid ${m}`,boxSizing:"border-box",position:"relative",overflow:"hidden"},children:[r.jsx("div",{className:`${a}-cover`,style:{background:h}}),r.jsxs("div",{className:`${a}-elements-overlay`,style:{alignItems:oe,textAlign:be},children:[N.text&&Re(ye,N.text,"text",Y!=null&&Y.dataMeasureAttrs?{dataMeasureKind:"text"}:typeof(Y==null?void 0:Y.textMinHeightPx)=="number"&&Y.textMinHeightPx>0?{minHeightPx:Y.textMinHeightPx}:void 0),r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:oe,width:"100%"},children:[r.jsx("div",{"data-controls":R&&!(Y!=null&&Y.dataMeasureAttrs)?"logoMarginTop":void 0,className:R&&!(Y!=null&&Y.dataMeasureAttrs)?`${a}-control`:void 0,style:{height:g(w)}}),r.jsx("div",{style:{width:g(v),height:g(x)},children:((te=N.logo)==null?void 0:te.url)&&r.jsx("img",{src:N.logo.url,alt:((ce=N.logo)==null?void 0:ce.name)??"",style:{pointerEvents:"auto",width:"100%",height:"100%",objectFit:((he=N.logo)==null?void 0:he.objectFit)||"contain"}})})]}),N.caption&&Re(re,N.caption,"caption",{...Y!=null&&Y.dataMeasureAttrs?{}:{controlsName:"captionMarginTop"},marginTop:O,...Y!=null&&Y.dataMeasureAttrs?{dataMeasureKind:"caption"}:typeof(Y==null?void 0:Y.captionMinHeightPx)=="number"&&Y.captionMinHeightPx>0?{minHeightPx:Y.captionMinHeightPx}:{}})]})]},X)},[h,O,re,L,b,x,w,v,oe,be,C.bottom,C.left,C.right,C.top,Re,y,m,ye,n,R,a]),Pe=c.useCallback(N=>{J(N.maxTextPx),ne(N.maxCaptionPx)},[]);c.useLayoutEffect(()=>{if(!me){Pe({maxTextPx:0,maxCaptionPx:0});return}const N=ie.current;if(!N)return;const X=()=>{E.readTestimonialTextMeasure(N,Pe)};X();const Y=new ResizeObserver(X);return Y.observe(N),()=>{Y.disconnect()}},[me,Pe,t,xe]);const Le=me?{textMinHeightPx:F,captionMinHeightPx:f}:void 0,z=me?r.jsx("div",{ref:ie,"aria-hidden":!0,style:{position:"absolute",left:0,top:0,width:"100%",visibility:"hidden",pointerEvents:"none",zIndex:-1},children:(t??[]).map((N,X)=>xe(N,`measure-${X}`,{dataMeasureAttrs:!0}))}):null,de=(N,X)=>r.jsxs("div",{style:{position:"relative",flex:"0 0 auto",height:"100%",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden",willChange:"transform"},children:[xe(N,`card-${X}`,Le),R&&r.jsx("div",{"data-controls":"gap","data-controls-axis":"x",style:{position:"absolute",top:0,right:`calc(-1 * ${g(u)})`,width:g(u),height:"100%",pointerEvents:"auto",zIndex:2}})]},X);if(P){const N=T?W&&j?"paused":"running":"paused";return r.jsxs("div",{ref:$,className:De(`${a}-wrapper`,`${a}-marquee-wrapper`),"aria-label":"Testimonials",style:{overflow:"hidden",width:"100%",...I>0?{height:I}:{}},children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:_r(a)}}),z,r.jsx("div",{ref:A,className:`${a}-marquee-track`,"data-direction":s,onMouseEnter:ee,onMouseLeave:ae,style:{display:"flex",flexDirection:"row",flexWrap:"nowrap",width:"max-content",willChange:"transform",backfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden",transform:"translateZ(0)",WebkitTransform:"translateZ(0)",perspective:"1000px","--marquee-play-state":N},children:Array.from({length:q},(X,Y)=>r.jsx("div",{ref:Y===0?H:void 0,className:`${a}-marquee-set`,style:{display:"flex",flexDirection:"row",flex:"0 0 auto",gap:g(u),paddingRight:g(u)},"aria-hidden":Y>0,children:t==null?void 0:t.map((te,ce)=>de(te,`${Y}-${ce}`))},`set-${Y}`))})]})}return r.jsxs("div",{className:`${a}-wrapper`,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:_r(a)}}),z,r.jsx("div",{style:{gap:g(u),justifyContent:"center",overflowX:"auto",display:"flex",flexDirection:"row"},"aria-label":"Testimonials",children:t==null?void 0:t.map((N,X)=>de(N,X))})]})},Ud=`import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
2411
2411
|
import cn from 'classnames';
|
|
2412
2412
|
import { CommonComponentProps } from '../props';
|
|
2413
2413
|
import { RichTextRenderer } from '../helpers/RichTextRenderer/RichTextRenderer';
|
|
@@ -2536,8 +2536,8 @@ export const TestimonialGrid = ({ settings, content, isEditor, isPreviewMode, is
|
|
|
2536
2536
|
const { align, speed, direction, pauseOnHover, gap, cardWidth, corners, stroke, strokeColor, bgColor, padding, logoMarginTop, logoWidth, logoHeight, captionMarginTop } = settings;
|
|
2537
2537
|
const showControls = Boolean(isEditMode);
|
|
2538
2538
|
const hasContent = (content?.length ?? 0) > 0;
|
|
2539
|
-
const autoplayEnabled = speed > 0 && (!isEditor ||
|
|
2540
|
-
const useMarqueeTrack = hasContent && (autoplayEnabled ||
|
|
2539
|
+
const autoplayEnabled = speed > 0 && (!isEditor || isPreviewMode);
|
|
2540
|
+
const useMarqueeTrack = hasContent && (autoplayEnabled || isEditor);
|
|
2541
2541
|
const pxPerSec = Math.max(0, speed) * PX_PER_SEC_PER_SPEED_UNIT;
|
|
2542
2542
|
const scaled = (v: number) => scalingValue(v, isEditor ?? false);
|
|
2543
2543
|
const wrapperRef = useRef<HTMLDivElement | null>(null);
|
|
@@ -2546,7 +2546,7 @@ export const TestimonialGrid = ({ settings, content, isEditor, isPreviewMode, is
|
|
|
2546
2546
|
const [containerWidth, setContainerWidth] = useState(0);
|
|
2547
2547
|
const [setWidth, setSetWidth] = useState(0);
|
|
2548
2548
|
const [trackHeight, setTrackHeight] = useState(0);
|
|
2549
|
-
const hoverPauseEnabled = autoplayEnabled && pauseOnHover === 'on';
|
|
2549
|
+
const hoverPauseEnabled = autoplayEnabled && (pauseOnHover === 'on');
|
|
2550
2550
|
const [isHovering, setIsHovering] = useState(false);
|
|
2551
2551
|
const measureLayerRef = useRef<HTMLDivElement>(null);
|
|
2552
2552
|
const [measuredTextMinPx, setMeasuredTextMinPx] = useState(0);
|
|
@@ -3022,7 +3022,7 @@ type TestimonialsSettings = {
|
|
|
3022
3022
|
logoHeight: number;
|
|
3023
3023
|
captionMarginTop: number;
|
|
3024
3024
|
};
|
|
3025
|
-
`,Pr={fontSettings:{type:"object",scope:"common",display:{type:"font-settings"},properties:{fontWeight:{type:"number",scope:"common"},fontStyle:{type:"string",scope:"common"}}}},qd={type:"object",version:1,settings:{sizing:"auto manual",properties:{speed:{type:"number",scope:"layout",title:"Speed",display:{type:"speed-control"},min:0,max:8},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",enum:["on","off"]}},gap:{type:"number",scope:"layout",title:"Gap",min:0,max:200,display:{type:"range-control"}},align:{type:"string",title:"Alignment",display:{type:"align-group",direction:"horizontal"},enum:["start","center","end"]},cardWidth:{type:"number",scope:"layout",title:"width",min:0,max:400,display:{type:"numeric-input"}},corners:{type:"number",scope:"layout",title:"Corners",min:0,max:100,display:{type:"numeric-input"}},stroke:{type:"number",scope:"layout",title:"Stroke",min:0,max:10,display:{type:"numeric-input"}},strokeColor:{type:"string",scope:"common",title:"Stroke Card",display:{type:"palette-color-picker",visible:!0}},bgColor:{title:"BG card",type:"string",scope:"common",display:{type:"palette-color-picker"}},padding:{type:"object",scope:"layout",title:"Padding",display:{type:"padding-controls"}},logoMarginTop:{type:"number",scope:"layout",title:"Logo margin top",min:0,max:200,display:{type:"range-control"}},logoWidth:{type:"number",scope:"layout",title:"width",min:0,max:200,display:{type:"numeric-input"}},logoHeight:{type:"number",scope:"layout",title:"height",min:0,max:200,display:{type:"numeric-input"}},textColor:{type:"string",scope:"common",title:"Fill Text",display:{type:"palette-color-picker"}},captionColor:{type:"string",scope:"common",title:"Fill Caption",display:{type:"palette-color-picker"}},captionMarginTop:{type:"number",scope:"layout",title:"Caption margin top",min:0,max:200,display:{type:"range-control"}},captionFontFamily:{type:"string",scope:"common",title:"Font Family",display:{type:"font-family-select"}},captionFontSettings:{...Pr.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},captionFontSize:{type:"number",scope:"layout",title:"Caption Font Size",display:{type:"font-size"}},captionLineHeight:{type:"number",scope:"layout",title:"Caption Line Height",display:{type:"line-height-input"}},captionLetterSpacing:{type:"number",scope:"layout",title:"Caption Letter Spacing",display:{type:"letter-spacing-input"}},captionWordSpacing:{type:"number",scope:"layout",title:"Caption Word Spacing",display:{type:"word-spacing-input"}},captionTextAppearance:{type:"object",scope:"layout",title:"Caption Text Appearance",display:{type:"text-appearance"}},textFontFamily:{type:"string",scope:"common",title:"Font Family",display:{type:"font-family-select"}},textFontSettings:{...Pr.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},textFontSize:{type:"number",scope:"layout",title:"Text Font Size",display:{type:"font-size"}},textLineHeight:{type:"number",scope:"layout",title:"Text Line Height",display:{type:"line-height-input"}},textLetterSpacing:{type:"number",scope:"layout",title:"Text Letter Spacing",display:{type:"letter-spacing-input"}},textWordSpacing:{type:"number",scope:"layout",title:"Text Word Spacing",display:{type:"word-spacing-input"}},textTextAppearance:{type:"object",scope:"layout",title:"Text Text Appearance",display:{type:"text-appearance"}}},defaults:{direction:"left",pauseOnHover:"off",strokeColor:"#000000",bgColor:"rgba(255, 255, 255, 0.81)",textColor:"#000000",captionColor:"#000000",captionFontFamily:"Goudy Bookletter 1911",captionFontSettings:{fontWeight:400,fontStyle:"normal"},align:"center",captionLetterSpacing:0,captionWordSpacing:0,captionTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},textFontFamily:"Goudy Bookletter 1911",textFontSettings:{fontWeight:400,fontStyle:"normal"},textLetterSpacing:0,textWordSpacing:0,textTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}},layoutDefaults:{m:{speed:.55,gap:.04,cardWidth:.8,corners:.02,stroke:.001,padding:{top:.053,right:.026,bottom:.053,left:.026},logoMarginTop:.18,logoWidth:.21,logoHeight:.21,captionMarginTop:.056,textFontSize:.058,textLineHeight:.088,captionFontSize:.053,captionLineHeight:.069},d:{speed:1.64,gap:.02,cardWidth:.15,corners:.005,stroke:.001,padding:{top:.01,right:.01,bottom:.01,left:.01},logoMarginTop:.048,logoWidth:.055,logoHeight:.027,captionMarginTop:.005,textFontSize:.012,textLineHeight:.013,captionFontSize:.01,captionLineHeight:.01}},displayRules:[{if:{name:"stroke",value:0},then:{name:"properties.strokeColor.display.visible",value:!1}}],layout:["__componentName__","speed","direction","pauseOnHover","gap","cardWidth","corners","stroke","strokeColor","bgColor","padding","logoMarginTop","logoWidth","logoHeight","captionMarginTop"]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__"]},{type:"row",items:["align","direction"]},{type:"row",items:["speed","pauseOnHover"]},{type:"row",title:"Card",items:[{type:"group",title:"",items:["cardWidth","corners"]},{type:"group",title:"",items:["stroke","padding"]}]},{type:"row",title:"Image Container",items:["logoWidth","logoHeight"]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:["__componentName__",{type:"group",title:"Text",items:["textFontFamily","textFontSettings",{type:"group",title:"",items:["text",{type:"row",items:["textFontSize","textLineHeight","textLetterSpacing","textWordSpacing"]},"textTextAppearance"]}]},{type:"group",title:"Caption",items:["captionFontFamily","captionFontSettings",{type:"group",title:"",items:["caption",{type:"row",items:["captionFontSize","captionLineHeight","captionLetterSpacing","captionWordSpacing"]},"captionTextAppearance"]}]}]}],paletteBookmark:{items:["bgColor","strokeColor","textColor","captionColor"],panelIds:["general","typeStyle"]},content:{type:"array",settings:{addItemFromFileExplorer:!1},items:{type:"object",properties:{logo:{type:"object",label:"Image",display:{type:"media-input"}},text:{placeholder:"Add Text...",label:"Text",display:{type:"rich-text"}},caption:{placeholder:"Add Caption...",label:"Caption",display:{type:"rich-text"}}}},default:[{logo:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/julia.png",name:""},text:[{type:"paragraph",children:[{text:"This website is a great tool for designers and developers. The ease of creating animations here is mesmerizing. Bravo to the creators of this product!"}]}],caption:[{type:"paragraph",children:[{text:"Julia Smith,"}]},{type:"paragraph",children:[{text:"Freelance Designer"}]}]},{logo:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/mark.png",name:""},text:[{type:"paragraph",children:[{text:"This is super cool. The on onboarding terminal style animation brings me back to what made the Internet simple and fun."}]}],caption:[{type:"paragraph",children:[{text:"Mark Travis,"}]},{type:"paragraph",children:[{text:"Architect @ United Architects"}]}]},{logo:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/pia.png",name:""},text:[{type:"paragraph",children:[{text:"Great tool for someone who wants to quickly and easily build a site that has fancy scrolling animations. Totally addictive!"}]}],caption:[{type:"paragraph",children:[{text:"Pia,"}]},{type:"paragraph",children:[{text:"Media Buyer"}]}]}]}},Xd={element:Gd,id:"testimonials",name:"Eliana",category:"testimonials",version:1,preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Testimonials_Grid.mp4"},defaultSize:{d:{width:"100%",height:320}},schema:qd,sourceCode:Ud,assetsPaths:{content:[{path:"logo.url",placeholderEnabled:!0}],parameters:[]},fontSettingsPaths:{content:[],parameters:[{path:"styles.text.fontSettings"},{path:"styles.caption.fontSettings"}]}};function Yd(e){return`
|
|
3025
|
+
`,Pr={fontSettings:{type:"object",scope:"common",display:{type:"font-settings"},properties:{fontWeight:{type:"number",scope:"common"},fontStyle:{type:"string",scope:"common"}}}},qd={type:"object",version:1,settings:{sizing:"auto manual",properties:{speed:{type:"number",scope:"layout",title:"Speed",display:{type:"speed-control"},min:0,max:8},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"]}},gap:{type:"number",scope:"layout",title:"Gap",min:0,max:200,display:{type:"range-control"}},align:{type:"string",title:"Alignment",display:{type:"align-group",direction:"horizontal"},enum:["start","center","end"]},cardWidth:{type:"number",scope:"layout",title:"width",min:0,max:400,display:{type:"numeric-input"}},corners:{type:"number",scope:"layout",title:"Corners",min:0,max:100,display:{type:"numeric-input"}},stroke:{type:"number",scope:"layout",title:"Stroke",min:0,max:10,display:{type:"numeric-input"}},strokeColor:{type:"string",scope:"common",title:"Stroke Card",display:{type:"palette-color-picker",visible:!0}},bgColor:{title:"BG card",type:"string",scope:"common",display:{type:"palette-color-picker"}},padding:{type:"object",scope:"layout",title:"Padding",display:{type:"padding-controls"}},logoMarginTop:{type:"number",scope:"layout",title:"Logo margin top",min:0,max:200,display:{type:"range-control"}},logoWidth:{type:"number",scope:"layout",title:"width",min:0,max:200,display:{type:"numeric-input"}},logoHeight:{type:"number",scope:"layout",title:"height",min:0,max:200,display:{type:"numeric-input"}},textColor:{type:"string",scope:"common",title:"Fill Text",display:{type:"palette-color-picker"}},captionColor:{type:"string",scope:"common",title:"Fill Caption",display:{type:"palette-color-picker"}},captionMarginTop:{type:"number",scope:"layout",title:"Caption margin top",min:0,max:200,display:{type:"range-control"}},captionFontFamily:{type:"string",scope:"common",title:"Font Family",display:{type:"font-family-select"}},captionFontSettings:{...Pr.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},captionFontSize:{type:"number",scope:"layout",title:"Caption Font Size",display:{type:"font-size"}},captionLineHeight:{type:"number",scope:"layout",title:"Caption Line Height",display:{type:"line-height-input"}},captionLetterSpacing:{type:"number",scope:"layout",title:"Caption Letter Spacing",display:{type:"letter-spacing-input"}},captionWordSpacing:{type:"number",scope:"layout",title:"Caption Word Spacing",display:{type:"word-spacing-input"}},captionTextAppearance:{type:"object",scope:"layout",title:"Caption Text Appearance",display:{type:"text-appearance"}},textFontFamily:{type:"string",scope:"common",title:"Font Family",display:{type:"font-family-select"}},textFontSettings:{...Pr.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},textFontSize:{type:"number",scope:"layout",title:"Text Font Size",display:{type:"font-size"}},textLineHeight:{type:"number",scope:"layout",title:"Text Line Height",display:{type:"line-height-input"}},textLetterSpacing:{type:"number",scope:"layout",title:"Text Letter Spacing",display:{type:"letter-spacing-input"}},textWordSpacing:{type:"number",scope:"layout",title:"Text Word Spacing",display:{type:"word-spacing-input"}},textTextAppearance:{type:"object",scope:"layout",title:"Text Text Appearance",display:{type:"text-appearance"}}},defaults:{direction:"left",pauseOnHover:"off",strokeColor:"#000000",bgColor:"rgba(255, 255, 255, 0.81)",textColor:"#000000",captionColor:"#000000",captionFontFamily:"Goudy Bookletter 1911",captionFontSettings:{fontWeight:400,fontStyle:"normal"},align:"center",captionLetterSpacing:0,captionWordSpacing:0,captionTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},textFontFamily:"Goudy Bookletter 1911",textFontSettings:{fontWeight:400,fontStyle:"normal"},textLetterSpacing:0,textWordSpacing:0,textTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}},layoutDefaults:{m:{speed:.55,gap:.04,cardWidth:.8,corners:.02,stroke:.001,padding:{top:.053,right:.026,bottom:.053,left:.026},logoMarginTop:.18,logoWidth:.21,logoHeight:.21,captionMarginTop:.056,textFontSize:.058,textLineHeight:.088,captionFontSize:.053,captionLineHeight:.069},d:{speed:1.64,gap:.02,cardWidth:.15,corners:.005,stroke:.001,padding:{top:.01,right:.01,bottom:.01,left:.01},logoMarginTop:.048,logoWidth:.055,logoHeight:.027,captionMarginTop:.005,textFontSize:.012,textLineHeight:.013,captionFontSize:.01,captionLineHeight:.01}},displayRules:[{if:{name:"stroke",value:0},then:{name:"properties.strokeColor.display.visible",value:!1}}],layout:["__componentName__","speed","direction","pauseOnHover","gap","cardWidth","corners","stroke","strokeColor","bgColor","padding","logoMarginTop","logoWidth","logoHeight","captionMarginTop"]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__"]},{type:"row",items:["align","direction"]},{type:"row",items:["speed","pauseOnHover"]},{type:"row",title:"Card",items:[{type:"group",title:"",items:["cardWidth","corners"]},{type:"group",title:"",items:["stroke","padding"]}]},{type:"row",title:"Image Container",items:["logoWidth","logoHeight"]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:["__componentName__",{type:"group",title:"Text",items:["textFontFamily","textFontSettings",{type:"group",title:"",items:["text",{type:"row",items:["textFontSize","textLineHeight","textLetterSpacing","textWordSpacing"]},"textTextAppearance"]}]},{type:"group",title:"Caption",items:["captionFontFamily","captionFontSettings",{type:"group",title:"",items:["caption",{type:"row",items:["captionFontSize","captionLineHeight","captionLetterSpacing","captionWordSpacing"]},"captionTextAppearance"]}]}]}],paletteBookmark:{items:["bgColor","strokeColor","textColor","captionColor"],panelIds:["general","typeStyle"]},content:{type:"array",settings:{addItemFromFileExplorer:!1},items:{type:"object",properties:{logo:{type:"object",label:"Image",display:{type:"media-input"}},text:{placeholder:"Add Text...",label:"Text",display:{type:"rich-text"}},caption:{placeholder:"Add Caption...",label:"Caption",display:{type:"rich-text"}}}},default:[{logo:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/julia.png",name:""},text:[{type:"paragraph",children:[{text:"This website is a great tool for designers and developers. The ease of creating animations here is mesmerizing. Bravo to the creators of this product!"}]}],caption:[{type:"paragraph",children:[{text:"Julia Smith,"}]},{type:"paragraph",children:[{text:"Freelance Designer"}]}]},{logo:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/mark.png",name:""},text:[{type:"paragraph",children:[{text:"This is super cool. The on onboarding terminal style animation brings me back to what made the Internet simple and fun."}]}],caption:[{type:"paragraph",children:[{text:"Mark Travis,"}]},{type:"paragraph",children:[{text:"Architect @ United Architects"}]}]},{logo:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/pia.png",name:""},text:[{type:"paragraph",children:[{text:"Great tool for someone who wants to quickly and easily build a site that has fancy scrolling animations. Totally addictive!"}]}],caption:[{type:"paragraph",children:[{text:"Pia,"}]},{type:"paragraph",children:[{text:"Media Buyer"}]}]}]}},Xd={element:Gd,id:"testimonials",name:"Eliana",category:"testimonials",version:1,preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Testimonials_Grid.mp4"},defaultSize:{d:{width:"100%",height:320}},schema:qd,sourceCode:Ud,assetsPaths:{content:[{path:"logo.url",placeholderEnabled:!0}],parameters:[]},fontSettingsPaths:{content:[],parameters:[{path:"styles.text.fontSettings"},{path:"styles.caption.fontSettings"}]}};function Yd(e){return`
|
|
3026
3026
|
.${e}-container {
|
|
3027
3027
|
position: relative;
|
|
3028
3028
|
overflow-x: clip;
|
package/dist/index.mjs
CHANGED
|
@@ -9495,9 +9495,9 @@ type MarqueeProps = {
|
|
|
9495
9495
|
tooltip: "General Settings",
|
|
9496
9496
|
layout: [
|
|
9497
9497
|
{ type: "row", items: ["__componentName__"] },
|
|
9498
|
+
{ type: "row", items: ["direction"] },
|
|
9498
9499
|
{ type: "row", items: ["speed", "imageFit"] },
|
|
9499
9500
|
{ type: "row", items: ["imageMaxWidth", "imageMaxHeight"] },
|
|
9500
|
-
{ type: "row", items: ["direction"] },
|
|
9501
9501
|
{ type: "row", title: "Hover Settings", items: [
|
|
9502
9502
|
{ type: "row", title: "", items: ["hoverEffect", "pauseOnHover"] }
|
|
9503
9503
|
] }
|
|
@@ -9688,7 +9688,7 @@ function Br(e) {
|
|
|
9688
9688
|
`;
|
|
9689
9689
|
}
|
|
9690
9690
|
const iu = 30, Dr = 2, ou = ({ settings: e, content: t, isEditor: n, isPreviewMode: i, isEditMode: o }) => {
|
|
9691
|
-
const { prefix: r } = ln(), { align: l, speed: c, direction: a, pauseOnHover: u, gap: d, cardWidth: T, corners: v, stroke: f, strokeColor: p, bgColor: g, padding: S, logoMarginTop: C, logoWidth: y, logoHeight: b, captionMarginTop: H } = e, E = !!o, O = ((t == null ? void 0 : t.length) ?? 0) > 0, $ = c > 0 && (!n ||
|
|
9691
|
+
const { prefix: r } = ln(), { align: l, speed: c, direction: a, pauseOnHover: u, gap: d, cardWidth: T, corners: v, stroke: f, strokeColor: p, bgColor: g, padding: S, logoMarginTop: C, logoWidth: y, logoHeight: b, captionMarginTop: H } = e, E = !!o, O = ((t == null ? void 0 : t.length) ?? 0) > 0, $ = c > 0 && (!n || i), _ = O && ($ || n), B = Math.max(0, c) * iu, m = (W) => F(W, n ?? !1), w = ge(null), P = ge(null), N = ge(null), [j, Q] = de(0), [R, I] = de(0), [L, A] = de(0), M = $ && u === "on", [D, G] = de(!1), ne = ge(null), [k, Y] = de(0), [h, te] = de(0), $e = ge(null), pe = (W) => {
|
|
9692
9692
|
var X, ee, ce, ye, Be;
|
|
9693
9693
|
return {
|
|
9694
9694
|
fontSettings: {
|
|
@@ -10197,8 +10197,8 @@ export const TestimonialGrid = ({ settings, content, isEditor, isPreviewMode, is
|
|
|
10197
10197
|
const { align, speed, direction, pauseOnHover, gap, cardWidth, corners, stroke, strokeColor, bgColor, padding, logoMarginTop, logoWidth, logoHeight, captionMarginTop } = settings;
|
|
10198
10198
|
const showControls = Boolean(isEditMode);
|
|
10199
10199
|
const hasContent = (content?.length ?? 0) > 0;
|
|
10200
|
-
const autoplayEnabled = speed > 0 && (!isEditor ||
|
|
10201
|
-
const useMarqueeTrack = hasContent && (autoplayEnabled ||
|
|
10200
|
+
const autoplayEnabled = speed > 0 && (!isEditor || isPreviewMode);
|
|
10201
|
+
const useMarqueeTrack = hasContent && (autoplayEnabled || isEditor);
|
|
10202
10202
|
const pxPerSec = Math.max(0, speed) * PX_PER_SEC_PER_SPEED_UNIT;
|
|
10203
10203
|
const scaled = (v: number) => scalingValue(v, isEditor ?? false);
|
|
10204
10204
|
const wrapperRef = useRef<HTMLDivElement | null>(null);
|
|
@@ -10207,7 +10207,7 @@ export const TestimonialGrid = ({ settings, content, isEditor, isPreviewMode, is
|
|
|
10207
10207
|
const [containerWidth, setContainerWidth] = useState(0);
|
|
10208
10208
|
const [setWidth, setSetWidth] = useState(0);
|
|
10209
10209
|
const [trackHeight, setTrackHeight] = useState(0);
|
|
10210
|
-
const hoverPauseEnabled = autoplayEnabled && pauseOnHover === 'on';
|
|
10210
|
+
const hoverPauseEnabled = autoplayEnabled && (pauseOnHover === 'on');
|
|
10211
10211
|
const [isHovering, setIsHovering] = useState(false);
|
|
10212
10212
|
const measureLayerRef = useRef<HTMLDivElement>(null);
|
|
10213
10213
|
const [measuredTextMinPx, setMeasuredTextMinPx] = useState(0);
|
|
@@ -10718,7 +10718,7 @@ type TestimonialsSettings = {
|
|
|
10718
10718
|
title: "Pause on hover",
|
|
10719
10719
|
type: "string",
|
|
10720
10720
|
scope: "common",
|
|
10721
|
-
display: { type: "toggle", enum: ["on", "off"] }
|
|
10721
|
+
display: { type: "toggle-cycle", enum: ["on", "off"] }
|
|
10722
10722
|
},
|
|
10723
10723
|
gap: {
|
|
10724
10724
|
type: "number",
|