Rating
<style>
@import "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css";
/* line 1, ../sass/_jq-rating.scss */
.jq-rating {
font-size: 25px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
/* line 10, ../sass/_jq-rating.scss */
.jq-rating--editable {
cursor: pointer; }
/* line 16, ../sass/_jq-rating.scss */
.jq-rating--level-xlow .jq-rating-group--hover {
color: #e11e21; }
/* line 21, ../sass/_jq-rating.scss */
.jq-rating--level-low .jq-rating-group--hover {
color: #ff5d10; }
/* line 26, ../sass/_jq-rating.scss */
.jq-rating--level-medium .jq-rating-group--hover {
color: #e8800e; }
/* line 31, ../sass/_jq-rating.scss */
.jq-rating--level-high .jq-rating-group--hover {
color: #f9b836; }
/* line 36, ../sass/_jq-rating.scss */
.jq-rating--level-xhigh .jq-rating-group--hover {
color: #fdd119; }
/**
* Groups
*/
/* line 44, ../sass/_jq-rating.scss */
.jq-rating-group,
.jq-rating-group--hover {
color: #EEE; }
/* line 48, ../sass/_jq-rating.scss */
.jq-rating-group > span,
.jq-rating-group--hover > span {
margin-right: 2px; }
/* line 52, ../sass/_jq-rating.scss */
.jq-rating-group--hover {
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out; }
/* line 5, ../sass/style.scss */
.header {
height: 400px;
background: url("../img/header.jpg") no-repeat 50% 50%;
background-size: cover;
text-align: center;
color: white;
padding-top: 150px; }
/* line 13, ../sass/style.scss */
.container {
max-width: 1200px;
margin: 0 auto;
text-align: center; }
/* line 18, ../sass/style.scss */
.text {
text-align: center;
color: #393939;
padding: 50px; }
/* line 23, ../sass/style.scss */
.samples {
background: #f5f5f5;
text-align: center;
padding: 50px; }
/* line 28, ../sass/style.scss */
input {
font-size: 10px;
margin-bottom: 20px; }
/**
* Typography :
*/
/* line 36, ../sass/style.scss */
html {
font: 11px/1.5 "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; }
/* line 41, ../sass/style.scss */
h1 {
font-size: 50px;
font-weight: 100; }
/* line 45, ../sass/style.scss */
h2 {
font-size: 25px;
margin-bottom: 10px; }
/* line 49, ../sass/style.scss */
h3 {
font-size: 15px;
margin-bottom: 10px; }
/* line 53, ../sass/style.scss */
p {
font-size: 13px;
color: #979797;
margin-bottom: 20px; }
/* line 58, ../sass/style.scss */
strong {
color: #fbd665; }
</style>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script >
/*
* jq-rating
*
* jQuery plugin to create stars based rating
*
* @author ESL Education <web@esl-education.org>
* @created 02.07.14
* @updated 05.11.14
* @version 1.0.3
*/
(function($) {
var jqRating, pluginName;
pluginName = 'jqRating';
jqRating = (function() {
function jqRating(item, options) {
this.$this = $(item);
this.settings = {
value: 3.5,
retainValue: null,
levelsClasses: ['level-xlow', 'level-low', 'level-medium', 'level-high', 'level-xhigh'],
updateOn: 'click',
starsCount: 5,
basedOn: 5,
iconClass: 'fa fa-star',
editable: false,
onChange: null
};
this.$refs = {
starsContainer: null,
base: null,
hover: null,
grade: null,
starsBase: null,
starsHover: null
};
this.levelClass = null;
this.hoverValue = null;
this.retainValue = null;
this._init(options);
}
/*
* Init
*/
jqRating.prototype._init = function(options) {
this._extendSettings(options);
this.retainValue = this.settings.retainValue;
this.$refs.starsContainer = this.$this.find('[data-jq-rating-stars]:first');
if (!this.$refs.starsContainer.length) {
this.$refs.starsContainer = this.$this;
}
this.$refs.grade = this.$this.find('[data-jq-rating-grade]');
this._generateHtml();
this._applyBaseCss();
this._addEventsListeners();
return this.setValue(this.settings.value);
};
/*
* Destroy
*/
jqRating.prototype.destroy = function() {
this.$refs.starsInteraction.unbind('mouseover');
this.$refs.starsInteraction.unbind('click');
this.$refs.starsContainer.unbind('mouseleave');
this.$refs.starsContainer.empty();
this.$refs.starsContainer = null;
this.$refs.base = null;
this.$refs.hover = null;
this.$refs.grade = null;
this.$refs.starsBase = null;
this.$refs.starsHover = null;
this.$refs.formField = null;
this.$this.removeClass('jq-rating');
if (this.levelClass) {
this.$this.removeClass(this.levelClass);
}
if (this.isEditable()) {
return this.$this.removeClass('jq-rating--editable');
}
};
/*
* Update
*/
jqRating.prototype.update = function() {
this.destroy();
return this._init();
};
/*
* Retain to a certain value
*/
jqRating.prototype.retain = function(value) {
this.retainValue = value;
return this.render();
};
/*
* Release
*/
jqRating.prototype.release = function() {
if (typeof this.retainValue === !'number' || typeof this.retainValue === !'string') {
return;
}
this.retainValue = null;
return this.render();
};
/*
* Generate html
*/
jqRating.prototype._generateHtml = function() {
var i, stars, _i, _ref;
this.$this.addClass('jq-rating');
if (this.isEditable()) {
this.$this.addClass('jq-rating--editable');
}
this.$refs.base = $('<span class="jq-rating-group" />');
this.$refs.hover = $('<span class="jq-rating-group--hover" />');
this.$refs.interaction = $('<span class="jq-rating-group--hover jq-rating-group--interaction" />');
stars = [];
for (i = _i = 0, _ref = this.settings.starsCount; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
stars.push(['<span class="jq-rating-star">', '<i class="' + this.settings.iconClass + '"></i>', '</span>'].join(''));
}
this.$refs.starsContainer.append(this.$refs.base).append(this.$refs.hover).append(this.$refs.interaction);
this.$refs.base.append($(stars.join('')));
this.$refs.hover.append($(stars.join('')));
this.$refs.interaction.append($(stars.join('')));
this.$refs.starsBase = this.$refs.base.children();
this.$refs.starsHover = this.$refs.hover.children();
return this.$refs.starsInteraction = this.$refs.interaction.children();
};
/*
* Apply base css
*/
jqRating.prototype._applyBaseCss = function() {
var sharedHoverCss;
if (this.$refs.starsContainer.length) {
this.$refs.starsContainer.css({
position: 'relative',
display: 'inline-block'
});
}
this.$refs.base.css({
top: 0,
left: 0
});
sharedHoverCss = {
position: 'absolute',
top: 0,
left: 0,
overflow: 'hidden',
'white-space': 'nowrap'
};
this.$refs.hover.css(sharedHoverCss);
this.$refs.interaction.css(sharedHoverCss);
this.$refs.starsBase.css({
display: 'inline-block'
});
this.$refs.starsHover.css({
display: 'inline-block'
});
return this.$refs.starsInteraction.css({
color: 'transparent'
});
};
/*
* Add events listeners
*/
jqRating.prototype._addEventsListeners = function() {
this.$this.find('input[data-jq-rating-grade], textarea[data-jq-rating-grade]').on('change', (function(_this) {
return function(e) {
var value;
value = parseInt(e.currentTarget.value);
if (value < 0) {
value = 0;
}
if (value > _this.settings.basedOn) {
value = _this.settings.basedOn;
}
return _this.setValue(value);
};
})(this));
if (this.isEditable()) {
this.$refs.starsInteraction.bind('mouseover', (function(_this) {
return function(e) {
var index, value;
index = $(e.currentTarget).index() + 1;
value = _this.settings.basedOn / _this.settings.starsCount * index;
if (_this.settings.updateOn === 'hover') {
return _this.setValue(value);
} else {
_this.hoverValue = value;
return _this.render();
}
};
})(this));
this.$refs.starsInteraction.bind('click', (function(_this) {
return function(e) {
var index;
index = $(e.currentTarget).index() + 1;
return _this.setValue(_this.settings.basedOn / _this.settings.starsCount * index);
};
})(this));
return this.$refs.starsContainer.bind('mouseleave', (function(_this) {
return function(e) {
_this.hoverValue = null;
return _this.render();
};
})(this));
}
};
/*
* Set the rating value
*/
jqRating.prototype.setValue = function(value) {
this.value = value;
this.render();
this.$refs.grade.each((function(_this) {
return function(index, elm) {
switch (elm.nodeName.toLowerCase()) {
case 'textarea':
case 'input':
return $(elm).val(_this.value).attr('value', _this.value);
default:
return $(elm).html(_this.value);
}
};
})(this));
if (this.settings.onChange) {
this.settings.onChange(this.value, this);
}
return this.$this.trigger('jqRating.change');
};
/*
* Render
*/
jqRating.prototype.render = function() {
var levelClassIdx, value, width;
value = this.hoverValue || this.value;
if (typeof this.retainValue === 'number' || typeof this.retainValue === 'string') {
value = this.retainValue;
}
width = 100 / this.settings.basedOn * value;
this.$refs.hover.css({
width: width + '%'
});
levelClassIdx = Math.round((this.settings.levelsClasses.length / this.settings.basedOn * value) - 1);
if (levelClassIdx < 0) {
levelClassIdx = 0;
}
if (levelClassIdx >= this.settings.levelsClasses.length) {
levelClassIdx = this.settings.levelsClasses.length - 1;
}
if (this.levelClass) {
this.$this.removeClass(this.levelClass);
}
this.levelClass = 'jq-rating--' + this.settings.levelsClasses[levelClassIdx];
return this.$this.addClass(this.levelClass);
};
/*
* Check if is editable or not
*/
jqRating.prototype.isEditable = function() {
var editable;
editable = this.settings.editable && this.settings.editable === 'true';
return editable;
};
/*
* Extend settings
*/
jqRating.prototype._extendSettings = function(options) {
if (options != null) {
this.settings = $.extend(this.settings, options, true);
}
return $.each(this.$this.get(0).attributes, (function(_this) {
return function(index, attr) {
var name;
name = attr.name;
name = name.substr('data-jq-rating-'.length);
name = name.replace(/-([a-z])/g, function(g) {
return g[1].toUpperCase();
});
if (!name) {
return;
}
if (_this.settings[name] !== void 0) {
return _this.settings[name] = attr.value;
}
};
})(this));
};
return jqRating;
})();
/*
* jQuery controller :
*/
return $.fn.jqRating = function(method) {
var args;
if (jqRating.prototype[method]) {
args = Array.prototype.slice.call(arguments, 1);
return this.each(function() {
var plugin;
plugin = $(this).data(pluginName + '_api');
return plugin[method].apply(plugin, args);
});
} else if (typeof method === 'object' || !method) {
args = Array.prototype.slice.call(arguments);
return this.each(function() {
var $this, plugin;
$this = $(this);
if (($this.data(pluginName + '_api') != null) && $this.data(pluginName + '_api') !== '') {
return;
}
plugin = new jqRating(this, args[0]);
return $(this).data(pluginName + '_api', plugin);
});
} else {
return $.error('Method ' + method + ' does not exist on jQuery.jqRating');
}
};
})(jQuery);
//# sourceMappingURL=jq-rating.js.map
</script>
<script>
jQuery(function($) {
$elms = $('[data-jq-rating]').jqRating({});
$first = $elms.filter(':first');
$update = $elms.filter(':eq(2)');
setTimeout(function() {
$update.attr('data-jq-rating-value', '1');
$update.attr('data-jq-rating-icon-class', 'fa fa-send');
$update.jqRating('update');
}, 2000);
setInterval(function() {
$first.jqRating('setValue', Math.round(Math.random()*5*100) / 100);
}, 1000);
});
</script>
<p>Rating</p>
<span data-jq-rating
data-jq-rating-editable="true"></span>
