<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<!--
*
* (c) Copyright Ascensio System SIA 2021
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
-->
<title>ONLYOFFICE</title>
<style type="text/css">
html {
height: 100%;
width: 100%;
}
body {
background: #fff;
color: #333;
font-family: Arial, Tahoma,sans-serif;
font-size: 12px;
font-weight: normal;
height: 100%;
margin: 0;
overflow-y: hidden;
padding: 0;
text-decoration: none;
}
.form {
height: 100%;
}
div {
margin: 0;
padding: 0;
}
.app-error-panel {
position: absolute;
width: 100%;
height: 100%;
top: 0;
background-color: #f4f4f4;
z-index: 10;
}
.message-block {
display: inline-block;
vertical-align: middle;
width: 100%;
}
.message-inner {
width: 550px;
margin: auto;
padding: 30px;
background-color: #e3e3e3;
text-align: center;
}
.title {
font-size: 24px;
margin: 0 0 14px;
}
.text {
font-size: 16px;
}
</style>
</head>
<body>
<div class="form">
<div id="iframeEditor">
</div>
</div>
<script type="text/javascript" src="../../web-apps/apps/api/documents/api.js"></script>
<script type="text/javascript" language="javascript">
var docEditor;
var postMessageOrigin;
var lang = "en-US";
var startTime;
var documentChanged;
var sendNotificationTimer;
var sessionId;
var fileInfo;
var insertImageType;
var innerAlert = function (message) {
if (console && console.log)
console.log(message);
};
var commandMap = {
'Blur_Focus': function (data) {
innerAlert('Blur_Focus');
docEditor.blurFocus();
},
'Grab_Focus': function (data) {
innerAlert('Grab_Focus');
docEditor.grabFocus();
},
'Action_InsertGraphic': function (data) {
data && data.Values && docEditor.insertImage({
"c": insertImageType,
"images": [{ "url": data.Values.url }]
});
},
'Host_PostmessageReady': function (data) {
innerAlert('Host_PostmessageReady');
}
};
var _postMessage = function(msgId, msgData) {
if (window.parent && window.JSON) {
msgData = msgData || {};
msgData["ui-language"] = lang;
msgData["wdUserSession"] = sessionId;
var msg = {
"MessageId": msgId,
"SendTime": Date.now(),
"Values": msgData
};
window.parent.postMessage(window.JSON.stringify(msg), postMessageOrigin);
}
};
var _onMessage = function(msg) {
if (msg.origin !== postMessageOrigin) return;
var data = msg.data;
if (Object.prototype.toString.apply(data) !== '[object String]' || !window.JSON) {
return;
}
var cmd, handler;
try {
cmd = window.JSON.parse(data)
} catch(e) {
cmd = '';
}
if (cmd) {
handler = commandMap[cmd.MessageId];
if (handler) {
handler.call(this, cmd);
}
}
};
var fn = function(e) { _onMessage(e); };
if (window.attachEvent) {
window.attachEvent('onmessage', fn);
} else {
window.addEventListener('message', fn, false);
}
var onAppReady = function () {
_postMessage('App_LoadingStatus', {
"DocumentLoadedTime": Date.now() - startTime
});
innerAlert("App ready");
};
var sendEditNotification = function () {
documentChanged && _postMessage('Edit_Notification', {});
documentChanged = false;
};
var onDocumentStateChange = function (event) {
if (event.data) {
documentChanged = true;
if (sendNotificationTimer===undefined) {
sendNotificationTimer = setInterval(sendEditNotification, 30000);
sendEditNotification();
}
}
};
var onRequestRename = function (event) {
if (event.data) {
_postMessage('File_Rename', {
"NewName": event.data
});
}
};
var onRequestClose = function () {
if (fileInfo.ClosePostMessage)
_postMessage('UI_Close', {});
else if (fileInfo.CloseUrl)
window.parent.location.href = fileInfo.CloseUrl;
};
var onRequestEditRights = function () {
if (fileInfo.EditModePostMessage)
_postMessage('UI_Edit', {});
else if (fileInfo.HostEditUrl)
window.open(fileInfo.HostEditUrl, "_blank");
};
var onRequestSharingSettings = function (event) {
if (fileInfo.FileSharingPostMessage)
_postMessage('UI_Sharing', {});
else if (fileInfo.FileSharingUrl)
window.open(fileInfo.FileSharingUrl, "_blank");
};
var onRequestHistory = function (event) {
if (fileInfo.FileVersionPostMessage)
_postMessage('UI_FileVersions', {});
else if (fileInfo.FileVersionUrl)
window.open(fileInfo.FileVersionUrl, "_blank");
};
var onRequestInsertImage = function (event) {
insertImageType = event.data.c;
_postMessage('UI_InsertGraphic', {});
};
var onError = function (event) {
if (event)
innerAlert(event.data);
};
var connectEditor = function () {
fileInfo = <%- JSON.stringify(fileInfo) %>;
var key = "<%- key %>";
var userAuth = <%- JSON.stringify(userAuth) %>;
var token = "<%- token %>";
var queryParams = <%- JSON.stringify(queryParams) %>;
if (!fileInfo.BaseFileName) {
showError();
return;
}
var fileType = fileInfo.BaseFileName ? fileInfo.BaseFileName.substr(fileInfo.BaseFileName.lastIndexOf('.') + 1) : "";
var config = {
"width": "100%",
"height": "100%",
"type": "desktop",
"documentType": queryParams.documenttype,
"token": token,
"document": {
"title": fileInfo.BreadcrumbDocName || fileInfo.BaseFileName,
"url": userAuth.wopiSrc,
"fileType": fileInfo.FileExtension ? fileInfo.FileExtension.substr(1) : fileType,
"key": key,
"info": {
"folder": fileInfo.BreadcrumbFolderName
},
"permissions": {
"edit": !fileInfo.ReadOnly && fileInfo.UserCanWrite,
"review": (fileInfo.SupportsReviewing===false) ? false : (fileInfo.UserCanReview===false ? false : fileInfo.UserCanReview),
"copy": fileInfo.CopyPasteRestrictions!=="CurrentDocumentOnly" && fileInfo.CopyPasteRestrictions!=="BlockAll",
"print": !fileInfo.DisablePrint && !fileInfo.HidePrintOption
}
},
"editorConfig": {
"mode": queryParams.mode,
"lang": queryParams.lang || queryParams.ui || "en-US",
"region": queryParams.rs,
"callbackUrl": JSON.stringify(userAuth),
"user": {
"id": fileInfo.UserId,
"name": fileInfo.IsAnonymousUser ? "" : fileInfo.UserFriendlyName
},
"customization": {
"about": true,
"goback": {
"url": fileInfo.BreadcrumbFolderUrl
},
"customer": {
"name": fileInfo.BreadcrumbBrandName,
"www": fileInfo.BreadcrumbBrandUrl
},
"chat": queryParams.dchat!=="1",
"uiTheme": queryParams.thm==="1" ? "default-light" : (queryParams.thm==="2" ? "default-dark" : undefined)
},
"coEditing": {
"mode": "fast",
"change": false
},
"wopi": {
"FileNameMaxLength": fileInfo.FileNameMaxLength && fileInfo.FileNameMaxLength>0 ? fileInfo.FileNameMaxLength : 250
}
},
"events": {
"onAppReady": onAppReady,
"onDocumentStateChange": fileInfo.EditNotificationPostMessage ? onDocumentStateChange : undefined,
'onRequestEditRights': fileInfo.EditModePostMessage || fileInfo.HostEditUrl ? onRequestEditRights : undefined,
"onError": onError,
"onRequestClose": fileInfo.ClosePostMessage || fileInfo.CloseUrl ? onRequestClose : undefined,
"onRequestRename": fileInfo.SupportsRename && fileInfo.UserCanRename ? onRequestRename : undefined,
"onRequestSharingSettings": fileInfo.FileSharingPostMessage || fileInfo.FileSharingUrl ? onRequestSharingSettings : undefined,
"onRequestHistory": fileInfo.FileVersionUrl || fileInfo.FileVersionPostMessage ? onRequestHistory : undefined,
"onRequestInsertImage": fileInfo.EnableInsertRemoteImage ? onRequestInsertImage : undefined
}
};
postMessageOrigin = fileInfo.PostMessageOrigin || "*";
if (postMessageOrigin && (typeof postMessageOrigin === 'string') && postMessageOrigin.charAt(postMessageOrigin.length-1)=='/')
postMessageOrigin = postMessageOrigin.substring(0, postMessageOrigin.length - 1);
lang = config.editorConfig.lang;
sessionId = userAuth.userSessionId;
startTime = Date.now();
docEditor = new DocsAPI.DocEditor("iframeEditor", config);
fixSize();
};
var fixSize = function () {
var wrapEl = document.getElementsByClassName("form");
if (wrapEl.length) {
wrapEl[0].style.height = screen.availHeight + "px";
window.scrollTo(0, -1);
wrapEl[0].style.height = window.innerHeight + "px";
}
};
var showError = function(msg, title) {
msg = msg || 'Sorry, editor could not be loaded. Please contact your administrator.';
var newDiv = document.createElement("div");
newDiv.className = "app-error-panel";
newDiv.innerHTML = '<div class="message-block">' +
'<div class="message-inner">' +
(title ? '<div class="title">' + title + '</div>' : '') +
'<div class="text">' + msg + '</div>' +
'</div>' +
'</div>';
document.body.appendChild(newDiv);
};
if (window.addEventListener) {
window.addEventListener("load", connectEditor);
window.addEventListener("resize", fixSize);
} else if (window.attachEvent) {
window.attachEvent("onload", connectEditor);
window.attachEvent("onresize", fixSize);
}
</script>
</body>
</html>