chore (rewrite): editor highlight and unsaved nav block

public/assets/components/menubar.js

@@ -31,7 +31,7 @@ export default class ComponentMenubar extends window.HTMLElement {
         $title.style.opacity = 0;
         this.timeoutID = setTimeout(() => {
             animate($title, { time: 250, keyframes: slideYIn(2) });
-        }, 300);
+        }, 100);
     }
 
     disconnectedCallback() {

public/assets/lib/skeleton/router.js

@@ -9,7 +9,12 @@ export async function init($root) {
     });
 }
 
-export function navigate(href) {
+export async function navigate(href) {
+    if (typeof window.history.block === "function") {
+        const block = await window.history.block(href);
+        if (block) return;
+    }
+    delete window.history.block;
     window.history.pushState({
         ...window.history,
         previous: window.location.pathname,

public/assets/pages/ctrl_viewerpage.js

@@ -3,7 +3,7 @@ import rxjs, { effect } from "../lib/rx.js";
 import { ApplicationError } from "../lib/error.js";
 import { basename } from "../lib/path.js";
 import { loadCSS } from "../helpers/loader.js";
-import WithShell from "../components/decorator_shell_filemanager.js";
+import WithShell, { init as initShell } from "../components/decorator_shell_filemanager.js";
 import { get as getConfig } from "../model/config.js";
 
 import ctrlError from "./ctrl_error.js";
@@ -61,7 +61,7 @@ export default WithShell(async function(render) {
 export async function init() {
     return Promise.all([
         loadCSS(import.meta.url, "./ctrl_viewerpage.css"),
-        loadCSS(import.meta.url, "../components/decorator_shell_filemanager.css"),
+        initShell(),
         mime$.pipe(
             rxjs.map((mimes) => opener(basename(getCurrentPath()), mimes)),
             rxjs.mergeMap(([opener]) => loadModule(opener)),

public/assets/pages/filespage/ctrl_filesystem.js

@@ -22,7 +22,6 @@ export default async function(render) {
     `);
     render($page);
 
-
     // feature: virtual scrolling
     const removeLoader = createLoader($page);
     const path = location.pathname.replace(new RegExp("^/files"), "");

public/assets/pages/viewerpage/application_editor.js

@@ -3,6 +3,7 @@ import rxjs, { effect } from "../../lib/rx.js";
 import { animate, slideXIn, opacityOut } from "../../lib/animate.js";
 import { qs } from "../../lib/dom.js";
 import { createLoader } from "../../components/loader.js";
+import modal from "../../components/modal.js";
 import { loadCSS, loadJS } from "../../helpers/loader.js";
 import ajax from "../../lib/ajax.js";
 import { extname } from "../../lib/path.js";
@@ -71,7 +72,7 @@ export default async function(render) {
             const editor = window.CodeMirror($editor, {
                 value: content,
                 lineNumbers: true,
-                mode,
+                mode: CodeMirror.__mode,
                 keyMap: ["emacs", "vim"].indexOf(config["editor"]) === -1 ? "sublime" : config["editor"],
                 lineWrapping: true,
                 readOnly: !/PUT/.test(acl),
@@ -134,6 +135,7 @@ export default async function(render) {
             CodeMirror.commands.save = (cm) => observer.next(cm);
         })),
         rxjs.mergeMap((cm) => {
+            $fab.classList.remove("hidden");
             $fab.render($ICON.LOADING)
             $fab.disabled = true;
             return rxjs.of(cm.getValue()).pipe(
@@ -146,6 +148,35 @@ export default async function(render) {
         }),
         rxjs.catchError(ctrlError()),
     ));
+
+    // feature5: save on exit
+    effect(setup$.pipe(
+        rxjs.tap((cm) => window.history.block = async (href) => {
+            const block = qs(document.body, `[is="component-breadcrumb"]`).hasAttribute("indicator");
+            if (block === false) return false;
+
+            // confirm.now(
+            //     <div style={{ textAlign: "center", paddingBottom: "5px" }}>
+            //         { t("Do you want to save the changes ?") }
+            //     </div>,
+            //     () =>{
+            //         return this.save()
+            //             .then(() => this.props.history.push(nextLocation));
+            //     },
+            //     () => {
+            //         this.props.needSavingUpdate(false)
+            //             .then(() => this.props.history.push(nextLocation));
+            //     },
+            // );
+            return new Promise((done) => {
+                modal.open(createElement(`
+                <div style="text-align:center;padding-bottom:5px;">
+                    Do you want to save the changes ?
+                </div>
+            `, { onQuit: () => {done(false)} }));
+            })
+        }),
+    ))
 }
 
 function has_binary(str) {
@@ -233,8 +264,8 @@ function loadMode(ext) {
     else if (ext === "diff" || ext === "patch") mode = "diff";
     else if (ext === "sparql") mode = "sparql";
     else if (ext === "properties") mode = "properties";
-    else if (ext === "c" || ext === "cpp" || ext === "java" ||
-             ext === "h") mode = "clike";
+    else if (ext === "c" || ext === "cpp" || ext === "h") mode = "clike";
+    else if (ext === "java") mode = "java";
 
     return before.then(() => loadJS(import.meta.url, `./application_editor/${mode}.js`, { type: "module" }))
         .catch(() => loadJS(import.meta.url, "./application_editor/text.js", { type: "module" }))

public/assets/pages/viewerpage/application_editor/clike.js

@@ -1,3 +1,3 @@
 import "../../../lib/vendor/codemirror/mode/clike/clike.js";
-CodeMirror.__mode = "clike";
+CodeMirror.__mode = "text/x-c++src";
 export default CodeMirror;

public/assets/pages/viewerpage/application_editor/java.js

@@ -0,0 +1,3 @@
+import "./clike.js";
+CodeMirror.__mode = "text/x-java";
+export default CodeMirror;