From c949b160f9f28379607ae0a9105e756a073b732f Mon Sep 17 00:00:00 2001 From: Alexey Kostenko Date: Mon, 21 Dec 2020 14:04:40 +0300 Subject: [PATCH] Web: Files: DocEditor: Added meta data (favicon, title). Adding "*" when data is not saved. Changing title in DocEditor when changing filename --- products/ASC.Files/Client/public/index.html | 2 +- .../pages/DocEditor/icons/presentation.ico | Bin 0 -> 8348 bytes .../pages/DocEditor/icons/spreadsheet.ico | Bin 0 -> 8348 bytes .../components/pages/DocEditor/icons/text.ico | Bin 0 -> 8348 bytes .../src/components/pages/DocEditor/index.js | 57 ++++++++++++++++-- .../src/components/pages/DocEditor/utils.js | 34 +++++++++++ 6 files changed, 87 insertions(+), 6 deletions(-) create mode 100644 products/ASC.Files/Client/src/components/pages/DocEditor/icons/presentation.ico create mode 100644 products/ASC.Files/Client/src/components/pages/DocEditor/icons/spreadsheet.ico create mode 100644 products/ASC.Files/Client/src/components/pages/DocEditor/icons/text.ico create mode 100644 products/ASC.Files/Client/src/components/pages/DocEditor/utils.js diff --git a/products/ASC.Files/Client/public/index.html b/products/ASC.Files/Client/public/index.html index 143302c9aa..c297aea0e6 100644 --- a/products/ASC.Files/Client/public/index.html +++ b/products/ASC.Files/Client/public/index.html @@ -12,7 +12,7 @@ manifest.json provides metadata used when your web app is added to the homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ --> - + diff --git a/products/ASC.Files/Client/src/components/pages/DocEditor/icons/presentation.ico b/products/ASC.Files/Client/src/components/pages/DocEditor/icons/presentation.ico new file mode 100644 index 0000000000000000000000000000000000000000..888c7a853a451ee93e11e9643d2fca648856b62f GIT binary patch literal 8348 zcmeI0K?;K~5Ji7W58x486_3$vyXYwt58583w95+O+GZ3bg364f3i1OQjej!nWujz& z1CEGexH?7>0cQY_tDE~1aCg^}#rTk-@hUC?9*X7dD+K*-C-qL|Ohrotv)rHqE;K7J`3_Xg`V`!(zPk;yt*jD3jLI&DSf9EkJ zVMGQplq3;j6IqN!<{~mS);^C!Hs*d|`pgtrnoIlZTD;$_C;9dk9kRREE6*;fJ>6$l zueyaegT!6X4;43cJ?Hw5z4N=H_HN#(eBE3ZV^u8|8cl0bzkD8*m5Wy8T=%TnKF6wB z)DO>}`By%Z$Wa%$iM3%}Xf&+}UD&3%F2s~RpE)~9`*+vM_pTtfbTs&;%#S0VNQ zZLJfSa)GT7G}Q^Teh}s9smmFe9n!P)@9`h>N&hzAR>WJ>SAX=wzUuon|92T6zHi$< w_66IPf1miF*~S+6weiDT>)-MG>A6*ZHWDBK5+DH*AOR8}0TLhq68Ic}2Py&n?EnA( literal 0 HcmV?d00001 diff --git a/products/ASC.Files/Client/src/components/pages/DocEditor/icons/text.ico b/products/ASC.Files/Client/src/components/pages/DocEditor/icons/text.ico new file mode 100644 index 0000000000000000000000000000000000000000..31f9ca4130acfe882606c0e6dc42a9e907030bb4 GIT binary patch literal 8348 zcmeI0K?=e!5JkV@0lHRfvyvXetuDMyu^y;YkD*5qJw~0W2-zqh4M~eX5SoSzKY8;@ z=m0a!VGQJHP-egeKqk-reE}R~T*{m*!B)D?e{1cr*f*!;^IYd$%-&S_UA5b4^@yo! zYo$21t&yhEIyLzAt++20JZX6yBoc^eHD?K#aL(KnhhEw(-^Z(!ZpR#wkcX#im z{Qp$#OI_?z?BS!Wbpk0D^c8|%bpov)G0 j-f$VKe|*0`jnjBG5+DH*AOR8}0TLhq5+DH*2uI)rIKZ~m literal 0 HcmV?d00001 diff --git a/products/ASC.Files/Client/src/components/pages/DocEditor/index.js b/products/ASC.Files/Client/src/components/pages/DocEditor/index.js index 16d92c1d79..2f4bf0ba8a 100644 --- a/products/ASC.Files/Client/src/components/pages/DocEditor/index.js +++ b/products/ASC.Files/Client/src/components/pages/DocEditor/index.js @@ -3,9 +3,24 @@ import { withRouter } from "react-router"; import { Toast, Box } from "asc-web-components"; import { utils, api, toastr, Loaders } from "asc-web-common"; import { isIOS, deviceType } from "react-device-detect"; +import { setDocumentTitle } from "../../../helpers/utils"; +import { changeTitle, setFavicon, isIPad } from "./utils"; +import throttle from "lodash/throttle"; const { getObjectByLocation, showLoader, hideLoader, tryRedirectTo } = utils; +let documentIsReady = false; + +let docTitle = null; +let fileType = null; + +let docSaved = null; + +const throttledChangeTitle = throttle( + () => changeTitle(docSaved, docTitle), + 500 +); + class PureEditor extends React.Component { constructor(props) { super(props); @@ -29,7 +44,7 @@ class PureEditor extends React.Component { console.log("PureEditor componentDidMount", fileId, doc); - if (this.isIPad()) { + if (isIPad()) { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--vh", `${vh}px`); } @@ -76,29 +91,61 @@ class PureEditor extends React.Component { onLoad = (config) => { try { + docTitle = config.document.title; + fileType = config.document.fileType; + + setFavicon(fileType); + setDocumentTitle(docTitle); + if (window.innerWidth < 720) { config.type = "mobile"; } + + const events = { + events: { + onDocumentStateChange: this.onDocumentStateChange, + onMetaChange: this.onMetaChange, + onDocumentReady: this.onDocumentReady, + }, + }; + + const newConfig = Object.assign(config, events); + if (!window.DocsAPI) throw new Error("DocsAPI is not defined"); hideLoader(); - window.DocsAPI.DocEditor("editor", config); + window.DocsAPI.DocEditor("editor", newConfig); } catch (error) { console.log(error); toastr.error(error.message, null, 0, true); } }; - isIPad = () => { - return isIOS && deviceType === "tablet"; + onDocumentStateChange = (event) => { + if (!documentIsReady) return; + + docSaved = !event.data; + throttledChangeTitle(); + }; + + onDocumentReady = () => { + documentIsReady = true; + }; + + onMetaChange = (event) => { + const newTitle = event.data.title; + if (newTitle && newTitle !== docTitle) { + setDocumentTitle(newTitle); + docTitle = newTitle; + } }; render() { return ( diff --git a/products/ASC.Files/Client/src/components/pages/DocEditor/utils.js b/products/ASC.Files/Client/src/components/pages/DocEditor/utils.js new file mode 100644 index 0000000000..e5d11ed83f --- /dev/null +++ b/products/ASC.Files/Client/src/components/pages/DocEditor/utils.js @@ -0,0 +1,34 @@ +import { setDocumentTitle } from "../../../helpers/utils"; +import { isIOS, deviceType } from "react-device-detect"; + +import textIcon from "./icons/text.ico"; +import presentationIcon from "./icons/presentation.ico"; +import spreadsheetIcon from "./icons/spreadsheet.ico"; + +export const changeTitle = (docSaved, docTitle) => { + docSaved ? setDocumentTitle(docTitle) : setDocumentTitle(`*${docTitle}`); +}; + +export const setFavicon = (fileType) => { + const favicon = document.getElementById("favicon"); + if (!favicon) return; + + switch (fileType) { + case "docx": + favicon.href = textIcon; + break; + case "pptx": + favicon.href = presentationIcon; + break; + case "xlsx": + favicon.href = spreadsheetIcon; + break; + + default: + break; + } +}; + +export const isIPad = () => { + return isIOS && deviceType === "tablet"; +};