#3645 - Lists available languages in the preview bar (if more than 1)

Reads the culture from hash instead of query and updates the hash when changing culture.
2019-01-29 15:30:25 +01:00
parent 5d65ba3147
commit 414f838476
8 changed files with 80 additions and 32 deletions
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
@@ -785,7 +785,7 @@
                // Build the correct path so both /#/ and #/ work.
                var query = 'id=' + content.id;
                if ($scope.culture) {
-                    query += "&culture=" + $scope.culture;
+                    query += "#?culture=" + $scope.culture;
                }
                var redirect = Umbraco.Sys.ServerVariables.umbracoSettings.umbracoPath + '/preview/?' + query;

--- a/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js
@@ -68,16 +68,7 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi
            return;
        }

-        $scope.pageId = $location.search().id || getParameterByName("id");
-        var culture = $location.search().culture || getParameterByName("culture");
-        
-        if ($scope.pageId) {
-            var query = 'id=' + $scope.pageId;
-            if (culture) {
-                query += "&culture=" + culture;
-            }
-            $scope.pageUrl = "frame?" + query;
-        }
+        setPageUrl();

        $scope.isOpen = false;
        $scope.frameLoaded = false;
@@ -93,6 +84,19 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi
        ];
        $scope.previewDevice = $scope.devices[0];

+        
+        function setPageUrl(){
+            $scope.pageId = $location.search().id || getParameterByName("id");
+            var culture = $location.search().culture || getParameterByName("culture");
+
+            if ($scope.pageId) {
+                var query = 'id=' + $scope.pageId;
+                if (culture) {
+                    query += "&culture=" + culture;
+                }
+                $scope.pageUrl = "frame?" + query;
+            }
+        }
        /*****************************************************************************/
        /* Preview devices */
        /*****************************************************************************/
@@ -107,28 +111,39 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi
        /*****************************************************************************/

        $scope.exitPreview = function () {
-            window.top.location.href = "../preview/end?redir=%2f" + $scope.pageId;
+
+            var culture = $location.search().culture || getParameterByName("culture");
+            var relativeUrl = "/" +  $scope.pageId +'?culture='+ culture;
+            window.top.location.href = "../preview/end?redir=" + encodeURIComponent(relativeUrl);
        };

        $scope.onFrameLoaded = function (iframe) {
            $scope.frameLoaded = true;
            configureSignalR(iframe);
-        }
+        };

        /*****************************************************************************/
