Merge pull request #85 from leekelleher/dev/v1.3

Preparing v1.3.0 release
leekelleher · Apr 7, 2021 · 7efbc94 · 7efbc94
2 parents 20dc38f + bd9b79a
commit 7efbc94
Show file tree

Hide file tree

Showing 63 changed files with 1,256 additions and 99 deletions.
diff --git a/.github/README.md b/.github/README.md
@@ -24,6 +24,7 @@ Let's take a look inside...
 ##### Property Editors
 
 - [Bytes](../docs/editors/bytes.md) - a read-only label to display file sizes in relative bytes.
+- [Code Editor](../docs/editors/code-editor.md) - a code snippet editor, _(using the ACE library that is bundled with Umbraco)._
 - [Content Blocks](../docs/editors/content-blocks.md) - a block editor, configurable using element types.
 - [Data List](../docs/editors/data-list.md) - an editor that combines a custom data source with a custom list editor.
 - [Icon Picker](../docs/editors/icon-picker.md) - an editor to select an icon (from the Umbraco icon library).

diff --git a/.github/ROADMAP.md b/.github/ROADMAP.md
@@ -35,10 +35,15 @@ Property Editors are:
 
 ### v1.3
 
-- Code Editor _(using ACE bundled with Umbraco)_
+- [Code Editor](../docs/editors/code-editor.md) _(using ACE bundled with Umbraco)_
 - Data List: Preview _(a real time preview of the configured Data Source and List Editor)_
+- Data List: Buttons _(list editor, similar to what folk see used in Umbraco Uno)_
 - Data List: Tags _(list editor, visually similar to Umbraco Tags editor)_
 
+### v1.4
+
+- 🤫
+
 
 ## v2
 

diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-1.2.1
+1.3.0
diff --git a/docs/README.md b/docs/README.md
@@ -13,6 +13,7 @@
 Here is the documentation for the Contentment property-editors...
 
 - [Bytes](../docs/editors/bytes.md) - a read-only label to display file sizes in relative bytes.
+- [Code Editor](../docs/editors/code-editor.md) - a code snippet editor, _(using the ACE library that is bundled with Umbraco)._
 - [Content Blocks](../docs/editors/content-blocks.md) - a block editor, configurable using element types.
 - [Data List](../docs/editors/data-list.md) - an editor that combines a custom data source with a custom list editor.
 - [Icon Picker](../docs/editors/icon-picker.md) - an editor to select an icon (from the Umbraco icon library).

