Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Heat Bar Rater (gallery-heat-bar-rater) on cdn

Last Updated: 07/29/10

+ 0 -

Amrish Kapoor

YUI Contributor

Created: 07/25/10
Last CDN Push: 07/28/10
Build Tag: gallery-2010.07.28-20-07
Project: YUI 3
License: YUI BSD
YUI Version: 3.2.0 PR1
Free for use.

Heat Bar Rater is a visual widget, which allows rating an entity.
It is shaped like a heat bar, hence the name.

Features -
1. An entity can have non-linear rating stops. Eg. A movie can have random or even exponential rating values 1, 2, 4, 16, 256, 65536 (If the movie is awesome!)

2. No restrictions to the number of rating stops for an entity. Eg. Use the widget to rate a movie as 1, 2, 4, 16, 256, 65536 (i.e 6 rating stops) or to rate a more widely spread satisfaction level from your porsche as 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 (i.e 10 rating stops)

3. Custom legend to each rating stop. Eg. 1 - Awful, 2 - Poor, 3 - Foo, 4 - Bar, 5 - Excellent

4. Each rating box, representing a rating stop, in the heat bar can have custom colors.

5. Widget is progressively enhanced from a select/input html element and is initialized with its value.

<select id="myRatingParam" name="myRatingParam">

    <option value="1">Awful</option>

    <option value="2">Poor</option>

    <option value="3" selected="selected">Average</option>

    <option value="4">Good</option>

    <option value="5">Excellent</option>

</select>

will replace the select box, with heat bar rater widget already initialized to 3 on render.

6. Widget enables POST rating back to the server through AJAX as well as Form-Submit.

<select id="myRating" name="myRating">

    ......

</select>

will render a heat bar rater widget, with a hidden input element as -

<input type="hidden" id="myRating" name="myRating" value="3" />

This way page can POST rating as myRating="3" transparently to the back-end server, which has no knowledge of 'select' box being replaced by 'heat bar rater' widget on the front-end.

7. Widget broadcasts its ratingChange event to YUI instance. So any module lets say average-rating, which is set to the average of various rating parameters, can listen to these events without having a direct handle to heat bar rating widgets.

Tags:
amrishk

<div>

    <!-- construct heat bar rater widget initialized to 5 from the following markup -->

    <select name="myRatingParam1" id="myRatingParam1" class="yui3-heatbarrater-loading">

        <option value="0">0 - Not rated</option>

        <option value="1">1 - Awful</option>

        <option value="2">2 - Awful</option>

        <option value="3">3 - Not that good</option>

        <option value="4">4 - Not that good</option>

        <option selected="selected" value="5">5 - Okay</option>

        <option value="6">6 - Okay</option>

        <option value="7">7 - Pretty good</option>

        <option value="8">8 - Pretty good</option>

        <option value="9">9 - Fantastic</option>

        <option value="10">10 - Fantastic</option>

    </select>

    <!-- 

         Above markup will be replaced by heat bar widget markup on render() like this -

         <div id="yui_3_1_1_1_128014346450525" class="yui3-widget yui3-heatbarrater">

             <div id="yui_3_1_1_1_128014346450534" class="yui3-heatbarrater-content">

                .....widget's markup......

                <input type="hidden" name="myRatingParam1" value="5">

             </div>

         </div>

         Note that an additional 'hidden' input element with id="myRatingParam1" will be added to widget's content box.

         This input param's value is synchronously updated with the rating selected by the user and facilitates submitting of rating value to the back-end server through Form-Submit

    -->

</div>

    

<div>

    <!-- construct heat bar widget (with custom values, colors and legends) initialized to 0 from the following markup -->

    <select name="myRatingParam2" id="myRatingParam2" class="yui3-heatbarrater-loading">

        <option selected="selected" value="0">0 - Not rated</option>

        <option value="1">1 - Awful</option>

        <option value="5">5 - Poor</option>

        <option value="15">15 - Average</option>

        <option value="50">50 - Good</option>

        <option value="500">500 - Excellent</option>

    </select>

</div>

Code Sample

<script src="http://yui.yahooapis.com/3.2.0 PR1/build/yui/yui-min.js"></script>

