add tokenfield for tags

6 files changed, 58 insertions, 21 deletions

diff --git a/views/editor.php b/views/editor.php
index be45a07..5247bda 100644
--- a/views/editor.php
+++ b/views/editor.php
@@ -20,7 +20,6 @@
     <link rel="stylesheet" href="/editor-files/medium-editor/css/medium-editor-insert-plugin.min.css">
     <link rel="stylesheet" href="/editor-files/medium-editor/css/medium-editor-insert-plugin-frontend.min.css">
     <link href="/editor-files/font-awesome/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="/editor-files/style.css">
 
     <script src="/editor-files/jquery-1.11.3.min.js"></script>
     <script src="/editor-files/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
@@ -32,6 +31,12 @@
     <script src="/editor-files/medium-editor/js/medium-editor-insert-plugin.min.js"></script>
     <script src="/libs/localforage.js"></script>
 
+    <script src="/libs/tokenfield/bootstrap-tokenfield.min.js"></script>
+    <link rel="stylesheet" href="/libs/tokenfield/bootstrap-tokenfield.min.css">
+    <link rel="stylesheet" href="/libs/tokenfield/tokenfield-typeahead.min.css">
+
+    <link rel="stylesheet" href="/editor-files/style.css">
+
     <link rel="apple-touch-icon" sizes="57x57" href="/images/quill-icon-57.png">
     <link rel="apple-touch-icon" sizes="72x72" href="/images/quill-icon-72.png">
     <link rel="apple-touch-icon" sizes="114x114" href="/images/quill-icon-114.png">
@@ -74,7 +79,7 @@
     <table id="publish-fields">
       <tr>
         <td>Tags:</td>
-        <td><input type="text" class="form-field-small" placeholder="comma separated" id="post-tags"></td>
+        <td><input type="text" class="form-field-small" placeholder="" id="post-tags"></td>
       </tr>
       <tr>
         <td>Slug:</td>
diff --git a/views/event.php b/views/event.php
index 1a11681..a71ce79 100644
--- a/views/event.php
+++ b/views/event.php
@@ -38,7 +38,7 @@
 
 
       <div class="form-group" style="margin-top: 18px;">
-        <label for="note_category">Tags (comma-separated)</label>
+        <label for="note_category">Tags</label>
         <input type="text" id="note_category" value="" class="form-control">
       </div>
 
@@ -56,6 +56,11 @@
     $("#start_date .timezone").val(tz_seconds_to_offset(d.getTimezoneOffset() * 60 * -1));
   });
 
