diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js b/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js index 4368d016b3..fc2c7f5741 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js @@ -1,4 +1,3 @@ - /*********************************************************************************************************/ /* tuning panel app and controller */ /*********************************************************************************************************/ @@ -13,6 +12,8 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli $scope.frameLoaded = 0; $scope.frameFirstLoaded = false; $scope.tuningParameterUrl = ""; + $scope.tuningGridStyleUrl = ""; + $scope.tuningGridList = ""; $scope.schemaFocus = "body"; $scope.settingIsOpen = 'previewDevice'; $scope.BackgroundPositions = ['center', 'left', 'right', 'bottom center', 'bottom left', 'bottom right', 'top center', 'top left', 'top right']; @@ -36,9 +37,7 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli // Load parameters from GetLessParameters and init data of the tuning config var initTuning = function () { - console.info("url " + $scope.tuningParameterUrl); - - $http.get('/Umbraco/Api/tuning/Load', { params: { param: $scope.tuningParameterUrl } }) + $http.get('/Umbraco/Api/tuning/Load', { params: { tuningStyleUrl: $scope.tuningParameterUrl, tuningGridStyleUrl: $scope.tuningGridStyleUrl } }) .success(function (data) { $.each(tuningConfig.categories, function (indexCategory, category) { @@ -46,18 +45,24 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli $.each(section.subSections, function (indexSubSection, subSection) { $.each(subSection.fields, function (indexField, field) { - // value - field.value = eval("data." + field.alias.replace("@", "")); - if (field.value == "''") { field.value = ""; } + try { - // special init for font family picker - if (field.type == "fontFamilyPicker") { - field.fontWeight = eval("data." + field.alias.replace("@", "") + "_weight"); - field.fontStyle = eval("data." + field.alias.replace("@", "") + "_style"); - field.fontType = eval("data." + field.alias.replace("@", "") + "_type"); - if (field.fontWeight == "''") { field.fontWeight = ""; } - if (field.fontStyle == "''") { field.fontStyle = ""; } - if (field.fontType == "''") { field.fontType = ""; } + // value + field.value = eval("data." + field.alias.replace("@", "")); + if (field.value == "''") { field.value = ""; } + + // special init for font family picker + if (field.type == "fontFamilyPicker") { + field.fontWeight = eval("data." + field.alias.replace("@", "") + "_weight"); + field.fontStyle = eval("data." + field.alias.replace("@", "") + "_style"); + field.fontType = eval("data." + field.alias.replace("@", "") + "_type"); + if (field.fontWeight == "''") { field.fontWeight = ""; } + if (field.fontStyle == "''") { field.fontStyle = ""; } + if (field.fontType == "''") { field.fontType = ""; } + } + } + catch (err) { + console.info("Style parameter not found " + field.alias); } }) @@ -73,33 +78,119 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli } }); + + } + + // Add Less parameters for each grid row + var initGridConfig = function () { + + var rowModel = { + name: "Grid", + sections: [{ + name: "Main", + subSections: [] + }] + }; + + $.each($scope.tuningGridList, function (index, row) { + + var newIndex = rowModel.sections[0].subSections.length + 1; + + var rowFieldModel = { + name: "Row", + schema: "", + fields: [ + { + name: "Background color", + alias: "backgroundRowColor", + description: "Background body color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBodyBackground" + }, + { + name: "Background gradient", + alias: "backgroundRowGradientColor", + description: "Fade the background to this colour at the bottom", + type: "colorPicker", + value: "" + }, + { + name: "Image/Pattern", + alias: "backgroundRowImageOrPattern", + description: "Use an image for the background instead of a solid colour/gradient", + type: "bgImagePicker", + value: "" + }, + { + name: "Image position", + alias: "backgroundRowPosition", + description: "Background body position", + type: "bgPositionPicker", + value: "" + }, + { + name: "Stretch background", + alias: "backgroundRowCover", + description: "Checked: stretches the chosen image to fill the.\nUnchecked: the image is tiled according to the Repeat setting below", + type: "checkbox", + value: "" + }, + { + name: "Background tiling", + alias: "backgroundRowRepeat", + description: "How to tile the background image", + type: "bgRepeatPicker", + value: "" + }, + { + name: "Background scrolling behaviour", + alias: "backgroundRowAttachment", + description: "When fixed the background doesn't scroll with the content", + type: "bgAttachmentPicker", + value: "" + } + ] + }; + + rowModel.sections[0].subSections.splice(newIndex, 0, rowFieldModel); + rowModel.sections[0].subSections[newIndex - 1].schema = "." + row; + $.each(rowModel.sections[0].subSections[newIndex - 1].fields, function (indexField, field) { + field.alias = field.alias + "__" + row; + }); + + }) + + tuningConfig.categories.splice(tuningConfig.categories.length + 1, 0, rowModel); + } // Refresh all less parameters for every changes watching tuningModel var refreshtuning = function () { var parameters = []; - $.each($scope.tuningModel.categories, function (indexCategory, category) { - $.each(category.sections, function (indexSection, section) { - $.each(section.subSections, function (indexSubSection, subSection) { - $.each(subSection.fields, function (indexField, field) { + if ($scope.tuningModel) { + $.each($scope.tuningModel.categories, function (indexCategory, category) { + $.each(category.sections, function (indexSection, section) { + $.each(section.subSections, function (indexSubSection, subSection) { + $.each(subSection.fields, function (indexField, field) { - // value - parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "':'" + field.value + "'"); + // value + parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "':'" + field.value + "'"); - // special init for font family picker - if (field.type == "fontFamilyPicker") { - parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "_weight':'" + field.fontWeight + "'"); - parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "_Style':'" + field.fontStyle + "'"); - } + // special init for font family picker + if (field.type == "fontFamilyPicker") { + parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "_weight':'" + field.fontWeight + "'"); + parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "_Style':'" + field.fontStyle + "'"); + } + }) }) }) - }) - }); - - // Refrech page style - document.getElementById("resultFrame").contentWindow.refrechLayout(parameters); + }); + // Refrech page style + document.getElementById("resultFrame").contentWindow.refrechLayout(parameters); + } } var openIntelTuning = function () { @@ -142,30 +233,37 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli $scope.saveLessParameters = function () { var parameters = []; + var parametersGrid = []; $.each($scope.tuningModel.categories, function (indexCategory, category) { $.each(category.sections, function (indexSection, section) { $.each(section.subSections, function (indexSubSection, subSection) { $.each(subSection.fields, function (indexField, field) { - // value - var value = (field.value != 0 && (field.value == undefined || field.value == "")) ? "''" : field.value; - parameters.splice(parameters.length + 1, 0, "@" + field.alias + ":" + value + ";"); + if (subSection.schema && subSection.schema.indexOf("grid-row-") >= 0) { + var value = (field.value != 0 && (field.value == undefined || field.value == "")) ? "''" : field.value; + parametersGrid.splice(parametersGrid.length + 1, 0, "@" + field.alias + ":" + value + ";"); + } + else { + // value + var value = (field.value != 0 && (field.value == undefined || field.value == "")) ? "''" : field.value; + parameters.splice(parameters.length + 1, 0, "@" + field.alias + ":" + value + ";"); - // special init for font family picker - if (field.type == "fontFamilyPicker") { - if (field.fontType == "google" && value != "''") { - var variant = field.fontWeight != "" || field.fontStyle != "" ? ":" + field.fontWeight + field.fontStyle : ""; - var gimport = "@import url('http://fonts.googleapis.com/css?family=" + value + variant + "');"; - if ($.inArray(gimport, parameters) < 0) { - parameters.splice(0, 0, gimport); + // special init for font family picker + if (field.type == "fontFamilyPicker") { + if (field.fontType == "google" && value != "''") { + var variant = field.fontWeight != "" || field.fontStyle != "" ? ":" + field.fontWeight + field.fontStyle : ""; + var gimport = "@import url('http://fonts.googleapis.com/css?family=" + value + variant + "');"; + if ($.inArray(gimport, parameters) < 0) { + parameters.splice(0, 0, gimport); + } } + var fontWeight = (field.fontWeight != 0 && (field.fontWeight == undefined || field.fontWeight == "")) ? "''" : field.fontWeight; + var fontStyle = (field.fontStyle != 0 && (field.fontStyle == undefined || field.fontStyle == "")) ? "''" : field.fontStyle; + var fontType = (field.fontType != 0 && (field.fontType == undefined || field.fontType == "")) ? "''" : field.fontType; + parameters.splice(parameters.length + 1, 0, "@" + field.alias + "_weight:" + fontWeight + ";"); + parameters.splice(parameters.length + 1, 0, "@" + field.alias + "_style:" + fontStyle + ";"); + parameters.splice(parameters.length + 1, 0, "@" + field.alias + "_type:" + fontType + ";"); } - var fontWeight = (field.fontWeight != 0 && (field.fontWeight == undefined || field.fontWeight == "")) ? "''" : field.fontWeight; - var fontStyle = (field.fontStyle != 0 && (field.fontStyle == undefined || field.fontStyle == "")) ? "''" : field.fontStyle; - var fontType = (field.fontType != 0 && (field.fontType == undefined || field.fontType == "")) ? "''" : field.fontType; - parameters.splice(parameters.length + 1, 0, "@" + field.alias + "_weight:" + fontWeight + ";"); - parameters.splice(parameters.length + 1, 0, "@" + field.alias + "_style:" + fontStyle + ";"); - parameters.splice(parameters.length + 1, 0, "@" + field.alias + "_type:" + fontType + ";"); } }) @@ -173,7 +271,7 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli }) }); - var resultParameters = { result: parameters.join(""), pageId: $location.search().id }; + var resultParameters = { parameters: parameters.join(""), parametersGrid: parametersGrid.join(""), pageId: $location.search().id }; var transform = function (result) { return $.param(result); } @@ -306,6 +404,7 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli // watch framLoaded $scope.$watch("frameLoaded", function () { if ($scope.frameLoaded > 0) { + initGridConfig(); initTuning(); $scope.$watch('tuningModel', function () { refreshtuning(); @@ -460,8 +559,8 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli $scope.safeFonts = ["Arial, Helvetica", "Impact", "Lucida Sans Unicode", "Tahoma", "Trebuchet MS", "Verdana", "Georgia", "Times New Roman", "Courier New, Courier"]; $scope.fonts = []; $scope.selectedFont = {}; - - var originalFont = {}; + + var originalFont = {}; originalFont.fontFamily = $scope.data.modalField.value; originalFont.fontType = $scope.data.modalField.fontType; originalFont.fontWeight = $scope.data.modalField.fontWeight; diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js b/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js index d5328b0627..444334632f 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js @@ -119,11 +119,19 @@ var initIntelTuning = function (tuningModel) { var initTuningPanel = function () { + // Looking for grid row + var tuningGridList = [] + $("div[class^='grid-row-']").each(function (index, value) { + tuningGridList.splice(tuningGridList.length + 1, 0, $(value).attr("class")) + }); + // Init panel if (parent.setFrameIsLoaded) { - parent.setFrameIsLoaded(tuningParameterUrl); + parent.setFrameIsLoaded(tuningParameterUrl, tuningGridStyleUrl, tuningGridList); } - } -initTuningPanel(); \ No newline at end of file +$(function () { + initTuningPanel(); +}); + diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js b/src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js index 4a631d6224..ae17690921 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js @@ -40,10 +40,12 @@ var refrechIntelTuning = function (schema) { } -var setFrameIsLoaded = function (tuningParameterUrl) { - console.info("iframe id loaded " + tuningParameterUrl); +var setFrameIsLoaded = function (tuningParameterUrl, tuningGridStyleUrl, tuningGridList) { + console.info("iframe id loaded " + tuningParameterUrl + " " + tuningGridStyleUrl); var scope = angular.element($("#tuningPanel")).scope(); scope.tuningParameterUrl = tuningParameterUrl; + scope.tuningGridStyleUrl = tuningGridStyleUrl; + scope.tuningGridList = tuningGridList scope.frameLoaded++; scope.frameFirstLoaded = true; scope.$apply(); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js index 8fb15c84a2..3ec502cca1 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js @@ -99,6 +99,7 @@ angular.module("umbraco") column.rows.splice(column.rows.length + 1, 0, { + uniqueId: $scope.setUniqueId(), cells: [], cssClass: '' }); diff --git a/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js b/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js index 4352f80f21..5d53ae3674 100644 --- a/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js +++ b/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js @@ -119,6 +119,14 @@ var initIntelTuning = function (tuningModel) { var initTuningPanel = function () { + + + $.each("div[class^='grid-row-']", function (index, value) { + alert("work"); + }); + + + // Init panel if (parent.setFrameIsLoaded) { parent.setFrameIsLoaded(tuningParameterUrl, tuningGridStyleUrl); diff --git a/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js b/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js index 80c40d0e22..3547b282b2 100644 --- a/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js +++ b/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js @@ -40,16 +40,16 @@ var refrechIntelTuning = function (schema) { } -var setFrameIsLoaded = function (tuningParameterUrl, tuningGridStyleUrl) { +var setFrameIsLoaded = function (tuningParameterUrl, tuningGridStyleUrl, tuningGridList) { console.info("iframe id loaded " + tuningParameterUrl + " " + tuningGridStyleUrl); var scope = angular.element($("#tuningPanel")).scope(); scope.tuningParameterUrl = tuningParameterUrl; scope.tuningGridStyleUrl = tuningGridStyleUrl; + scope.tuningGridList = tuningGridList scope.frameLoaded++; scope.frameFirstLoaded = true; scope.$apply(); } - /*********************************************************************************************************/ /* tuning panel app and controller */ /*********************************************************************************************************/ @@ -65,6 +65,7 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli $scope.frameFirstLoaded = false; $scope.tuningParameterUrl = ""; $scope.tuningGridStyleUrl = ""; + $scope.tuningGridList = ""; $scope.schemaFocus = "body"; $scope.settingIsOpen = 'previewDevice'; $scope.BackgroundPositions = ['center', 'left', 'right', 'bottom center', 'bottom left', 'bottom right', 'top center', 'top left', 'top right']; @@ -85,106 +86,9 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli ]; $scope.previewDevice = $scope.devices[0]; - - - - - - - - - - //***************************************************************************** - // Grid row model - //***************************************************************************** - - var rows = ['grid-row-0', 'grid-row-1']; - - var rowModel = { - name: "Grid", - sections: [{ - name: "Main", - subSections: [] - }] - }; - - $.each(rows, function (index, row) { - var newIndex = rowModel.sections[0].subSections.length + 1; - - var rowFieldModel = { - name: "Row", - schema: "", - fields: [ - { - name: "Background color", - alias: "backgroundRowColor", - description: "Background body color", - type: "colorPicker", - value: "", - colorPaletteProperty: "colorBodyBackground" - }, - { - name: "Image/Pattern", - alias: "backgroundRowImageOrPattern", - description: "Use an image for the background instead of a solid colour/gradient", - type: "bgImagePicker", - value: "" - }, - { - name: "Image position", - alias: "backgroundRowPosition", - description: "Background body position", - type: "bgPositionPicker", - value: "" - }, - { - name: "Stretch background", - alias: "backgroundRowCover", - description: "Checked: stretches the chosen image to fill the.\nUnchecked: the image is tiled according to the Repeat setting below", - type: "checkbox", - value: "" - }, - { - name: "Background tiling", - alias: "backgroundRowRepeat", - description: "How to tile the background image", - type: "bgRepeatPicker", - value: "" - }, - { - name: "Background scrolling behaviour", - alias: "backgroundRowAttachment", - description: "When fixed the background doesn't scroll with the content", - type: "bgAttachmentPicker", - value: "" - } - ] - }; - - rowModel.sections[0].subSections.splice(newIndex, 0, rowFieldModel); - rowModel.sections[0].subSections[newIndex - 1].schema = "." + row; - $.each(rowModel.sections[0].subSections[newIndex - 1].fields, function (indexField, field) { - field.alias = field.alias + "__" + row; - }); - - }) - - tuningConfig.categories.splice(tuningConfig.categories.length + 1, 0, rowModel); - - //***************************************************************************** - - - - - - - - - - // Load parameters from GetLessParameters and init data of the tuning config var initTuning = function () { - + $http.get('/Umbraco/Api/tuning/Load', { params: { tuningStyleUrl: $scope.tuningParameterUrl, tuningGridStyleUrl: $scope.tuningGridStyleUrl } }) .success(function (data) { @@ -226,7 +130,91 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli } }); - + + } + + // Add Less parameters for each grid row + var initGridConfig = function () { + + var rowModel = { + name: "Grid", + sections: [{ + name: "Main", + subSections: [] + }] + }; + + $.each($scope.tuningGridList, function (index, row) { + + var newIndex = rowModel.sections[0].subSections.length + 1; + + var rowFieldModel = { + name: "Row", + schema: "", + fields: [ + { + name: "Background color", + alias: "backgroundRowColor", + description: "Background body color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBodyBackground" + }, + { + name: "Background gradient", + alias: "backgroundRowGradientColor", + description: "Fade the background to this colour at the bottom", + type: "colorPicker", + value: "" + }, + { + name: "Image/Pattern", + alias: "backgroundRowImageOrPattern", + description: "Use an image for the background instead of a solid colour/gradient", + type: "bgImagePicker", + value: "" + }, + { + name: "Image position", + alias: "backgroundRowPosition", + description: "Background body position", + type: "bgPositionPicker", + value: "" + }, + { + name: "Stretch background", + alias: "backgroundRowCover", + description: "Checked: stretches the chosen image to fill the.\nUnchecked: the image is tiled according to the Repeat setting below", + type: "checkbox", + value: "" + }, + { + name: "Background tiling", + alias: "backgroundRowRepeat", + description: "How to tile the background image", + type: "bgRepeatPicker", + value: "" + }, + { + name: "Background scrolling behaviour", + alias: "backgroundRowAttachment", + description: "When fixed the background doesn't scroll with the content", + type: "bgAttachmentPicker", + value: "" + } + ] + }; + + rowModel.sections[0].subSections.splice(newIndex, 0, rowFieldModel); + rowModel.sections[0].subSections[newIndex - 1].schema = "." + row; + $.each(rowModel.sections[0].subSections[newIndex - 1].fields, function (indexField, field) { + field.alias = field.alias + "__" + row; + }); + + }) + + tuningConfig.categories.splice(tuningConfig.categories.length + 1, 0, rowModel); + } // Refresh all less parameters for every changes watching tuningModel @@ -303,13 +291,11 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli $.each(section.subSections, function (indexSubSection, subSection) { $.each(subSection.fields, function (indexField, field) { - if (subSection.schema && subSection.schema.indexOf("grid-row-") >= 0) - { + if (subSection.schema && subSection.schema.indexOf("grid-row-") >= 0) { var value = (field.value != 0 && (field.value == undefined || field.value == "")) ? "''" : field.value; parametersGrid.splice(parametersGrid.length + 1, 0, "@" + field.alias + ":" + value + ";"); } - else - { + else { // value var value = (field.value != 0 && (field.value == undefined || field.value == "")) ? "''" : field.value; parameters.splice(parameters.length + 1, 0, "@" + field.alias + ":" + value + ";"); @@ -470,6 +456,7 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli // watch framLoaded $scope.$watch("frameLoaded", function () { if ($scope.frameLoaded > 0) { + initGridConfig(); initTuning(); $scope.$watch('tuningModel', function () { refreshtuning(); @@ -624,8 +611,8 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli $scope.safeFonts = ["Arial, Helvetica", "Impact", "Lucida Sans Unicode", "Tahoma", "Trebuchet MS", "Verdana", "Georgia", "Times New Roman", "Courier New, Courier"]; $scope.fonts = []; $scope.selectedFont = {}; - - var originalFont = {}; + + var originalFont = {}; originalFont.fontFamily = $scope.data.modalField.value; originalFont.fontType = $scope.data.modalField.fontType; originalFont.fontWeight = $scope.data.modalField.fontWeight; diff --git a/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap3.cshtml b/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap3.cshtml index bc6740f05d..202605c651 100644 --- a/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap3.cshtml +++ b/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap3.cshtml @@ -12,7 +12,7 @@
@control.value.caption
- } -