convert insertfeld overlay to an infinite editor
This commit is contained in:
Mads Rasmussen
@@ -249,6 +249,23 @@
|
||||
open(editor);
|
||||
}
|
||||
|
||||
/**
|
||||
* @ngdoc method
|
||||
* @name umbraco.services.editorService#insertField
|
||||
* @methodOf umbraco.services.editorService
|
||||
*
|
||||
* @description
|
||||
* Opens the insert field editor in infinite editing, the submit callback returns the code snippet
|
||||
* @param {Callback} editor.submit Submits the editor
|
||||
* @param {Callback} editor.close Closes the editor
|
||||
* @returns {Object} editor object
|
||||
*/
|
||||
function insertField(editor) {
|
||||
editor.view = "views/common/infiniteeditors/insertfield/insertfield.html";
|
||||
editor.size = "small";
|
||||
open(editor);
|
||||
}
|
||||
|
||||
/**
|
||||
* @ngdoc method
|
||||
* @name umbraco.services.editorService#sectionPicker
|
||||
@@ -283,6 +300,7 @@
|
||||
insertCodeSnippet: insertCodeSnippet,
|
||||
userGroupPicker: userGroupPicker,
|
||||
sectionPicker: sectionPicker,
|
||||
insertField: insertField,
|
||||
userPicker: userPicker
|
||||
};
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function InsertFieldController($scope, $http, contentTypeResource, localizationService) {
|
||||
function InsertFieldController($scope, contentTypeResource, localizationService) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
@@ -29,6 +29,8 @@
|
||||
vm.setCasingOption = setCasingOption;
|
||||
vm.setEncodingOption = setEncodingOption;
|
||||
vm.generateOutputSample = generateOutputSample;
|
||||
vm.submit = submit;
|
||||
vm.close = close;
|
||||
|
||||
function onInit() {
|
||||
|
||||
@@ -139,10 +141,21 @@
|
||||
|
||||
}
|
||||
|
||||
onInit();
|
||||
function submit(model) {
|
||||
if($scope.model.submit) {
|
||||
$scope.model.submit(model);
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
if($scope.model.close) {
|
||||
$scope.model.close();
|
||||
}
|
||||
}
|
||||
|
||||
onInit();
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Overlays.InsertFieldController", InsertFieldController);
|
||||
angular.module("umbraco").controller("Umbraco.Editors.InsertFieldController", InsertFieldController);
|
||||
})();
|
||||
|
||||
@@ -1,188 +1,223 @@
|
||||
<div ng-controller="Umbraco.Overlays.InsertFieldController as vm">
|
||||
<div ng-controller="Umbraco.Editors.InsertFieldController as vm">
|
||||
|
||||
<!-- select field -->
|
||||
<div class="control-group umb-control-group -no-border">
|
||||
<div class="umb-el-wrap">
|
||||
<label class="control-label" for="chooseField"><localize key="templateEditor_chooseField">Choose field</localize></label>
|
||||
<div class="controls">
|
||||
<select ng-model="vm.field">
|
||||
<optgroup localize="label" label="@templateEditor_customFields">
|
||||
<option ng-repeat="(key, value) in vm.properties" value="{{value}}">{{value}}</option>
|
||||
</optgroup>
|
||||
<optgroup localize="label" label="@templateEditor_standardFields">
|
||||
<option ng-repeat="(key, value) in vm.standardFields" value="{{value}}">{{value}}</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<umb-editor-view>
|
||||
|
||||
<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>
|
||||
<umb-editor-header
|
||||
name="model.title"
|
||||
name-locked="true"
|
||||
hide-alias="true"
|
||||
hide-icon="true"
|
||||
hide-description="true">
|
||||
</umb-editor-header>
|
||||
|
||||
<!-- 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"><localize key="templateEditor_addFallbackField">Add fallback field</localize></a>
|
||||
<umb-editor-container>
|
||||
<umb-box>
|
||||
<umb-box-content>
|
||||
|
||||
<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="templateEditor_fallbackField">Fallback field</localize></label>
|
||||
<div class="controls">
|
||||
<select ng-model="vm.altField" id="altField">
|
||||
<optgroup localize="label" label="@templateEditor_customFields">
|
||||
<option ng-repeat="(key, value) in vm.properties" value="{{value}}">{{value}}</option>
|
||||
</optgroup>
|
||||
<optgroup localize="label" label="@templateEditor_standardFields">
|
||||
<option ng-repeat="(key, value) in vm.standardFields" value="{{value}}">{{value}}</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<!-- select field -->
|
||||
<div class="control-group umb-control-group -no-border">
|
||||
<div class="umb-el-wrap">
|
||||
<label class="control-label" for="chooseField"><localize key="templateEditor_chooseField">Choose field</localize></label>
|
||||
<div class="controls">
|
||||
<select ng-model="vm.field">
|
||||
<optgroup localize="label" label="@templateEditor_customFields">
|
||||
<option ng-repeat="(key, value) in vm.properties" value="{{value}}">{{value}}</option>
|
||||
</optgroup>
|
||||
<optgroup localize="label" label="@templateEditor_standardFields">
|
||||
<option ng-repeat="(key, value) in vm.standardFields" value="{{value}}">{{value}}</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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"><localize key="templateEditor_addDefaultValue">Add default value</localize></a>
|
||||
</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 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="templateEditor_defaultValue">Default value</localize></label>
|
||||
<div class="controls">
|
||||
<input type="text" id="altText" name="altText" ng-model="vm.altText" umb-auto-focus>
|
||||
<!-- 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"><localize key="templateEditor_addFallbackField">Add fallback field</localize></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="templateEditor_fallbackField">Fallback field</localize></label>
|
||||
<div class="controls">
|
||||
<select ng-model="vm.altField" id="altField">
|
||||
<optgroup localize="label" label="@templateEditor_customFields">
|
||||
<option ng-repeat="(key, value) in vm.properties" value="{{value}}">{{value}}</option>
|
||||
</optgroup>
|
||||
<optgroup localize="label" label="@templateEditor_standardFields">
|
||||
<option ng-repeat="(key, value) in vm.standardFields" value="{{value}}">{{value}}</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recursive -->
|
||||
<div class="control-group umb-control-group">
|
||||
<div class="umb-el-wrap">
|
||||
<div class="controls">
|
||||
<label class="control-label" >
|
||||
<localize key="templateEditor_recursive">Recursive</localize>
|
||||
</label>
|
||||
<label for="recursive">
|
||||
<input id="recursive" type="checkbox" name="recursive" ng-model="vm.recursive">
|
||||
<localize key="templateEditor_recursiveDescr">Yes, make it recursive</localize>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5><localize key="templateEditor_formatAndEncoding">Format and encoding</localize></h5>
|
||||
|
||||
<!-- Format as date -->
|
||||
<div class="control-group umb-control-group">
|
||||
<div class="umb-el-wrap">
|
||||
<div class="controls">
|
||||
<!-- Default value -->
|
||||
<div>
|
||||
<label class="control-label">
|
||||
<localize key="templateEditor_formatAsDate">Format as date</localize>
|
||||
<small><localize key="templateEditor_formatAsDateDescr">Format the value as a date, or a date with time, accoring to the active culture</localize>.</small>
|
||||
</label>
|
||||
<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"><localize key="templateEditor_addDefaultValue">Add default value</localize></a>
|
||||
</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"><localize key="templateEditor_defaultValue">Default value</localize></label>
|
||||
<div class="controls">
|
||||
<input type="text" id="altText" name="altText" ng-model="vm.altText" umb-auto-focus>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href ng-click="vm.setDateOption('date')" class="btn"><i class="icon icon-check" ng-if="vm.date"></i> <localize key="templateEditor_dateOnly">Date only</localize></a>
|
||||
<a href ng-click="vm.setDateOption('dateWithTime')" class="btn"><i class="icon icon-check" ng-if="vm.dateTime"></i> <localize key="templateEditor_withTime">Date and time</localize></a>
|
||||
<input type="text" ng-model="vm.dateTimeSeparator" ng-hide="!vm.dateTime" localize="placeholder" placeholder="@templateEditor_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">
|
||||
<localize key="templateEditor_casing">Casing</localize>
|
||||
</label>
|
||||
<!-- Recursive -->
|
||||
<div class="control-group umb-control-group">
|
||||
<div class="umb-el-wrap">
|
||||
<div class="controls">
|
||||
<label class="control-label" >
|
||||
<localize key="templateEditor_recursive">Recursive</localize>
|
||||
</label>
|
||||
<label for="recursive">
|
||||
<input id="recursive" type="checkbox" name="recursive" ng-model="vm.recursive">
|
||||
<localize key="templateEditor_recursiveDescr">Yes, make it recursive</localize>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href ng-click="vm.setCasingOption('uppercase')" class="btn" style="text-transform: uppercase;"><i class="icon icon-check" ng-if="vm.casingUpper"></i> <localize key="templateEditor_uppercase">Uppercase</localize></a>
|
||||
<a href ng-click="vm.setCasingOption('lowercase')" class="btn"style="text-transform: lowercase;"><i class="icon icon-check" ng-if="vm.casingLower"></i> <localize key="templateEditor_lowercase">Lowercase</localize></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">
|
||||
<localize key="templateEditor_encoding">Encoding</localize>
|
||||
<small><localize key="templateEditor_urlEncodeHelp">Will format special characters in URLs</localize></small>
|
||||
</label>
|
||||
<h5><localize key="templateEditor_formatAndEncoding">Format and encoding</localize></h5>
|
||||
|
||||
<!-- Format as date -->
|
||||
<div class="control-group umb-control-group">
|
||||
<div class="umb-el-wrap">
|
||||
<div class="controls">
|
||||
<div>
|
||||
<label class="control-label">
|
||||
<localize key="templateEditor_formatAsDate">Format as date</localize>
|
||||
<small><localize key="templateEditor_formatAsDateDescr">Format the value as a date, or a date with time, accoring to the active culture</localize>.</small>
|
||||
</label>
|
||||
</div>
|
||||
<a href ng-click="vm.setDateOption('date')" class="btn"><i class="icon icon-check" ng-if="vm.date"></i> <localize key="templateEditor_dateOnly">Date only</localize></a>
|
||||
<a href ng-click="vm.setDateOption('dateWithTime')" class="btn"><i class="icon icon-check" ng-if="vm.dateTime"></i> <localize key="templateEditor_withTime">Date and time</localize></a>
|
||||
<input type="text" ng-model="vm.dateTimeSeparator" ng-hide="!vm.dateTime" localize="placeholder" placeholder="@templateEditor_separator">
|
||||
</div>
|
||||
</div>
|
||||
</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><localize key="templateEditor_modifyOutput">Modify output</localize></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">
|
||||
<localize key="templateEditor_preContent">Insert before field</localize>
|
||||
<small><localize key="templateEditor_insertedBefore">Will be inserted before the field value</localize></small>
|
||||
</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="insertBefore" 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">
|
||||
<localize key="templateEditor_postContent">Insert after field</localize>
|
||||
<small><localize key="templateEditor_insertedAfter">Will be inserted after the field value</localize></small>
|
||||
</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="insertAfter" 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">
|
||||
<localize key="templateEditor_convertLineBreaks">Convert line breaks</localize>
|
||||
<small><localize key="templateEditor_convertLineBreaksHelp">Replaces line breaks with break html tag</localize></small>
|
||||
</label>
|
||||
<!-- Format casing -->
|
||||
<div class="control-group umb-control-group">
|
||||
<div class="umb-el-wrap">
|
||||
<div class="controls">
|
||||
<div>
|
||||
<label class="control-label">
|
||||
<localize key="templateEditor_casing">Casing</localize>
|
||||
</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> <localize key="templateEditor_uppercase">Uppercase</localize></a>
|
||||
<a href ng-click="vm.setCasingOption('lowercase')" class="btn"style="text-transform: lowercase;"><i class="icon icon-check" ng-if="vm.casingLower"></i> <localize key="templateEditor_lowercase">Lowercase</localize></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label for="linebreaks">
|
||||
<input type="checkbox" id="linebreaks" name="linebreaks" ng-model="vm.convertLinebreaks">
|
||||
<localize key="templateEditor_convertLineBreaksDescription">Yes, convert line breaks</localize>
|
||||
</label>
|
||||
</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"><localize key="templateEditor_outputSample">Output sample</localize></label>
|
||||
<pre>{{ vm.generateOutputSample() }}</pre>
|
||||
</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">
|
||||
<localize key="templateEditor_encoding">Encoding</localize>
|
||||
<small><localize key="templateEditor_urlEncodeHelp">Will format special characters in URLs</localize></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>
|
||||
|
||||
</div>
|
||||
<h5><localize key="templateEditor_modifyOutput">Modify output</localize></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">
|
||||
<localize key="templateEditor_preContent">Insert before field</localize>
|
||||
<small><localize key="templateEditor_insertedBefore">Will be inserted before the field value</localize></small>
|
||||
</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="insertBefore" 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">
|
||||
<localize key="templateEditor_postContent">Insert after field</localize>
|
||||
<small><localize key="templateEditor_insertedAfter">Will be inserted after the field value</localize></small>
|
||||
</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="insertAfter" 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">
|
||||
<localize key="templateEditor_convertLineBreaks">Convert line breaks</localize>
|
||||
<small><localize key="templateEditor_convertLineBreaksHelp">Replaces line breaks with break html tag</localize></small>
|
||||
</label>
|
||||
</div>
|
||||
<label for="linebreaks">
|
||||
<input type="checkbox" id="linebreaks" name="linebreaks" ng-model="vm.convertLinebreaks">
|
||||
<localize key="templateEditor_convertLineBreaksDescription">Yes, convert line breaks</localize>
|
||||
</label>
|
||||
</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"><localize key="templateEditor_outputSample">Output sample</localize></label>
|
||||
<pre>{{ vm.generateOutputSample() }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
</umb-editor-container>
|
||||
|
||||
<umb-editor-footer>
|
||||
<umb-editor-footer-content-right>
|
||||
<umb-button
|
||||
type="button"
|
||||
button-style="link"
|
||||
label-key="general_close"
|
||||
action="vm.close()">
|
||||
</umb-button>
|
||||
<umb-button
|
||||
type="button"
|
||||
button-style="success"
|
||||
label-key="general_submit"
|
||||
action="vm.submit(model)">
|
||||
</umb-button>
|
||||
</umb-editor-footer-content-right>
|
||||
</umb-editor-footer>
|
||||
|
||||
</umb-editor-view>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user