// load Resources Server.CommonSpot.udf.resources.loadResources("jQuery"); Server.CommonSpot.udf.resources.loadResources("FontAwesome"); Server.CommonSpot.udf.resources.loadResources("cswCommonStyles"); Server.CommonSpot.udf.resources.loadResources("cswButtonStyles"); Server.CommonSpot.udf.resources.loadResources("cswCardStyles"); Server.CommonSpot.udf.resources.loadResources("cswTextStyles"); Server.CommonSpot.udf.resources.loadResources("cswImageStyles"); Server.CommonSpot.udf.resources.loadResources("cswImageTextblock"); // If a custom stylesheets have been registered, go ahead and load them. if( StructKeyExists(Request.Site.CS_Resources.Resources_by_name,'cswCommonStyles_custom') ) Server.CommonSpot.udf.resources.loadResources("cswCommonStyles_custom"); if( StructKeyExists(Request.Site.CS_Resources.Resources_by_name,'cswButtonStyles_custom') ) Server.CommonSpot.udf.resources.loadResources("cswButtonStyles_custom"); if( StructKeyExists(Request.Site.CS_Resources.Resources_by_name,'cswCardStyles_custom') ) Server.CommonSpot.udf.resources.loadResources("cswCardStyles_custom"); if( StructKeyExists(Request.Site.CS_Resources.Resources_by_name,'cswTextStyles_custom') ) Server.CommonSpot.udf.resources.loadResources("cswTextStyles_custom"); if( StructKeyExists(Request.Site.CS_Resources.Resources_by_name,'cswImageStyles_custom') ) Server.CommonSpot.udf.resources.loadResources("cswImageStyles_custom"); if( StructKeyExists(Request.Site.CS_Resources.Resources_by_name,'cswImageTextblock_custom') ) Server.CommonSpot.udf.resources.loadResources("cswImageTextblock_custom"); var widgetMetadataFormName = "CSW ImageTextblock"; var props = StructNew(); var rhMetadata = arguments.ElementInfo.RenderHandlerMetaData; var widgetData = StructNew(); // Check for Props and Layout Binding if( NOT hasPropsLayoutBinding(ElementInfo=arguments.elementInfo,metadataFormName=widgetMetadataFormName,rhCaller=arguments.rhCaller,showDataError=arguments.showDataError) ) return props; // // Get Metadata (Core Image Text block metadata) // ---------------------------------------------- widgetData = rhMetadata[widgetMetadataFormName]; // Theme props.themeClass = ""; if( StructKeyExists(widgetData,"Theme") ) props.themeClass = TRIM(widgetData.Theme); /*******************************/ /**** LAYOUT PROPERTIES TAB ****/ /*******************************/ // Layout props.layout = getStandardField( widgetData=widgetData, field='Layout', defValue='cswLayout-StackedVertically' ); // Card (STRUCT) props.card = getFieldSettings(widgetData=widgetData, field='Card', defShow='1'); // Block (STRUCT) props.block = getFieldSettings(widgetData=widgetData, field='Block'); // Block_Margin (padding) props.blockMargin = getStandardField( widgetData=widgetData, field='Block_Margin', defValue='' ); // Hover (STRUCT) props.hover = getFieldSettings(widgetData=widgetData, field='Hover', defColor='white', defBgColor='orange'); // Theme_Color props.themeColor = getFieldSettings(widgetData=widgetData, field='Theme_Color', defBgColor='orange'); // Overlay (STRUCT) props.overlay = getFieldSettings(widgetData=widgetData, field='Overlay', defShow='1', defTag='p', defColor='white', defBgColor='black', defSize='cswSize-large'); /********************************/ /**** GENERAL PROPERTIES TAB ****/ /********************************/ // Gutter Margin props.gutterMargin = getStandardField( widgetData=widgetData, field='Gutter_Margin', defValue='' ); // Element (STRUCT) props.element = getFieldSettings(widgetData=widgetData, field='Overall'); // Columns (STRUCT) props.Columns = getDeviceSizeOptions(widgetData=widgetData, field='Columns', defXSS='cswColXXS-1', defXS='cswColXS-1', defSM='cswColSM-2', defMD='cswColMD-3', defLG='cswColLG-4'); // For certain layouts adjust the columns if too many if( FindNoCase('MajorAndMinor', props.layout) OR FindNoCase('2x2ImageCenter', props.layout) ) { // Limit to 2 columns if( props.Columns['XXS'] neq "cswColXS-1" ) props.Columns['XXS'] = "cswColXS-2"; if( props.Columns['XS'] neq "cswColSM-1" ) props.Columns['XS'] = "cswColSM-2"; if( props.Columns['MD'] neq "cswColMD-1" ) props.Columns['MD'] = "cswColMD-2"; if( props.Columns['LG'] neq "cswColLG-1" ) props.Columns['LG'] = "cswColLG-2"; } // Build the Column classes props.colClass = getDeviceSizeClassList(props.Columns); // Background Image props.backgroundImage = getStandardMetadataImageField( widgetData=widgetData, field='Background_Image', defValue='' ); // Background Image Focal Point props.backgroundImageFocalPoint = getStandardField( widgetData=widgetData, field='Background_Image_Focal_Point', defValue='' ); /********************************/ /**** IMAGE PROPERTIES TAB ******/ /********************************/ // Image_Align props.imageAlign = getStandardField( widgetData=widgetData, field='Image_Align', defValue='cswImgAlign-left' ); // Image_Width (percentage) props.imageWidth = getStandardField( widgetData=widgetData, field='Image_Width', defValue='33' ); // Image Height props.imageHeightType = getStandardField( widgetData=widgetData, field='Image_Height', defValue='auto' ); props.imageHeightFixed = '350'; props.imageHeightPercentage = '100'; if( FindNoCase( 'percent', props.imageHeightType ) ) { props.imageHeightPercentage = getStandardField( widgetData=widgetData, field='Image_Height_Percentage', defValue='100' ); } else if( FindNoCase( 'fixed', props.imageHeightType ) ) { props.imageHeightFixed = getStandardField( widgetData=widgetData, field='Image_Height_Fixed', defValue='350' ); } // Center_Image props.centerImage = getStandardMetadataImageField( widgetData=widgetData, field='Center_Image', defValue='' ); // Center_Image_Focal_Point props.centerImageFocalPoint = getStandardField( widgetData=widgetData, field='Center_Image_Focal_Point', defValue='cswImgPos-centermiddle' ); // Image Border/Shadow props.imageBorder = getFieldSettings(widgetData=widgetData, field='Image_Border' ); // Image Movement props.imageMovement = getStandardField( widgetData=widgetData, field='Image_Movement', defValue='' ); // Initial_Shading props.initialShading = getFieldSettings(widgetData=widgetData, field='Initial_Shading', defColor='' ); // Rollover_Shading props.rolloverShading = getFieldSettings(widgetData=widgetData, field='Rollover_Shading', defColor='' ); /*************************************************/ /**** TITLE, SUBTITLE & DESC PROPERTIES TAB ******/ /*************************************************/ // Vertical_Alignment props.vertAlign = getStandardField( widgetData=widgetData, field='Vertical_Alignment', defValue='cswVertAlign-top' ); // Title (STRUCT) props.title = getFieldSettings(widgetData=widgetData, field='Title', defShow='1', defTag='p', defColor='orange', defSize='cswSize-large'); // Minor_Title (STRUCT) props.minorTitle = getFieldSettings(widgetData=widgetData, field='Minor_Title', defShow='1', defTag='p', defColor='black', defSize='cswSize-medium'); // Subtitle (STRUCT) props.Subtitle = getFieldSettings(widgetData=widgetData, field='Subtitle', defShow='1', defTag='p', defColor='black', defSize='cswSize-normal'); // Minor_Subtitle (STRUCT) props.minorSubtitle = getFieldSettings(widgetData=widgetData, field='Minor_Subtitle', defShow='1', defTag='p', defColor='black', defSize='cswSize-normal'); // Line (STRUCT) props.line = getFieldSettings(widgetData=widgetData, field='Line', defShow='0', defColor='black', defSize='1px', defStyle='20%'); // Minor_Line (STRUCT) props.minorLine = getFieldSettings(widgetData=widgetData, field='Minor_Line', defShow='0', defColor='black', defSize='1px', defStyle='20%'); // Description (STRUCT) props.desc = getFieldSettings(widgetData=widgetData, field='Description', defShow='1', defTag='p', defColor='grey', defSize='cswSize-normal'); // Minor_Description (STRUCT) props.minorDesc = getFieldSettings(widgetData=widgetData, field='Minor_Description', defShow='1', defTag='p', defColor='grey', defSize='cswSize-normal'); /*************************************/ /**** LINK/BUTTON PROPERTIES TAB *****/ /*************************************/ // Button Type props.buttonType = getStandardField( widgetData=widgetData, field='Button_Type', defValue='cswButton' ); // Button (STRUCT) props.button = getFieldSettings(widgetData=widgetData, field='Button', defShow='0', defColor='white', defBgColor='black', defSize='cswBtnSize-normal', defStyle='cswBtn-filled'); // Button_Corners props.buttonCorners = getStandardField( widgetData=widgetData, field='Button_Corners', defValue='cswBtn-rounded' ); // Link (STRUCT) props.link = getFieldSettings(widgetData=widgetData, field='Link', defShow='0', defColor='inherit', defSize='cswBtnSize-normal', defStyle=''); // Icon props.buttonIcon = getStandardField( widgetData=widgetData, field='Button_Icon', defValue='' ); props.horzAlign = ''; if( len(props.card.align) ) props.horzAlign = props.card.align; /**** Overrides ****/ if( (props.layout eq 'cswLayout-MajorAndMinorOverlayed' OR props.layout eq 'cswLayout-TextOverlayed' ) AND props.vertAlign contains 'inherit' ) { props.vertAlign = 'cswVertAlign-top'; } return props; var elementData = arguments.elementDataStruct; var props = arguments.propsStruct; var items = getItems(elementDataStruct=arguments.elementDataStruct); var totalItems = ArrayLen(items); var styleAttr = ''; var outerClasses = ''; var innerPropsColClass = ''; if ( StructKeyExists(props,'layout') ) outerClasses = props.layout; if( structKeyExists(props,'element') ) { if( len(props.element.padding) ) styleAttr = styleAttr & 'padding: #props.element.padding#;'; if( len(props.element.bgColor) ) styleAttr = styleAttr & 'background-color: #props.element.bgColor#;'; } if( StructKeyExists(props,'backgroundImage') AND len(props.backgroundImage) ) styleAttr = styleAttr & "background-image: url('#props.backgroundImage#'); background-repeat: no-repeat; background-size: cover;"; if( len(styleAttr) ) styleAttr = 'style="#styleAttr#"'; if( StructKeyExists(props,'backgroundImageFocalPoint') ) outerClasses = trim( outerClasses & ' #props.backgroundImageFocalPoint#'); // Alter Columns if number of items less than columns props.Columns = alterColumnClasses(totalItems, props.Columns); props.colClass = getDeviceSizeClassList(props.Columns); props.origLayout = props.layout; innerPropsColClass = props.colClass;
if( props.origLayout eq 'cswLayout-MajorAndMinor' ) props.layout = 'cswLayout-StackedVertically'; else props.layout = 'cswLayout-TextOverlayed'; props.colClass = 'cswColXS-1 cswColSM-1 cswColMD-1 cswColLG-1';
#RenderItems(items, props, 'first')#
if( props.origLayout eq 'cswLayout-MajorAndMinor' ) props.layout = 'cswLayout-ImageOnSide'; else props.layout = 'cswLayout-TextOverlayed'; props.colClass = 'cswColXS-1 cswColSM-1 cswColMD-1 cswColLG-1'; props.gutterMargin = ''; props.title = props.minorTitle; props.subtitle = props.minorSubtitle; props.line = props.minorLine; props.desc = props.minorDesc;
#RenderItems(items, props, 'rest')#
props.origLayout = props.layout; outerPropsColClass = props.colClass; props.imageAlign = ''; props.horzAlign = 'cswVertAlign-center';
props.layout = 'cswLayout-TextOverlayed'; // props.colClass = 'cswColXS-1 cswColSM-1 cswColMD-1 cswColLG-1';
#RenderItems(items, props, 'all')#
props.additionalClasses = ''; if( props.layout eq 'cswLayout-ImageOnSideAlternating' ) { props.layout = 'cswLayout-ImageOnSide'; props.additionalClasses = 'cswAlternating'; props.colClass = 'cswColXS-1 cswColSM-1 cswColMD-1 cswColLG-1'; }
#RenderItems(items, props, 'all')#
var elementData = arguments.elementDataStruct; var items = ArrayNew(1); // Get Records from the Element as an Array of Structures if( StructKeyExists(elementData, 'PropertyValues') AND ArrayLen(elementData.PropertyValues) ) items = elementData.PropertyValues; return items; var i = 1; var start = 1; var totalItems = 1; var items = arguments.itemsArray; var props = arguments.propsStruct; // Determine Mode if( arguments.mode eq 'first' ) { start = 1; totalItems = 1; } else if( arguments.mode eq 'rest' ) { start = 2; totalItems = ArrayLen(items); } else { start = 1; totalItems = ArrayLen(items); } // Loop appropriately for( i=start; i lte totalItems; i=i+1 ) { // Get Data data = getItemData(items[i].values); // RENDER the Image Textblock container renderImageTextBlock( data, props, i ); } var data = StructNew(); var values = arguments.valuesStruct; // Title data.title = getStandardField(widgetData=values, field='title', defValue=''); // Image - could be straight URL or Structure data.image = getStandardCustomElementImageField(widgetData=values, field='image', defValue=''); // LINK URL data.LinkURL = getStandardCustomElementLinkField(widgetData=values, field='LinkURL', defValue=''); // Link Text data.linktext = getStandardField(widgetData=values, field='linkText', defValue=''); // Subtitle data.subtitle = getStandardField(widgetData=values, field='subtitle', defValue=''); // Description data.desc = getStandardField(widgetData=values, field='description', defValue=''); // Image Focal Point (optional) data.imageFocalPoint = getStandardField(widgetData=values, field='Image_Focal_Point', defValue='cswImgPos-centermiddle'); return data; var i = 0; var props = arguments.propsStruct; var data = arguments.dataStruct; var containerClasses = '#props.ImageAlign#'; var containerStyles = ''; var styleAttr = ''; var useThemeClass = ''; var cardStyles = ''; var cardClasses = '#props.colClass#'; if( !StructKeyExists(props.card,"borderColor") ) props.card.borderColor = ''; if( len(props.card.style) AND props.card.style neq 'cswShadow-none' ) cardClasses = cardClasses & ' #props.card.style#'; if( len(props.card.align) ) containerClasses = trim(containerClasses & ' #props.card.align#'); if( len(props.card.borderColor) ) { if( len(props.card.size) eq 0 ) props.card.size = '1px'; if( props.card.size != 'none' ) cardStyles = cardStyles & 'border:#props.card.size# solid #props.card.borderColor#;'; } if( FindNoCase('edgeup', props.card.style) AND ( len(props.card.bgColor) EQ 0 OR props.card.bgColor EQ 'inherit') ) { // force background to be white (if not set and turn up shadow is set) containerStyles = containerStyles & 'background-color:white;'; } else if( len(props.card.bgColor) ) containerStyles = containerStyles & 'background-color:#props.card.bgColor#;'; if( len(props.card.padding) ) containerStyles = containerStyles & 'padding:#props.card.padding#;'; if( cardStyles neq '' ) cardStyles = 'style="#cardStyles#"'; if( containerStyles neq '' ) containerStyles = 'style="#containerStyles#"';
#renderOther(data, props)# #renderImage(data, props)# #renderTitle(data, props)# #renderSubtitle(data, props)# #renderSeparatorLine(data, props)# #renderDescription(data, props)# #renderButton(data, props)#
#renderButton(data, props)#
styleAttr = ''; if( containerStyles neq '' ) containerStyles = 'style="#containerStyles#"'; props.title = props.overlay; if( len(props.overlay.bgColor) ) styleAttr = 'style="background-color:#props.overlay.bgColor#;"';
#renderImage(data, props)#
#renderTitle(data, props)#
#renderOther(data, props)# #renderSubtitle(data, props)# #renderSeparatorLine(data, props)# #renderDescription(data, props)# #renderButton(data, props)#
styleAttr = ''; if( containerStyles neq '' ) containerStyles = 'style="#containerStyles#"';
#renderImage(data, props)#
#renderOther(data, props)# #renderTitle(data, props)# #renderSubtitle(data, props)# #renderSeparatorLine(data, props)# #renderDescription(data, props)#
#renderButton(data, props)#
styleAttr = ''; if( containerStyles neq '' ) containerStyles = 'style="#containerStyles#"';
#renderImage(data, props)#
#renderOther(data, props)# #renderTitle(data, props)# #renderSubtitle(data, props)# #renderSeparatorLine(data, props)# #renderDescription(data, props)#
#renderButton(data, props)#
styleAttr = ''; if( containerStyles neq '' ) containerStyles = 'style="#containerStyles#"'; if( props.block.bgColor neq '' ) styleAttr = styleAttr & 'background-color:#props.block.bgColor#;'; if( props.block.padding neq '' ) styleAttr = styleAttr & 'padding:#props.block.padding#;'; if( props.blockMargin neq '' ) { // make bottom negative and top 0 t = ListGetAt( props.blockMargin, 1, ' '); r = ListGetAt( props.blockMargin, 2, ' '); b = ListGetAt( props.blockMargin, 3, ' '); l = ListGetAt( props.blockMargin, 4, ' '); newPad = '0px #r# -#b# #l#'; styleAttr = styleAttr & 'margin:#newPad#;'; } if( styleAttr neq '' ) styleAttr = 'style="#styleAttr#"';
#renderOther(data, props)# #renderTitle(data, props)# #renderSubtitle(data, props)#
#renderImage(data, props)# #renderDescription(data, props)# #renderButton(data, props)#
styleAttr = ''; useThemeClass = ''; imgWrapperStyle = ''; if( props.layout eq 'cswLayout-AlternatingBlocksVertical' ) { // save off original colors if( NOT StructKeyExists( props, 'titleORIG') ) { props.titleORIG.color = props.title.color; props.subtitleORIG.color = props.subtitle.color; props.lineORIG.color = props.line.color; props.descORIG.color = props.desc.color; } // The ImageTextblockContainer div's background will be the block color // The cswInBlock div's background color will be the Theme color // - for Odd items cswInBlock background will be overriden to transparent remainder = arguments.itemcnt MOD 2; if( remainder eq 0 ) // EVEN { // EVEN use theme if( len(props.themeColor.color) ) containerStyles = containerStyles & 'color:#props.themeColor.color#;'; if( len(props.themeColor.bgColor) ) containerStyles = containerStyles & 'background-color:#props.themeColor.bgColor#;'; // hack: allows children to use 'currentColor' in css styleAttr = 'color:#props.themeColor.bgColor#;'; props.title.color = props.themeColor.color; props.subtitle.color = props.themeColor.color; props.line.color = props.themeColor.color; props.desc.color = props.themeColor.color; } else // Odd use block { if( len(props.block.color) ) containerStyles = containerStyles & 'color:#props.block.color#;'; if( len(props.block.bgColor) ) containerStyles = containerStyles & 'background-color:#props.block.bgColor#;'; // hack: allows children to use 'currentColor' in css styleAttr = 'color:#props.block.bgColor#;'; props.title.color = props.titleORIG.color; props.subtitle.color = props.subtitleORIG.color; props.line.color = props.lineORIG.color; props.desc.color = props.descORIG.color; } } else if( props.layout eq 'cswLayout-ContentInBlockBelow' ) { if( props.block.bgColor neq '' ) styleAttr = styleAttr & 'background-color:#props.block.bgColor#;'; if( props.block.padding neq '' ) styleAttr = styleAttr & 'padding:#props.block.padding#;'; if( props.blockMargin neq '' ) { // make top negative and bottom 0 t = ListGetAt( props.blockMargin, 1, ' '); r = ListGetAt( props.blockMargin, 2, ' '); b = ListGetAt( props.blockMargin, 3, ' '); l = ListGetAt( props.blockMargin, 4, ' '); newPad = '-#t# #r# #b# #l#'; styleAttr = styleAttr & 'margin:#newPad#;'; } } else // Image on Side { // Image Percentage must be in the range of 20-80% imgWrapperWidth = val(props.imageWidth); if( imgWrapperWidth lt 20 ) imgWrapperWidth = 20; else if( imgWrapperWidth gt 80 ) imgWrapperWidth = 80; imgWrapperStyle = 'width:#imgWrapperWidth#%;'; tbWrapperWidth = 100 - imgWrapperWidth; styleAttr = styleAttr & 'width:#tbWrapperWidth#%;'; // will be rendered on cswInBlock } if( len(styleAttr) ) styleAttr = 'style="#styleAttr#"'; if( len(containerStyles) ) containerStyles = 'style="#containerStyles#"';
#renderImage( data, props, imgWrapperStyle )#
#renderOther(data, props)# #renderTitle(data, props)# #renderSubtitle(data, props)# #renderSeparatorLine(data, props)# #renderDescription(data, props)# #renderButton(data, props)#
if( containerStyles neq '' ) containerStyles = 'style="#containerStyles#"'; inBlockStyle = ''; if( len(props.hover.color) ) inBlockStyle = 'style="color:#props.hover.color#;"';
#renderImage(data, props)#
#renderOther(data, props)# #renderTitle(data, props)# #renderSubtitle(data, props)# #renderSeparatorLine(data, props)# #renderDescription(data, props)# #renderButton(data, props)#

Invalid layout: #props.layout#