Untitled
unknownplain_text
a month ago
41 kB
1
Indexable
Never
function cssStylesPickerEditorDialogController($scope, formHelper) {
const vm = this;
vm.brandName = 'tt';
vm.defaultValues = {
tt: {
settings: {
mobile: {
container: {
spacing: {
padding: {
t: '8px',
b: '24px',
l: '16px',
r: '8px',
},
margin: {
all: 'None',
},
},
background: {
color: {
from: '#ffe599',
fromTransparent: true,
to: '#f9cb9c',
toTransparent: true,
direction: 'To top',
},
},
border: {
radius: {
tl: 'XL',
tr: 'M',
bl: 'XL',
br: 'XL',
},
width: 'width 1px',
color: '#fff2cc',
style: 'Dotted',
},
effects: {
shadow: 'M',
color: '#fce5cd',
opacity: '25%',
},
sizing: {
width: 'Screen',
height: '16px',
},
},
text: {
typography: {
family: 'Serif',
size: 'XL',
smoothing: true,
italic: true,
weight: '400 (normal)',
spacing: '0.05em (wider)',
lineHeight: '1.25rem/20px',
align: 'Justify',
color: '#38761d',
decoration: 'Overline',
decorationColor: '#b6d7a8',
decorationStyle: 'Dashed',
thickness: '1px',
underlineOffset: '1px',
textTransform: 2,
},
spacing: {
padding: {
t: '16px',
b: '16px',
l: 'None',
r: '32px',
},
margin: {
all: '16px',
},
},
background: {
color: 'Transparent',
},
effects: {
opacity: '10%',
},
sizing: {
width: '1/12',
height: '4px',
},
},
image: {
spacing: {
padding: {
t: '24px',
b: '16px',
l: '24px',
r: 'None',
},
margin: {
all: 'None',
},
},
background: {
color: 'Transparent',
},
border: {
radius: {
tl: 'M',
tr: 'L',
bl: 'S',
br: 'L',
},
width: 'width 2px',
color: '#6fa8dc',
style: 'Double',
},
effects: {
opacity: '20%',
},
sizing: {
width: '1/12',
height: '16px',
},
},
icon: {
spacing: {
padding: {
t: '24px',
b: '8px',
l: '16px',
r: '4px',
},
margin: {
all: '16px',
},
},
background: {
color: 'Transparent',
},
effects: {
opacity: '20%',
},
sizing: {
width: '1/12',
height: '4px',
},
svg: {
fill: {
customFill: 'Inherit',
},
stroke: 'width 2px',
width: 2,
},
},
},
tablet: {
container: {
spacing: {
padding: {
t: '8px',
b: '24px',
l: '16px',
r: '8px',
},
margin: {
all: 'None',
},
},
background: {
color: {
from: '#ffe599',
fromTransparent: true,
to: '#f9cb9c',
toTransparent: true,
direction: 'To top',
},
},
border: {
radius: {
tl: 'XL',
tr: 'M',
bl: 'XL',
br: 'XL',
},
width: 'width 1px',
color: '#fff2cc',
style: 'Dotted',
},
effects: {
shadow: 'M',
color: '#fce5cd',
opacity: '25%',
},
sizing: {
width: 'Screen',
height: '16px',
},
},
text: {
typography: {
family: 'Serif',
size: 'XL',
smoothing: true,
italic: true,
weight: '400 (normal)',
spacing: '0.05em (wider)',
lineHeight: '1.25rem/20px',
align: 'Justify',
color: '#38761d',
decoration: 'Overline',
decorationColor: '#b6d7a8',
decorationStyle: 'Dashed',
thickness: '1px',
underlineOffset: '1px',
textTransform: 2,
},
spacing: {
padding: {
t: '16px',
b: '16px',
l: 'None',
r: '32px',
},
margin: {
all: '16px',
},
},
background: {
color: 'Transparent',
},
effects: {
opacity: '10%',
},
sizing: {
width: '1/12',
height: '4px',
},
},
image: {
spacing: {
padding: {
t: '24px',
b: '16px',
l: '24px',
r: 'None',
},
margin: {
all: 'None',
},
},
background: {
color: 'Transparent',
},
border: {
radius: {
tl: 'M',
tr: 'L',
bl: 'S',
br: 'L',
},
width: 'width 2px',
color: '#6fa8dc',
style: 'Double',
},
effects: {
opacity: '20%',
},
sizing: {
width: '1/12',
height: '16px',
},
},
icon: {
spacing: {
padding: {
t: '24px',
b: '8px',
l: '16px',
r: '4px',
},
margin: {
all: '16px',
},
},
background: {
color: 'Transparent',
},
effects: {
opacity: '20%',
},
sizing: {
width: '1/12',
height: '4px',
},
svg: {
fill: {
customFill: 'Inherit',
},
stroke: 'width 2px',
width: 2,
},
},
},
},
alias: '',
label: '',
},
};
// Constants -----------------------------------------------
const paddingValues = [
'None',
'4px',
'8px',
'16px',
'24px',
'32px',
'40px',
'48px',
'64px',
'80px',
'96px',
];
const marginValues = [
'None',
'4px',
'8px',
'16px',
'24px',
'32px',
'40px',
'48px',
'64px',
'80px',
'96px',
];
const radiusValues = ['None', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL', 'Full'];
const borderStyleValues = ['Solid', 'Double', 'Dotted', 'Dashed', 'Wavy'];
const widthSizeValues = [
'Auto',
'Full',
'Screen',
'1/12',
'2/12',
'3/12',
'4/12',
'5/12',
'6/12',
'7/12',
'8/12',
'9/12',
'10/12',
'11/12',
'12/12',
'4px',
'8px',
'16px',
'24px',
'32px',
'40px',
'48px',
'64px',
'80px',
'96px',
'None',
];
const heightSizeValues = [
'Auto',
'4px',
'8px',
'16px',
'24px',
'32px',
'40px',
'48px',
'64px',
'80px',
'96px',
'128px',
'256px',
'None',
];
const borderWidthValues = [
'width 0px',
'width 2px',
'width 4px',
'width 8px',
'width 1px',
'left right 0px',
'left right 2px',
'left right 4px',
'left right 8px',
'left right 1px',
'top bottom 0px',
'top bottom 2px',
'top bottom 4px',
'top bottom 8px',
'top bottom 1px',
'inline start 0px',
'inline start 2px',
'inline start 4px',
'inline start 8px',
'inline start 1px',
'inline end 0px',
'inline end 2px',
'inline end 4px',
'inline end 8px',
'inline end 1px',
'top 0px',
'top 2px',
'top 4px',
'top 8px',
'top 1px',
'right 0px',
'right 2px',
'right 4px',
'right 8px',
'right 1px',
'bottom 0px',
'bottom 2px',
'bottom 4px',
'bottom 8px',
'bottom 1px',
'left 0px',
'left 2px',
'left 4px',
'left 8px',
'left 1px',
];
const gradientDirectionValues = [
'To left',
'To right',
'To bottom',
'To top',
];
const fontSizeValues = [
'XS',
'S',
'M',
'L',
'XL',
'XXL',
'3XL',
'4XL',
'5XL',
'6XL',
'7XL',
'8XL',
'9XL',
];
const fontWeightValues = [
'100 (thin)',
'200 (extralight)',
'300 (light)',
'400 (normal)',
'500 (medium)',
'600 (semibold)',
'700 (bold)',
'800 (extrabold)',
'900 (black)',
];
const letterSpacingValues = [
'Auto',
'-0.05em (tighter)',
'-0.025em (tight)',
'0.025em (wide)',
'0.05em (wider)',
'0.1em (widest)',
];
const lineHeightValues = [
'Auto',
'.75rem/12px',
'1rem/16px',
'1.25rem/20px',
'1.5rem/24px',
'1.75rem/28px',
'2rem/32px',
'2.25rem/36px',
'2.5rem/ 40px',
'1.25 (tight)',
'1.375 (snug)',
'1.5 (normal)',
'1.625 (relaxed)',
'2 (loose)',
];
const textAlignValues = [
'Left',
'Center',
'Right',
'Justify',
'Start',
'End',
];
const textDecorationValues = ['None', 'Underine', 'Overline', 'Line-through'];
const textDecorationStyleValues = [
'Solid',
'Double',
'Dotted',
'Dashed',
'Wavy',
];
const textDecorationThicknessValues = [
'Auto',
'From font',
'0px',
'1px',
'2px',
'4px',
'8px',
];
const textDecorationOffsetValues = textDecorationThicknessValues;
const textTransformValues = [0, 1, 2];
const opacityValues = [
'0',
'5%',
'10%',
'20%',
'25%',
'30%',
'40%',
'50%',
'60%',
'70%',
'75%',
'80%',
'85%',
'90%',
'95%',
'100%',
];
const fontFamilyValues = ['Sans', 'Serif', 'Mono'];
const shadowValues = ['None', 'Auto', 'S', 'M', 'L', 'XL', 'XXL', 'Inner'];
const customFillColor = ['None', 'Inherit', 'Current', 'Transparent'];
const containerDefaults =
vm.defaultValues[vm.brandName].settings.mobile.container;
const textDefaults = vm.defaultValues[vm.brandName].settings.mobile.text;
const imageDefaults = vm.defaultValues[vm.brandName].settings.mobile.image;
const iconDefaults = vm.defaultValues[vm.brandName].settings.mobile.icon;
function getSpacingSettings(section, settings, property, label) {
return {
name: `Set custom ${property}`,
type: 'toggle',
value: !section.all,
show: true,
property,
variants: [
[
{
name: `${label} All`,
property: 'all',
type: 'dropdown',
value: section.all ?? '',
items: settings,
},
],
[
{
name: `${label} Top`,
property: 't',
type: 'dropdown',
value: section.t ?? '',
items: settings,
},
{
name: `${label} Bottom`,
property: 'b',
type: 'dropdown',
value: section.b ?? '',
items: settings,
},
{
name: `${label} Left`,
property: 'l',
type: 'dropdown',
value: section.l ?? '',
items: settings,
},
{
name: `${label} Right`,
property: 'r',
type: 'dropdown',
value: section.r ?? '',
items: settings,
},
],
],
};
}
function spacingSettings(sectionDefaults) {
return {
title: 'Spacing',
property: 'spacing',
settings: [
getSpacingSettings(
sectionDefaults.spacing.padding,
paddingValues,
'padding',
'Padding'
),
getSpacingSettings(
sectionDefaults.spacing.margin,
marginValues,
'margin',
'Margin'
),
],
};
}
function sizingSettings(sectionDefaults) {
return {
title: 'Sizing',
property: 'sizing',
settings: [
{
name: 'Width',
property: 'width',
type: 'dropdown',
value: sectionDefaults.sizing.width,
items: widthSizeValues,
},
{
name: 'Height',
property: 'height',
type: 'dropdown',
value: sectionDefaults.sizing.height,
items: heightSizeValues,
},
],
};
}
function borderRadiusSettings(sectionDefaults) {
return {
name: 'Set custom radius',
property: 'radius',
type: 'toggle',
value: !sectionDefaults.border.radius.all,
show: true,
variants: [
[
{
name: 'Radius All',
property: 'all',
type: 'dropdown',
value: sectionDefaults.border.radius.all,
items: radiusValues,
},
],
[
{
name: 'Radius Top Left',
property: 'tl',
type: 'dropdown',
value: sectionDefaults.border.radius.tl,
items: radiusValues,
},
{
name: 'Radius Top Right',
property: 'tr',
type: 'dropdown',
value: sectionDefaults.border.radius.tr,
items: radiusValues,
},
{
name: 'Radius Bottom Left',
property: 'bl',
type: 'dropdown',
value: sectionDefaults.border.radius.bl,
items: radiusValues,
},
{
name: 'Radius Bottom Right',
property: 'br',
type: 'dropdown',
value: sectionDefaults.border.radius.br,
items: radiusValues,
},
],
],
};
}
const containerSettings = {
title: 'Container',
property: 'container',
subSections: [
spacingSettings(containerDefaults),
{
title: 'Background',
property: 'background',
isOnlyMobile: true,
settings: [
{
name: 'Set gradient',
property: 'color',
type: 'toggle',
value: !containerDefaults.background.color.color,
show: true,
variants: [
[
{
name: 'Color',
property: 'color',
type: 'colorPicker',
value: containerDefaults.background.color.color,
},
{
name: 'Transparent',
property: 'transparent',
type: 'toggle',
value: containerDefaults.background.color.transparent,
show: true,
},
],
[
{
name: 'From',
property: 'from',
type: 'colorPicker',
value: containerDefaults.background.color.from,
},
{
name: 'Set From color transparent',
property: 'fromTransparent',
type: 'toggle',
value: containerDefaults.background.color.fromTransparent,
show: true,
},
{
name: 'To',
property: 'to',
type: 'colorPicker',
value: containerDefaults.background.color.to,
},
{
name: 'Set To color transparent',
property: 'toTransparent',
type: 'toggle',
value: containerDefaults.background.color.toTransparent,
show: true,
},
{
name: 'Direction',
property: 'direction',
type: 'dropdown',
value: containerDefaults.background.color.direction,
items: gradientDirectionValues,
},
],
],
},
],
},
{
title: 'Border',
property: 'border',
settings: [
borderRadiusSettings(containerDefaults),
{
name: 'Width',
isOnlyMobile: true,
property: 'width',
type: 'dropdown',
value: containerDefaults.border.width,
items: borderWidthValues,
},
{
name: 'Color',
isOnlyMobile: true,
property: 'color',
type: 'colorPicker',
value: containerDefaults.border.color,
},
{
name: 'Style',
isOnlyMobile: true,
property: 'style',
type: 'dropdown',
value: containerDefaults.border.style,
items: borderStyleValues,
},
],
},
{
title: 'Effects',
property: 'effects',
isOnlyMobile: true,
settings: [
{
name: 'Shadow',
property: 'shadow',
type: 'dropdown',
value: containerDefaults.effects.shadow,
items: shadowValues,
},
{
name: 'Color',
property: 'color',
type: 'colorPicker',
value: containerDefaults.effects.color,
},
{
name: 'Opacity',
property: 'opacity',
type: 'dropdown',
value: containerDefaults.effects.opacity,
items: opacityValues,
},
],
},
sizingSettings(containerDefaults),
],
};
const textSettings = {
title: 'Text',
property: 'text',
subSections: [
{
title: 'Typography',
property: 'typography',
settings: [
{
name: 'Font family',
property: 'family',
isOnlyMobile: true,
type: 'dropdown',
value: textDefaults.typography.family,
items: fontFamilyValues,
},
{
name: 'Font size',
property: 'size',
type: 'dropdown',
value: textDefaults.typography.size,
items: fontSizeValues,
},
{
name: 'Set antialiased smoothing',
property: 'smoothing',
isOnlyMobile: true,
type: 'toggle',
show: 'true',
value: textDefaults.typography.smoothing,
show: true,
},
{
name: 'Set italic',
property: 'italic',
isOnlyMobile: true,
type: 'toggle',
value: textDefaults.typography.italic,
show: true,
},
{
name: 'Weight',
property: 'weight',
type: 'dropdown',
value: textDefaults.typography.weight,
items: fontWeightValues,
},
{
name: 'Letter Spacing',
property: 'spacing',
isOnlyMobile: true,
type: 'dropdown',
value: textDefaults.typography.spacing,
items: letterSpacingValues,
},
{
name: 'Line height',
property: 'lineHeight',
type: 'dropdown',
value: textDefaults.typography.lineHeight,
items: lineHeightValues,
},
{
name: 'Text align',
property: 'align',
type: 'dropdown',
value: textDefaults.typography.align,
items: textAlignValues,
},
{
name: 'Color',
property: 'color',
isOnlyMobile: true,
type: 'colorPicker',
value: textDefaults.typography.color,
},
{
name: 'Decoration',
property: 'decoration',
isOnlyMobile: true,
type: 'dropdown',
value: textDefaults.typography.decoration,
items: textDecorationValues,
},
{
name: 'Decoration color',
property: 'decorationColor',
isOnlyMobile: true,
type: 'colorPicker',
value: textDefaults.typography.decorationColor,
},
{
name: 'Decoration Style',
property: 'decorationStyle',
isOnlyMobile: true,
type: 'dropdown',
value: textDefaults.typography.decorationStyle,
items: textDecorationStyleValues,
},
{
name: 'Text Decoration thickness',
property: 'thickness',
isOnlyMobile: true,
type: 'dropdown',
value: textDefaults.typography.thickness,
items: textDecorationThicknessValues,
},
{
name: 'Text underline offset',
property: 'underlineOffset',
type: 'dropdown',
value: textDefaults.typography.underlineOffset,
items: textDecorationOffsetValues,
},
{
name: 'Text transform',
property: 'textTransform',
isOnlyMobile: true,
type: 'dropdown',
value: textDefaults.typography.textTransform,
items: textTransformValues,
},
],
},
spacingSettings(textDefaults),
{
title: 'Background',
property: 'background',
isOnlyMobile: true,
settings: [
{
name: 'Color',
property: 'color',
type: 'dropdown',
value: textDefaults.background.color,
items: ['Current', 'Transparent'],
},
],
},
{
title: 'Effects',
property: 'effects',
isOnlyMobile: true,
settings: [
{
name: 'Opacity',
property: 'opacity',
type: 'dropdown',
value: textDefaults.effects.opacity,
items: opacityValues,
},
],
},
sizingSettings(textDefaults),
],
};
const imageSettings = {
title: 'Image',
property: 'image',
subSections: [
spacingSettings(imageDefaults),
{
title: 'Background',
property: 'background',
isOnlyMobile: true,
settings: [
{
name: 'Color',
property: 'color',
type: 'dropdown',
value: imageDefaults.background.color,
items: ['Current', 'Transparent'],
},
],
},
{
title: 'Border',
property: 'border',
settings: [
borderRadiusSettings(imageDefaults),
{
name: 'Width',
property: 'width',
isOnlyMobile: true,
type: 'dropdown',
value: imageDefaults.border.width,
items: borderWidthValues,
},
{
name: 'Color',
property: 'color',
isOnlyMobile: true,
type: 'colorPicker',
value: imageDefaults.border.color,
},
{
name: 'Style',
property: 'style',
isOnlyMobile: true,
type: 'dropdown',
value: imageDefaults.border.style,
items: borderStyleValues,
},
],
},
{
title: 'Effects',
property: 'effects',
isOnlyMobile: true,
settings: [
{
name: 'Opacity',
property: 'opacity',
type: 'dropdown',
value: imageDefaults.effects.opacity,
items: opacityValues,
},
],
},
sizingSettings(imageDefaults),
],
};
const iconSettings = {
title: 'Icon',
property: 'icon',
subSections: [
spacingSettings(iconDefaults),
{
title: 'Background',
property: 'background',
isOnlyMobile: true,
settings: [
{
name: 'Color',
property: 'color',
type: 'dropdown',
value: iconDefaults.background.color,
items: ['Current', 'Transparent'],
},
],
},
{
title: 'Effects',
property: 'effects',
isOnlyMobile: true,
settings: [
{
name: 'Opacity',
property: 'opacity',
type: 'dropdown',
value: iconDefaults.effects.opacity,
items: opacityValues,
},
],
},
sizingSettings(iconDefaults),
{
title: 'SVG',
property: 'svg',
isOnlyMobile: true,
settings: [
{
name: 'Set custom fill',
property: 'fill',
type: 'toggle',
value: !!iconDefaults.svg.fill.customFill,
show: true,
variants: [
[
{
name: 'Fill',
property: 'color',
type: 'colorPicker',
value: iconDefaults.svg.fill.color,
},
],
[
{
name: 'Fill',
property: 'customFill',
type: 'dropdown',
value: iconDefaults.svg.fill.customFill,
items: customFillColor,
},
],
],
},
{
name: 'Stroke',
property: 'stroke',
type: 'dropdown',
value: iconDefaults.svg.stroke,
items: borderWidthValues,
},
{
name: 'Width',
property: 'width',
type: 'dropdown',
value: iconDefaults.svg.width,
items: [0, 1, 2],
},
],
},
],
};
const basicSettings = [
{
type: 'dropdown-add',
id: 'add-subsection',
value: '',
// show: vm.context.alias,
show: true,
items: [containerSettings, textSettings, imageSettings, iconSettings],
},
{
name: 'Show preview',
type: 'toggle',
id: 'preview',
show: true,
// show: vm.context.alias,
value: false,
},
{
name: 'Show defaults',
type: 'toggle',
id: 'defaults',
value: false,
show: true,
// show: vm.context.alias,
showTooltip: false,
tooltipMessage:
"Show default values for sections. If you don't choose any styles, those styles will be applied.",
},
];
// Constants End -----------------------------------------------
vm.tabs = [
{
label: 'Mobile',
settings: basicSettings,
selector: 'mobile',
show: true,
isRemovable: false,
styledSectionsSettings: [],
},
{
label: 'Tablet',
settings: basicSettings,
selector: 'tablet',
// show: vm.defaultValues[vm.brandName].settings.hasOwnProperty('tablet'),
show: false,
isRemovable: true,
styledSectionsSettings: [],
},
{
label: 'Desktop',
settings: basicSettings,
selector: 'desktop',
// show: vm.defaultValues[vm.brandName].settings.hasOwnProperty('desktop'),
show: false,
isRemovable: true,
styledSectionsSettings: [],
},
];
console.log(vm.tabs);
vm.addSubsection = addSubsection;
vm.saveButtonState = 'init';
vm.close = close;
vm.submit = submit;
vm.init = init;
vm.availableProperties = [];
vm.context = {};
vm.generateRequestData = generateRequestData;
vm.requestData = {};
function isObject(item) {
return item && typeof item === 'object' && !Array.isArray(item);
}
/**
* Deep merge two objects.
* @param target
* @param ...sources
*/
function mergeDeep(target, ...sources) {
if (!sources.length) return target;
const source = sources.shift();
if (isObject(target) && isObject(source)) {
for (const key in source) {
if (isObject(source[key])) {
if (!target[key]) Object.assign(target, { [key]: {} });
mergeDeep(target[key], source[key]);
} else {
Object.assign(target, { [key]: source[key] });
}
}
}
return mergeDeep(target, ...sources);
}
function submit(model) {
vm.requestData = generateRequestData();
console.log(vm.requestData);
if (!formHelper.submitForm({ scope: $scope })) {
return;
}
$scope.model.submit(vm.requestData);
}
function close() {
if ($scope.model && $scope.model.close) {
$scope.model.close();
}
}
function init() {
if ($scope.model.data.availableProperties) {
vm.availableProperties = $scope.model.data.availableProperties;
}
if ($scope.model.data.context) {
vm.context = $scope.model.data.context; // + merge defaults
vm.defaultValues[vm.brandName] = mergeDeep(
vm.defaultValues[vm.brandName],
vm.context
);
}
}
vm.init();
vm.stylingProperties = {
alias: {
name: 'Section',
type: 'dropdown',
id: 'section',
value: vm.defaultValues[vm.brandName].label ?? '',
alias: vm.defaultValues[vm.brandName].alias ?? '',
items: vm.availableProperties,
},
};
// Additional Styling start -------------------------------------------------------
vm.tabselector = 'mobile';
vm.handleDropDownOpen = handleDropDownOpen;
vm.handleDropDownClose = handleDropDownClose;
vm.selectDropDownValue = selectDropDownValue;
vm.selectSection = selectSection;
vm.setShowPickersInSection = setShowPickersInSection;
vm.getDropDownValue = getDropDownValue;
vm.getSectionDropDownValue = getSectionDropDownValue;
vm.mouseOver = mouseOver;
vm.mouseLeave = mouseLeave;
vm.toggle = toggle;
vm.toggleTabShow = toggleTabShow;
vm.getButtonLabel = getButtonLabel;
vm.selectTab = selectTab;
vm.addActiveClass = addActiveClass;
vm.changeColor = changeColor;
function handleDropDownOpen(currentDropDown) {
currentDropDown.dropdownOpen = true;
}
function handleDropDownClose(currentDropDown) {
currentDropDown.dropdownOpen = false;
}
function selectDropDownValue(item, currentSettings, index) {
const currentDropDown = currentSettings[index];
currentDropDown.value = item;
vm.handleDropDownClose(currentDropDown);
}
function changeColor(color, currentSetting) {
const hexColor = color.toHexString();
currentSetting.value = hexColor;
}
function clearEmpties(o) {
for (let k in o) {
if (!o[k] || typeof o[k] !== 'object') {
continue;
}
clearEmpties(o[k]);
if (Object.keys(o[k]).length === 0) {
delete o[k];
}
}
return o;
}
function getDifferences(obj1, obj2) {
if (!obj2 || Object.prototype.toString.call(obj2) !== '[object Object]') {
return obj1;
}
let diffs = {};
let key;
function arraysMatch(arr1, arr2) {
// Check if the arrays are the same length
if (arr1.length !== arr2.length) return false;
// Check if all items exist and are in the same order
for (let i = 0; i < arr1.length; i++) {
if (arr1[i] !== arr2[i]) return false;
}
// Otherwise, return true
return true;
}
function compare(item1, item2, key) {
const type1 = Object.prototype.toString.call(item1);
const type2 = Object.prototype.toString.call(item2);
// If type2 is undefined it has been removed
if (type2 === '[object Undefined]') {
return;
}
if (type1 !== type2) {
diffs[key] = item2;
return;
}
if (type1 === '[object Object]') {
const objDiff = getDifferences(item1, item2);
if (Object.keys(objDiff).length > 0) {
diffs[key] = objDiff;
}
return;
}
if (type1 === '[object Array]') {
if (!arraysMatch(item1, item2)) {
diffs[key] = item2;
}
return;
}
if (type1 === '[object Function]') {
if (item1.toString() !== item2.toString()) {
diffs[key] = item2;
}
} else {
if (item1 !== item2) {
diffs[key] = item2;
}
}
}
for (key in obj1) {
if (obj1.hasOwnProperty(key)) {
compare(obj1[key], obj2[key], key);
}
}
for (key in obj2) {
if (obj2.hasOwnProperty(key)) {
if (!obj1[key] && obj1[key] !== obj2[key]) {
diffs[key] = obj2[key];
}
}
}
return diffs;
}
function generateRequestData() {
const selectedSettings = {};
const requestData = { settings: {}, alias: '', label: '' };
let alias = '';
let label = '';
vm.tabs.map((tab) => {
if (tab.settings.length) {
alias = vm.stylingProperties.alias.alias;
label = vm.stylingProperties.alias.value;
}
let tmp = {};
if (tab.styledSectionsSettings.length) {
tab.styledSectionsSettings.map((section) => {
tmp[section.property] = {};
section.subSections.forEach((subsection) => {
tmp[section.property][subsection.property] = {};
subsection.settings.forEach((setting) => {
tmp[section.property][subsection.property][setting.property] = {};
if (
setting.value &&
setting.value !== 'Select value' &&
!setting.variants?.length
) {
tmp[section.property][subsection.property][setting.property] =
setting.value;
}
if (setting.variants?.length) {
if (!setting.value) {
setting.variants[0].forEach((variant) => {
if (variant.value !== 'Select value' && variant.value) {
tmp[section.property][subsection.property][
setting.property
][variant.property] = variant.value;
}
});
} else {
setting.variants[1].forEach((variant) => {
if (
(variant.value !== 'Select value' && variant.value) ||
variant.type === 'toggle'
) {
tmp[section.property][subsection.property][
setting.property
][variant.property] = variant.value;
}
});
}
}
});
});
});
}
clearEmpties(tmp);
if (Object.keys(tmp).length) {
selectedSettings[tab.selector] = tmp;
}
});
const changedData = getDifferences(
vm.defaultValues[vm.brandName].settings,
selectedSettings
);
if (Object.keys(changedData).length) {
(requestData.settings = changedData),
(requestData.alias = alias),
(requestData.label = label);
}
if (Object.keys(requestData.settings).length) {
return requestData;
} else return undefined;
}
function selectSection(item, property) {
property.value = item.label;
property.alias = item.alias;
if (property.value !== '') {
vm.tabs.forEach((tab) => {
vm.setShowPickersInSection(
tab.settings,
['add-subsection', 'preview', 'defaults'],
true
);
});
vm.handleDropDownClose(property);
}
}
function addSubsection(item, selectedTab, index) {
const currentDropDown = selectedTab.settings[index];
const selectedSection = currentDropDown.items.indexOf(item);
currentDropDown.items.splice(selectedSection, 1);
selectedTab.styledSectionsSettings.push(item);
vm.handleDropDownClose(currentDropDown);
}
function setShowPickersInSection(settings, ids, show) {
settings.forEach((setting) => {
if (ids.some((id) => id === setting.id)) {
setting.show = show;
}
});
}
function getSectionDropDownValue(currentDropDown) {
if (!currentDropDown.value || currentDropDown.value === 'Select value') {
if (vm.context.label) {
currentDropDown.value = vm.context.label;
} else {
currentDropDown.value = 'Select value';
}
}
}
function getDropDownValue(currentDropDown) {
if (
typeof currentDropDown.value !== 'number' &&
!currentDropDown.value?.length
) {
currentDropDown.value = 'Select value';
}
}
function mouseOver(setting) {
setting.showTooltip = true;
}
function mouseLeave(setting) {
setting.showTooltip = false;
}
function toggle(currentSetting) {
if (currentSetting) {
currentSetting.value = !currentSetting.value;
}
}
function toggleTabShow(selectedTab, tabIndex) {
vm.selectTab(selectedTab.selector);
selectedTab.show = !selectedTab.show;
if (selectedTab.show && tabIndex) {
const previousSettings = structuredClone(vm.tabs[tabIndex - 1].settings)
.length
? structuredClone(vm.tabs[tabIndex - 1].settings)
: structuredClone(vm.tabs[0].settings);
const previosStyledSectionsSettings = structuredClone(
vm.tabs[tabIndex - 1].styledSectionsSettings
).length
? structuredClone(vm.tabs[tabIndex - 1].styledSectionsSettings)
: structuredClone(vm.tabs[0].styledSectionsSettings);
selectedTab.settings = previousSettings;
selectedTab.styledSectionsSettings = previosStyledSectionsSettings;
}
if (!selectedTab.show) {
selectedTab.settings = [];
selectedTab.styledSectionsSettings = [];
vm.selectTab(vm.tabs[0].selector);
}
}
function getButtonLabel(show, tabButton) {
return show ? `Add ${tabButton.label}` : `Remove ${tabButton.label}`;
}
function selectTab(tabSelector) {
vm.tabselector = tabSelector;
}
function addActiveClass(tabSelector) {
if (tabSelector === vm.tabselector) {
return 'activetab';
} else return '';
}
}
angular
.module('umbraco')
.controller(
'CssStylesPicker.EditorDialog.Controller',
cssStylesPickerEditorDialogController
);