From 0c2a03bd46bd97d6db8a4b48337be5ecb0fc20bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 4 Mar 2020 13:44:53 +0100 Subject: [PATCH] block list editor better naming --- .../common/services/blockeditor.service.js | 44 +++++---- .../blocklist/blocklist.component.js | 91 ++++++------------- 2 files changed, 49 insertions(+), 86 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/services/blockeditor.service.js b/src/Umbraco.Web.UI.Client/src/common/services/blockeditor.service.js index 00308ae4ff..675746dca4 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/blockeditor.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/blockeditor.service.js @@ -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; } } } diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js index fcb2bc926c..821a9362fa 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js @@ -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;