| 1 |
// $Id: jquery.faceted_search_ui.js,v 1.7 2008/01/10 00:24:22 davidlesieur Exp $
|
| 2 |
|
| 3 |
/**
|
| 4 |
* Provides tooltips with subcategories when hovering categories, through AJAX.
|
| 5 |
*/
|
| 6 |
jQuery.facetedSearchUI = {
|
| 7 |
anchor : null, // The hovered element.
|
| 8 |
url : null, // The tooltip's url.
|
| 9 |
id : null, // Unique id for the hovered category (used as cache key).
|
| 10 |
cache : {}, // Cached HTML chunks.
|
| 11 |
|
| 12 |
activate : function() {
|
| 13 |
if (jQuery.facetedSearchUI.anchor != null || !this.href) {
|
| 14 |
return; // Already active, or invalid anchor.
|
| 15 |
}
|
| 16 |
|
| 17 |
// Extract the facet key and id from the class of the category's parent.
|
| 18 |
var facetKey = null;
|
| 19 |
var facetId = null;
|
| 20 |
jQuery(this).parents('.faceted-search-facet').each(function() {
|
| 21 |
var matches = jQuery(this).attr('class').match(/faceted-search-facet--([^ ]+)--([^ ]+)/);
|
| 22 |
if (matches.length > 0) {
|
| 23 |
facetKey = matches[1];
|
| 24 |
facetId = matches[2];
|
| 25 |
}
|
| 26 |
});
|
| 27 |
if (!facetKey || !facetId) {
|
| 28 |
return; // Could not find facet information.
|
| 29 |
}
|
| 30 |
|
| 31 |
// Derive the tooltip's url from the category's url, which also contains the search text.
|
| 32 |
jQuery.facetedSearchUI.url = this.href.replace(/\/results\//, '/categories/' + facetKey + ':' + facetId + '/-/');
|
| 33 |
if (jQuery.facetedSearchUI.url == this.href) {
|
| 34 |
return; // Could not create the tooltip's url.
|
| 35 |
}
|
| 36 |
|
| 37 |
// Save the hovered element.
|
| 38 |
jQuery.facetedSearchUI.anchor = this;
|
| 39 |
jQuery.facetedSearchUI.id = null;
|
| 40 |
|
| 41 |
// Wait a little bit before requesting the tooltip.
|
| 42 |
window.setTimeout(function() { jQuery.facetedSearchUI.delayedActivate(jQuery.facetedSearchUI.url); }, 500);
|
| 43 |
},
|
| 44 |
|
| 45 |
delayedActivate : function(url) {
|
| 46 |
// If tooltip has not been deactivated yet.
|
| 47 |
if (jQuery.facetedSearchUI.url != null && jQuery.facetedSearchUI.url == url) {
|
| 48 |
// Prepare the tooptip.
|
| 49 |
var anchorPosition = jQuery(jQuery.facetedSearchUI.anchor).offset();
|
| 50 |
var anchorWidth = jQuery(jQuery.facetedSearchUI.anchor).outerWidth();
|
| 51 |
var windowWidth = jQuery(window).width();
|
| 52 |
var tooltip = jQuery('#faceted-search-tooltip');
|
| 53 |
var tooltipWidth = tooltip.outerWidth();
|
| 54 |
tooltip.css('top', anchorPosition.top + 'px');
|
| 55 |
if (anchorPosition.left + anchorWidth + tooltipWidth + 10 > windowWidth) {
|
| 56 |
tooltip.css('left', (anchorPosition.left - tooltipWidth - 10) + 'px');
|
| 57 |
}
|
| 58 |
else {
|
| 59 |
tooltip.css('left', (anchorPosition.left + anchorWidth + 10) + 'px');
|
| 60 |
}
|
| 61 |
|
| 62 |
// Show the tooltip.
|
| 63 |
jQuery.facetedSearchUI.id = jQuery.facetedSearchUI.makeId(jQuery.facetedSearchUI.url);
|
| 64 |
if (jQuery.facetedSearchUI.id in jQuery.facetedSearchUI.cache) { // Show from the cache.
|
| 65 |
jQuery.facetedSearchUI.show(jQuery.facetedSearchUI.cache[jQuery.facetedSearchUI.id]);
|
| 66 |
//jQuery(jQuery.facetedSearchUI.anchor).css('background', 'cyan'); // Debugging helper
|
| 67 |
}
|
| 68 |
else { // Was not in the cache, load it from the server.
|
| 69 |
jQuery.get(jQuery.facetedSearchUI.url, null, jQuery.facetedSearchUI.load);
|
| 70 |
//jQuery(jQuery.facetedSearchUI.anchor).css('background', 'yellow'); // Debugging helper
|
| 71 |
}
|
| 72 |
}
|
| 73 |
},
|
| 74 |
|
| 75 |
deactivate : function() {
|
| 76 |
if (jQuery.facetedSearchUI.anchor != null) {
|
| 77 |
jQuery.facetedSearchUI.anchor = null;
|
| 78 |
jQuery.facetedSearchUI.id = null;
|
| 79 |
jQuery.facetedSearchUI.url = null;
|
| 80 |
jQuery('#faceted-search-tooltip').hide().empty();
|
| 81 |
}
|
| 82 |
},
|
| 83 |
|
| 84 |
load : function(data) {
|
| 85 |
data = Drupal.parseJson(data);
|
| 86 |
if (data.id) {
|
| 87 |
// Cache the received HTML chunk and show it.
|
| 88 |
jQuery.facetedSearchUI.cache[data.id] = data.content;
|
| 89 |
if (data.id == jQuery.facetedSearchUI.id) {
|
| 90 |
jQuery.facetedSearchUI.show(data.content);
|
| 91 |
}
|
| 92 |
}
|
| 93 |
},
|
| 94 |
|
| 95 |
show : function(chunk) {
|
| 96 |
if (chunk.length > 0) {
|
| 97 |
// Received content is relevant to the currently hovered category, show it.
|
| 98 |
jQuery('#faceted-search-tooltip').empty().append(chunk).show();
|
| 99 |
}
|
| 100 |
},
|
| 101 |
|
| 102 |
makeId : function(url) {
|
| 103 |
// Extract the search text to use as id.
|
| 104 |
return decodeURIComponent(url.substr(url.lastIndexOf('/') + 1)).replace(/\+/g, ' ');
|
| 105 |
// TODO: The above does not work properly when '/' is used in the search text.
|
| 106 |
}
|
| 107 |
};
|
| 108 |
|
| 109 |
if (Drupal.jsEnabled) {
|
| 110 |
jQuery(function() {
|
| 111 |
// Insert the tooltip block.
|
| 112 |
jQuery('body').append('<div id="faceted-search-tooltip"></div>');
|
| 113 |
// Bind hover behavior on category links.
|
| 114 |
jQuery('.faceted-search-category a').hover(jQuery.facetedSearchUI.activate, jQuery.facetedSearchUI.deactivate);
|
| 115 |
// Bind click behavior to force closing the tooptip, if ever needed.
|
| 116 |
jQuery(this).click(jQuery.facetedSearchUI.deactivate);
|
| 117 |
});
|
| 118 |
}
|
| 119 |
|
Parent Directory
| 
Revision Log
| 
Revision Graph