/*********************************************************************************************************/
/* 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 panel app and controller */
/*********************************************************************************************************/
var app = angular.module("Umbraco.canvasdesigner", ['colorpicker', 'ui.slider', 'umbraco.resources', 'umbraco.services'])
.controller("Umbraco.canvasdesignerController", function ($scope, $http, $window, $timeout, $location, dialogService) {
$scope.isOpen = false;
$scope.frameLoaded = false;
$scope.enableCanvasdesigner = 0;
$scope.googleFontFamilies = {};
$scope.pageId = $location.search().id;
$scope.pageUrl = "../dialogs/Preview.aspx?id=" + $location.search().id;
$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 () {
//console.log('loading font' + font + ' in UI designer');
},
active: function () {
//console.log('loaded font ' + font + ' in UI designer');
},
inactive: function () {
//console.log('error loading font ' + font + ' in UI designer');
}
});
}
};
/*****************************************************************************/
/* 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();
}
});
}
};
})
/*********************************************************************************************************/
/* 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
};
})