diff --git a/src/Limbo.Umbraco.YouTube/Manifests/YouTubeManifestFilter.cs b/src/Limbo.Umbraco.YouTube/Manifests/YouTubeManifestFilter.cs index 6a4f079..b87e37f 100644 --- a/src/Limbo.Umbraco.YouTube/Manifests/YouTubeManifestFilter.cs +++ b/src/Limbo.Umbraco.YouTube/Manifests/YouTubeManifestFilter.cs @@ -17,6 +17,7 @@ public void Filter(List 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" }, diff --git a/src/Limbo.Umbraco.YouTube/PropertyEditors/YouTubeConfiguration.cs b/src/Limbo.Umbraco.YouTube/PropertyEditors/YouTubeConfiguration.cs index e9bec99..d11a058 100644 --- a/src/Limbo.Umbraco.YouTube/PropertyEditors/YouTubeConfiguration.cs +++ b/src/Limbo.Umbraco.YouTube/PropertyEditors/YouTubeConfiguration.cs @@ -7,6 +7,12 @@ namespace Limbo.Umbraco.YouTube.PropertyEditors { public class YouTubeConfiguration { + /// + /// Gets or sets the property cache level of the underlying property value converter. Defaults to if not specified. + /// + [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.

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; } diff --git a/src/Limbo.Umbraco.YouTube/PropertyEditors/YouTubeValueConverter.cs b/src/Limbo.Umbraco.YouTube/PropertyEditors/YouTubeValueConverter.cs index d7b0587..f7f3b99 100644 --- a/src/Limbo.Umbraco.YouTube/PropertyEditors/YouTubeValueConverter.cs +++ b/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; + } } diff --git a/src/Limbo.Umbraco.YouTube/wwwroot/Scripts/Controllers/CacheLevel.js b/src/Limbo.Umbraco.YouTube/wwwroot/Scripts/Controllers/CacheLevel.js new file mode 100644 index 0000000..951b25a --- /dev/null +++ b/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; + }); + + } + +}); \ No newline at end of file diff --git a/src/Limbo.Umbraco.YouTube/wwwroot/Styles/Default.css b/src/Limbo.Umbraco.YouTube/wwwroot/Styles/Default.css index 1cbb9c8..b5fd726 100644 --- a/src/Limbo.Umbraco.YouTube/wwwroot/Styles/Default.css +++ b/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; } \ No newline at end of file diff --git a/src/Limbo.Umbraco.YouTube/wwwroot/Styles/Default.less b/src/Limbo.Umbraco.YouTube/wwwroot/Styles/Default.less index a78d461..5642b9b 100644 --- a/src/Limbo.Umbraco.YouTube/wwwroot/Styles/Default.less +++ b/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; + } + } } } \ No newline at end of file diff --git a/src/Limbo.Umbraco.YouTube/wwwroot/Views/CacheLevel.html b/src/Limbo.Umbraco.YouTube/wwwroot/Views/CacheLevel.html new file mode 100644 index 0000000..c93a8cf --- /dev/null +++ b/src/Limbo.Umbraco.YouTube/wwwroot/Views/CacheLevel.html @@ -0,0 +1,11 @@ +
+
+ +
+
\ No newline at end of file