added type and mime classes on body as well #383

src/public/javascripts/dialogs/options.js

@@ -87,7 +87,7 @@ addTabHandler((function() {
     $themeSelect.change(function() {
         const newTheme = $(this).val();
 
-        for (const clazz of $body[0].classList) {
+        for (const clazz of Array.from($body[0].classList)) { // create copy to safely iterate over while removing classes
             if (clazz.startsWith("theme-")) {
                 $body.removeClass(clazz);
             }

src/public/javascripts/services/note_detail.js

@@ -30,6 +30,7 @@ const $noteIdDisplay = $("#note-id-display");
 const $childrenOverview = $("#children-overview");
 const $scriptArea = $("#note-detail-script-area");
 const $savedIndicator = $("#saved-indicator");
+const $body = $("body");
 
 let currentNote = null;
 
@@ -145,12 +146,21 @@ async function saveNoteIfChanged() {
     $savedIndicator.fadeIn();
 }
 
-function setNoteBackgroundIfProtected(note) {
+function updateNoteView() {
-    $noteDetailWrapper.toggleClass("protected", note.isProtected);
+    $noteDetailWrapper.toggleClass("protected", currentNote.isProtected);
-    $protectButton.toggleClass("active", note.isProtected);
+    $protectButton.toggleClass("active", currentNote.isProtected);
-    $protectButton.prop("disabled", note.isProtected);
+    $protectButton.prop("disabled", currentNote.isProtected);
-    $unprotectButton.toggleClass("active", !note.isProtected);
+    $unprotectButton.toggleClass("active", !currentNote.isProtected);
-    $unprotectButton.prop("disabled", !note.isProtected || !protectedSessionHolder.isProtectedSessionAvailable());
+    $unprotectButton.prop("disabled", !currentNote.isProtected || !protectedSessionHolder.isProtectedSessionAvailable());
+
+    for (const clazz of Array.from($body[0].classList)) { // create copy to safely iterate over while removing classes
+        if (clazz.startsWith("type-") || clazz.startsWith("mime-")) {
+            $body.removeClass(clazz);
+        }
+    }
+
+    $body.addClass(utils.getNoteTypeClass(currentNote.type));
+    $body.addClass(utils.getMimeTypeClass(currentNote.mime));
 }
 
 async function handleProtectedSession() {
@@ -193,7 +203,7 @@ async function loadNoteDetail(noteId) {
 
     $noteIdDisplay.html(noteId);
 
-    setNoteBackgroundIfProtected(currentNote);
+    updateNoteView();
 
     $noteDetailWrapper.show();
 
@@ -344,7 +354,7 @@ setInterval(saveNoteIfChanged, 3000);
 export default {
     reload,
     switchToNote,
-    setNoteBackgroundIfProtected,
+    updateNoteView,
     loadNote,
     getCurrentNote,
     getCurrentNoteType,

src/public/javascripts/services/note_type.js

@@ -125,7 +125,7 @@ function NoteTypeModel() {
         }
 
         self.type('text');
-        self.mime('');
+        self.mime('text/html');
 
         save();
     };
@@ -158,7 +158,7 @@ function NoteTypeModel() {
         }
 
         self.type('code');
-        self.mime('');
+        self.mime('text/plain');
 
         save();
     };

src/public/javascripts/services/protected_session.js

@@ -125,7 +125,7 @@ async function protectNoteAndSendToServer() {
 
     treeService.setProtected(note.noteId, note.isProtected);
 
-    noteDetailService.setNoteBackgroundIfProtected(note);
+    noteDetailService.updateNoteView();
 }
 
 async function unprotectNoteAndSendToServer() {
@@ -152,7 +152,7 @@ async function unprotectNoteAndSendToServer() {
 
     treeService.setProtected(currentNote.noteId, currentNote.isProtected);
 
-    noteDetailService.setNoteBackgroundIfProtected(currentNote);
+    noteDetailService.updateNoteView();
 }
 
 async function protectSubtree(noteId, protect) {

src/public/javascripts/services/tree_builder.js

@@ -166,26 +166,15 @@ async function getExtraClasses(note) {
         extraClasses.push(note.cssClass);
     }
 
-    extraClasses.push(note.type);
+    extraClasses.push(utils.getNoteTypeClass(note.type));
 
     if (note.mime) { // some notes should not have mime type (e.g. render)
-        extraClasses.push(getMimeTypeClass(note.mime));
+        extraClasses.push(utils.getMimeTypeClass(note.mime));
     }
 
     return extraClasses.join(" ");
 }
 
-function getMimeTypeClass(mime) {
-    const semicolonIdx = mime.indexOf(';');
-
-    if (semicolonIdx !== -1) {
-        // stripping everything following the semicolon
-        mime = mime.substr(0, semicolonIdx);
-    }
-
-    return 'mime-' + mime.toLowerCase().replace(/[\W_]+/g,"-");
-}
-
 export default {
     prepareTree,
     prepareBranch,

src/public/javascripts/services/utils.js

@@ -172,6 +172,21 @@ function setCookie(name, value) {
     document.cookie = name + "=" + (value || "")  + expires + "; path=/";
 }
 
+function getNoteTypeClass(type) {
+    return "type-" + type;
+}
+
+function getMimeTypeClass(mime) {
+    const semicolonIdx = mime.indexOf(';');
+
+    if (semicolonIdx !== -1) {
+        // stripping everything following the semicolon
+        mime = mime.substr(0, semicolonIdx);
+    }
+
+    return 'mime-' + mime.toLowerCase().replace(/[\W_]+/g,"-");
+}
+
 export default {
     reloadApp,
     parseDate,
@@ -198,5 +213,7 @@ export default {
     bindShortcut,
     isMobile,
     isDesktop,
-    setCookie
+    setCookie,
+    getNoteTypeClass,
+    getMimeTypeClass
 };