diff --git a/src/Umbraco.Core/Constants-PropertyEditors.cs b/src/Umbraco.Core/Constants-PropertyEditors.cs index a719e845b1..642827af53 100644 --- a/src/Umbraco.Core/Constants-PropertyEditors.cs +++ b/src/Umbraco.Core/Constants-PropertyEditors.cs @@ -133,7 +133,7 @@ namespace Umbraco.Core /// /// Alias for the grid datatype. /// - public const string GridAlias = "Umbraco.Grid"; + public const string CanvasAlias = "Umbraco.Canvas"; /// diff --git a/src/Umbraco.Web.UI.Client/gruntFile.js b/src/Umbraco.Web.UI.Client/gruntFile.js index d79492b4a2..ca289bbb55 100644 --- a/src/Umbraco.Web.UI.Client/gruntFile.js +++ b/src/Umbraco.Web.UI.Client/gruntFile.js @@ -143,16 +143,16 @@ module.exports = function (grunt) { bower: { files: [ { - dest: '<%= distdir %>/lib/typeahead/typeahead.bundle.min.js', - src: 'bower_components/typeahead.js/dist/typeahead.bundle.min.js' + dest: '<%= distdir %>/lib/typeahead/typeahead.bundle.min.js', + src: 'bower_components/typeahead.js/dist/typeahead.bundle.min.js' }, { - dest: '<%= distdir %>/lib/lazyload/lazyload.min.js', + dest: '<%= distdir %>/lib/lazyload/lazyload.min.js', src: 'bower_components/rgrove-lazyload/lazyload.js' } ] }, - + installer: { files: [{ dest: '<%= distdir %>/views/install', src : '**/*.html', expand: true, cwd: 'src/installer/steps' }] @@ -160,12 +160,12 @@ module.exports = function (grunt) { tuning: { files: [ - { dest: '<%= distdir %>/preview', src: '**/*.html', expand: true, cwd: 'src/tuning' }, - { dest: '<%= distdir %>/preview/editors', src: '**/*.html', expand: true, cwd: 'src/tuning/editors' }, - { dest: '<%= distdir %>/assets/less', src: '**/*.less', expand: true, cwd: 'src/tuning/editors' }, - { dest: '<%= distdir %>/js', src: 'tuning.config.js', expand: true, cwd: 'src/tuning/config' }, - { dest: '<%= distdir %>/js', src: 'tuning.palettes.js', expand: true, cwd: 'src/tuning/config' }, - { dest: '<%= distdir %>/js', src: 'tuning.front.js', expand: true, cwd: 'src/tuning' } + { dest: '<%= distdir %>/preview', src: '**/*.html', expand: true, cwd: 'src/canvasdesigner' }, + { dest: '<%= distdir %>/preview/editors', src: '**/*.html', expand: true, cwd: 'src/canvasdesigner/editors' }, + { dest: '<%= distdir %>/assets/less', src: '**/*.less', expand: true, cwd: 'src/canvasdesigner/editors' }, + { dest: '<%= distdir %>/js', src: 'canvasdesigner.config.js', expand: true, cwd: 'src/canvasdesigner/config' }, + { dest: '<%= distdir %>/js', src: 'canvasdesigner.palettes.js', expand: true, cwd: 'src/canvasdesigner/config' }, + { dest: '<%= distdir %>/js', src: 'canvasdesigner.front.js', expand: true, cwd: 'src/canvasdesigner' } ] }, @@ -193,7 +193,7 @@ module.exports = function (grunt) { { dest: '<%= vsdir %>/views', src: '**', expand: true, cwd: '<%= distdir %>/views' }, { dest: '<%= vsdir %>/preview', src: '**', expand: true, cwd: '<%= distdir %>/preview' } ] - }, + }, packages: { files: [{ dest: '<%= vsdir %>/../App_Plugins', src : '**', expand: true, cwd: 'src/packages/' }] } @@ -230,8 +230,8 @@ module.exports = function (grunt) { } }, tuningJs: { - src: ['src/tuning/tuning.global.js', 'src/tuning/tuning.controller.js', 'src/tuning/editors/*.js', 'src/tuning/lib/*.js'], - dest: '<%= distdir %>/js/tuning.panel.js' + src: ['src/canvasdesigner/canvasdesigner.global.js', 'src/canvasdesigner/canvasdesigner.controller.js', 'src/canvasdesigner/editors/*.js', 'src/canvasdesigner/lib/*.js'], + dest: '<%= distdir %>/js/canvasdesigner.panel.js' }, controllers: { src:['src/controllers/**/*.controller.js','src/views/**/*.controller.js'], @@ -321,8 +321,8 @@ module.exports = function (grunt) { }, tuning: { files: { - '<%= distdir %>/assets/css/tuning.panelStyles.css': - ['src/less/tuning.panelStyles.less', 'src/less/helveticons.less'] + '<%= distdir %>/assets/css/canvasdesigner.panelStyles.css': + ['src/less/canvasdesigner.panelStyles.less', 'src/less/helveticons.less'] }, options: { compile: true @@ -361,7 +361,7 @@ module.exports = function (grunt) { tasks: ['watch-installer', 'timestamp'], }, tuning: { - files: ['src/tuning/**/*.*'], + files: ['src/canvasdesigner/**/*.*'], tasks: ['watch-tuning', 'timestamp'], }, html: { diff --git a/src/Umbraco.Web.UI.Client/src/tuning.loader.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner.loader.js similarity index 83% rename from src/Umbraco.Web.UI.Client/src/tuning.loader.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner.loader.js index 6c479dcd2a..fa8dbdcaff 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning.loader.js +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner.loader.js @@ -10,10 +10,10 @@ LazyLoad.js([ '/Umbraco/ServerVariables', '/Umbraco/lib/spectrum/spectrum.js', 'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js', - '/umbraco/js/tuning.panel.js', + '/umbraco/js/canvasdesigner.panel.js', ], function () { jQuery(document).ready(function () { - angular.bootstrap(document, ['umbraco.tuning']); + angular.bootstrap(document, ['Umbraco.canvasdesigner']); }); } -); \ No newline at end of file +); diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/canvasdesigner.controller.js similarity index 92% rename from src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/canvasdesigner.controller.js index da79735e9a..36b8496485 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/canvasdesigner.controller.js @@ -3,9 +3,9 @@ /* tuning panel app and controller */ /*********************************************************************************************************/ -var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', 'umbraco.resources', 'umbraco.services']) +var app = angular.module("Umbraco.canvasdesigner", ['spectrumcolorpicker', 'ui.slider', 'umbraco.resources', 'umbraco.services']) -.controller("Umbraco.tuningController", function ($scope, $http, $window, $timeout, $location, dialogService) { +.controller("Umbraco.canvasdesignerController", function ($scope, $http, $window, $timeout, $location, dialogService) { $scope.isOpen = false; $scope.frameLoaded = false; @@ -27,6 +27,8 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', ]; $scope.previewDevice = $scope.devices[0]; + var apiController = "/Umbraco/Api/CanvasDesigner/"; + /*****************************************************************************/ /* Preview devices */ /*****************************************************************************/ @@ -34,7 +36,7 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', // Set preview device $scope.updatePreviewDevice = function (device) { $scope.previewDevice = device; - } + }; /*****************************************************************************/ /* UI designer managment */ @@ -60,7 +62,7 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', } item.values[key] = newValue; } - }) + }); } // TODO: special init for font family picker @@ -75,7 +77,7 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', console.info("Style parameter not found " + item.alias); } - }) + }); }); // Load google font @@ -86,25 +88,25 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', $scope.valueAreLoaded = true; - } + }; // Load parameters from GetLessParameters and init data of the tuning config $scope.initTuning = function () { - $http.get('/Umbraco/Api/tuning/Load', { params: { pageId: $scope.pageId } }) + $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 tuningModel + // Refresh all less parameters for every changes watching tuningModel var refreshtuning = function () { var parameters = []; @@ -138,7 +140,7 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', if ($scope.currentSelected) { setSelectedSchema(); } - + } } @@ -185,7 +187,7 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', $('.btn-default-save').attr("disabled", true); $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; - $http.post('/Umbraco/Api/tuning/Save', resultParameters, { + $http.post(apiController + 'Save', resultParameters, { headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, transformRequest: transform }) @@ -199,7 +201,7 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', // Delete current page tuning $scope.deleteTuning = function () { $('.btn-default-delete').attr("disabled", true); - $http.get('/Umbraco/Api/tuning/Delete', { params: { pageId: $scope.pageId } }) + $http.get(apiController + 'Delete', { params: { pageId: $scope.pageId } }) .success(function (data) { $scope.enableTuning++; $scope.pageUrl = $scope.pageUrl + "&n=123456"; @@ -216,7 +218,7 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', $scope.refreshtuningByPalette = function (palette) { updateConfigValue(palette.data); refreshtuning(); - } + }; // Hidden botton to make preset from the current settings $scope.makePreset = function () { @@ -228,16 +230,16 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', 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; + value = (value !== 0 && (value === undefined || value === "")) ? "''" : value; parameters.splice(parameters.length + 1, 0, "\"" + propertyAlias + "\":" + " \"" + value + "\""); - }) + }); } - }) + }); }); $(".btn-group").append(""); - } + }; /*****************************************************************************/ /* Panel managment */ @@ -245,7 +247,7 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', $scope.openPreviewDevice = function () { $scope.showDevicesPreview = true; - $scope.closeIntelTuning() + $scope.closeIntelTuning(); } $scope.closePreviewDevice = function(){ @@ -258,30 +260,30 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', $scope.openPalettePicker = function () { $scope.showPalettePicker = true; $scope.showStyleEditor = false; - $scope.closeIntelTuning() - } + $scope.closeIntelTuning(); + }; $scope.openStyleEditor = function () { $scope.showStyleEditor = true; $scope.showPalettePicker = false; - $scope.openIntelTuning() - } + $scope.openIntelTuning(); + }; // 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) { + angular.forEach(editors, function (item, index) { if (item.category == category) { result = true; } }); return result; - } + }; $scope.closeFloatPanels = function () { @@ -291,7 +293,7 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', dialogService.close(); $scope.showPalettePicker = false; $scope.$apply(); - } + }; /*****************************************************************************/ /* Call function into the front-end */ @@ -300,23 +302,23 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', var loadGoogleFontInFront = function (font) { if (document.getElementById("resultFrame").contentWindow.getFont) document.getElementById("resultFrame").contentWindow.getFont(font); - } + }; var setSelectedSchema = function () { if (document.getElementById("resultFrame").contentWindow.outlineSelected) document.getElementById("resultFrame").contentWindow.outlineSelected(); - } + }; var refreshFrontStyles = function (parameters) { if (document.getElementById("resultFrame").contentWindow.refrechLayout) document.getElementById("resultFrame").contentWindow.refrechLayout(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.openIntelTuning = function () { if (document.getElementById("resultFrame").contentWindow.initIntelTuning) @@ -327,19 +329,19 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', setSelectedSchema(); } - } + }; $scope.closeIntelTuning = function () { if (document.getElementById("resultFrame").contentWindow.closeIntelTuning) document.getElementById("resultFrame").contentWindow.closeIntelTuning($scope.tuningModel); $scope.outlineSelectedHide(); - } + }; $scope.outlineSelectedHide = function () { if (document.getElementById("resultFrame").contentWindow.outlineSelectedHide) document.getElementById("resultFrame").contentWindow.outlineSelectedHide(); $scope.schemaFocus = "body"; - } + }; @@ -376,22 +378,22 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', } }); } - } + }; /*****************************************************************************/ /* Init */ /*****************************************************************************/ // Preload of the google font - $http.get('/Umbraco/Api/tuning/GetGoogleFont').success(function (data) { + $http.get(apiController + 'GetGoogleFont').success(function (data) { $scope.googleFontFamilies = data; - }) + }); // watch framLoaded, only if iframe page have EnableTuning() $scope.$watch("enableTuning", function () { $timeout(function () { if ($scope.enableTuning > 0) { - + $.each($scope.tuningModel.configs, function (indexConfig, config) { $.each(config.editors, function (indexItem, item) { @@ -402,13 +404,13 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', } } - }) + }); }); $scope.$watch('ngRepeatFinished', function (ngRepeatFinishedEvent) { $timeout(function () { $scope.initTuning(); - }, 200); + }, 200); }); $scope.$watch('tuningModel', function () { @@ -417,7 +419,7 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', } }, 100); - }, true) + }, true); }) @@ -431,7 +433,7 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', }); } } - } + }; }) .directive('iframeIsLoaded', function ($timeout) { @@ -440,7 +442,7 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', link: function (scope, element, attr) { element.load(function () { var iframe = (element.context.contentWindow || element.context.contentDocument); - if(iframe.document.getElementById("umbracoPreviewBadge")) + if(iframe && iframe.document.getElementById("umbracoPreviewBadge")) iframe.document.getElementById("umbracoPreviewBadge").style.display = "none"; if (!document.getElementById("resultFrame").contentWindow.refrechLayout) { scope.frameLoaded = true; @@ -448,7 +450,5 @@ var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', } }); } - } + }; }); - - diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/canvasdesigner.front.js similarity index 98% rename from src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/canvasdesigner.front.js index ecc4000e7c..7f13f6e940 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/canvasdesigner.front.js @@ -102,7 +102,7 @@ var initIntelTuning = function (tuningModel) { e.stopPropagation(); e.preventDefault(); //console.info(target.attr('tuning-over')); - + currentTarget = target; outlineSelected(); @@ -227,7 +227,7 @@ var initTuningPanel = function () { // Create or update the less file $.ajax({ - url: "/Umbraco/Api/tuning/Init", + url: "/Umbraco/Api/CanvasDesigner/Init", type: 'POST', dataType: "json", error: function (err) { @@ -252,7 +252,7 @@ var initTuningPanel = function () { // Init Less.js $.getScript("/Umbraco/lib/Less/less-1.7.0.min.js", function (data, textStatus, jqxhr) { - // Init panel + // Init panel if (parent.setFrameIsLoaded) { parent.setFrameIsLoaded(tuningConfig, tuningPalette); } @@ -266,7 +266,7 @@ $(function () { if (parent.setFrameIsLoaded) { - // Overlay background-color: rgba(28, 203, 255, 0.05); + // Overlay background-color: rgba(28, 203, 255, 0.05); $("body").append("
"); $("body").append("
"); @@ -278,4 +278,3 @@ $(function () { } }); - diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/canvasdesigner.global.js similarity index 100% rename from src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/canvasdesigner.global.js diff --git a/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.config.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/config/canvasdesigner.config.js similarity index 100% rename from src/Umbraco.Web.UI.Client/src/tuning/config/tuning.config.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/config/canvasdesigner.config.js diff --git a/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.editors.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/config/canvasdesigner.editors.js similarity index 100% rename from src/Umbraco.Web.UI.Client/src/tuning/config/tuning.editors.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/config/canvasdesigner.editors.js diff --git a/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.palettes.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/config/canvasdesigner.palettes.js similarity index 100% rename from src/Umbraco.Web.UI.Client/src/tuning/config/tuning.palettes.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/config/canvasdesigner.palettes.js diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/background.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.html similarity index 97% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/background.html rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.html index 128b18aee5..7395416217 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/background.html +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.html @@ -1,8 +1,8 @@  -
- +
+
{{item.name}}
- +
@@ -34,7 +34,7 @@
- +
  • @@ -57,4 +57,4 @@
