From 2c1580ea65a7376b49a54f310793fc56b7bbe10c Mon Sep 17 00:00:00 2001
From: zadam <adam.zivner@gmail.com>
Date: Sun, 27 Jan 2019 17:01:37 +0100
Subject: [PATCH] appCss/appTheme are now loaded as external CSS files instead
 of inline styles

---
 src/public/javascripts/desktop.js               |  5 +++++
 src/public/javascripts/services/css_loader.js   | 13 +++++++++++++
 .../javascripts/services/library_loader.js      | 14 +++-----------
 src/routes/index.js                             | 17 ++++-------------
 src/services/attributes.js                      |  8 ++++++++
 src/views/desktop.ejs                           |  5 +----
 6 files changed, 34 insertions(+), 28 deletions(-)
 create mode 100644 src/public/javascripts/services/css_loader.js

diff --git a/src/public/javascripts/desktop.js b/src/public/javascripts/desktop.js
index 51262c8ed..f9142eb02 100644
--- a/src/public/javascripts/desktop.js
+++ b/src/public/javascripts/desktop.js
@@ -37,6 +37,7 @@ import noteTypeService from './services/note_type.js';
 import linkService from './services/link.js';
 import noteAutocompleteService from './services/note_autocomplete.js';
 import macInit from './services/mac_init.js';
+import cssLoader from './services/css_loader.js';
 
 // required for CKEditor image upload plugin
 window.glob.getCurrentNode = treeService.getCurrentNode;
@@ -79,6 +80,10 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
     return false;
 };
 
+for (const appCssNoteId of window.appCssNoteIds) {
+    cssLoader.requireCss(`/api/notes/${appCssNoteId}/download`);
+}
+
 const wikiBaseUrl = "https://github.com/zadam/trilium/wiki/";
 
 $(document).on("click", "button[data-help-page]", e => {
diff --git a/src/public/javascripts/services/css_loader.js b/src/public/javascripts/services/css_loader.js
new file mode 100644
index 000000000..b8ed72abe
--- /dev/null
+++ b/src/public/javascripts/services/css_loader.js
@@ -0,0 +1,13 @@
+async function requireCss(url) {
+    const css = Array
+        .from(document.querySelectorAll('link'))
+        .map(scr => scr.href);
+
+    if (!css.includes(url)) {
+        $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', url));
+    }
+}
+
+export default {
+    requireCss
+}
\ No newline at end of file
diff --git a/src/public/javascripts/services/library_loader.js b/src/public/javascripts/services/library_loader.js
index c4b5a08f1..67a4a4f47 100644
--- a/src/public/javascripts/services/library_loader.js
+++ b/src/public/javascripts/services/library_loader.js
@@ -1,3 +1,5 @@
+import cssLoader from './css_loader.js';
+
 const CKEDITOR = {"js": ["libraries/ckeditor/ckeditor.js"]};
 
 const CODE_MIRROR = {
@@ -34,7 +36,7 @@ const RELATION_MAP = {
 
 async function requireLibrary(library) {
     if (library.css) {
-        library.css.map(cssUrl => requireCss(cssUrl));
+        library.css.map(cssUrl => cssLoader.requireCss(cssUrl));
     }
 
     if (library.js) {
@@ -59,16 +61,6 @@ async function requireScript(url) {
     await loadedScriptPromises[url];
 }
 
-async function requireCss(url) {
-    const css = Array
-        .from(document.querySelectorAll('link'))
-        .map(scr => scr.href);
-
-    if (!css.includes(url)) {
-        $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', url));
-    }
-}
-
 export default {
     requireLibrary,
     CKEDITOR,
diff --git a/src/routes/index.js b/src/routes/index.js
index 3379434d4..d6b7c9358 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -22,22 +22,13 @@ async function index(req, res) {
         sourceId: await sourceIdService.generateSourceId(),
         maxSyncIdAtLoad: await sql.getValue("SELECT MAX(id) FROM sync"),
         instanceName: config.General ? config.General.instanceName : null,
-        appCss: await getAppCss()
+        appCssNoteIds: await getAppCssNoteIds()
     });
 }
 
-async function getAppCss() {
-    let css = '';
-    const notes = attributeService.getNotesWithLabel('appCss');
-
-    for (const note of await notes) {
-        css += `/* ${note.noteId} */
-${note.content}
-
-`;
-    }
-
-    return css;
+async function getAppCssNoteIds() {
+    return (await attributeService.getNotesWithLabels(['appCss', 'appTheme']))
+        .map(note => note.noteId);
 }
 
 module.exports = {
diff --git a/src/services/attributes.js b/src/services/attributes.js
index 7ca673211..e0fc547cd 100644
--- a/src/services/attributes.js
+++ b/src/services/attributes.js
@@ -44,6 +44,13 @@ async function getNotesWithLabel(name, value) {
           WHERE notes.isDeleted = 0 AND attributes.isDeleted = 0 AND attributes.name = ? ${valueCondition} ORDER BY position`, params);
 }
 
+async function getNotesWithLabels(names) {
+    const questionMarks = names.map(() => "?").join(", ");
+
+    return await repository.getEntities(`SELECT notes.* FROM notes JOIN attributes USING(noteId) 
+          WHERE notes.isDeleted = 0 AND attributes.isDeleted = 0 AND attributes.name IN (${questionMarks}) ORDER BY position`, names);
+}
+
 async function getNoteWithLabel(name, value) {
     const notes = await getNotesWithLabel(name, value);
 
@@ -86,6 +93,7 @@ async function getAttributeNames(type, nameLike) {
 
 module.exports = {
     getNotesWithLabel,
+    getNotesWithLabels,
     getNoteWithLabel,
     createLabel,
     createAttribute,
diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs
index 45a5317cb..2d9d1747a 100644
--- a/src/views/desktop.ejs
+++ b/src/views/desktop.ejs
@@ -212,6 +212,7 @@
         maxSyncIdAtLoad: <%= maxSyncIdAtLoad %>,
         instanceName: '<%= instanceName %>'
     };
+    window.appCssNoteIds = <%- JSON.stringify(appCssNoteIds) %>;
 </script>
 
 <!-- Required for correct loading of scripts in Electron -->
@@ -247,9 +248,5 @@
     // final form which is pretty ugly.
     $("#container").show();
 </script>
-
-<style type="text/css">
-    <%= appCss %>
-</style>
 </body>
 </html>