From f9631ff59fbe5b80bcc22cde4e8087b00e35f353 Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Sun, 21 Jan 2018 23:06:25 -0500
Subject: [PATCH] added note type picker component

---
 public/javascripts/dialogs/attributes.js |  2 +-
 public/javascripts/note_editor.js        |  2 -
 public/javascripts/note_type.js          | 87 ++++++++++++++++++++++++
 public/stylesheets/style.css             | 14 +++-
 views/index.ejs                          | 16 +++++
 5 files changed, 116 insertions(+), 5 deletions(-)
 create mode 100644 public/javascripts/note_type.js

diff --git a/public/javascripts/dialogs/attributes.js b/public/javascripts/dialogs/attributes.js
index 1603799bb..6d6649703 100644
--- a/public/javascripts/dialogs/attributes.js
+++ b/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
diff --git a/public/javascripts/note_editor.js b/public/javascripts/note_editor.js
index 8b2e7f118..2c36904d1 100644
--- a/public/javascripts/note_editor.js
+++ b/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>");
diff --git a/public/javascripts/note_type.js b/public/javascripts/note_type.js
new file mode 100644
index 000000000..51cd48204
--- /dev/null
+++ b/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 {
+    };
+})();
\ No newline at end of file
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index f9db77795..9c62d9083 100644
--- a/public/stylesheets/style.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/views/index.ejs b/views/index.ejs
index a48af3367..54792c3fd 100644
--- a/views/index.ejs
+++ b/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>