add tokenfield for tags

2 files changed, 39 insertions, 4 deletions

diff --git a/public/editor-files/editor.js b/public/editor-files/editor.js
index 24b7a7a..4395380 100644
--- a/public/editor-files/editor.js
+++ b/public/editor-files/editor.js
@@ -72,10 +72,12 @@ $(function() {
     $('#publish-in-progress').removeClass('hidden');
     $('#publish-fields').addClass('hidden');
 
+    var category = csv_to_array($("#post-tags").tokenfield('getTokensList'));
+
     $.post('/editor/publish', {
       name: $("#post-name").val(),
       body: editor.serialize().content.value,
-      category: csv_to_array($("#post-tags").val()),
+      category: category,
       slug: $("#post-slug").val(),
       status: $("#post-status").val(),
       publish: $("#post-publish-date").val()
@@ -138,7 +140,7 @@ $(function() {
 function reset_page() {
   $("#post-name").val('');
   $("#post-slug").val('');
-  $("#post-tags").val('');
+  $("#post-tags").tokenfield('setTokens',[]);
   $("#post-status").val('published');
   $("#post-publish-date").val('now');
   $("#content").html('');
@@ -168,7 +170,7 @@ function doAutoSave() {
   var savedData = {
     title: $("#post-name").val(),
     body: editor.serialize().content.value,
-    tags: $("#post-tags").val(),
+    tags: $("#post-tags").tokenfield('getTokensList'),
     slug: $("#post-slug").val(),
     status: $("#post-status").val(),
     publish: $("#post-publish-date").val()
@@ -177,6 +179,13 @@ function doAutoSave() {
     $("#draft-status").text("Saved");
   });
 }
+function activateTokenField() {
+  $("#post-tags").tokenfield({
+    createTokensOnBlur: true,
+    beautify: true
+  }).on('tokenfield:createdtoken', contentChanged)
+    .on('tokenfield:removedtoken', contentChanged);
+}
 $(function(){
   // Restore draft if present
   localforage.getItem('currentdraft', function(err,val){
@@ -190,6 +199,9 @@ $(function(){
       $("#post-publish-date").val(val.publish);
       // drop the cursor into the editor which clears the placeholder text
       $("#content").focus().click();
+      activateTokenField();
+    } else {
+      activateTokenField();
     }
   });
 });
diff --git a/public/editor-files/style.css b/public/editor-files/style.css
index ec4c0f6..f0d14f9 100644
--- a/public/editor-files/style.css
+++ b/public/editor-files/style.css
@@ -130,10 +130,16 @@ input.form-field-small {
   font-size: 13px;
   color: #51a1a8;
   padding: 0 10px;
+}
+input.form-field-small, .tokenfield.form-control {
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
-  border: 1px #93dee5 solid;
+  border: 1px #93dee5 solid;  
+}
+.tokenfield.form-control {
+  padding: 6px;
+  padding-bottom: 0;
 }
 select.form-select-small {
   border-radius: 6px;
@@ -144,6 +150,15 @@ select.form-select-small {
   color: #51a1a8;
 }
 
+.tokenfield .token {
+  height: 20px;
+  font-size: 13px;
+}
+.tokenfield a.close {
+  text-decoration: none;
+  opacity: 0.3;
+}
+
 .publish-dropdown {
   position: fixed;
   top: 62px;
@@ -193,6 +208,13 @@ select.form-select-small {
   padding: 8px 4px 12px 4px;
   color: #333;
 }
+#publish-fields {
+  width: 100%;
+}
+#publish-fields .form-field-small {
+  width: calc(100% - 22px);
+}
+
 pre#publish-error-debug {
   overflow: scroll;
   font-size: 11px;
@@ -292,3 +314,4 @@ blockquote {
 .editable .placeholder {
   color: #ccc;
 }
+