vohrahul/simple-rating.js

## simple-rating.js
//the $(document).ready() function is down at the bottom

(function($) {

  $.fn.rating = function(method, options) {
    method = method || 'create';
    // This is the easiest way to have default options.
    var settings = $.extend({
      // These are the defaults.
      limit: 10,
      value: 0,
      glyph: "glyphicon-stop",
      coloroff: "#eaeaea",
      coloron: "#ff0000",
      size: "2.0em",
      cursor: "default",
      onClick: function() {},
      endofarray: "idontmatter"
    }, options);
    var style = "";
    style = style + "font-size:" + settings.size + "; ";
    style = style + "color:" + settings.coloroff + "; ";
    style = style + "cursor:" + settings.cursor + "; ";


    if (method == 'create') {
      //this.html('');	//junk whatever was there

      //initialize the data-rating property
      this.each(function() {
        attr = $(this).attr('data-rating');
        if (attr === undefined || attr === false) {
          $(this).attr('data-rating', settings.value);
        }
      })

      //bolt in the glyphs
      for (var i = 0; i < settings.limit; i++) {
        this.append('<span data-value="' + (i + 1) + '" class="ratingicon glyphicon ' + settings.glyph + '" style="' + style + '" aria-hidden="true"></span>');
      }

      //paint
      this.each(function() {
        paint($(this));
      });

    }
    if (method == 'set') {
      this.attr('data-rating', options);
      this.each(function() {
        paint($(this));
      });
    }
    if (method == 'get') {
      return this.attr('data-rating');
    }
    //register the click events
    this.find("span.ratingicon").click(function() {
      rating = $(this).attr('data-value')
      $(this).parent().attr('data-rating', rating);
      paint($(this).parent());
      settings.onClick.call($(this).parent());
    })

    function paint(div) {
      rating = parseInt(div.attr('data-rating'));
      div.find("input").val(rating); //if there is an input in the div lets set it's value
      div.find("span.ratingicon").each(function() { //now paint the stars

        var rating = parseInt($(this).parent().attr('data-rating'));
        var value = parseInt($(this).attr('data-value'));
        if (value > rating) {
          $(this).css('color', settings.coloroff);
        } else {
          $(this).css('color', settings.coloron);
        }
      })
    }

  };

}(jQuery));

var RatingPlugin = {
  Initialize: function(class_identifier) {
    $("." + class_identifier).rating('create', {
      onClick: function() {
        alert('rating for ' + this[0].id + ' is ' + this.attr('data-rating'));
      }
    });
  },
  SetValue: function(elem, value) {
    $("#" + elem).attr('data-rating', value);
  },
  GetValue: function(elem) {
    return Number($("#" + elem).attr('data-rating'));
  }
}


$(document).ready(function() {

  RatingPlugin.SetValue("star1", 5);
  RatingPlugin.SetValue("star2", 3);

  RatingPlugin.Initialize("rating");
  //RatingPlugin.GetValue("star1");

});

## zindex.html
<body width="400px">
  <div class="container-fluid">
    <table>
      <tr>
        <td>
          <div class="rating" id="star1" data-rating="0"></div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="rating" id="star2" data-rating="0"></div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="rating" id="star3" data-rating="0"></div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="rating" id="star4" data-rating="0"></div>
        </td>
      </tr>
    </table>
  </div>
</body>
	//the $(document).ready() function is down at the bottom

	(function($) {

	$.fn.rating = function(method, options) {
	method = method \|\| 'create';
	// This is the easiest way to have default options.
	var settings = $.extend({
	// These are the defaults.
	limit: 10,
	value: 0,
	glyph: "glyphicon-stop",
	coloroff: "#eaeaea",
	coloron: "#ff0000",
	size: "2.0em",
	cursor: "default",
	onClick: function() {},
	endofarray: "idontmatter"
	}, options);
	var style = "";
	style = style + "font-size:" + settings.size + "; ";
	style = style + "color:" + settings.coloroff + "; ";
	style = style + "cursor:" + settings.cursor + "; ";



	if (method == 'create') {
	//this.html(''); //junk whatever was there

	//initialize the data-rating property
	this.each(function() {
	attr = $(this).attr('data-rating');
	if (attr === undefined \|\| attr === false) {
	$(this).attr('data-rating', settings.value);
	}
	})

	//bolt in the glyphs
	for (var i = 0; i < settings.limit; i++) {
	this.append('<span data-value="' + (i + 1) + '" class="ratingicon glyphicon ' + settings.glyph + '" style="' + style + '" aria-hidden="true"></span>');
	}

	//paint
	this.each(function() {
	paint($(this));
	});

	}
	if (method == 'set') {
	this.attr('data-rating', options);
	this.each(function() {
	paint($(this));
	});
	}
	if (method == 'get') {
	return this.attr('data-rating');
	}
	//register the click events
	this.find("span.ratingicon").click(function() {
	rating = $(this).attr('data-value')
	$(this).parent().attr('data-rating', rating);
	paint($(this).parent());
	settings.onClick.call($(this).parent());
	})

	function paint(div) {
	rating = parseInt(div.attr('data-rating'));
	div.find("input").val(rating); //if there is an input in the div lets set it's value
	div.find("span.ratingicon").each(function() { //now paint the stars

	var rating = parseInt($(this).parent().attr('data-rating'));
	var value = parseInt($(this).attr('data-value'));
	if (value > rating) {
	$(this).css('color', settings.coloroff);
	} else {
	$(this).css('color', settings.coloron);
	}
	})
	}

	};

	}(jQuery));

	var RatingPlugin = {
	Initialize: function(class_identifier) {
	$("." + class_identifier).rating('create', {
	onClick: function() {
	alert('rating for ' + this[0].id + ' is ' + this.attr('data-rating'));
	}
	});
	},
	SetValue: function(elem, value) {
	$("#" + elem).attr('data-rating', value);
	},
	GetValue: function(elem) {
	return Number($("#" + elem).attr('data-rating'));
	}
	}


	$(document).ready(function() {

	RatingPlugin.SetValue("star1", 5);
	RatingPlugin.SetValue("star2", 3);

	RatingPlugin.Initialize("rating");
	//RatingPlugin.GetValue("star1");

	});
	<body width="400px">
	<div class="container-fluid">
	<table>
	<tr>
	<td>
	<div class="rating" id="star1" data-rating="0"></div>
	</td>
	</tr>
	<tr>
	<td>
	<div class="rating" id="star2" data-rating="0"></div>
	</td>
	</tr>
	<tr>
	<td>
	<div class="rating" id="star3" data-rating="0"></div>
	</td>
	</tr>
	<tr>
	<td>
	<div class="rating" id="star4" data-rating="0"></div>
	</td>
	</tr>
	</table>
	</div>
	</body>