Merge branch 'v8/feature/block-editor' of https://github.com/callumbwhyte/Umbraco-CMS into v8/feature/block-editor

This commit is contained in:
Kenn Jacobsen
2019-05-20 11:06:55 +02:00
3 changed files with 178 additions and 25 deletions
@@ -0,0 +1,92 @@
<div>
<umb-editor-view>
<umb-editor-header name="model.title"
name-locked="true"
hide-alias="true"
hide-icon="true"
hide-description="true">
</umb-editor-header>
<umb-editor-container class="block-form">
<umb-box>
<umb-box-content>
<div class="content-type-editor-dialog edit-property-settings">
<div class="umb-control-group" ng-if="!model.property.locked">
<div class="control-group">
<textarea class="editor-label"
data-element="property-name"
name="propertyLabel"
ng-model="model.property.label"
localize="placeholder"
placeholder="@placeholders_entername"
umb-auto-focus
focus-on-filled="true"
umb-auto-resize
required
ng-keypress="vm.submitOnEnter($event)">
</textarea>
</div>
<div class="control-group -no-margin">
<umb-generate-alias enable-lock="true" alias-from="model.property.label" alias="model.property.alias"></umb-generate-alias>
</div>
</div>
<div class="editor-wrapper umb-control-group control-group" ng-model="model.property.editor" val-require-component ng-if="!model.property.locked">
<a data-element="editor-add" href="" ng-if="!model.property.editor" class="editor-placeholder" hotkey="alt+shift+e" ng-click="vm.openDataTypePicker(model.property)">
<localize key="shortcuts_addEditor"></localize>
</a>
<div class="editor clearfix" ng-if="model.property.editor">
<a href="" class="editor-icon-wrapper" ng-click="vm.openDataTypePicker(model.property)">
<i class="icon {{ model.property.dataTypeIcon }}" ng-class="{'icon-autofill': model.property.dataTypeIcon == null}"></i>
</a>
<div class="editor-details">
<a href="" class="editor-name" ng-click="vm.openDataTypePicker(model.property)">{{ model.property.dataTypeName }}</a>
<a href="" class="editor-editor" ng-click="vm.openDataTypePicker(model.property)">{{ model.property.editor }}</a>
</div>
<a href class="editor-settings-icon pull-right"
ng-click="vm.openDataTypeSettings(model.property)"
hotkey="alt+shift+d"
ng-if="model.property.editor">
<i class="icon icon-settings"></i>
</a>
</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"
shortcut="esc"
action="close()">
</umb-button>
<umb-button type="button"
button-style="success"
label-key="general_submit"
state="saveButtonState"
action="submit(model)">
</umb-button>
</umb-editor-footer-content-right>
</umb-editor-footer>
</umb-editor-view>
</div>
@@ -2,28 +2,77 @@
.controller("Umbraco.PropertyEditors.BlockEditor.SettingsController", [
"$scope",
"contentTypeResource",
function ($scope, contentTypeResource) {
if (!$scope.model.value) {
$scope.model.value = [];
}
$scope.addBlock = function (elementType) {
var block = {
elementType: elementType.udi,
settings: null
};
$scope.model.value.push(block);
}
"editorService",
function ($scope, contentTypeResource, editorService) {
$scope.blocks = [];
$scope.elementTypes = [];
if ($scope.model.value) {
$scope.blocks = $scope.model.value;
}
contentTypeResource.getAll()
.then(function (data) {
$scope.elementTypes = _.where(data, { isElement: true });
.then(function (contentType) {
$scope.elementTypes.push(contentType);
});
$scope.addBlock = function () {
var block = {};
openElementPicker(block);
};
$scope.removeBlock = function (index) {
$scope.blocks.splice(index, 1);
};
$scope.editSettings = function (block) {
openSettingsPicker(block);
};
function openElementPicker(block) {
var pickerOptions = {
title: "Pick an element type",
view: "views/common/infiniteeditors/treepicker/treepicker.html",
size: "small",
multiPicker: false,
section: "settings",
treeAlias: "documentTypes",
entityType: "documentType",
submit: function (model) {
_.each(model.selection, function (elementType) {
block.elementType = elementType.udi;
$scope.blocks.push(block);
});
editorService.close();
},
close: function () {
editorService.close();
}
};
editorService.open(pickerOptions);
}
function openSettingsPicker(block) {
var pickerOptions = {
title: "Block settings",
view: "views/propertyeditors/blockeditor/block.settings.html",
size: "small",
submit: function (model) {
block.settings = model;
editorService.close();
},
close: function () {
editorService.close();
}
};
editorService.open(pickerOptions);
}
}
]
);
@@ -1,11 +1,23 @@
<div ng-controller="Umbraco.PropertyEditors.BlockEditor.SettingsController">
<pre>
{{model.value | json}}
</pre>
<ul>
<li ng-repeat="elementType in elementTypes">
{{elementType.name}} <a href="" ng-click="addBlock(elementType)">Add</a>
</li>
</ul>
<pre>{{model.value | json}}</pre>
<div ng-repeat="block in blocks">
<strong>
{{block.elementType}}
</strong>
<a href="" ng-click="editSettings(block)">
<localize key="general_settings">Settings</localize>
</a>
<a href="" ng-click="removeBlock($index)">
<localize key="general_remove">Remove</localize>
</a>
</div>
<a href="" class="umb-node-preview-add" ng-click="addBlock()">
<localize key="general_add">Add</localize>
</a>
</div>