🎉 v1.0.0-alpha004

README.md

@@ -13,13 +13,13 @@ The Umbraco 10.4+ version of this package is [available via NuGet](https://www.n
 To install the package, you can use either .NET CLI:
 
 ```
-dotnet add package Our.Umbraco.BlockPreview --version 1.0.0-alpha003
+dotnet add package Our.Umbraco.BlockPreview --version 1.0.0-alpha004
 ```
 
 or the older NuGet Package Manager:
 
 ```
-Install-Package Our.Umbraco.BlockPreview -Version 1.0.0-alpha003
+Install-Package Our.Umbraco.BlockPreview -Version 1.0.0-alpha004
 ```
 
 ## Usage
@@ -44,5 +44,12 @@ should be replaced with
 ```
 which can be found in `Our.Umbraco.BlockPreview.Extensions`. This ensures that the grid editors correctly load in the back office.
 
-## Thanks
-This package is entirely based on the amazing work done by [Dave Woestenborghs for 24days in Umbraco 2021](https://archive.24days.in/umbraco-cms/2021/advanced-blocklist-editor/). His code has been extended to support the new Block Grid editor in v10.4/v11 and turned into this package.
+## Credits
+This package is entirely based on the amazing work done by [Dave Woestenborghs](https://github.com/dawoe) for [24days in Umbraco 2021](https://archive.24days.in/umbraco-cms/2021/advanced-blocklist-editor/). His code has been extended to support the new Block Grid editor in v10.4/v11 and turned into this package.
+
+[Matthew Wise](https://github.com/Matthew-Wise) also wrote a great article for [24days in Umbraco 2022](https://24days.in/umbraco-cms/2022/more-blocklist-editor/) which added the ability to surface `ViewComponents` and has allowed his code to be contributed.
+
+## License
+Copyright © 2022 [Rick Butterfield](https://rickbutterfield.dev), and other contributors.
+
+Licensed under the [MIT License](https://github.com/rickbutterfield/Our.Umbraco.BlockPreview/blob/main/LICENSE.md).

build/release.bat

@@ -0,0 +1,2 @@
+@echo off
+dotnet build ../src/Our.Umbraco.BlockPreview.csproj --configuration Release /t:rebuild /t:pack -p:PackageOutputPath=../releases/nuget

src/App_Plugins/Our.Umbraco.BlockPreview/js/controllers/block-grid-preview.controller.js → src/App_Plugins/Our.Umbraco.BlockPreview/js/controllers/block-preview.controller.js

@@ -1,4 +1,4 @@
-angular.module('umbraco').controller('Our.Umbraco.BlockPreview.Controllers.BlockGridPreviewController',
+angular.module('umbraco').controller('Our.Umbraco.BlockPreview.Controllers.BlockPreviewController',
     ['$scope', '$sce', '$element', '$compile', '$timeout', 'editorState', 'Our.Umbraco.BlockPreview.Resources.PreviewResource',
         function ($scope, $sce, $element, $compile, $timeout, editorState, previewResource) {
             var active = editorState.getCurrent().variants.find(function (v) {
@@ -15,28 +15,36 @@
             $scope.loading = true;
             $scope.markup = $sce.trustAsHtml('Loading preview');
 
-            function loadPreview() {
+            function loadPreview(content, settings) {
                 $scope.markup = $sce.trustAsHtml('Loading preview');
                 $scope.loading = true;
 
                 var formattedBlockData = {
-                    content: $scope.block.data,
-                    settings: $scope.block.settingsData
+                    content: content ?? $scope.block.data,
+                    settings: settings ?? $scope.block.settingsData
                 };
 
-                previewResource.getGridPreview(formattedBlockData, $scope.id, $scope.language).then(function (data) {
-                    $element.append($compile(data)($scope));
+                previewResource.getPreview(formattedBlockData, $scope.id, $scope.model.constructor.name == 'BlockGridBlockController', $scope.language).then(function (data) {
+                    $scope.markup = $sce.trustAsHtml(data);
                     $scope.loading = false;
                 });
             }
 
             var timeoutPromise;
 
-            $scope.$watch('block.content', function (newValue, oldValue) {
+            $scope.$watch('block.data', function (newValue, oldValue) {
                 $timeout.cancel(timeoutPromise);
 
                 timeoutPromise = $timeout(function () {   //Set timeout
-                    loadPreview();
+                    loadPreview(newValue, null);
+                }, 500);
+            }, true);
+
+            $scope.$watch('block.settingsData', function (newValue, oldValue) {
+                $timeout.cancel(timeoutPromise);
+
+                timeoutPromise = $timeout(function () {   //Set timeout
+                    loadPreview(null, newValue);
                 }, 500);
             }, true);
         }

src/App_Plugins/Our.Umbraco.BlockPreview/js/directives/bind-compile.directive.js

@@ -0,0 +1,25 @@
+/*
+ * angular-bind-compile v0.1.0
+ * https://github.com/emn178/angular-bind-compile
+ *
+ * Copyright 2014, [email protected]
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+angular.module('umbraco.filters')
+    .directive('ngBindCompile', ['$sce', '$compile', function ($sce, $compile) {
+        return {
+            restrict: 'A',
+            compile: function (tElement, tAttrs) {
+                return function (scope, element, attrs) {
+                    scope.$watch(function () {
+                        return $sce.getTrustedHtml(scope.$eval(attrs.ngBindCompile));
+                    }, function (value) {
+                        element.html(value);
+                        $compile(element.contents())(scope);
+                    });
+                };
+            }
+        };
+    }]);

src/App_Plugins/Our.Umbraco.BlockPreview/js/directives/published-check.directive.js

@@ -1,34 +1,50 @@
 angular.module('umbraco.filters')
-    .directive('publicationCheck', [function () {
-
-        function setStyle(scope, element) {
-            //if (typeof scope.settings["hideBlock"] !== "undefined") {
-            //    if (scope.settings.hideBlock === '1') {
-            //        element[0].style.opacity = 0.25;
-            //        return;
-            //    }
-            //}
-
-            element[0].style.opacity = 1;
-            return;
-        }
-
-        function link(scope, element, attrs) {
-
-            setStyle(scope, element);
-
-            scope.$watch('settings', function (newValue, oldValue) {
-                if (newValue)
-                    setStyle(scope, element);
-            }, true);
-
-        }
-
-        return {
-            restrict: 'A',
-            scope: {
-                'settings': '=',
-            },
-            link: link,
-        };
-    }]);
+  .directive('publicationCheck', [function () {
+
+    function setStyle(scope, element) {
+      if (!scope.settings) {
+        element[0].style.opacity = 1;
+        return;
+      }
+      if (scope.settings.hideBlock === '1') {
+        element[0].style.opacity = 0.25;
+        return;
+      }
+
+      if (scope.settings.startDate === '' && scope.settings.endDate === '') {
+        element[0].style.opacity = 1;
+        return;
+      }
+
+      if (Date.parse(scope.settings.startDate) > new Date()) {
+        element[0].style.opacity = 0.25;
+        return;
+      }
+
+      if (Date.parse(scope.settings.endDate) < new Date()) {
+        element[0].style.opacity = 0.25;
+        return;
+      }
+
+      element[0].style.opacity = 1;
+    }
+
+    function link(scope, element, attrs) {
+
+      setStyle(scope, element);
+
+      scope.$watch('settings', function (newValue, oldValue) {
+        if (newValue)
+          setStyle(scope, element);
+      }, true);
+
+    }
+
+    return {
+      restrict: 'A',
+      scope: {
+        'settings': '=',
+      },
+      link: link,
+    };
+  }]);

src/App_Plugins/Our.Umbraco.BlockPreview/js/resources/preview.resource.js

@@ -3,29 +3,19 @@
 
     function previewResource($http, umbRequestHelper) {
 
-        var gridApiUrl = "/umbraco/backoffice/api/BlockGridPreviewApi/PreviewMarkup";
-        var listApiUrl = "/umbraco/backoffice/api/BlockListPreviewApi/PreviewMarkup";
+        var apiUrl = Umbraco.Sys.ServerVariables.OurUmbracoBlockPreview.PreviewApi;
 
         var resource = {
-            getGridPreview: getGridPreview,
-            getListPreview: getListPreview
+            getPreview: getPreview,
         };
 
         return resource;
 
-        function getGridPreview(data, pageId, culture) {
+        function getPreview(data, pageId, isGrid, culture) {
 
             return umbRequestHelper.resourcePromise(
-                $http.post(gridApiUrl + '?pageId=' + pageId + '&culture=' + culture, data),
-                'Failed getting block grid preview markup'
-            );
-        };
-
-        function getListPreview(data, pageId, culture) {
-
-            return umbRequestHelper.resourcePromise(
-                $http.post(listApiUrl + '?pageId=' + pageId + '&culture=' + culture, data),
-                'Failed getting block list preview markup'
+                $http.post(apiUrl + '?pageId=' + pageId + '&isGrid=' + isGrid + '&culture=' + culture, data),
+                'Failed getting block preview markup'
             );
         };
     }

src/App_Plugins/Our.Umbraco.BlockPreview/package.manifest

@@ -1,11 +1,11 @@
 {
   "name": "Our.Umbraco.BlockPreview",
-  "version": "1.0.0-alpha003",
+  "version": "1.0.0-alpha004",
   "allowPackageTelemetry": true,
   "javascript": [
     "~/App_Plugins/Our.Umbraco.BlockPreview/js/resources/preview.resource.js",
     "~/App_Plugins/Our.Umbraco.BlockPreview/js/directives/published-check.directive.js",
-    "~/App_Plugins/Our.Umbraco.BlockPreview/js/controllers/block-grid-preview.controller.js",
-    "~/App_Plugins/Our.Umbraco.BlockPreview/js/controllers/block-list-preview.controller.js"
+    "~/App_Plugins/Our.Umbraco.BlockPreview/js/directives/bind-compile.directive.js",
+    "~/App_Plugins/Our.Umbraco.BlockPreview/js/controllers/block-preview.controller.js"
   ]
 }

src/App_Plugins/Our.Umbraco.BlockPreview/views/block-preview.html

@@ -0,0 +1,8 @@
+<div ng-click="block.edit()" ng-focus="block.focus" class="blockelement__draggable-element" ng-controller="Our.Umbraco.BlockPreview.Controllers.BlockPreviewController">
+
+    <div ng-if="loading === false"
+         ng-bind-compile="markup"
+         publication-check
+         settings="block.settingsData"></div>
+
+</div>