yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2982 from umbraco/temp8-get-preview-working

Browse Source 
v8 - Gets previewing working with variants
This commit is contained in:
Mads Rasmussen
2018-09-14 13:41:18 +02:00
committed by GitHub
parent e90ac06d82 62c0719712
commit daa8b90372
39 changed files with 431 additions and 592 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/gulpfile.js
View File

@@ -80,7 +80,7 @@ var sources = {
//js files for backoffie
//processed in the js task
js: {
preview: { files: ["src/canvasdesigner/**/*.js"], out: "umbraco.canvasdesigner.js" },
preview: { files: ["src/preview/**/*.js"], out: "umbraco.preview.js" },
installer: { files: ["src/installer/**/*.js"], out: "umbraco.installer.js" },
controllers: { files: ["src/{views,controllers}/**/*.controller.js"], out: "umbraco.controllers.js" },
directives: { files: ["src/common/directives/**/*.js"], out: "umbraco.directives.js" },

30
src/Umbraco.Web.UI.Client/src/canvasdesigner.loader.js
View File

@@ -1,19 +1,19 @@
LazyLoad.js([
'../lib/jquery/jquery.min.js',
'../lib/angular/1.1.5/angular.min.js',
'../lib/underscore/underscore-min.js',
'../lib/umbraco/Extensions.js',
'../js/app.js',
'../js/umbraco.resources.js',
'../js/umbraco.services.js',
'../js/umbraco.interceptors.js',
'../ServerVariables',
'../lib/signalr/jquery.signalR.js',
'/umbraco/BackOffice/signalr/hubs',
'../js/umbraco.canvasdesigner.js'
'../lib/jquery/jquery.min.js',
'../lib/angular/angular.js',
'../lib/underscore/underscore-min.js',
'../lib/umbraco/Extensions.js',
'../js/app.js',
'../js/umbraco.resources.js',
'../js/umbraco.services.js',
'../js/umbraco.interceptors.js',
'../ServerVariables',
'../lib/signalr/jquery.signalR.js',
'../BackOffice/signalr/hubs',
'../js/umbraco.canvasdesigner.js'
], function () {
jQuery(document).ready(function () {
angular.bootstrap(document, ['Umbraco.canvasdesigner']);
});
jQuery(document).ready(function () {
angular.bootstrap(document, ['Umbraco.canvasdesigner']);
});
});

117
src/Umbraco.Web.UI.Client/src/canvasdesigner/canvasdesigner.controller.js
View File

@@ -1,117 +0,0 @@
/*********************************************************************************************************/
/* Canvasdesigner panel app and controller */
/*********************************************************************************************************/
var app = angular.module("Umbraco.canvasdesigner", ['umbraco.resources', 'umbraco.services'])
.controller("Umbraco.canvasdesignerController", function ($scope, $http, $window, $timeout, $location, dialogService) {
var isInit = $location.search().init;
if (isInit === "true") {
//do not continue, this is the first load of this new window, if this is passed in it means it's been
//initialized by the content editor and then the content editor will actually re-load this window without
//this flag. This is a required trick to get around chrome popup mgr. We don't want to double load preview.aspx
//since that will double prepare the preview documents
return;
}
$scope.isOpen = false;
$scope.frameLoaded = false;
var pageId = $location.search().id;
$scope.pageId = pageId;
$scope.pageUrl = "../dialogs/Preview.aspx?id=" + pageId;
$scope.valueAreLoaded = false;
$scope.devices = [
{ name: "desktop", css: "desktop", icon: "icon-display", title: "Desktop" },
{ name: "laptop - 1366px", css: "laptop border", icon: "icon-laptop", title: "Laptop" },
{ name: "iPad portrait - 768px", css: "iPad-portrait border", icon: "icon-ipad", title: "Tablet portrait" },
{ name: "iPad landscape - 1024px", css: "iPad-landscape border", icon: "icon-ipad flip", title: "Tablet landscape" },
{ name: "smartphone portrait - 480px", css: "smartphone-portrait border", icon: "icon-iphone", title: "Smartphone portrait" },
{ name: "smartphone landscape - 320px", css: "smartphone-landscape border", icon: "icon-iphone flip", title: "Smartphone landscape" }
];
$scope.previewDevice = $scope.devices[0];
/*****************************************************************************/
/* Preview devices */
/*****************************************************************************/
// Set preview device
$scope.updatePreviewDevice = function (device) {
$scope.previewDevice = device;
};
/*****************************************************************************/
/* Exit Preview */
/*****************************************************************************/
$scope.exitPreview = function () {
window.top.location.href = "../endPreview.aspx?redir=%2f" + $scope.pageId;
};
/*****************************************************************************/
/* Panel managment */
/*****************************************************************************/
$scope.openPreviewDevice = function () {
$scope.showDevicesPreview = true;
$scope.closeIntelCanvasdesigner();
}
/*****************************************************************************/
/* Call function into the front-end */
/*****************************************************************************/
var hideUmbracoPreviewBadge = function () {
var iframe = (document.getElementById("resultFrame").contentWindow || document.getElementById("resultFrame").contentDocument);
if(iframe.document.getElementById("umbracoPreviewBadge"))
iframe.document.getElementById("umbracoPreviewBadge").style.display = "none";
};
/*****************************************************************************/
/* Init */
/*****************************************************************************/
// signalr hub
var previewHub = $.connection.previewHub;
previewHub.client.refreshed = function (message, sender) {
console.log("Notified by SignalR preview hub (" + message+ ").");
if ($scope.pageId != message) {
console.log("Not a notification for us (" + $scope.pageId + ").");
return;
}
var resultFrame = document.getElementById("resultFrame");
var iframe = (resultFrame.contentWindow || resultFrame.contentDocument);
//setTimeout(function() { iframe.location.reload(); }, 1000);
iframe.location.reload();
};
$.connection.hub.start()
.done(function () { console.log("Connected to SignalR preview hub (ID=" + $.connection.hub.id + ")"); })
.fail(function () { console.log("Could not connect to SignalR preview hub."); });
})
.directive('iframeIsLoaded', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
element.load(function () {
var iframe = (element.context.contentWindow || element.context.contentDocument);
if(iframe && iframe.document.getElementById("umbracoPreviewBadge"))
iframe.document.getElementById("umbracoPreviewBadge").style.display = "none";
if (!document.getElementById("resultFrame").contentWindow.refreshLayout) {
scope.frameLoaded = true;
scope.$apply();
}
});
}
};
})

