Merge pull request #156 from Oktavilla/asset-tags

Autocomplete on asset tags + autocomplete style
oktavilla · May 29, 2013 · 923c42d · 923c42d
2 parents 2eb141d + 29a31df
commit 923c42d
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 24 deletions.
diff --git a/app/assets/javascripts/admin/assets.js b/app/assets/javascripts/admin/assets.js
@@ -92,26 +92,30 @@
     };
 
     var Ready = function(container) {
-      $('#asset_tag_names').smartAutoComplete({
-        minCharLimit: 3,
-        source: '/admin/tags/autocomplete.json?taggable=ImageAsset'
-      });
-      $('#asset_tag_names').bind({
-        keyIn: function(ev) {
-          var tag_list = ev.smartAutocompleteData.query.split(" ");
-          ev.smartAutocompleteData.query = $.trim(tag_list[tag_list.length - 1]);
-        },
-        itemSelect: function(ev, selected_item) {
-          var options = $(this).smartAutoComplete();
-          var selected_value = $(selected_item).text();
-          var cur_list = $(this).val().split(" ");
+      $("#asset_form").find("input.asset_tags").each(function(_, el){
+        var $el = $(el);
+        $el.smartAutoComplete({
+          minCharLimit: 2,
+          source: '/admin/tags/autocomplete.json?taggable=ImageAsset'
+        });
 
-          cur_list[cur_list.length - 1] = selected_value;
-          $(this).val(cur_list.join(" ") + " ");
-          options.setItemSelected(true);
-          $(this).trigger('lostFocus');
-          ev.preventDefault();
-        }
+        $el.bind({
+          keyIn: function(ev) {
+            var tag_list = ev.smartAutocompleteData.query.split(" ");
+            ev.smartAutocompleteData.query = $.trim(tag_list[tag_list.length - 1]);
+          },
+          itemSelect: function(ev, selected_item) {
+            var options = $(this).smartAutoComplete();
+            var selected_value = $(selected_item).text();
+            var cur_list = $(this).val().split(" ");
+
+            cur_list[cur_list.length - 1] = selected_value;
+            $(this).val(cur_list.join(" ") + " ");
+            options.setItemSelected(true);
+            $(this).trigger('lostFocus');
+            ev.preventDefault();
+          }
+        });
       });
 
       $('#content').delegate('ul.items img', 'click', function(event) {
@@ -144,4 +148,4 @@
     };
   })();
   Porthos.Asset.init();
-}).call(this);
+}).call(this);
diff --git a/app/assets/javascripts/admin/items.js.erb b/app/assets/javascripts/admin/items.js.erb
@@ -139,7 +139,7 @@
         event.preventDefault();
         $('#page_tags_list, #page_tags_form').toggle();
       }).find('#page_tags_list').append('<p><a href="#" class="edit">Ändra</a></p>');
-      $('#item_tag_names').smartAutoComplete({minCharLimit: 3, source: '/admin/tags/autocomplete.json?taggable=Page'});
+      $('#item_tag_names').smartAutoComplete({minCharLimit: 2, source: '/admin/tags/autocomplete.json?taggable=Page'});
       $('#item_tag_names').bind({
         keyIn: function(ev) {
           var tag_list = ev.smartAutocompleteData.query.split(" ");

diff --git a/app/assets/stylesheets/elements.css.scss b/app/assets/stylesheets/elements.css.scss
@@ -304,6 +304,24 @@ ul.sortable {margin-left:-25px;}
     top:4px;
     left:0; }
 
+.smart_autocomplete_container {
+  margin-top: 12px;
+  list-style: none;
+  padding: 0;
+  box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.2);
+
+  & li {
+    margin: 0;
+    padding: 4px 5px;
+    border-top: 1px solid rgba(128,128,128,.1);
+    background: rgba(55,128,199,.1);
+  }
+  .smart_autocomplete_highlight { 
+    padding-left: 6px;
+    background: rgba(55,128,199,.2);
+  }
+}
+
 table.sortable {
   margin-left:-30px; }
   table.sortable .sort {
@@ -334,4 +352,4 @@ table td.instructions {width:25%;}
     border-radius: 3px; }
   .status.published {background:green;}
   .status.unpublished {background:#d00;}
-}
+}
diff --git a/app/views/admin/assets/edit.html.erb b/app/views/admin/assets/edit.html.erb
@@ -7,7 +7,7 @@
   </div>
   <div id="content">
     <div id="c_1"><div class="inner">
-      <%= form_for [:admin, @asset], :as => :asset, :url => admin_asset_path(@asset) do |f| %>
+      <%= form_for [:admin, @asset], as: :asset, url: admin_asset_path(@asset), html: { id: "asset_form" } do |f| %>
         <% if params[:return_to] %>
         <%= hidden_field_tag :return_to, params[:return_to] %>
         <% end %>

diff --git a/app/views/admin/assets/incomplete.html.erb b/app/views/admin/assets/incomplete.html.erb
@@ -4,7 +4,7 @@
     <h1>Beskriv de uppladdade filerna</h1>
   </div>
   <div id="content">
-    <%= form_for @assets, :url => update_multiple_admin_assets_path, :html => { :method => :put } do |f| %>
+    <%= form_for @assets, :url => update_multiple_admin_assets_path, :html => { :method => :put, id: "asset_form" } do |f| %>
       <% @assets.each_with_index do |asset, index| -%>
       <div class="describe_asset">
         <div class="preview">