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

@@ -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/
     -->
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link id="favicon" rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!-- Tell the browser it's a PWA -->

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 (
       <Box
         widthProp="100vw"
-        heightProp={this.isIPad() ? "calc(var(--vh, 1vh) * 100)" : "100vh"}
+        heightProp={isIPad() ? "calc(var(--vh, 1vh) * 100)" : "100vh"}
       >
         <Toast />
 

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";
+};