[ckan-changes] commit/ckan: rgrp: [js, autocomplete][s]: (refs #1282) refactor tag autocomplete to use jquery ui and our standard setup.

Thu Aug 25 22:13:31 UTC 2011

1 new changeset in ckan:

http://bitbucket.org/okfn/ckan/changeset/a9a196c6a702/
changeset:   a9a196c6a702
branch:      refactor-1282-js-wui-cruft
user:        rgrp
date:        2011-08-26 00:13:21
summary:     [js,autocomplete][s]: (refs #1282) refactor tag autocomplete to use jquery ui and our standard setup.
affected #:  5 files (2.1 KB)

--- a/ckan/public/scripts/application.js	Thu Aug 25 21:32:52 2011 +0100
+++ b/ckan/public/scripts/application.js	Thu Aug 25 23:13:21 2011 +0100
@@ -3,6 +3,7 @@
     CKAN.Utils.setupUserAutocomplete($('input.autocomplete-user'));
     CKAN.Utils.setupAuthzGroupAutocomplete($('input.autocomplete-authzgroup'));
     CKAN.Utils.setupPackageAutocomplete($('input.autocomplete-package'));
+    CKAN.Utils.setupTagAutocomplete($('input.autocomplete-tag'));
   });
 }(jQuery));
 
@@ -56,6 +57,52 @@
     });
   };
 
+  // Attach tag autocompletion to provided elements
+  //
+  // Requires: jquery-ui autocomplete
+  my.setupTagAutocomplete = function(elements) {
+    elements
+      // don't navigate away from the field on tab when selecting an item
+      .bind( "keydown", function( event ) {
+        if ( event.keyCode === $.ui.keyCode.TAB &&
+            $( this ).data( "autocomplete" ).menu.active ) {
+          event.preventDefault();
+        }
+      })
+      .autocomplete({
+        minLength: 1,
+        source: function(request, callback) {
+          // here request.term is whole list of tags so need to get last
+          var _realTerm = request.term.split(' ').pop();
+          var url = '/api/2/util/tag/autocomplete?incomplete=' + _realTerm;
+          $.getJSON(url, function(data) {
+            // data = { ResultSet: { Result: [ {Name: tag} ] } } (Why oh why?)
+            var tags = $.map(data.ResultSet.Result, function(value, idx) {
+              return value.Name;
+            });
+            callback(
+              $.ui.autocomplete.filter(tags, _realTerm)
+            );
+          });
+        },
+        focus: function() {
+          // prevent value inserted on focus
+          return false;
+        },
+        select: function( event, ui ) {
+          var terms = this.value.split(' ');
+          // remove the current input
+          terms.pop();
+          // add the selected item
+          terms.push( ui.item.value );
+          // add placeholder to get the comma-and-space at the end
+          terms.push( "" );
+          this.value = terms.join( " " );
+          return false;
+        }
+    });
+  };
+
   // Attach user autocompletion to provided elements
   //
   // Requires: jquery-ui autocomplete


