Added new cache level data type option

Sometimes it can be useful to control the cache level, so now there is an option for it.

src/Limbo.Umbraco.YouTube/Manifests/YouTubeManifestFilter.cs

@@ -17,6 +17,7 @@ public void Filter(List<PackageManifest> manifests) {
                 Version = YouTubePackage.InformationalVersion,
                 BundleOptions = BundleOptions.Independent,
                 Scripts = new[] {
+                    $"/App_Plugins/{YouTubePackage.Alias}/Scripts/Controllers/CacheLevel.js",
                     $"/App_Plugins/{YouTubePackage.Alias}/Scripts/Services/YouTubeService.js",
                     $"/App_Plugins/{YouTubePackage.Alias}/Scripts/Controllers/Video.js"
                 },

src/Limbo.Umbraco.YouTube/PropertyEditors/YouTubeConfiguration.cs

@@ -7,6 +7,12 @@ namespace Limbo.Umbraco.YouTube.PropertyEditors {
 
     public class YouTubeConfiguration {
 
+        /// <summary>
+        /// Gets or sets the property cache level of the underlying property value converter. Defaults to <see cref="PropertyCacheLevel.Elements"/> if not specified.
+        /// </summary>
+        [ConfigurationField("cacheLevel", "Cache Level", "/App_Plugins/Limbo.Umbraco.Tables/Views/CacheLevel.html", Description = "Select the cache level of the underlying property value converter.")]
+        public PropertyCacheLevel? CacheLevel { get; set; }
+
         [ConfigurationField("hideLabel", "Hide label", "boolean", Description = "Select whether the label and description of properties using this data type should be hidden.<br /><br />Hiding the label and description can be useful in some cases - eg. to give the video picker a bit more horizontal space.")]
         [JsonProperty("hideLabel")]
         public bool HideLabel { get; set; }

src/Limbo.Umbraco.YouTube/PropertyEditors/YouTubeValueConverter.cs

@@ -32,7 +32,13 @@ public override Type GetPropertyValueType(IPublishedPropertyType propertyType) {
         }
 
         public override PropertyCacheLevel GetPropertyCacheLevel(IPublishedPropertyType propertyType) {
-            return PropertyCacheLevel.Element;
+
+            // Default to "Elements" if configuration doesn't match (probably wouldn't happen)
+            if (propertyType.DataType.Configuration is not YouTubeConfiguration config) return PropertyCacheLevel.Elements;
+
+            // Return the configured cachwe level (or "Elements" if not specified)
+            return config.CacheLevel ?? PropertyCacheLevel.Elements;
+
         }
 
     }

src/Limbo.Umbraco.YouTube/wwwroot/Scripts/Controllers/CacheLevel.js

@@ -0,0 +1,37 @@
+angular.module("umbraco").controller("Limbo.Umbraco.YouTube.CacheLevel", function ($scope, $http, editorService) {
+
+    const vm = this;
+
+    vm.levels = [
+        { alias: "Element", name: "Element", description: "Indicates that the property value can be cached at the element level, i.e. it can be cached until the element itself is modified." },
+        { alias: "Elements", name: "Elements", description: "Indicates that the property value can be cached at the elements level, i.e. it can be cached until any element is modified." },
+        { alias: "Snapshot", name: "Snapshot", description: "Indicates that the property value can be cached at the snapshot level, i.e. it can be cached for the duration of the current snapshot.", remarks: "In most cases, a snapshot is created per request, and therefore this is equivalent to cache the value for the duration of the request." },
+        { alias: "None", name: "None", description: "Indicates that the property value cannot be cached and has to be converted each time it is requested." }
+    ];
+
+    vm.defaultLevel = vm.levels[1];
+
+    vm.selected = vm.defaultLevel;
+
+    if ($scope.model.value) {
+        vm.selected = vm.levels.find(x => x.alias === $scope.model.value) ?? vm.selected;
+        vm.levels.forEach(function (l) {
+            l.active = l.alias === vm.selected.alias;
+        });
+    } else {
+        vm.selected.active = true;
+    }
+
+    vm.select = function (level) {
+
+        vm.selected = level;
+
+        $scope.model.value = level.alias;
+
+        vm.levels.forEach(function (l) {
+            l.active = l.alias === level.alias;
+        });
+
+    }
+
+});

src/Limbo.Umbraco.YouTube/wwwroot/Styles/Default.css

@@ -95,4 +95,34 @@
 .umb-editors .youtube-video-details .youtube-thumbnail + div {
   margin-top: 10px;
   margin-left: 0;
+}
+.youtube-video .button-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+}
+.youtube-video .button-list > button {
+  appearance: none;
+  display: inline-block;
+  -webkit-appearance: none;
+  border: 0;
+  font-weight: bold;
+  color: #1A2650;
+  line-height: 1;
+  background-color: rgba(216, 215, 217, 0.5);
+  font-size: 13px;
+  margin: 0;
+  padding: 10px 20px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  position: relative;
+  cursor: pointer;
+}
+.youtube-video .button-list > button:hover {
+  background-color: rgba(216, 215, 217, 0.3);
+  color: #2152a3;
+}
+.youtube-video .button-list > button.--active {
+  background-color: #F5C1BC;
+  color: #1A2650;
 }

src/Limbo.Umbraco.YouTube/wwwroot/Styles/Default.less

@@ -9,7 +9,6 @@
 }
 
 .youtube-video {
-
     position: relative;
 
     &.loading > div {
@@ -37,26 +36,28 @@
             background: none;
             padding: 0;
             font-size: 12px;
+
             &:hover {
                 text-decoration: underline;
             }
         }
+
         button + button {
             margin-left: 10px;
         }
+
         h5 {
             margin: 0 0 3px 0;
         }
     }
