added "auto book" displayed on the empty text pages as a replacement for children overview

electron.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const electron = require('electron');
+const {app, globalShortcut, BrowserWindow} = require('electron');
 const path = require('path');
 const log = require('./src/services/log');
 const sqlInit = require('./src/services/sql_init');
@@ -12,9 +12,6 @@ const appIconService = require('./src/services/app_icon');
 const windowStateKeeper = require('electron-window-state');
 const contextMenu = require('electron-context-menu');
 
-const app = electron.app;
-const globalShortcut = electron.globalShortcut;
-
 // Adds debug features like hotkeys for triggering dev tools and reload
 require('electron-debug')();
 
@@ -66,7 +63,7 @@ async function createMainWindow() {
         defaultHeight: 800
     });
 
-    const win = new electron.BrowserWindow({
+    const win = new BrowserWindow({
         x: mainWindowState.x,
         y: mainWindowState.y,
         width: mainWindowState.width,

src/public/javascripts/services/note_detail_book.js

@@ -94,7 +94,7 @@ class NoteDetailBook {
 
     setZoom(zoomLevel) {
         if (!(zoomLevel in ZOOMS)) {
-            zoomLevel = 1;
+            zoomLevel = this.getDefaultZoomLevel();
         }
 
         this.zoomLevel = zoomLevel;
@@ -109,7 +109,18 @@ class NoteDetailBook {
     async render() {
         this.$content.empty();
 
-        const zoomLevel = parseInt(await this.ctx.note.getLabelValue('bookZoomLevel')) || 1;
+        if (this.isAutoBook()) {
+            const $addTextLink = $('<a href="javascript:">here</a>').click(() => {
+                this.ctx.renderComponent(true);
+            });
+
+            this.$content.append($('<div class="note-book-auto-message"></div>')
+                .append(`This note doesn't have any content so we display it's children. Click `)
+                .append($addTextLink)
+                .append(' if you want to add some text.'))
+        }
+
+        const zoomLevel = parseInt(await this.ctx.note.getLabelValue('bookZoomLevel')) || this.getDefaultZoomLevel();
         this.setZoom(zoomLevel);
 
         await this.renderIntoElement(this.ctx.note, this.$content);
@@ -148,7 +159,7 @@ class NoteDetailBook {
 
             const $content = $("<div>").html(fullNote.content);
 
-            if (!fullNote.content.toLowerCase().includes("<img") && $content.text().trim() === "") {
+            if (utils.isHtmlEmpty(fullNote.content)) {
                 return "";
             }
             else {
@@ -208,6 +219,15 @@ class NoteDetailBook {
         }
     }
 
+    /** @return {boolean} true if this is "auto book" activated (empty text note) and not explicit book note */
+    isAutoBook() {
+        return this.ctx.note.type !== 'book';
+    }
+
+    getDefaultZoomLevel() {
+        return this.isAutoBook() ? 3 : 1;
+    }
+
     getContent() {}
 
     show() {

src/public/javascripts/services/tab_context.js

@@ -115,13 +115,13 @@ class TabContext {
         await this.initComponent();
     }
 
-    async initComponent() {
-        const type = this.getComponentType();
+    async initComponent(disableAutoBook = false) {
+        this.type = this.getComponentType(disableAutoBook);
 
-        if (!(type in this.components)) {
-            const clazz = await import(componentClasses[type]);
+        if (!(this.type in this.components)) {
+            const clazz = await import(componentClasses[this.type]);
 
-            this.components[type] = new clazz.default(this);
+            this.components[this.type] = new clazz.default(this);
         }
     }
 
@@ -208,11 +208,11 @@ class TabContext {
         this.setTitleBar();
     }
 
-    async renderComponent() {
-        await this.initComponent();
+    async renderComponent(disableAutoBook = false) {
+        await this.initComponent(disableAutoBook);
 
         for (const componentType in this.components) {
-            if (componentType !== this.getComponentType()) {
+            if (componentType !== this.type) {
                 this.components[componentType].cleanup();
             }
         }
@@ -281,18 +281,20 @@ class TabContext {
     }
 
     getComponent() {
-        const type = this.getComponentType();
-
-        return this.components[type];
+        return this.components[this.type];
     }
 
-    getComponentType() {
+    getComponentType(disableAutoBook) {
         if (!this.note) {
             return "empty";
         }
 
         let type = this.note.type;
 
+        if (type === 'text' && !disableAutoBook && utils.isHtmlEmpty(this.note.content) && this.note.hasChildren()) {
+            type = 'book';
+        }
+
         if (this.note.isProtected) {
             if (protectedSessionHolder.isProtectedSessionAvailable()) {
                 protectedSessionHolder.touchProtectedSession();

src/public/javascripts/services/utils.js

@@ -201,6 +201,10 @@ function closeActiveDialog() {
     }
 }
 
+function isHtmlEmpty(html) {
+    return $(html).text().trim().length === 0 && !html.toLowerCase().includes('<img');
+}
+
 export default {
     reloadApp,
     parseDate,
@@ -231,5 +235,6 @@ export default {
     getCookie,
     getNoteTypeClass,
     getMimeTypeClass,
-    closeActiveDialog
+    closeActiveDialog,
+    isHtmlEmpty
 };

src/public/stylesheets/style.css

@@ -838,3 +838,12 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
 .note-book-content {
     flex-grow: 1;
 }
+
+.note-book-auto-message {
+    background-color: var(--more-accented-background-color);
+    text-align: center;
+    width: 100%;
+    border-radius: 10px;
+    padding: 5px;
+    margin-top: 5px;
+}

src/services/attributes.js

@@ -22,6 +22,7 @@ const BUILTIN_ATTRIBUTES = [
     { type: 'label', name: 'run', isDangerous: true },
     { type: 'label', name: 'customRequestHandler', isDangerous: true },
     { type: 'label', name: 'customResourceProvider', isDangerous: true },
+    { type: 'label', name: 'bookZoomLevel', isDangerous: false },
 
     // relation names
     { type: 'relation', name: 'runOnNoteView', isDangerous: true },