24
src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
View File

@@ -486,10 +486,14 @@
// Chromes popup blocker will kick in if a window is opened
// without the initial scoped request. This trick will fix that.
//
var previewWindow = $window.open('preview/?init=true&id=' + content.id, 'umbpreview');
var previewWindow = $window.open('preview/?init=true', 'umbpreview');
// Build the correct path so both /#/ and #/ work.
var redirect = Umbraco.Sys.ServerVariables.umbracoSettings.umbracoPath + '/preview/?id=' + content.id;
var query = 'id=' + content.id;
if ($scope.culture) {
query += "&culture=" + $scope.culture;
}
var redirect = Umbraco.Sys.ServerVariables.umbracoSettings.umbracoPath + '/preview/?' + query;
//The user cannot save if they don't have access to do that, in which case we just want to preview
//and that's it otherwise they'll get an unauthorized access message
@@ -497,8 +501,22 @@
previewWindow.location.href = redirect;
}
else {
$scope.save().then(function (data) {
var selectedVariant;
if (!$scope.culture) {
selectedVariant = $scope.content.variants[0];
}
else {
selectedVariant = _.find($scope.content.variants, function (v) {
return v.language.culture === $scope.culture;
});
}
//ensure the save flag is set
selectedVariant.save = true;
performSave({ saveMethod: contentResource.publish, action: "save" }).then(function (data) {
previewWindow.location.href = redirect;
}, function (err) {
//validation issues ....
});
}
}

147
src/Umbraco.Web.UI.Client/src/preview/preview.controller.js Normal file
View File

@@ -0,0 +1,147 @@
/*********************************************************************************************************/
/* Preview app and controller */
/*********************************************************************************************************/
var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.services'])
.controller("previewController", function ($scope, $http, $window, $timeout, $location, dialogService) {
//gets a real query string value
function getParameterByName(name, url) {
if (!url) url = $window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
function configureSignalR(iframe) {
// signalr hub
var previewHub = $.connection.previewHub;
previewHub.client.refreshed = function (message, sender) {
console.log("Notified by SignalR preview hub (" + message + ").");
if ($scope.pageId != message) {
console.log("Not a notification for us (" + $scope.pageId + ").");
return;
}
var iframeDoc = (iframe.contentWindow || iframe.contentDocument);
iframeDoc.location.reload();
};
$.connection.hub.start()
.done(function () { console.log("Connected to SignalR preview hub (ID=" + $.connection.hub.id + ")"); })
.fail(function () { console.log("Could not connect to SignalR preview hub."); });
}
var isInit = getParameterByName("init");
if (isInit === "true") {
//do not continue, this is the first load of this new window, if this is passed in it means it's been
//initialized by the content editor and then the content editor will actually re-load this window without
//this flag. This is a required trick to get around chrome popup mgr.
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;
}
$scope.isOpen = false;
$scope.frameLoaded = false;
$scope.valueAreLoaded = false;
$scope.devices = [
{ name: "desktop", css: "desktop", icon: "icon-display", title: "Desktop" },
{ name: "laptop - 1366px", css: "laptop border", icon: "icon-laptop", title: "Laptop" },
{ name: "iPad portrait - 768px", css: "iPad-portrait border", icon: "icon-ipad", title: "Tablet portrait" },
{ name: "iPad landscape - 1024px", css: "iPad-landscape border", icon: "icon-ipad flip", title: "Tablet landscape" },
{ name: "smartphone portrait - 480px", css: "smartphone-portrait border", icon: "icon-iphone", title: "Smartphone portrait" },
{ name: "smartphone landscape - 320px", css: "smartphone-landscape border", icon: "icon-iphone flip", title: "Smartphone landscape" }
];
$scope.previewDevice = $scope.devices[0];
/*****************************************************************************/
/* Preview devices */
/*****************************************************************************/
// Set preview device
$scope.updatePreviewDevice = function (device) {
$scope.previewDevice = device;
};
/*****************************************************************************/
/* Exit Preview */
/*****************************************************************************/
$scope.exitPreview = function () {
window.top.location.href = "../endPreview.aspx?redir=%2f" + $scope.pageId;
};
$scope.onFrameLoaded = function (iframe) {
$scope.frameLoaded = true;
configureSignalR(iframe);
}
/*****************************************************************************/
/* Panel managment */
/*****************************************************************************/
$scope.openPreviewDevice = function () {
$scope.showDevicesPreview = true;
}
})
.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>",
controller: function ($element, $scope, angularHelper) {
var vm = this;
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",
bindings: {
src: "<",
onLoaded: "&"
}
})
.config(function ($locationProvider) {
$locationProvider.html5Mode(false); //turn html5 mode off
$locationProvider.hashPrefix('');
});