Refactor to make it reusable across implementations

2019-05-20 17:40:38 +02:00
parent c494ad0adc
commit 7ce4fbe44c
8 changed files with 66 additions and 57 deletions
@@ -0,0 +1,15 @@
+angular.module("umbraco.directives").directive('umbBlockEditor', [
+    function () {
+        return {
+            restrict: "E",
+            templateUrl: "views/propertyeditors/blockeditor/blockeditor.directive.html",
+            scope: {
+                config: "=",
+                view: "=?",
+                blocks: "="
+            },
+            controller: "Umbraco.PropertyEditors.BlockEditor.DirectiveController",
+            controllerAs: "vm"
+        };
+    }
+]);
@@ -1,12 +0,0 @@
-angular.module("umbraco.directives").directive('umbBlockEditorBlocks', [
-    function () {
-        var link = function (scope, el, attr, ctrl) {
-        };
-
-        return {
-            restrict: "E",
-            templateUrl: "views/propertyeditors/blockeditor/blockeditor.blocks.html",
-            link: link
-        };
-    }
-]);
@@ -1,8 +0,0 @@
-<div>
-    <div ng-if="vm.blocksView" ng-include="vm.blocksView"></div>
-    <ul ng-if="!vm.blocksView" class="unstyled" ui-sortable="vm.sortableOptions" ng-model="model.value">
-        <li ng-repeat="block in model.value" style="border: 1px solid silver; margin-bottom: 4px; padding: 4px;">
-            <umb-block-editor-block></umb-block-editor-block>
-        </li>
-    </ul>
-</div>
@@ -0,0 +1,11 @@
+function BlockEditorDefaultController($scope, contentResource, editorService) {
+    console.log("Block editor default controller", $scope.model)
+    // TODO: move this to a controller supporting the default blockeditor view
+    $scope.sortableOptions = {
+        axis: "y",
+        cursor: "move",
+        handle: ".handle",
+        tolerance: 'pointer'
+    };
+}
+angular.module("umbraco").controller("Umbraco.PropertyEditors.BlockEditor.DefaultController", BlockEditorDefaultController);
@@ -0,0 +1,14 @@
+<div ng-controller="Umbraco.PropertyEditors.BlockEditor.DefaultController">
+    <ul class="unstyled" ui-sortable="sortableOptions" ng-model="blocks">
+        <li ng-repeat="block in blocks" style="border: 1px solid silver; margin-bottom: 4px; padding: 4px;">
+            <umb-block-editor-block></umb-block-editor-block>
+        </li>
+    </ul>
+
+    <div>
+        Add:
+        <div style="cursor:pointer" ng-click="vm.add(scaffold)" ng-repeat="scaffold in vm.scaffolds" class="di">
+            <i class="icon {{scaffold.documentType.icon}}"></i>
+        </div>
+    </div>
+</div>
@@ -1,32 +1,29 @@
-function BlockEditorPropertyEditorController($scope, contentResource, editorService) {
+function BlockEditorDirectiveController($scope, contentResource, editorService) {
    var vm = this;

    vm.scaffolds = [];
    vm.loading = true;
-    vm.sortableOptions = {
-        axis: "y",
-        cursor: "move",
-        handle: ".handle",
-        tolerance: 'pointer'
-    };
-
    vm.add = add;
    vm.editContent = editContent;
    vm.editSettings = editSettings;
    vm.remove = remove;
-    // TODO: this needs to be configurable on data type level
-    vm.blocksView = null; // "/App_Plugins/MyBlockEditor/myblockeditor.html";

    // it would be awesome if we could load all scaffolds in one go... however we need to have an eye out for performance,
    // oddly enough it's been shown to actually be slower to load them all at once instead of one at a time
    var scaffoldsLoaded = 0;
    function init() {
-        $scope.model.value = $scope.model.value || [];
-        _.each($scope.model.config.blocks, function (blockConfig) {
-            contentResource.getScaffoldByUdi(-20, blockConfig.elementType).then(function (scaffold) {
+        if (!$scope.blocks) {
+            $scope.blocks = [];
+        }
+        if (!$scope.view) {
+            $scope.view = "views/propertyeditors/blockeditor/blockeditor.default.html";
+        }
+        
+        _.each($scope.config, function (config) {
+            contentResource.getScaffoldByUdi(-20, config.elementType).then(function (scaffold) {
                if (scaffold.isElement) {
                    // the scaffold udi is not the same as the element type udi, but we need it to be for comparison
-                    scaffold.udi = blockConfig.elementType;
+                    scaffold.udi = config.elementType;
                    vm.scaffolds.push(scaffold);
                }
                scaffoldsLoaded++;
@@ -40,14 +37,14 @@

    function initIfAllScaffoldsHaveLoaded() {
        // Initialize when all scaffolds have loaded
-        if ($scope.model.config.blocks.length === scaffoldsLoaded) {
+        if ($scope.config.length === scaffoldsLoaded) {
            vm.scaffolds = _.sortBy(vm.scaffolds, function (scaffold) {
-                return _.findIndex($scope.model.config.blocks, function (blockConfig) {
+                return _.findIndex($scope.config, function (blockConfig) {
                    return blockConfig.elementType === scaffold.udi;
                });
            });

-            _.each($scope.model.value, function (block) {
+            _.each($scope.blocks, function (block) {
                applyFakeSettings(block);
            });

@@ -91,8 +88,8 @@
                        block.content[property.alias] = property.value;
                    });
                });
-                if ($scope.model.value.indexOf(block) < 0) {
-                    $scope.model.value.push(block);
+                if ($scope.blocks.indexOf(block) < 0) {
+                    $scope.blocks.push(block);
                    applyFakeSettings(block);
                }

@@ -125,7 +122,7 @@
    function remove(block) {
        // this should be replaced by a custom dialog (pending some PRs)
        if (confirm("TODO: Are you sure?")) {
-            $scope.model.value.splice($scope.model.value.indexOf(block), 1);
+            $scope.blocks.splice($scope.blocks.indexOf(block), 1);
        }
    }

@@ -137,4 +134,4 @@
        block.settings["rows"] = 1 + Math.floor(Math.random() * 2);
    }
 }
-angular.module("umbraco").controller("Umbraco.PropertyEditors.BlockEditor.PropertyEditorController", BlockEditorPropertyEditorController);
+angular.module("umbraco").controller("Umbraco.PropertyEditors.BlockEditor.DirectiveController", BlockEditorDirectiveController);
@@ -0,0 +1,7 @@
+<div>
+    <div style="position:relative" ng-if="vm.loading">
+        <umb-load-indicator />
+    </div>
+
+    <div ng-if="!vm.loading" ng-include="view"></div>
+</div>
@@ -1,16 +1 @@
-<div ng-controller="Umbraco.PropertyEditors.BlockEditor.PropertyEditorController as vm">
-    <div style="position:relative" ng-if="vm.loading">
-        <umb-load-indicator />
-    </div>
-
-    <div ng-if="!vm.loading">
-        <umb-block-editor-blocks></umb-block-editor-blocks>
-
-        <div>
-            Add:
-            <div style="cursor:pointer" ng-click="vm.add(scaffold)" ng-repeat="scaffold in vm.scaffolds" class="di">
-                <i class="icon {{scaffold.documentType.icon}}"></i>
-            </div>
-        </div>
-    </div>
-</div>
+<umb-block-editor blocks="model.value" config="model.config.blocks"></umb-block-editor>