var dStruct = arguments.dataStruct.propertyvalues;
var props = arguments.propsStruct;
var numData = arraylen(dStruct);
var elementID = request.element.id;
var tabCounter = 0;
var idx = 0;
var tabTitleID = 0;
var tabID = 0;
var tabHashID = 0;
var tabKey = 0;
var tabContentKey = 0;
var tabActiveClass = '';
var tabArray = arrayNew(1);
var tabBarStyleAttr = '';
var tabBarClasses = '';
var data = StructNew();
var textClasses = '';
// Tab Bar styles & classes
if( len(props.tabBar.padding) )
tabBarStyleAttr = tabBarStyleAttr & "padding: #props.tabBar.padding#;";
if( len(props.tabBar.bgColor) )
tabBarStyleAttr = tabBarStyleAttr & "background-color: #props.tabBar.bgColor#;";
if( len(tabBarStyleAttr) )
tabBarStyleAttr = 'style="#tabBarStyleAttr#"';
if( len(props.tabBar.align) )
tabBarClasses = trim( tabBarClasses & ' #props.tabBar.align#');
data = StructNew();
// Get TabID (Optional)
// if it does NOT exists, then tabs are bound to content by their ORDER (Ugh!)
if( StructKeyExists(dStruct[idx].values, 'tabID') )
data.tabID = dStruct[idx].values.tabID;
else
data.tabID = idx;
data.title = dStruct[idx].values.title;
if( structKeyExists( dStruct[idx].values, 'icon') )
data.icon = dStruct[idx].values.icon;
else
data.icon = '';
tabCounter = tabCounter + 1;
// Build the simple tabTitleID
tabTitleID = LCase( reReplace( application.ADF.data.unescapeHTMLentities(data.title), '[^a-zA-Z0-9\-\_]', '-', 'ALL' ) );
tabTitleID = REReplaceNoCase(tabTitleID,'-{2,}','-','all');
tabTitleID = ListChangeDelims(tabTitleID, "-", "-");
// Build the unique TabID & Set the tab DIV IDs
tabID = tabTitleID & "-" & elementID & "-" & data.tabID;
tabHashID = 'hTabID-' & tabTitleID;
tabKey = "hTab-" & tabID;
tabContentKey = "hTabContent-" & tabID;
tabActiveClass = '';
if( tabCounter EQ 1 )
tabActiveClass = "tab-current";
// text size
if( len(props.defaultTab.size) )
textClasses = props.defaultTab.size;
#data.title#
#data.title#
tabStruct = structNew();
tabStruct.tabKey = tabKey; // DOM ID
tabStruct.tabContentKey = tabContentKey;
tabStruct.title = data.title;
tabStruct.tabID = data.tabID; // unique ID, or the tab position if tabID not passed
arrayAppend(tabArray,tabStruct);
var data = arguments.tabArray;
var tabContainerHTML = "";
var contentActiveClass = "";
var ariaHiddenState = "true";
var idx = 0;
var st = StructNew();
var key = '';
var value = '';
var item = '';
var retString = '';
for( i=1; i lte ListLen(arguments.FontSettings); i++ )
{
item = ListGetAt(arguments.FontSettings, i);
key = ListFirst(item,':');
value = ListLast(item,':');
st[key] = value;
}
// Bold
if( structKeyExists(st, 'bold') )
{
if( st.bold eq 1 )
retstring = 'font-weight:bold;';
}
// Italic
if( structKeyExists(st, 'italic') )
{
if( st.italic eq 1 )
retstring = retstring & ' font-style:italic;';
}
// Underline
if( structKeyExists(st, 'underline') )
{
if( st.underline eq 1 )
retstring = retstring & ' text-decoration:underline;';
}
// Case
if( structKeyExists(st, 'case') )
{
retstring = retstring & ' text-transform:#st.case#;';
}
return retString;
var props = arguments.propsStruct;
var defaultFontStyles = GetFontStyles(props.defaultTab.fontSettings);
var hoverFontStyles = GetFontStyles(props.hoverTab.fontSettings);
var activeFontStyles = GetFontStyles(props.activeTab.fontSettings);
var hoverBorderStruct = GetBorderStyles(props.defaultBorder, props.hoverBorder);
var elementID = request.element.id;
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a {
color: #props.defaultTab.color#;
background-color: #props.defaultTab.bgColor#;
#defaultFontStyles#
}
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:hover,
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:focus {
color: #props.hoverTab.color#;
background-color: #props.hoverTab.bgColor#;
#hoverFontStyles#
border: #hoverBorderStruct.size# solid #hoverBorderStruct.borderColor#;
}
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a {
color: #props.activeTab.color#;
background-color: #props.activeTab.bgColor#;
#activeFontStyles#
}
#RenderBorderStyles(props)#
var props = arguments.propsStruct;
var defaultFontStyles = GetFontStyles(props.defaultTab.fontSettings);
var hoverFontStyles = GetFontStyles(props.hoverTab.fontSettings);
var activeFontStyles = GetFontStyles(props.activeTab.fontSettings);
var elementID = request.element.id;
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a {
color: #props.defaultTab.color#;
#defaultFontStyles#
}
##cswTabs-#elementID# > div > nav > ul > li.cswTabIconAlign-right > a > i,
##cswTabs-#elementID# > div > nav > ul > li.cswTabIconAlign-left > a > span,
##cswTabs-#elementID# > div > nav > ul > li.cswTabIconAlign-top > a > span,
##cswTabs-#elementID# > div > nav > ul > li.cswTabIconAlign-none > a > span {
margin-right:20px;
}
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:hover,
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:focus {
color: #props.hoverTab.color#;
#hoverFontStyles#
}
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a {
color: #props.activeTab.color#;
#activeFontStyles#
}
#RenderBorderStyles(props)#
var props = arguments.propsStruct;
var defaultFontStyles = GetFontStyles(props.defaultTab.fontSettings);
var hoverFontStyles = GetFontStyles(props.hoverTab.fontSettings);
var activeFontStyles = GetFontStyles(props.activeTab.fontSettings);
var hoverBorderStruct = GetBorderStyles(props.defaultBorder, props.hoverBorder);
var elementID = request.element.id;
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a {
color: #props.defaultTab.color#;
background-color: #props.defaultTab.bgColor#;
#defaultFontStyles#
}
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:hover,
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:focus {
color: #props.hoverTab.color#;
background-color: #props.hoverTab.bgColor#;
#hoverFontStyles#
border: #hoverBorderStruct.size# solid #hoverBorderStruct.borderColor#;
}
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a {
color: #props.activeTab.color#;
background-color: #props.activeTab.bgColor#;
#activeFontStyles#
}
#RenderBorderStyles(props)#
var props = arguments.propsStruct;
var activeStruct = getBorderStyles(props.defaultBorder, props.activeBorder);
var hoverStruct = getBorderStyles(props.defaultBorder, props.hoverBorder);
var elementID = request.element.id;
var lineColor = '';
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a {
border-bottom: #props.defaultBorder.size# solid #props.defaultBorder.borderColor#;
margin-right: 3px;
height: 100%;
padding: #props.defaultBorder.size#;
margin-bottom: -#props.defaultBorder.size#;
}
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:hover,
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:focus {
border: #props.defaultBorder.size# solid #props.defaultBorder.borderColor#;
padding: 0;
}
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a,
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a:hover,
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a:focus {
margin-right: 3px;
border: #props.defaultBorder.size# solid transparent;
border-color: #props.defaultBorder.borderColor# #props.defaultBorder.borderColor# #props.activeTab.bgColor# #props.defaultBorder.borderColor#;
border-color: #props.defaultBorder.borderColor# #props.defaultBorder.borderColor# transparent #props.defaultBorder.borderColor#;
}
##cswTabs-#elementID# > div > nav > ul > li > a {
border: #props.defaultBorder.size# solid #props.defaultBorder.borderColor#;
}
/* default tab following active tab make left border active color */
##cswTabs-#elementID# > div > nav > ul > li.tab-current + li > a {
border-left: #props.defaultBorder.size# solid #props.activeBorder.borderColor#;
}
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current):hover + li > a,
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current):focus + li > a {
border-left: #props.defaultBorder.size# solid #props.hoverBorder.borderColor#;
}
/* hover */
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:hover,
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:focus {
border: #props.defaultBorder.size# solid #hoverStruct.borderColor#;
}
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a {
border: #props.defaultBorder.size# solid #props.activeBorder.borderColor#;
}
##cswTabs-#elementID# > div > nav > ul > li:first-child > a {
margin-left: 0;
}
##cswTabs-#elementID# > div > nav > ul > li:not(:first-child) > a {
margin-left: -#props.defaultBorder.size#;
}
##cswTabs-#elementID# > div > nav > ul > li > a,
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:hover,
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:focus,
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a {
border: none;
}
##cswTabs-#elementID# > div > nav > ul > li > a::after {
background: #props.defaultTab.bgColor#;
}
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:hover::after,
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:focus::after {
background: #props.hoverTab.bgColor#;
}
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a::after {
background: #props.activeTab.bgColor#;
}
##cswTabs-#elementID# > div > nav > ul > li > a,
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:hover,
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:focus,
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a {
border: none;
border-radius: 4px;
margin-right: 3px;
}
##cswTabs-#elementID# > div > nav > ul > li > a {
border-left: #props.defaultBorder.size# solid #props.defaultBorder.borderColor#;
border-right: #props.defaultBorder.size# solid #props.defaultBorder.borderColor#;
}
/* default tab following active tab make left border active color */
##cswTabs-#elementID# > div > nav > ul > li.tab-current + li > a {
border-left: #props.defaultBorder.size# solid #props.activeBorder.borderColor#;
}
/* hover */
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:hover,
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:focus {
border-left: #props.defaultBorder.size# solid #hoverStruct.borderColor#;
border-right: #props.defaultBorder.size# solid #hoverStruct.borderColor#;
}
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a {
border-left: #props.defaultBorder.size# solid #activeStruct.borderColor#;
border-right: #props.defaultBorder.size# solid #activeStruct.borderColor#;
}
##cswTabs-#elementID# > div > nav > ul > li:first-child > a {
margin-left: 0;
}
##cswTabs-#elementID# > div > nav > ul > li:not(:first-child) > a {
margin-left: -#props.defaultBorder.size#;
}
##cswTabs-#elementID# > div > nav > ul > li > a {
border-bottom: #props.defaultBorder.size# solid #props.defaultBorder.borderColor#;
}
/* hover */
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:hover,
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:focus {
border-bottom: #props.defaultBorder.size# solid #props.defaultBorder.borderColor#;
}
##cswTabs-#elementID# > div > nav > ul > li > a {
border-bottom: #props.defaultBorder.size# solid #props.defaultBorder.borderColor#;
}
##cswTabs-#elementID# > div > nav > ul > li > a:hover::after,
##cswTabs-#elementID# > div > nav > ul > li > a:focus::after,
##cswTabs-#elementID# > div > nav > ul > li.tab-current a::after {
background-color: #props.activeTab.bgColor#;
}
/**
##cswTabs-#elementID# > div > nav > ul > li > a::after {
top: #props.defaultBorder.size#;
}
**/
/* hover */
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:hover,
##cswTabs-#elementID# > div > nav > ul > li:not(.tab-current) > a:focus {
border-bottom: #props.defaultBorder.size# solid #props.activeTab.bgColor#;
}
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a {
border-bottom: #props.defaultBorder.size# solid #props.activeTab.bgColor#;
}
lineColor = props.defaultBorder.borderColor;
if( props.tabType eq 'cswTabs-folders' OR props.tabType eq 'cswTabs-slanted' )
lineColor = props.defaultTab.bgColor;
/* full line */
##cswTabs-#elementID# > div > nav > ul {
border-bottom: #props.defaultBorder.size# solid #lineColor#;
}
##cswTabs-#elementID# > div > nav > ul > li {
margin-bottom: -#props.defaultBorder.size#;
}
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a,
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a:hover,
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a:focus {
box-shadow: inset 0px #props.highlightLine.size# 0px 0px #props.highlightLine.borderColor#;
border-top: #props.defaultBorder.size# solid #props.highlightLine.borderColor#;
border-left: #props.defaultBorder.size# solid #props.defaultBorder.borderColor#;
border-right: #props.defaultBorder.size# solid #props.defaultBorder.borderColor#;
border-bottom: #props.defaultBorder.size# solid #props.activeTab.bgColor#;
}
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a,
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a:hover,
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a:focus {
box-shadow: inset 0px -#props.highlightLine.size# 0px 0px #props.highlightLine.borderColor#;
}
##cswTabs-#elementID# > div > nav > ul > li::before {
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
height: #props.highlightLine.size#;
background: #props.highlightLine.borderColor#;
content: '';
transition: all 0.3s ease-in;
z-index:100;
opacity: 0;
}
##cswTabs-#elementID# > div > nav > ul > li.tab-current::before {
left: 25%;
width: 50%;
transition: all 0.3s ease-in;
opacity: 1;
}
##cswTabs-#elementID# > div > nav > ul > li.tab-current::after {
border-top-color: #props.activeTab.bgColor#;
}
##cswTabs-#elementID# > div > nav > ul > li.tab-current > a {
border: #props.highlightLine.size# solid #props.highlightLine.borderColor#;
}
##cswTabs-#elementID# > div > nav li > a {
color: #props.defaultTab.color#;
}
##cswTabs-#elementID# > div > nav li > a svg {
fill: #props.defaultTab.bgColor#;
}
##cswTabs-#elementID# > div > nav li > a {
background-color: #props.defaultTab.bgColor#;
}
##cswTabs-#elementID# > div > nav li > a:hover,
##cswTabs-#elementID# > div > nav li > a:focus {
background-color: #props.hoverTab.bgColor#;
}
##cswTabs-#elementID# > div > nav li > a:hover svg,
##cswTabs-#elementID# > div > nav li > a:focus svg {
fill: #props.hoverTab.bgColor#;
}
##cswTabs-#elementID# > div > nav li.tab-current > a {
background: #props.activeTab.bgColor#;
}
##cswTabs-#elementID# > div > nav li.tab-current > a svg {
fill: #props.activeTab.bgColor#;
}
var padding = arguments.propsStruct.defaultPadding;
var elementID = request.element.id;
var top = 0;
var right = 0;
var bottom = 0;
var left = 0;
var padding_xxs = '';
var padding_xs = '';
var padding_sm = '';
var padding_md = '';
var p = StructNew();
var units = 'px,%,em,rem,vw,vh,vmin,vmax';
var unit = 'px';
var i = 0;
if( padding eq '' )
return;
p.top = val( ListGetAt(padding, 1, ' ') );
p.right = val( ListGetAt(padding, 2, ' ') );
p.bottom = val( ListGetAt(padding, 3, ' ') );
p.left = val( ListGetAt(padding, 4, ' ') );
for( i=1; i lte ListLen(units); i=i+1 )
{
unit = ListGetAt(units, i);
if( findNoCase(unit, padding) )
break;
}
padding_xxs = GetScaledPadding(p, .4, unit);
padding_xs = GetScaledPadding(p, .55, unit);
padding_sm = GetScaledPadding(p, .7, unit);
padding_md = GetScaledPadding(p, .85, unit);
@media (max-width: 479px) {
##cswTabs-#elementID# > div > nav ul > li .cswInner { padding: #padding_xxs#; }
}
@media (min-width: 480px) and (max-width: 767px) {
##cswTabs-#elementID# > div > nav ul > li .cswInner { padding: #padding_xs#; }
}
@media (min-width: 768px) and (max-width: 991px) {
##cswTabs-#elementID# > div > nav ul > li .cswInner { padding: #padding_sm#; }
}
@media (min-width: 992px) and (max-width: 1199px) {
##cswTabs-#elementID# > div > nav ul > li .cswInner { padding: #padding_md#; }
}
@media (min-width: 1200px) {
##cswTabs-#elementID# > div > nav ul > li .cswInner { padding: #padding#; }
}
var u = arguments.unit;
var retString = '';
var p = arguments.padStruct;
var newPad = StructNew();
if( unit eq 'px' )
{
newPad.top = int(p.top * arguments.scale);
newPad.right = int(p.right * arguments.scale);
newPad.bottom = int(p.bottom * arguments.scale);
newPad.left = int(p.left * arguments.scale);
}
else
{
newPad.top = NumberFormat(p.top * arguments.scale, '999.99');
newPad.top = replaceNoCase( newPad.top, '.0', '' );
newPad.right = NumberFormat(p.right * arguments.scale, '999.99');
newPad.right = replaceNoCase( newPad.right, '.0', '' );
newPad.bottom = NumberFormat(p.bottom * arguments.scale, '999.99');
newPad.bottom = replaceNoCase( newPad.bottom, '.0', '' );
newPad.left = NumberFormat(p.left * arguments.scale, '999.99');
newPad.left = replaceNoCase( newPad.left, '.0', '' );
}
retString = newPad.top & u & ' ' & newPad.right & u & ' ' & newPad.bottom & u & ' ' & newPad.left & u;
return retString;
var retStruct = StructNew();
retStruct.size = arguments.default.size;
if( arguments.cur.borderColor eq 'inherit' )
retStruct.borderColor = arguments.default.borderColor;
else
retStruct.borderColor = arguments.cur.borderColor;
return retStruct;