add tokenfield for tags

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();
     }
   });
 });

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;
 }
+

public/libs/tokenfield/bootstrap-tokenfield.min.css

@@ -0,0 +1,5 @@
+/*!
+ * bootstrap-tokenfield
+ * https://github.com/sliptree/bootstrap-tokenfield
+ * Copyright 2013-2014 Sliptree and other contributors; Licensed MIT
+ */@-webkit-keyframes blink{0%{border-color:#ededed}100%{border-color:#b94a48}}@-moz-keyframes blink{0%{border-color:#ededed}100%{border-color:#b94a48}}@keyframes blink{0%{border-color:#ededed}100%{border-color:#b94a48}}.tokenfield{height:auto;min-height:34px;padding-bottom:0}.tokenfield.focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.tokenfield .token{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:inline-block;border:1px solid #d9d9d9;background-color:#ededed;white-space:nowrap;margin:-1px 5px 5px 0;height:22px;vertical-align:top;cursor:default}.tokenfield .token:hover{border-color:#b9b9b9}.tokenfield .token.active{border-color:#52a8ec;border-color:rgba(82,168,236,.8)}.tokenfield .token.duplicate{border-color:#ebccd1;-webkit-animation-name:blink;animation-name:blink;-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-direction:normal;animation-direction:normal;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.tokenfield .token.invalid{background:0 0;border:1px solid transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-bottom:1px dotted #d9534f}.tokenfield .token.invalid.active{background:#ededed;border:1px solid #ededed;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.tokenfield .token .token-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;padding-left:4px;vertical-align:top}.tokenfield .token .close{font-family:Arial;display:inline-block;line-height:100%;font-size:1.1em;line-height:1.49em;margin-left:5px;float:none;height:100%;vertical-align:top;padding-right:4px}.tokenfield .token-input{background:0 0;width:60px;min-width:60px;border:0;height:20px;padding:0;margin-bottom:6px;-webkit-box-shadow:none;box-shadow:none}.tokenfield .token-input:focus{border-color:transparent;outline:0;-webkit-box-shadow:none;box-shadow:none}.tokenfield.disabled{cursor:not-allowed;background-color:#eee}.tokenfield.disabled .token-input{cursor:not-allowed}.tokenfield.disabled .token:hover{cursor:not-allowed;border-color:#d9d9d9}.tokenfield.disabled .token:hover .close{cursor:not-allowed;opacity:.2;filter:alpha(opacity=20)}.has-warning .tokenfield.focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b}.has-error .tokenfield.focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-success .tokenfield.focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.tokenfield.input-sm,.input-group-sm .tokenfield{min-height:30px;padding-bottom:0}.input-group-sm .token,.tokenfield.input-sm .token{height:20px;margin-bottom:4px}.input-group-sm .token-input,.tokenfield.input-sm .token-input{height:18px;margin-bottom:5px}.tokenfield.input-lg,.input-group-lg .tokenfield{height:auto;min-height:45px;padding-bottom:4px}.input-group-lg .token,.tokenfield.input-lg .token{height:25px}.input-group-lg .token-label,.tokenfield.input-lg .token-label{line-height:23px}.input-group-lg .token .close,.tokenfield.input-lg .token .close{line-height:1.3em}.input-group-lg .token-input,.tokenfield.input-lg .token-input{height:23px;line-height:23px;margin-bottom:6px;vertical-align:top}.tokenfield.rtl{direction:rtl;text-align:right}.tokenfield.rtl .token{margin:-1px 0 5px 5px}.tokenfield.rtl .token .token-label{padding-left:0;padding-right:4px}

public/libs/tokenfield/tokenfield-typeahead.min.css

@@ -0,0 +1,5 @@
+/*!
+ * bootstrap-tokenfield
+ * https://github.com/sliptree/bootstrap-tokenfield
+ * Copyright 2013-2014 Sliptree and other contributors; Licensed MIT
+ */.twitter-typeahead{width:100%;position:relative;vertical-align:top}.twitter-typeahead .tt-input,.twitter-typeahead .tt-hint{margin:0;width:100%;vertical-align:middle;background-color:#fff}.twitter-typeahead .tt-hint{color:#999;z-index:1;border:1px solid transparent}.twitter-typeahead .tt-input{color:#555;z-index:2}.twitter-typeahead .tt-input,.twitter-typeahead .tt-hint{height:34px;padding:6px 12px;font-size:14px;line-height:1.428571429}.twitter-typeahead .input-sm.tt-input,.twitter-typeahead .hint-sm.tt-hint{border-radius:3px}.twitter-typeahead .input-lg.tt-input,.twitter-typeahead .hint-lg.tt-hint{border-radius:6px}.input-group .twitter-typeahead:first-child .tt-input,.input-group .twitter-typeahead:first-child .tt-hint{border-radius:4px 0 0 4px!important}.input-group .twitter-typeahead:last-child .tt-input,.input-group .twitter-typeahead:last-child .tt-hint{border-radius:0 4px 4px 0!important}.input-group.input-group-sm .twitter-typeahead:first-child .tt-input,.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint{border-radius:3px 0 0 3px!important}.input-group.input-group-sm .twitter-typeahead:last-child .tt-input,.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint{border-radius:0 3px 3px 0!important}.input-sm.tt-input,.hint-sm.tt-hint,.input-group.input-group-sm .tt-input,.input-group.input-group-sm .tt-hint{height:30px;padding:5px 10px;font-size:12px;line-height:1.5}.input-group.input-group-lg .twitter-typeahead:first-child .tt-input,.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint{border-radius:6px 0 0 6px!important}.input-group.input-group-lg .twitter-typeahead:last-child .tt-input,.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint{border-radius:0 6px 6px 0!important}.input-lg.tt-input,.hint-lg.tt-hint,.input-group.input-group-lg .tt-input,.input-group.input-group-lg .tt-hint{height:45px;padding:10px 16px;font-size:18px;line-height:1.33}.tt-dropdown-menu{width:100%;min-width:160px;margin-top:2px;padding:5px 0;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);*border-right-width:2px;*border-bottom-width:2px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.tt-suggestion{display:block;padding:3px 20px}.tt-suggestion.tt-cursor{color:#262626;background-image:-webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0)}.tt-suggestion.tt-cursor a{color:#fff}.tt-suggestion p{margin:0}.tokenfield .twitter-typeahead{width:auto}.tokenfield .twitter-typeahead .tt-hint{padding:0;height:20px}.tokenfield.input-sm .twitter-typeahead .tt-input,.tokenfield.input-sm .twitter-typeahead .tt-hint{height:18px;font-size:12px;line-height:1.5}.tokenfield.input-lg .twitter-typeahead .tt-input,.tokenfield.input-lg .twitter-typeahead .tt-hint{height:23px;font-size:18px;line-height:1.33}.tokenfield .twitter-typeahead .tt-suggestions{font-size:14px}

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>

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();

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>

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() == "") {

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;

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 = '';