jQuery.telligent.evolution.ui.components.searchresult
UI Component which handles automatic presentation and registration of search result items' dynamic behavior. Decorates <div class="ui-searchresult"></div>
items to present Ajax-loaded search result details. Overrides can be provided at the theme level to present search result items differently.
This is primarily used by ISearchableContentType plugins to provide for ajax-fetched details (also provided by the plugins) to be dynamically loaded when the plugins' rendered search results are moused over.
Options
Data made available to instances of the component:
detailsurl
: Ajax endpoint URL for fetching extra search result details.
Example
Given a search result rendered by ISearchablContentType.GetViewHtml
...
<div class="abbreviated-post ui-searchresult"
data-detailsurl="">
<div class="post-metadata">
<ul class="property-list">
<li class="property-item date">[CONTENT DATE]</li>
<li class="property-item author">
<span class="user-name">
<a href="[USER_PROFILE_URL]" class="internal-link view-user-profile"><span></span>
[USER NAME]
</a>
</span>
</li>
<li>
<ul class="details"></ul>
</li>
</ul>
</div>
<h4 class="post-name">
<a class="internal-link view-post" title="Test Wiki" href="[CONTENT URL]">[CONTENT NAME]</a>
</h4>
<div class="post-summary">[CONTENT SUMMARY]</div>
<div class="post-application">
<a href="[CONTENT APPLICATION URL]">[CONTENT APPLICATION NAME]</a>
<a href="[CONTENT CONTAINER URL]">[CONTENT CONTAINER NAME]</a>
</div>
</div>
... and an Ajax callback's response, potentially provided by the same plugin's IHttpCallback
's ProcessRequest()
...
<li class="property-item">238 views</li>
<li class="property-item">2 revisions</li>
<li class="property-item">Latest: 12 May 2010</li>
... then the response will be automatically rendered within <ul class="details"></ul>
whenever the search result is moused over.
Default Implementation
For reference purposes or as the basis for an override:
(function($){
var template = ('' +
'<% foreach(properties, function(property) { %> ' +
'<li class="property-item"><%= property %></li> ' +
'<% }); %> '),
compiledTemplate = $.telligent.evolution.template.compile(template),
getDetails = function(url, complete) {
$.telligent.evolution.get({
url: url,
dataType: 'json',
success: function(response) {
if(response) {
complete(formatDetails(response));
}
}
});
},
formatDetails = function(details) {
return compiledTemplate(details);
};
$.telligent.evolution.ui.components.searchresult = {
setup: function() {
},
add: function(elm, options) {
if(options.detailsurl) {
var details = null,
detailsList = elm.find('ul.details'),
initialDetailsList = detailsList.html();
elm.on('mouseenter', function(e){
if(details !== null) {
detailsList.html(details);
} else {
getDetails(options.detailsurl, function(response) {
details = response;
detailsList.html(details);
});
}
}).on('mouseleave', function(e){
detailsList.html(initialDetailsList);
});
}
}
};
}(jQuery));