+  $("#note_category").tokenfield({
+    createTokensOnBlur: true,
+    beautify: true
+  });  
+
   $("#btn_post").click(function(){
 
     var event_start = $("#start_date .date").val()+"T"+$("#start_date .time").val()+$("#start_date .timezone").val();
diff --git a/views/layout.php b/views/layout.php
index 2f4b243..4d5e5c0 100644
--- a/views/layout.php
+++ b/views/layout.php
@@ -18,6 +18,14 @@
 
     <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="/bootstrap/css/bootstrap-theme.min.css">
+
+    <script src="/js/jquery-1.7.1.min.js"></script>
+    <script src="/libs/localforage.js"></script>
+
+    <script src="/libs/tokenfield/bootstrap-tokenfield.min.js"></script>
+    <link rel="stylesheet" href="/libs/tokenfield/bootstrap-tokenfield.min.css">
+    <link rel="stylesheet" href="/libs/tokenfield/tokenfield-typeahead.min.css">
+    
     <link rel="stylesheet" href="/css/style.css">
 
     <link rel="apple-touch-icon" sizes="57x57" href="/images/quill-icon-57.png">
@@ -32,8 +40,6 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#428bca">
 
-    <script src="/js/jquery-1.7.1.min.js"></script>
-    <script src="/libs/localforage.js"></script>
     <script src="/js/script.js"></script>
     <script src="/js/date.js"></script>
     <script src="/js/cassis.js"></script>
diff --git a/views/new-bookmark.php b/views/new-bookmark.php
index 4b4eebb..32e9043 100644
--- a/views/new-bookmark.php
+++ b/views/new-bookmark.php
@@ -28,7 +28,7 @@
         </div>
 
         <div class="form-group">
-          <label for="note_category">Tags (<code>category</code>, optional, comma-separated list of tags)</label>
+          <label for="note_category">Tags (<code>category</code>)</label>
           <input type="text" id="note_category" value="<?= $this->bookmark_tags ?>" class="form-control" placeholder="e.g. web, personal">
         </div>
 
@@ -67,6 +67,11 @@
 <script>
 $(function(){
 
+  $("#note_category").tokenfield({
+    createTokensOnBlur: true,
+    beautify: true
+  });  
+
   $("#btn_post").click(function(){
 
     if($("#note_bookmark").val() == "") {
diff --git a/views/new-itinerary.php b/views/new-itinerary.php
index f3ef8ff..029b4c8 100644
--- a/views/new-itinerary.php
+++ b/views/new-itinerary.php
@@ -68,7 +68,7 @@
       <button class="btn btn-default" id="btn_add_leg">Add Leg</button>
 
       <div class="form-group" style="margin-top: 18px;">
-        <label for="note_category">Tags (comma-separated)</label>
+        <label for="note_category">Tags</label>
         <input type="text" id="note_category" value="" class="form-control">
       </div>
 
@@ -108,6 +108,11 @@
 <script>
 $(function(){
 
+  $("#note_category").tokenfield({
+    createTokensOnBlur: true,
+    beautify: true
+  });  
+
   $("#btn_add_leg").click(function(){
     add_leg();
     return false;
diff --git a/views/new-post.php b/views/new-post.php
index 434f54e..7059c5e 100644
--- a/views/new-post.php
+++ b/views/new-post.php
@@ -32,7 +32,7 @@
         </div>
 
         <div class="form-group" id="form_tags">
-          <label for="note_category">Tags (comma-separated list)</label>
+          <label for="note_category">Tags</label>
           <input type="text" id="note_category" value="" class="form-control" placeholder="e.g. web, personal">
         </div>
 
@@ -180,6 +180,7 @@ function saveNoteState() {
   $("#syndication-container button.btn-info").each(function(i,btn){
     state.syndications[$(btn).data('syndicate-to')] = 'selected';
   });
+  console.log("saving",state);
   localforage.setItem('current-note', state);
 }
 
@@ -202,6 +203,9 @@ function restoreNoteState() {
         }
       });
       $("#note_content").change();
+      activateTokenField();
+    } else {
+      activateTokenField();
     }
   });  
 }
@@ -238,6 +242,13 @@ function expandReplySection() {
   $("#note_in_reply_to").change();  
 }
 
+function activateTokenField() {
+  $("#note_category").tokenfield({
+    createTokensOnBlur: true,
+    beautify: true
+  });  
+}
+
 $(function(){
 
   var userHasSetCategory = false;
@@ -314,12 +325,12 @@ $(function(){
     $("#note_content_remaining").addClass("pcheck"+tweet_check);
 
     // If the user didn't enter any categories, add them from the post
-    if(!userHasSetCategory) {
-      var tags = $("#note_content").val().match(/#[a-z][a-z0-9]+/ig);
-      if(tags) {
-        $("#note_category").val(tags.map(function(tag){ return tag.replace('#',''); }).join(", "));
-      }
-    }
+    // if(!userHasSetCategory) {
+    //   var tags = $("#note_content").val().match(/#[a-z][a-z0-9]+/ig);
+    //   if(tags) {
+    //     $("#note_category").val(tags.map(function(tag){ return tag.replace('#',''); }).join(", "));
+    //   }
+    // }
   });
 
   $("#note_in_reply_to").on('change', function(){
@@ -338,13 +349,13 @@ $(function(){
       if(data.canonical_reply_url != reply_to) {
         $("#note_in_reply_to").val(data.canonical_reply_url);
       }
-      var category = csv_to_array($("#note_category").val());
-      for(var i in data.entry.category) {
-        if($.inArray(data.entry.category[i], category) == -1) {
-          category.push(data.entry.category[i]);
-        }
-      }
-      $("#note_category").val(category.join(", "));
+      // var category = csv_to_array($("#note_category").val());
+      // for(var i in data.entry.category) {
+      //   if($.inArray(data.entry.category[i], category) == -1) {
+      //     category.push(data.entry.category[i]);
+      //   }
+      // }
+      // $("#note_category").val(category.join(", "));
 
       if($("#note_content").val() == "" && data.mentions) {
         var mentions = '';