(function () {
var app = angular.module('Umbraco.canvasdesigner', [
'colorpicker',
'ui.slider',
'umbraco.resources',
'umbraco.services'
]).controller('Umbraco.canvasdesignerController', function ($scope, $http, $window, $timeout, $location, dialogService) {
var isInit = $location.search().init;
if (isInit === 'true') {
//do not continue, this is the first load of this new window, if this is passed in it means it's been
//initialized by the content editor and then the content editor will actually re-load this window without
//this flag. This is a required trick to get around chrome popup mgr. We don't want to double load preview.aspx
//since that will double prepare the preview documents
return;
}
$scope.isOpen = false;
$scope.frameLoaded = false;
$scope.enableCanvasdesigner = 0;
$scope.googleFontFamilies = {};
var pageId = $location.search().id;
$scope.pageId = pageId;
$scope.pageUrl = '../dialogs/Preview.aspx?id=' + pageId;
$scope.valueAreLoaded = false;
$scope.devices = [
{
name: 'desktop',
css: 'desktop',
icon: 'icon-display',
title: 'Desktop'
},
{
name: 'laptop - 1366px',
css: 'laptop border',
icon: 'icon-laptop',
title: 'Laptop'
},
{
name: 'iPad portrait - 768px',
css: 'iPad-portrait border',
icon: 'icon-ipad',
title: 'Tablet portrait'
},
{
name: 'iPad landscape - 1024px',
css: 'iPad-landscape border',
icon: 'icon-ipad flip',
title: 'Tablet landscape'
},
{
name: 'smartphone portrait - 480px',
css: 'smartphone-portrait border',
icon: 'icon-iphone',
title: 'Smartphone portrait'
},
{
name: 'smartphone landscape - 320px',
css: 'smartphone-landscape border',
icon: 'icon-iphone flip',
title: 'Smartphone landscape'
}
];
$scope.previewDevice = $scope.devices[0];
var apiController = '../Api/Canvasdesigner/';
/*****************************************************************************/
/* Preview devices */
/*****************************************************************************/
// Set preview device
$scope.updatePreviewDevice = function (device) {
$scope.previewDevice = device;
};
/*****************************************************************************/
/* Exit Preview */
/*****************************************************************************/
$scope.exitPreview = function () {
window.top.location.href = '../endPreview.aspx?redir=%2f' + $scope.pageId;
};
/*****************************************************************************/
/* UI designer managment */
/*****************************************************************************/
// Update all Canvasdesigner config's values from data
var updateConfigValue = function (data) {
var fonts = [];
$.each($scope.canvasdesignerModel.configs, function (indexConfig, config) {
if (config.editors) {
$.each(config.editors, function (indexItem, item) {
/* try to get value */
try {
if (item.values) {
angular.forEach(Object.keys(item.values), function (key, indexKey) {
if (key != '\'\'') {
var propertyAlias = key.toLowerCase() + item.alias.toLowerCase();
var newValue = eval('data.' + propertyAlias.replace('@', ''));
if (newValue == '\'\'') {
newValue = '';
}
item.values[key] = newValue;
}
});
}
// TODO: special init for font family picker
if (item.type == 'googlefontpicker') {
if (item.values.fontType == 'google' && item.values.fontFamily + item.values.fontWeight && $.inArray(item.values.fontFamily + ':' + item.values.fontWeight, fonts) < 0) {
fonts.splice(0, 0, item.values.fontFamily + ':' + item.values.fontWeight);
}
}
} catch (err) {
console.info('Style parameter not found ' + item.alias);
}
});
}
});
// Load google font
$.each(fonts, function (indexFont, font) {
loadGoogleFont(font);
loadGoogleFontInFront(font);
});
$scope.valueAreLoaded = true;
};
// Load parameters from GetLessParameters and init data of the Canvasdesigner config
$scope.initCanvasdesigner = function () {
LazyLoad.js(['https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js']);
$http.get(apiController + 'Load', { params: { pageId: $scope.pageId } }).success(function (data) {
updateConfigValue(data);
$timeout(function () {
$scope.frameLoaded = true;
}, 200);
});
};
// Refresh all less parameters for every changes watching canvasdesignerModel
var refreshCanvasdesigner = function () {
var parameters = [];
if ($scope.canvasdesignerModel) {
angular.forEach($scope.canvasdesignerModel.configs, function (config, indexConfig) {
// Get currrent selected element
// TODO
//if ($scope.schemaFocus && angular.lowercase($scope.schemaFocus) == angular.lowercase(config.name)) {
// $scope.currentSelected = config.selector ? config.selector : config.schema;
//}
if (config.editors) {
angular.forEach(config.editors, function (item, indexItem) {
// Add new style
if (item.values) {
angular.forEach(Object.keys(item.values), function (key, indexKey) {
var propertyAlias = key.toLowerCase() + item.alias.toLowerCase();
var value = eval('item.values.' + key);
parameters.splice(parameters.length + 1, 0, '\'@' + propertyAlias + '\':\'' + value + '\'');
});
}
});
}
});
// Refresh page style
refreshFrontStyles(parameters);
// Refresh layout of selected element
//$timeout(function () {
$scope.positionSelectedHide();
if ($scope.currentSelected) {
refreshOutlineSelected($scope.currentSelected);
} //}, 200);
}
};
$scope.createStyle = function () {
$scope.saveLessParameters(false);
};
$scope.saveStyle = function () {
$scope.saveLessParameters(true);
};
// Save all parameter in CanvasdesignerParameters.less file
$scope.saveLessParameters = function (inherited) {
var parameters = [];
$.each($scope.canvasdesignerModel.configs, function (indexConfig, config) {
if (config.editors) {
$.each(config.editors, function (indexItem, item) {
if (item.values) {
angular.forEach(Object.keys(item.values), function (key, indexKey) {
var propertyAlias = key.toLowerCase() + item.alias.toLowerCase();
var value = eval('item.values.' + key);
parameters.splice(parameters.length + 1, 0, '@' + propertyAlias + ':' + value + ';');
});
// TODO: special init for font family picker
if (item.type == 'googlefontpicker' && item.values.fontFamily) {
var variant = item.values.fontWeight != '' || item.values.fontStyle != '' ? ':' + item.values.fontWeight + item.values.fontStyle : '';
var gimport = '@import url(\'https://fonts.googleapis.com/css?family=' + item.values.fontFamily + variant + '\');';
if ($.inArray(gimport, parameters) < 0) {
parameters.splice(0, 0, gimport);
}
}
}
});
}
});
var resultParameters = {
parameters: parameters.join(''),
pageId: $scope.pageId,
inherited: inherited
};
var transform = function (result) {
return $.param(result);
};
$('.btn-default-save').attr('disabled', true);
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
$http.post(apiController + 'Save', resultParameters, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
transformRequest: transform
}).success(function (data) {
$('.btn-default-save').attr('disabled', false);
$('#speechbubble').fadeIn('slow').delay(5000).fadeOut('slow');
});
};
// Delete current page Canvasdesigner
$scope.deleteCanvasdesigner = function () {
$('.btn-default-delete').attr('disabled', true);
$http.get(apiController + 'Delete', { params: { pageId: $scope.pageId } }).success(function (data) {
location.reload();
});
};
/*****************************************************************************/
/* Preset design */
/*****************************************************************************/
// Refresh with selected Canvasdesigner palette
$scope.refreshCanvasdesignerByPalette = function (palette) {
updateConfigValue(palette.data);
refreshCanvasdesigner();
};
// Hidden botton to make preset from the current settings
$scope.makePreset = function () {
var parameters = [];
$.each($scope.canvasdesignerModel.configs, function (indexConfig, config) {
if (config.editors) {
$.each(config.editors, function (indexItem, item) {
if (item.values) {
angular.forEach(Object.keys(item.values), function (key, indexKey) {
var propertyAlias = key.toLowerCase() + item.alias.toLowerCase();
var value = eval('item.values.' + key);
var value = value != 0 && (value == undefined || value == '') ? '\'\'' : value;
parameters.splice(parameters.length + 1, 0, '"' + propertyAlias + '":' + ' "' + value + '"');
});
}
});
}
});
$('.btn-group').append('');
};
/*****************************************************************************/
/* Panel managment */
/*****************************************************************************/
$scope.openPreviewDevice = function () {
$scope.showDevicesPreview = true;
$scope.closeIntelCanvasdesigner();
};
$scope.closePreviewDevice = function () {
$scope.showDevicesPreview = false;
if ($scope.showStyleEditor) {
$scope.openIntelCanvasdesigner();
}
};
$scope.openPalettePicker = function () {
$scope.showPalettePicker = true;
$scope.showStyleEditor = false;
$scope.closeIntelCanvasdesigner();
};
$scope.openStyleEditor = function () {
$scope.showStyleEditor = true;
$scope.showPalettePicker = false;
$scope.outlineSelectedHide();
$scope.openIntelCanvasdesigner();
};
// Remove value from field
$scope.removeField = function (field) {
field.value = '';
};
// Check if category existe
$scope.hasEditor = function (editors, category) {
var result = false;
angular.forEach(editors, function (item, index) {
if (item.category == category) {
result = true;
}
});
return result;
};
$scope.closeFloatPanels = function () {
/* hack to hide color picker */
$('.spectrumcolorpicker input').spectrum('hide');
dialogService.close();
$scope.showPalettePicker = false;
$scope.$apply();
};
$scope.clearHighlightedItems = function () {
$.each($scope.canvasdesignerModel.configs, function (indexConfig, config) {
config.highlighted = false;
});
};
$scope.setCurrentHighlighted = function (item) {
$scope.clearHighlightedItems();
item.highlighted = true;
};
$scope.setCurrentSelected = function (item) {
$scope.currentSelected = item;
$scope.clearSelectedCategory();
refreshOutlineSelected($scope.currentSelected);
};
/* Editor categories */
$scope.getCategories = function (item) {
var propertyCategories = [];
$.each(item.editors, function (indexItem, editor) {
if (editor.category) {
if ($.inArray(editor.category, propertyCategories) < 0) {
propertyCategories.splice(propertyCategories.length + 1, 0, editor.category);
}
}
});
return propertyCategories;
};
$scope.setSelectedCategory = function (item) {
$scope.categoriesVisibility = $scope.categoriesVisibility || {};
$scope.categoriesVisibility[item] = !$scope.categoriesVisibility[item];
};
$scope.clearSelectedCategory = function () {
$scope.categoriesVisibility = null;
};
/*****************************************************************************/
/* Call function into the front-end */
/*****************************************************************************/
var loadGoogleFontInFront = function (font) {
if (document.getElementById('resultFrame').contentWindow.getFont)
document.getElementById('resultFrame').contentWindow.getFont(font);
};
var refreshFrontStyles = function (parameters) {
if (document.getElementById('resultFrame').contentWindow.refreshLayout)
document.getElementById('resultFrame').contentWindow.refreshLayout(parameters);
};
var hideUmbracoPreviewBadge = function () {
var iframe = document.getElementById('resultFrame').contentWindow || document.getElementById('resultFrame').contentDocument;
if (iframe.document.getElementById('umbracoPreviewBadge'))
iframe.document.getElementById('umbracoPreviewBadge').style.display = 'none';
};
$scope.openIntelCanvasdesigner = function () {
if (document.getElementById('resultFrame').contentWindow.initIntelCanvasdesigner)
document.getElementById('resultFrame').contentWindow.initIntelCanvasdesigner($scope.canvasdesignerModel);
};
$scope.closeIntelCanvasdesigner = function () {
if (document.getElementById('resultFrame').contentWindow.closeIntelCanvasdesigner)
document.getElementById('resultFrame').contentWindow.closeIntelCanvasdesigner($scope.canvasdesignerModel);
$scope.outlineSelectedHide();
};
var refreshOutlineSelected = function (config) {
var schema = config.selector ? config.selector : config.schema;
if (document.getElementById('resultFrame').contentWindow.refreshOutlineSelected)
document.getElementById('resultFrame').contentWindow.refreshOutlineSelected(schema);
};
$scope.outlineSelectedHide = function () {
$scope.currentSelected = null;
if (document.getElementById('resultFrame').contentWindow.outlineSelectedHide)
document.getElementById('resultFrame').contentWindow.outlineSelectedHide();
};
$scope.refreshOutlinePosition = function (config) {
var schema = config.selector ? config.selector : config.schema;
if (document.getElementById('resultFrame').contentWindow.refreshOutlinePosition)
document.getElementById('resultFrame').contentWindow.refreshOutlinePosition(schema);
};
$scope.positionSelectedHide = function () {
if (document.getElementById('resultFrame').contentWindow.outlinePositionHide)
document.getElementById('resultFrame').contentWindow.outlinePositionHide();
};
/*****************************************************************************/
/* Google font loader, TODO: put together from directive, front and back */
/*****************************************************************************/
var webFontScriptLoaded = false;
var loadGoogleFont = function (font) {
if (!webFontScriptLoaded) {
$.getScript('https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js').done(function () {
webFontScriptLoaded = true;
// Recursively call once webfont script is available.
loadGoogleFont(font);
}).fail(function () {
console.log('error loading webfont');
});
} else {
WebFont.load({
google: { families: [font] },
loading: function () {
},
active: function () {
},
inactive: function () {
}
});
}
};
/*****************************************************************************/
/* Init */
/*****************************************************************************/
// Preload of the google font
if ($scope.showStyleEditor) {
$http.get(apiController + 'GetGoogleFont').success(function (data) {
$scope.googleFontFamilies = data;
});
}
// watch framLoaded, only if iframe page have enableCanvasdesigner()
$scope.$watch('enableCanvasdesigner', function () {
$timeout(function () {
if ($scope.enableCanvasdesigner > 0) {
$scope.$watch('ngRepeatFinished', function (ngRepeatFinishedEvent) {
$timeout(function () {
$scope.initCanvasdesigner();
}, 200);
});
$scope.$watch('canvasdesignerModel', function () {
refreshCanvasdesigner();
}, true);
}
}, 100);
}, true);
}).directive('onFinishRenderFilters', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
});
}
}
};
}).directive('iframeIsLoaded', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
element.load(function () {
var iframe = element.context.contentWindow || element.context.contentDocument;
if (iframe && iframe.document.getElementById('umbracoPreviewBadge'))
iframe.document.getElementById('umbracoPreviewBadge').style.display = 'none';
if (!document.getElementById('resultFrame').contentWindow.refreshLayout) {
scope.frameLoaded = true;
scope.$apply();
}
});
}
};
});
/*********************************************************************************************************/
/* Global function and variable for panel/page com */
/*********************************************************************************************************/
var currentTarget = undefined;
var refreshLayout = function (parameters) {
// hide preview badget
$('#umbracoPreviewBadge').hide();
var string = 'less.modifyVars({' + parameters.join(',') + '})';
eval(string);
};
/* Fonts loaded in the Canvasdesigner panel need to be loaded independently in
* the content iframe to allow live previewing.
*/
var webFontScriptLoaded = false;
var getFont = function (font) {
if (!webFontScriptLoaded) {
$.getScript('https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js').done(function () {
webFontScriptLoaded = true;
// Recursively call once webfont script is available.
getFont(font);
}).fail(function () {
console.log('error loading webfont');
});
} else {
WebFont.load({
google: { families: [font] },
loading: function () {
},
active: function () {
},
inactive: function () {
}
});
}
};
var closeIntelCanvasdesigner = function (canvasdesignerModel) {
if (canvasdesignerModel) {
$.each(canvasdesignerModel.configs, function (indexConfig, config) {
if (config.schema) {
$(config.schema).unbind();
$(config.schema).removeAttr('canvasdesigner-over');
}
});
initBodyClickEvent();
}
};
var initBodyClickEvent = function () {
$('body').on('click', function () {
if (parent.iframeBodyClick) {
parent.iframeBodyClick();
}
});
};
var initIntelCanvasdesigner = function (canvasdesignerModel) {
if (canvasdesignerModel) {
// Add canvasdesigner-over attr for each schema from config
$.each(canvasdesignerModel.configs, function (indexConfig, config) {
var schema = config.selector ? config.selector : config.schema;
if (schema) {
$(schema).attr('canvasdesigner-over', config.schema);
$(schema).attr('canvasdesigner-over-name', config.name);
$(schema).css('cursor', 'default');
}
});
// Outline canvasdesigner-over
$(document).mousemove(function (e) {
e.stopPropagation();
var target = $(e.target);
while (target.length > 0 && (target.attr('canvasdesigner-over') == undefined || target.attr('canvasdesigner-over') == '')) {
target = target.parent();
}
if (target.attr('canvasdesigner-over') != undefined && target.attr('canvasdesigner-over') != '') {
target.unbind();
outlinePosition(target);
parent.onMouseoverCanvasdesignerItem(target.attr('canvasdesigner-over-name'), target);
target.click(function (e) {
e.stopPropagation();
e.preventDefault();
//console.info(target.attr('canvasdesigner-over'));
currentTarget = target;
outlineSelected();
parent.onClickCanvasdesignerItem(target.attr('canvasdesigner-over'), target);
return false;
});
} else {
outlinePositionHide();
}
});
}
};
var refreshOutlinePosition = function (schema) {
outlinePosition($(schema));
};
var outlinePosition = function (oTarget) {
var target = oTarget;
if (target.length > 0 && target.attr('canvasdesigner-over') != undefined && target.attr('canvasdesigner-over') != '') {
var localname = target[0].localName;
var height = $(target).outerHeight();
var width = $(target).outerWidth();
var position = $(target).offset();
var posY = position.top;
//$(window).scrollTop();
var posX = position.left;
//+ $(window).scrollLeft();
$('.canvasdesigner-overlay').css('display', 'block');
$('.canvasdesigner-overlay').css('left', posX);
$('.canvasdesigner-overlay').css('top', posY);
$('.canvasdesigner-overlay').css('width', width + 'px');
$('.canvasdesigner-overlay').css('height', height + 'px');
//console.info("element select " + localname);
$('.canvasdesigner-overlay span').html(target.attr('canvasdesigner-over-name'));
} else {
outlinePositionHide(); //console.info("element not found select");
}
};
var refreshOutlineSelected = function (schema) {
outlineSelected($(schema));
};
var outlineSelected = function (oTarget) {
var target = currentTarget;
if (oTarget) {
currentTarget = oTarget;
target = oTarget;
}
if (target && target.length > 0 && target.attr('canvasdesigner-over') != undefined && target.attr('canvasdesigner-over') != '') {
var localname = target[0].localName;
var height = $(target).outerHeight();
var width = $(target).outerWidth();
var position = $(target).offset();
var posY = position.top;
//$(window).scrollTop();
var posX = position.left;
//+ $(window).scrollLeft();
$('.canvasdesigner-overlay-selected').css('display', 'block');
$('.canvasdesigner-overlay-selected').css('left', posX);
$('.canvasdesigner-overlay-selected').css('top', posY);
$('.canvasdesigner-overlay-selected').css('width', width + 'px');
$('.canvasdesigner-overlay-selected').css('height', height + 'px');
//console.info("element select " + localname);
$('.canvasdesigner-overlay-selected span').html(target.attr('canvasdesigner-over-name'));
} else {
outlinePositionHide(); //console.info("element not found select");
}
};
var outlinePositionHide = function () {
$('.canvasdesigner-overlay').css('display', 'none');
};
var outlineSelectedHide = function () {
currentTarget = undefined;
$('.canvasdesigner-overlay-selected').css('display', 'none');
};
var initCanvasdesignerPanel = function () {
$('link[data-title="canvasdesignerCss"]').attr('disabled', 'disabled');
// First load the canvasdesigner config from file
if (!canvasdesignerConfig) {
console.info('canvasdesigner config not found');
}
// Add canvasdesigner from HTML 5 data tags
$('[data-canvasdesigner]').each(function (index, value) {
var tagName = $(value).data('canvasdesigner') ? $(value).data('canvasdesigner') : $(value)[0].nodeName.toLowerCase();
var tagSchema = $(value).data('schema') ? $(value).data('schema') : $(value)[0].nodeName.toLowerCase();
var tagSelector = $(value).data('selector') ? $(value).data('selector') : tagSchema;
var tagEditors = $(value).data('editors');
//JSON.parse(...);
canvasdesignerConfig.configs.splice(canvasdesignerConfig.configs.length, 0, {
name: tagName,
schema: tagSchema,
selector: tagSelector,
editors: tagEditors
});
});
// For each editor config create a composite alias
$.each(canvasdesignerConfig.configs, function (configIndex, config) {
if (config.editors) {
$.each(config.editors, function (editorIndex, editor) {
var clearSchema = config.schema.replace(/[^a-zA-Z0-9]+/g, '').toLowerCase();
var clearEditor = JSON.stringify(editor).replace(/[^a-zA-Z0-9]+/g, '').toLowerCase();
editor.alias = clearSchema + clearEditor;
});
}
});
// Create or update the less file
$.ajax({
url: '/Umbraco/Api/CanvasDesigner/Init',
type: 'POST',
dataType: 'json',
error: function (err) {
alert(err.responseText);
},
data: {
config: JSON.stringify(canvasdesignerConfig),
pageId: pageId
},
success: function (data) {
// Add Less link in head
$('head').append('
');
$('body').append('
');
// Set event for any body click
initBodyClickEvent();
// Init canvasdesigner panel
initCanvasdesignerPanel();
}
});
/*********************************************************************************************************/
/* Global function and variable for panel/page com */
/*********************************************************************************************************/
/* Called for every canvasdesigner-over click */
var onClickCanvasdesignerItem = function (schema) {
var scope = angular.element($('#canvasdesignerPanel')).scope();
//if (scope.schemaFocus != schema.toLowerCase()) {
//var notFound = true;
$.each(scope.canvasdesignerModel.configs, function (indexConfig, config) {
if (config.schema && schema.toLowerCase() == config.schema.toLowerCase()) {
scope.currentSelected = config;
}
});
//}
scope.clearSelectedCategory();
scope.closeFloatPanels();
scope.$apply();
};
/* Called for every canvasdesigner-over rollover */
var onMouseoverCanvasdesignerItem = function (name) {
var scope = angular.element($('#canvasdesignerPanel')).scope();
$.each(scope.canvasdesignerModel.configs, function (indexConfig, config) {
config.highlighted = false;
if (config.name && name.toLowerCase() == config.name.toLowerCase()) {
config.highlighted = true;
}
});
scope.$apply();
};
/* Called when the iframe is first loaded */
var setFrameIsLoaded = function (canvasdesignerConfig, canvasdesignerPalette) {
var scope = angular.element($('#canvasdesignerPanel')).scope();
scope.canvasdesignerModel = canvasdesignerConfig;
scope.canvasdesignerPalette = canvasdesignerPalette;
scope.enableCanvasdesigner++;
scope.$apply();
};
/* Iframe body click */
var iframeBodyClick = function () {
var scope = angular.element($('#canvasdesignerPanel')).scope();
scope.closeFloatPanels();
};
/*********************************************************************************************************/
/* Canvasdesigner setting panel config */
/*********************************************************************************************************/
var canvasdesignerConfig = {
configs: [
{
name: 'Body',
schema: 'body',
selector: 'body',
editors: [
{
type: 'background',
category: 'Color',
name: 'Background'
},
{
type: 'color',
category: 'Font',
name: 'Font Color (main)',
css: 'color',
schema: 'body, h1, h2, h3, h4, h5, h6, h7, #nav li a'
},
{
type: 'color',
category: 'Font',
name: 'Font Color (secondary)',
css: 'color',
schema: 'ul.meta, .byline'
},
{
type: 'googlefontpicker',
category: 'Font',
name: 'Font Family',
css: 'color',
schema: 'body, h1, h2, h3, h4, h5, h6, h7, .byline, #nav, .button'
}
]
},
{
name: 'Nav',
schema: '#nav',
selector: 'nav',
editors: [
{
type: 'background',
category: 'Color',
name: 'Background'
},
{
type: 'border',
category: 'Color',
name: 'Border'
},
{
type: 'color',
category: 'Nav',
name: 'Font Color',
css: 'color',
schema: '#nav li a'
},
{
type: 'color',
category: 'Nav',
name: 'Font Color (hover / selected)',
css: 'color',
schema: '#nav li:hover a'
},
{
type: 'color',
category: 'Nav',
name: 'Background Color (hover)',
css: 'background-color',
schema: '#nav li:hover a'
},
{
type: 'color',
category: 'Nav',
name: 'Background Color (selected)',
css: 'background-color',
schema: '#nav li.current_page_item a'
},
{
type: 'googlefontpicker',
category: 'Font',
name: 'Font familly'
}
]
},
{
name: 'Logo',
schema: '#header .logo div',
selector: '#header .logo div',
editors: [
{
type: 'color',
category: 'Color',
name: 'Border color',
css: 'border-top-color',
schema: '#header .logo'
},
{
type: 'padding',
category: 'Position',
name: 'Margin',
enable: [
'top',
'bottom'
],
schema: '#header'
}
]
},
{
name: 'h2',
schema: 'h2',
selector: 'h2 span',
editors: [
{
type: 'color',
category: 'Color',
name: 'Border color',
css: 'border-top-color',
schema: 'h2.major'
},
{
type: 'color',
category: 'Font',
name: 'Font color',
css: 'color'
}
]
},
{
name: 'h3',
schema: 'h3',
selector: 'h3',
editors: [{
type: 'color',
category: 'Font',
name: 'Font color',
css: 'color'
}]
},
{
name: 'Banner Title',
schema: '#banner h2',
selector: '#banner h2',
editors: [
{
type: 'color',
category: 'Font',
name: 'Font color',
css: 'color'
},
{
type: 'slider',
category: 'Font',
name: 'Font size',
css: 'font-size',
min: 18,
max: 100
},
{
type: 'margin',
category: 'Position',
name: 'Margin'
}
]
},
{
name: 'Banner Sub-title',
schema: '#banner .byline',
selector: '#banner .byline',
editors: [
{
type: 'color',
category: 'Font',
name: 'Font color',
css: 'color'
},
{
type: 'slider',
category: 'Font',
name: 'Font size',
css: 'font-size',
min: 18,
max: 100
},
{
type: 'margin',
category: 'Position',
name: 'Margin'
}
]
},
{
name: 'Banner',
schema: '#banner',
selector: '#banner',
editors: [{
type: 'background',
category: 'Color',
name: 'Background',
css: 'color'
}]
},
{
name: 'Banner-wrapper',
schema: '#banner-wrapper',
selector: '#banner-wrapper',
editors: [
{
type: 'background',
category: 'Color',
name: 'Background'
},
{
type: 'padding',
category: 'Position',
name: 'Padding',
enable: [
'top',
'bottom'
]
}
]
},
{
name: '#main-wrapper',
schema: '#main-wrapper',
selector: '#main-wrapper',
editors: [{
type: 'border',
category: 'Styling',
name: 'Border',
enable: [
'top',
'bottom'
]
}]
},
{
name: 'Image',
schema: '.image,.image img,.image:before',
selector: '.image',
editors: [{
type: 'radius',
category: 'Styling',
name: 'Radius'
}]
},
{
name: 'Button',
schema: '.button',
selector: '.button',
editors: [
{
type: 'color',
category: 'Color',
name: 'Color',
css: 'color'
},
{
type: 'color',
category: 'Color',
name: 'Background',
css: 'background'
},
{
type: 'color',
category: 'Color',
name: 'Background Hover',
css: 'background',
schema: '.button:hover'
},
{
type: 'radius',
category: 'Styling',
name: 'Radius'
}
]
},
{
name: 'Button Alt',
schema: '.button-alt',
selector: '.button-alt',
editors: [
{
type: 'color',
category: 'Color',
name: 'Color',
css: 'color'
},
{
type: 'color',
category: 'Color',
name: 'Background',
css: 'background'
},
{
type: 'color',
category: 'Color',
name: 'Background Hover',
css: 'background',
schema: '.button-alt:hover'
}
]
}
]
};
/*********************************************************************************************************/
/* Canvasdesigner palette tab config */
/*********************************************************************************************************/
var canvasdesignerPalette = [
{
name: 'Default',
color1: 'rgb(193, 202, 197)',
color2: 'rgb(231, 234, 232)',
color3: 'rgb(107, 119, 112)',
color4: 'rgb(227, 218, 168)',
color5: 'rgba(21, 28, 23, 0.95)',
data: {
'widebodytypewidecategorydimensionnamelayout': 'wide',
'imageorpatternbodytypebackgroundcategorycolornamebackground': '',
'colorbodytypebackgroundcategorycolornamebackground': '',
'colorbodytypecolorcategoryfontnamefontcolormaincsscolorschemabodyh1h2h3h4h5h6h7navlia': 'rgb(107, 119, 112)',
'colorbodytypecolorcategoryfontnamefontcolorsecondarycsscolorschemaulmetabyline': 'rgb(193, 202, 197)',
'fontfamilybodytypegooglefontpickercategoryfontnamefontfamilycsscolorschemabodyh1h2h3h4h5h6h7bylinenavbutton': 'Open Sans Condensed',
'fonttypebodytypegooglefontpickercategoryfontnamefontfamilycsscolorschemabodyh1h2h3h4h5h6h7bylinenavbutton': 'google',
'fontweightbodytypegooglefontpickercategoryfontnamefontfamilycsscolorschemabodyh1h2h3h4h5h6h7bylinenavbutton': '700',
'fontstylebodytypegooglefontpickercategoryfontnamefontfamilycsscolorschemabodyh1h2h3h4h5h6h7bylinenavbutton': '',
'imageorpatternnavtypebackgroundcategorycolornamebackground': '',
'colornavtypebackgroundcategorycolornamebackground': '',
'bordersizenavtypebordercategorycolornameborder': '',
'bordercolornavtypebordercategorycolornameborder': '',
'bordertypenavtypebordercategorycolornameborder': 'solid',
'leftbordersizenavtypebordercategorycolornameborder': '',
'leftbordercolornavtypebordercategorycolornameborder': '',
'leftbordertypenavtypebordercategorycolornameborder': 'solid',
'rightbordersizenavtypebordercategorycolornameborder': '',
'rightbordercolornavtypebordercategorycolornameborder': '',
'rightbordertypenavtypebordercategorycolornameborder': 'solid',
'topbordersizenavtypebordercategorycolornameborder': '',
'topbordercolornavtypebordercategorycolornameborder': '',
'topbordertypenavtypebordercategorycolornameborder': 'solid',
'bottombordersizenavtypebordercategorycolornameborder': '',
'bottombordercolornavtypebordercategorycolornameborder': '',
'bottombordertypenavtypebordercategorycolornameborder': 'solid',
'colornavtypecolorcategorynavnamefontcolorcsscolorschemanavlia': 'rgb(107, 119, 112)',
'colornavtypecolorcategorynavnamefontcolorhoverselectedcsscolorschemanavlihovera': 'rgb(255, 255, 255)',
'colornavtypecolorcategorynavnamebackgroundcolorhovercssbackgroundcolorschemanavlihovera': 'rgb(193, 202, 197)',
'colornavtypecolorcategorynavnamebackgroundcolorselectedcssbackgroundcolorschemanavlicurrentpageitema': 'rgb(227, 218, 168)',
'fontfamilynavtypegooglefontpickercategoryfontnamefontfamilly': '',
'fonttypenavtypegooglefontpickercategoryfontnamefontfamilly': '',
'fontweightnavtypegooglefontpickercategoryfontnamefontfamilly': '',
'fontstylenavtypegooglefontpickercategoryfontnamefontfamilly': '',
'colorheaderlogodivtypecolorcategorycolornamebordercolorcssbordertopcolorschemaheaderlogo': 'rgb(231, 234, 232)',
'paddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '',
'leftpaddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '',
'rightpaddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '',
'toppaddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '172',
'bottompaddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '101',
'colorh2typecolorcategorycolornamebordercolorcssbordertopcolorschemah2major': 'rgb(231, 234, 232)',
'colorh2typecolorcategoryfontnamefontcolorcsscolor': '',
'colorh3typecolorcategoryfontnamefontcolorcsscolor': '',
'colorbannerh2typecolorcategoryfontnamefontcolorcsscolor': '',
'sliderbannerh2typeslidercategoryfontnamefontsizecssfontsizemin18max100': '45',
'marginvaluebannerh2typemargincategorypositionnamemargin': '',
'leftmarginvaluebannerh2typemargincategorypositionnamemargin': '',
'rightmarginvaluebannerh2typemargincategorypositionnamemargin': '',
'topmarginvaluebannerh2typemargincategorypositionnamemargin': '',
'bottommarginvaluebannerh2typemargincategorypositionnamemargin': '',
'colorbannerbylinetypecolorcategoryfontnamefontcolorcsscolor': '',
'sliderbannerbylinetypeslidercategoryfontnamefontsizecssfontsizemin18max100': '22',
'marginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'leftmarginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'rightmarginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'topmarginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'bottommarginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'imageorpatternbannertypebackgroundcategorycolornamebackgroundcsscolor': '',
'colorbannertypebackgroundcategorycolornamebackgroundcsscolor': 'rgba(21, 28, 23, 0.95)',
'imageorpatternbannerwrappertypebackgroundcategorycolornamebackground': '',
'colorbannerwrappertypebackgroundcategorycolornamebackground': '',
'paddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '',
'leftpaddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '',
'rightpaddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '',
'toppaddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '123',
'bottompaddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '125',
'bordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'bordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'bordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'leftbordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'leftbordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'leftbordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'rightbordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'rightbordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'rightbordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'topbordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '32',
'topbordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': 'rgb(227, 218, 168)',
'topbordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'bottombordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '10',
'bottombordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': 'rgb(193, 202, 197)',
'bottombordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'radiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '8',
'topleftradiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '',
'toprightradiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '',
'bottomleftradiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '',
'bottomrightradiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '',
'colorbuttontypecolorcategorycolornamecolorcsscolor': 'rgb(255, 255, 255)',
'colorbuttontypecolorcategorycolornamebackgroundcssbackground': 'rgb(227, 218, 168)',
'colorbuttontypecolorcategorycolornamebackgroundhovercssbackgroundschemabuttonhover': 'rgb(235, 227, 178)',
'radiusvaluebuttontyperadiuscategorystylingnameradius': '7',
'topleftradiusvaluebuttontyperadiuscategorystylingnameradius': '',
'toprightradiusvaluebuttontyperadiuscategorystylingnameradius': '',
'bottomleftradiusvaluebuttontyperadiuscategorystylingnameradius': '',
'bottomrightradiusvaluebuttontyperadiuscategorystylingnameradius': '',
'colorbuttonalttypecolorcategorycolornamecolorcsscolor': 'rgb(255, 255, 255)',
'colorbuttonalttypecolorcategorycolornamebackgroundcssbackground': 'rgb(193, 202, 197)',
'colorbuttonalttypecolorcategorycolornamebackgroundhovercssbackgroundschemabuttonalthover': 'rgb(204, 213, 208)'
}
},
{
name: 'Blue Alternative',
color1: 'rgb(193, 202, 197)',
color2: 'rgb(231, 234, 232)',
color3: 'rgb(107, 119, 112)',
color4: 'rgb(68, 187, 204)',
color5: 'rgba(21, 28, 23, 0.95)',
data: {
'widebodytypewidecategorydimensionnamelayout': 'wide',
'imageorpatternbodytypebackgroundcategorycolornamebackground': '',
'colorbodytypebackgroundcategorycolornamebackground': '',
'colorbodytypecolorcategoryfontnamefontcolormaincsscolorschemabodyh1h2h3h4h5h6h7navlia': 'rgb(51, 68, 51)',
'colorbodytypecolorcategoryfontnamefontcolorsecondarycsscolorschemaulmetabyline': 'rgb(68, 187, 204)',
'fontfamilybodytypegooglefontpickercategoryfontnamefontfamilycsscolorschemabodyh1h2h3h4h5h6h7bylinenavbutton': 'Alef',
'fonttypebodytypegooglefontpickercategoryfontnamefontfamilycsscolorschemabodyh1h2h3h4h5h6h7bylinenavbutton': 'google',
'fontweightbodytypegooglefontpickercategoryfontnamefontfamilycsscolorschemabodyh1h2h3h4h5h6h7bylinenavbutton': 'regular',
'fontstylebodytypegooglefontpickercategoryfontnamefontfamilycsscolorschemabodyh1h2h3h4h5h6h7bylinenavbutton': '',
'imageorpatternnavtypebackgroundcategorycolornamebackground': '',
'colornavtypebackgroundcategorycolornamebackground': '',
'bordersizenavtypebordercategorycolornameborder': '',
'bordercolornavtypebordercategorycolornameborder': '',
'bordertypenavtypebordercategorycolornameborder': 'solid',
'leftbordersizenavtypebordercategorycolornameborder': '',
'leftbordercolornavtypebordercategorycolornameborder': '',
'leftbordertypenavtypebordercategorycolornameborder': 'solid',
'rightbordersizenavtypebordercategorycolornameborder': '',
'rightbordercolornavtypebordercategorycolornameborder': '',
'rightbordertypenavtypebordercategorycolornameborder': 'solid',
'topbordersizenavtypebordercategorycolornameborder': '',
'topbordercolornavtypebordercategorycolornameborder': '',
'topbordertypenavtypebordercategorycolornameborder': 'solid',
'bottombordersizenavtypebordercategorycolornameborder': '1',
'bottombordercolornavtypebordercategorycolornameborder': 'rgba(0, 0, 0, 0.05)',
'bottombordertypenavtypebordercategorycolornameborder': 'solid',
'colornavtypecolorcategorynavnamefontcolorcsscolorschemanavlia': 'rgb(107, 119, 112)',
'colornavtypecolorcategorynavnamefontcolorhoverselectedcsscolorschemanavlihovera': 'rgb(255, 255, 255)',
'colornavtypecolorcategorynavnamebackgroundcolorhovercssbackgroundcolorschemanavlihovera': 'rgb(193, 202, 197)',
'colornavtypecolorcategorynavnamebackgroundcolorselectedcssbackgroundcolorschemanavlicurrentpageitema': 'rgb(68, 187, 204)',
'fontfamilynavtypegooglefontpickercategoryfontnamefontfamilly': '',
'fonttypenavtypegooglefontpickercategoryfontnamefontfamilly': '',
'fontweightnavtypegooglefontpickercategoryfontnamefontfamilly': '',
'fontstylenavtypegooglefontpickercategoryfontnamefontfamilly': '',
'colorheaderlogodivtypecolorcategorycolornamebordercolorcssbordertopcolorschemaheaderlogo': 'rgb(231, 234, 232)',
'paddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '',
'leftpaddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '',
'rightpaddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '',
'toppaddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '166',
'bottompaddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '91',
'colorh2typecolorcategorycolornamebordercolorcssbordertopcolorschemah2major': 'rgb(231, 234, 232)',
'colorh2typecolorcategoryfontnamefontcolorcsscolor': '',
'colorh3typecolorcategoryfontnamefontcolorcsscolor': '',
'colorbannerh2typecolorcategoryfontnamefontcolorcsscolor': '',
'sliderbannerh2typeslidercategoryfontnamefontsizecssfontsizemin18max100': '45',
'marginvaluebannerh2typemargincategorypositionnamemargin': '',
'leftmarginvaluebannerh2typemargincategorypositionnamemargin': '',
'rightmarginvaluebannerh2typemargincategorypositionnamemargin': '',
'topmarginvaluebannerh2typemargincategorypositionnamemargin': '',
'bottommarginvaluebannerh2typemargincategorypositionnamemargin': '',
'colorbannerbylinetypecolorcategoryfontnamefontcolorcsscolor': '',
'sliderbannerbylinetypeslidercategoryfontnamefontsizecssfontsizemin18max100': '22',
'marginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'leftmarginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'rightmarginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'topmarginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'bottommarginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'imageorpatternbannertypebackgroundcategorycolornamebackgroundcsscolor': '',
'colorbannertypebackgroundcategorycolornamebackgroundcsscolor': 'rgba(21, 28, 23, 0.95)',
'imageorpatternbannerwrappertypebackgroundcategorycolornamebackground': '',
'colorbannerwrappertypebackgroundcategorycolornamebackground': '',
'paddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '',
'leftpaddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '',
'rightpaddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '',
'toppaddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '48',
'bottompaddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '55',
'bordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'bordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'bordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'leftbordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'leftbordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'leftbordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'rightbordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'rightbordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'rightbordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'topbordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '10',
'topbordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': 'rgb(68, 187, 204)',
'topbordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'bottombordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '10',
'bottombordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': 'rgb(193, 202, 197)',
'bottombordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'radiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '0',
'topleftradiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '20',
'toprightradiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '',
'bottomleftradiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '',
'bottomrightradiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '20',
'colorbuttontypecolorcategorycolornamecolorcsscolor': 'rgb(255, 255, 255)',
'colorbuttontypecolorcategorycolornamebackgroundcssbackground': 'rgb(68, 187, 204)',
'colorbuttontypecolorcategorycolornamebackgroundhovercssbackgroundschemabuttonhover': 'rgb(133, 220, 232)',
'radiusvaluebuttontyperadiuscategorystylingnameradius': '7',
'topleftradiusvaluebuttontyperadiuscategorystylingnameradius': '',
'toprightradiusvaluebuttontyperadiuscategorystylingnameradius': '',
'bottomleftradiusvaluebuttontyperadiuscategorystylingnameradius': '',
'bottomrightradiusvaluebuttontyperadiuscategorystylingnameradius': '',
'colorbuttonalttypecolorcategorycolornamecolorcsscolor': 'rgb(255, 255, 255)',
'colorbuttonalttypecolorcategorycolornamebackgroundcssbackground': 'rgb(193, 202, 197)',
'colorbuttonalttypecolorcategorycolornamebackgroundhovercssbackgroundschemabuttonalthover': 'rgb(204, 213, 208)'
}
},
{
name: 'Green safe',
color1: 'rgb(193, 202, 197)',
color2: 'rgb(240, 240, 240)',
color3: 'rgb(0, 153, 0)',
color4: 'rgb(0, 51, 0)',
color5: 'rgb(51, 51, 51)',
data: {
'widebodytypewidecategorydimensionnamelayout': 'box',
'imageorpatternbodytypebackgroundcategorycolornamebackground': '',
'colorbodytypebackgroundcategorycolornamebackground': 'rgb(240, 240, 240)',
'colorbodytypecolorcategoryfontnamefontcolormaincsscolorschemabodyh1h2h3h4h5h6h7navlia': 'rgb(85, 85, 85)',
'colorbodytypecolorcategoryfontnamefontcolorsecondarycsscolorschemaulmetabyline': 'rgb(0, 153, 0)',
'fontfamilybodytypegooglefontpickercategoryfontnamefontfamilycsscolorschemabodyh1h2h3h4h5h6h7bylinenavbutton': 'Karma',
'fonttypebodytypegooglefontpickercategoryfontnamefontfamilycsscolorschemabodyh1h2h3h4h5h6h7bylinenavbutton': 'google',
'fontweightbodytypegooglefontpickercategoryfontnamefontfamilycsscolorschemabodyh1h2h3h4h5h6h7bylinenavbutton': '300',
'fontstylebodytypegooglefontpickercategoryfontnamefontfamilycsscolorschemabodyh1h2h3h4h5h6h7bylinenavbutton': '',
'imageorpatternnavtypebackgroundcategorycolornamebackground': '',
'colornavtypebackgroundcategorycolornamebackground': 'rgb(0, 51, 0)',
'bordersizenavtypebordercategorycolornameborder': '',
'bordercolornavtypebordercategorycolornameborder': '',
'bordertypenavtypebordercategorycolornameborder': 'solid',
'leftbordersizenavtypebordercategorycolornameborder': '',
'leftbordercolornavtypebordercategorycolornameborder': '',
'leftbordertypenavtypebordercategorycolornameborder': 'solid',
'rightbordersizenavtypebordercategorycolornameborder': '',
'rightbordercolornavtypebordercategorycolornameborder': '',
'rightbordertypenavtypebordercategorycolornameborder': 'solid',
'topbordersizenavtypebordercategorycolornameborder': '',
'topbordercolornavtypebordercategorycolornameborder': '',
'topbordertypenavtypebordercategorycolornameborder': 'solid',
'bottombordersizenavtypebordercategorycolornameborder': '1',
'bottombordercolornavtypebordercategorycolornameborder': 'rgba(0, 0, 0, 0.05)',
'bottombordertypenavtypebordercategorycolornameborder': 'solid',
'colornavtypecolorcategorynavnamefontcolorcsscolorschemanavlia': 'rgb(187, 187, 187)',
'colornavtypecolorcategorynavnamefontcolorhoverselectedcsscolorschemanavlihovera': 'rgb(255, 255, 255)',
'colornavtypecolorcategorynavnamebackgroundcolorhovercssbackgroundcolorschemanavlihovera': 'rgb(0, 153, 0)',
'colornavtypecolorcategorynavnamebackgroundcolorselectedcssbackgroundcolorschemanavlicurrentpageitema': 'rgb(0, 153, 0)',
'fontfamilynavtypegooglefontpickercategoryfontnamefontfamilly': '',
'fonttypenavtypegooglefontpickercategoryfontnamefontfamilly': '',
'fontweightnavtypegooglefontpickercategoryfontnamefontfamilly': '',
'fontstylenavtypegooglefontpickercategoryfontnamefontfamilly': '',
'colorheaderlogodivtypecolorcategorycolornamebordercolorcssbordertopcolorschemaheaderlogo': 'rgb(231, 234, 232)',
'paddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '',
'leftpaddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '',
'rightpaddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '',
'toppaddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '151',
'bottompaddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '57',
'colorh2typecolorcategorycolornamebordercolorcssbordertopcolorschemah2major': 'rgb(231, 234, 232)',
'colorh2typecolorcategoryfontnamefontcolorcsscolor': '',
'colorh3typecolorcategoryfontnamefontcolorcsscolor': '',
'colorbannerh2typecolorcategoryfontnamefontcolorcsscolor': 'rgb(0, 153, 0)',
'sliderbannerh2typeslidercategoryfontnamefontsizecssfontsizemin18max100': '54',
'marginvaluebannerh2typemargincategorypositionnamemargin': '',
'leftmarginvaluebannerh2typemargincategorypositionnamemargin': '',
'rightmarginvaluebannerh2typemargincategorypositionnamemargin': '',
'topmarginvaluebannerh2typemargincategorypositionnamemargin': '33',
'bottommarginvaluebannerh2typemargincategorypositionnamemargin': '',
'colorbannerbylinetypecolorcategoryfontnamefontcolorcsscolor': 'rgb(255, 255, 255)',
'sliderbannerbylinetypeslidercategoryfontnamefontsizecssfontsizemin18max100': '26',
'marginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'leftmarginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'rightmarginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'topmarginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'bottommarginvaluebannerbylinetypemargincategorypositionnamemargin': '30',
'imageorpatternbannertypebackgroundcategorycolornamebackgroundcsscolor': '',
'colorbannertypebackgroundcategorycolornamebackgroundcsscolor': 'rgb(51, 51, 51)',
'imageorpatternbannerwrappertypebackgroundcategorycolornamebackground': '',
'colorbannerwrappertypebackgroundcategorycolornamebackground': 'rgba(0, 153, 0, 0.15)',
'paddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '',
'leftpaddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '',
'rightpaddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '',
'toppaddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '21',
'bottompaddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '21',
'bordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'bordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'bordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'leftbordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'leftbordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'leftbordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'rightbordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'rightbordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'rightbordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'topbordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '1',
'topbordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': 'rgba(68, 187, 204, 0)',
'topbordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'bottombordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '10',
'bottombordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': 'rgb(193, 202, 197)',
'bottombordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'radiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '8',
'topleftradiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '0',
'toprightradiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '0',
'bottomleftradiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '0',
'bottomrightradiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '0',
'colorbuttontypecolorcategorycolornamecolorcsscolor': 'rgb(255, 255, 255)',
'colorbuttontypecolorcategorycolornamebackgroundcssbackground': 'rgb(0, 51, 0)',
'colorbuttontypecolorcategorycolornamebackgroundhovercssbackgroundschemabuttonhover': 'rgba(0, 51, 0, 0.62)',
'radiusvaluebuttontyperadiuscategorystylingnameradius': '7',
'topleftradiusvaluebuttontyperadiuscategorystylingnameradius': '',
'toprightradiusvaluebuttontyperadiuscategorystylingnameradius': '',
'bottomleftradiusvaluebuttontyperadiuscategorystylingnameradius': '',
'bottomrightradiusvaluebuttontyperadiuscategorystylingnameradius': '',
'colorbuttonalttypecolorcategorycolornamecolorcsscolor': 'rgb(255, 255, 255)',
'colorbuttonalttypecolorcategorycolornamebackgroundcssbackground': 'rgb(193, 202, 197)',
'colorbuttonalttypecolorcategorycolornamebackgroundhovercssbackgroundschemabuttonalthover': 'rgb(204, 213, 208)'
}
},
{
name: 'Orange',
color1: 'rgb(193, 202, 197)',
color2: 'rgb(231, 234, 232)',
color3: 'rgb(230, 126, 34)',
color4: 'rgb(211, 84, 0)',
color5: 'rgb(51, 51, 51)',
data: {
'widebodytypewidecategorydimensionnamelayout': 'wide',
'imageorpatternbodytypebackgroundcategorycolornamebackground': '',
'colorbodytypebackgroundcategorycolornamebackground': 'rgb(240, 240, 240)',
'colorbodytypecolorcategoryfontnamefontcolormaincsscolorschemabodyh1h2h3h4h5h6h7navlia': 'rgb(85, 85, 85)',
'colorbodytypecolorcategoryfontnamefontcolorsecondarycsscolorschemaulmetabyline': 'rgb(230, 126, 34)',
'fontfamilybodytypegooglefontpickercategoryfontnamefontfamilycsscolorschemabodyh1h2h3h4h5h6h7bylinenavbutton': 'Lato',
'fonttypebodytypegooglefontpickercategoryfontnamefontfamilycsscolorschemabodyh1h2h3h4h5h6h7bylinenavbutton': 'google',
'fontweightbodytypegooglefontpickercategoryfontnamefontfamilycsscolorschemabodyh1h2h3h4h5h6h7bylinenavbutton': '300',
'fontstylebodytypegooglefontpickercategoryfontnamefontfamilycsscolorschemabodyh1h2h3h4h5h6h7bylinenavbutton': '',
'imageorpatternnavtypebackgroundcategorycolornamebackground': '',
'colornavtypebackgroundcategorycolornamebackground': 'rgb(51, 51, 51)',
'bordersizenavtypebordercategorycolornameborder': '',
'bordercolornavtypebordercategorycolornameborder': '',
'bordertypenavtypebordercategorycolornameborder': 'solid',
'leftbordersizenavtypebordercategorycolornameborder': '',
'leftbordercolornavtypebordercategorycolornameborder': '',
'leftbordertypenavtypebordercategorycolornameborder': 'solid',
'rightbordersizenavtypebordercategorycolornameborder': '',
'rightbordercolornavtypebordercategorycolornameborder': '',
'rightbordertypenavtypebordercategorycolornameborder': 'solid',
'topbordersizenavtypebordercategorycolornameborder': '',
'topbordercolornavtypebordercategorycolornameborder': '',
'topbordertypenavtypebordercategorycolornameborder': 'solid',
'bottombordersizenavtypebordercategorycolornameborder': '1',
'bottombordercolornavtypebordercategorycolornameborder': 'rgba(0, 0, 0, 0.05)',
'bottombordertypenavtypebordercategorycolornameborder': 'solid',
'colornavtypecolorcategorynavnamefontcolorcsscolorschemanavlia': 'rgb(187, 187, 187)',
'colornavtypecolorcategorynavnamefontcolorhoverselectedcsscolorschemanavlihovera': 'rgb(255, 255, 255)',
'colornavtypecolorcategorynavnamebackgroundcolorhovercssbackgroundcolorschemanavlihovera': 'rgb(181, 181, 181)',
'colornavtypecolorcategorynavnamebackgroundcolorselectedcssbackgroundcolorschemanavlicurrentpageitema': 'rgb(211, 84, 0)',
'fontfamilynavtypegooglefontpickercategoryfontnamefontfamilly': '',
'fonttypenavtypegooglefontpickercategoryfontnamefontfamilly': '',
'fontweightnavtypegooglefontpickercategoryfontnamefontfamilly': '',
'fontstylenavtypegooglefontpickercategoryfontnamefontfamilly': '',
'colorheaderlogodivtypecolorcategorycolornamebordercolorcssbordertopcolorschemaheaderlogo': 'rgb(231, 234, 232)',
'paddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '',
'leftpaddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '',
'rightpaddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '',
'toppaddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '151',
'bottompaddingvalueheaderlogodivtypepaddingcategorypositionnamemarginenabletopbottomschemaheader': '57',
'colorh2typecolorcategorycolornamebordercolorcssbordertopcolorschemah2major': 'rgb(231, 234, 232)',
'colorh2typecolorcategoryfontnamefontcolorcsscolor': '',
'colorh3typecolorcategoryfontnamefontcolorcsscolor': '',
'colorbannerh2typecolorcategoryfontnamefontcolorcsscolor': '',
'sliderbannerh2typeslidercategoryfontnamefontsizecssfontsizemin18max100': '54',
'marginvaluebannerh2typemargincategorypositionnamemargin': '',
'leftmarginvaluebannerh2typemargincategorypositionnamemargin': '',
'rightmarginvaluebannerh2typemargincategorypositionnamemargin': '',
'topmarginvaluebannerh2typemargincategorypositionnamemargin': '33',
'bottommarginvaluebannerh2typemargincategorypositionnamemargin': '',
'colorbannerbylinetypecolorcategoryfontnamefontcolorcsscolor': 'rgb(225, 225, 225)',
'sliderbannerbylinetypeslidercategoryfontnamefontsizecssfontsizemin18max100': '26',
'marginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'leftmarginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'rightmarginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'topmarginvaluebannerbylinetypemargincategorypositionnamemargin': '',
'bottommarginvaluebannerbylinetypemargincategorypositionnamemargin': '30',
'imageorpatternbannertypebackgroundcategorycolornamebackgroundcsscolor': '',
'colorbannertypebackgroundcategorycolornamebackgroundcsscolor': 'rgb(230, 126, 34)',
'imageorpatternbannerwrappertypebackgroundcategorycolornamebackground': '',
'colorbannerwrappertypebackgroundcategorycolornamebackground': 'rgb(255, 255, 255)',
'paddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '',
'leftpaddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '',
'rightpaddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '',
'toppaddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '21',
'bottompaddingvaluebannerwrappertypepaddingcategorypositionnamepaddingenabletopbottom': '21',
'bordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'bordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'bordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'leftbordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'leftbordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'leftbordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'rightbordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'rightbordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': '',
'rightbordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'topbordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '1',
'topbordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': 'rgba(68, 187, 204, 0)',
'topbordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'bottombordersizemainwrappertypebordercategorystylingnameborderenabletopbottom': '10',
'bottombordercolormainwrappertypebordercategorystylingnameborderenabletopbottom': 'rgb(193, 202, 197)',
'bottombordertypemainwrappertypebordercategorystylingnameborderenabletopbottom': 'solid',
'radiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '8',
'topleftradiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '0',
'toprightradiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '0',
'bottomleftradiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '0',
'bottomrightradiusvalueimageimageimgimagebeforetyperadiuscategorystylingnameradius': '0',
'colorbuttontypecolorcategorycolornamecolorcsscolor': 'rgb(255, 255, 255)',
'colorbuttontypecolorcategorycolornamebackgroundcssbackground': 'rgb(230, 126, 34)',
'colorbuttontypecolorcategorycolornamebackgroundhovercssbackgroundschemabuttonhover': 'rgba(230, 126, 34, 0.55)',
'radiusvaluebuttontyperadiuscategorystylingnameradius': '7',
'topleftradiusvaluebuttontyperadiuscategorystylingnameradius': '',
'toprightradiusvaluebuttontyperadiuscategorystylingnameradius': '',
'bottomleftradiusvaluebuttontyperadiuscategorystylingnameradius': '',
'bottomrightradiusvaluebuttontyperadiuscategorystylingnameradius': '',
'colorbuttonalttypecolorcategorycolornamecolorcsscolor': 'rgb(255, 255, 255)',
'colorbuttonalttypecolorcategorycolornamebackgroundcssbackground': 'rgb(193, 202, 197)',
'colorbuttonalttypecolorcategorycolornamebackgroundhovercssbackgroundschemabuttonalthover': 'rgb(204, 213, 208)'
}
}
];
/*********************************************************************************************************/
/* Background editor */
/*********************************************************************************************************/
angular.module('Umbraco.canvasdesigner').controller('Umbraco.canvasdesigner.background', function ($scope, dialogService) {
if (!$scope.item.values) {
$scope.item.values = {
imageorpattern: '',
color: ''
};
}
$scope.open = function (field) {
var config = {
template: 'mediaPickerModal.html',
change: function (data) {
$scope.item.values.imageorpattern = data;
},
callback: function (data) {
$scope.item.values.imageorpattern = data;
},
cancel: function (data) {
$scope.item.values.imageorpattern = data;
},
dialogData: $scope.googleFontFamilies,
dialogItem: $scope.item.values.imageorpattern
};
dialogService.open(config);
};
}).controller('canvasdesigner.mediaPickerModal', function ($scope, $http, mediaResource, umbRequestHelper, entityResource, mediaHelper) {
if (mediaHelper && mediaHelper.registerFileResolver) {
mediaHelper.registerFileResolver('Umbraco.UploadField', function (property, entity, thumbnail) {
if (thumbnail) {
if (mediaHelper.detectIfImageByExtension(property.value)) {
var thumbnailUrl = umbRequestHelper.getApiUrl('imagesApiBaseUrl', 'GetBigThumbnail', [{ originalImagePath: property.value }]);
return thumbnailUrl;
} else {
return null;
}
} else {
return property.value;
}
});
}
var modalFieldvalue = $scope.dialogItem;
$scope.currentFolder = {};
$scope.currentFolder.children = [];
$scope.currentPath = [];
$scope.startNodeId = -1;
$scope.options = {
url: umbRequestHelper.getApiUrl('mediaApiBaseUrl', 'PostAddFile'),
formData: { currentFolder: $scope.startNodeId }
};
//preload selected item
$scope.selectedMedia = undefined;
$scope.submitFolder = function (e) {
if (e.keyCode === 13) {
e.preventDefault();
$scope.$parent.data.showFolderInput = false;
if ($scope.$parent.data.newFolder && $scope.$parent.data.newFolder != '') {
mediaResource.addFolder($scope.$parent.data.newFolder, $scope.currentFolder.id).then(function (data) {
$scope.$parent.data.newFolder = undefined;
$scope.gotoFolder(data);
});
}
}
};
$scope.gotoFolder = function (folder) {
if (!folder) {
folder = {
id: $scope.startNodeId,
name: 'Media',
icon: 'icon-folder'
};
}
if (folder.id > 0) {
var matches = _.filter($scope.currentPath, function (value, index) {
if (value.id == folder.id) {
value.indexInPath = index;
return value;
}
});
if (matches && matches.length > 0) {
$scope.currentPath = $scope.currentPath.slice(0, matches[0].indexInPath + 1);
} else {
$scope.currentPath.push(folder);
}
} else {
$scope.currentPath = [];
}
//mediaResource.rootMedia()
mediaResource.getChildren(folder.id).then(function (data) {
folder.children = data.items ? data.items : [];
angular.forEach(folder.children, function (child) {
child.isFolder = child.contentTypeAlias == 'Folder' ? true : false;
if (!child.isFolder) {
angular.forEach(child.properties, function (property) {
if (property.alias == 'umbracoFile' && property.value) {
child.thumbnail = mediaHelper.resolveFile(child, true);
child.image = property.value;
}
});
}
});
$scope.options.formData.currentFolder = folder.id;
$scope.currentFolder = folder;
});
};
$scope.iconFolder = 'glyphicons-icon folder-open';
$scope.selectMedia = function (media) {
if (!media.isFolder) {
//we have 3 options add to collection (if multi) show details, or submit it right back to the callback
$scope.selectedMedia = media;
modalFieldvalue = 'url(' + $scope.selectedMedia.image + ')';
$scope.change(modalFieldvalue);
} else {
$scope.gotoFolder(media);
}
};
//default root item
if (!$scope.selectedMedia) {
$scope.gotoFolder();
}
$scope.submitAndClose = function () {
if (modalFieldvalue != '') {
$scope.submit(modalFieldvalue);
} else {
$scope.cancel();
}
};
$scope.cancelAndClose = function () {
$scope.cancel();
};
});
/*********************************************************************************************************/
/* Background editor */
/*********************************************************************************************************/
angular.module('Umbraco.canvasdesigner').controller('Umbraco.canvasdesigner.border', function ($scope, dialogService) {
$scope.defaultBorderList = [
'all',
'left',
'right',
'top',
'bottom'
];
$scope.borderList = [];
$scope.bordertypes = [
'solid',
'dashed',
'dotted'
];
$scope.selectedBorder = {
name: 'all',
size: 0,
color: '',
type: ''
};
$scope.setselectedBorder = function (bordertype) {
if (bordertype == 'all') {
$scope.selectedBorder.name = 'all';
$scope.selectedBorder.size = $scope.item.values.bordersize;
$scope.selectedBorder.color = $scope.item.values.bordercolor;
$scope.selectedBorder.type = $scope.item.values.bordertype;
}
if (bordertype == 'left') {
$scope.selectedBorder.name = 'left';
$scope.selectedBorder.size = $scope.item.values.leftbordersize;
$scope.selectedBorder.color = $scope.item.values.leftbordercolor;
$scope.selectedBorder.type = $scope.item.values.leftbordertype;
}
if (bordertype == 'right') {
$scope.selectedBorder.name = 'right';
$scope.selectedBorder.size = $scope.item.values.rightbordersize;
$scope.selectedBorder.color = $scope.item.values.rightbordercolor;
$scope.selectedBorder.type = $scope.item.values.rightbordertype;
}
if (bordertype == 'top') {
$scope.selectedBorder.name = 'top';
$scope.selectedBorder.size = $scope.item.values.topbordersize;
$scope.selectedBorder.color = $scope.item.values.topbordercolor;
$scope.selectedBorder.type = $scope.item.values.topbordertype;
}
if (bordertype == 'bottom') {
$scope.selectedBorder.name = 'bottom';
$scope.selectedBorder.size = $scope.item.values.bottombordersize;
$scope.selectedBorder.color = $scope.item.values.bottombordercolor;
$scope.selectedBorder.type = $scope.item.values.bottombordertype;
}
};
if (!$scope.item.values) {
$scope.item.values = {
bordersize: '',
bordercolor: '',
bordertype: 'solid',
leftbordersize: '',
leftbordercolor: '',
leftbordertype: 'solid',
rightbordersize: '',
rightbordercolor: '',
rightbordertype: 'solid',
topbordersize: '',
topbordercolor: '',
topbordertype: 'solid',
bottombordersize: '',
bottombordercolor: '',
bottombordertype: 'solid'
};
}
if ($scope.item.enable) {
angular.forEach($scope.defaultBorderList, function (key, indexKey) {
if ($.inArray(key, $scope.item.enable) >= 0) {
$scope.borderList.splice($scope.borderList.length + 1, 0, key);
}
});
} else {
$scope.borderList = $scope.defaultBorderList;
}
$scope.$watch('valueAreLoaded', function () {
$scope.setselectedBorder($scope.borderList[0]);
}, false);
$scope.$watch('selectedBorder', function () {
if ($scope.selectedBorder.name == 'all') {
$scope.item.values.bordersize = $scope.selectedBorder.size;
$scope.item.values.bordertype = $scope.selectedBorder.type;
}
if ($scope.selectedBorder.name == 'left') {
$scope.item.values.leftbordersize = $scope.selectedBorder.size;
$scope.item.values.leftbordertype = $scope.selectedBorder.type;
}
if ($scope.selectedBorder.name == 'right') {
$scope.item.values.rightbordersize = $scope.selectedBorder.size;
$scope.item.values.rightbordertype = $scope.selectedBorder.type;
}
if ($scope.selectedBorder.name == 'top') {
$scope.item.values.topbordersize = $scope.selectedBorder.size;
$scope.item.values.topbordertype = $scope.selectedBorder.type;
}
if ($scope.selectedBorder.name == 'bottom') {
$scope.item.values.bottombordersize = $scope.selectedBorder.size;
$scope.item.values.bottombordertype = $scope.selectedBorder.type;
}
}, true);
});
/*********************************************************************************************************/
/* color editor */
/*********************************************************************************************************/
angular.module('Umbraco.canvasdesigner').controller('Umbraco.canvasdesigner.color', function ($scope) {
if (!$scope.item.values) {
$scope.item.values = { color: '' };
}
});
/*********************************************************************************************************/
/* google font editor */
/*********************************************************************************************************/
angular.module('Umbraco.canvasdesigner').controller('Umbraco.canvasdesigner.googlefontpicker', function ($scope, dialogService) {
if (!$scope.item.values) {
$scope.item.values = {
fontFamily: '',
fontType: '',
fontWeight: '',
fontStyle: ''
};
}
$scope.setStyleVariant = function () {
if ($scope.item.values != undefined) {
return {
'font-family': $scope.item.values.fontFamily,
'font-weight': $scope.item.values.fontWeight,
'font-style': $scope.item.values.fontStyle
};
}
};
$scope.open = function (field) {
var config = {
template: 'googlefontdialog.html',
change: function (data) {
$scope.item.values = data;
},
callback: function (data) {
$scope.item.values = data;
},
cancel: function (data) {
$scope.item.values = data;
},
dialogData: $scope.googleFontFamilies,
dialogItem: $scope.item.values
};
dialogService.open(config);
};
}).controller('googlefontdialog.controller', function ($scope) {
$scope.safeFonts = [
'Arial, Helvetica',
'Impact',
'Lucida Sans Unicode',
'Tahoma',
'Trebuchet MS',
'Verdana',
'Georgia',
'Times New Roman',
'Courier New, Courier'
];
$scope.fonts = [];
$scope.selectedFont = {};
var googleGetWeight = function (googleVariant) {
return googleVariant != undefined && googleVariant != '' ? googleVariant.replace('italic', '') : '';
};
var googleGetStyle = function (googleVariant) {
var variantStyle = '';
if (googleVariant != undefined && googleVariant != '' && googleVariant.indexOf('italic') >= 0) {
variantWeight = googleVariant.replace('italic', '');
variantStyle = 'italic';
}
return variantStyle;
};
angular.forEach($scope.safeFonts, function (value, key) {
$scope.fonts.push({
groupName: 'Safe fonts',
fontType: 'safe',
fontFamily: value,
fontWeight: 'normal',
fontStyle: 'normal'
});
});
angular.forEach($scope.dialogData.items, function (value, key) {
var variants = value.variants;
var variant = value.variants.length > 0 ? value.variants[0] : '';
var fontWeight = googleGetWeight(variant);
var fontStyle = googleGetStyle(variant);
$scope.fonts.push({
groupName: 'Google fonts',
fontType: 'google',
fontFamily: value.family,
variants: value.variants,
variant: variant,
fontWeight: fontWeight,
fontStyle: fontStyle
});
});
$scope.setStyleVariant = function () {
if ($scope.dialogItem != undefined) {
return {
'font-family': $scope.selectedFont.fontFamily,
'font-weight': $scope.selectedFont.fontWeight,
'font-style': $scope.selectedFont.fontStyle
};
}
};
function loadFont(font, variant) {
WebFont.load({
google: { families: [font.fontFamily + ':' + variant] },
loading: function () {
console.log('loading');
},
active: function () {
$scope.selectedFont = font;
$scope.selectedFont.fontWeight = googleGetWeight(variant);
$scope.selectedFont.fontStyle = googleGetStyle(variant);
// If $apply isn't called, the new font family isn't applied until the next user click.
$scope.change({
fontFamily: $scope.selectedFont.fontFamily,
fontType: $scope.selectedFont.fontType,
fontWeight: $scope.selectedFont.fontWeight,
fontStyle: $scope.selectedFont.fontStyle
});
}
});
}
var webFontScriptLoaded = false;
$scope.showFontPreview = function (font, variant) {
if (!variant)
variant = font.variant;
if (font != undefined && font.fontFamily != '' && font.fontType == 'google') {
// Font needs to be independently loaded in the iframe for live preview to work.
document.getElementById('resultFrame').contentWindow.getFont(font.fontFamily + ':' + variant);
if (!webFontScriptLoaded) {
$.getScript('https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js').done(function () {
webFontScriptLoaded = true;
loadFont(font, variant);
}).fail(function () {
console.log('error loading webfont');
});
} else {
loadFont(font, variant);
}
} else {
// Font is available, apply it immediately in modal preview.
$scope.selectedFont = font;
// If $apply isn't called, the new font family isn't applied until the next user click.
$scope.change({
fontFamily: $scope.selectedFont.fontFamily,
fontType: $scope.selectedFont.fontType,
fontWeight: $scope.selectedFont.fontWeight,
fontStyle: $scope.selectedFont.fontStyle
});
}
};
$scope.cancelAndClose = function () {
$scope.cancel();
};
$scope.submitAndClose = function () {
$scope.submit({
fontFamily: $scope.selectedFont.fontFamily,
fontType: $scope.selectedFont.fontType,
fontWeight: $scope.selectedFont.fontWeight,
fontStyle: $scope.selectedFont.fontStyle
});
};
if ($scope.dialogItem != undefined) {
angular.forEach($scope.fonts, function (value, key) {
if (value.fontFamily == $scope.dialogItem.fontFamily) {
$scope.selectedFont = value;
$scope.selectedFont.variant = $scope.dialogItem.fontWeight + $scope.dialogItem.fontStyle;
$scope.selectedFont.fontWeight = $scope.dialogItem.fontWeight;
$scope.selectedFont.fontStyle = $scope.dialogItem.fontStyle;
}
});
}
});
/*********************************************************************************************************/
/* grid row editor */
/*********************************************************************************************************/
angular.module('Umbraco.canvasdesigner').controller('Umbraco.canvasdesigner.gridRow', function ($scope) {
if (!$scope.item.values) {
$scope.item.values = { fullsize: false };
}
});
/*********************************************************************************************************/
/* Layout */
/*********************************************************************************************************/
angular.module('Umbraco.canvasdesigner').controller('Umbraco.canvasdesigner.layout', function ($scope) {
if (!$scope.item.values) {
$scope.item.values = { layout: '' };
}
});
/*********************************************************************************************************/
/* margin editor */
/*********************************************************************************************************/
angular.module('Umbraco.canvasdesigner').controller('Umbraco.canvasdesigner.margin', function ($scope, dialogService) {
$scope.defaultmarginList = [
'all',
'left',
'right',
'top',
'bottom'
];
$scope.marginList = [];
$scope.selectedmargin = {
name: '',
value: 0
};
$scope.setSelectedmargin = function (margintype) {
if (margintype == 'all') {
$scope.selectedmargin.name = 'all';
$scope.selectedmargin.value = $scope.item.values.marginvalue;
}
if (margintype == 'left') {
$scope.selectedmargin.name = 'left';
$scope.selectedmargin.value = $scope.item.values.leftmarginvalue;
}
if (margintype == 'right') {
$scope.selectedmargin.name = 'right';
$scope.selectedmargin.value = $scope.item.values.rightmarginvalue;
}
if (margintype == 'top') {
$scope.selectedmargin.name = 'top';
$scope.selectedmargin.value = $scope.item.values.topmarginvalue;
}
if (margintype == 'bottom') {
$scope.selectedmargin.name = 'bottom';
$scope.selectedmargin.value = $scope.item.values.bottommarginvalue;
}
};
if (!$scope.item.values) {
$scope.item.values = {
marginvalue: $scope.item.defaultValue && $scope.item.defaultValue.length > 0 ? $scope.item.defaultValue[0] : '',
leftmarginvalue: $scope.item.defaultValue && $scope.item.defaultValue.length > 1 ? $scope.item.defaultValue[1] : '',
rightmarginvalue: $scope.item.defaultValue && $scope.item.defaultValue.length > 2 ? $scope.item.defaultValue[2] : '',
topmarginvalue: $scope.item.defaultValue && $scope.item.defaultValue.length > 3 ? $scope.item.defaultValue[3] : '',
bottommarginvalue: $scope.item.defaultValue && $scope.item.defaultValue.length > 4 ? $scope.item.defaultValue[4] : ''
};
}
if ($scope.item.enable) {
angular.forEach($scope.defaultmarginList, function (key, indexKey) {
if ($.inArray(key, $scope.item.enable) >= 0) {
$scope.marginList.splice($scope.marginList.length + 1, 0, key);
}
});
} else {
$scope.marginList = $scope.defaultmarginList;
}
$scope.$watch('valueAreLoaded', function () {
$scope.setSelectedmargin($scope.marginList[0]);
}, false);
$scope.$watch('selectedmargin', function () {
if ($scope.selectedmargin.name == 'all') {
$scope.item.values.marginvalue = $scope.selectedmargin.value;
}
if ($scope.selectedmargin.name == 'left') {
$scope.item.values.leftmarginvalue = $scope.selectedmargin.value;
}
if ($scope.selectedmargin.name == 'right') {
$scope.item.values.rightmarginvalue = $scope.selectedmargin.value;
}
if ($scope.selectedmargin.name == 'top') {
$scope.item.values.topmarginvalue = $scope.selectedmargin.value;
}
if ($scope.selectedmargin.name == 'bottom') {
$scope.item.values.bottommarginvalue = $scope.selectedmargin.value;
}
}, true);
});
/*********************************************************************************************************/
/* padding editor */
/*********************************************************************************************************/
angular.module('Umbraco.canvasdesigner').controller('Umbraco.canvasdesigner.padding', function ($scope, dialogService) {
$scope.defaultPaddingList = [
'all',
'left',
'right',
'top',
'bottom'
];
$scope.paddingList = [];
$scope.selectedpadding = {
name: '',
value: 0
};
$scope.setSelectedpadding = function (paddingtype) {
if (paddingtype == 'all') {
$scope.selectedpadding.name = 'all';
$scope.selectedpadding.value = $scope.item.values.paddingvalue;
}
if (paddingtype == 'left') {
$scope.selectedpadding.name = 'left';
$scope.selectedpadding.value = $scope.item.values.leftpaddingvalue;
}
if (paddingtype == 'right') {
$scope.selectedpadding.name = 'right';
$scope.selectedpadding.value = $scope.item.values.rightpaddingvalue;
}
if (paddingtype == 'top') {
$scope.selectedpadding.name = 'top';
$scope.selectedpadding.value = $scope.item.values.toppaddingvalue;
}
if (paddingtype == 'bottom') {
$scope.selectedpadding.name = 'bottom';
$scope.selectedpadding.value = $scope.item.values.bottompaddingvalue;
}
};
if (!$scope.item.values) {
$scope.item.values = {
paddingvalue: $scope.item.defaultValue && $scope.item.defaultValue.length > 0 ? $scope.item.defaultValue[0] : '',
leftpaddingvalue: $scope.item.defaultValue && $scope.item.defaultValue.length > 1 ? $scope.item.defaultValue[1] : '',
rightpaddingvalue: $scope.item.defaultValue && $scope.item.defaultValue.length > 2 ? $scope.item.defaultValue[2] : '',
toppaddingvalue: $scope.item.defaultValue && $scope.item.defaultValue.length > 3 ? $scope.item.defaultValue[3] : '',
bottompaddingvalue: $scope.item.defaultValue && $scope.item.defaultValue.length > 4 ? $scope.item.defaultValue[4] : ''
};
}
if ($scope.item.enable) {
angular.forEach($scope.defaultPaddingList, function (key, indexKey) {
if ($.inArray(key, $scope.item.enable) >= 0) {
$scope.paddingList.splice($scope.paddingList.length + 1, 0, key);
}
});
} else {
$scope.paddingList = $scope.defaultPaddingList;
}
$scope.$watch('valueAreLoaded', function () {
$scope.setSelectedpadding($scope.paddingList[0]);
}, false);
$scope.$watch('selectedpadding', function () {
if ($scope.selectedpadding.name == 'all') {
$scope.item.values.paddingvalue = $scope.selectedpadding.value;
}
if ($scope.selectedpadding.name == 'left') {
$scope.item.values.leftpaddingvalue = $scope.selectedpadding.value;
}
if ($scope.selectedpadding.name == 'right') {
$scope.item.values.rightpaddingvalue = $scope.selectedpadding.value;
}
if ($scope.selectedpadding.name == 'top') {
$scope.item.values.toppaddingvalue = $scope.selectedpadding.value;
}
if ($scope.selectedpadding.name == 'bottom') {
$scope.item.values.bottompaddingvalue = $scope.selectedpadding.value;
}
}, true);
});
/*********************************************************************************************************/
/* radius editor */
/*********************************************************************************************************/
angular.module('Umbraco.canvasdesigner').controller('Umbraco.canvasdesigner.radius', function ($scope, dialogService) {
$scope.defaultRadiusList = [
'all',
'topleft',
'topright',
'bottomleft',
'bottomright'
];
$scope.radiusList = [];
$scope.selectedradius = {
name: '',
value: 0
};
$scope.setSelectedradius = function (radiustype) {
if (radiustype == 'all') {
$scope.selectedradius.name = 'all';
$scope.selectedradius.value = $scope.item.values.radiusvalue;
}
if (radiustype == 'topleft') {
$scope.selectedradius.name = 'topleft';
$scope.selectedradius.value = $scope.item.values.topleftradiusvalue;
}
if (radiustype == 'topright') {
$scope.selectedradius.name = 'topright';
$scope.selectedradius.value = $scope.item.values.toprightradiusvalue;
}
if (radiustype == 'bottomleft') {
$scope.selectedradius.name = 'bottomleft';
$scope.selectedradius.value = $scope.item.values.bottomleftradiusvalue;
}
if (radiustype == 'bottomright') {
$scope.selectedradius.name = 'bottomright';
$scope.selectedradius.value = $scope.item.values.bottomrightradiusvalue;
}
};
if (!$scope.item.values) {
$scope.item.values = {
radiusvalue: $scope.item.defaultValue && $scope.item.defaultValue.length > 0 ? $scope.item.defaultValue[0] : '',
topleftradiusvalue: $scope.item.defaultValue && $scope.item.defaultValue.length > 1 ? $scope.item.defaultValue[1] : '',
toprightradiusvalue: $scope.item.defaultValue && $scope.item.defaultValue.length > 2 ? $scope.item.defaultValue[2] : '',
bottomleftradiusvalue: $scope.item.defaultValue && $scope.item.defaultValue.length > 3 ? $scope.item.defaultValue[3] : '',
bottomrightradiusvalue: $scope.item.defaultValue && $scope.item.defaultValue.length > 4 ? $scope.item.defaultValue[4] : ''
};
}
if ($scope.item.enable) {
angular.forEach($scope.defaultRadiusList, function (key, indexKey) {
if ($.inArray(key, $scope.item.enable) >= 0) {
$scope.radiusList.splice($scope.radiusList.length + 1, 0, key);
}
});
} else {
$scope.radiusList = $scope.defaultRadiusList;
}
$scope.$watch('valueAreLoaded', function () {
$scope.setSelectedradius($scope.radiusList[0]);
}, false);
$scope.$watch('selectedradius', function () {
if ($scope.selectedradius.name == 'all') {
$scope.item.values.radiusvalue = $scope.selectedradius.value;
}
if ($scope.selectedradius.name == 'topleft') {
$scope.item.values.topleftradiusvalue = $scope.selectedradius.value;
}
if ($scope.selectedradius.name == 'topright') {
$scope.item.values.toprightradiusvalue = $scope.selectedradius.value;
}
if ($scope.selectedradius.name == 'bottomleft') {
$scope.item.values.bottomleftradiusvalue = $scope.selectedradius.value;
}
if ($scope.selectedradius.name == 'bottomright') {
$scope.item.values.bottomrightradiusvalue = $scope.selectedradius.value;
}
}, true);
});
/*********************************************************************************************************/
/* shadow editor */
/*********************************************************************************************************/
angular.module('Umbraco.canvasdesigner').controller('Umbraco.canvasdesigner.shadow', function ($scope) {
if (!$scope.item.values) {
$scope.item.values = { shadow: '' };
}
});
/*********************************************************************************************************/
/* slider editor */
/*********************************************************************************************************/
angular.module('Umbraco.canvasdesigner').controller('Umbraco.canvasdesigner.slider', function ($scope) {
if (!$scope.item.values) {
$scope.item.values = { slider: '' };
}
});
/*********************************************************************************************************/
/* spectrum color picker directive */
/*********************************************************************************************************/
angular.module('colorpicker', ['spectrumcolorpicker']).directive('colorpicker', [
'dialogService',
function (dialogService) {
return {
restrict: 'EA',
scope: { ngModel: '=' },
link: function (scope, $element) {
scope.openColorDialog = function () {
var config = {
template: 'colorModal.html',
change: function (data) {
scope.ngModel = data;
},
callback: function (data) {
scope.ngModel = data;
},
cancel: function (data) {
scope.ngModel = data;
},
dialogItem: scope.ngModel,
scope: scope
};
dialogService.open(config);
};
scope.setColor = false;
scope.submitAndClose = function () {
if (scope.ngModel != '') {
scope.setColor = true;
scope.submit(scope.ngModel);
} else {
scope.cancel();
}
};
scope.cancelAndClose = function () {
scope.cancel();
};
},
template: '',
replace: true
};
}
]);
/*********************************************************************************************************/
/* jQuery UI Slider plugin wrapper */
/*********************************************************************************************************/
angular.module('Umbraco.canvasdesigner').factory('dialogService', function ($rootScope, $q, $http, $timeout, $compile, $templateCache) {
function closeDialog(dialog, destroyScope) {
if (dialog.element) {
dialog.element.removeClass('selected');
dialog.element.html('');
if (destroyScope) {
dialog.scope.$destroy();
}
}
}
function open() {
}
return {
open: function (options) {
var defaults = {
template: '',
callback: undefined,
change: undefined,
cancel: undefined,
element: undefined,
dialogItem: undefined,
dialogData: undefined
};
var dialog = angular.extend(defaults, options);
var destroyScope = true;
if (options && options.scope) {
destroyScope = false;
}
var scope = options && options.scope || $rootScope.$new();
// Save original value for cancel action
var originalDialogItem = angular.copy(dialog.dialogItem);
dialog.element = $('.float-panel');
/************************************/
// Close dialog if the user clicks outside the dialog. (Not working well with colorpickers and datepickers)
$(document).mousedown(function (e) {
var container = dialog.element;
if (!container.is(e.target) && container.has(e.target).length === 0) {
closeDialog(dialog, destroyScope);
}
});
/************************************/
$q.when($templateCache.get(dialog.template) || $http.get(dialog.template, { cache: true }).then(function (res) {
return res.data;
})).then(function onSuccess(template) {
dialog.element.html(template);
$timeout(function () {
$compile(dialog.element)(scope);
});
dialog.element.addClass('selected');
scope.cancel = function () {
if (dialog.cancel) {
dialog.cancel(originalDialogItem);
}
closeDialog(dialog, destroyScope);
};
scope.change = function (data) {
if (dialog.change) {
dialog.change(data);
}
};
scope.submit = function (data) {
if (dialog.callback) {
dialog.callback(data);
}
closeDialog(dialog, destroyScope);
};
scope.close = function () {
closeDialog(dialog, destroyScope);
};
scope.dialogData = dialog.dialogData;
scope.dialogItem = dialog.dialogItem;
dialog.scope = scope;
});
return dialog;
},
close: function () {
var modal = $('.float-panel');
modal.removeClass('selected');
}
};
});
/*********************************************************************************************************/
/* jQuery UI Slider plugin wrapper */
/*********************************************************************************************************/
angular.module('ui.slider', []).value('uiSliderConfig', {}).directive('uiSlider', [
'uiSliderConfig',
'$timeout',
function (uiSliderConfig, $timeout) {
uiSliderConfig = uiSliderConfig || {};
return {
require: 'ngModel',
template: '',
replace: true,
compile: function () {
return function (scope, elm, attrs, ngModel) {
scope.value = ngModel.$viewValue;
function parseNumber(n, decimals) {
return decimals ? parseFloat(n) : parseInt(n);
}
;
var options = angular.extend(scope.$eval(attrs.uiSlider) || {}, uiSliderConfig);
// Object holding range values
var prevRangeValues = {
min: null,
max: null
};
// convenience properties
var properties = [
'min',
'max',
'step'
];
var useDecimals = !angular.isUndefined(attrs.useDecimals) ? true : false;
var init = function () {
// When ngModel is assigned an array of values then range is expected to be true.
// Warn user and change range to true else an error occurs when trying to drag handle
if (angular.isArray(ngModel.$viewValue) && options.range !== true) {
console.warn('Change your range option of ui-slider. When assigning ngModel an array of values then the range option should be set to true.');
options.range = true;
}
// Ensure the convenience properties are passed as options if they're defined
// This avoids init ordering issues where the slider's initial state (eg handle
// position) is calculated using widget defaults
// Note the properties take precedence over any duplicates in options
angular.forEach(properties, function (property) {
if (angular.isDefined(attrs[property])) {
options[property] = parseNumber(attrs[property], useDecimals);
}
});
elm.find('.slider').slider(options);
init = angular.noop;
};
// Find out if decimals are to be used for slider
angular.forEach(properties, function (property) {
// support {{}} and watch for updates
attrs.$observe(property, function (newVal) {
if (!!newVal) {
init();
elm.find('.slider').slider('option', property, parseNumber(newVal, useDecimals));
}
});
});
attrs.$observe('disabled', function (newVal) {
init();
elm.find('.slider').slider('option', 'disabled', !!newVal);
});
// Watch ui-slider (byVal) for changes and update
scope.$watch(attrs.uiSlider, function (newVal) {
init();
if (newVal != undefined) {
elm.find('.slider').slider('option', newVal);
elm.find('.ui-slider-handle').html('' + ui.value + 'px ');
}
}, true);
// Late-bind to prevent compiler clobbering
$timeout(init, 0, true);
// Update model value from slider
elm.find('.slider').bind('slidestop', function (event, ui) {
ngModel.$setViewValue(ui.values || ui.value);
scope.$apply();
});
elm.bind('slide', function (event, ui) {
event.stopPropagation();
elm.find('.slider-input').val(ui.value);
elm.find('.ui-slider-handle').html('' + ui.value + 'px ');
});
// Update slider from model value
ngModel.$render = function () {
init();
var method = options.range === true ? 'values' : 'value';
if (isNaN(ngModel.$viewValue) && !(ngModel.$viewValue instanceof Array))
ngModel.$viewValue = 0;
if (ngModel.$viewValue == '')
ngModel.$viewValue = 0;
scope.value = ngModel.$viewValue;
// Do some sanity check of range values
if (options.range === true) {
// Check outer bounds for min and max values
if (angular.isDefined(options.min) && options.min > ngModel.$viewValue[0]) {
ngModel.$viewValue[0] = options.min;
}
if (angular.isDefined(options.max) && options.max < ngModel.$viewValue[1]) {
ngModel.$viewValue[1] = options.max;
}
// Check min and max range values
if (ngModel.$viewValue[0] >= ngModel.$viewValue[1]) {
// Min value should be less to equal to max value
if (prevRangeValues.min >= ngModel.$viewValue[1])
ngModel.$viewValue[0] = prevRangeValues.min;
// Max value should be less to equal to min value
if (prevRangeValues.max <= ngModel.$viewValue[0])
ngModel.$viewValue[1] = prevRangeValues.max;
}
// Store values for later user
prevRangeValues.min = ngModel.$viewValue[0];
prevRangeValues.max = ngModel.$viewValue[1];
}
elm.find('.slider').slider(method, ngModel.$viewValue);
elm.find('.ui-slider-handle').html('' + ngModel.$viewValue + 'px ');
};
scope.$watch('value', function () {
ngModel.$setViewValue(scope.value);
}, true);
scope.$watch(attrs.ngModel, function () {
if (options.range === true) {
ngModel.$render();
}
}, true);
function destroy() {
elm.find('.slider').slider('destroy');
}
elm.find('.slider').bind('$destroy', destroy);
};
}
};
}
]);
/*********************************************************************************************************/
/* spectrum color picker directive */
/*********************************************************************************************************/
angular.module('spectrumcolorpicker', []).directive('spectrum', function () {
return {
restrict: 'E',
transclude: true,
scope: {
colorselected: '=',
setColor: '=',
flat: '=',
showPalette: '='
},
link: function (scope, $element) {
var initColor;
$element.find('input').spectrum({
color: scope.colorselected,
allowEmpty: true,
preferredFormat: 'hex',
showAlpha: true,
showInput: true,
flat: scope.flat,
localStorageKey: 'spectrum.panel',
showPalette: scope.showPalette,
palette: [],
change: function (color) {
if (color) {
scope.colorselected = color.toRgbString();
} else {
scope.colorselected = '';
}
scope.$apply();
},
move: function (color) {
scope.colorselected = color.toRgbString();
scope.$apply();
},
beforeShow: function (color) {
initColor = angular.copy(scope.colorselected);
$(this).spectrum('container').find('.sp-cancel').click(function (e) {
scope.colorselected = initColor;
scope.$apply();
});
}
});
scope.$watch('setcolor', function (setColor) {
if (scope.$eval(setColor) === true) {
$element.find('input').spectrum('set', scope.colorselected);
}
}, true);
},
template: ' ',
replace: true
};
});
}());