mirror of
https://github.com/ONLYOFFICE/document-server-integration.git
synced 2026-04-07 14:06:11 +08:00
455 lines
18 KiB
HTML
455 lines
18 KiB
HTML
<!--*
|
|
*
|
|
* (c) Copyright Ascensio System SIA 2025
|
|
*
|
|
* The MIT License (MIT)
|
|
*
|
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
* of this software and associated documentation files (the "Software"), to deal
|
|
* in the Software without restriction, including without limitation the rights
|
|
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
* copies of the Software, and to permit persons to whom the Software is
|
|
* furnished to do so, subject to the following conditions:
|
|
*
|
|
* The above copyright notice and this permission notice shall be included in all
|
|
* copies or substantial portions of the Software.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
* SOFTWARE.
|
|
*
|
|
*-->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<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" />
|
|
<title>{{ .config.Document.Title }} - ONLYOFFICE</title>
|
|
<link
|
|
rel="icon"
|
|
href="static/images/{{.docType}}.ico"
|
|
type="image/x-icon"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="static/stylesheets/editor.css"
|
|
/>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="form">
|
|
<div id="iframeEditor"></div>
|
|
</div>
|
|
<script type="text/javascript" src="{{.apijs}}"></script>
|
|
<script type="text/javascript" language="javascript">
|
|
var docEditor;
|
|
let historyObject;
|
|
|
|
var innerAlert = function (message) {
|
|
if (console && console.log)
|
|
console.log(message);
|
|
};
|
|
|
|
var onAppReady = function () { // the application is loaded into the browser
|
|
innerAlert("Document editor ready");
|
|
};
|
|
|
|
var onDocumentStateChange = function (event) { // the document is modified
|
|
var title = document.title.replace(/^\*/g, "");
|
|
document.title = (event.data ? "*" : "") + title;
|
|
};
|
|
|
|
var onRequestClose = function () {
|
|
if (window.opener) {
|
|
window.close();
|
|
return;
|
|
}
|
|
docEditor.destroyEditor();
|
|
};
|
|
|
|
var onUserActionRequired = function () {
|
|
console.log("User action required");
|
|
};
|
|
|
|
var onMetaChange = function (event) { // the meta information of the document is changed via the meta command
|
|
if (event.data.title !== undefined) {
|
|
document.title = event.data.title + " - ONLYOFFICE";
|
|
}
|
|
|
|
if (event.data.favorite) {
|
|
var favorite = !!event.data.favorite;
|
|
var title = document.title.replace(/^\☆/g, "");
|
|
document.title = (favorite ? "☆" : "") + title;
|
|
docEditor.setFavorite(favorite); // change the Favorite icon state
|
|
}
|
|
|
|
innerAlert("onMetaChange: " + JSON.stringify(event.data));
|
|
};
|
|
|
|
var onRequestEditRights = function () { // the user is trying to switch the document from the viewing into the editing mode
|
|
location.href = location.href.replace(RegExp("mode=view\&?", "i"), "");
|
|
};
|
|
|
|
var onRequestHistory = function (event) { // the user is trying to show the document version history
|
|
const fileName = config.document.title;
|
|
const data = {
|
|
fileName: fileName,
|
|
};
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "historyObj");
|
|
xhr.setRequestHeader("Content-Type", "application/json");
|
|
xhr.send(JSON.stringify(data));
|
|
xhr.onload = function () {
|
|
historyObject = JSON.parse(xhr.responseText);
|
|
docEditor.refreshHistory( // show the document version history
|
|
{
|
|
currentVersion: historyObject.countVersion,
|
|
history: historyObject.history
|
|
});
|
|
}
|
|
};
|
|
|
|
var onRequestHistoryData = function (event) { // the user is trying to click the specific document version in the document version history
|
|
const version = event.data;
|
|
docEditor.setHistoryData(historyObject.historyData[version-1]); // send the link to the document for viewing the version history
|
|
};
|
|
|
|
var onRequestHistoryClose = function (event){ // the user is trying to go back to the document from viewing the document version history
|
|
document.location.reload();
|
|
};
|
|
|
|
var onRequestRestore = function (event) { // the user is trying to restore file version
|
|
const version = event.data.version;
|
|
const url = event.data.url;
|
|
const fileName = config.document.title;
|
|
const restoreData = {
|
|
version: version,
|
|
url: url,
|
|
fileName: fileName,
|
|
};
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("PUT", "restore");
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
xhr.send(JSON.stringify(restoreData));
|
|
xhr.onload = function () {
|
|
const response = JSON.parse(xhr.responseText);
|
|
if (response.success && !response.error) {
|
|
const dataForHistory = {
|
|
fileName: fileName,
|
|
};
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "historyObj");
|
|
xhr.setRequestHeader("Content-Type", "application/json");
|
|
xhr.send(JSON.stringify(dataForHistory));
|
|
xhr.onload = function () {
|
|
historyObject = JSON.parse(xhr.responseText);
|
|
docEditor.refreshHistory( // show the document version history
|
|
{
|
|
currentVersion: historyObject.countVersion,
|
|
history: historyObject.history
|
|
});
|
|
}
|
|
} else {
|
|
innerAlert(response.error);
|
|
}
|
|
}
|
|
}
|
|
|
|
var onError = function (event) { // an error or some other specific event occurs
|
|
if (event)
|
|
innerAlert(event.data);
|
|
};
|
|
|
|
var onOutdatedVersion = function (event) { // the document is opened for editing with the old document.key value
|
|
location.reload(true);
|
|
};
|
|
|
|
var replaceActionLink = function (href, linkParam) {
|
|
var link;
|
|
var actionIndex = href.indexOf("&action=");
|
|
if (actionIndex != -1) {
|
|
var endIndex = href.indexOf("&", actionIndex + "&action=".length);
|
|
if (endIndex != -1) {
|
|
link = href.substring(0, actionIndex) + href.substring(endIndex) + "&action=" + encodeURIComponent(linkParam);
|
|
} else {
|
|
link = href.substring(0, actionIndex) + "&action=" + encodeURIComponent(linkParam);
|
|
}
|
|
} else {
|
|
link = href + "&action=" + encodeURIComponent(linkParam);
|
|
}
|
|
return link;
|
|
}
|
|
|
|
var onMakeActionLink = function (event) { // the user is trying to get link for opening the document which contains a bookmark, scrolling to the bookmark position
|
|
var actionData = event.data;
|
|
var linkParam = JSON.stringify(actionData);
|
|
docEditor.setActionLink(replaceActionLink(location.href, linkParam)); // set the link to the document which contains a bookmark
|
|
};
|
|
|
|
var onRequestInsertImage = function(event) { // the user is trying to insert an image by clicking the Image from Storage button
|
|
var data = {{.dataInsertImage}};
|
|
data.c = event.data.c;
|
|
docEditor.insertImage(data); // insert an image into the file
|
|
};
|
|
|
|
var onRequestSelectDocument = function(event) { // the user is trying to select document by clicking the Document from Storage button
|
|
var data = {{.dataDocument}};
|
|
data.c = event.data.c;
|
|
docEditor.setRequestedDocument(data); // select a document
|
|
};
|
|
|
|
var onRequestSelectSpreadsheet = function (event) { // the user is trying to select recipients data by clicking the Mail merge button
|
|
var data = {{.dataSpreadsheet}};
|
|
data.c = event.data.c;
|
|
docEditor.setRequestedSpreadsheet(data); // insert recipient data for mail merge into the file
|
|
};
|
|
|
|
var onRequestUsers = function (event) {
|
|
if (event && event.data){
|
|
var c = event.data.c;
|
|
}
|
|
|
|
switch (c) {
|
|
case "protect":
|
|
var users = {{.usersForProtect}};
|
|
break;
|
|
case "info":
|
|
users = [];
|
|
var allUsers = {{.usersInfo}};
|
|
for (var i = 0; i < event.data.id.length; i++) {
|
|
for (var j = 0; j < allUsers.length; j++) {
|
|
if (allUsers[j].id == event.data.id[i]) {
|
|
users.push(allUsers[j]);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
default:
|
|
users = {{.usersForMentions}};
|
|
}
|
|
|
|
docEditor.setUsers({
|
|
"c": c,
|
|
"users": users,
|
|
});
|
|
};
|
|
|
|
var onRequestSendNotify = function(event) { // the user is mentioned in a comment
|
|
event.data.actionLink = replaceActionLink(location.href, JSON.stringify(event.data.actionLink));
|
|
var data = JSON.stringify(event.data);
|
|
innerAlert("onRequestSendNotify: " + data);
|
|
};
|
|
|
|
var requestReference = function(data, callback) {
|
|
innerAlert(data);
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "reference");
|
|
xhr.setRequestHeader("Content-Type", "application/json");
|
|
xhr.send(JSON.stringify(data));
|
|
xhr.onload = function () {
|
|
innerAlert(xhr.responseText);
|
|
callback(JSON.parse(xhr.responseText));
|
|
}
|
|
};
|
|
|
|
var onRequestOpen = function(event) { // user open external data source
|
|
innerAlert("onRequestOpen");
|
|
var windowName = event.data.windowName;
|
|
|
|
requestReference(event.data, function (data) {
|
|
if (data.error) {
|
|
var winEditor = window.open("", windowName);
|
|
winEditor.close();
|
|
innerAlert(data.error, true);
|
|
return;
|
|
}
|
|
|
|
var link = data.link;
|
|
window.open(link, windowName);
|
|
});
|
|
};
|
|
|
|
var onRequestReferenceData = function(event) { // user refresh external data source
|
|
innerAlert("onRequestReferenceData");
|
|
|
|
requestReference(event.data, function (data) {
|
|
docEditor.setReferenceData(data);
|
|
});
|
|
};
|
|
|
|
var onRequestReferenceSource = function (event) {
|
|
innerAlert("onRequestReferenceSource");
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("GET", "files");
|
|
xhr.setRequestHeader("Content-Type", "application/json");
|
|
xhr.send();
|
|
xhr.onload = function () {
|
|
if (xhr.status === 200) {
|
|
innerAlert(JSON.parse(xhr.responseText));
|
|
let fileList = JSON.parse(xhr.responseText);
|
|
let firstXlsxName;
|
|
let file;
|
|
for (var i = 0; i < fileList.length; i++) {
|
|
file = fileList[i];
|
|
if (file["title"]) {
|
|
if (getFileExt(file["title"]) === "xlsx")
|
|
{
|
|
firstXlsxName = file["title"];
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (firstXlsxName) {
|
|
let data = {
|
|
directUrl : "<%- file.directUrl %>" || false,
|
|
path : firstXlsxName
|
|
};
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "reference");
|
|
xhr.setRequestHeader("Content-Type", "application/json");
|
|
xhr.send(JSON.stringify(data));
|
|
xhr.onload = function () {
|
|
if (xhr.status === 200) {
|
|
docEditor.setReferenceSource(JSON.parse(xhr.responseText));
|
|
} else {
|
|
innerAlert("/reference - bad status");
|
|
}
|
|
}
|
|
} else {
|
|
innerAlert("No *.xlsx files");
|
|
}
|
|
} else {
|
|
innerAlert("/files - bad status");
|
|
}
|
|
}
|
|
};
|
|
|
|
var onRequestSaveAs = function (event) { // the user is trying to save file by clicking Save Copy as... button
|
|
var title = event.data.title;
|
|
var url = event.data.url;
|
|
var data = {
|
|
title: title,
|
|
url: url
|
|
}
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "create");
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
xhr.send(JSON.stringify(data));
|
|
xhr.onload = function () {
|
|
innerAlert(xhr.responseText);
|
|
innerAlert(JSON.parse(xhr.responseText).file, true);
|
|
}
|
|
}
|
|
|
|
var onRequestRename = function(event) { // the user is trying to rename file by clicking Rename... button
|
|
innerAlert("onRequestRename: " + JSON.stringify(event.data));
|
|
|
|
var newfilename = event.data;
|
|
var data = {
|
|
newfilename: newfilename,
|
|
dockey: config.document.key,
|
|
ext: config.document.fileType
|
|
};
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "rename");
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
xhr.send(JSON.stringify(data));
|
|
xhr.onload = function () {
|
|
innerAlert(xhr.responseText);
|
|
}
|
|
};
|
|
|
|
var onRequestRefreshFile = function(event) {
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("GET", "config?fileName=" + encodeURIComponent(config.document.title) +
|
|
"&permissions=" + encodeURIComponent(JSON.stringify(config.document.permissions)));
|
|
xhr.send();
|
|
xhr.onload = function () {
|
|
innerAlert(xhr.responseText);
|
|
docEditor.refreshFile(JSON.parse(xhr.responseText));
|
|
};
|
|
};
|
|
|
|
var events = {
|
|
"onAppReady": onAppReady,
|
|
"onDocumentStateChange": onDocumentStateChange,
|
|
"onUserActionRequired": onUserActionRequired,
|
|
"onMetaChange": onMetaChange,
|
|
"onRequestInsertImage": onRequestInsertImage,
|
|
"onRequestSelectDocument": onRequestSelectDocument,
|
|
"onRequestSelectSpreadsheet": onRequestSelectSpreadsheet,
|
|
"onError": onError,
|
|
"onOutdatedVersion": onOutdatedVersion,
|
|
"onMakeActionLink": onMakeActionLink,
|
|
"onRequestOpen": onRequestOpen,
|
|
};
|
|
|
|
var config = {{ .config }};
|
|
|
|
if (config.editorConfig.user.id !== "uid-0") {
|
|
events["onRequestRefreshFile"] = onRequestRefreshFile;
|
|
events["onRequestClose"] = onRequestClose;
|
|
events["onRequestSendNotify"] = onRequestSendNotify;
|
|
events["onRequestEditRights"] = onRequestEditRights;
|
|
events["onRequestHistory"] = onRequestHistory;
|
|
events["onRequestHistoryData"] = onRequestHistoryData;
|
|
events["onRequestUsers"] = onRequestUsers;
|
|
events["onRequestSaveAs"] = onRequestSaveAs;
|
|
events["onRequestRename"] = onRequestRename;
|
|
events["onRequestReferenceData"] = onRequestReferenceData;
|
|
events["onRequestReferenceSource"] = onRequestReferenceSource;
|
|
if (config.editorConfig.user.id !== "uid-3") {
|
|
events["onRequestHistoryClose"] = onRequestHistoryClose;
|
|
events["onRequestRestore"] = onRequestRestore;
|
|
}
|
|
}
|
|
|
|
config["events"] = events;
|
|
|
|
var connectEditor = function () {
|
|
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";
|
|
}
|
|
};
|
|
|
|
const getFileExt = function (fileName) {
|
|
if (fileName.indexOf(".")) {
|
|
return fileName.split('.').reverse()[0];
|
|
}
|
|
return false;
|
|
};
|
|
|
|
if (window.addEventListener) {
|
|
window.addEventListener("load", connectEditor);
|
|
window.addEventListener("resize", fixSize);
|
|
window.addEventListener("orientationchange", fixSize);
|
|
} else if (window.attachEvent) {
|
|
window.attachEvent("onload", connectEditor);
|
|
window.attachEvent("onresize", fixSize);
|
|
window.addEventListener("orientationchange", fixSize);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|