<!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>