first
This commit is contained in:
@@ -0,0 +1,54 @@
|
||||
.br-theme-bars-1to10 .br-widget {
|
||||
height: 50px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.br-theme-bars-1to10 .br-widget a {
|
||||
display: block;
|
||||
width: 12px;
|
||||
padding: 5px 0;
|
||||
height: 28px;
|
||||
float: left;
|
||||
background-color: #fbedd9;
|
||||
margin: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
.br-theme-bars-1to10 .br-widget a.br-active,
|
||||
.br-theme-bars-1to10 .br-widget a.br-selected {
|
||||
background-color: #EDB867;
|
||||
}
|
||||
.br-theme-bars-1to10 .br-widget .br-current-rating {
|
||||
font-size: 20px;
|
||||
line-height: 2;
|
||||
float: left;
|
||||
padding: 0 20px 0 20px;
|
||||
color: #EDB867;
|
||||
font-weight: 400;
|
||||
}
|
||||
.br-theme-bars-1to10 .br-readonly a {
|
||||
cursor: default;
|
||||
}
|
||||
.br-theme-bars-1to10 .br-readonly a.br-active,
|
||||
.br-theme-bars-1to10 .br-readonly a.br-selected {
|
||||
background-color: #f2cd95;
|
||||
}
|
||||
.br-theme-bars-1to10 .br-readonly .br-current-rating {
|
||||
color: #f2cd95;
|
||||
}
|
||||
@media print {
|
||||
.br-theme-bars-1to10 .br-widget a {
|
||||
border: 1px solid #b3b3b3;
|
||||
background: white;
|
||||
height: 38px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.br-theme-bars-1to10 .br-widget a.br-active,
|
||||
.br-theme-bars-1to10 .br-widget a.br-selected {
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
.br-theme-bars-1to10 .br-widget .br-current-rating {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
.br-theme-bars-horizontal .br-widget {
|
||||
width: 120px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.br-theme-bars-horizontal .br-widget a {
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 5px;
|
||||
background-color: #fbedd9;
|
||||
margin: 1px;
|
||||
}
|
||||
.br-theme-bars-horizontal .br-widget a.br-active,
|
||||
.br-theme-bars-horizontal .br-widget a.br-selected {
|
||||
background-color: #EDB867;
|
||||
}
|
||||
.br-theme-bars-horizontal .br-widget .br-current-rating {
|
||||
width: 120px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 2;
|
||||
text-align: center;
|
||||
color: #EDB867;
|
||||
}
|
||||
.br-theme-bars-horizontal .br-readonly a {
|
||||
cursor: default;
|
||||
}
|
||||
.br-theme-bars-horizontal .br-readonly a.br-active,
|
||||
.br-theme-bars-horizontal .br-readonly a.br-selected {
|
||||
background-color: #f2cd95;
|
||||
}
|
||||
.br-theme-bars-horizontal .br-readonly .br-current-rating {
|
||||
color: #f2cd95;
|
||||
}
|
||||
@media print {
|
||||
.br-theme-bars-horizontal .br-widget a {
|
||||
border: 1px solid #b3b3b3;
|
||||
background: white;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.br-theme-bars-horizontal .br-widget a.br-active,
|
||||
.br-theme-bars-horizontal .br-widget a.br-selected {
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
.br-theme-bars-horizontal .br-widget .br-current-rating {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
.br-theme-bars-movie .br-widget {
|
||||
height: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.br-theme-bars-movie .br-widget a {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 8px;
|
||||
float: left;
|
||||
background-color: #bbcefb;
|
||||
margin: 1px;
|
||||
}
|
||||
.br-theme-bars-movie .br-widget a.br-active,
|
||||
.br-theme-bars-movie .br-widget a.br-selected {
|
||||
background-color: #4278F5;
|
||||
}
|
||||
.br-theme-bars-movie .br-widget .br-current-rating {
|
||||
clear: both;
|
||||
width: 240px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
padding: .5em 0;
|
||||
color: #4278F5;
|
||||
font-weight: 400;
|
||||
}
|
||||
.br-theme-bars-movie .br-readonly a {
|
||||
cursor: default;
|
||||
}
|
||||
.br-theme-bars-movie .br-readonly a.br-active,
|
||||
.br-theme-bars-movie .br-readonly a.br-selected {
|
||||
background-color: #729bf8;
|
||||
}
|
||||
.br-theme-bars-movie .br-readonly .br-current-rating {
|
||||
color: #729bf8;
|
||||
}
|
||||
@media print {
|
||||
.br-theme-bars-movie .br-widget a {
|
||||
border: 1px solid #b3b3b3;
|
||||
background: white;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.br-theme-bars-movie .br-widget a.br-active,
|
||||
.br-theme-bars-movie .br-widget a.br-selected {
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
.br-theme-bars-movie .br-widget .br-current-rating {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
.br-theme-bars-pill .br-widget {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.br-theme-bars-pill .br-widget a {
|
||||
padding: 7px 15px;
|
||||
background-color: #bef5e8;
|
||||
color: #50E3C2;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
line-height: 3;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
}
|
||||
.br-theme-bars-pill .br-widget a:first-child {
|
||||
-webkit-border-top-left-radius: 999px;
|
||||
-webkit-border-bottom-left-radius: 999px;
|
||||
-moz-border-radius-topleft: 999px;
|
||||
-moz-border-radius-bottomleft: 999px;
|
||||
border-top-left-radius: 999px;
|
||||
border-bottom-left-radius: 999px;
|
||||
}
|
||||
.br-theme-bars-pill .br-widget a:last-child {
|
||||
-webkit-border-top-right-radius: 999px;
|
||||
-webkit-border-bottom-right-radius: 999px;
|
||||
-moz-border-radius-topright: 999px;
|
||||
-moz-border-radius-bottomright: 999px;
|
||||
border-top-right-radius: 999px;
|
||||
border-bottom-right-radius: 999px;
|
||||
}
|
||||
.br-theme-bars-pill .br-widget a.br-active,
|
||||
.br-theme-bars-pill .br-widget a.br-selected {
|
||||
background-color: #50E3C2;
|
||||
color: white;
|
||||
}
|
||||
.br-theme-bars-pill .br-readonly a {
|
||||
cursor: default;
|
||||
}
|
||||
.br-theme-bars-pill .br-readonly a.br-active,
|
||||
.br-theme-bars-pill .br-readonly a.br-selected {
|
||||
background-color: #7cead1;
|
||||
}
|
||||
@media print {
|
||||
.br-theme-bars-pill .br-widget a {
|
||||
border: 1px solid #b3b3b3;
|
||||
border-left: none;
|
||||
background: white;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.br-theme-bars-pill .br-widget a.br-active,
|
||||
.br-theme-bars-pill .br-widget a.br-selected {
|
||||
border: 1px solid black;
|
||||
border-left: none;
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
.br-theme-bars-pill .br-widget a:first-child {
|
||||
border-left: 1px solid black;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.br-theme-bars-reversed .br-widget {
|
||||
height: 25px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.br-theme-bars-reversed .br-widget a {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
float: left;
|
||||
background-color: #bef5e8;
|
||||
margin: 1px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
color: #50E3C2;
|
||||
text-align: center;
|
||||
}
|
||||
.br-theme-bars-reversed .br-widget a.br-active,
|
||||
.br-theme-bars-reversed .br-widget a.br-selected {
|
||||
background-color: #50E3C2;
|
||||
color: white;
|
||||
}
|
||||
.br-theme-bars-reversed .br-widget .br-current-rating {
|
||||
line-height: 1.3;
|
||||
float: left;
|
||||
padding: 0 20px 0 20px;
|
||||
color: #50E3C2;
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.br-theme-bars-reversed .br-readonly a {
|
||||
cursor: default;
|
||||
}
|
||||
.br-theme-bars-reversed .br-readonly a.br-active,
|
||||
.br-theme-bars-reversed .br-readonly a.br-selected {
|
||||
background-color: #7cead1;
|
||||
}
|
||||
.br-theme-bars-reversed .br-readonly .br-current-rating {
|
||||
color: #7cead1;
|
||||
}
|
||||
@media print {
|
||||
.br-theme-bars-reversed .br-widget a {
|
||||
border: 1px solid #b3b3b3;
|
||||
background: white;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.br-theme-bars-reversed .br-widget a.br-active,
|
||||
.br-theme-bars-reversed .br-widget a.br-selected {
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
.br-theme-bars-reversed .br-widget .br-current-rating {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
.br-theme-bars-square .br-widget {
|
||||
height: 15px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.br-theme-bars-square .br-widget a {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
float: left;
|
||||
border: 2px solid #bbcefb;
|
||||
background-color: white;
|
||||
margin: 2px;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 2;
|
||||
text-align: center;
|
||||
color: #bbcefb;
|
||||
font-weight: 600;
|
||||
}
|
||||
.br-theme-bars-square .br-widget a.br-active,
|
||||
.br-theme-bars-square .br-widget a.br-selected {
|
||||
border: 2px solid #4278F5;
|
||||
color: #4278F5;
|
||||
}
|
||||
.br-theme-bars-square .br-widget .br-current-rating {
|
||||
clear: both;
|
||||
width: 330px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
padding: .5em 0;
|
||||
color: #646464;
|
||||
}
|
||||
.br-theme-bars-square .br-readonly a {
|
||||
cursor: default;
|
||||
}
|
||||
.br-theme-bars-square .br-readonly a.br-active,
|
||||
.br-theme-bars-square .br-readonly a.br-selected {
|
||||
border: 2px solid #729bf8;
|
||||
color: #729bf8;
|
||||
}
|
||||
@media print {
|
||||
.br-theme-bars-square .br-widget a {
|
||||
border: 2px solid #b3b3b3;
|
||||
color: #b3b3b3;
|
||||
}
|
||||
.br-theme-bars-square .br-widget a.br-active,
|
||||
.br-theme-bars-square .br-widget a.br-selected {
|
||||
border: 2px solid black;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
.br-theme-css-stars .br-widget {
|
||||
height: 28px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.br-theme-css-stars .br-widget a {
|
||||
text-decoration: none;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
float: left;
|
||||
font-size: 23px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.br-theme-css-stars .br-widget a:after {
|
||||
content: "\2605";
|
||||
color: #d2d2d2;
|
||||
}
|
||||
.br-theme-css-stars .br-widget a.br-active:after {
|
||||
color: #EDB867;
|
||||
}
|
||||
.br-theme-css-stars .br-widget a.br-selected:after {
|
||||
color: #EDB867;
|
||||
}
|
||||
.br-theme-css-stars .br-widget .br-current-rating {
|
||||
display: none;
|
||||
}
|
||||
.br-theme-css-stars .br-readonly a {
|
||||
cursor: default;
|
||||
}
|
||||
@media print {
|
||||
.br-theme-css-stars .br-widget a:after {
|
||||
content: "\2606";
|
||||
color: black;
|
||||
}
|
||||
.br-theme-css-stars .br-widget a.br-active:after,
|
||||
.br-theme-css-stars .br-widget a.br-selected:after {
|
||||
content: "\2605";
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
.br-theme-fontawesome-stars-o .br-widget {
|
||||
height: 28px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.br-theme-fontawesome-stars-o .br-widget a {
|
||||
font: normal normal normal 20px/1 FontAwesome;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-decoration: none;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.br-theme-fontawesome-stars-o .br-widget a:after {
|
||||
content: '\f006';
|
||||
color: #d2d2d2;
|
||||
}
|
||||
.br-theme-fontawesome-stars-o .br-widget a.br-active:after {
|
||||
content: '\f005';
|
||||
color: #50E3C2;
|
||||
}
|
||||
.br-theme-fontawesome-stars-o .br-widget a.br-selected:after {
|
||||
content: '\f005';
|
||||
color: #50E3C2;
|
||||
}
|
||||
.br-theme-fontawesome-stars-o .br-widget a.br-fractional:after {
|
||||
content: '\f123';
|
||||
color: #50E3C2;
|
||||
}
|
||||
.br-theme-fontawesome-stars-o .br-widget .br-current-rating {
|
||||
display: none;
|
||||
}
|
||||
.br-theme-fontawesome-stars-o .br-readonly a {
|
||||
cursor: default;
|
||||
}
|
||||
.br-theme-fontawesome-stars-o .br-reverse a.br-fractional {
|
||||
display: inline-block;
|
||||
transform: scaleX(-1);
|
||||
-moz-transform: scaleX(-1);
|
||||
-webkit-transform: scaleX(-1);
|
||||
filter: FlipH;
|
||||
-ms-filter: "FlipH";
|
||||
}
|
||||
@media print {
|
||||
.br-theme-fontawesome-stars-o .br-widget a:after {
|
||||
content: '\f006';
|
||||
color: black;
|
||||
}
|
||||
.br-theme-fontawesome-stars-o .br-widget a.br-active:after,
|
||||
.br-theme-fontawesome-stars-o .br-widget a.br-selected:after {
|
||||
content: '\f005';
|
||||
color: black;
|
||||
}
|
||||
.br-theme-fontawesome-stars-o .br-widget a.br-fractional:after {
|
||||
content: '\f123';
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
.br-theme-fontawesome-stars .br-widget {
|
||||
height: 28px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.br-theme-fontawesome-stars .br-widget a {
|
||||
font: normal normal normal 20px/1 FontAwesome;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-decoration: none;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.br-theme-fontawesome-stars .br-widget a:after {
|
||||
content: '\f005';
|
||||
color: #d2d2d2;
|
||||
}
|
||||
.br-theme-fontawesome-stars .br-widget a.br-active:after {
|
||||
color: #EDB867;
|
||||
}
|
||||
.br-theme-fontawesome-stars .br-widget a.br-selected:after {
|
||||
color: #EDB867;
|
||||
}
|
||||
.br-theme-fontawesome-stars .br-widget .br-current-rating {
|
||||
display: none;
|
||||
}
|
||||
.br-theme-fontawesome-stars .br-readonly a {
|
||||
cursor: default;
|
||||
}
|
||||
@media print {
|
||||
.br-theme-fontawesome-stars .br-widget a:after {
|
||||
content: '\f006';
|
||||
color: black;
|
||||
}
|
||||
.br-theme-fontawesome-stars .br-widget a.br-active:after,
|
||||
.br-theme-fontawesome-stars .br-widget a.br-selected:after {
|
||||
content: '\f005';
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,585 @@
|
||||
/**
|
||||
* jQuery Bar Rating Plugin v1.2.2
|
||||
*
|
||||
* http://github.com/antennaio/jquery-bar-rating
|
||||
*
|
||||
* Copyright (c) 2012-2016 Kazik Pietruszewski
|
||||
*
|
||||
* This plugin is available under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
(function (factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof module === 'object' && module.exports) {
|
||||
// Node/CommonJS
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
// browser globals
|
||||
factory(jQuery);
|
||||
}
|
||||
}(function ($) {
|
||||
|
||||
var BarRating = (function() {
|
||||
|
||||
function BarRating() {
|
||||
var self = this;
|
||||
|
||||
// wrap element in a wrapper div
|
||||
var wrapElement = function() {
|
||||
var classes = ['br-wrapper'];
|
||||
|
||||
if (self.options.theme !== '') {
|
||||
classes.push('br-theme-' + self.options.theme);
|
||||
}
|
||||
|
||||
self.$elem.wrap($('<div />', {
|
||||
'class': classes.join(' ')
|
||||
}));
|
||||
};
|
||||
|
||||
// unwrap element
|
||||
var unwrapElement = function() {
|
||||
self.$elem.unwrap();
|
||||
};
|
||||
|
||||
// find option by value
|
||||
var findOption = function(value) {
|
||||
if ($.isNumeric(value)) {
|
||||
value = Math.floor(value);
|
||||
}
|
||||
|
||||
return $('option[value="' + value + '"]', self.$elem);
|
||||
};
|
||||
|
||||
// get initial option
|
||||
var getInitialOption = function() {
|
||||
var initialRating = self.options.initialRating;
|
||||
|
||||
if (!initialRating) {
|
||||
return $('option:selected', self.$elem);
|
||||
}
|
||||
|
||||
return findOption(initialRating);
|
||||
};
|
||||
|
||||
// get empty option
|
||||
var getEmptyOption = function() {
|
||||
var $emptyOpt = self.$elem.find('option[value="' + self.options.emptyValue + '"]');
|
||||
|
||||
if (!$emptyOpt.length && self.options.allowEmpty) {
|
||||
$emptyOpt = $('<option />', { 'value': self.options.emptyValue });
|
||||
|
||||
return $emptyOpt.prependTo(self.$elem);
|
||||
}
|
||||
|
||||
return $emptyOpt;
|
||||
};
|
||||
|
||||
// get data
|
||||
var getData = function(key) {
|
||||
var data = self.$elem.data('barrating');
|
||||
|
||||
if (typeof key !== 'undefined') {
|
||||
return data[key];
|
||||
}
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
// set data
|
||||
var setData = function(key, value) {
|
||||
if (value !== null && typeof value === 'object') {
|
||||
self.$elem.data('barrating', value);
|
||||
} else {
|
||||
self.$elem.data('barrating')[key] = value;
|
||||
}
|
||||
};
|
||||
|
||||
// save data on element
|
||||
var saveDataOnElement = function() {
|
||||
var $opt = getInitialOption();
|
||||
var $emptyOpt = getEmptyOption();
|
||||
|
||||
var value = $opt.val();
|
||||
var text = $opt.data('html') ? $opt.data('html') : $opt.text();
|
||||
|
||||
// if the allowEmpty option is not set let's check if empty option exists in the select field
|
||||
var allowEmpty = (self.options.allowEmpty !== null) ?
|
||||
self.options.allowEmpty :
|
||||
!!$emptyOpt.length;
|
||||
|
||||
var emptyValue = ($emptyOpt.length) ? $emptyOpt.val() : null;
|
||||
var emptyText = ($emptyOpt.length) ? $emptyOpt.text() : null;
|
||||
|
||||
setData(null, {
|
||||
userOptions: self.options,
|
||||
|
||||
// initial rating based on the OPTION value
|
||||
ratingValue: value,
|
||||
ratingText: text,
|
||||
|
||||
// rating will be restored by calling clear method
|
||||
originalRatingValue: value,
|
||||
originalRatingText: text,
|
||||
|
||||
// allow empty ratings?
|
||||
allowEmpty: allowEmpty,
|
||||
|
||||
// rating value and text of the empty OPTION
|
||||
emptyRatingValue: emptyValue,
|
||||
emptyRatingText: emptyText,
|
||||
|
||||
// read-only state
|
||||
readOnly: self.options.readonly,
|
||||
|
||||
// did the user already select a rating?
|
||||
ratingMade: false
|
||||
});
|
||||
};
|
||||
|
||||
// remove data on element
|
||||
var removeDataOnElement = function() {
|
||||
self.$elem.removeData('barrating');
|
||||
};
|
||||
|
||||
// return current rating text
|
||||
var ratingText = function() {
|
||||
return getData('ratingText');
|
||||
};
|
||||
|
||||
// return current rating value
|
||||
var ratingValue = function() {
|
||||
return getData('ratingValue');
|
||||
};
|
||||
|
||||
// build widget and return jQuery element
|
||||
var buildWidget = function() {
|
||||
var $w = $('<div />', { 'class': 'br-widget' });
|
||||
|
||||
// create A elements that will replace OPTIONs
|
||||
self.$elem.find('option').each(function() {
|
||||
var val, text, html, $a;
|
||||
|
||||
val = $(this).val();
|
||||
|
||||
// create ratings - but only if val is not defined as empty
|
||||
if (val !== getData('emptyRatingValue')) {
|
||||
text = $(this).text();
|
||||
html = $(this).data('html');
|
||||
if (html) { text = html; }
|
||||
|
||||
$a = $('<a />', {
|
||||
'href': '#',
|
||||
'data-rating-value': val,
|
||||
'data-rating-text': text,
|
||||
'html': (self.options.showValues) ? text : ''
|
||||
});
|
||||
|
||||
$w.append($a);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// append .br-current-rating div to the widget
|
||||
if (self.options.showSelectedRating) {
|
||||
$w.append($('<div />', { 'text': '', 'class': 'br-current-rating' }));
|
||||
}
|
||||
|
||||
// additional classes for the widget
|
||||
if (self.options.reverse) {
|
||||
$w.addClass('br-reverse');
|
||||
}
|
||||
|
||||
if (self.options.readonly) {
|
||||
$w.addClass('br-readonly');
|
||||
}
|
||||
|
||||
return $w;
|
||||
};
|
||||
|
||||
// return a jQuery function name depending on the 'reverse' setting
|
||||
var nextAllorPreviousAll = function() {
|
||||
if (getData('userOptions').reverse) {
|
||||
return 'nextAll';
|
||||
} else {
|
||||
return 'prevAll';
|
||||
}
|
||||
};
|
||||
|
||||
// set the value of the select field
|
||||
var setSelectFieldValue = function(value) {
|
||||
// change selected option
|
||||
findOption(value).prop('selected', true);
|
||||
|
||||
self.$elem.change();
|
||||
};
|
||||
|
||||
// reset select field
|
||||
var resetSelectField = function() {
|
||||
$('option', self.$elem).prop('selected', function() {
|
||||
return this.defaultSelected;
|
||||
});
|
||||
|
||||
self.$elem.change();
|
||||
};
|
||||
|
||||
// display the currently selected rating
|
||||
var showSelectedRating = function(text) {
|
||||
// text undefined?
|
||||
text = text ? text : ratingText();
|
||||
|
||||
// special case when the selected rating is defined as empty
|
||||
if (text == getData('emptyRatingText')) {
|
||||
text = '';
|
||||
}
|
||||
|
||||
// update .br-current-rating div
|
||||
if (self.options.showSelectedRating) {
|
||||
self.$elem.parent().find('.br-current-rating').text(text);
|
||||
}
|
||||
};
|
||||
|
||||
// return rounded fraction of a value (14.4 -> 40, 0.99 -> 90)
|
||||
var fraction = function(value) {
|
||||
return Math.round(((Math.floor(value * 10) / 10) % 1) * 100);
|
||||
};
|
||||
|
||||
// remove all classes from elements
|
||||
var resetStyle = function() {
|
||||
// remove all classes starting with br-*
|
||||
self.$widget.find('a').removeClass(function(index, classes) {
|
||||
return (classes.match(/(^|\s)br-\S+/g) || []).join(' ');
|
||||
});
|
||||
};
|
||||
|
||||
// apply style by setting classes on elements
|
||||
var applyStyle = function() {
|
||||
var $a = self.$widget.find('a[data-rating-value="' + ratingValue() + '"]');
|
||||
var initialRating = getData('userOptions').initialRating;
|
||||
var baseValue = $.isNumeric(ratingValue()) ? ratingValue() : 0;
|
||||
var f = fraction(initialRating);
|
||||
var $all, $fractional;
|
||||
|
||||
resetStyle();
|
||||
|
||||
// add classes
|
||||
$a.addClass('br-selected br-current')[nextAllorPreviousAll()]()
|
||||
.addClass('br-selected');
|
||||
|
||||
if (!getData('ratingMade') && $.isNumeric(initialRating)) {
|
||||
if ((initialRating <= baseValue) || !f) {
|
||||
return;
|
||||
}
|
||||
|
||||
$all = self.$widget.find('a');
|
||||
|
||||
$fractional = ($a.length) ?
|
||||
$a[(getData('userOptions').reverse) ? 'prev' : 'next']() :
|
||||
$all[(getData('userOptions').reverse) ? 'last' : 'first']();
|
||||
|
||||
$fractional.addClass('br-fractional');
|
||||
$fractional.addClass('br-fractional-' + f);
|
||||
}
|
||||
};
|
||||
|
||||
// check if the element is deselectable?
|
||||
var isDeselectable = function($element) {
|
||||
if (!getData('allowEmpty') || !getData('userOptions').deselectable) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return (ratingValue() == $element.attr('data-rating-value'));
|
||||
};
|
||||
|
||||
// handle click events
|
||||
var attachClickHandler = function($elements) {
|
||||
$elements.on('click.barrating', function(event) {
|
||||
var $a = $(this),
|
||||
options = getData('userOptions'),
|
||||
value,
|
||||
text;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
value = $a.attr('data-rating-value');
|
||||
text = $a.attr('data-rating-text');
|
||||
|
||||
// is current and deselectable?
|
||||
if (isDeselectable($a)) {
|
||||
value = getData('emptyRatingValue');
|
||||
text = getData('emptyRatingText');
|
||||
}
|
||||
|
||||
// remember selected rating
|
||||
setData('ratingValue', value);
|
||||
setData('ratingText', text);
|
||||
setData('ratingMade', true);
|
||||
|
||||
setSelectFieldValue(value);
|
||||
showSelectedRating(text);
|
||||
|
||||
applyStyle();
|
||||
|
||||
// onSelect callback
|
||||
options.onSelect.call(
|
||||
self,
|
||||
ratingValue(),
|
||||
ratingText(),
|
||||
event
|
||||
);
|
||||
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
// handle mouseenter events
|
||||
var attachMouseEnterHandler = function($elements) {
|
||||
$elements.on('mouseenter.barrating', function() {
|
||||
var $a = $(this);
|
||||
|
||||
resetStyle();
|
||||
|
||||
$a.addClass('br-active')[nextAllorPreviousAll()]()
|
||||
.addClass('br-active');
|
||||
|
||||
showSelectedRating($a.attr('data-rating-text'));
|
||||
});
|
||||
};
|
||||
|
||||
// handle mouseleave events
|
||||
var attachMouseLeaveHandler = function($elements) {
|
||||
self.$widget.on('mouseleave.barrating blur.barrating', function() {
|
||||
showSelectedRating();
|
||||
applyStyle();
|
||||
});
|
||||
};
|
||||
|
||||
// somewhat primitive way to remove 300ms click delay on touch devices
|
||||
// for a more advanced solution consider setting `fastClicks` option to false
|
||||
// and using a library such as fastclick (https://github.com/ftlabs/fastclick)
|
||||
var fastClicks = function($elements) {
|
||||
$elements.on('touchstart.barrating', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
$(this).click();
|
||||
});
|
||||
};
|
||||
|
||||
// disable clicks
|
||||
var disableClicks = function($elements) {
|
||||
$elements.on('click.barrating', function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
};
|
||||
|
||||
var attachHandlers = function($elements) {
|
||||
// attach click event handler
|
||||
attachClickHandler($elements);
|
||||
|
||||
if (self.options.hoverState) {
|
||||
// attach mouseenter event handler
|
||||
attachMouseEnterHandler($elements);
|
||||
|
||||
// attach mouseleave event handler
|
||||
attachMouseLeaveHandler($elements);
|
||||
}
|
||||
};
|
||||
|
||||
var detachHandlers = function($elements) {
|
||||
// remove event handlers in the ".barrating" namespace
|
||||
$elements.off('.barrating');
|
||||
};
|
||||
|
||||
var setupHandlers = function(readonly) {
|
||||
var $elements = self.$widget.find('a');
|
||||
|
||||
if (fastClicks) {
|
||||
fastClicks($elements);
|
||||
}
|
||||
|
||||
if (readonly) {
|
||||
detachHandlers($elements);
|
||||
disableClicks($elements);
|
||||
} else {
|
||||
attachHandlers($elements);
|
||||
}
|
||||
};
|
||||
|
||||
this.show = function() {
|
||||
// run only once
|
||||
if (getData()) return;
|
||||
|
||||
// wrap element
|
||||
wrapElement();
|
||||
|
||||
// save data
|
||||
saveDataOnElement();
|
||||
|
||||
// build & append widget to the DOM
|
||||
self.$widget = buildWidget();
|
||||
self.$widget.insertAfter(self.$elem);
|
||||
|
||||
applyStyle();
|
||||
|
||||
showSelectedRating();
|
||||
|
||||
setupHandlers(self.options.readonly);
|
||||
|
||||
// hide the select field
|
||||
self.$elem.hide();
|
||||
};
|
||||
|
||||
this.readonly = function(state) {
|
||||
if (typeof state !== 'boolean' || getData('readOnly') == state) return;
|
||||
|
||||
setupHandlers(state);
|
||||
setData('readOnly', state);
|
||||
self.$widget.toggleClass('br-readonly');
|
||||
};
|
||||
|
||||
this.set = function(value) {
|
||||
var options = getData('userOptions');
|
||||
|
||||
if (self.$elem.find('option[value="' + value + '"]').length === 0) return;
|
||||
|
||||
// set data
|
||||
setData('ratingValue', value);
|
||||
setData('ratingText', self.$elem.find('option[value="' + value + '"]').text());
|
||||
setData('ratingMade', true);
|
||||
|
||||
setSelectFieldValue(ratingValue());
|
||||
showSelectedRating(ratingText());
|
||||
|
||||
applyStyle();
|
||||
|
||||
// onSelect callback
|
||||
if (!options.silent) {
|
||||
options.onSelect.call(
|
||||
this,
|
||||
ratingValue(),
|
||||
ratingText()
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
this.clear = function() {
|
||||
var options = getData('userOptions');
|
||||
|
||||
// restore original data
|
||||
setData('ratingValue', getData('originalRatingValue'));
|
||||
setData('ratingText', getData('originalRatingText'));
|
||||
setData('ratingMade', false);
|
||||
|
||||
resetSelectField();
|
||||
showSelectedRating(ratingText());
|
||||
|
||||
applyStyle();
|
||||
|
||||
// onClear callback
|
||||
options.onClear.call(
|
||||
this,
|
||||
ratingValue(),
|
||||
ratingText()
|
||||
);
|
||||
};
|
||||
|
||||
this.destroy = function() {
|
||||
var value = ratingValue();
|
||||
var text = ratingText();
|
||||
var options = getData('userOptions');
|
||||
|
||||
// detach handlers
|
||||
detachHandlers(self.$widget.find('a'));
|
||||
|
||||
// remove widget
|
||||
self.$widget.remove();
|
||||
|
||||
// remove data
|
||||
removeDataOnElement();
|
||||
|
||||
// unwrap the element
|
||||
unwrapElement();
|
||||
|
||||
// show the element
|
||||
self.$elem.show();
|
||||
|
||||
// onDestroy callback
|
||||
options.onDestroy.call(
|
||||
this,
|
||||
value,
|
||||
text
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
BarRating.prototype.init = function (options, elem) {
|
||||
this.$elem = $(elem);
|
||||
this.options = $.extend({}, $.fn.barrating.defaults, options);
|
||||
|
||||
return this.options;
|
||||
};
|
||||
|
||||
return BarRating;
|
||||
})();
|
||||
|
||||
$.fn.barrating = function (method, options) {
|
||||
return this.each(function () {
|
||||
var plugin = new BarRating();
|
||||
|
||||
// plugin works with select fields
|
||||
if (!$(this).is('select')) {
|
||||
$.error('Sorry, this plugin only works with select fields.');
|
||||
}
|
||||
|
||||
// method supplied
|
||||
if (plugin.hasOwnProperty(method)) {
|
||||
plugin.init(options, this);
|
||||
if (method === 'show') {
|
||||
return plugin.show(options);
|
||||
} else {
|
||||
// plugin exists?
|
||||
if (plugin.$elem.data('barrating')) {
|
||||
plugin.$widget = $(this).next('.br-widget');
|
||||
return plugin[method](options);
|
||||
}
|
||||
}
|
||||
|
||||
// no method supplied or only options supplied
|
||||
} else if (typeof method === 'object' || !method) {
|
||||
options = method;
|
||||
plugin.init(options, this);
|
||||
return plugin.show();
|
||||
|
||||
} else {
|
||||
$.error('Method ' + method + ' does not exist on jQuery.barrating');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.barrating.defaults = {
|
||||
theme:'',
|
||||
initialRating:null, // initial rating
|
||||
allowEmpty:null, // allow empty ratings?
|
||||
emptyValue:'', // this is the expected value of the empty rating
|
||||
showValues:false, // display rating values on the bars?
|
||||
showSelectedRating:true, // append a div with a rating to the widget?
|
||||
deselectable:true, // allow to deselect ratings?
|
||||
reverse:false, // reverse the rating?
|
||||
readonly:false, // make the rating ready-only?
|
||||
fastClicks:true, // remove 300ms click delay on touch devices?
|
||||
hoverState:true, // change state on hover?
|
||||
silent:false, // supress callbacks when controlling ratings programatically
|
||||
onSelect:function (value, text, event) {
|
||||
}, // callback fired when a rating is selected
|
||||
onClear:function (value, text) {
|
||||
}, // callback fired when a rating is cleared
|
||||
onDestroy:function (value, text) {
|
||||
} // callback fired when a widget is destroyed
|
||||
};
|
||||
|
||||
$.fn.barrating.BarRating = BarRating;
|
||||
|
||||
}));
|
||||
Reference in New Issue
Block a user