--- a/ckan/public/scripts/tagcomplete.js	Thu Aug 25 21:32:52 2011 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,81 +0,0 @@
-(function ($) {
-
-  function extractDataAttributes() {
-    var el = $(this);
-    $.each(this.attributes, function () {
-      var m = this.name.match(/data\-(\S+)/);
-      if (m) { el.data(m[1], this.value); }
-    });
-  }
-
-  function updateTagList(container, json) {
-    $(container).empty();
-    $.each(json["ResultSet"]["Result"], function () {
-      $(container).append('<a>' + this["Name"] + '</a>');
-    });
-    $(container).children().first().addClass('active')
-                .end().hover(function () {
-                  $(this).addClass('active').siblings().removeClass('active');
-                });
-		$(container).children().click(function() {
-			var tagInput = $(container).prev('.tagComplete');
-			var tags = $(tagInput).val().split(/\s+/).slice(0, -1);
-      tags.push($(this).text());
-      $(tagInput).val(tags.join(" ") + " ");
-			$(this).parent().empty();
-		}); 
-  }
-
-  function checkForIncompleteTag() {
-    var reqData = {},
-        tagStr = $(this).val(),
-        tagsContainer = $(this).next('.tags');
-
-    // If we're not in the middle of typing a tag, return.
-    if (tagStr[tagStr.length - 1] === ' ') {
-      return;
-    }
-    
-    var tags = tagStr.split(/\s+/),
-    incomplete = tags[tags.length - 1];
-
-    reqData[$(this).data('tagcomplete-queryparam')] = incomplete;
-    
-    var url = $(this).data('tagcomplete-url'),
-        cbk = $(this).data('tagcomplete-callback');
-    
-    if (cbk) { url += '?' + cbk + '=?'; }
-    
-    $.ajax({
-        url: url,
-        data: reqData,
-        dataType: 'jsonp',
-        type: 'get',
-        jsonpCallback: 'callback',
-        success: function (json) {
-            updateTagList(tagsContainer, json);
-        },
-    });
-  }
-  
-  function maybeDoComplete(e) {
-    var tagList = $(this).next('.tags'),
-        tag = tagList.find('a.active');
-
-    // Complete tag on {tab, return, right-arrow}.
-    if (tag[0] && ($.inArray(e.keyCode, [9, 13, 39]) !== -1)) {
-      var tags = $(this).val().split(/\s+/).slice(0, -1);
-      tags.push(tag.text());
-      $(this).val(tags.join(" ") + " ");
-      tagList.empty();
-      return false;
-    }
-  }
-
-  $(document).ready(function () {
-    $('.tagComplete').after('<div class="tags small"></div>')
-                     .focus(extractDataAttributes)
-                     .keydown(maybeDoComplete)
-                     .keyup(checkForIncompleteTag);
-  });
-})(jQuery);


--- a/ckan/templates/package/edit.html	Thu Aug 25 21:32:52 2011 +0100
+++ b/ckan/templates/package/edit.html	Thu Aug 25 23:13:21 2011 +0100
@@ -12,10 +12,6 @@
     <script type="text/javascript" src="${g.site_url}/scripts/flexitable.js"></script><link rel="stylesheet" href="${g.site_url}/css/flexitable.css" /> 
  
-    <!-- Tagcomplete --> 
-    <script type="text/javascript" src="${g.site_url}/scripts/tagcomplete.js"></script>
-    <link rel="stylesheet" href="${g.site_url}/css/tagcomplete.css" /> 
-
     <!-- Format field autocomplete --><script type="text/javascript" src="${g.site_url}/scripts/formatautocomplete.js"></script></py:def>


--- a/ckan/templates/package/new.html	Thu Aug 25 21:32:52 2011 +0100
+++ b/ckan/templates/package/new.html	Thu Aug 25 23:13:21 2011 +0100
@@ -16,10 +16,6 @@
     <script type="text/javascript" src="${g.site_url}/scripts/flexitable.js"></script><link rel="stylesheet" href="${g.site_url}/css/flexitable.css" /> 
  
-    <!-- Tagcomplete --> 
-    <script type="text/javascript" src="${g.site_url}/scripts/tagcomplete.js"></script> 
-    <link rel="stylesheet" href="${g.site_url}/css/tagcomplete.css" /> 
-
     <xi:include href="new_package_form.js"/></py:def>
 


--- a/ckan/templates/package/new_package_form.html	Thu Aug 25 21:32:52 2011 +0100
+++ b/ckan/templates/package/new_package_form.html	Thu Aug 25 23:13:21 2011 +0100
@@ -53,8 +53,7 @@
 
     <dt><label class="field_opt" for="tags">Tags</label></dt><dd>
-      <input class="long tagComplete" data-tagcomplete-queryparam="incomplete" 
-               data-tagcomplete-url="/api/2/util/tag/autocomplete" id="tag_string" name="tag_string" size="60" type="text" 
+      <input class="long autocomplete-tag" id="tag_string" name="tag_string" size="60" type="text" 
                value="${data.get('tag_string') or ' '.join([tag['name'] for tag in data.get('tags', [])])}" /></dd><dd class="instructions basic">Terms that may link this dataset to similar ones. For more information on conventions, see <a href="http://wiki.okfn.org/ckan/doc/faq#TagConventions">this wiki page</a>.</dd>

Repository URL: https://bitbucket.org/okfn/ckan/

--

This is a commit notification from bitbucket.org. You are receiving
this because you have the service enabled, addressing the recipient of
this email.


