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

block list editor better naming

Browse Source
This commit is contained in:
Niels Lyngsø
2020-03-04 13:44:53 +01:00
parent 5c47352b0e
commit 0c2a03bd46
2 changed files with 49 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Umbraco.Web.UI.Client/src/common/services/blockeditor.service.js
+21 -23
View File
@@ -134,10 +134,11 @@
},
/**
* Retrieve editing model of a layout entry
* Retrieve editor friendly model of a block.
* @param {Object} layoutEntry the layout entry to build the block model from.
* @return {Object} Scaffolded Block Content object.
*/
getEditingModel: function(layoutEntry) {
getBlockModel: function(layoutEntry) {
var udi = layoutEntry.udi;
@@ -150,9 +151,9 @@
return null;
}
var editingModel = {};
editingModel.config = angular.copy(blockConfiguration);
editingModel.labelInterpolator = $interpolate(editingModel.config.label);
var blockModel = {};
blockModel.config = angular.copy(blockConfiguration);
blockModel.labelInterpolator = $interpolate(blockModel.config.label);
var scaffold = this.getScaffoldFor(blockConfiguration.contentTypeAlias);
if(scaffold === null) {
@@ -160,30 +161,30 @@
}
// make basics from scaffold
editingModel.content = angular.copy(scaffold);
editingModel.content.udi = udi;
blockModel.content = angular.copy(scaffold);
blockModel.content.udi = udi;
mapToElementTypeModel(editingModel.content, contentModel);
mapToElementTypeModel(blockModel.content, contentModel);
editingModel.contentModel = contentModel;
editingModel.layoutModel = layoutEntry;
blockModel.contentModel = contentModel;
blockModel.layoutModel = layoutEntry;
// TODO: settings
return editingModel;
return blockModel;
},
/**
* Retrieve editing model of a layout entry
* Retrieve block model of a layout entry
* @return {Object} Scaffolded Block Content object.
*/
setDataFromEditingModel: function(editingModel) {
setDataFromBlockModel: function(blockModel) {
var udi = editingModel.content.key;
var udi = blockModel.content.key;
mapToPropertyModel(editingModel.content, editingModel.contentModel);
mapToPropertyModel(blockModel.content, blockModel.contentModel);
// TODO: sync settings to layout entry.
@@ -269,9 +270,6 @@
mapToPropertyModel(elementTypeContentModel, contentModel);
console.log(elementTypeContentModel)
console.log(contentModel)
return layoutEntry;
}
@@ -281,24 +279,24 @@
createModelObject: function(propertyModelValue, propertyEditorAlias, blockConfigurations) {
return new BlockEditorModelObject(propertyModelValue, propertyEditorAlias, blockConfigurations);
},
getBlockLabel: function(blockModelObject) {
getBlockLabel: function(blockModel) {
// TODO: we should do something about this for performance.
var vars = new Object();
var variant = blockModelObject.content.variants[0];
var variant = blockModel.content.variants[0];
var tab = variant.tabs[0];
// TODO: need to look up all tabs...
for(const property of tab.properties) {
vars[property.alias] = property.value;
}
if(blockModelObject.labelInterpolator) {
return blockModelObject.labelInterpolator(vars);
if(blockModel.labelInterpolator) {
return blockModel.labelInterpolator(vars);
}
return blockModelObject.contentTypeName;
return blockModel.contentTypeName;
}
}
}
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js
+28 -63
View File
@@ -32,8 +32,8 @@
vm.moveFocusToBlock = null;
vm.showCopy = clipboardService.isSupported();
vm.layout = [];// Property models layout object specific to this Block Editor.
vm.blocks = [];// Runtime model of editing models, needs to be synced to property model on form submit.
vm.layout = [];// The layout object specific to this Block Editor, will be a direct reference from Property Model.
vm.blocks = [];// Runtime list of block models, needs to be synced to property model on form submit.
vm.availableBlockTypes = [];// Available block entries of this property editor.
var labels = {};
@@ -93,16 +93,25 @@
function loaded() {
vm.layout = modelObject.getLayout();
mapToBlocks();
// maps layout entries to editor friendly models.
vm.layout.forEach(entry => {
var block = getBlockModel(entry);
if(block !== null) {
vm.blocks.push(block);
}
});
vm.availableContentTypes = modelObject.getAvailableAliasesForBlockContent();
vm.availableBlockTypes = modelObject.getAvailableBlocksForItemPicker();
$scope.$apply();
}
function getEditingModel(entry) {
var block = modelObject.getEditingModel(entry);
function getBlockModel(entry) {
var block = modelObject.getBlockModel(entry);
if (block === null) return null;
@@ -111,50 +120,6 @@
return block;
}
/**
* Maps property model to the runtime editing model (blocks).
*/
function mapToBlocks() {
// clear blocks.
vm.blocks = [];
// make all blocks.
vm.layout.forEach(entry => {
var block = getEditingModel(entry);
if(block !== null) {
vm.blocks.push(block);
}
});
$scope.$apply();
}
/**
* Maps content from runtime editing model (blocks) to the property model.
* Does not take care of ordering, we need the sort-UI to sync that, on the fly.
*/
/*
function mapToContent() {
// sync data from blocks to content models.
vm.blocks.forEach(block => {
modelObject.setDataFromEditingModel(block);
});
}
*/
/*
function sync() {
// to avoid deep watches of block editors we use an event for those instead?
// Lets inform container of this property editor that we updated.
$scope.$emit("blockEditorValueUpdated");
}
*/
/*
function syncBlockData(block) {
modelObject.setDataFromEditingModel(block);
}
*/
function addNewBlock(index, contentTypeAlias) {
@@ -164,19 +129,19 @@
return false;
}
// make editing object
var blockEditingObject = getEditingModel(layoutEntry);
if (blockEditingObject === null) {
// make block model
var blockModel = getBlockModel(layoutEntry);
if (blockModel === null) {
return false;
}
// add layout entry at the decired location in layout.
vm.layout.splice(index, 0, layoutEntry);
// apply editing model at decired location in editing model.
vm.blocks.splice(index, 0, blockEditingObject);
// apply block model at decired location in blocks.
vm.blocks.splice(index, 0, blockModel);
vm.moveFocusToBlock = blockEditingObject;
vm.moveFocusToBlock = blockModel;
return true;
@@ -215,7 +180,7 @@
submit: function(elementEditorModel) {
blockModel.content = elementEditorModel.content;
// TODO, investigate if we need to call a sync, for this scenario to work.. Concern is regarding wether the property-value watcher will pick this up.
//modelObject.setDataFromEditingModel(block);
//modelObject.setDataFromBlockModel(block);
editorService.close();
},
close: function() {
@@ -344,19 +309,19 @@
return false;
}
// make editing object
var blockEditingObject = getEditingModel(layoutEntry);
if (blockEditingObject === null) {
// make block model
var blockModel = getBlockModel(layoutEntry);
if (blockModel === null) {
return false;
}
// add layout entry at the decired location in layout.
// insert layout entry at the decired location in layout.
vm.layout.splice(index, 0, layoutEntry);
// apply editing model at decired location in editing model.
vm.blocks.splice(index, 0, blockEditingObject);
// insert block model at the decired location in blocks.
vm.blocks.splice(index, 0, blockModel);
vm.moveFocusToBlock = blockEditingObject;
vm.moveFocusToBlock = blockModel;
return true;