jQuery.telligent.evolution.ui.components.tag
UI Component which handles presentation of tagging behavior for content. Transforms the output from $core_v2_ui.Tag()
, which is a <span class="ui-tag"></span>
stub. The default implementation uses the evolutionInlineTagEditor plugin. Overrides can be provided at the theme level to present tagging differently.
Options
Data made available to instances of the component:
contenttypeid
: (string) Content Type Id Guidcontentid
: (string) Content Id Guidtagtypeid
: (string) Tag Type Idurlformat
: (string) URL containing a token named{tag}
which, when replaced with a tag name, shows other content with the same tagreadonly
: (boolean) When true, the component should not present editing controlstags
: Comma-separated list of tags currently applied to the contentselectabletags
: Comma-separated list of optionally-selectable tags that may be presented to the user when not in read-only. These tags are already in use by other content.configuration
: Object of all other keys and values passed via the options dictionary to$core_v2_ui.Tag()
, regardless of whether they have been pre-defined
Example
A barebones UI component override which would result in rendering a read-only message of 'Tagged: [tag], [tag], [tag], [etc]'.
$.telligent.evolution.ui.components.tag = {
setup: function() {
},
add: function(elm, options) {
var message = 'Tagged: ',
renderedTagLinks = $.map(options.tags.split(','), function(tagName) {
var tagUrl = options.urlformat.replace(/{tag}/, tagName);
return '<a href="' + tagUrl + '">' + tagName + '</a>';
});
$(elm).html(message + renderedTagLinks.join(', '));
}
};
Default Implementation
For reference purposes or as the basis for an override:
(function($){
var formatTags = function(tagsList, urlFormat, elm) {
var c = $(elm);
c.html('');
if (!tagsList) {
return;
}
var first = true;
$.each(tagsList.split(/,/), function(i, v) {
var t = $.trim(v);
if (t) {
if (first) {
first = false;
} else {
c.append(", ");
}
if (!urlFormat) {
c.append(t);
} else {
c.append($('<a>').attr('rel','nofollow tag').attr('href', urlFormat.replace(/{tag}/g, $.telligent.evolution.url.encodePathComponent($.telligent.evolution.html.decode(t)))).text(t));
}
}
});
};
$.telligent.evolution.ui.components.tag = {
setup: function() {
},
add: function(elm, options) {
var tagsContainer = jQuery('<span></span>');
$(elm).append(tagsContainer);
formatTags(options.tags, options.urlformat, tagsContainer);
var editTags = null;
if (options.readonly !== 'true') {
editTags = $('<a href="javascript:void(0);" class="internal-link edit-tags"></a>');
$(elm).append(editTags);
editTags.evolutionInlineTagEditor({
allTags: $.grep(options.selectabletags.split(','), function(item) { return item; }),
currentTags: $.grep(options.tags.split(','), function(item) { return item; }),
onSave: function(tags, successFn) {
var data = {
Tags: tags && tags.length > 0 ? tags.join(',') : '',
ContentId: options.contentid,
ContentTypeId: options.contenttypeid
};
if (options.tagtypeid) {
data.TypeId = options.tagtypeid;
}
$.telligent.evolution.put({
url: $.telligent.evolution.site.getBaseUrl() + 'api.ashx/v2/contenttags.json',
data: data,
success: function(response) {
formatTags(data.Tags, options.urlformat, tagsContainer);
successFn();
}
});
}
});
}
}
};
}(jQuery));