added note type picker component

public/javascripts/dialogs/attributes.js

@@ -54,7 +54,7 @@ const attributesDialog = (function() {
         e.preventDefault();
     });
 
-    ko.applyBindings(attributesModel);
+    ko.applyBindings(attributesModel, document.getElementById('attributes-dialog'));
 
     return {
         showDialog

public/javascripts/note_editor.js

@@ -131,8 +131,6 @@ const noteEditor = (function() {
 
         noteTitleEl.val(currentNote.detail.note_title);
 
-        console.log("Type: " + currentNote.detail.type);
-
         if (currentNote.detail.type === 'text') {
             // temporary workaround for https://github.com/ckeditor/ckeditor5-enter/issues/49
             editor.setData(currentNote.detail.note_text ? currentNote.detail.note_text : "<p></p>");

public/javascripts/note_type.js

@@ -0,0 +1,87 @@
+"use strict";
+
+const noteType = (function() {
+    const noteTypeModel = new NoteTypeModel();
+
+    function NoteTypeModel() {
+        const self = this;
+
+        this.type = ko.observable('text');
+        this.mime = ko.observable('');
+
+        this.codeMimeTypes = ko.observableArray([
+            { mime: 'text/x-csrc', title: 'C' },
+            { mime: 'text/x-c++src', title: 'C++' },
+            { mime: 'text/x-csharp', title: 'C#' },
+            { mime: 'text/x-clojure', title: 'Clojure' },
+            { mime: 'text/css', title: 'CSS' },
+            { mime: 'text/x-dockerfile', title: 'Dockerfile' },
+            { mime: 'text/x-erlang', title: 'Erlang' },
+            { mime: 'text/x-feature', title: 'Gherkin' },
+            { mime: 'text/x-go', title: 'Go' },
+            { mime: 'text/x-groovy', title: 'Groovy' },
+            { mime: 'text/x-haskell', title: 'Haskell' },
+            { mime: 'message/http', title: 'HTTP' },
+            { mime: 'text/x-java', title: 'Java' },
+            { mime: 'text/javascript', title: 'JavaScript' },
+            { mime: 'text/x-kotlin', title: 'Kotlin' },
+            { mime: 'text/x-lua', title: 'Lua' },
+            { mime: 'text/x-markdown', title: 'Markdown' },
+            { mime: 'text/x-objectivec', title: 'Objective C' },
+            { mime: 'text/x-pascal', title: 'Pascal' },
+            { mime: 'text/x-perl', title: 'Perl' },
+            { mime: 'text/x-php', title: 'PHP' },
+            { mime: 'text/x-python', title: 'Python' },
+            { mime: 'text/x-ruby', title: 'Ruby' },
+            { mime: 'text/x-rustsrc', title: 'Rust' },
+            { mime: 'text/x-scala', title: 'Scala' },
+            { mime: 'text/x-sh', title: 'Shell' },
+            { mime: 'text/x-sql', title: 'SQL' },
+            { mime: 'text/x-swift', title: 'Swift' },
+            { mime: 'text/xml', title: 'XML' },
+            { mime: 'text/x-yaml', title: 'YAML' }
+        ]);
+
+        this.typeString = function() {
+            const type = self.type();
+            const mime = self.mime();
+
+            if (type === 'text') {
+                return 'Text';
+            }
+            else if (type === 'code') {
+                if (!mime) {
+                    return 'Code';
+                }
+                else {
+                    const found = self.codeMimeTypes().find(x => x.mime === mime);
+
+                    return found ? found.title : mime;
+                }
+            }
+            else {
+                throwError('Unrecognized type: ' + type);
+            }
+        };
+
+        this.selectText = function() {
+            self.type('text');
+            self.mime('');
+        };
+
+        this.selectCode = function() {
+            self.type('code');
+            self.mime('');
+        };
+
+        this.selectCodeMime = function(el) {
+            self.type('code');
+            self.mime(el.mime);
+        };
+    }
+
+    ko.applyBindings(noteTypeModel, document.getElementById('note-type'));
+
+    return {
+    };
+})();

public/stylesheets/style.css

@@ -201,16 +201,20 @@ div.ui-tooltip {
     filter: opacity(7%);
 }
 
-.dropdown-menu li {
+.dropdown-menu li:not(.divider) {
     padding: 5px;
     width: 200px;
 }
 
-.dropdown-menu li:hover, .dropdown-menu a:hover {
+.dropdown-menu li:not(.divider):hover, .dropdown-menu li:not(.divider) a:hover {
     background-color: #eee !important;
     cursor: pointer;
 }
 
+.dropdown-menu li:not(.selected) .check {
+    visibility: hidden;
+}
+
 .dropdown-menu kbd
 {
     color: black;
@@ -236,4 +240,10 @@ div.ui-tooltip {
     right: 10px;
     bottom: 5px;
     z-index: 1000;
+}
+
+#note-type-dropdown {
+    max-height: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
 }

views/index.ejs

@@ -95,6 +95,21 @@
 
           <span id="note-id-display" title="Note ID"></span>
 
+          <div class="dropdown" id="note-type">
+            <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm">
+              Type: <span data-bind="text: typeString()"></span>
+              <span class="caret"></span>
+            </button>
+            <ul id="note-type-dropdown" class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
+              <li data-bind="click: selectText, css: { selected: type() == 'text' }"><span class="check">&check;</span> <strong>Text</strong></li>
+              <li role="separator" class="divider"></li>
+              <li data-bind="click: selectCode, css: { selected: type() == 'code' && mime() == '' }"><span class="check">&check;</span> <strong>Code</strong></li>
+              <!-- ko foreach: codeMimeTypes -->
+              <li data-bind="click: $parent.selectCodeMime, css: { selected: $parent.type() == 'code' && $parent.mime() == mime }"><span class="check">&check;</span> <span data-bind="text: title"></span></li>
+              <!-- /ko -->
+            </ul>
+          </div>
+
           <div class="dropdown" style="margin-left: 10px; margin-right: 10px;">
             <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm">
               Note actions
@@ -445,6 +460,7 @@
     <!-- Note detail -->
     <script src="javascripts/note_editor.js"></script>
     <script src="javascripts/protected_session.js"></script>
+    <script src="javascripts/note_type.js"></script>
 
     <!-- dialogs -->
     <script src="javascripts/dialogs/recent_notes.js"></script>