[facets] display splash image while facets are reloading content (closes #1624851)
--- a/web/data/cubicweb.facets.js Thu Apr 14 14:41:40 2011 +0200
+++ b/web/data/cubicweb.facets.js Thu Apr 14 14:41:17 2011 +0200
@@ -242,12 +242,12 @@
function updateFacetTitles() {
$('.facet').each(function() {
var $divTitle = $(this).find('.facetTitle');
- var facetSelected = $(this).find('.facetValueSelected');
- if (facetSelected.length) {
- $divTitle.addClass('facetTitleSelected');
- } else {
- $divTitle.removeClass('facetTitleSelected');
- }
+ var facetSelected = $(this).find('.facetValueSelected');
+ if (facetSelected.length) {
+ $divTitle.addClass('facetTitleSelected');
+ } else {
+ $divTitle.removeClass('facetTitleSelected');
+ }
});
}
@@ -257,5 +257,32 @@
// his, so we use this small anonymous function instead.
jQuery(document).ready(function() {
initFacetBoxEvents();
+ jQuery(cw).bind('facets-content-loaded', onFacetContentLoaded);
+ jQuery(cw).bind('facets-content-loading', onFacetFiltering);
jQuery(cw).bind('facets-content-loading', updateFacetTitles);
});
+
+function showFacetLoading(parentid) {
+ var loadingWidth = 200; // px
+ var loadingHeight = 100; // px
+ var $msg = jQuery('#facetLoading');
+ var $parent = jQuery('#' + parentid);
+ var leftPos = $parent.offset().left + ($parent.width() - loadingWidth) / 2;
+ $parent.fadeTo('normal', 0.2);
+ $msg.css('left', leftPos).show();
+}
+
+function onFacetFiltering(event, divid /* ... */) {
+ showFacetLoading(divid);
+}
+
+function onFacetContentLoaded(event, divid, rql, vid, extraparams) {
+ jQuery('#facetLoading').hide();
+}
+
+jQuery(document).ready(function () {
+ if (jQuery('div.facetBody').length) {
+ document.body.appendChild(DIV({id:'facetLoading'},
+ IMG({src: baseuri() + 'data/facet-loading.png'})));
+ }
+});
Binary file web/data/facet-loading.png has changed