Skip to Content

Live Table component

Version 120.1 by ElenaOanaTabaranu on 2009/09/14
Warning: For security reasons, the document is displayed in restricted mode as it is not the current version. There may be differences and errors due to this.

Live Table component

Failed to execute the [velocity] macro. Cause: [The execution of the [velocity] script macro is not allowed in [xwiki:Documentation.DevGuide.FrontendResources.LiveTable.WebHome]. Check the rights of its last author or the parameters if it's rendered from another script.]. Click on this message for details.

...
#elseif($colname=="_images") ,
  #grid_photolist($udoc)
 "${colname}" : "${photolist}"
#elseif($colname=="_ratings"),
  #grid_ratings($udoc)
 "${colname}" : "${ratings}"
#else ,
...

#info("Firebug can be a useful tool when testing the JSON code generated.")

Transforming the rating information to a nice star display requires using Javascript to replace the content of that column with the proper HTML. Attach the image below to your TutorialsCode.LiveTableRatings page to change the default white background when hovering on the stars.

star-table.gif

Add an on-demand Javascript Extension with a content which can be parsed and use the code below to enrich your component:

/** Display ratings in the live table on row event */
document.observe("xwiki:livetable:newrow", function(ev) {
  $$('._ratings').each(function (el) {
     // update content
     var avgvote = 0.0;
     if (el.innerHTML !== "") {
       avgvote = parseFloat(el.innerHTML);
      }
     var wstyle = 0;
     if (avgvote > 0) {
       wstyle = avgvote * 20;
       el.innerHTML="<div class='avg-rating'><div class='rating-stars'><ul class='small-star-rating'><li style='width: " + wstyle +"%;' class='current-rating'/><li><a class='one-star' href='#' onclick='return false;'>1</a></li><li><a class='two-stars' href='#'  onclick='return false;'>2</a></li><li><a class='three-stars' href='#'  onclick='return false;'>3</a></li><li><a class='four-stars' href='#'  onclick='return false;'>4</a></li><li><a class='five-stars' href='#'  onclick='return false;'>5</a></li></ul></div></div>";
      } else if(el.innerHTML === ""){
       el.innerHTML="<div class='avg-rating'><div class='rating-stars'><ul class='small-star-rating'><li style='width: 0%;' class='current-rating'/><li><a class='one-star' href='#' onclick='return false;'>1</a></li>    <li><a class='two-stars' href='#'  onclick='return false;'>2</a></li><li><a class='three-stars' href='#'  onclick='return false;'>3</a></li><li><a class='four-stars' href='#'  onclick='return false;'>4</a></li><li><a class='five-stars' href='#'  onclick='return false;'>5</a></li></ul></div></div>";
      }
   });
  document.fire("xwiki:livetable:ready", {
   });
});
/** Update ratings images on hover event aka mouse over and mouse out.*/
document.observe("xwiki:livetable:ready", function(levent) {
  $$('.xwiki-livetable-display-body tr').each(function (elem) {
   Event.observe(elem, 'mouseover', function (ev) {
     var ratings = elem.down('._ratings');
     if(ratings) {
       // update default white stars background
       var elt = ratings.down(2); 
       elt.setStyle({
         backgroundImage: 'url($xwiki.getDocument("TutorialsCode.LiveTableRatings").getAttachmentURL("star-table.gif"))',
         backgroundPosition: '0% 0%'
        });
       // update votes background     
       elt = ratings.down(3); 
       elt.setStyle({
         backgroundImage: 'url($xwiki.getDocument("TutorialsCode.LiveTableRatings").getAttachmentURL("star-table.gif"))',
         backgroundPosition: '0% 50%'
        });
      }
    });
   Event.observe(elem, 'mouseout', function (ev) {
     var ratings = elem.down('._ratings');
     if(ratings) {
       // restore default white stars background
       var elt = ratings.down(2); 
       elt.setStyle({
         backgroundImage: 'url($xwiki.getDocument("XWiki.Ratings").getAttachmentURL("star.gif"))',
         backgroundPosition: '0% 0%'
        });
       // restore votes background     
       elt = elem.down('._ratings').down(3); 
       elt.setStyle({
         backgroundImage: 'url($xwiki.getDocument("XWiki.Ratings").getAttachmentURL("star.gif"))',
         backgroundPosition: '0% 50%'
        });
      }
    });

  });
});

Also, add some CSS in an on-demand Stylesheet extension with a content which can be parsed to polish the custom column display:
/* ratings for live table */
.small-star-rating,
.small-star-rating .current-rating {
 background: url($xwiki.getDocument("XWiki.Ratings").getAttachmentURL("star.gif")) left -1000px repeat-x;
}
.small-star-rating{
 position:relative;
 width:125px;
 height:25px;
 overflow:hidden;
 list-style:none;
 margin:0px !important;
 padding:0px !important;
 background-position: left top;
}
.small-star-rating li{
 display: inline;
}
.small-star-rating a,
.small-star-rating .current-rating{
 position:absolute;
 top:0;
 left:0;
 text-indent:-1000em;
 height:25px;
 line-height:25px;
 outline:none;
 overflow:hidden;
 border: none;
}
.small-star-rating .current-rating{
 z-index:1;
 background-position: left center;
}
.small-star-rating:hover,
.small-star-rating:active,
.small-star-rating:focus {
 background-image: url($xwiki.getDocument("TutorialsCode.LiveTableRatings").getAttachmentURL("star-table.gif"));
 background-repeat: repeat-x;
 background-position: top left;
}
.small-star-rating a.one-star{
 width:20%;
 z-index:6;
}
.small-star-rating a.two-stars{
 width:40%;
 z-index:5;
}
.small-star-rating a.three-stars{
 width:60%;
 z-index:4;
}
.small-star-rating a.four-stars{
 width:80%;
 z-index:3;
}
.small-star-rating a.five-stars{
 width:100%;
 z-index:2;
}
.rating-stars {
 display: inline;  
 float: left;
 clear: none;
}

The final result should look like this:

livetabel.png

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected