yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clean up insert field overlay

Browse Source
This commit is contained in:
Mads Rasmussen
2016-11-17 09:31:35 +01:00
parent 6c5d2c8057
commit 1a80e94bca
3 changed files with 300 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
src/Umbraco.Web.UI.Client/src/views/common/overlays/insertfield/insertfield.controller.js
View File

@@ -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();
}

351
src/Umbraco.Web.UI.Client/src/views/common/overlays/insertfield/insertfield.html
View File

@@ -1,184 +1,187 @@
<div ng-controller="Umbraco.Overlays.InsertFieldController as vm">
<div class="control-group umb-control-group -no-border">
<div class="umb-el-wrap">
<label class="control-label" for="chooseField">
<!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
Choose field
</label>
<div class="controls">
<select name="chooseField" ng-model="vm.field">
<option value="{{property}}" ng-repeat="property in vm.properties">{{property}}</option>
</select>
</div>
</div>
</div>
<div class="advanced" style="position:relative">
<div class="hideAdvanced" style="position:absolute;height:100%;width:100%;background-color:white;opacity:.7;" ng-hide="vm.field"></div>
<i class="icon icon-add blue" ng-hide="vm.showAltField"></i>
<a ng-click="vm.showAltField=true" ng-hide="vm.showAltField">Add alternative field<br></a>
<div class="control-group umb-control-group -no-border" ng-hide="!vm.showAltField">
<div class="umb-el-wrap">
<label class="control-label" for="altField">
<!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
Alternative Field
</label>
<div class="controls">
<select name="altField" ng-model="vm.altField">
<option value="{{property}}" ng-repeat="property in vm.properties">{{property}}</option>
</select>
<!-- <input type="text" class="umb-editor ng-pristine ng-valid ng-valid-required" umb-auto-focus="" focus-on-filled="true" required=""> -->
</div>
</div>
</div>
<i class="icon icon-add blue" ng-hide="vm.showAltText"></i>
<a ng-click="vm.showAltText=true" ng-hide="vm.showAltText">
<!-- <localize key="general_choose" class="ng-isolate-scope ng-scope">Choose</localize>... -->
Add default value
</a>
<div class="control-group umb-control-group -no-border" ng-hide="!vm.showAltText">
<div class="umb-el-wrap">
<label class="control-label" for="altText">
<!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
Alternative text
</label>
<div class="controls">
<input type="text" name="altText" ng-model="vm.altText">
<!-- <input type="text" class="umb-editor ng-pristine ng-valid ng-valid-required" umb-auto-focus="" focus-on-filled="true" required=""> -->
</div>
</div>
</div>
<div class="control-group umb-control-group">
<div class="umb-el-wrap">
<div class="controls"><br>
<label class="control-label" for="recursive">
<!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
Recursive?
</label>
<input type="checkbox" name="recursive" ng-model="vm.recursive">
</div>
</div>
</div>
<div class="control-group umb-control-group -no-border ng-scope">
<div class="umb-el-wrap">
<label class="control-label" for="insertBefore">
<!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
Insert before field
</label>
<div class="controls">
<input type="text" name="insertBefore" ng-model="vm.insertBefore" on-focus="vm.showInsertPreview()" ng-change="vm.updateInsertPreview()" on-blur="vm.hideInsertPreview()">
</div>
</div>
</div>
<div class="control-group umb-control-group">
<div class="umb-el-wrap">
<label class="control-label" for="insertAfter">
<!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
Insert after field
</label>
<div class="controls">
<input type="text" name="insertAfter" ng-model="vm.insertAfter" on-focus="vm.showInsertPreview()" ng-change="vm.updateInsertPreview()" on-blur="vm.hideInsertPreview()">
</div>
</div>
</div>
<div class="control-group umb-control-group">
<div class="umb-el-wrap">
<div class="controls">
<label class="control-label" for="date">
<!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
Format as date
</label>
<a href ng-click="vm.updateDate()" class="btn">Date only</a>
<a href ng-click="vm.updateDateTime()" class="btn">Date and time</a>
<input type="text" ng-model="vm.dateTimeSeparator" ng-hide="!vm.dateTime" placeholder="separator">
</div>
</div>
</div>
<div class="control-group umb-control-group">
<div class="umb-el-wrap">
<div class="controls">
<label class="control-label" for="date">
<!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
Casing </label>
<a href ng-click="vm.updateUpper()" class="btn">Upper</a>
<a href ng-click="vm.updateLower()" class="btn">lower</a>
</div>
</div>
</div>
<div class="control-group umb-control-group">
<div class="umb-el-wrap">
<div class="controls">
<label class="control-label" for="date">
<!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
Encoding </label>
<a href ng-click="vm.updateEncodeHtml()" class="btn">
HTML</a>
<a href ng-click="vm.updateEncodeUrl()" class="btn">
URL</a>
</div>
</div>
</div>
<div class="control-group umb-control-group">
<div class="umb-el-wrap">
<div class="controls"><br>
<label class="control-label" for="recursive">
<!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
Convert line breaks?
</label>
<input type="checkbox" name="linebreaks" ng-model="vm.convertLinebreaks">
</div>
</div>
</div>
<!-- select field -->
<div class="control-group umb-control-group -no-border">
<div class="umb-el-wrap">
<div class="controls"><br>
<label class="control-label" for="recursive">
<!-- <localize key="name" class="ng-isolate-scope ng-scope">Name</localize> -->
Output sample
</label>
<p>{{updatePageField()}}</p>
<div class="umb-el-wrap">
<label class="control-label" for="chooseField">Choose field</label>
<div class="controls">
<select name="chooseField" ng-model="vm.field" ng-options="property for property in vm.properties"></select>
</div>
</div>
</div>
</div>
<div class="advanced" style="position:relative">
<!-- Overlay -->
<div class="hideAdvanced" style="position:absolute;height:100%;width:100%;background-color:white;opacity:.7;" ng-hide="vm.field"></div>
</div>
<!-- Fallback field -->
<div>
<i class="icon icon-add blue" ng-hide="vm.showAltField"></i>
<a href="" ng-click="vm.showAltField=true" ng-hide="vm.showAltField">Add fallback field</a>
<div class="control-group umb-control-group -no-border" ng-hide="!vm.showAltField">
<div class="umb-el-wrap">
<label class="control-label" for="altField">Fallback field</label>
<div class="controls">
<select name="altField" ng-model="vm.altField" ng-options="property for property in vm.properties"></select>
</div>
</div>
</div>
</div>
<!-- Default value -->
<div>
<div style="margin-bottom: 20px;">
<i class="icon icon-add blue" ng-hide="vm.showAltText"></i>
<a href="" ng-click="vm.showAltText=true" ng-hide="vm.showAltText">Add default value</a>
</div>
</div>
<div class="control-group umb-control-group -no-border" ng-hide="!vm.showAltText">
<div class="umb-el-wrap">
<label class="control-label" for="altText">Default value</label>
<div class="controls">
<input type="text" name="altText" ng-model="vm.altText" umb-auto-focus>
</div>
</div>
</div>
</div>
<!-- Recursive -->
<div class="control-group umb-control-group">
<div class="umb-el-wrap">
<div class="controls">
<label class="control-label" for="recursive">
Recursive
<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
</label>
<input type="checkbox" name="recursive" ng-model="vm.recursive">
Yes, make it recursive
</div>
</div>
</div>
<h5>Format and encoding</h5>
<!-- Format as date -->
<div class="control-group umb-control-group">
<div class="umb-el-wrap">
<div class="controls">
<div>
<label class="control-label">
Format as date
<small>Format the value as a date, or a date with time, accoring to the active culture.</small>
</label>
</div>
<a href ng-click="vm.setDateOption('date')" class="btn"><i class="icon icon-check" ng-if="vm.date"></i> Date only</a>
<a href ng-click="vm.setDateOption('dateWithTime')" class="btn"><i class="icon icon-check" ng-if="vm.dateTime"></i> Date and time</a>
<input type="text" ng-model="vm.dateTimeSeparator" ng-hide="!vm.dateTime" placeholder="separator">
</div>
</div>
</div>
<!-- Format casing -->
<div class="control-group umb-control-group">
<div class="umb-el-wrap">
<div class="controls">
<div>
<label class="control-label">
Casing
<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
</label>
</div>
<a href ng-click="vm.setCasingOption('uppercase')" class="btn" style="text-transform: uppercase;"><i class="icon icon-check" ng-if="vm.casingUpper"></i> Uppercase</a>
<a href ng-click="vm.setCasingOption('lowercase')" class="btn"style="text-transform: lowercase;"><i class="icon icon-check" ng-if="vm.casingLower"></i> Lowercase</a>
</div>
</div>
</div>
<!-- Format encoding -->
<div class="control-group umb-control-group">
<div class="umb-el-wrap">
<div class="controls">
<div>
<label class="control-label">
Encoding
<small>Will format special characters in URLs</small>
</label>
</div>
<a href ng-click="vm.setEncodingOption('html')" class="btn"><i class="icon icon-check" ng-if="vm.encodeHtml"></i> HTML</a>
<a href ng-click="vm.setEncodingOption('url')" class="btn"><i class="icon icon-check" ng-if="vm.encodeUrl"></i> URL</a>
</div>
</div>
</div>
<h5>Modify output</h5>
<!-- Insert Before -->
<div class="control-group umb-control-group -no-border ng-scope">
<div class="umb-el-wrap">
<label class="control-label" for="insertBefore">
Insert before field
<small>Will be inserted before the field value</small>
</label>
<div class="controls">
<input type="text" name="insertBefore" class="-full-width-input" ng-model="vm.insertBefore">
</div>
</div>
</div>
<!-- Insert after -->
<div class="control-group umb-control-group">
<div class="umb-el-wrap">
<label class="control-label" for="insertAfter">
Insert after field
<small>Will be inserted after the field value</small>
</label>
<div class="controls">
<input type="text" name="insertAfter" class="-full-width-input" ng-model="vm.insertAfter">
</div>
</div>
</div>
<!-- Line breaks -->
<div class="control-group umb-control-group">
<div class="umb-el-wrap">
<div class="controls">
<div>
<label class="control-label" for="linebreaks">
Convert line breaks
<small>Replaces line breaks with break html tag</small>
</label>
</div>
<input type="checkbox" name="linebreaks" ng-model="vm.convertLinebreaks">
Yes, convert line breaks
</div>
</div>
</div>
<!-- Remove paragraph tags -->
<div class="control-group umb-control-group">
<div class="umb-el-wrap">
<div class="controls">
<div>
<label class="control-label" for="paragraph">
Remove paragraph tags
<small>Will remove any paragraph tag in the beginning and end of the text</small>
</label>
</div>
<input type="checkbox" name="paragraph" ng-model="vm.removeParagraphTags">
Yes, remove paragraph tags
</div>
</div>
</div>
<!-- Output -->
<div class="control-group umb-control-group -no-border">
<div class="umb-el-wrap">
<div class="controls">
<label class="control-label">Output sample</label>
<pre>{{ vm.generateOutputSample() }}</pre>
</div>
</div>
</div>
</div>
</div>

10
src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
View File

@@ -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;