Enabled tags.

app/assets/javascripts/app/controllers/widget/tag.js.coffee

@@ -1,11 +1,21 @@
 class App.WidgetTag extends App.Controller
+  elements:
+    '.js-newTagLabel': 'newTagLabel'
+    '.js-newTagInput': 'newTagInput'
+
+  events:
+    'click .js-newTagLabel': 'showInput'
+    'blur .js-newTagInput':  'hideInput'
+    'click .js-newTagInput': 'onAddTag'
+    'submit form':           'onAddTag'
+    'click .js-delete':      'onRemoveTag'
+
   constructor: ->
     super
-
+    @cacheKey = "tags::#{@object_type}::#{@object.id}"
-    @attribute_id = 'tags_' + @object.id + '_' + @object_type
+    @tagList = App.Store.get( @cacheKey ) || []
-    tags = App.Store.get( "tags::#{@attribute_id}" )
+    @render()
-    if tags
+    if !_.isEmpty(@tagList)
-      @render( tags )
       @delay(
         =>
           @fetch()
@@ -17,7 +27,7 @@ class App.WidgetTag extends App.Controller
 
   fetch: =>
     @ajax(
-      id:    @attribute_id
+      id:    @cacheKey
       type:  'GET'
       url:   @apiPath + '/tags'
       data:
@@ -25,29 +35,38 @@ class App.WidgetTag extends App.Controller
         o_id:   @object.id
       processData: true
       success: (data, status, xhr) =>
-        App.Store.write( "tags::#{@attribute_id}", data.tags )
+        @tagList = data.tags
-        @render(data.tags)
+        App.Store.write( @cacheKey, @tagList )
+        @render()
     )
 
-  render: (tags) =>
+  render: ->
-
-    # insert data
     @html App.view('widget/tag')(
-      tags: tags || [],
+      tags: @tagList || [],
-      tag_id: @attribute_id
     )
-    @el.find('#' + @attribute_id ).tokenfield().on(
-      'tokenfield:createtoken'
-      (e) =>
-        @onAddTag( e.token.value )
-    ).on(
-      'tokenfield:removetoken'
-      (e) =>
-        @onRemoveTag( e.token.value )
-    )
-    @el.find('#' + @attribute_id ).parent().css('height', 'auto')
 
-  onAddTag: (item) =>
+  showInput: (e) ->
+    e.preventDefault()
+    @newTagLabel.addClass('hide')
+    @newTagInput.removeClass('hide').focus()
+
+  hideInput: (e) ->
+    e.preventDefault()
+    @newTagLabel.removeClass('hide')
+    @newTagInput.addClass('hide')
+
+  onAddTag: (e) =>
+    e.preventDefault()
+    item = @$('[name="new_tag"]').val()
+    return if !item
+
+    if _.contains(@tagList, item)
+      @render()
+      return
+
+    @tagList.push item
+    @render()
+
     @ajax(
       type:  'GET',
       url:   @apiPath + '/tags/add',
@@ -57,13 +76,17 @@ class App.WidgetTag extends App.Controller
         item:   item
       processData: true,
       success: (data, status, xhr) =>
-        tags = @el.find('#' + @attribute_id ).val()
+        @fetch()
-        if tags
-          tags = tags.split(',')
-        App.Store.write( "tags::#{@attribute_id}",  tags )
     )
 
-  onRemoveTag: (item) =>
+  onRemoveTag: (e) =>
+    e.preventDefault()
+    item = $(e.target).parents('li').find('.tag').text()
+    return if !item
+
+    @tagList = _.filter(@tagList, (tagItem) -> return tagItem if tagItem isnt item )
+    @render()
+
     @ajax(
       type:  'GET'
       url:   @apiPath + '/tags/remove'
@@ -73,8 +96,5 @@ class App.WidgetTag extends App.Controller
         item:   item
       processData: true
       success: (data, status, xhr) =>
-        tags = @el.find('#' + @attribute_id ).val()
+        @fetch()
-        if tags
-          tags = tags.split(',')
-        App.Store.write( "tags::#{@attribute_id}",  tags )
     )

app/assets/javascripts/app/views/widget/tag.jst.eco

@@ -1,25 +1,17 @@
 <div class="">
   <label><%- @T( 'Tags' ) %></label>
-  <!--<input type="text" name="tags" id="<%- @tag_id %>" class="form-control" value="<% for tag in @tags: %><%= tag %>,<% end %>"/>-->
   <ul class="tagList">
+    <% for tag in @tags: %>
     <li class="horizontal center">
-      <span class="flex">Midi Notes</span>
+      <span class="flex tag"><%= tag %></span>
-      <span>3</span>
+      <!--<span>3</span>-->
-      <span class="tag-delete js-delete centered u-clickable">
-        <span class="delete icon"></span>
-      </span>
-    <li class="horizontal center">
-      <span class="flex">Transitions</span>
-      <span>23</span>
-      <span class="tag-delete js-delete centered u-clickable">
-        <span class="delete icon"></span>
-      </span>
-    <li class="horizontal center">
-      <span class="flex">New UI</span>
-      <span>3</span>
       <span class="tag-delete js-delete centered u-clickable">
         <span class="delete icon"></span>
       </span>
+    <% end %>
   </ul>
-  <div class="text-muted js-newTag u-clickable">+ <%- @T('Add Tag') %></div>
+  <div class="text-muted js-newTagLabel u-clickable">+ <%- @T('Add Tag') %></div>
+  <form>
+    <input type="text" name="new_tag" class="hide js-newTagInput" autocomplete="off">
+  </form>
 </div>