Block Editor: Clean-up, refactoring, one step closer being ready for Content-Apps
This commit is contained in:
Niels Lyngsø
@@ -5,6 +5,6 @@
|
||||
<span>{{block.label}}</span>
|
||||
</button>
|
||||
<div class="blockelement-inlineblock-editor__inner" ng-if="bc.isOpen === true">
|
||||
<umb-element-content-editor content="block.content"></umb-element-content-editor>
|
||||
<umb-element-editor-content model="block.content"></umb-element-editor-content>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,45 +4,48 @@ angular.module("umbraco")
|
||||
function ($scope) {
|
||||
var vm = this;
|
||||
|
||||
function showContent() {
|
||||
if (vm.settingsTab) vm.settingsTab.active = false;
|
||||
vm.contentTab.active = true;
|
||||
}
|
||||
|
||||
function showSettings() {
|
||||
if (vm.settingsTab) vm.settingsTab.active = true;
|
||||
vm.contentTab.active = false;
|
||||
}
|
||||
|
||||
vm.content = $scope.model.content;
|
||||
vm.settings = $scope.model.settings;
|
||||
|
||||
vm.model = $scope.model;
|
||||
console.log("blockeditor model:", vm.model)
|
||||
|
||||
vm.tabs = [];
|
||||
var settingsOnly = vm.content && vm.content.variants ? false : true;
|
||||
|
||||
if (!settingsOnly) {
|
||||
vm.contentTab = {
|
||||
"name": "Content",
|
||||
"alias": "content",
|
||||
"icon": "icon-document",
|
||||
"action": showContent,
|
||||
"active": true
|
||||
};
|
||||
if (vm.content && vm.content.variants) {
|
||||
|
||||
vm.tabs.push(vm.contentTab);
|
||||
var apps = vm.content.apps;
|
||||
|
||||
vm.tabs = apps;
|
||||
|
||||
// replace view of content app.
|
||||
var contentApp = apps.find(entry => entry.alias === "umbContent");
|
||||
contentApp.view = "views/common/infiniteeditors/elementeditor/elementeditor.content.html";
|
||||
|
||||
if($scope.model.hideContent) {
|
||||
apps.splice(apps.indexOf(contentApp), 1);
|
||||
}
|
||||
|
||||
// remove info app:
|
||||
var infoAppIndex = apps.findIndex(entry => entry.alias === "umbInfo");
|
||||
apps.splice(infoAppIndex, 1);
|
||||
|
||||
}
|
||||
|
||||
if (vm.settings && vm.settings.variants) {
|
||||
vm.settingsTab = {
|
||||
var settingsTab = {
|
||||
"name": "Settings",
|
||||
"alias": "settings",
|
||||
"icon": "icon-settings",
|
||||
"action": showSettings,
|
||||
"active": settingsOnly
|
||||
"view": "views/common/infiniteeditors/elementeditor/elementeditor.settings.html"
|
||||
};
|
||||
vm.tabs.push(vm.settingsTab);
|
||||
vm.tabs.push(settingsTab);
|
||||
}
|
||||
|
||||
vm.title = (settingsOnly ? 'SETTINGS: ' : '') + $scope.model.title;
|
||||
// activate frst app:
|
||||
if (vm.tabs.length > 0) {
|
||||
vm.tabs[0].active = true;
|
||||
}
|
||||
|
||||
vm.saveAndClose = function () {
|
||||
if ($scope.model && $scope.model.submit) {
|
||||
@@ -52,6 +55,7 @@ angular.module("umbraco")
|
||||
|
||||
vm.close = function() {
|
||||
if ($scope.model && $scope.model.close) {
|
||||
// TODO: If content has changed, we should notify user.
|
||||
$scope.model.close($scope.model);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<umb-editor-view umb-tabs ng-if="!page.loading">
|
||||
|
||||
<umb-editor-header
|
||||
name="vm.title"
|
||||
name="vm.model.title"
|
||||
name-locked="true"
|
||||
navigation="vm.tabs"
|
||||
hide-alias="true"
|
||||
@@ -15,28 +15,17 @@
|
||||
|
||||
<div class="umb-editor-container umb-panel-body umb-scrollable row-fluid">
|
||||
|
||||
<!-- Missing Deleted Message Bar (Displayed when viewing node in recycle bin), but Blocks dosnt go into trash-bin, so does not make sense currently
|
||||
<!-- Missing Deleted Message Bar (Displayed when viewing node in recycle bin), but Blocks dosnt go into trash-bin jet...
|
||||
<div ng-show="vm.content.trashed" class="umb-editor--trashed-message">
|
||||
<i class="icon icon-trash"></i> <localize key="content_nodeIsInTrash">This item is in the Recycle Bin</localize>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- Missing content apps? — but i'm not sure content apps will or can work for ElementTypes? -->
|
||||
<div ng-show="vm.contentTab.active">
|
||||
<div class="umb-pane">
|
||||
<div class="umb-editor-sub-views" val-sub-view>
|
||||
<umb-element-content-editor content="vm.content"></umb-element-content-editor>
|
||||
</div>
|
||||
</div>
|
||||
<div class="umb-pane">
|
||||
<umb-editor-sub-views sub-views="vm.tabs" model="vm.model">
|
||||
</umb-editor-sub-views>
|
||||
</div>
|
||||
|
||||
<div ng-show="vm.settingsTab.active">
|
||||
<div class="umb-pane" ng-if="vm.settings">
|
||||
<div class="umb-editor-sub-views" val-sub-view>
|
||||
<umb-element-content-editor content="vm.settings"></umb-element-content-editor>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<umb-editor-footer>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<ng-form name="elementTypeContentForm">
|
||||
<div class="umb-group-panel"
|
||||
data-element="group-{{group.alias}}"
|
||||
ng-repeat="group in vm.content.variants[0].tabs track by group.label">
|
||||
ng-repeat="group in vm.model.variants[0].tabs track by group.label">
|
||||
|
||||
<div class="umb-group-panel__header">
|
||||
<div id="group-{{group.id}}">{{ group.label }}</div>
|
||||
@@ -13,13 +13,13 @@
|
||||
data-element="property-{{property.alias}}"
|
||||
ng-repeat="property in group.properties track by property.alias"
|
||||
property="property"
|
||||
show-inherit="vm.content.variants.length > 1 && !property.culture && !activeVariant.language.isDefault"
|
||||
show-inherit="vm.model.variants.length > 1 && !property.culture && !activeVariant.language.isDefault"
|
||||
inherits-from="defaultVariant.language.name">
|
||||
|
||||
<div ng-class="{'o-40 cursor-not-allowed': vm.content.variants.length > 1 && !activeVariant.language.isDefault && !property.culture && !property.unlockInvariantValue}">
|
||||
<div ng-class="{'o-40 cursor-not-allowed': vm.model.variants.length > 1 && !activeVariant.language.isDefault && !property.culture && !property.unlockInvariantValue}">
|
||||
<umb-property-editor
|
||||
model="property"
|
||||
preview="vm.content.variants.length > 1 && !activeVariant.language.isDefault && !property.culture && !property.unlockInvariantValue">
|
||||
preview="vm.model.variants.length > 1 && !activeVariant.language.isDefault && !property.culture && !property.unlockInvariantValue">
|
||||
</umb-property-editor>
|
||||
</div>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
</div>
|
||||
|
||||
<umb-empty-state
|
||||
ng-if="vm.content.tabs.length === 0"
|
||||
ng-if="vm.model.tabs.length === 0"
|
||||
position="center">
|
||||
<localize key="content_noProperties"></localize>
|
||||
</umb-empty-state>
|
||||
@@ -3,16 +3,16 @@
|
||||
|
||||
angular
|
||||
.module('umbraco.directives')
|
||||
.component('umbElementContentEditor', {
|
||||
templateUrl: 'views/common/infiniteeditors/elementeditor/elementContentEditor.component.html',
|
||||
controller: ElementEditorComponentController,
|
||||
.component('umbElementEditorContent', {
|
||||
templateUrl: 'views/common/infiniteeditors/elementeditor/elementEditor.content.component.html',
|
||||
controller: ElementEditorContentComponentController,
|
||||
controllerAs: 'vm',
|
||||
bindings: {
|
||||
content: '='
|
||||
model: '='
|
||||
}
|
||||
});
|
||||
|
||||
function ElementEditorComponentController() {
|
||||
function ElementEditorContentComponentController() {
|
||||
|
||||
// TODO: we might not need this..
|
||||
|
||||
@@ -1 +1,3 @@
|
||||
<umb-content-element-editor content="vm.content"></umb-content-element-editor>
|
||||
<div>
|
||||
<umb-element-editor-content model="model.content"></umb-element-editor-content>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<umb-element-editor-content model="model.settings"></umb-element-editor-content>
|
||||
@@ -19,7 +19,7 @@
|
||||
</div>
|
||||
|
||||
<div class="umb-block-list__block--actions">
|
||||
<button type="button" class="btn-reset action --copy" localize="title" title="actions_editSettings" ng-click="vm.blockEditorApi.openSettingsForBlock(block);" ng-if="block.showSettings === true">
|
||||
<button type="button" class="btn-reset action --settings" localize="title" title="actions_editSettings" ng-click="vm.blockEditorApi.openSettingsForBlock(block);" ng-if="block.showSettings === true">
|
||||
<i class="icon icon-settings" aria-hidden="true"></i>
|
||||
<span class="sr-only">
|
||||
<localize key="general_settings">Settings</localize>
|
||||
|
||||
@@ -183,26 +183,28 @@
|
||||
}
|
||||
|
||||
function editBlock(blockModel, hideContent) {
|
||||
if (hideContent && !blockModel.config.settingsElementTypeAlias) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// make a clone to avoid editing model directly.
|
||||
var blockContentModelClone = angular.copy(hideContent ? null : blockModel.content);
|
||||
var blockSettingsModelClone = angular.copy(blockModel.settings);
|
||||
var blockContentModelClone = angular.copy(blockModel.content);
|
||||
var blockSettingsModelClone = null;
|
||||
|
||||
if (blockModel.config.settingsElementTypeAlias) {
|
||||
blockSettingsModelClone = angular.copy(blockModel.settings);
|
||||
}
|
||||
|
||||
var blockEditorModel = {
|
||||
content: blockContentModelClone,
|
||||
hideContent: hideContent,
|
||||
settings: blockSettingsModelClone,
|
||||
title: blockModel.label,
|
||||
view: "views/common/infiniteeditors/blockeditor/blockeditor.html",
|
||||
size: blockModel.config.overlaySize || "medium",
|
||||
submit: function(blockEditorModel) {
|
||||
// To ensure syncronization gets tricked we transfer
|
||||
if (!hideContent) {
|
||||
if (blockEditorModel.content !== null) {
|
||||
blockEditorService.mapElementTypeValues(blockEditorModel.content, blockModel.content)
|
||||
}
|
||||
if (blockModel.config.settingsElementTypeAlias) {
|
||||
if (blockModel.config.settingsElementTypeAlias !== null) {
|
||||
blockEditorService.mapElementTypeValues(blockEditorModel.settings, blockModel.settings)
|
||||
}
|
||||
editorService.close();
|
||||
|
||||
Reference in New Issue
Block a user