Merge pull request #24 from nathanwoulfe/block-editor-list

Block list editor changes

Author: nathanwoulfe

src/NestingContently/backoffice/app.js

@@ -7,17 +7,32 @@
             'nc.components'
         ])
         .constant('ncStrings', {
-            disabledClass: 'umb-nested-content__item--disabled',
-            itemClass: '.umb-nested-content__item',
-            editorName: 'NestingContently'
+            editorName: 'NestingContently',
+            nc: {
+                disabledClass: 'umb-nested-content__item--disabled',
+                itemClass: '.umb-nested-content__item',                
+            },
+            bl: {
+                disabledClass: 'umb-block-list__block--disabled',
+                itemClass: '.umb-block-list__block',
+            }
         });
 
     angular.module('umbraco').requires.push('nc');
 
+    const ncPattern = /<div class="umb-nested-content__icons">/gmi;
+    const blPattern = /<div class="umb-block-list__block--actions">/gmi;
+
+    const ncString = '$&<nc-toggle node="node" index="$index" type="nc"></nc-toggle>';
+    const blString = '$&<nc-toggle node="vm.layout.$block" index="vm.index" type="bl"></nc-toggle>';
+
     for (let q of angular.module('umbraco')._invokeQueue) {
-        if (q[2][0] === 'nestedContentPropertyEditor') { 
-            const pattern = /<div class="umb-nested-content__icons">/gmi;
-            q[2][1].template = q[2][1].template.replace(pattern, '$&<nc-toggle node="node" index="$index"></nc-toggle>'); 
+        let queueItem = q[2][0];        
+
+        if (queueItem === 'nestedContentPropertyEditor') {             
+            q[2][1].template = q[2][1].template.replace(ncPattern, ncString); 
+        } else if (queueItem === 'umbBlockListRow') {
+            q[2][1].template = q[2][1].template.replace(blPattern, blString);
         }
     }
 

src/NestingContently/backoffice/button.component.js

@@ -4,40 +4,40 @@
     function controller($element, $rootScope, locale, strings) {
 
         let prop = {};
-        let labels = {}; 
+        let labels = {};
         let disabled = false;
 
         locale.localizeMany(['actions_enable','actions_disable']).then(data => {
-            labels.enable = data[0];  
-            labels.disable = data[1];
+            let [enable, disable] = data;
+            labels = { enable, disable };
         }); 
 
-        const setClass = fn => $element.closest(strings.itemClass)[0].classList[fn](strings.disabledClass);
+        const setClass = fn => $element.closest(strings[this.type].itemClass)[0]
+            .classList[fn](strings[this.type].disabledClass);
+
         const setTitle = () => this.iconTitle = disabled ? labels.enable : labels.disable;        
-        const setDisabledClass = () => this.disabledClass = disabled ? strings.disabledClass : '';
 
         this.toggle = () => {
             disabled = !disabled;
             prop.value = disabled ? '1' : '0';
 
-            $rootScope.$broadcast('ncDisabledToggle', { value: prop.value, key: this.node.key });
+            if (this.type === 'nc') {
+                $rootScope.$broadcast('ncDisabledToggle', { value: prop.value, key: this.node.key });
+            }
 
             setTitle();
-            setDisabledClass();
             setClass('toggle');
         };
 
         this.$onInit = () => {
             if (this.node) {  
-                const props = this.node.variants[0].tabs[0]
-                    .properties.filter(p => p.editor === strings.editorName);
+                prop = (this.type === 'nc' ? this.node : this.node.content).variants[0].tabs[0]
+                    .properties.find(p => p.editor === strings.editorName);
 
-                if (props.length === 1) {
-                    prop = props[0];
+                if (prop) {
                     disabled = prop.value === '1';
 
                     setTitle();
-                    setDisabledClass();
 
                     if (disabled) {
                         setClass('add');
@@ -52,19 +52,19 @@
     const template = `
         <button type="button" class="umb-nested-content__icon umb-nested-content__icon--disable" 
             title="{{ $ctrl.iconTitle }}" 
-            ng-click="$ctrl.toggle(); $event.stopPropagation()" 
-            ng-class="$ctrl.disabledClass">
+            ng-click="$ctrl.toggle(); $event.stopPropagation()">
             <i class="icon icon-power" aria-hidden="true"></i>
             <span class="sr-only">
-                <localize key="general_disable">Disable</localize>
+                {{ $ctrl.iconTitle }}
             </span>
         </button>`;
 
     const component = {
         transclude: true,
         bindings: {
             node: '<',
-            index: '<'
+            index: '<',
+            type: '@'
         },
         controller: controller,
         template: template

src/NestingContently/backoffice/editor.controller.js

@@ -1,24 +1,31 @@
 (() => {
     function nestingContently($scope, $element) {
-        const propElm = $element[0].closest('.umb-nested-content-property-container');
+        // get the closest nested content property, or generic umb property if no NC
+        let propElm = $element[0].closest('.umb-nested-content-property-container');
+        let isNc = propElm != null;
+
+        propElm = propElm || $element[0].closest('umb-property');
+
         if (propElm) {
             propElm.style.display = 'none';
         }
 
-        // find the key for this NC panel, to use as a guard
-        // when receiving the ncDisabledToggle event
-        let ncScope = $scope.$parent.$parent;
-        do {
-            ncScope = ncScope.$parent;
-        } while (!Object.prototype.hasOwnProperty.call(ncScope, 'ngModel'));
+        // NestedContent needs events to work, due to binding craziness
+        // BlockList does not, so we can guard this entire block
+        if (isNc) {
+            let scope = $scope.$parent.$parent;
+            do {
+                scope = scope.$parent;
+            } while (!Object.prototype.hasOwnProperty.call(scope, 'ngModel'));
 
-        const key = ncScope.ngModel.key;
+            const key = scope.ngModel.key;
 
-        $scope.$on('ncDisabledToggle', (e, data) => {
-            if (key === data.key) {
-                $scope.model.value = data.value;
-            }
-        });
+            $scope.$on('ncDisabledToggle', (e, data) => {
+                if (key === data.key) {
+                    $scope.model.value = data.value;
+                }
+            });
+        }
     }
 
     angular.module('umbraco').controller('nestingContentlyController', ['$scope', '$element', nestingContently]);

src/NestingContently/backoffice/editor.html

@@ -1,3 +1 @@
-<div ng-controller="nestingContentlyController">
-    {{ model.value }}
-</div> 
+<div ng-controller="nestingContentlyController"></div> 

src/NestingContently/backoffice/styles.css

@@ -1,9 +1,4 @@
-.umb-nested-content__item--disabled nc-toggle .umb-nested-content__icon--disabled,
-.umb-nested-content__item--disabled nc-toggle .umb-nested-content__icon--disabled .icon-power,
-.umb-nested-content__icon--disabled {
-    opacity:1;
-}
-
+.umb-block-list__block--disabled,
 .umb-nested-content__item--disabled {
     opacity: 0.5; 
 }