- \ No newline at end of file + diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/background.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.js similarity index 97% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/background.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.js index 633c26a8dc..2f99988f48 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/background.js +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.js @@ -3,9 +3,9 @@ /* Background editor */ /*********************************************************************************************************/ -angular.module("umbraco.tuning") +angular.module("Umbraco.canvasdesigner") -.controller("Umbraco.tuning.background", function ($scope, dialogService) { +.controller("Umbraco.canvasdesigner.background", function ($scope, dialogService) { if (!$scope.item.values) { $scope.item.values = { @@ -171,11 +171,11 @@ angular.module("umbraco.tuning") } else { $scope.cancel(); } - + }; $scope.cancelAndClose = function () { $scope.cancel(); } -}) \ No newline at end of file +}) diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/background.less b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.less similarity index 100% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/background.less rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.less diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/border.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.html similarity index 91% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/border.html rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.html index 03c9c97e95..55837e9484 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/border.html +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.html @@ -1,5 +1,5 @@  -
+
{{item.name}}
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/border.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.js similarity index 97% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/border.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.js index 9822611cb1..daca4373fc 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/border.js +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.js @@ -3,9 +3,9 @@ /* Background editor */ /*********************************************************************************************************/ -angular.module("umbraco.tuning") +angular.module("Umbraco.canvasdesigner") -.controller("Umbraco.tuning.border", function ($scope, dialogService) { +.controller("Umbraco.canvasdesigner.border", function ($scope, dialogService) { $scope.defaultBorderList = ["all", "left", "right", "top", "bottom"]; $scope.borderList = []; diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/border.less b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.less similarity index 100% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/border.less rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.less diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/color.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.html similarity index 84% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/color.html rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.html index 1aeb4ae772..f1d42396d5 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/color.html +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.html @@ -1,5 +1,5 @@  -
+
{{item.name}}
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/color.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.js similarity index 76% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/color.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.js index df12670a84..ca39244e6f 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/color.js +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.js @@ -3,9 +3,9 @@ /* color editor */ /*********************************************************************************************************/ -angular.module("umbraco.tuning") +angular.module("Umbraco.canvasdesigner") -.controller("Umbraco.tuning.color", function ($scope) { +.controller("Umbraco.canvasdesigner.color", function ($scope) { if (!$scope.item.values) { $scope.item.values = { diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/color.less b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.less similarity index 100% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/color.less rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.less diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/googlefontpicker.html similarity index 95% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.html rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/googlefontpicker.html index b912c5f793..62cd7c6e50 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.html +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/googlefontpicker.html @@ -1,5 +1,5 @@  -
+
{{item.name}}:
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/googlefontpicker.js similarity index 97% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/googlefontpicker.js index 651002ad1b..b32311ee7c 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.js +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/googlefontpicker.js @@ -3,9 +3,9 @@ /* google font editor */ /*********************************************************************************************************/ -angular.module("umbraco.tuning") +angular.module("Umbraco.canvasdesigner") -.controller("Umbraco.tuning.googlefontpicker", function ($scope, dialogService) { +.controller("Umbraco.canvasdesigner.googlefontpicker", function ($scope, dialogService) { if (!$scope.item.values) { $scope.item.values = { diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.less b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/googlefontpicker.less similarity index 100% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.less rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/googlefontpicker.less diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/gridRow.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/gridRow.html similarity index 94% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/gridRow.html rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/gridRow.html index c77d587348..1a52d8d1e5 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/gridRow.html +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/gridRow.html @@ -1,5 +1,5 @@  -
+
Background color: diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/gridRow.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/gridRow.js similarity index 89% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/gridRow.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/gridRow.js index a8b17587f6..a5a926f5ee 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/gridRow.js +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/gridRow.js @@ -3,9 +3,9 @@ /* grid row editor */ /*********************************************************************************************************/ -angular.module("umbraco.tuning") +angular.module("Umbraco.canvasdesigner") -.controller("Umbraco.tuning.gridRow", function ($scope, $modal) { +.controller("Umbraco.canvasdesigner.gridRow", function ($scope, $modal) { if (!$scope.item.values) { $scope.item.values = { diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/gridRow.less b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/gridRow.less similarity index 100% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/gridRow.less rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/gridRow.less diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/margin.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/margin.html similarity index 89% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/margin.html rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/margin.html index 0b4571053d..5cec9840ee 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/margin.html +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/margin.html @@ -1,5 +1,5 @@  -
+
{{item.name}}
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/margin.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/margin.js similarity index 96% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/margin.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/margin.js index 1dd1ddc988..617421f702 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/margin.js +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/margin.js @@ -3,9 +3,9 @@ /* margin editor */ /*********************************************************************************************************/ -angular.module("umbraco.tuning") +angular.module("Umbraco.canvasdesigner") -.controller("Umbraco.tuning.margin", function ($scope, dialogService) { +.controller("Umbraco.canvasdesigner.margin", function ($scope, dialogService) { $scope.defaultmarginList = ["all", "left", "right", "top", "bottom"]; $scope.marginList = []; diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/margin.less b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/margin.less similarity index 100% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/margin.less rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/margin.less diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/padding.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/padding.html similarity index 89% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/padding.html rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/padding.html index af12b2f4cd..9ab33075d7 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/padding.html +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/padding.html @@ -1,5 +1,5 @@  -
+
{{item.name}}
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/padding.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/padding.js similarity index 96% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/padding.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/padding.js index 4fa3fbe4ed..81690cd7e4 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/padding.js +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/padding.js @@ -3,9 +3,9 @@ /* padding editor */ /*********************************************************************************************************/ -angular.module("umbraco.tuning") +angular.module("Umbraco.canvasdesigner") -.controller("Umbraco.tuning.padding", function ($scope, dialogService) { +.controller("Umbraco.canvasdesigner.padding", function ($scope, dialogService) { $scope.defaultPaddingList = ["all", "left", "right", "top", "bottom"]; $scope.paddingList = []; diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/padding.less b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/padding.less similarity index 100% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/padding.less rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/padding.less diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/radius.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/radius.html similarity index 94% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/radius.html rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/radius.html index 171f147ae8..80b52f1f03 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/radius.html +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/radius.html @@ -1,5 +1,5 @@  -
+
{{item.name}}
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/radius.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/radius.js similarity index 96% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/radius.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/radius.js index 7d7b6a3617..7305591a83 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/radius.js +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/radius.js @@ -3,9 +3,9 @@ /* radius editor */ /*********************************************************************************************************/ -angular.module("umbraco.tuning") +angular.module("Umbraco.canvasdesigner") -.controller("Umbraco.tuning.radius", function ($scope, dialogService) { +.controller("Umbraco.canvasdesigner.radius", function ($scope, dialogService) { $scope.defaultRadiusList = ["all", "topleft", "topright", "bottomleft", "bottomright"]; $scope.radiusList = []; diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/radius.less b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/radius.less similarity index 100% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/radius.less rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/radius.less diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/slider.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/slider.html similarity index 78% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/slider.html rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/slider.html index 67c7740a6f..d25667750b 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/slider.html +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/slider.html @@ -1,5 +1,5 @@  -
+
{{item.name}}:
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/slider.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/slider.js similarity index 76% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/slider.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/slider.js index 57405a1522..766f13efb5 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/slider.js +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/slider.js @@ -3,9 +3,9 @@ /* slider editor */ /*********************************************************************************************************/ -angular.module("umbraco.tuning") +angular.module("Umbraco.canvasdesigner") -.controller("Umbraco.tuning.slider", function ($scope) { +.controller("Umbraco.canvasdesigner.slider", function ($scope) { if (!$scope.item.values) { $scope.item.values = { diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/slider.less b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/slider.less similarity index 100% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/slider.less rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/slider.less diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/wide.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/wide.html similarity index 81% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/wide.html rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/wide.html index a2d0ce33ba..372f415b5c 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/wide.html +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/wide.html @@ -1,5 +1,5 @@  -
+
{{item.name}}:
Wide diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/wide.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/wide.js similarity index 76% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/wide.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/wide.js index 5d3c22f3b8..7c56dd890b 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/wide.js +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/wide.js @@ -3,9 +3,9 @@ /* slider editor */ /*********************************************************************************************************/ -angular.module("umbraco.tuning") +angular.module("Umbraco.canvasdesigner") -.controller("Umbraco.tuning.wide", function ($scope) { +.controller("Umbraco.canvasdesigner.wide", function ($scope) { if (!$scope.item.values) { $scope.item.values = { diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/wide.less b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/wide.less similarity index 100% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/wide.less rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/wide.less diff --git a/src/Umbraco.Web.UI.Client/src/tuning/index.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/index.html similarity index 96% rename from src/Umbraco.Web.UI.Client/src/tuning/index.html rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/index.html index 5aab725e87..47b1049c7d 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/index.html +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/index.html @@ -2,13 +2,13 @@ - + - - + +
@@ -89,7 +89,7 @@
- +
@@ -133,9 +133,9 @@
- + - \ No newline at end of file + diff --git a/src/Umbraco.Web.UI.Client/src/tuning/lib/dialog.service.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/dialog.service.js similarity index 95% rename from src/Umbraco.Web.UI.Client/src/tuning/lib/dialog.service.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/dialog.service.js index 6e392a33b1..d657db5de7 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/lib/dialog.service.js +++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/dialog.service.js @@ -3,7 +3,7 @@ /* jQuery UI Slider plugin wrapper */ /*********************************************************************************************************/ -angular.module("umbraco.tuning").factory('dialogService', function ($rootScope, $q, $http, $timeout, $compile, $templateCache) { +angular.module("Umbraco.canvasdesigner").factory('dialogService', function ($rootScope, $q, $http, $timeout, $compile, $templateCache) { function closeDialog(dialog) { diff --git a/src/Umbraco.Web.UI.Client/src/tuning/lib/slider.directive.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/slider.directive.js similarity index 100% rename from src/Umbraco.Web.UI.Client/src/tuning/lib/slider.directive.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/slider.directive.js diff --git a/src/Umbraco.Web.UI.Client/src/tuning/lib/spectrum.directive.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/spectrum.directive.js similarity index 100% rename from src/Umbraco.Web.UI.Client/src/tuning/lib/spectrum.directive.js rename to src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/spectrum.directive.js diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/grid/grid.rte.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/canvas/canvas.rte.directive.js similarity index 96% rename from src/Umbraco.Web.UI.Client/src/common/directives/grid/grid.rte.directive.js rename to src/Umbraco.Web.UI.Client/src/common/directives/canvas/canvas.rte.directive.js index ff32a44976..8383c38615 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/grid/grid.rte.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/canvas/canvas.rte.directive.js @@ -1,5 +1,5 @@ angular.module("umbraco") - .directive('gridRte', function (tinyMceService, stylesheetResource, angularHelper, assetsService, $q, $timeout) { + .directive('canvasRte', function (tinyMceService, stylesheetResource, angularHelper, assetsService, $q, $timeout) { return { scope: { uniqueId: '=', @@ -18,12 +18,12 @@ angular.module("umbraco") //we always fetch the default one, and then override parts with our own tinyMceService.configuration().then(function (tinyMceConfig) { - + //config value from general tinymce.config file var validElements = tinyMceConfig.validElements; var fallbackStyles = [{title: "Page header", block: "h2"}, {title: "Section header", block: "h3"}, {title: "Paragraph header", block: "h4"}, {title: "Normal", block: "p"}, {title: "Quote", block: "blockquote"}, {title: "Code", block: "code"}]; - + //These are absolutely required in order for the macros to render inline //we put these as extended elements because they get merged on top of the normal allowed elements by tiny mce var extendedValidElements = "@[id|class|style],-div[id|dir|class|align|style],ins[datetime|cite],-ul[class|style],-li[class|style],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],-h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|style|dir|class|align]"; @@ -38,9 +38,9 @@ angular.module("umbraco") //config value on the data type var toolbar = ["code", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "umbembeddialog"].join(" | "); var stylesheets = []; - + var styleFormats = []; - var await = []; + var await = []; //queue file loading if (typeof (tinymce) === "undefined") { @@ -55,7 +55,7 @@ angular.module("umbraco") if(scope.configuration && scope.configuration.stylesheets){ angular.forEach(scope.configuration.stylesheets, function(stylesheet, key){ - + stylesheets.push("/css/" + stylesheet + ".css"); await.push(stylesheetResource.getRulesByName(stylesheet).then(function (rules) { angular.forEach(rules, function (rule) { @@ -75,7 +75,7 @@ angular.module("umbraco") })); }); }else{ - stylesheets.push("views/propertyeditors/grid/config/grid.default.rtestyles.css"); + stylesheets.push("views/propertyeditors/canvas/config/canvas.default.rtestyles.css"); styleFormats = fallbackStyles; } @@ -112,7 +112,7 @@ angular.module("umbraco") //set the reference tinyMceEditor = editor; - + //enable browser based spell checking editor.on('init', function (e) { @@ -129,7 +129,7 @@ angular.module("umbraco") editor.focus(); } }, 400); - + }); //when we leave the editor (maybe) @@ -144,7 +144,7 @@ angular.module("umbraco") if(scope.onBlur){ scope.onBlur(); } - + _toolbar.css("visibility", "hidden"); }); }); @@ -152,7 +152,7 @@ angular.module("umbraco") // Focus on editor editor.on('focus', function (e) { angularHelper.safeApply(scope, function () { - + var _toolbar = $(editor.editorContainer) .find(".mce-toolbar"); @@ -170,7 +170,7 @@ angular.module("umbraco") // Click on editor editor.on('click', function (e) { angularHelper.safeApply(scope, function () { - + var _toolbar = $(editor.editorContainer) .find(".mce-toolbar"); @@ -264,7 +264,7 @@ angular.module("umbraco") }); //when the element is disposed we need to unsubscribe! - // NOTE: this is very important otherwise if this is part of a modal, the listener still exists because the dom + // NOTE: this is very important otherwise if this is part of a modal, the listener still exists because the dom // element might still be there even after the modal has been hidden. scope.$on('$destroy', function () { unsubscribe(); diff --git a/src/Umbraco.Web.UI.Client/src/common/services/grid.service.js b/src/Umbraco.Web.UI.Client/src/common/services/canvas.service.js similarity index 58% rename from src/Umbraco.Web.UI.Client/src/common/services/grid.service.js rename to src/Umbraco.Web.UI.Client/src/common/services/canvas.service.js index 1eea5fbc7d..afb6062deb 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/grid.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/canvas.service.js @@ -1,7 +1,7 @@ angular.module('umbraco.services') - .factory('gridService', function ($http, $q){ + .factory('canvasService', function ($http, $q){ - var configPath = "../config/grid.editors.config.js"; + var configPath = "../config/canvas.editors.config.js"; var service = { getGridEditors: function () { return $http.get(configPath); @@ -10,4 +10,4 @@ angular.module('umbraco.services') return service; - }); \ No newline at end of file + }); diff --git a/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less b/src/Umbraco.Web.UI.Client/src/less/canvasdesigner.panelStyles.less similarity index 100% rename from src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less rename to src/Umbraco.Web.UI.Client/src/less/canvasdesigner.panelStyles.less diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/canvas.controller.js similarity index 92% rename from src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js rename to src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/canvas.controller.js index e80398230a..08bd9097a8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/canvas.controller.js @@ -1,501 +1,501 @@ -angular.module("umbraco") - .controller("Umbraco.PropertyEditors.GridController", - function ($scope, $http, assetsService, $rootScope, dialogService, gridService, mediaResource, imageHelper, $timeout) { - - // Grid status variables - $scope.currentRow = null; - $scope.currentCell = null; - $scope.currentToolsControl = null; - $scope.currentControl = null; - $scope.openRTEToolbarId = null; - - - // ********************************************* - // Sortable options - // ********************************************* - - $scope.sortableOptions = { - distance: 10, - cursor: "move", - placeholder: 'ui-sortable-placeholder', - handle: '.cell-tools-move', - forcePlaceholderSize: true, - tolerance: "pointer", - zIndex: 999999999999999999, - scrollSensitivity: 100, - cursorAt: { - top: 45, - left: 90 - }, - - start: function (e, ui) { - ui.item.find('.mceNoEditor').each(function () { - tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id')); - }); - }, - - stop: function (e, ui) { - ui.item.parents(".usky-column").find('.mceNoEditor').each(function () { - tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id')); - tinyMCE.execCommand('mceAddEditor', false, $(this).attr('id')); - }); - } - - }; - - var notIncludedRte = []; - var cancelMove = false; - - $scope.sortableOptionsCell = { - - distance: 10, - cursor: "move", - placeholder: "ui-sortable-placeholder", - handle: '.cell-tools-move', - connectWith: ".usky-cell", - forcePlaceholderSize: true, - tolerance:"pointer", - zIndex: 999999999999999999, - scrollSensitivity: 100, - cursorAt: { - top: 45, - left: 90 - }, - - over: function (event, ui) { - allowedEditors = $(event.target).scope().area.allowed; - - if ($.inArray(ui.item.scope().control.editor.alias, allowedEditors) < 0 && allowedEditors) { - ui.placeholder.hide(); - cancelMove = true; - } - else { - ui.placeholder.show(); - cancelMove = false; - } - - }, - - update: function (event, ui) { - if (!ui.sender) { - if (cancelMove) { - ui.item.sortable.cancel(); - } - ui.item.parents(".usky-cell").find('.mceNoEditor').each(function () { - if ($.inArray($(this).attr('id'), notIncludedRte) < 0) { - notIncludedRte.splice(0, 0, $(this).attr('id')); - } - }); - } - else { - $(event.target).find('.mceNoEditor').each(function () { - if ($.inArray($(this).attr('id'), notIncludedRte) < 0) { - notIncludedRte.splice(0, 0, $(this).attr('id')); - } - }); - } - - }, - - start: function (e, ui) { - ui.item.find('.mceNoEditor').each(function () { - notIncludedRte = [] - tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id')) - }); - }, - - stop: function (e, ui) { - ui.item.parents(".usky-cell").find('.mceNoEditor').each(function () { - if ($.inArray($(this).attr('id'), notIncludedRte) < 0) { - notIncludedRte.splice(0, 0, $(this).attr('id')); - } - }); - $timeout(function () { - _.forEach(notIncludedRte, function (id) { - tinyMCE.execCommand('mceRemoveEditor', false, id); - tinyMCE.execCommand('mceAddEditor', false, id); - console.info("stop " + id); - }); - }, 500, false); - } - - } - - // ********************************************* - // Add items overlay menu - // ********************************************* - $scope.overlayMenu = { - show: false, - style: {}, - area: undefined, - key: undefined - }; - - $scope.addItemOverlay = function(event, area, index, key){ - $scope.overlayMenu.area = area; - $scope.overlayMenu.index = index; - $scope.overlayMenu.style = {}; - $scope.overlayMenu.key = key; - - //todo calculate position... - var offset = $(event.target).offset(); - var height = $(window).height(); - var width = $(window).width(); - - if((height-offset.top) < 250){ - $scope.overlayMenu.style.bottom = 0; - $scope.overlayMenu.style.top = "initial"; - }else if(offset.top < 300){ - $scope.overlayMenu.style.top = 190; - } - - $scope.overlayMenu.show = true; - }; - - $scope.closeItemOverlay = function(){ - $scope.currentControl = undefined; - $scope.overlayMenu.show = false; - $scope.overlayMenu.key = undefined; - }; - - // ********************************************* - // Template management functions - // ********************************************* - - $scope.addTemplate = function (template) { - $scope.model.value = angular.copy(template); - - //default row data - _.forEach($scope.model.value.sections, function(section){ - $scope.initSection(section); - }); - }; - - - // ********************************************* - // Row management function - // ********************************************* - - $scope.setCurrentRow = function (row) { - $scope.currentRow = row; - }; - - $scope.disableCurrentRow = function () { - $scope.currentRow = null; - }; - - $scope.setCurrentMovedRow = function (Row) { - $scope.currentRow = null; - $scope.currentRemoveControl = null; - $scope.currentMovedRow = Row; - }; - - $scope.disableCurrentMovedRow = function (Row) { - $scope.currentMovedRow = null; - }; - - $scope.getAllowedLayouts = function(column){ - var layouts = $scope.model.config.items.layouts; - - if(column.allowed && column.allowed.length > 0){ - return _.filter(layouts, function(layout){ - return _.indexOf(column.allowed, layout.name) >= 0; - }); - }else{ - return layouts; - } - }; - - $scope.addRow = function (section, layout) { - //copy the selected layout into the rows collection - var row = angular.copy(layout); - row = $scope.initRow(row); - - if(row){ - section.rows.push(row); - } - }; - - $scope.removeRow = function (section, $index) { - if (section.rows.length > 0) { - section.rows.splice($index, 1); - $scope.openRTEToolbarId = null; - - $scope.initContent(); - } - }; - - - // ********************************************* - // Cell management functions - // ********************************************* - - $scope.setCurrentCell = function (cell) { - $scope.currentCell = cell; - }; - - $scope.disableCurrentCell = function (cell) { - $scope.currentCell = null; - }; - - $scope.cellPreview = function(cell){ - if(cell && cell.$allowedEditors){ - var editor = cell.$allowedEditors[0]; - return editor.icon; - }else{ - return "icon-layout"; - } - }; - - - - - // ********************************************* - // Control management functions - // ********************************************* - $scope.setCurrentControl = function (Control) { - $scope.currentControl = Control; - }; - - $scope.disableCurrentControl = function (Control) { - $scope.currentControl = null; - }; - - $scope.setCurrentToolsControl = function (Control) { - $scope.currentToolsControl = Control; - }; - - $scope.disableCurrentToolsControl = function (Control) { - $scope.currentToolsControl = null; - }; - - $scope.setCurrentRemoveControl = function (Control) { - $scope.currentRemoveControl = Control; - }; - - $scope.disableCurrentRemoveControl = function (Control) { - $scope.currentRemoveControl = null; - }; - - $scope.setCurrentMovedControl = function (Control) { - $scope.currentRow = null; - $scope.currentRemoveControl = null; - $scope.currentMovedControl = Control; - }; - - $scope.disableCurrentMovedControl = function (Control) { - $scope.currentMovedControl = null; - }; - - $scope.setUniqueId = function (cell, index) { - return guid(); - }; - - var guid = (function () { - function s4() { - return Math.floor((1 + Math.random()) * 0x10000) - .toString(16) - .substring(1); - } - return function () { - return s4() + s4() + '-' + s4() + '-' + s4() + '-' + - s4() + '-' + s4() + s4() + s4(); - }; - })(); - - $scope.addControl = function (editor, cell, index){ - $scope.closeItemOverlay(); - - var newControl = { - value: null, - editor: editor - }; - - if (index === undefined) { - index = cell.controls.length; - } - - //populate control - $scope.initControl(newControl, index+1); - - cell.controls.splice(index + 1, 0, newControl); - }; - - $scope.addTinyMce = function(cell){ - var rte = $scope.getEditor("rte"); - $scope.addControl(rte, cell); - }; - - $scope.getEditor = function(alias){ - return _.find($scope.availableEditors, function(editor){return editor.alias === alias}); - }; - - $scope.removeControl = function (cell, $index) { - cell.controls.splice($index, 1); - }; - - $scope.percentage = function(spans){ - return ((spans/12)*100).toFixed(1); - }; - - - - - - - - - // ********************************************* - // INITIALISATION - // these methods are called from ng-init on the template - // so we can controll their first load data - // - // intialisation sets non-saved data like percentage sizing, allowed editors and - // other data that should all be pre-fixed with $ to strip it out on save - // ********************************************* - - // ********************************************* - // Init template + sections - // ********************************************* - $scope.initContent = function() { - var clear = true; - - if ($scope.model.value && $scope.model.value.sections && $scope.model.value.sections.length > 0) { - _.forEach($scope.model.value.sections, function(section){ - - $scope.initSection(section); - - //we do this to ensure that the grid can be reset by deleting the last row - if(section.rows.length > 0){ - clear = false; - } - }); - } - - if(clear){ - $scope.model.value = undefined; - } - }; - - $scope.initSection = function(section){ - section.$percentage = $scope.percentage(section.grid); - - var layouts = $scope.model.config.items.layouts; - - if(section.allowed && section.allowed.length > 0){ - section.$allowedLayouts = _.filter(layouts, function(layout){ - return _.indexOf(section.allowed, layout.name) >= 0; - }); - }else{ - section.$allowedLayouts = layouts; - } - - if(!section.rows){ - section.rows = []; - }else{ - _.forEach(section.rows, function(row, index){ - if(!row.$initialized){ - var initd = $scope.initRow(row); - //if init fails, remove - if(!initd){ - section.rows.splic(index, 1); - }else{ - section.rows[index] = initd; - } - } - }); - } - }; - - - // ********************************************* - // Init layout / row - // ********************************************* - $scope.initRow = function(row){ - - //merge the layout data with the original config data - //if there are no config info on this, splice it out - var original = _.find($scope.model.config.items.layouts, function(o){ return o.name === row.name; }); - if(!original){ - return null; - }else{ - //make a copy to not touch the original config - original = angular.copy(original); - - //sync area configuration - _.each(original.areas, function(area, areaIndex){ - //copy over existing controls into the new areas - if(row.areas.length > areaIndex && row.areas[areaIndex].controls){ - area.controls = row.areas[areaIndex].controls; - - _.forEach(area.controls, function(control, controlIndex){ - $scope.initControl(control, controlIndex); - }); - - }else{ - area.controls = []; - } - - //set width - area.$percentage = $scope.percentage(area.grid); - area.$uniqueId = $scope.setUniqueId(); - - //set editor permissions - if(!area.allowed || area.allowAll === true){ - area.$allowedEditors = $scope.availableEditors; - area.$allowsRTE = true; - }else{ - area.$allowedEditors = _.filter($scope.availableEditors, function(editor){ - return _.indexOf(area.allowed, editor.alias) >= 0; - }); - - if(_.indexOf(area.allowed,"rte")>=0){ - area.$allowsRTE = true; - } - } - }); - - //replace the old row - original.$initialized = true; - - //set a disposable unique ID - original.$uniqueId = $scope.setUniqueId(); - return original; - } - - }; - - - - // ********************************************* - // Init control - // ********************************************* - - $scope.initControl = function(control, index){ - control.$index = index; - control.$uniqueId = $scope.setUniqueId(); - - if(!control.$editorPath){ - //if its a path - if(_.indexOf(control.editor.view, "/") >= 0){ - control.$editorPath = control.editor.view; - }else{ - //use convention - control.$editorPath = "views/propertyeditors/grid/editors/" + control.editor.view + ".html"; - } - } - }; - - - gridService.getGridEditors().then(function(response){ - $scope.availableEditors = response.data; - - $scope.contentReady = true; - - // ********************************************* - // Init grid - // ********************************************* - $scope.initContent(); - - }); - }); \ No newline at end of file +angular.module("umbraco") + .controller("Umbraco.PropertyEditors.CanvasController", + function ($scope, $http, assetsService, $rootScope, dialogService, canvasService, mediaResource, imageHelper, $timeout) { + + // Canvas status variables + $scope.currentRow = null; + $scope.currentCell = null; + $scope.currentToolsControl = null; + $scope.currentControl = null; + $scope.openRTEToolbarId = null; + + + // ********************************************* + // Sortable options + // ********************************************* + + $scope.sortableOptions = { + distance: 10, + cursor: "move", + placeholder: 'ui-sortable-placeholder', + handle: '.cell-tools-move', + forcePlaceholderSize: true, + tolerance: "pointer", + zIndex: 999999999999999999, + scrollSensitivity: 100, + cursorAt: { + top: 45, + left: 90 + }, + + start: function (e, ui) { + ui.item.find('.mceNoEditor').each(function () { + tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id')); + }); + }, + + stop: function (e, ui) { + ui.item.parents(".usky-column").find('.mceNoEditor').each(function () { + tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id')); + tinyMCE.execCommand('mceAddEditor', false, $(this).attr('id')); + }); + } + + }; + + var notIncludedRte = []; + var cancelMove = false; + + $scope.sortableOptionsCell = { + + distance: 10, + cursor: "move", + placeholder: "ui-sortable-placeholder", + handle: '.cell-tools-move', + connectWith: ".usky-cell", + forcePlaceholderSize: true, + tolerance:"pointer", + zIndex: 999999999999999999, + scrollSensitivity: 100, + cursorAt: { + top: 45, + left: 90 + }, + + over: function (event, ui) { + allowedEditors = $(event.target).scope().area.allowed; + + if ($.inArray(ui.item.scope().control.editor.alias, allowedEditors) < 0 && allowedEditors) { + ui.placeholder.hide(); + cancelMove = true; + } + else { + ui.placeholder.show(); + cancelMove = false; + } + + }, + + update: function (event, ui) { + if (!ui.sender) { + if (cancelMove) { + ui.item.sortable.cancel(); + } + ui.item.parents(".usky-cell").find('.mceNoEditor').each(function () { + if ($.inArray($(this).attr('id'), notIncludedRte) < 0) { + notIncludedRte.splice(0, 0, $(this).attr('id')); + } + }); + } + else { + $(event.target).find('.mceNoEditor').each(function () { + if ($.inArray($(this).attr('id'), notIncludedRte) < 0) { + notIncludedRte.splice(0, 0, $(this).attr('id')); + } + }); + } + + }, + + start: function (e, ui) { + ui.item.find('.mceNoEditor').each(function () { + notIncludedRte = [] + tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id')) + }); + }, + + stop: function (e, ui) { + ui.item.parents(".usky-cell").find('.mceNoEditor').each(function () { + if ($.inArray($(this).attr('id'), notIncludedRte) < 0) { + notIncludedRte.splice(0, 0, $(this).attr('id')); + } + }); + $timeout(function () { + _.forEach(notIncludedRte, function (id) { + tinyMCE.execCommand('mceRemoveEditor', false, id); + tinyMCE.execCommand('mceAddEditor', false, id); + console.info("stop " + id); + }); + }, 500, false); + } + + } + + // ********************************************* + // Add items overlay menu + // ********************************************* + $scope.overlayMenu = { + show: false, + style: {}, + area: undefined, + key: undefined + }; + + $scope.addItemOverlay = function(event, area, index, key){ + $scope.overlayMenu.area = area; + $scope.overlayMenu.index = index; + $scope.overlayMenu.style = {}; + $scope.overlayMenu.key = key; + + //todo calculate position... + var offset = $(event.target).offset(); + var height = $(window).height(); + var width = $(window).width(); + + if((height-offset.top) < 250){ + $scope.overlayMenu.style.bottom = 0; + $scope.overlayMenu.style.top = "initial"; + }else if(offset.top < 300){ + $scope.overlayMenu.style.top = 190; + } + + $scope.overlayMenu.show = true; + }; + + $scope.closeItemOverlay = function(){ + $scope.currentControl = undefined; + $scope.overlayMenu.show = false; + $scope.overlayMenu.key = undefined; + }; + + // ********************************************* + // Template management functions + // ********************************************* + + $scope.addTemplate = function (template) { + $scope.model.value = angular.copy(template); + + //default row data + _.forEach($scope.model.value.sections, function(section){ + $scope.initSection(section); + }); + }; + + + // ********************************************* + // Row management function + // ********************************************* + + $scope.setCurrentRow = function (row) { + $scope.currentRow = row; + }; + + $scope.disableCurrentRow = function () { + $scope.currentRow = null; + }; + + $scope.setCurrentMovedRow = function (Row) { + $scope.currentRow = null; + $scope.currentRemoveControl = null; + $scope.currentMovedRow = Row; + }; + + $scope.disableCurrentMovedRow = function (Row) { + $scope.currentMovedRow = null; + }; + + $scope.getAllowedLayouts = function(column){ + var layouts = $scope.model.config.items.layouts; + + if(column.allowed && column.allowed.length > 0){ + return _.filter(layouts, function(layout){ + return _.indexOf(column.allowed, layout.name) >= 0; + }); + }else{ + return layouts; + } + }; + + $scope.addRow = function (section, layout) { + //copy the selected layout into the rows collection + var row = angular.copy(layout); + row = $scope.initRow(row); + + if(row){ + section.rows.push(row); + } + }; + + $scope.removeRow = function (section, $index) { + if (section.rows.length > 0) { + section.rows.splice($index, 1); + $scope.openRTEToolbarId = null; + + $scope.initContent(); + } + }; + + + // ********************************************* + // Cell management functions + // ********************************************* + + $scope.setCurrentCell = function (cell) { + $scope.currentCell = cell; + }; + + $scope.disableCurrentCell = function (cell) { + $scope.currentCell = null; + }; + + $scope.cellPreview = function(cell){ + if(cell && cell.$allowedEditors){ + var editor = cell.$allowedEditors[0]; + return editor.icon; + }else{ + return "icon-layout"; + } + }; + + + + + // ********************************************* + // Control management functions + // ********************************************* + $scope.setCurrentControl = function (Control) { + $scope.currentControl = Control; + }; + + $scope.disableCurrentControl = function (Control) { + $scope.currentControl = null; + }; + + $scope.setCurrentToolsControl = function (Control) { + $scope.currentToolsControl = Control; + }; + + $scope.disableCurrentToolsControl = function (Control) { + $scope.currentToolsControl = null; + }; + + $scope.setCurrentRemoveControl = function (Control) { + $scope.currentRemoveControl = Control; + }; + + $scope.disableCurrentRemoveControl = function (Control) { + $scope.currentRemoveControl = null; + }; + + $scope.setCurrentMovedControl = function (Control) { + $scope.currentRow = null; + $scope.currentRemoveControl = null; + $scope.currentMovedControl = Control; + }; + + $scope.disableCurrentMovedControl = function (Control) { + $scope.currentMovedControl = null; + }; + + $scope.setUniqueId = function (cell, index) { + return guid(); + }; + + var guid = (function () { + function s4() { + return Math.floor((1 + Math.random()) * 0x10000) + .toString(16) + .substring(1); + } + return function () { + return s4() + s4() + '-' + s4() + '-' + s4() + '-' + + s4() + '-' + s4() + s4() + s4(); + }; + })(); + + $scope.addControl = function (editor, cell, index){ + $scope.closeItemOverlay(); + + var newControl = { + value: null, + editor: editor + }; + + if (index === undefined) { + index = cell.controls.length; + } + + //populate control + $scope.initControl(newControl, index+1); + + cell.controls.splice(index + 1, 0, newControl); + }; + + $scope.addTinyMce = function(cell){ + var rte = $scope.getEditor("rte"); + $scope.addControl(rte, cell); + }; + + $scope.getEditor = function(alias){ + return _.find($scope.availableEditors, function(editor){return editor.alias === alias}); + }; + + $scope.removeControl = function (cell, $index) { + cell.controls.splice($index, 1); + }; + + $scope.percentage = function(spans){ + return ((spans/12)*100).toFixed(1); + }; + + + + + + + + + // ********************************************* + // INITIALISATION + // these methods are called from ng-init on the template + // so we can controll their first load data + // + // intialisation sets non-saved data like percentage sizing, allowed editors and + // other data that should all be pre-fixed with $ to strip it out on save + // ********************************************* + + // ********************************************* + // Init template + sections + // ********************************************* + $scope.initContent = function() { + var clear = true; + + if ($scope.model.value && $scope.model.value.sections && $scope.model.value.sections.length > 0) { + _.forEach($scope.model.value.sections, function(section){ + + $scope.initSection(section); + + //we do this to ensure that the grid can be reset by deleting the last row + if(section.rows.length > 0){ + clear = false; + } + }); + } + + if(clear){ + $scope.model.value = undefined; + } + }; + + $scope.initSection = function(section){ + section.$percentage = $scope.percentage(section.grid); + + var layouts = $scope.model.config.items.layouts; + + if(section.allowed && section.allowed.length > 0){ + section.$allowedLayouts = _.filter(layouts, function(layout){ + return _.indexOf(section.allowed, layout.name) >= 0; + }); + }else{ + section.$allowedLayouts = layouts; + } + + if(!section.rows){ + section.rows = []; + }else{ + _.forEach(section.rows, function(row, index){ + if(!row.$initialized){ + var initd = $scope.initRow(row); + //if init fails, remove + if(!initd){ + section.rows.splic(index, 1); + }else{ + section.rows[index] = initd; + } + } + }); + } + }; + + + // ********************************************* + // Init layout / row + // ********************************************* + $scope.initRow = function(row){ + + //merge the layout data with the original config data + //if there are no config info on this, splice it out + var original = _.find($scope.model.config.items.layouts, function(o){ return o.name === row.name; }); + if(!original){ + return null; + }else{ + //make a copy to not touch the original config + original = angular.copy(original); + + //sync area configuration + _.each(original.areas, function(area, areaIndex){ + //copy over existing controls into the new areas + if(row.areas.length > areaIndex && row.areas[areaIndex].controls){ + area.controls = row.areas[areaIndex].controls; + + _.forEach(area.controls, function(control, controlIndex){ + $scope.initControl(control, controlIndex); + }); + + }else{ + area.controls = []; + } + + //set width + area.$percentage = $scope.percentage(area.grid); + area.$uniqueId = $scope.setUniqueId(); + + //set editor permissions + if(!area.allowed || area.allowAll === true){ + area.$allowedEditors = $scope.availableEditors; + area.$allowsRTE = true; + }else{ + area.$allowedEditors = _.filter($scope.availableEditors, function(editor){ + return _.indexOf(area.allowed, editor.alias) >= 0; + }); + + if(_.indexOf(area.allowed,"rte")>=0){ + area.$allowsRTE = true; + } + } + }); + + //replace the old row + original.$initialized = true; + + //set a disposable unique ID + original.$uniqueId = $scope.setUniqueId(); + return original; + } + + }; + + + + // ********************************************* + // Init control + // ********************************************* + + $scope.initControl = function(control, index){ + control.$index = index; + control.$uniqueId = $scope.setUniqueId(); + + if(!control.$editorPath){ + //if its a path + if(_.indexOf(control.editor.view, "/") >= 0){ + control.$editorPath = control.editor.view; + }else{ + //use convention + control.$editorPath = "views/propertyeditors/canvas/editors/" + control.editor.view + ".html"; + } + } + }; + + + canvasService.getGridEditors().then(function(response){ + $scope.availableEditors = response.data; + + $scope.contentReady = true; + + // ********************************************* + // Init grid + // ********************************************* + $scope.initContent(); + + }); + }); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/canvas.html similarity index 95% rename from src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html rename to src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/canvas.html index 9cb1371b87..fec08844aa 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/canvas.html @@ -1,252 +1,252 @@ -
- -
- -
-
-
-
-
-
-
-
-
-
-
- -
-
To start, select a layout for your grid
-
-
-
- - - -
-
- - -
- -
- - -
- - -
- - -
-
- - - Are you sure? - Yes - - - -
-
- -
-
- -
-
-
- - -
-
-
-
- - -
- - -
- -
- -
- To start, click the - below and add your first {{singleEditor.name}} -

- -
- - - -
-
- - -
- -
- To start, click the - below and add your first element -

- - -
- -
- - - -
- -
- -
-
- -
- - -
- - -
- - -
-
- - - Are you sure? - Yes - - - -
-
- - -
-
- -
-
- -
- -
- -
-
-
- - -
- -
- - - -
- -
-
- -
- - -
- -
-
-
-
- - -
- - -
- - -
- -
-
-
    -
  • -
    -
    -
    - -
    -
    -
    - {{layout.name}} -
    • -
- -
-
-
-
-
- Add rows to your layout -
-
-
- - -
- -
-
-
- -
\ No newline at end of file +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
To start, select a layout for your grid
+
+
+
+ + + +
+
+ + +
+ +
+ + +
+ + +
+ + +
+
+ + + Are you sure? + Yes + + + +
+
+ +
+
+ +
+
+
+ + +
+
+
+
+ + +
+ + +
+ +
+ +
+ To start, click the + below and add your first {{singleEditor.name}} +

+ +
+ + + +
+
+ + +
+ +
+ To start, click the + below and add your first element +

+ + +
+ +
+ + + +
+ +
+ +
+
+ +
+ + +
+ + +
+ + +
+
+ + + Are you sure? + Yes + + + +
+
+ + +
+
+ +
+
+ +
+ +
+ +
+
+
+ + +
+ +
+ + + +
+ +
+
+ +
+ + +
+ +
+
+
+
+ + +
+ + +
+ + +
+ +
+
+
    +
  • +
    +
    +
    + +
    +
    +
    + {{layout.name}} +
    • +
+ +
+
+
+
+
+ Add rows to your layout +
+
+
+ + +
+ +
+
+
+ +
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/canvas.prevalues.controller.js similarity index 90% rename from src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js rename to src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/canvas.prevalues.controller.js index 5777a28f7c..8105ad0e99 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/canvas.prevalues.controller.js @@ -1,11 +1,12 @@ angular.module("umbraco") - .controller("Umbraco.PropertyEditors.GridPrevalueEditorController", - function ($scope, $http, assetsService, $rootScope, dialogService, mediaResource, gridService, imageHelper, $timeout) { + .controller("Umbraco.PropertyEditors.CanvasPrevalueEditorController", + function ($scope, $http, assetsService, $rootScope, dialogService, mediaResource, canvasService, imageHelper, $timeout) { var emptyModel = { + columns: 12, templates:[ { - name: "1 column", + name: "1 column layout", sections: [ { grid: 12, @@ -13,7 +14,7 @@ angular.module("umbraco") ] }, { - name: "2 column", + name: "2 column layout", sections: [ { grid: 4, @@ -22,17 +23,6 @@ angular.module("umbraco") grid: 8 } ] - }, - { - name: "2 column reversed", - sections: [ - { - grid: 8, - }, - { - grid: 4 - } - ] } ], @@ -206,7 +196,7 @@ angular.module("umbraco") } } $scope.percentage = function(spans){ - return ((spans/12)*100).toFixed(1); + return ((spans / $scope.model.value.columns) * 100).toFixed(1); }; /**************** @@ -218,7 +208,7 @@ angular.module("umbraco") _.forEach(template.sections, function(section){ total = (total + section.grid); }); - $scope.availableTemplateSpace = 12 - total; + $scope.availableTemplateSpace = $scope.model.value.columns - total; } }, true); @@ -228,7 +218,7 @@ angular.module("umbraco") _.forEach(layout.areas, function(area){ total = (total + area.grid); }); - $scope.availableLayoutSpace = 12 - total; + $scope.availableLayoutSpace = $scope.model.value.columns - total; } }, true); @@ -236,13 +226,18 @@ angular.module("umbraco") /**************** editors *****************/ - gridService.getGridEditors().then(function(response){ + canvasService.getGridEditors().then(function(response){ $scope.editors = response.data; }); + /* init grid data */ if (!$scope.model.value || $scope.model.value === "" || !$scope.model.value.templates) { $scope.model.value = emptyModel; + } else { + if (!$scope.model.value.columns) { + $scope.model.value.columns = emptyModel.columns; + } } }) \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/canvas.prevalues.html similarity index 84% rename from src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html rename to src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/canvas.prevalues.html index 38f23fc4fc..2a1ba5458b 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/canvas.prevalues.html @@ -1,10 +1,10 @@ -
+
- +
- +

- - @@ -49,12 +47,12 @@
@@ -165,9 +164,9 @@
-
@@ -189,17 +188,17 @@
{{layout.name}}
- {{layout.areas.length}} configurable areas
- Delete layout + {{layout.areas.length}} columns
+ Delete row

- +
@@ -207,28 +206,28 @@ \ No newline at end of file +
+ + + +
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/config/grid.default.config.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/config/canvas.default.config.js similarity index 100% rename from src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/config/grid.default.config.js rename to src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/config/canvas.default.config.js diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/config/grid.default.rtestyles.css b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/config/canvas.default.rtestyles.css similarity index 100% rename from src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/config/grid.default.rtestyles.css rename to src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/config/canvas.default.rtestyles.css diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/additem.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/dialogs/additem.html similarity index 100% rename from src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/additem.html rename to src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/dialogs/additem.html diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/embed.controller.js similarity index 85% rename from src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.controller.js rename to src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/embed.controller.js index fc1133dfcf..a36aada286 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/embed.controller.js @@ -1,7 +1,7 @@ angular.module("umbraco") - .controller("Umbraco.PropertyEditors.Grid.EmbedController", + .controller("Umbraco.PropertyEditors.Canvas.EmbedController", function ($scope, $rootScope, $timeout, dialogService) { - + $scope.setEmbed = function(){ dialogService.embedDialog({ callback: function (data) { @@ -15,4 +15,4 @@ angular.module("umbraco") $scope.setEmbed(); } }, 200); -}); \ No newline at end of file +}); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/embed.html similarity index 77% rename from src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.html rename to src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/embed.html index f9d7abffa0..c74d342d75 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/embed.html @@ -1,4 +1,4 @@ -
+
@@ -6,4 +6,4 @@
-
\ No newline at end of file +
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/macro.controller.js similarity index 93% rename from src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.controller.js rename to src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/macro.controller.js index b30af21cc2..0716477627 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/macro.controller.js @@ -1,7 +1,7 @@ angular.module("umbraco") - .controller("Umbraco.PropertyEditors.Grid.MacroController", + .controller("Umbraco.PropertyEditors.Canvas.MacroController", function ($scope, $rootScope, $timeout, dialogService, macroResource, macroService, $routeParams) { - + $scope.title = "Click to insert macro"; $scope.setMacro = function(){ dialogService.macroPicker({ @@ -12,7 +12,7 @@ angular.module("umbraco") macroAlias: data.macroAlias, macroParamsDictionary: data.macroParamsDictionary }; - + $scope.setPreview(data); } }); @@ -39,4 +39,4 @@ angular.module("umbraco") $scope.setPreview(parsed); } }, 200); -}); \ No newline at end of file +}); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/macro.html similarity index 52% rename from src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.html rename to src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/macro.html index 0993de8ea0..9a384e5975 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/macro.html @@ -1,16 +1,16 @@ -
+
-
+
{{title}}
-
-
\ No newline at end of file +
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/media.controller.js similarity index 88% rename from src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.controller.js rename to src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/media.controller.js index 2709985608..59caaf12c9 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/media.controller.js @@ -1,7 +1,7 @@ angular.module("umbraco") - .controller("Umbraco.PropertyEditors.Grid.MediaController", + .controller("Umbraco.PropertyEditors.Canvas.MediaController", function ($scope, $rootScope, $timeout, dialogService) { - + $scope.setImage = function(){ dialogService.mediaPicker({ multiPicker: false, @@ -20,4 +20,4 @@ angular.module("umbraco") $scope.setImage(); } }, 200); -}); \ No newline at end of file +}); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/media.html similarity index 86% rename from src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.html rename to src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/media.html index 6177760d18..7f1a240ffb 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/media.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/rte.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/rte.html new file mode 100644 index 0000000000..947b127bb1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/rte.html @@ -0,0 +1,8 @@ +
+ + hey + +
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/textstring.controller.js similarity index 84% rename from src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.controller.js rename to src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/textstring.controller.js index 1cac11861f..a31e1f5f90 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/textstring.controller.js @@ -1,7 +1,7 @@ angular.module("umbraco") - .controller("Umbraco.PropertyEditors.Grid.TextStringController", + .controller("Umbraco.PropertyEditors.Canvas.TextStringController", function ($scope, $rootScope, $timeout, dialogService) { - + $scope.adjustSize = function(ev){ if(ev.target.scrollHeight > ev.target.clientHeight){ $(ev.target).height(ev.target.scrollHeight); @@ -14,4 +14,4 @@ angular.module("umbraco") }, 200); } - }); \ No newline at end of file + }); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/textstring.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/textstring.html new file mode 100644 index 0000000000..98031a9388 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/editors/textstring.html @@ -0,0 +1,6 @@ +
+ +
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/rte.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/rte.html deleted file mode 100644 index 708cd9071d..0000000000 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/rte.html +++ /dev/null @@ -1,4 +0,0 @@ -
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.html deleted file mode 100644 index b16c7f0167..0000000000 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.html +++ /dev/null @@ -1,6 +0,0 @@ -
- -
\ No newline at end of file diff --git a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj index dc49796c2e..64546d9a01 100644 --- a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj +++ b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj @@ -537,7 +537,7 @@ treeInit.aspx - + @@ -2073,13 +2073,13 @@ Designer - - - - - - - + + + + + + + Web.Template.config diff --git a/src/Umbraco.Web.UI/Umbraco/js/canvasdesigner.config.js b/src/Umbraco.Web.UI/Umbraco/js/canvasdesigner.config.js new file mode 100644 index 0000000000..6ef97529ee --- /dev/null +++ b/src/Umbraco.Web.UI/Umbraco/js/canvasdesigner.config.js @@ -0,0 +1,318 @@ + +/*********************************************************************************************************/ +/* Tuning setting panel config */ +/*********************************************************************************************************/ + +var tuningConfig = { + configs: [{ + name: "Body", + schema: "body", + selector: "body", + editors: [ + { + type: "wide", + category: "Dimension", + name: "Layout" + }, + { + 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" + }, + ] + } +] +}; + diff --git a/src/Umbraco.Web.UI/Umbraco/js/canvasdesigner.front.js b/src/Umbraco.Web.UI/Umbraco/js/canvasdesigner.front.js new file mode 100644 index 0000000000..7f13f6e940 --- /dev/null +++ b/src/Umbraco.Web.UI/Umbraco/js/canvasdesigner.front.js @@ -0,0 +1,280 @@ +/*********************************************************************************************************/ +/* Global function and variable for panel/page com */ +/*********************************************************************************************************/ + +var currentTarget = undefined; + +var refrechLayout = function (parameters) { + + // hide preview badget + $("#umbracoPreviewBadge").hide(); + + var string = "less.modifyVars({" + parameters.join(",") + "})"; + eval(string); +} + +/* Fonts loaded in the tuning panel need to be loaded independently in + * the content iframe to allow live previewing. + */ +var webFontScriptLoaded = false; +var getFont = function (font) { + if (!webFontScriptLoaded) { + $.getScript('http://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 () { + //console.log('loading font' + font + ' in iframe'); + }, + active: function () { + //console.log('loaded font ' + font + ' in iframe'); + }, + inactive: function () { + //console.log('error loading font ' + font + ' in iframe'); + } + }); + } +} + +var closeIntelTuning = function (tuningModel) { + + if (tuningModel) { + + $.each(tuningModel.configs, function (indexConfig, config) { + if (config.schema) { + $(config.schema).unbind(); + $(config.schema).removeAttr("tuning-over"); + } + }); + + initBodyClickEvent(); + + } + +} + +var initBodyClickEvent = function () { + $("body").on("click", function () { + if (parent.iframeBodyClick) { + parent.iframeBodyClick(); + } + }); +} + +var initIntelTuning = function (tuningModel) { + + if (tuningModel) { + + // Add tuning-over attr for each schema from config + $.each(tuningModel.configs, function (indexConfig, config) { + var schema = config.selector ? config.selector : config.schema; + if (schema) { + $(schema).attr("tuning-over", config.name); + $(schema).css("cursor", "default"); + } + }); + + // Outline tuning-over + $(document).mousemove(function (e) { + + e.stopPropagation(); + + var target = $(e.target); + while (target.length > 0 && (target.attr('tuning-over') == undefined || target.attr('tuning-over') == '')) { + target = target.parent(); + } + + if (target.attr('tuning-over') != undefined && target.attr('tuning-over') != '') { + target.unbind(); + outlinePosition(target); + target.click(function (e) { + e.stopPropagation(); + e.preventDefault(); + //console.info(target.attr('tuning-over')); + + currentTarget = target; + outlineSelected(); + + parent.refrechIntelTuning(target.attr('tuning-over'), target); + return false; + }); + } + else { + outlinePositionHide(); + } + }); + + } + +} + +var outlinePosition = function (target) { + + if (target.length > 0 && target.attr('tuning-over') != undefined && target.attr('tuning-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(); + + $(".tuning-overlay").css('display', 'block'); + $(".tuning-overlay").css('left', posX); + $(".tuning-overlay").css('top', posY); + $(".tuning-overlay").css('width', width + "px"); + $(".tuning-overlay").css('height', height + "px"); + + //console.info("element select " + localname); + $(".tuning-overlay span").html(target.attr('tuning-over')); + + } + else { + outlinePositionHide(); + //console.info("element not found select"); + } +} + +var outlineSelected = function () { + + var target = currentTarget; + + if (target && target.length > 0 && target.attr('tuning-over') != undefined && target.attr('tuning-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(); + + $(".tuning-overlay-selected").css('display', 'block'); + $(".tuning-overlay-selected").css('left', posX); + $(".tuning-overlay-selected").css('top', posY); + $(".tuning-overlay-selected").css('width', width + "px"); + $(".tuning-overlay-selected").css('height', height + "px"); + + //console.info("element select " + localname); + $(".tuning-overlay-selected span").html(target.attr('tuning-over')); + + } + else { + outlinePositionHide(); + //console.info("element not found select"); + } + +} + +var outlinePositionHide = function () { + $(".tuning-overlay").css('display', "none"); +} + +var outlineSelectedHide = function () { + currentTarget = undefined; + $(".tuning-overlay-selected").css('display', "none"); +} + +var initTuningPanel = function () { + + // First load the tuning config from file + if (tuningConfig) { + //console.info("Tuning config from file is loaded"); + } + else { + //console.info("tuning config not found"); + } + + // Add tuning from HTML 5 data tags + $("[data-tuning]").each(function (index, value) { + var tagName = $(value).data("tuning") ? $(value).data("tuning") : $(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(...); + + tuningConfig.configs.splice(tuningConfig.configs.length, 0, { + name: tagName, + schema: tagSchema, + selector: tagSelector, + editors: tagEditors + }); + }); + //console.info("HTML5 tags"); + + // For each editor config create a composite alias + $.each(tuningConfig.configs, function (configIndex, config) { + $.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; + }); + }); + //console.info("Alias tags"); + + // 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(tuningConfig), + pageId: pageId + }, + success: function (data) { + + // Add Less link in head + $("head").append(""); + css = $("head").children(":last"); + css.attr({ + rel: "stylesheet/less", + type: "text/css", + href: data + }); + //console.info("Less styles are loaded"); + + // Init Less.js + $.getScript("/Umbraco/lib/Less/less-1.7.0.min.js", function (data, textStatus, jqxhr) { + + // Init panel + if (parent.setFrameIsLoaded) { + parent.setFrameIsLoaded(tuningConfig, tuningPalette); + } + }); + } + }); + +} + +$(function () { + + if (parent.setFrameIsLoaded) { + + // Overlay background-color: rgba(28, 203, 255, 0.05); + $("body").append("
"); + $("body").append("
"); + + // Set event for any body click + initBodyClickEvent() + + // Init tuning panel + initTuningPanel(); + } + +}); diff --git a/src/Umbraco.Web.UI/Umbraco/js/canvasdesigner.loader.js b/src/Umbraco.Web.UI/Umbraco/js/canvasdesigner.loader.js new file mode 100644 index 0000000000..fa8dbdcaff --- /dev/null +++ b/src/Umbraco.Web.UI/Umbraco/js/canvasdesigner.loader.js @@ -0,0 +1,19 @@ +LazyLoad.js([ + '/Umbraco/lib/jquery/jquery-2.0.3.min.js', + '/Umbraco/lib/jquery/jquery-ui-1.10.4.custom.min.js', + '/Umbraco/lib/angular/1.1.5/angular.min.js', + '/Umbraco/lib/underscore/underscore.js', + '/Umbraco/js/app.js', + '/Umbraco/js/umbraco.resources.js', + '/Umbraco/js/umbraco.services.js', + '/Umbraco/js/umbraco.security.js', + '/Umbraco/ServerVariables', + '/Umbraco/lib/spectrum/spectrum.js', + 'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js', + '/umbraco/js/canvasdesigner.panel.js', +], function () { + jQuery(document).ready(function () { + angular.bootstrap(document, ['Umbraco.canvasdesigner']); + }); +} +); diff --git a/src/Umbraco.Web.UI/Umbraco/js/canvasdesigner.palettes.js b/src/Umbraco.Web.UI/Umbraco/js/canvasdesigner.palettes.js new file mode 100644 index 0000000000..ebe49966ab --- /dev/null +++ b/src/Umbraco.Web.UI/Umbraco/js/canvasdesigner.palettes.js @@ -0,0 +1,58 @@ + +/*********************************************************************************************************/ +/* Tuning palette tab config */ +/*********************************************************************************************************/ + +var tuningPalette = [ + + { + 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)" + } + } + +]; \ No newline at end of file diff --git a/src/Umbraco.Web.UI/Umbraco/js/canvasdesigner.panel.js b/src/Umbraco.Web.UI/Umbraco/js/canvasdesigner.panel.js new file mode 100644 index 0000000000..7f563ecf37 --- /dev/null +++ b/src/Umbraco.Web.UI/Umbraco/js/canvasdesigner.panel.js @@ -0,0 +1,1702 @@ + +/*********************************************************************************************************/ +/* Global function and variable for panel/page com */ +/*********************************************************************************************************/ + +/* Called for every tuning-over rollover */ +var refrechIntelTuning = function (name) { + + var scope = angular.element($("#tuningPanel")).scope(); + + if (scope.schemaFocus != name.toLowerCase()) { + + var notFound = true; + $.each(scope.tuningModel.configs, function (indexConfig, config) { + if (config.name && name.toLowerCase() == config.name.toLowerCase()) { + notFound = false + } + }); + + if (notFound) { + scope.schemaFocus = "body"; + } + else { + scope.schemaFocus = name.toLowerCase(); + } + + } + + scope.closeFloatPanels(); + + scope.$apply(); + +} + +/* Called when the iframe is first loaded */ +var setFrameIsLoaded = function (tuningConfig, tuningPalette) { + + var scope = angular.element($("#tuningPanel")).scope(); + + scope.tuningModel = tuningConfig; + scope.tuningPalette = tuningPalette; + scope.enableTuning++; + scope.$apply(); +} + +/* Iframe body click */ +var iframeBodyClick = function () { + + var scope = angular.element($("#tuningPanel")).scope(); + + scope.closeFloatPanels(); +} + + +/*********************************************************************************************************/ +/* tuning panel app and controller */ +/*********************************************************************************************************/ + +var app = angular.module("Umbraco.canvasdesigner", ['spectrumcolorpicker', 'ui.slider', 'umbraco.resources', 'umbraco.services']) + +.controller("Umbraco.canvasdesignerController", function ($scope, $http, $window, $timeout, $location, dialogService) { + + $scope.isOpen = false; + $scope.frameLoaded = false; + $scope.enableTuning = 0; + $scope.schemaFocus = "body"; + $scope.settingIsOpen = 'previewDevice'; + $scope.propertyCategories = []; + $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" }, + { name: "laptop - 1366px", css: "laptop border", icon: "icon-laptop" }, + { name: "iPad portrait - 768px", css: "iPad-portrait border", icon: "icon-ipad" }, + { name: "iPad landscape - 1024px", css: "iPad-landscape border", icon: "icon-ipad flip" }, + { name: "smartphone portrait - 480px", css: "smartphone-portrait border", icon: "icon-iphone" }, + { name: "smartphone landscape - 320px", css: "smartphone-landscape border", icon: "icon-iphone flip" } + ]; + $scope.previewDevice = $scope.devices[0]; + + var apiController = "/Umbraco/Api/CanvasDesigner/"; + + /*****************************************************************************/ + /* Preview devices */ + /*****************************************************************************/ + + // Set preview device + $scope.updatePreviewDevice = function (device) { + $scope.previewDevice = device; + }; + + /*****************************************************************************/ + /* UI designer managment */ + /*****************************************************************************/ + + // Update all tuningConfig's values from data + var updateConfigValue = function (data) { + + var fonts = []; + $.each($scope.tuningModel.configs, function (indexConfig, config) { + $.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 tuning config + $scope.initTuning = function () { + + $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 tuningModel + var refreshtuning = function () { + + var parameters = []; + + if ($scope.tuningModel) { + + angular.forEach($scope.tuningModel.configs, function (config, indexConfig) { + + // Get currrent selected element + if ($scope.schemaFocus && angular.lowercase($scope.schemaFocus) == angular.lowercase(config.name)) { + $scope.currentSelected = config.selector ? config.selector : config.schema; + } + + 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 + "'"); + }) + } + }) + }); + + // Refrech page style + refreshFrontStyles(parameters); + + // Refrech layout of selected element + if ($scope.currentSelected) { + setSelectedSchema(); + } + + } + } + + $scope.createStyle = function (){ + $scope.saveLessParameters(false); + } + + $scope.saveStyle = function () { + $scope.saveLessParameters(true); + } + + // Save all parameter in tuningParameters.less file + $scope.saveLessParameters = function (inherited) { + + var parameters = []; + $.each($scope.tuningModel.configs, function (indexConfig, config) { + $.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('http://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 tuning + $scope.deleteTuning = function () { + $('.btn-default-delete').attr("disabled", true); + $http.get(apiController + 'Delete', { params: { pageId: $scope.pageId } }) + .success(function (data) { + $scope.enableTuning++; + $scope.pageUrl = $scope.pageUrl + "&n=123456"; + $('.btn-default-delete').attr("disabled", false); + }) + } + + + /*****************************************************************************/ + /* Preset design */ + /*****************************************************************************/ + + // Refresh with selected tuning palette + $scope.refreshtuningByPalette = function (palette) { + updateConfigValue(palette.data); + refreshtuning(); + }; + + // Hidden botton to make preset from the current settings + $scope.makePreset = function () { + + var parameters = []; + $.each($scope.tuningModel.configs, function (indexConfig, config) { + $.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); + 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.closeIntelTuning(); + } + + $scope.closePreviewDevice = function(){ + $scope.showDevicesPreview = false; + if ($scope.showStyleEditor) { + $scope.openIntelTuning(); + } + } + + $scope.openPalettePicker = function () { + $scope.showPalettePicker = true; + $scope.showStyleEditor = false; + $scope.closeIntelTuning(); + }; + + $scope.openStyleEditor = function () { + $scope.showStyleEditor = true; + $scope.showPalettePicker = false; + $scope.openIntelTuning(); + }; + + // 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(); + }; + + /*****************************************************************************/ + /* Call function into the front-end */ + /*****************************************************************************/ + + var loadGoogleFontInFront = function (font) { + if (document.getElementById("resultFrame").contentWindow.getFont) + document.getElementById("resultFrame").contentWindow.getFont(font); + }; + + var setSelectedSchema = function () { + if (document.getElementById("resultFrame").contentWindow.outlineSelected) + document.getElementById("resultFrame").contentWindow.outlineSelected(); + }; + + var refreshFrontStyles = function (parameters) { + if (document.getElementById("resultFrame").contentWindow.refrechLayout) + document.getElementById("resultFrame").contentWindow.refrechLayout(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.openIntelTuning = function () { + if (document.getElementById("resultFrame").contentWindow.initIntelTuning) + document.getElementById("resultFrame").contentWindow.initIntelTuning($scope.tuningModel); + + // Refrech layout of selected element + if ($scope.currentSelected) { + setSelectedSchema(); + } + + }; + + $scope.closeIntelTuning = function () { + if (document.getElementById("resultFrame").contentWindow.closeIntelTuning) + document.getElementById("resultFrame").contentWindow.closeIntelTuning($scope.tuningModel); + $scope.outlineSelectedHide(); + }; + + $scope.outlineSelectedHide = function () { + if (document.getElementById("resultFrame").contentWindow.outlineSelectedHide) + document.getElementById("resultFrame").contentWindow.outlineSelectedHide(); + $scope.schemaFocus = "body"; + }; + + + + /*****************************************************************************/ + /* Google font loader, TODO: put together from directive, front and back */ + /*****************************************************************************/ + + var webFontScriptLoaded = false; + var loadGoogleFont = function (font) { + if (!webFontScriptLoaded) { + $.getScript('http://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 + $http.get(apiController + 'GetGoogleFont').success(function (data) { + $scope.googleFontFamilies = data; + }); + + // watch framLoaded, only if iframe page have EnableTuning() + $scope.$watch("enableTuning", function () { + $timeout(function () { + if ($scope.enableTuning > 0) { + + $.each($scope.tuningModel.configs, function (indexConfig, config) { + $.each(config.editors, function (indexItem, item) { + + /* get distinct dategoryies */ + if (item.category) { + if ($.inArray(item.category, $scope.propertyCategories) < 0) { + $scope.propertyCategories.splice($scope.propertyCategories.length + 1, 0, item.category); + } + } + + }); + }); + + $scope.$watch('ngRepeatFinished', function (ngRepeatFinishedEvent) { + $timeout(function () { + $scope.initTuning(); + }, 200); + }); + + $scope.$watch('tuningModel', function () { + refreshtuning(); + }, 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.refrechLayout) { + 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('tuning.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) { + // TODO, resolve with thumbnail + if (property.alias = "umbracoFile" && property.value.src) + { + child.thumbnail = property.value.src; + child.image = property.value.src; + } + }) + } + }); + + $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.bordercolor = $scope.selectedBorder.color; + $scope.item.values.bordertype =$scope.selectedBorder.type; + } + + if ($scope.selectedBorder.name == "left") { + $scope.item.values.leftbordersize = $scope.selectedBorder.size; + $scope.item.values.leftbordercolor = $scope.selectedBorder.color; + $scope.item.values.leftbordertype = $scope.selectedBorder.type; + } + + if ($scope.selectedBorder.name == "right") { + $scope.item.values.rightbordersize = $scope.selectedBorder.size; + $scope.item.values.rightbordercolor = $scope.selectedBorder.color; + $scope.item.values.rightbordertype = $scope.selectedBorder.type; + } + + if ($scope.selectedBorder.name == "top") { + $scope.item.values.topbordersize = $scope.selectedBorder.size; + $scope.item.values.topbordercolor = $scope.selectedBorder.color; + $scope.item.values.topbordertype = $scope.selectedBorder.type; + } + + if ($scope.selectedBorder.name == "bottom") { + $scope.item.values.bottombordersize = $scope.selectedBorder.size; + $scope.item.values.bottombordercolor = $scope.selectedBorder.color; + $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 + } + } + }; + + $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); + + 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, + }); + } + }); + + } + 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, $modal) { + + if (!$scope.item.values) { + $scope.item.values = { + color: '', + imageorpattern: '', + fullSize:false + }; + } + + // Open image picker modal + $scope.open = function (field) { + + $scope.data = { + newFolder: "", + modalField: field + }; + + var modalInstance = $modal.open({ + scope: $scope, + templateUrl: 'myModalContent.html', + controller: 'tuning.mediapickercontroller', + resolve: { + items: function () { + return field.imageorpattern; + } + } + }); + modalInstance.result.then(function (selectedItem) { + field.imageorpattern = selectedItem; + }); + }; + +}) + +/*********************************************************************************************************/ +/* 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) + +}) + +/*********************************************************************************************************/ +/* slider editor */ +/*********************************************************************************************************/ + +angular.module("Umbraco.canvasdesigner") + +.controller("Umbraco.canvasdesigner.slider", function ($scope) { + + if (!$scope.item.values) { + $scope.item.values = { + slider: '' + } + } + +}) + +/*********************************************************************************************************/ +/* slider editor */ +/*********************************************************************************************************/ + +angular.module("Umbraco.canvasdesigner") + +.controller("Umbraco.canvasdesigner.wide", function ($scope) { + + if (!$scope.item.values) { + $scope.item.values = { + wide: false + } + } + +}) + +/*********************************************************************************************************/ +/* jQuery UI Slider plugin wrapper */ +/*********************************************************************************************************/ + +angular.module("Umbraco.canvasdesigner").factory('dialogService', function ($rootScope, $q, $http, $timeout, $compile, $templateCache) { + + + function closeDialog(dialog) { + if (dialog.element) { + dialog.element.removeClass("selected"); + dialog.element.html(""); + 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 scope = (options && options.scope) || $rootScope.$new(); + + // Save original value for cancel action + var originalDialogItem = angular.copy(dialog.dialogItem); + + dialog.element = $(".float-right-menu"); + + + /************************************/ + $(document).mousedown(function (e) { + var container = dialog.element; + if (!container.is(e.target) && container.has(e.target).length === 0) { + closeDialog(dialog); + } + }); + /************************************/ + + + $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); + } + + scope.change = function (data) { + if (dialog.change) { + dialog.change(data); + } + } + + scope.submit = function (data) { + if (dialog.callback) { + dialog.callback(data); + } + closeDialog(dialog); + }; + + scope.close = function () { + closeDialog(dialog); + } + + scope.dialogData = dialog.dialogData; + scope.dialogItem = dialog.dialogItem; + + dialog.scope = scope; + + }); + + return dialog; + + }, + + close: function() { + var modal = $(".float-right-menu"); + 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: '=' + }, + link: function (scope, $element) { + + var initColor; + + $element.find("input").spectrum({ + color: scope.colorselected, + allowEmpty: true, + preferredFormat: "rgb", + showAlpha: true, + showInput: true, + 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('colorselected', function () { + $element.find("input").spectrum("set", scope.colorselected); + }, true); + + }, + template: + '
', + replace: true + }; + }) \ No newline at end of file diff --git a/src/Umbraco.Web.UI/Views/Partials/Grid/Editors/embed.cshtml b/src/Umbraco.Web.UI/Views/Partials/Grid/Editors/embed.cshtml deleted file mode 100644 index abdbf66c68..0000000000 --- a/src/Umbraco.Web.UI/Views/Partials/Grid/Editors/embed.cshtml +++ /dev/null @@ -1,3 +0,0 @@ -@model dynamic -@using Umbraco.Web.Templates -@Html.Raw(Model.value) \ No newline at end of file diff --git a/src/Umbraco.Web.UI/Views/Partials/Grid/Editors/macro.cshtml b/src/Umbraco.Web.UI/Views/Partials/Grid/Editors/macro.cshtml deleted file mode 100644 index 94ae154c87..0000000000 --- a/src/Umbraco.Web.UI/Views/Partials/Grid/Editors/macro.cshtml +++ /dev/null @@ -1,17 +0,0 @@ -@inherits UmbracoViewPage -@using Umbraco.Web.Templates - - -@if (Model.value != null) -{ - string macroAlias = Model.value.macroAlias.ToString(); - ViewDataDictionary parameters = new ViewDataDictionary(); - foreach (dynamic mpd in Model.value.macroParamsDictionary) - { - parameters.Add(mpd.Name, mpd.Value); - } - - - @Umbraco.RenderMacro(macroAlias, parameters) - -} \ No newline at end of file diff --git a/src/Umbraco.Web.UI/Views/Partials/Grid/Editors/media.cshtml b/src/Umbraco.Web.UI/Views/Partials/Grid/Editors/media.cshtml deleted file mode 100644 index bc99b066de..0000000000 --- a/src/Umbraco.Web.UI/Views/Partials/Grid/Editors/media.cshtml +++ /dev/null @@ -1,13 +0,0 @@ -@model dynamic -@using Umbraco.Web.Templates - -@if (Model.value != null) -{ -
- @Model.value.caption -
- if (Model.value.caption != null) - { -

@Model.value.caption

- } -} \ No newline at end of file diff --git a/src/Umbraco.Web.UI/Views/Partials/Grid/Editors/rte.cshtml b/src/Umbraco.Web.UI/Views/Partials/Grid/Editors/rte.cshtml deleted file mode 100644 index 37c162310a..0000000000 --- a/src/Umbraco.Web.UI/Views/Partials/Grid/Editors/rte.cshtml +++ /dev/null @@ -1,4 +0,0 @@ -@model dynamic -@using Umbraco.Web.Templates - -@Html.Raw(TemplateUtilities.ParseInternalLinks(Model.value.ToString())) \ No newline at end of file diff --git a/src/Umbraco.Web.UI/Views/Partials/Grid/Editors/textstring.cshtml b/src/Umbraco.Web.UI/Views/Partials/Grid/Editors/textstring.cshtml deleted file mode 100644 index 0628510a5d..0000000000 --- a/src/Umbraco.Web.UI/Views/Partials/Grid/Editors/textstring.cshtml +++ /dev/null @@ -1,20 +0,0 @@ -@model dynamic -@using Umbraco.Web.Templates - -@if (Model.editor.config.markup != null) -{ - string markup = Model.editor.config.markup.ToString(); - - markup = markup.Replace("#value#", Model.value.ToString()); - markup = markup.Replace("#style#", Model.editor.config.style.ToString()); - - - @Html.Raw(markup) - -} -else -{ - -
@Model.value
- -} \ No newline at end of file diff --git a/src/Umbraco.Web.UI/Views/Partials/Grid/basic.cshtml b/src/Umbraco.Web.UI/Views/Partials/Grid/basic.cshtml deleted file mode 100644 index 5f282702bb..0000000000 --- a/src/Umbraco.Web.UI/Views/Partials/Grid/basic.cshtml +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap2.cshtml b/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap2.cshtml deleted file mode 100644 index beb89b59e9..0000000000 --- a/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap2.cshtml +++ /dev/null @@ -1,47 +0,0 @@ -@inherits UmbracoViewPage -@using Umbraco.Web.Templates -@using Newtonsoft.Json.Linq; - - -@if (Model != null && !string.IsNullOrEmpty(Model.ToString())) -{ - var onlyOneColumn = Model.sections != null ? ((System.Collections.ICollection)Model.sections).Count : 0; - -
-
- @foreach (var s in Model.sections) - { -
- @foreach (var row in s.rows) - { -
-
-
- - @foreach (var area in row.areas) - { -
- - @foreach (var control in area.controls) - { - if (control != null && control.editor != null && control.editor.view != null) - { - - string editor = "grid/editors/" + control.editor.view.ToString(); - - @Html.Partial(editor, (object)control) - - } - } - -
- } -
-
-
- } -
- } -
-
-} \ No newline at end of file diff --git a/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap3.cshtml b/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap3.cshtml deleted file mode 100644 index 7710c46a5d..0000000000 --- a/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap3.cshtml +++ /dev/null @@ -1,45 +0,0 @@ -@inherits UmbracoViewPage -@using Umbraco.Web.Templates - - -@if (Model != null && !string.IsNullOrEmpty(Model.ToString())) -{ - var onlyOneColumn = Model.sections != null ? ((System.Collections.ICollection)Model.sections).Count : 0; - -
-
- @foreach (var s in Model.sections) - { -
- @foreach (var row in s.rows) - { -
-
-
- - @foreach (var area in row.areas) - { -
- - @foreach (var control in area.controls) - { - if (control != null && control.editor != null && control.editor.view != null) - { - - string editor = "grid/editors/" + control.editor.view.ToString(); - - @Html.Partial(editor, (object)control) - - } - } -
- } -
-
-
- } -
- } -
-
-} \ No newline at end of file diff --git a/src/Umbraco.Web.UI/config/Dashboard.config b/src/Umbraco.Web.UI/config/Dashboard.config index 6f8b16cac2..f5389cdbf9 100644 --- a/src/Umbraco.Web.UI/config/Dashboard.config +++ b/src/Umbraco.Web.UI/config/Dashboard.config @@ -10,6 +10,7 @@ +
forms diff --git a/src/Umbraco.Web.UI/config/applications.config b/src/Umbraco.Web.UI/config/applications.config index 328e8c3776..62d2f2182b 100644 --- a/src/Umbraco.Web.UI/config/applications.config +++ b/src/Umbraco.Web.UI/config/applications.config @@ -8,4 +8,5 @@ + \ No newline at end of file diff --git a/src/Umbraco.Web.UI/config/grid.editors.config.js b/src/Umbraco.Web.UI/config/canvas.editors.config.js similarity index 100% rename from src/Umbraco.Web.UI/config/grid.editors.config.js rename to src/Umbraco.Web.UI/config/canvas.editors.config.js diff --git a/src/Umbraco.Web.UI/config/trees.config b/src/Umbraco.Web.UI/config/trees.config index 6438fc8397..fccbed2945 100644 --- a/src/Umbraco.Web.UI/config/trees.config +++ b/src/Umbraco.Web.UI/config/trees.config @@ -40,4 +40,8 @@ + + + + \ No newline at end of file diff --git a/src/Umbraco.Web.UI/umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/umbraco/config/lang/en.xml index 28a345105a..11ad6d65dc 100644 --- a/src/Umbraco.Web.UI/umbraco/config/lang/en.xml +++ b/src/Umbraco.Web.UI/umbraco/config/lang/en.xml @@ -744,6 +744,7 @@ To manage your website, simply open the Umbraco back office and start adding con Users Help Forms + Analytics Default template diff --git a/src/Umbraco.Web/TuningUtility.cs b/src/Umbraco.Web/CanvasDesignerUtility.cs similarity index 94% rename from src/Umbraco.Web/TuningUtility.cs rename to src/Umbraco.Web/CanvasDesignerUtility.cs index 937c118320..641dad6ba4 100644 --- a/src/Umbraco.Web/TuningUtility.cs +++ b/src/Umbraco.Web/CanvasDesignerUtility.cs @@ -20,13 +20,13 @@ using System.Text.RegularExpressions; namespace Umbraco.Web { - internal static class TuningUtility + internal static class CanvasDesignerUtility { - internal static string tuningStylePath = "/Css/tuning/"; - internal static string resultLessPath = tuningStylePath + @"{0}.less"; - internal static string resultCssPath = tuningStylePath + @"{0}.css"; - internal static string frontBasePath = HttpContext.Current.Server.MapPath(@"\Css\tuning\"); + internal static string canvasdesignerStylePath = "/css/canvasdesigner/"; + internal static string resultLessPath = canvasdesignerStylePath + @"{0}.less"; + internal static string resultCssPath = canvasdesignerStylePath + @"{0}.css"; + internal static string frontBasePath = HttpContext.Current.Server.MapPath(@"\css\canvasdesigner\"); // get style box by tag internal static String GetStyleBlock(string source, string name) @@ -80,7 +80,7 @@ namespace Umbraco.Web string styleTuning = preview ? @"{0}{1}.less" : "{0}{1}.css"; foreach (var page in path.OrderByDescending(r => path.IndexOf(r))) { - string stylePath = HttpContext.Current.Server.MapPath(string.Format(styleTuning, tuningStylePath, page)); + string stylePath = HttpContext.Current.Server.MapPath(string.Format(styleTuning, canvasdesignerStylePath, page)); if (System.IO.File.Exists(stylePath)) { return int.Parse(page); @@ -91,7 +91,6 @@ namespace Umbraco.Web return int.Parse(path[1]); else return -1; - } // Get stylesheet path for current page @@ -102,7 +101,7 @@ namespace Umbraco.Web int tunedPageId = GetParentOrSelfTunedPageId(path, preview); if (tunedPageId >0) - return string.Format(styleTuning, tuningStylePath, tunedPageId); + return string.Format(styleTuning, canvasdesignerStylePath, tunedPageId); else return string.Empty; } @@ -173,7 +172,7 @@ namespace Umbraco.Web Directory.CreateDirectory(frontBasePath); // Save less file - if (string.IsNullOrEmpty(lessPath)) lessPath = string.Format("{0}{1}.less", tuningStylePath, pageId); + if (string.IsNullOrEmpty(lessPath)) lessPath = string.Format("{0}{1}.less", canvasdesignerStylePath, pageId); using (System.IO.StreamWriter file = new System.IO.StreamWriter(HttpContext.Current.Server.MapPath(lessPath))) { file.Write(lessContent); @@ -227,7 +226,7 @@ namespace Umbraco.Web // Get inherited tuned pageId and path var contentService = ApplicationContext.Current.Services.ContentService; IContent content = contentService.GetById(pageId); - int inheritedTunedPageId = TuningUtility.GetParentOrSelfTunedPageId(content.Path.Split(','), true); + int inheritedTunedPageId = CanvasDesignerUtility.GetParentOrSelfTunedPageId(content.Path.Split(','), true); // Load inherited Less content string inheritedLessContent = string.Empty; diff --git a/src/Umbraco.Web/GridTemplateExtensions.cs b/src/Umbraco.Web/CanvasTemplateExtensions.cs similarity index 94% rename from src/Umbraco.Web/GridTemplateExtensions.cs rename to src/Umbraco.Web/CanvasTemplateExtensions.cs index 27b4a45d6b..eea36d9e30 100644 --- a/src/Umbraco.Web/GridTemplateExtensions.cs +++ b/src/Umbraco.Web/CanvasTemplateExtensions.cs @@ -12,11 +12,11 @@ using Umbraco.Web.Mvc; namespace Umbraco.Web { - public static class GridTemplateExtensions + public static class CanvasTemplateExtensions { public static MvcHtmlString GetGridHtml(this IPublishedProperty property, string framework = "bootstrap3") { - var view = "Grid/" + framework; + var view = "Canvas/" + framework; return new MvcHtmlString(renderPartialViewToString(view, property.Value)); } @@ -32,7 +32,7 @@ namespace Umbraco.Web public static MvcHtmlString GetGridHtml(this IPublishedContent contentItem, string propertyAlias, string framework) { - var view = "Grid/" + framework; + var view = "Canvas/" + framework; var model = contentItem.GetProperty(propertyAlias).Value; return new MvcHtmlString(renderPartialViewToString(view, model)); diff --git a/src/Umbraco.Web/Editors/TuningController.cs b/src/Umbraco.Web/Editors/CanvasDesignerController.cs similarity index 90% rename from src/Umbraco.Web/Editors/TuningController.cs rename to src/Umbraco.Web/Editors/CanvasDesignerController.cs index d91d06efbf..8b8ba4b74a 100644 --- a/src/Umbraco.Web/Editors/TuningController.cs +++ b/src/Umbraco.Web/Editors/CanvasDesignerController.cs @@ -21,7 +21,7 @@ using Umbraco.Core.Services; namespace Umbraco.Web.Editors { - public class TuningController : UmbracoApiController + public class CanvasDesignerController : UmbracoApiController { [HttpGet] @@ -57,7 +57,7 @@ namespace Umbraco.Web.Editors var pageId = int.Parse(HttpContext.Current.Request["pageId"]); // Get all parameters - string paramBlock = TuningUtility.GetLessParameters(pageId); + string paramBlock = CanvasDesignerUtility.GetLessParameters(pageId); // Prepare string parameter result string[] paramLines = paramBlock.Trim().Split(new string[] { "\r\n" }, StringSplitOptions.RemoveEmptyEntries); @@ -88,7 +88,7 @@ namespace Umbraco.Web.Editors var inherited = Boolean.Parse(HttpContext.Current.Request["inherited"]); // Save and compile styles - TuningUtility.SaveAndPublishStyle(parameters, pageId, inherited); + CanvasDesignerUtility.SaveAndPublishStyle(parameters, pageId, inherited); var resp = new HttpResponseMessage() { @@ -105,7 +105,7 @@ namespace Umbraco.Web.Editors var pageId = HttpContext.Current.Request["pageId"]; - TuningUtility.DeleteStyle(int.Parse(pageId)); + CanvasDesignerUtility.DeleteStyle(int.Parse(pageId)); var resp = new HttpResponseMessage() { @@ -124,7 +124,7 @@ namespace Umbraco.Web.Editors var config = HttpContext.Current.Request["config"]; var pageId = int.Parse(HttpContext.Current.Request["pageId"]); - return TuningUtility.CreateOrUpdateLessFile(pageId, config); + return CanvasDesignerUtility.CreateOrUpdateLessFile(pageId, config); } diff --git a/src/Umbraco.Web/PropertyEditors/GridPropertyEditor.cs b/src/Umbraco.Web/PropertyEditors/CanvasPropertyEditor.cs similarity index 65% rename from src/Umbraco.Web/PropertyEditors/GridPropertyEditor.cs rename to src/Umbraco.Web/PropertyEditors/CanvasPropertyEditor.cs index 528e4ea1ad..05f76b83ce 100644 --- a/src/Umbraco.Web/PropertyEditors/GridPropertyEditor.cs +++ b/src/Umbraco.Web/PropertyEditors/CanvasPropertyEditor.cs @@ -7,8 +7,8 @@ using Umbraco.Core.PropertyEditors; namespace Umbraco.Web.PropertyEditors { - [PropertyEditor(Core.Constants.PropertyEditors.GridAlias, "Grid", "grid", HideLabel=true, IsParameterEditor = false, ValueType="JSON")] - public class GridPropertyEditor : PropertyEditor + [PropertyEditor(Core.Constants.PropertyEditors.CanvasAlias, "Canvas", "canvas", HideLabel=true, IsParameterEditor = false, ValueType="JSON")] + public class CanvasPropertyEditor : PropertyEditor { /// /// Overridden to ensure that the value is validated @@ -23,14 +23,14 @@ namespace Umbraco.Web.PropertyEditors protected override PreValueEditor CreatePreValueEditor() { - return new gridPreValueEditor(); + return new canvasPreValueEditor(); } } - internal class gridPreValueEditor : PreValueEditor + internal class canvasPreValueEditor : PreValueEditor { - [PreValueField("items", "Grid", "views/propertyeditors/grid/grid.prevalues.html", Description = "Grid configuration")] + [PreValueField("items", "Canvas", "views/propertyeditors/canvas/canvas.prevalues.html", Description = "Canvas configuration")] public string Items { get; set; } [PreValueField("rte", "Rich text editor", "views/propertyeditors/rte/rte.prevalues.html", Description = "Rich text editor configuration")] diff --git a/src/Umbraco.Web/Umbraco.Web.csproj b/src/Umbraco.Web/Umbraco.Web.csproj index ae59e8c6ee..99d10aa816 100644 --- a/src/Umbraco.Web/Umbraco.Web.csproj +++ b/src/Umbraco.Web/Umbraco.Web.csproj @@ -306,8 +306,8 @@ - - + + @@ -379,7 +379,7 @@ - + @@ -506,7 +506,7 @@ - + diff --git a/src/Umbraco.Web/UmbracoHelper.cs b/src/Umbraco.Web/UmbracoHelper.cs index 378d31a048..12b89b34c0 100644 --- a/src/Umbraco.Web/UmbracoHelper.cs +++ b/src/Umbraco.Web/UmbracoHelper.cs @@ -1314,24 +1314,24 @@ namespace Umbraco.Web #region tuning - public HtmlString EnableTuning() + public HtmlString EnableCanvasDesigner() { - return EnableTuning(string.Empty, string.Empty); + return EnableCanvasDesigner(string.Empty, string.Empty); } - public HtmlString EnableTuning(string tuningConfigPath) + public HtmlString EnableCanvasDesigner(string tuningConfigPath) { - return EnableTuning(tuningConfigPath, string.Empty); + return EnableCanvasDesigner(tuningConfigPath, string.Empty); } - public HtmlString EnableTuning(string tuningConfigPath, string tuningPalettesPath) + public HtmlString EnableCanvasDesigner(string tuningConfigPath, string tuningPalettesPath) { string previewLink = @"" + @"" + @"" + @"" + - @""; + @""; string noPreviewLinks = @""; @@ -1339,12 +1339,12 @@ namespace Umbraco.Web int pageId = UmbracoContext.PublishedContentRequest.UmbracoPage.PageID; string[] path = UmbracoContext.PublishedContentRequest.UmbracoPage.SplitPath; string result = string.Empty; - string cssPath = TuningUtility.GetStylesheetPath(path, false); + string cssPath = CanvasDesignerUtility.GetStylesheetPath(path, false); if (UmbracoContext.Current.InPreviewMode) { - tuningConfigPath = !string.IsNullOrEmpty(tuningConfigPath) ? tuningConfigPath : "/umbraco/js/tuning.config.js"; - tuningPalettesPath = !string.IsNullOrEmpty(tuningPalettesPath) ? tuningConfigPath : "/umbraco/js/tuning.palettes.js"; + tuningConfigPath = !string.IsNullOrEmpty(tuningConfigPath) ? tuningConfigPath : "/umbraco/js/canvasdesigner.config.js"; + tuningPalettesPath = !string.IsNullOrEmpty(tuningPalettesPath) ? tuningConfigPath : "/umbraco/js/canvasdesigner.palettes.js"; if (!string.IsNullOrEmpty(cssPath)) result = string.Format(noPreviewLinks, cssPath) + Environment.NewLine;