From 1a80e94bca9c6a07a9174e670cd5735132137433 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 17 Nov 2016 09:31:35 +0100 Subject: [PATCH] clean up insert field overlay --- .../insertfield/insertfield.controller.js | 269 ++++++-------- .../overlays/insertfield/insertfield.html | 351 +++++++++--------- .../src/views/templates/edit.controller.js | 10 +- 3 files changed, 300 insertions(+), 330 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/insertfield/insertfield.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/overlays/insertfield/insertfield.controller.js index a2463434b9..06de14963e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/insertfield/insertfield.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/insertfield/insertfield.controller.js @@ -1,173 +1,144 @@ (function () { "use strict"; - function InsertFieldController ($scope, $http, contentTypeResource) { - var vm = this; + function InsertFieldController($scope, $http, contentTypeResource) { + + var vm = this; - vm.field; - vm.altField; - vm.altText; - vm.insertPreviewTitle = "Modify output"; - vm.insertBefore; - vm.insertAfter; - vm.recursive = false; - vm.properties; - vm.date = false; - vm.dateTime = false; - vm.dateTimeSeparator = ""; - vm.casingUpper = false; - vm.casingLower = false; - vm.encodeHtml = false; - vm.encodeUrl = false; - vm.convertLinebreaks = false; + vm.field; + vm.altField; + vm.altText; + vm.insertBefore; + vm.insertAfter; + vm.recursive = false; + vm.properties = []; + vm.date = false; + vm.dateTime = false; + vm.dateTimeSeparator = ""; + vm.casingUpper = false; + vm.casingLower = false; + vm.encodeHtml = false; + vm.encodeUrl = false; + vm.convertLinebreaks = false; + vm.removeParagraphTags = false; - vm.showAltField = false; - vm.showAltText = false; + vm.showAltField = false; + vm.showAltText = false; - vm.showInsertPreview = showInsertPreview; - vm.updateInsertPreview = updateInsertPreview; - vm.hideInsertPreview = hideInsertPreview; - vm.updateDate = updateDate; - vm.updateDateTime = updateDateTime; - vm.updateUpper = updateUpper; - vm.updateLower = updateLower; - vm.updateEncodeHtml = updateEncodeHtml; - vm.updateEncodeUrl = updateEncodeUrl; + vm.setDateOption = setDateOption; + vm.setCasingOption = setCasingOption; + vm.setEncodingOption = setEncodingOption; + vm.generateOutputSample = generateOutputSample; - contentTypeResource.getAllPropertyTypeAliases().then(function(array) { - vm.properties = array; - }); + function onInit() { - //hide preview by default - function hideInsertPreview () { - $scope.model.itemDetails = null; - } + // set default title + if(!$scope.model.title) { + $scope.model.title = "Insert value"; + } - //Create preview - function showInsertPreview () { - var previewDetails = {}; + // set default subtitle + if(!$scope.model.subtitle) { + $scope.model.subtitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."; + } - previewDetails.title = vm.insertPreviewTitle; - - if (!vm.insertBefore && !vm.insertAfter) { - previewDetails.description = $scope.model.umbracoField - } else if (!vm.insertAfter) { - previewDetails.description = vm.insertBefore + ' ' + $scope.model.umbracoField; - } else { - previewDetails.description = vm.insertBefore + ' ' + $scope.model.umbracoField + ' ' + vm.insertAfter; - } - $scope.model.itemDetails = previewDetails; - } - - //Update preview - function updateInsertPreview () { - var previewDetails = $scope.model.itemDetails; - - previewDetails.title = vm.insertPreviewTitle; - - if (!vm.insertBefore && !vm.insertAfter) { - previewDetails.description = ' ' + $scope.model.umbracoField; - } else if (!vm.insertAfter) { - previewDetails.description = vm.insertBefore + ' ' + $scope.model.umbracoField; - } else { - previewDetails.description = vm.insertBefore + ' ' + $scope.model.umbracoField + ' ' + vm.insertAfter; + // Load all fields + contentTypeResource.getAllPropertyTypeAliases().then(function (array) { + vm.properties = array; + }); + } - $scope.model.itemDetails = previewDetails; - } + // date formatting + function setDateOption(option) { + + if (option === 'date') { + if(vm.date) { + vm.date = false; + } else { + vm.date = true; + vm.dateTime = false; + } + } + + if (option === 'dateWithTime') { + if(vm.dateTime) { + vm.dateTime = false; + } else { + vm.date = false; + vm.dateTime = true; + } + } - // date formatting - function updateDate () { - if (vm.date) { - vm.date = false; - return; - }else { - vm.date = true; - if (vm.dateTime) { - vm.dateTime = false; - } } - } - function updateDateTime () { - if (vm.dateTime) { - vm.dateTime = false - } else { - vm.dateTime = true; - if (vm.date) { - vm.date = false; - } + // casing formatting + function setCasingOption(option) { + if (option === 'uppercase') { + if(vm.casingUpper) { + vm.casingUpper = false; + } else { + vm.casingUpper = true; + vm.casingLower = false; + } + } + + if (option === 'lowercase') { + if(vm.casingLower) { + vm.casingLower = false; + } else { + vm.casingUpper = false; + vm.casingLower = true; + } + } } - } - // casing - function updateUpper() { - if (vm.casingUpper) { - vm.casingUpper = false; - return; - }else { - vm.casingUpper = true; - if (vm.casingLower) { - vm.casingLower = false; - } + // encoding formatting + function setEncodingOption(option) { + if (option === 'html') { + if(vm.encodeHtml) { + vm.encodeHtml = false; + } else { + vm.encodeHtml = true; + vm.encodeUrl = false; + } + } + + if (option === 'url') { + if (vm.encodeUrl) { + vm.encodeUrl = false; + } else { + vm.encodeHtml = false; + vm.encodeUrl = true; + } + } } - } - function updateLower() { - if (vm.casingLower) { - vm.casingLower = false; - return; - }else { - vm.casingLower = true; - if (vm.casingUpper) { - vm.casingUpper = false; - } + function generateOutputSample() { + + var pageField = (vm.field !== undefined ? '@Umbraco.Field("' + vm.field + '"' : "") + + (vm.altField !== undefined ? ', altFieldAlias:"' + vm.altField + '"' : "") + + (vm.altText !== undefined ? ', altText:"' + vm.altText + '"' : "") + + (vm.insertBefore !== undefined ? ', insertBefore:"' + vm.insertBefore + '"' : "") + + (vm.insertAfter !== undefined ? ', insertAfter:"' + vm.insertAfter + '"' : "") + + (vm.recursive !== false ? ', recursive: ' + vm.recursive : "") + + (vm.date !== false ? ', formatAsDate: ' + vm.date : "") + + (vm.dateTime !== false ? ', formatAsDateWithTimeSeparator:"' + vm.dateTimeSeparator + '"' : "") + + (vm.casingUpper !== false ? ', casing: ' + "RenderFieldCaseType.Upper" : "") + + (vm.casingLower !== false ? ', casing: ' + "RenderFieldCaseType.Lower" : "") + + (vm.encodeHtml !== false ? ', encoding: ' + "RenderFieldEncodingType.Html" : "") + + (vm.encodeUrl !== false ? ', encoding: ' + "RenderFieldEncodingType.Url" : "") + + (vm.convertLinebreaks !== false ? ', convertLineBreaks: ' + "true" : "") + + (vm.removeParagraphTags !== false ? ', removeParagraphTags: ' + "true": "") + + (vm.field ? ')' : ""); + + $scope.model.umbracoField = pageField; + + return pageField; + } - } - // encoding - function updateEncodeHtml() { - if (vm.encodeHtml) { - vm.encodeHtml = false; - return; - }else { - vm.encodeHtml = true; - if (vm.encodeUrl) { - vm.encodeUrl = false; - } - } - } - - function updateEncodeUrl() { - if (vm.encodeUrl) { - vm.encodeUrl = false; - return; - } else { - vm.encodeUrl = true; - if (vm.encodeHtml) { - vm.encodeHtml = false; - } - } - } - - $scope.updatePageField = function() { - var pageField = (vm.field !== undefined ? '@Umbraco.Field("' + vm.field + '"' : "") - + (vm.altField !== undefined ? ', altFieldAlias:"' + vm.altField + '"': "") - + (vm.altText !== undefined ? ', altText:"' + vm.altText + '"' : "") - + (vm.insertBefore !== undefined ? ', insertBefore:"' + vm.insertBefore + '"' : "") - + (vm.insertAfter !== undefined ? ', insertAfter:"' + vm.insertAfter + '"' : "") - + (vm.recursive !== false ? ', recursive: ' + vm.recursive : "") - + (vm.date !== false ? ', formatAsDate: ' + vm.date : "") - + (vm.dateTime !== false ? ', formatAsDateWithTimeSeparator:"' + vm.dateTimeSeparator + '"' : "") - + (vm.casingUpper !== false ? ', casing: ' + "RenderFieldCaseType.Upper" : "") - + (vm.casingLower !== false ? ', casing: ' + "RenderFieldCaseType.Lower" : "") - + (vm.encodeHtml !== false ? ', encoding: ' + "RenderFieldEncodingType.Html" : "") - + (vm.encodeUrl !== false ? ', encoding: ' + "RenderFieldEncodingType.Url" : "") - + (vm.convertLinebreaks !== false ? ', convertLineBreaks: ' + "true" : "") - + (vm.field ? ')' : ""); - $scope.model.umbracoField = pageField; - return pageField; - }; + onInit(); } diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/insertfield/insertfield.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/insertfield/insertfield.html index c96484e0c6..773aebd364 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/insertfield/insertfield.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/insertfield/insertfield.html @@ -1,184 +1,187 @@ -
-
-
- - - -
- -
-
-
- -
-
- - - Add alternative field
 - -
-
- - -
- - -
-
-
- - - - - Add default value - - -
- -
- - -
- - -
-
- -
- - -
-
- -

- - -
-
-
- -
- -
- - -
- -
-
- -
- -
- -
- - -
- -
-
- -
- -
-
- -
- - Date only - Date and time - -
-
-
- -
-
- -
- - Upper - lower -
-
-
- -
-
- -
- - - HTML - - URL - -
-
-
- - -
-
- -

- - -
-
-
- +
-
- -

- -

{{updatePageField()}}

+
+ +
+ +
-
+
+ + +
-
+ +
+ + Add fallback field +
+
+ +
+ +
+
+
+
+ +
+ -
+
+
+ +
+ +
+
+
+
+ + +
+
+
+ + + Yes, make it recursive +
+
+
+ +
Format and encoding
+ + +
+
+
+
+ +
+ Date only + Date and time + +
+
+
+ + +
+
+
+
+ +
+ Uppercase + Lowercase +
+
+
+ + +
+
+
+
+ +
+ HTML + URL +
+
+
+ +
Modify output
+ + +
+
+ +
+ +
+
+
+ + +
+
+ +
+ +
+
+
+ + +
+
+
+
+ +
+ + Yes, convert line breaks +
+
+
+ + +
+
+
+
+ +
+ + Yes, remove paragraph tags +
+
+
+ + +
+
+
+ + 
{{ vm.generateOutputSample() }}
+
+
+
+ +
+ +
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js index 7602f89278..0986975a02 100644 --- a/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js @@ -174,19 +174,15 @@ function openPageFieldOverlay() { vm.pageFieldOverlay = { - title: "Insert page field", - description: "Insert data in template", submitButtonLabel: "Insert", closeButtonlabel: "Cancel", view: "insertfield", show: true, - submit: function (model) { - insert(model.umbracoField); - vm.pageFieldOverlay.show = false; - vm.pageFieldOverlay = null; + insert(model.umbracoField); + vm.pageFieldOverlay.show = false; + vm.pageFieldOverlay = null; }, - close: function (model) { vm.pageFieldOverlay.show = false; vm.pageFieldOverlay = null;