Untitled
unknown
plain_text
a year ago
62 kB
2
Indexable
function cssStylesPickerEditorDialogController($scope, formHelper) {
const vm = this;
vm.defaultValues = {
alias: 'title',
settings: {
container: {
mobile: {
spacing: {
padding: {
t: '4px',
b: '8px',
l: '16px',
r: '24px',
},
margin: {
all: '4px',
},
},
background: {
color: {
color: '#ffe599',
transparent: true,
},
},
border: {
radius: {
tl: 'S',
tr: 'M',
bl: 'M',
br: 'S',
},
width: 'width 2px',
color: '#ffe599',
style: 'Double',
},
effects: {
shadow: 'Auto',
color: '#744700',
opacity: '5%',
},
sizing: {
width: 'Screen',
height: '8px',
},
},
desktop: {
spacing: {
padding: {
t: '4px',
b: '8px',
l: '16px',
r: '24px',
},
margin: {
all: '4px',
},
},
background: {
color: {
color: '#ffe599',
transparent: true,
},
},
border: {
radius: {
tl: 'S',
tr: 'M',
bl: 'M',
br: 'S',
},
width: 'width 2px',
color: '#ffe599',
style: 'Double',
},
effects: {
shadow: 'Auto',
color: '#744700',
opacity: '5%',
},
sizing: {
width: 'Screen',
height: '8px',
},
},
},
text: {
mobile: {
typography: {
family: 'Sans',
size: 'S',
smoothing: true,
italic: true,
weight: '200 (extralight)',
spacing: '-0.05em (tighter)',
lineHeight: '.75rem/12px',
align: 'Center',
color: '#744700',
decoration: 'Underine',
decorationColor: '#16537e',
decorationStyle: 'Double',
thickness: 'From font',
underlineOffset: 'From font',
},
spacing: {
padding: {
t: '4px',
b: '16px',
l: '4px',
r: '4px',
},
margin: {
all: '4px',
},
},
background: {
color: 'Transparent',
},
effects: {
opacity: '5%',
},
sizing: {
width: 'Full',
height: '8px',
},
},
},
icon: {
mobile: {
spacing: {
padding: {
t: '4px',
b: '16px',
l: '8px',
r: '16px',
},
undefined: {
all: 'None',
},
},
background: {
color: 'Current',
},
effects: {
opacity: '10%',
},
sizing: {
width: 'Auto',
height: '4px',
},
svg: {
fill: {
customFill: 'Inherit',
},
stroke: 'width 2px',
width: 1,
},
},
},
image: {
mobile: {
spacing: {
padding: {
t: '8px',
b: '16px',
l: '48px',
r: 'None',
},
margin: {
all: '8px',
},
},
background: {
color: 'Current',
},
border: {
radius: {
tl: 'L',
tr: 'L',
bl: 'S',
br: 'M',
},
width: 'width 0px',
color: '#444444',
style: 'Solid',
},
effects: {
opacity: '5%',
},
sizing: {
width: 'Full',
height: '4px',
},
},
},
},
};
vm.saveButtonState = 'init';
vm.close = close;
vm.submit = submit;
vm.init = init;
vm.availableProperties = [];
vm.context = {};
vm.stylingProperties = {};
vm.generateRequestData = generateRequestData;
vm.requestData = {};
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
} else {
// vm.context = defaults
}
}
vm.init();
// 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',
'2XL',
'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', '2XL', 'Inner'];
const customFillColor = ['None', 'Inherit', 'Current', 'Transparent'];
const containerSettings = {
title: 'Container',
property: 'container',
mobile: [
{
title: 'Spacing',
property: 'spacing',
settings: [
{
name: 'Set custom padding',
type: 'toggle',
value: false,
show: true,
property: 'padding',
variants: [
[
{
name: 'Padding All',
property: 'all',
type: 'dropdown',
value: '',
items: paddingValues,
},
],
[
{
name: 'Padding Top',
property: 't',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Bottom',
property: 'b',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Left',
property: 'l',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Right',
property: 'r',
type: 'dropdown',
value: '',
items: paddingValues,
},
],
],
},
{
name: 'Set custom margin',
property: 'margin',
type: 'toggle',
value: false,
show: true,
variants: [
[
{
name: 'Margin All',
property: 'all',
type: 'dropdown',
value: '',
items: marginValues,
},
],
[
{
name: 'Margin Top',
property: 't',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Bottom',
property: 'b',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Left',
property: 'l',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Right',
property: 'r',
type: 'dropdown',
value: '',
items: marginValues,
},
],
],
},
],
},
{
title: 'Background',
property: 'background',
isOnlyMobile: true,
settings: [
{
name: 'Set gradient',
property: 'color',
type: 'toggle',
value: false,
show: true,
variants: [
[
{
name: 'Color',
property: 'color',
type: 'colorPicker',
value: '',
},
{
name: 'Transparent',
property: 'transparent',
type: 'toggle',
value: false,
show: true,
},
],
[
{
name: 'From',
property: 'from',
type: 'colorPicker',
value: '',
},
{
name: 'Set From color transparent',
property: 'fromTransparent',
type: 'toggle',
value: false,
show: true,
},
{
name: 'To',
propery: 'to',
type: 'colorPicker',
value: '',
},
{
name: 'Set To color transparent',
property: 'toTransparent',
type: 'toggle',
value: false,
show: true,
},
{
name: 'Direction',
property: 'direction',
type: 'dropdown',
value: '',
items: gradientDirectionValues,
},
],
],
},
],
},
{
title: 'Border',
property: 'border',
settings: [
{
name: 'Set custom radius',
property: 'radius',
type: 'toggle',
value: false,
show: true,
variants: [
[
{
name: 'Radius All',
property: 'all',
type: 'dropdown',
value: '',
items: radiusValues,
},
],
[
{
name: 'Radius Top Left',
property: 'tl',
type: 'dropdown',
value: '',
items: radiusValues,
},
{
name: 'Radius Top Right',
property: 'tr',
type: 'dropdown',
value: '',
items: radiusValues,
},
{
name: 'Radius Bottom Left',
property: 'bl',
type: 'dropdown',
value: '',
items: radiusValues,
},
{
name: 'Radius Bottom Right',
property: 'br',
type: 'dropdown',
value: '',
items: radiusValues,
},
],
],
},
{
name: 'Width',
isOnlyMobile: true,
property: 'width',
type: 'dropdown',
value: '',
items: borderWidthValues,
},
{
name: 'Color',
isOnlyMobile: true,
property: 'color',
type: 'colorPicker',
value: '',
},
{
name: 'Style',
isOnlyMobile: true,
property: 'style',
type: 'dropdown',
value: '',
items: borderStyleValues,
},
],
},
{
title: 'Effects',
property: 'effects',
isOnlyMobile: true,
settings: [
{
name: 'Shadow',
property: 'shadow',
type: 'dropdown',
value: '',
items: shadowValues,
},
{
name: 'Color',
property: 'color',
type: 'colorPicker',
value: '',
},
{
name: 'Opacity',
property: 'opacity',
type: 'dropdown',
value: '',
items: opacityValues,
},
],
},
{
title: 'Sizing',
property: 'sizing',
settings: [
{
name: 'Width',
property: 'width',
type: 'dropdown',
value: '',
items: widthSizeValues,
},
{
name: 'Height',
property: 'height',
type: 'dropdown',
value: '',
items: heightSizeValues,
},
],
},
],
tablet: [
{
title: 'Spacing',
property: 'spacing',
settings: [
{
name: 'Set custom padding',
type: 'toggle',
value: false,
show: true,
property: 'padding',
variants: [
[
{
name: 'Padding All',
property: 'all',
type: 'dropdown',
value: '',
items: paddingValues,
},
],
[
{
name: 'Padding Top',
property: 't',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Bottom',
property: 'b',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Left',
property: 'l',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Right',
property: 'r',
type: 'dropdown',
value: '',
items: paddingValues,
},
],
],
},
{
name: 'Set custom margin',
property: 'margin',
type: 'toggle',
value: false,
show: true,
variants: [
[
{
name: 'Margin All',
property: 'all',
type: 'dropdown',
value: '',
items: marginValues,
},
],
[
{
name: 'Margin Top',
property: 't',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Bottom',
property: 'b',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Left',
property: 'l',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Right',
property: 'r',
type: 'dropdown',
value: '',
items: marginValues,
},
],
],
},
],
},
{
title: 'Background',
property: 'background',
isOnlyMobile: true,
settings: [
{
name: 'Set gradient',
property: 'color',
type: 'toggle',
value: false,
show: true,
variants: [
[
{
name: 'Color',
property: 'color',
type: 'colorPicker',
value: '',
},
{
name: 'Transparent',
property: 'transparent',
type: 'toggle',
value: false,
show: true,
},
],
[
{
name: 'From',
property: 'from',
type: 'colorPicker',
value: '',
},
{
name: 'Set From color transparent',
property: 'fromTransparent',
type: 'toggle',
value: false,
show: true,
},
{
name: 'To',
propery: 'to',
type: 'colorPicker',
value: '',
},
{
name: 'Set To color transparent',
property: 'toTransparent',
type: 'toggle',
value: false,
show: true,
},
{
name: 'Direction',
property: 'direction',
type: 'dropdown',
value: '',
items: gradientDirectionValues,
},
],
],
},
],
},
{
title: 'Border',
property: 'border',
settings: [
{
name: 'Set custom radius',
property: 'radius',
type: 'toggle',
value: false,
show: true,
variants: [
[
{
name: 'Radius All',
property: 'all',
type: 'dropdown',
value: '',
items: radiusValues,
},
],
[
{
name: 'Radius Top Left',
property: 'tl',
type: 'dropdown',
value: '',
items: radiusValues,
},
{
name: 'Radius Top Right',
property: 'tr',
type: 'dropdown',
value: '',
items: radiusValues,
},
{
name: 'Radius Bottom Left',
property: 'bl',
type: 'dropdown',
value: '',
items: radiusValues,
},
{
name: 'Radius Bottom Right',
property: 'br',
type: 'dropdown',
value: '',
items: radiusValues,
},
],
],
},
{
name: 'Width',
isOnlyMobile: true,
property: 'width',
type: 'dropdown',
value: '',
items: borderWidthValues,
},
{
name: 'Color',
isOnlyMobile: true,
property: 'color',
type: 'colorPicker',
value: '',
},
{
name: 'Style',
isOnlyMobile: true,
property: 'style',
type: 'dropdown',
value: '',
items: borderStyleValues,
},
],
},
{
title: 'Effects',
property: 'effects',
isOnlyMobile: true,
settings: [
{
name: 'Shadow',
property: 'shadow',
type: 'dropdown',
value: '',
items: shadowValues,
},
{
name: 'Color',
property: 'color',
type: 'colorPicker',
value: '',
},
{
name: 'Opacity',
property: 'opacity',
type: 'dropdown',
value: '',
items: opacityValues,
},
],
},
{
title: 'Sizing',
property: 'sizing',
settings: [
{
name: 'Width',
property: 'width',
type: 'dropdown',
value: '',
items: widthSizeValues,
},
{
name: 'Height',
property: 'height',
type: 'dropdown',
value: '',
items: heightSizeValues,
},
],
},
],
desctop: [
{
title: 'Spacing',
property: 'spacing',
settings: [
{
name: 'Set custom padding',
type: 'toggle',
value: false,
show: true,
property: 'padding',
variants: [
[
{
name: 'Padding All',
property: 'all',
type: 'dropdown',
value: '',
items: paddingValues,
},
],
[
{
name: 'Padding Top',
property: 't',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Bottom',
property: 'b',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Left',
property: 'l',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Right',
property: 'r',
type: 'dropdown',
value: '',
items: paddingValues,
},
],
],
},
{
name: 'Set custom margin',
property: 'margin',
type: 'toggle',
value: false,
show: true,
variants: [
[
{
name: 'Margin All',
property: 'all',
type: 'dropdown',
value: '',
items: marginValues,
},
],
[
{
name: 'Margin Top',
property: 't',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Bottom',
property: 'b',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Left',
property: 'l',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Right',
property: 'r',
type: 'dropdown',
value: '',
items: marginValues,
},
],
],
},
],
},
{
title: 'Background',
property: 'background',
isOnlyMobile: true,
settings: [
{
name: 'Set gradient',
property: 'color',
type: 'toggle',
value: false,
show: true,
variants: [
[
{
name: 'Color',
property: 'color',
type: 'colorPicker',
value: '',
},
{
name: 'Transparent',
property: 'transparent',
type: 'toggle',
value: false,
show: true,
},
],
[
{
name: 'From',
property: 'from',
type: 'colorPicker',
value: '',
},
{
name: 'Set From color transparent',
property: 'fromTransparent',
type: 'toggle',
value: false,
show: true,
},
{
name: 'To',
propery: 'to',
type: 'colorPicker',
value: '',
},
{
name: 'Set To color transparent',
property: 'toTransparent',
type: 'toggle',
value: false,
show: true,
},
{
name: 'Direction',
property: 'direction',
type: 'dropdown',
value: '',
items: gradientDirectionValues,
},
],
],
},
],
},
{
title: 'Border',
property: 'border',
settings: [
{
name: 'Set custom radius',
property: 'radius',
type: 'toggle',
value: false,
show: true,
variants: [
[
{
name: 'Radius All',
property: 'all',
type: 'dropdown',
value: '',
items: radiusValues,
},
],
[
{
name: 'Radius Top Left',
property: 'tl',
type: 'dropdown',
value: '',
items: radiusValues,
},
{
name: 'Radius Top Right',
property: 'tr',
type: 'dropdown',
value: '',
items: radiusValues,
},
{
name: 'Radius Bottom Left',
property: 'bl',
type: 'dropdown',
value: '',
items: radiusValues,
},
{
name: 'Radius Bottom Right',
property: 'br',
type: 'dropdown',
value: '',
items: radiusValues,
},
],
],
},
{
name: 'Width',
isOnlyMobile: true,
property: 'width',
type: 'dropdown',
value: '',
items: borderWidthValues,
},
{
name: 'Color',
isOnlyMobile: true,
property: 'color',
type: 'colorPicker',
value: '',
},
{
name: 'Style',
isOnlyMobile: true,
property: 'style',
type: 'dropdown',
value: '',
items: borderStyleValues,
},
],
},
{
title: 'Effects',
property: 'effects',
isOnlyMobile: true,
settings: [
{
name: 'Shadow',
property: 'shadow',
type: 'dropdown',
value: '',
items: shadowValues,
},
{
name: 'Color',
property: 'color',
type: 'colorPicker',
value: '',
},
{
name: 'Opacity',
property: 'opacity',
type: 'dropdown',
value: '',
items: opacityValues,
},
],
},
{
title: 'Sizing',
property: 'sizing',
settings: [
{
name: 'Width',
property: 'width',
type: 'dropdown',
value: '',
items: widthSizeValues,
},
{
name: 'Height',
property: 'height',
type: 'dropdown',
value: '',
items: heightSizeValues,
},
],
},
],
};
const textSettings = {
title: 'Text',
property: 'text',
subSections: [
{
title: 'Typography',
property: 'typography',
settings: [
{
name: 'Font family',
property: 'family',
isOnlyMobile: true,
type: 'dropdown',
value: '',
items: fontFamilyValues,
},
{
name: 'Font size',
property: 'size',
type: 'dropdown',
value: '',
items: fontSizeValues,
},
{
name: 'Set antialiased smoothing',
property: 'smoothing',
isOnlyMobile: true,
type: 'toggle',
show: 'true',
value: false,
show: true,
},
{
name: 'Set italic',
property: 'italic',
isOnlyMobile: true,
type: 'toggle',
value: false,
show: true,
},
{
name: 'Weight',
property: 'weight',
type: 'dropdown',
value: '',
items: fontWeightValues,
},
{
name: 'Letter Spacing',
property: 'spacing',
isOnlyMobile: true,
type: 'dropdown',
value: '',
items: letterSpacingValues,
},
{
name: 'Line height',
property: 'lineHeight',
type: 'dropdown',
value: '',
items: lineHeightValues,
},
{
name: 'Text align',
property: 'align',
type: 'dropdown',
value: '',
items: textAlignValues,
},
{
name: 'Color',
property: 'color',
isOnlyMobile: true,
type: 'colorPicker',
value: '',
},
{
name: 'Decoration',
property: 'decoration',
isOnlyMobile: true,
type: 'dropdown',
value: '',
items: textDecorationValues,
},
{
name: 'Decoration color',
property: 'decorationColor',
isOnlyMobile: true,
type: 'colorPicker',
value: '',
},
{
name: 'Decoration Style',
property: 'decorationStyle',
isOnlyMobile: true,
type: 'dropdown',
value: '',
items: textDecorationStyleValues,
},
{
name: 'Text Decoration thickness',
property: 'thickness',
isOnlyMobile: true,
type: 'dropdown',
value: '',
items: textDecorationThicknessValues,
},
{
name: 'Text underline offset',
property: 'underlineOffset',
type: 'dropdown',
value: '',
items: textDecorationOffsetValues,
},
{
name: 'Text transform',
property: 'textTransform',
isOnlyMobile: true,
type: 'dropdown',
value: '',
items: textTransformValues,
},
],
},
{
title: 'Spacing',
property: 'spacing',
settings: [
{
name: 'Set custom padding',
property: 'padding',
type: 'toggle',
value: false,
show: true,
variants: [
[
{
name: 'Padding All',
property: 'all',
type: 'dropdown',
value: '',
items: paddingValues,
},
],
[
{
name: 'Padding Top',
property: 't',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Bottom',
property: 'b',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Left',
property: 'l',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Right',
property: 'r',
type: 'dropdown',
value: '',
items: paddingValues,
},
],
],
},
{
name: 'Set custom margin',
property: 'margin',
type: 'toggle',
value: false,
show: true,
variants: [
[
{
name: 'Margin All',
property: 'all',
type: 'dropdown',
value: '',
items: marginValues,
},
],
[
{
name: 'Margin Top',
property: 't',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Bottom',
property: 't',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Left',
property: 'l',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Right',
property: 'r',
type: 'dropdown',
value: '',
items: marginValues,
},
],
],
},
],
},
{
title: 'Background',
property: 'background',
isOnlyMobile: true,
settings: [
{
name: 'Color',
property: 'color',
type: 'dropdown',
value: '',
items: ['Current', 'Transparent'],
},
],
},
{
title: 'Effects',
property: 'effects',
isOnlyMobile: true,
settings: [
{
name: 'Opacity',
property: 'opacity',
type: 'dropdown',
value: '',
items: opacityValues,
},
],
},
{
title: 'Sizing',
property: 'sizing',
settings: [
{
name: 'Width',
property: 'width',
type: 'dropdown',
value: '',
items: widthSizeValues,
},
{
name: 'Height',
property: 'height',
type: 'dropdown',
value: '',
items: heightSizeValues,
},
],
},
],
};
const imageSettings = {
title: 'Image',
property: 'image',
subSections: [
{
title: 'Spacing',
property: 'spacing',
settings: [
{
name: 'Set custom padding',
property: 'padding',
type: 'toggle',
value: false,
show: true,
variants: [
[
{
name: 'Padding All',
property: 'all',
type: 'dropdown',
value: '',
items: paddingValues,
},
],
[
{
name: 'Padding Top',
property: 't',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Bottom',
property: 'b',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Left',
property: 'l',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Right',
property: 'r',
type: 'dropdown',
value: '',
items: paddingValues,
},
],
],
},
{
name: 'Set custom margin',
property: 'margin',
type: 'toggle',
value: false,
show: true,
variants: [
[
{
name: 'Margin All',
property: 'all',
type: 'dropdown',
value: '',
items: marginValues,
},
],
[
{
name: 'Margin Top',
property: 't',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Bottom',
property: 'b',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Left',
property: 'l',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Right',
property: 'r',
type: 'dropdown',
value: '',
items: marginValues,
},
],
],
},
],
},
{
title: 'Background',
property: 'background',
isOnlyMobile: true,
settings: [
{
name: 'Color',
property: 'color',
type: 'dropdown',
value: '',
items: ['Current', 'Transparent'],
},
],
},
{
title: 'Border',
property: 'border',
settings: [
{
name: 'Set custom radius',
property: 'radius',
type: 'toggle',
value: false,
show: true,
variants: [
[
{
name: 'Radius All',
property: 'all',
type: 'dropdown',
value: '',
items: radiusValues,
},
],
[
{
name: 'Radius Top Left',
property: 'tl',
type: 'dropdown',
value: '',
items: radiusValues,
},
{
name: 'Radius Top Right',
property: 'tr',
type: 'dropdown',
value: '',
items: radiusValues,
},
{
name: 'Radius Bottom Left',
property: 'bl',
type: 'dropdown',
value: '',
items: radiusValues,
},
{
name: 'Radius Bottom Right',
property: 'br',
type: 'dropdown',
value: '',
items: radiusValues,
},
],
],
},
{
name: 'Width',
property: 'width',
isOnlyMobile: true,
type: 'dropdown',
value: '',
items: borderWidthValues,
},
{
name: 'Color',
property: 'color',
isOnlyMobile: true,
type: 'colorPicker',
value: '',
},
{
name: 'Style',
property: 'style',
isOnlyMobile: true,
type: 'dropdown',
value: '',
items: borderStyleValues,
},
],
},
{
title: 'Effects',
property: 'effects',
isOnlyMobile: true,
settings: [
{
name: 'Opacity',
property: 'opacity',
type: 'dropdown',
value: '',
items: opacityValues,
},
],
},
{
title: 'Sizing',
property: 'sizing',
settings: [
{
name: 'Width',
property: 'width',
type: 'dropdown',
value: '',
items: widthSizeValues,
},
{
name: 'Height',
property: 'height',
type: 'dropdown',
value: '',
items: heightSizeValues,
},
],
},
],
};
const iconSettings = {
title: 'Icon',
property: 'icon',
subSections: [
{
title: 'Spacing',
property: 'spacing',
settings: [
{
name: 'Set custom padding',
property: 'padding',
type: 'toggle',
value: false,
show: true,
variants: [
[
{
name: 'Padding All',
property: 'all',
type: 'dropdown',
value: '',
items: paddingValues,
},
],
[
{
name: 'Padding Top',
property: 't',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Bottom',
property: 'b',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Left',
property: 'l',
type: 'dropdown',
value: '',
items: paddingValues,
},
{
name: 'Padding Right',
property: 'r',
type: 'dropdown',
value: '',
items: paddingValues,
},
],
],
},
{
name: 'Set custom margin',
type: 'toggle',
value: false,
show: true,
variants: [
[
{
name: 'Margin All',
property: 'all',
type: 'dropdown',
value: '',
items: marginValues,
},
],
[
{
name: 'Margin Top',
property: 't',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Bottom',
property: 'b',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Left',
property: 'l',
type: 'dropdown',
value: '',
items: marginValues,
},
{
name: 'Margin Right',
property: 'r',
type: 'dropdown',
value: '',
items: marginValues,
},
],
],
},
],
},
{
title: 'Background',
property: 'background',
isOnlyMobile: true,
settings: [
{
name: 'Color',
property: 'color',
type: 'dropdown',
value: '',
items: ['Current', 'Transparent'],
},
],
},
{
title: 'Effects',
property: 'effects',
isOnlyMobile: true,
settings: [
{
name: 'Opacity',
property: 'opacity',
type: 'dropdown',
value: '',
items: opacityValues,
},
],
},
{
title: 'Sizing',
property: 'sizing',
settings: [
{
name: 'Width',
property: 'width',
type: 'dropdown',
value: '',
items: widthSizeValues,
},
{
name: 'Height',
property: 'height',
type: 'dropdown',
value: '',
items: heightSizeValues,
},
],
},
{
title: 'SVG',
property: 'svg',
isOnlyMobile: true,
settings: [
{
name: 'Set custom fill',
property: 'fill',
type: 'toggle',
value: false,
show: true,
variants: [
[
{
name: 'Fill',
property: 'fill',
type: 'colorPicker',
value: '',
},
],
[
{
name: 'Fill',
property: 'customFill',
type: 'dropdown',
value: '',
items: customFillColor,
},
],
],
},
{
name: 'Stroke',
property: 'stroke',
type: 'dropdown',
value: '',
items: borderWidthValues,
},
{
name: 'Width',
property: 'width',
type: 'dropdown',
value: '',
items: [0, 1, 2],
},
],
},
],
};
console.log(vm.defaultValues.alias);
const basicSettings = [
{
name: 'Add Styles for',
type: 'dropdown-add',
id: 'add-subsection',
value: '',
show: vm.defaultValues.alias,
items: [containerSettings],
},
{
name: 'Show preview',
type: 'toggle',
id: 'preview',
show: vm.defaultValues.alias,
value: false,
},
{
name: 'Show defaults',
type: 'toggle',
id: 'defaults',
value: false,
show: vm.defaultValues.alias,
showTooltip: false,
tooltipMessage:
"Show default values for sections. If you don't choose any styles, those styles will be applied.",
},
];
// Constants End -----------------------------------------------
// Additional Styling start -------------------------------------------------------
vm.tabselector = 'mobile';
vm.handleDropDownOpen = handleDropDownOpen;
vm.handleDropDownClose = handleDropDownClose;
vm.selectDropDownValue = selectDropDownValue;
vm.selectSection = selectSection;
vm.addSubsection = addSubsection;
vm.setShowPickersInSection = setShowPickersInSection;
vm.getDropDownValue = getDropDownValue;
vm.mouseOver = mouseOver;
vm.mouseLeave = mouseLeave;
vm.toggle = toggle;
vm.toggleTabShow = toggleTabShow;
vm.getButtonLabel = getButtonLabel;
vm.selectTab = selectTab;
vm.addActiveClass = addActiveClass;
vm.changeColor = changeColor;
vm.tabs = [
{
label: 'Mobile',
settings: basicSettings,
selector: 'mobile',
show: true,
isRemovable: false,
styledSectionsSettings: [],
},
{
label: 'Tablet',
settings: basicSettings,
selector: 'tablet',
show: Object.values(vm.defaultValues.settings).find((el) =>
el.hasOwnProperty('tablet')
),
isRemovable: true,
styledSectionsSettings: [],
},
{
label: 'Desktop',
settings: basicSettings,
selector: 'desktop',
show: Object.values(vm.defaultValues.settings).find((el) =>
el.hasOwnProperty('desktop')
),
isRemovable: true,
styledSectionsSettings: [],
},
];
vm.stylingProperties = {
alias: {
name: 'Section',
type: 'dropdown',
id: 'section',
value: vm.defaultValues.alias ?? '',
show: true,
items: ['Title', 'Pretitle', 'Description'],
},
settings: [containerSettings],
};
console.log(vm.stylingProperties);
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 (var 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 generateRequestData() {
const requestData = { settings: {}, alias: '', label: '' };
vm.stylingProperties.settings.map((tab) => {
let alias = '';
let label = '';
if (tab.settings.length && tab.settings[0].value) {
alias = tab.settings[0].model.alias;
label = tab.settings[0].model.label;
}
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) {
tmp[section.property][subsection.property][
setting.property
][variant.property] = variant.value;
}
});
}
}
});
});
});
}
clearEmpties(tmp);
if (Object.keys(tmp).length) {
requestData.settings[tab.selector] = tmp;
requestData.alias = alias;
requestData.label = label;
}
});
return requestData;
}
function selectSection(item, property) {
property.value = item;
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) {
console.log(settings);
settings.forEach((setting) => {
if (ids.some((id) => id === setting.id)) {
setting.show = show;
}
});
}
function getDropDownValue(currentDropDown) {
if (!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) {
console.log(selectedTab);
console.log(tabIndex);
vm.selectTab(selectedTab.selector);
selectedTab.show = !selectedTab.show;
if (selectedTab.show && tabIndex) {
console.log(vm.stylingProperties);
const previousSettings = structuredClone(
vm.stylingProperties.settings[tabIndex - 1][selectedTab.selector]
).length
? structuredClone(vm.stylingProperties.settings[tabIndex - 1].settings)
: structuredClone(vm.stylingProperties.settings[0].settings);
const previosStyledSectionsSettings = structuredClone(
vm.stylingProperties.settings[tabIndex - 1][selectedTab.selector]
).length
? structuredClone(
vm.stylingProperties.settings[tabIndex - 1][selectedTab.selector]
)
: structuredClone(
vm.stylingProperties.settings[0][selectedTab.selector]
);
selectedTab.settings = previousSettings;
selectedTab.styledSectionsSettings = previosStyledSectionsSettings;
}
if (!selectedTab.show) {
selectedTab.settings = [];
selectedTab.styledSectionsSettings = [];
vm.selectTab('mobile');
}
}
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
);