diff --git a/docs/editors/code-editor--configuration-editor.png b/docs/editors/code-editor--configuration-editor.png
diff --git a/docs/editors/code-editor--property-editor-01.png b/docs/editors/code-editor--property-editor-01.png
diff --git a/docs/editors/code-editor.md b/docs/editors/code-editor.md
@@ -0,0 +1,72 @@
+<img src="../assets/img/logo.png" alt="Contentment for Umbraco logo" title="A state of Umbraco happiness." height="130" align="right">
+
+## Contentment for Umbraco
+
+### Code Editor
+
+Code Editor is a property-editor that is used to enter code snippets (as content), makes use of [AWS Cloud 9's Ace editor](https://ace.c9.io/) library that is distributed with Umbraco.
+
+
+### How to configure the editor?
+
+In your new Data Type, selected the "[Contentment] Code Editor" option. You will see the following configuration fields.
+
+![Configuration Editor for Code Editor](code-editor--configuration-editor.png)
+
+The first field is **Language mode**, this is used to select the programming language mode, for code syntax highlighting. The default mode is "Razor", meaning that you can use a combination of HTML, CSS, JavaScript and Razor syntax.
+
+The next field is **Theme**, which is used to set the visual appearance of the code editor. The default _(and only)_ theme is "Chrome".
+
+> **Please note,** by default, Umbraco ships a streamlined set of programming language modes and themes.
+> 
+> If you would like to add more modes and themes, you can do this by [downloading the latest pre-packaged version of the Ace editor](https://github.com/ajaxorg/ace-builds/releases) and copy any of the `mode-*` or `theme-*` files from the `src-min-noconflict` folder over to the `~/umbraco/lib/ace-builds/src-min-noconflict/` folder in you Umbraco installation.
+> 
+> Once you've done this, you can reload the Data Type screen, and the new programming language modes and themes will appear in the dropdown options for the fields above.
+
+
+The **Font size** field is used to set the font size, the value must be a [valid CSS font-size value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size), e.g. `14px`, `80%`, `0.8em`, etc. The default size is "`small`".
+
+The **Word wrapping** option can enable the code editor to wrap the text around to the following line.
+
+The next two fields, **Minimum lines** and **Maximum lines**, are used to set the default height size of the code editor. If you would like the height to auto-scale forever, then set the maximum number to something ridiculously high. If left empty, the height of the code editor will remain at a fixed height and not auto-scale.
+
+
+### How to use the editor?
+
+Once you have added the configured Data Type to your Document Type, the Code Editor editor will be displayed on the content page's property panel.
+
+![Code Editor property-editor](code-editor--property-editor-01.png)
+
+
+### How to get the value?
+
+The value for the Code Editor is a `string`.
+
+Programmatically, you would access the value exactly the same as Umbraco's Textarea editor, [see Umbraco's documentation for code snippet examples](https://our.umbraco.com/Documentation/Getting-Started/Backoffice/Property-Editors/Built-in-Property-Editors/Textarea/#mvc-view-example).
+
+If you are wanting to display the code content as a pre-formatted code snippet, I would recommend using the `<pre>` and `<code>` tags.
+
+Using Umbraco's Models Builder...
+
+```cshtml
+<pre><code>@Html.Raw(Model.CodeEditor)</code></pre>
+```
+
+Without ModelsBuilder...
+
+Weakly-typed...
+
+```cshtml
+<pre><code>@Html.Raw(Model.Value("codeEditor"))</code></pre>
+```
+
+Strongly-typed...
+
+```cshtml
+<pre><code>@Html.Raw(Model.Value<string>("codeEditor"))</code></pre>
+```
+
+For code syntax highlighting, the following JavaScript libraries are quite popular:
+
+- [Prism.js](https://prismjs.com/)
+- [highlight.js](https://highlightjs.org/)
diff --git a/docs/telemetry.md b/docs/telemetry.md
@@ -15,8 +15,12 @@ Here is an example of the JSON data that is sent.
     "dataType": "4E7D6B3A-F959-42E4-921E-081BC0E9E7EE",
     "editorAlias": "DataList",
     "umbracoId": "0403E47E-EFE7-4CF2-8E97-148681DAFC10",
-    "umbracoVersion": "8.6.6",
-    "contentmentVersion": "1.2.0",
+    "umbracoVersion": "8.6.8",
+    "contentmentVersion": "1.3.0",
+    "dataTypeConfig": {
+        "dataSource": "EnumDataListSource",
+        "listEditor": "CheckboxListDataListEditor",
+    }
 }
 ```
 

diff --git a/src/Umbraco.Community.Contentment.sln b/src/Umbraco.Community.Contentment.sln
@@ -41,6 +41,7 @@ EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Editors", "Editors", "{A5294B30-2ED5-4BBA-A2DE-A07103DAE78F}"
 	ProjectSection(SolutionItems) = preProject
 		..\docs\editors\bytes.md = ..\docs\editors\bytes.md
+		..\docs\editors\code-editor.md = ..\docs\editors\code-editor.md
 		..\docs\editors\content-blocks.md = ..\docs\editors\content-blocks.md
 		..\docs\editors\data-list.md = ..\docs\editors\data-list.md
 		..\docs\editors\icon-picker.md = ..\docs\editors\icon-picker.md

diff --git a/src/Umbraco.Community.Contentment/Core/DictionaryExtensions.cs b/src/Umbraco.Community.Contentment/Core/DictionaryExtensions.cs
@@ -11,15 +11,15 @@ internal static class DictionaryExtensions
     {
         public static TValueOut GetValueAs<TKey, TValue, TValueOut>(this IDictionary<TKey, TValue> config, TKey key, TValueOut defaultValue = default)
         {
-            if (config.TryGetValue(key, out var tmp))
+            if (config.TryGetValue(key, out var tmp) == true)
             {
                 if (tmp is TValueOut value)
                 {
                     return value;
                 }
 
                 var attempt = tmp.TryConvertTo<TValueOut>();
-                if (attempt.Success)
+                if (attempt.Success == true)
                 {
                     return attempt.Result;
                 }
@@ -30,7 +30,7 @@ public static TValueOut GetValueAs<TKey, TValue, TValueOut>(this IDictionary<TKe
 
         public static bool TryGetValueAs<TKey, TValue, TValueOut>(this IDictionary<TKey, TValue> config, TKey key, out TValueOut value)
         {
-            if (config.TryGetValue(key, out var tmp1))
+            if (config.TryGetValue(key, out var tmp1) == true)
             {
                 if (tmp1 is TValueOut tmp2)
                 {
@@ -39,7 +39,7 @@ public static bool TryGetValueAs<TKey, TValue, TValueOut>(this IDictionary<TKey,
                 }
 
                 var attempt = tmp1.TryConvertTo<TValueOut>();
-                if (attempt.Success)
+                if (attempt.Success == true)
                 {
                     value = attempt.Result;
                     return attempt.Success;

diff --git a/src/Umbraco.Community.Contentment/DataEditors/Buttons/ButtonsDataListEditor.cs b/src/Umbraco.Community.Contentment/DataEditors/Buttons/ButtonsDataListEditor.cs
@@ -0,0 +1,95 @@
+/* Copyright © 2020 Lee Kelleher.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+using System.Collections.Generic;
+using Umbraco.Core;
+using Umbraco.Core.IO;
+using Umbraco.Core.PropertyEditors;
+
+namespace Umbraco.Community.Contentment.DataEditors
+{
+    public sealed class ButtonsDataListEditor : IDataListEditor
+    {
+        internal const string DataEditorViewPath = Constants.Internals.EditorsPathRoot + "buttons.html";
+
+        public string Name => "Buttons";
+
+        public string Description => "Select multiple values from a group of buttons.";
+
+        public string Icon => "icon-tab";
+
+        public IEnumerable<ConfigurationField> Fields => new ConfigurationField[]
+        {
+            new ConfigurationField
+            {
+                Key = "defaultIcon",
+                Name = "Default icon",
+                Description = "Select an icon to be displayed as the default icon, (for when no icon is available).",
+                View = IOHelper.ResolveUrl("~/umbraco/views/propertyeditors/listview/icon.prevalues.html"),
+            },
+            new ConfigurationField
+            {
+                Key = "size",
+                Name = "Size",
+                Description = "Select the button size. By default this is set to 'medium'.",
+                View = IOHelper.ResolveUrl(RadioButtonListDataListEditor.DataEditorViewPath),
+                Config = new Dictionary<string, object>
+                {
+                    { Constants.Conventions.ConfigurationFieldAliases.Items, new[]
+                        {
+                            new DataListItem { Name = "Small", Value = "s" },
+                            new DataListItem { Name = "Medium", Value = "m" },
+                            new DataListItem { Name = "Large", Value = "l" },
+                        }
+                    },
+                    { Constants.Conventions.ConfigurationFieldAliases.DefaultValue, "m" }
+                }
+            },
+            new ConfigurationField
+            {
+                Key = "labelStyle",
+                Name = "Label style",
+                Description = "Select the style of the button's label.",
+                View = IOHelper.ResolveUrl(RadioButtonListDataListEditor.DataEditorViewPath),
+                Config = new Dictionary<string, object>
+                {
+                    { Constants.Conventions.ConfigurationFieldAliases.Items, new[]
+                        {
+                            new DataListItem { Name = "Icon and Text", Value = "both", Description = "Displays both the item's icon and name." },
+                            new DataListItem { Name = "Icon only", Value = "icon", Description = "Hides the item's name and only displays the icon." },
+                            new DataListItem { Name = "Text only", Value = "text", Description = "Hides the item's icon and only displays the name." },
+                        }
+                    },
+                    { Constants.Conventions.ConfigurationFieldAliases.DefaultValue, "both" },
+                    { ShowDescriptionsConfigurationField.ShowDescriptions, Constants.Values.True },
+                }
+            },
+            new ConfigurationField
+            {
+                Key = "enableMultiple",
+                Name = "Multiple selection?",
+                Description = "Select to enable picking multiple items.",
+                View = "boolean",
+            },
+        };
+
+        public Dictionary<string, object> DefaultValues => new Dictionary<string, object>
+        {
+            { "defaultIcon", Core.Constants.Icons.DefaultIcon },
+            { "labelStyle", "both" },
+        };
+
+        public Dictionary<string, object> DefaultConfig => default;
+
+        public bool HasMultipleValues(Dictionary<string, object> config)
+        {
+            return config.TryGetValue("enableMultiple", out var tmp) && tmp.TryConvertTo<bool>().Result;
+        }
+
+        public OverlaySize OverlaySize => OverlaySize.Small;
+
+        public string View => DataEditorViewPath;
+    }
+}
diff --git a/src/Umbraco.Community.Contentment/DataEditors/Buttons/buttons.css b/src/Umbraco.Community.Contentment/DataEditors/Buttons/buttons.css
@@ -0,0 +1,21 @@
+/* Copyright © 2020 Lee Kelleher.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+.contentment.lk-buttons .umb-button {
+    margin-bottom: 5px;
+}
+
+.contentment.lk-buttons .umb-button--selected .umb-button__button {
+    background-color: #f5c1bc;
+}
+
+.contentment.lk-buttons .umb-button__button {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+    .contentment.lk-buttons .umb-button__button[disabled] {
+        opacity: 0.5;
+    }
diff --git a/src/Umbraco.Community.Contentment/DataEditors/Buttons/buttons.html b/src/Umbraco.Community.Contentment/DataEditors/Buttons/buttons.html
@@ -0,0 +1,17 @@
+<!-- Copyright © 2020 Lee Kelleher.
+   - This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at https://mozilla.org/MPL/2.0/. -->
+
+<div class="contentment lk-buttons" ng-class="vm.uniqueId" ng-controller="Umbraco.Community.Contentment.DataEditors.Buttons.Controller as vm">
+    <umb-button type="button"
+                action="vm.select(item)"
+                size="{{vm.size}}"
+                ng-repeat="item in vm.items"
+                ng-class="{ 'umb-button--selected' : item.selected }"
+                label="{{vm.hideName === false ? item.name : null}}"
+                title="{{item.name}}"
+                icon="{{vm.hideIcon === false ? vm.iconExtras + (item.icon || vm.defaultIcon) : null}}"
+                disabled="item.disabled">
+    </umb-button>
+</div>
diff --git a/src/Umbraco.Community.Contentment/DataEditors/Buttons/buttons.js b/src/Umbraco.Community.Contentment/DataEditors/Buttons/buttons.js
@@ -0,0 +1,92 @@
+/* Copyright © 2020 Lee Kelleher.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+angular.module("umbraco").controller("Umbraco.Community.Contentment.DataEditors.Buttons.Controller", [
+    "$scope",
+    function ($scope) {
+
+        // console.log("buttons.model", $scope.model);
+
+        var defaultConfig = {
+            defaultIcon: "icon-science",
+            defaultValue: [],
+            items: [],
+            enableMultiple: 0,
+            labelStyle: "both",
+            size: "m",
+        };
+        var config = Object.assign({}, defaultConfig, $scope.model.config);
+
+        var vm = this;
+
+        function init() {
+            $scope.model.value = $scope.model.value || config.defaultValue;
+
+            if (Array.isArray($scope.model.value) === false) {
+                $scope.model.value = [$scope.model.value];
+            }
+
+            vm.multiple = Object.toBoolean(config.enableMultiple);
+
+            if (vm.multiple === false && $scope.model.value.length > 0) {
+                $scope.model.value.splice(1);
+            }
+
+            vm.items = config.items.slice();
+
+            vm.hideIcon = config.labelStyle === 'text';
+            vm.hideName = config.labelStyle === 'icon';
+
+            vm.uniqueId = $scope.model.hasOwnProperty("dataTypeKey")
+                ? [$scope.model.alias, $scope.model.dataTypeKey.substring(0, 8)].join("-")
+                : $scope.model.alias;
+
+            var sizes = {
+                "s": "small",
+                "m": "medium",
+                "l": "large",
+            };
+
+            vm.size = config.size;
+
+            vm.defaultIcon = config.defaultIcon;
+            vm.iconExtras = sizes[config.size] + (vm.hideName === false ? " mr2 " : " mr0 ");
+
+            vm.items.forEach(function (item) {
+                item.selected = $scope.model.value.indexOf(item.value) > -1;
+            });
+
+            vm.select = select;
+        };
+
+        function select(item) {
+
+            item.selected = item.selected === false;
+            $scope.model.value = [];
+
+            vm.items.forEach(function (x) {
+
+                if (vm.multiple === false) {
+                    x.selected = x.value === item.value;
+                }
+
+                if (x.selected) {
+                    $scope.model.value.push(x.value);
+                }
+
+            });
+
+            setDirty();
+        };
+
+        function setDirty() {
+            if ($scope.propertyForm) {
+                $scope.propertyForm.$setDirty();
+            }
+        };
+
+        init();
+    }
+]);