-        /* Panel managment */
+        /* Panel management */
        /*****************************************************************************/

        $scope.openPreviewDevice = function () {
            $scope.showDevicesPreview = true;
-        }
+        };
+
+        /*****************************************************************************/
+        /* Change culture */
+        /*****************************************************************************/
+        $scope.changeCulture = function (culture) {
+          //  $scope.frameLoaded = false;
+            $location.search("culture", culture);
+            setPageUrl();
+        };
        
    })


    .component('previewIFrame', {
-
-        template: "<div style='width:100%;height:100%;margin:0 auto;overflow:hidden;'><iframe id='resultFrame' src='about:blank' ng-src=\"{{vm.srcDelayed}}\" frameborder='0'></iframe></div>",
+        template: "<div style='width:100%;height:100%;margin:0 auto;overflow:hidden;'><iframe id='resultFrame' src='about:blank' ng-src=\"{{vm.src}}\" frameborder='0'></iframe></div>",
        controller: function ($element, $scope, angularHelper) {

            var vm = this;
@@ -136,22 +151,15 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi
            vm.$postLink = function () {
                var resultFrame = $element.find("#resultFrame");
                resultFrame.on("load", iframeReady);
-                vm.srcDelayed = vm.src;
            };

            function iframeReady() {
                var iframe = $element.find("#resultFrame").get(0);
-                hideUmbracoPreviewBadge(iframe);
                angularHelper.safeApply($scope, function () {
                    vm.onLoaded({ iframe: iframe });
                });
            }

-            function hideUmbracoPreviewBadge (iframe) {
-                if (iframe && iframe.contentDocument && iframe.contentDocument.getElementById("umbracoPreviewBadge")) {
-                    iframe.contentDocument.getElementById("umbracoPreviewBadge").style.display = "none";
-                }
-            };

        },
        controllerAs: "vm",
--- a/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml
+++ b/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml
@@ -46,6 +46,17 @@
                <li ng-repeat="device in devices" ng-class="{ current:previewDevice==device }">
                    <a href="" ng-click="updatePreviewDevice(device)"><i class="icon {{device.icon}}" title="{{device.title}}"></i><span></span></a>
                </li>
+
+                @if (Model.PreviewLinks != null && Model.PreviewLinks.Count() > 2)
+                {
+                    foreach (var previewLink in Model.PreviewLinks)
+                     {
+                         <li>
+                             <a href="" ng-click="changeCulture('@previewLink.CultureId')" title="Preview in @previewLink.CultureName"><i class="icon icon-globe-europe---africa"></i><span>@previewLink.CultureName</span></a>
+                         </li>
+                     }
+                }
+
                <li>
                    <a href="" ng-click="exitPreview()" title="Exit Preview"><i class="icon icon-wrong"></i><span> </span></a>
                </li>
--- a/src/Umbraco.Web/Editors/BackOfficePreviewLinkModel.cs
+++ b/src/Umbraco.Web/Editors/BackOfficePreviewLinkModel.cs
@@ -0,0 +1,8 @@
+namespace Umbraco.Web.Editors
+{
+    public class BackOfficePreviewLinkModel
+    {
+        public string CultureName { get; set; }
+        public string CultureId { get; set; }
+    }
+}
--- a/src/Umbraco.Web/Editors/BackOfficePreviewModel.cs
+++ b/src/Umbraco.Web/Editors/BackOfficePreviewModel.cs
@@ -1,15 +1,21 @@
-using Umbraco.Core.Configuration;
+using System.Collections.Generic;
+using Umbraco.Core.Configuration;
 using Umbraco.Web.Features;

 namespace Umbraco.Web.Editors
 {
    public class BackOfficePreviewModel : BackOfficeModel
    {
-        public BackOfficePreviewModel(UmbracoFeatures features, IGlobalSettings globalSettings) : base(features, globalSettings)
+        private readonly UmbracoFeatures _features;
+        public IEnumerable<BackOfficePreviewLinkModel> PreviewLinks { get; }
+
+        public BackOfficePreviewModel(UmbracoFeatures features, IGlobalSettings globalSettings, IEnumerable<BackOfficePreviewLinkModel> previewLinks) : base(features, globalSettings)
        {
+            _features = features;
+            PreviewLinks = previewLinks;
        }

-        public bool DisableDevicePreview => Features.Disabled.DisableDevicePreview;
-        public string PreviewExtendedHeaderView => Features.Enabled.PreviewExtendedView;
+        public bool DisableDevicePreview => _features.Disabled.DisableDevicePreview;
+        public string PreviewExtendedHeaderView => _features.Enabled.PreviewExtendedView;
    }
 }
--- a/src/Umbraco.Web/Editors/PreviewController.cs
+++ b/src/Umbraco.Web/Editors/PreviewController.cs
@@ -1,12 +1,13 @@
 using System;
+using System.Linq;
 using System.Web;
 using System.Web.Mvc;
 using System.Web.UI;
 using Umbraco.Core;
 using Umbraco.Core.Configuration;
+using Umbraco.Core.Services;
 using Umbraco.Web.Composing;
 using Umbraco.Web.Features;
-using Umbraco.Web.Models.ContentEditing;
 using Umbraco.Web.Mvc;
 using Umbraco.Web.PublishedCache;
 using Umbraco.Web.UI.JavaScript;
@@ -21,20 +22,33 @@ namespace Umbraco.Web.Editors
        private readonly IGlobalSettings _globalSettings;
        private readonly IPublishedSnapshotService _publishedSnapshotService;
        private readonly UmbracoContext _umbracoContext;
+        private readonly ILocalizationService _localizationService;

-        public PreviewController(UmbracoFeatures features, IGlobalSettings globalSettings, IPublishedSnapshotService publishedSnapshotService, UmbracoContext umbracoContext)
+        public PreviewController(
+            UmbracoFeatures features,
+            IGlobalSettings globalSettings,
+            IPublishedSnapshotService publishedSnapshotService,
+            UmbracoContext umbracoContext,
+            ILocalizationService localizationService)
        {
            _features = features;
            _globalSettings = globalSettings;
            _publishedSnapshotService = publishedSnapshotService;
            _umbracoContext = umbracoContext;
+            _localizationService = localizationService;
        }

        [UmbracoAuthorize(redirectToUmbracoLogin: true)]
        [DisableBrowserCache]
        public ActionResult Index()
        {
-            var model = new BackOfficePreviewModel(_features, _globalSettings);
+            var availableLanguages = _localizationService.GetAllLanguages();
+            var previewLinks = availableLanguages.Select(x => new BackOfficePreviewLinkModel() {
+                CultureName = x.CultureName,
+                CultureId = x.IsoCode}
+            );
+
+            var model = new BackOfficePreviewModel(_features, _globalSettings, previewLinks);

            if (model.PreviewExtendedHeaderView.IsNullOrWhiteSpace() == false)
            {
--- a/src/Umbraco.Web/Mvc/UmbracoViewPageOfTModel.cs
+++ b/src/Umbraco.Web/Mvc/UmbracoViewPageOfTModel.cs
@@ -217,7 +217,7 @@ namespace Umbraco.Web.Mvc
                            markupToInject =
                                string.Format(Current.Configs.Settings().Content.PreviewBadge,
                                    IOHelper.ResolveUrl(SystemDirectories.Umbraco),
-                                    Server.UrlEncode(UmbracoContext.Current.HttpContext.Request.Path));
+                                    Server.UrlEncode(UmbracoContext.Current.HttpContext.Request.Url?.PathAndQuery));
                        }
                        else
                        {
--- a/src/Umbraco.Web/Umbraco.Web.csproj
+++ b/src/Umbraco.Web/Umbraco.Web.csproj
@@ -138,6 +138,7 @@
    <Compile Include="Editors\PackageController.cs" />
    <Compile Include="Editors\KeepAliveController.cs" />
    <Compile Include="Editors\MacrosController.cs" />
+    <Compile Include="Editors\BackOfficePreviewLinkModel.cs" />
    <Compile Include="Editors\RelationTypeController.cs" />
    <Compile Include="Logging\WebProfiler.cs" />
    <Compile Include="Logging\WebProfilerComponent.cs" />