<!-- default styling for this widget -->
<link rel="stylesheet" type="text/css" 
href="http://github.com/amrishk/yui3-gallery/raw/master/build/gallery-heat-bar-rater/assets/heat-bar-rater-core.css" />
 
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.07.28-20-07'
}).use('gallery-heat-bar-rater', function(Y) {
             /*
              * Create a new instance of heat bar rater from #myRatingParam1
              * Widget would be initialized to 'selected' value i.e 5
              * Widget will have its 'default' colors and rating legends
              */
	      var myHeatBarRater1 = new Y.HeatBarRater({
		                                      srcNode: '#myRatingParam1'
	      });
 
	      /*
	       * render the widget
	       */
	      myHeatBarRater1.render();
 
	      /*
	       * get current rating value
	       */
	      Y.log('Current rating myHeatBarRater1: ' + myHeatBarRater1.get('rating')); // 5
 
 
	      /*
               * Create a new instance of heat bar rater from #myRatingParam2
               * Widget would be initialized to 'selected' value i.e 0
               * Give widget its 'custom' colors and rating legends
               */
	      var myHeatBarRater2 = new Y.HeatBarRater({
		                           srcNode: '#myRatingParam2'
		                           , valueMap: {
					           1: {color: '0e0', legend: 'Awful'}
					        , 5: {color: '0c0', legend: 'Poor'}
					       , 15: {color: '0a0', legend: 'Average'}
					      , 50: {color: '080', legend: 'Good'}
					   , 500: {color: '060', legend: 'Excellent'}						
					 }
	                           });
	      myHeatBarRater2.render();
 
	      /*
	       * listen to ratingChange events
	       */
	      myHeatBarRater1.after('ratingChange', function(e) {
		        Y.log('myHeatBarRater1 rating value: ' + e.newVal);
	      });
 
	      /*
	       * listen to ratingChange events through YUI instance
	       */
	      Y.after('heatbarrater:ratingChange', function(e) {
		        Y.log('ratingChange subscribed to YUI instance: ' + e.newVal);
	      });
 
});

<link rel="stylesheet" type="text/css" 
href="http://github.com/amrishk/yui3-gallery/raw/master/build/gallery-heat-bar-rater/assets/heat-bar-rater-core.css" />

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.07.28-20-07'
}).use('gallery-heat-bar-rater', function(Y) {
             /*
              * Create a new instance of heat bar rater from #myRatingParam1
              * Widget would be initialized to 'selected' value i.e 5
              * Widget will have its 'default' colors and rating legends
              */
	      var myHeatBarRater1 = new Y.HeatBarRater({
		                                      srcNode: '#myRatingParam1'
	      });

/*
	       * render the widget
	       */
	      myHeatBarRater1.render();
	
	      /*
	       * get current rating value
	       */
	      Y.log('Current rating myHeatBarRater1: ' + myHeatBarRater1.get('rating')); // 5
	
	
	      /*
               * Create a new instance of heat bar rater from #myRatingParam2
               * Widget would be initialized to 'selected' value i.e 0
               * Give widget its 'custom' colors and rating legends
               */
	      var myHeatBarRater2 = new Y.HeatBarRater({
		                           srcNode: '#myRatingParam2'
		                           , valueMap: {
					           1: {color: '0e0', legend: 'Awful'}
					        , 5: {color: '0c0', legend: 'Poor'}
					       , 15: {color: '0a0', legend: 'Average'}
					      , 50: {color: '080', legend: 'Good'}
					   , 500: {color: '060', legend: 'Excellent'}						
					 }
	                           });
	      myHeatBarRater2.render();
	      
	      /*
	       * listen to ratingChange events
	       */
	      myHeatBarRater1.after('ratingChange', function(e) {
		        Y.log('myHeatBarRater1 rating value: ' + e.newVal);
	      });
	
	      /*
	       * listen to ratingChange events through YUI instance
	       */
	      Y.after('heatbarrater:ratingChange', function(e) {
		        Y.log('ratingChange subscribed to YUI instance: ' + e.newVal);
	      });

});

Forum Posts

No forum posts for this module.