358 lines
16 KiB
JavaScript
358 lines
16 KiB
JavaScript
|
(function($) {
|
||
|
|
function _arrayToVal( array, ele ) {
|
||
|
|
var tags_array = [];
|
||
|
|
$.each( array, function(key) {
|
||
|
|
tags_array.push( key );
|
||
|
|
});
|
||
|
|
|
||
|
|
ele.val( tags_array.join(",") );
|
||
|
|
ele.trigger("change");
|
||
|
|
}
|
||
|
|
|
||
|
|
// this doesn't act on the autocompletewithunknown widget. Instead, it's called on our input field with autocompletion
|
||
|
|
function _handleComplete(e, ui, $oldElement) {
|
||
|
|
var self = $(this).data("autocompletewithunknown");
|
||
|
|
var ele = self.element;
|
||
|
|
|
||
|
|
var curtagslist = self.cachemap[self.currentCache];
|
||
|
|
|
||
|
|
var items = ui.item.value.toLowerCase();
|
||
|
|
$.each( items.split(","), function() {
|
||
|
|
var tag = $.trim(this);
|
||
|
|
|
||
|
|
// check if the tag is empty, or if we had previously used it
|
||
|
|
if ( tag == "" ) return;
|
||
|
|
|
||
|
|
// TODO: don't put it in if the word exceeds the maximum length of a tag
|
||
|
|
if ( ! self.tagslist[tag] ) {
|
||
|
|
self.tagslist[tag] = true;
|
||
|
|
|
||
|
|
|
||
|
|
var tokentype = curtagslist && curtagslist[tag] ? self.options.curTokenClass : self.options.newTokenClass;
|
||
|
|
|
||
|
|
var $text = $("<span></span>")
|
||
|
|
.addClass(self.options.tokenTextClass)
|
||
|
|
.text(tag);
|
||
|
|
var $a = $("<button class='fi-icon--with-fallback theme-color-on-hover'></button>").addClass(self.options.tokenRemoveClass).html("<span class='fi-icon fi-x' aria-hidden='true'></span>" +
|
||
|
|
"<span class='fi-icon--fallback'>Remove " + tag + "</span>");
|
||
|
|
|
||
|
|
var $li = $("<li></li>").addClass(self.options.tokenClass + " " + tokentype)
|
||
|
|
.append($text).append($a).append(" ")
|
||
|
|
.attr( "title", tokentype == self.options.curTokenClass ? "tag: " + tag : "new tag: " + tag);
|
||
|
|
if ( $oldElement )
|
||
|
|
$oldElement.replaceWith($li);
|
||
|
|
else
|
||
|
|
$li.appendTo(self.uiAutocompletelist);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#"+self.options.id+"_count_label").text("characters per tag:");
|
||
|
|
$(this).val("");
|
||
|
|
if ( self.options.grow ) {
|
||
|
|
// shrink
|
||
|
|
$(this).height((parseInt($(this).css('lineHeight').replace(/px$/,''), 10)||20) + 'px');
|
||
|
|
if ( self.options.maxlength )
|
||
|
|
$("#"+self.options.id+"_count").text(self.options.maxlength);
|
||
|
|
}
|
||
|
|
|
||
|
|
_arrayToVal(self.tagslist, ele)
|
||
|
|
|
||
|
|
if ( $.browser.opera ) {
|
||
|
|
var keyCode = $.ui.keyCode;
|
||
|
|
if( e.which == keyCode.ENTER || e.which == keyCode.TAB )
|
||
|
|
self.justCompleted = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
// this prevents the default behavior of having the
|
||
|
|
// form field filled with the autocompleted text.
|
||
|
|
// Target the event type, to avoid issues with selecting using TAB
|
||
|
|
if ( e.type == "autocompleteselect" ) {
|
||
|
|
e.preventDefault();
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$.widget("ui.autocompletewithunknown", {
|
||
|
|
options: {
|
||
|
|
id: null,
|
||
|
|
tokenClass: "token",
|
||
|
|
tokenTextClass: "token-text",
|
||
|
|
tokenRemoveClass: "token-remove",
|
||
|
|
newTokenClass: "new",
|
||
|
|
curTokenClass: "autocomplete",
|
||
|
|
numMatches: 20,
|
||
|
|
populateSource: null, // initial location to populate from
|
||
|
|
populateId: "", // initial identifier for the list to be cached
|
||
|
|
grow: false // whether to automatically grow the autocomplete textarea or not
|
||
|
|
},
|
||
|
|
|
||
|
|
_filterTags: function( array, term ) {
|
||
|
|
var self = this;
|
||
|
|
var startsWithTerm = [];
|
||
|
|
|
||
|
|
term = $.trim(term.toLowerCase());
|
||
|
|
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term) );
|
||
|
|
|
||
|
|
var filtered = $.grep( array, function(value) {
|
||
|
|
var val = value.label || value.value || value;
|
||
|
|
if ( !self.tagslist[val] && matcher.test( val ) ) {
|
||
|
|
if ( val.indexOf(term) == 0 ) {
|
||
|
|
// ugly, but we'd like to handle terms that start with
|
||
|
|
// in a different manner
|
||
|
|
startsWithTerm.push({ value: val,
|
||
|
|
label: val.replace(term, "<strong>"+term+"</strong>")});
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// second step, because we first need to find out how many
|
||
|
|
// total start with the term, and so need to be in the list
|
||
|
|
// those that only contain the term fill in any remaining slots
|
||
|
|
var responseArray = startsWithTerm.slice(0, self.options.numMatches);
|
||
|
|
$.each(filtered, function(index, value) {
|
||
|
|
if ( responseArray.length >= self.options.numMatches )
|
||
|
|
return false;
|
||
|
|
|
||
|
|
responseArray.push({ value: value,
|
||
|
|
label: value.replace(term, "<strong>"+term+"</strong>")});
|
||
|
|
})
|
||
|
|
|
||
|
|
return responseArray;
|
||
|
|
},
|
||
|
|
|
||
|
|
_create: function() {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
if (!self.options.id)
|
||
|
|
self.options.id = "autocomplete_"+self.element.attr("id");
|
||
|
|
|
||
|
|
self.uiAutocomplete = self.element.wrap("<span class='autocomplete-container border'></span>").parent().attr("id", self.options.id).addClass(self.element.attr("class"));
|
||
|
|
|
||
|
|
self.uiAutocompletelist = $("<ul class='autocomplete-list'></ul>").appendTo(self.uiAutocomplete).attr( "aria-live", "assertive" );
|
||
|
|
|
||
|
|
// this is just frontend; will use JS to transfer contents to the original field (now hidden)
|
||
|
|
self.uiAutocompleteInput = $("<input class='autocomplete-input' ></input>")
|
||
|
|
.appendTo(self.uiAutocomplete)
|
||
|
|
.data("autocompletewithunknown", self)
|
||
|
|
.focus(function(e) {
|
||
|
|
$(this).closest(".autocomplete-container").addClass("focus");
|
||
|
|
})
|
||
|
|
.blur(function(e) {
|
||
|
|
$(this).closest(".autocomplete-container").removeClass("focus");
|
||
|
|
});
|
||
|
|
|
||
|
|
if ( self.options.grow ) {
|
||
|
|
self.uiAutocomplete.closest(".row").parent().find(".tagselector-controls")
|
||
|
|
.append("<div class='autocomplete-count-container right'><span id='"+self.options.id+"_count_label'>characters per tag:</span> <span id='"+self.options.id+"_count' class='autocomplete-count'>50</span></div>");
|
||
|
|
$(self.uiAutocompleteInput).vertigro(self.options.maxlength, self.options.id + "_count");
|
||
|
|
}
|
||
|
|
|
||
|
|
self.element.hide();
|
||
|
|
|
||
|
|
self.tagslist = {};
|
||
|
|
self.cache = {};
|
||
|
|
self.cachemap = {};
|
||
|
|
|
||
|
|
if ( self.options.populateSource )
|
||
|
|
self.populate(self.options.populateSource, self.options.populateId);
|
||
|
|
|
||
|
|
self.uiAutocompleteInput.autocomplete({
|
||
|
|
source: function (request, response) {
|
||
|
|
if ( self.cache[self.currentCache] != null )
|
||
|
|
return response( self._filterTags( self.cache[self.currentCache], request.term ) );
|
||
|
|
},
|
||
|
|
autoFocus: true,
|
||
|
|
select: _handleComplete
|
||
|
|
}).bind("keydown.autocompleteselect", function( event ) {
|
||
|
|
var keyCode = $.ui.keyCode;
|
||
|
|
var $input = $(this);
|
||
|
|
|
||
|
|
$("#"+self.options.id+"_count_label").text("characters left:");
|
||
|
|
|
||
|
|
switch( event.which ) {
|
||
|
|
case keyCode.ENTER:
|
||
|
|
_handleComplete.apply( $input,
|
||
|
|
[event, { item: { value: $input.val() } } ]);
|
||
|
|
self.justCompleted = true;
|
||
|
|
$input.autocomplete("close");
|
||
|
|
event.preventDefault();
|
||
|
|
|
||
|
|
return;
|
||
|
|
case keyCode.TAB:
|
||
|
|
if ($input.val()) {
|
||
|
|
_handleComplete.apply( $input,
|
||
|
|
[event, { item: { value: $input.val() } } ]);
|
||
|
|
self.justCompleted = true;
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
case keyCode.BACKSPACE:
|
||
|
|
if( ! $input.val() ) {
|
||
|
|
$("."+self.options.tokenRemoveClass + ":last", self.uiAutocomplete).focus();
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}).bind("keyup.autocompleteselect", function( event ) {
|
||
|
|
var $input = $(this);
|
||
|
|
if ( $input.val().indexOf(",") > -1 )
|
||
|
|
_handleComplete.apply( $input, [event, { item: { value: $input.val() } } ]);
|
||
|
|
}).change(function(event){
|
||
|
|
// if we have the menu open, let that handle the autocomplete
|
||
|
|
var $menu = $(this).data("ui-autocomplete").menu;
|
||
|
|
if ( $menu.element.is(":visible") ) return;
|
||
|
|
|
||
|
|
_handleComplete.apply( $(this), [event, { item: { value: $(event.currentTarget).val() } } ]);
|
||
|
|
|
||
|
|
// workaround for autocompleting with TAB in opera
|
||
|
|
if ( $.browser.opera && self.justCompleted ) {
|
||
|
|
$(this).focus();
|
||
|
|
self.justCompleted = false;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.data("ui-autocomplete")._renderItem = function( ul, item ) {
|
||
|
|
return $( "<li></li>" )
|
||
|
|
.data( "ui-autocomplete-item", item )
|
||
|
|
.append( "<a>" + item.label + "</a>" )
|
||
|
|
.appendTo( ul );
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
// so other things can reinitialize the widget with their own text
|
||
|
|
$(self.element).bind("autocomplete_inittext", function( event, new_text ) {
|
||
|
|
self.tagslist = {};
|
||
|
|
self.uiAutocompletelist.empty();
|
||
|
|
_handleComplete.apply( self.uiAutocompleteInput, [ event, { item: { value: new_text } } ] );
|
||
|
|
});
|
||
|
|
$(self.element).trigger("autocomplete_inittext", self.element.val());
|
||
|
|
|
||
|
|
// replace one text
|
||
|
|
$(self.element).bind("autocomplete_edittext", function ( event, $element, new_text ) {
|
||
|
|
_handleComplete.apply( self.uiAutocompleteInput, [ event, { item: { value: new_text } }, $element ] );
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".autocomplete-container").click(function() {
|
||
|
|
self.uiAutocompleteInput.focus();
|
||
|
|
});
|
||
|
|
|
||
|
|
$("span."+self.options.tokenTextClass, self.uiAutocomplete.get(0))
|
||
|
|
.live("click", function(event) {
|
||
|
|
delete self.tagslist[$(this).text()];
|
||
|
|
_arrayToVal(self.tagslist, self.element);
|
||
|
|
var $input = $("<input type='text' />")
|
||
|
|
.addClass(self.options.tokenTextClass)
|
||
|
|
.val($(this).text())
|
||
|
|
.width($(this).width()+5);
|
||
|
|
$(this).replaceWith($input);
|
||
|
|
$input.focus();
|
||
|
|
|
||
|
|
event.stopPropagation();
|
||
|
|
});
|
||
|
|
|
||
|
|
$("input."+self.options.tokenTextClass,self.uiAutocomplete.get(0))
|
||
|
|
.live("blur", function(event) {
|
||
|
|
$(self.element).trigger("autocomplete_edittext", [ $(this).closest("li"), $(this).val() ] );
|
||
|
|
});
|
||
|
|
|
||
|
|
$("."+self.options.tokenRemoveClass, self.uiAutocomplete.get(0)).live("click", function(e) {
|
||
|
|
var $token = $(this).closest("."+self.options.tokenClass);
|
||
|
|
|
||
|
|
delete self.tagslist[$token.children("."+self.options.tokenTextClass).text()];
|
||
|
|
_arrayToVal(self.tagslist, self.element);
|
||
|
|
$token.fadeOut(function() {$(this).remove()});
|
||
|
|
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
}).live("focus", function(event) {
|
||
|
|
$(this).parent().addClass("focus");
|
||
|
|
}).live("blur", function(event) {
|
||
|
|
$(this).parent().removeClass("focus");
|
||
|
|
}).live("keydown", function(event) {
|
||
|
|
if ( event.which == $.ui.keyCode.BACKSPACE ) {
|
||
|
|
event.preventDefault();
|
||
|
|
var $prevToken = $(this).closest("."+self.options.tokenClass).prev("."+self.options.tokenClass);
|
||
|
|
$(this).click();
|
||
|
|
|
||
|
|
if ($prevToken.length == 1)
|
||
|
|
$prevToken.find("."+self.options.tokenRemoveClass).focus();
|
||
|
|
else
|
||
|
|
self.uiAutocompleteInput.focus();
|
||
|
|
} else if (event.which != $.ui.keyCode.TAB) {
|
||
|
|
$(this).siblings("."+self.options.tokenTextClass).click();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// workaround for autocompleting with ENTER in opera
|
||
|
|
self.justCompleted = false;
|
||
|
|
$.browser.opera && $(self.element.get(0).form).bind("submit.autocomplete", function(e) {
|
||
|
|
// this tries to make sure that we don't try to validate crossposting, if we only hit enter
|
||
|
|
// to autocomplete. Workaround for opera.
|
||
|
|
// Sort of like a lock, to mark which handler last prevented the form submission.
|
||
|
|
// TODO: refactor this out into something that we're sure works. We are at the mercy
|
||
|
|
// of the way that Opera and other browsers order the handlers.
|
||
|
|
if ( self.element.data("preventedby") == self.options.id)
|
||
|
|
self.element.data("preventedby", null)
|
||
|
|
|
||
|
|
if( self.justCompleted ) {
|
||
|
|
if ( ! self.element.data("preventedby") )
|
||
|
|
self.element.data("preventedby", self.options.id);
|
||
|
|
self.justCompleted = false;
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
// store this in an array, and in a hash, so that we can easily look up presence of tags
|
||
|
|
_cacheData: function(array, key) {
|
||
|
|
this.currentCache=key;
|
||
|
|
|
||
|
|
this.cache[this.currentCache] = array;
|
||
|
|
this.cachemap[this.currentCache] = {};
|
||
|
|
for( var i in array ) {
|
||
|
|
this.cachemap[this.currentCache][array[i]] = true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
tagstatus: function(key) {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
if ( !self.cachemap[key] )
|
||
|
|
return;
|
||
|
|
|
||
|
|
// recheck tags status in case tags list loaded slowly
|
||
|
|
// or we switched comms
|
||
|
|
$("."+self.options.tokenClass, self.uiAutocomplete).each(function() {
|
||
|
|
var exists = self.cachemap[key][$(this).find("."+self.options.tokenTextClass).text()];
|
||
|
|
$(this).toggleClass(self.options.newTokenClass, !exists).toggleClass(self.options.curTokenClass, exists);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function(source, id) {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
// Source is a URL endpoint we need to fetch
|
||
|
|
if (typeof source === 'string' || source instanceof String) {
|
||
|
|
$.getJSON(source, function(data) {
|
||
|
|
if ( !data ) return;
|
||
|
|
|
||
|
|
self._cacheData(data.tags, id);
|
||
|
|
self.tagstatus(id);
|
||
|
|
});
|
||
|
|
} else if (Array.isArray(source)) {
|
||
|
|
// Source is a static array, just store it.
|
||
|
|
self._cacheData(source, id);
|
||
|
|
self.tagstatus(id);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
clear: function () {
|
||
|
|
var self = this;
|
||
|
|
self._cacheData([], "");
|
||
|
|
self.tagstatus("");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
})(jQuery);
|