-
-/*    button {
+    /*    button {
         margin-left: 7px;
         height: 32px;
     }*/
 
     &-details {
-
         margin-top: 10px;
+
         > div {
             display: flex;
             border: 1px solid #e9e9eb;
@@ -78,21 +79,23 @@
 
         table {
             background: none;
+
             th {
                 text-align: left;
                 padding-right: 25px;
             }
+
             th, td {
                 font-size: 14px;
                 vertical-align: top;
             }
+
             tr + tr {
                 th, td {
                     padding-top: 4px;
                 }
             }
         }
-
     }
 
     &-info {
@@ -117,13 +120,46 @@
 
         &-details {
             display: block;
+
             .youtube-thumbnail + div {
                 margin-top: 10px;
                 margin-left: 0;
             }
-
         }
+    }
+
+    .button-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 7px;
+
+        > button {
+            appearance: none;
+            display: inline-block;
+            -webkit-appearance: none;
+            border: 0;
+            font-weight: bold;
+            color: #1A2650;
+            line-height: 1;
+            background-color: rgba(216,215,217, .5);
+            font-size: 13px;
+            margin: 0;
+            padding: 10px 20px;
+            border-radius: 4px;
+            transition: all .2s ease;
+            position: relative;
+            cursor: pointer;
 
+            &:hover {
+                background-color: rgba(216,215,217, .3);
+                color: #2152a3;
+            }
+
+            &.--active {
+                background-color: #F5C1BC;
+                color: #1A2650;
+            }
+        }
     }
 
 }

src/Limbo.Umbraco.YouTube/wwwroot/Views/CacheLevel.html

@@ -0,0 +1,11 @@
+<div class="youtube-video" ng-controller="Limbo.Umbraco.YouTube.CacheLevel as vm">
+    <div class="button-list">
+        <button type="button"
+                ng-repeat="level in vm.levels"
+                ng-class="{'--active': level.active}"
+                ng-click="vm.select(level)"
+                title="{{level.description}}">
+            {{level.name}}
+        </button>
+    </div>
+</div>