Pastable version of Rating system for this site

<pre class='prettyprint' language='javascript'>var Rating = Class.create();
Rating.prototype = {
  initialize: function(element, rating, options) {
    this.element = $(element);
    this.rating  = rating;
    this.maxRating = 5;
    this.options = options || {};
    
    this.bindedOnHover = this.onHover.bindAsEventListener(this);
    this.bindedOnExit  = this.onExit.bindAsEventListener(this);
    this.bindedOnClick  = this.onClick.bindAsEventListener(this);
    
    Event.observe(this.element, 'mouseover', this.bindedOnHover);
    Event.observe(this.element, 'mouseout', this.bindedOnExit);
    Event.observe(this.element, 'click', this.bindedOnClick);
    
    this.instanciateStars();
    this.showStarts(this.rating);
  },
  
  instanciateStars: function() {
    this.maxRating.times(function() {
      var img = document.createElement('img');
      this.element.appendChild(img);
    }.bind(this));
  },
  
  showStarts: function(number) {
    var stars = this.getStars();

$R(0, number-1).each (function(position) {
      stars[position].src = '/images/star_full.png';
    });
    $R(number, this.maxRating-1).each (function(position) {
      stars[position].src = '/images/star_empty.png';
    });
  },
  
  getStars: function() {
    return this.element.getElementsBySelector('img');
  },
  
  onHover: function(event) {
    var element = Event.element(event);
    if (element.tagName == 'IMG') {
      this.showStarts(this.findRatingFromEvent(element));
    }
  },
  
  onExit: function(event) {
    this.showStarts(this.rating);
  },
  
  onClick: function(event) {
    var element = Event.element(event);
    if (element.tagName == 'IMG' &amp;&amp; this.options.onClick) {
      this.options.onClick.bind(this)(this.findRatingFromEvent(element));
    }
  },
  
  findRatingFromEvent: function(element) {
    var r = 0;
    this.getStars().each(function(star) {
      r ++;
      if (star == element) {
        throw $break;
      }
    });
    return r;
  },
  
  disable: function() {
    Event.stopObserving(this.element, 'mouseover', this.bindedOnHover);
    Event.stopObserving(this.element, 'mouseout', this.bindedOnExit);
    Event.stopObserving(this.element, 'click', this.bindedOnClick);
  }
};</pre>
<pre class='prettyprint' language='javascript'>&lt;div class=&quot;rating&quot;&gt;
  &lt;span id=&quot;rating_97&quot;&gt;&lt;/span&gt;
  &lt;img alt=&quot;Spinner&quot; class=&quot;spinner&quot; id=&quot;rating_97_spinner&quot; src=&quot;spinner.gif&quot; style=&quot;display:none&quot; /&gt;
  &lt;span id=&quot;rating_97_count&quot; class=&quot;count&quot;&gt;
    No rating. You haven't rated it!
  &lt;/span&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
  var rating_97 = new Rating('rating_97', 0, {
    onClick: function(rating) {
      $('rating_97_spinner').show();
      $('rating_97_count').hide();
      this.disable();
      new Ajax.Request('/codes/16-extracting-style-from-a-css-file/refactors/97;rate', {
        parameters: 'rating=' + rating,
        onComplete: function() {
          $('rating_97_spinner').hide();
          $('rating_97_count').show();
        }
      });
    }
  });
&lt;/script&gt;</pre>
<a href="http://www.refactormycode.com/codes/29-rating-system-for-this-site" style="color:#fff" title="As seen on RefactorMyCode.com"><img alt="Small_logo" src="http://www.refactormycode.com/images/small_logo.gif" style="border:0" /></a>

Refactor :my => 'code'

Recent

Popular

Pastable version of Rating system for this site