[ckan-changes] commit/ckan: rgrp: [js, autocomplete][s]: (refs #1282) refactor tag autocomplete to use jquery ui and our standard setup.
Bitbucket
commits-noreply at bitbucket.org
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.
More information about the ckan-changes
mailing list