Merge pull request #329 from stim371/fancy_tags

Improve the tag inputs when creating a protip

Author: seuros

Gemfile

@@ -10,6 +10,7 @@ source 'https://rubygems.org' do
 # Assets
   gem 'autoprefixer-rails'
   gem 'jquery-rails', '= 2.0.3'
+  gem 'selectize-rails'
 
 # Load environment variables first
   gem 'dotenv-rails', groups: [:development, :test]

Gemfile.lock

@@ -663,6 +663,7 @@ GEM
       addressable (~> 2.3.5)
       faraday (~> 0.8, < 0.10)
     sax-machine (1.3.1)
+    selectize-rails (0.12.1)
     selenium-webdriver (2.45.0)
       childprocess (~> 0.5)
       multi_json (~> 1.0)
@@ -878,6 +879,7 @@ DEPENDENCIES
   sanitize
   sass!
   sass-rails!
+  selectize-rails!
   selenium-webdriver
   shoulda-matchers
   sidekiq!

app/assets/javascripts/protips.js.coffee

@@ -5,7 +5,8 @@
 #= require  blur
 #= require  jquery.filedrop
 #= require  jquery.textselection
-#= require local_time
+#= require  local_time
+#= require  selectize
 
 window.handle_redirect = (response)->
   window.location = response.to  if (response.status == "redirect")
@@ -31,6 +32,16 @@ $ ->
     if event.keyCode == 13
       search(null)
 
+  $('#protip_tags').selectize
+    delimiter: ','
+    persist: false
+    placeholder: "Tags, comma separated"
+    create: (input) ->
+      {
+        value: input,
+        text: input
+      }
+
   enablePreviewEditing()
 
 

app/views/protips/_new_or_edit.html.haml

@@ -31,7 +31,7 @@
                   %li.full-list=link_to('How to write a great pro tip', 'https://coderwall.com/p/o42nvq', target: "_blank")
 
               .rule.edit-tags
-                = p.input :topic_list, placeholder: "Tags, comma separated", label: false, input_html: {class: "tags cf", value: @protip.topic_list.join(","), id: "protip_tags", :autocomplete=>'off'}
+                = p.input :topic_list, label: false, input_html: {class: "tags cf", value: @protip.topic_list.join(","), id: "protip_tags", :autocomplete=>'off'}
 
             .x-tip-content.preview.back.side.cf#x-protip-preview