Chart.bundle.min.js
5 years ago
bootstrap-switch.min.js
5 years ago
bootstrap.min.js
5 years ago
deactivationSurvey.js
5 years ago
jquery-ui.js
5 years ago
jquery.fileupload.js
5 years ago
jquery.iframe-transport.js
5 years ago
jquery.rateyo.js
5 years ago
jstree.checkbox.js
5 years ago
jstree.min.js
5 years ago
jstree.types.js
5 years ago
jstree.wholerow.js
5 years ago
less.min.js
5 years ago
main.js
5 years ago
popup.js
5 years ago
sgNoticeDismiss.js
5 years ago
sgbackup.js
5 years ago
sgcloud.js
5 years ago
sgdiscount.js
5 years ago
sglicense.js
5 years ago
sglogin.js
5 years ago
sgrequesthandler.js
5 years ago
sgrequesthandler.wordpress.js
5 years ago
sgschedule.js
5 years ago
sgsettings.js
5 years ago
jquery.rateyo.js
1106 lines
| 1 | /***** |
| 2 | * rateYo - v2.2.0 |
| 3 | * http://prrashi.github.io/rateyo/ |
| 4 | * Copyright (c) 2014 Prashanth Pamidi; Licensed MIT |
| 5 | *****/ |
| 6 | |
| 7 | (function ($) { |
| 8 | "use strict"; |
| 9 | |
| 10 | // The basic svg string required to generate stars |
| 11 | var BASICSTAR = "<?xml version=\"1.0\" encoding=\"utf-8\"?>"+ |
| 12 | "<svg version=\"1.1\""+ |
| 13 | "xmlns=\"http://www.w3.org/2000/svg\""+ |
| 14 | "viewBox=\"0 12.705 512 486.59\""+ |
| 15 | "x=\"0px\" y=\"0px\""+ |
| 16 | "xml:space=\"preserve\">"+ |
| 17 | "<polygon "+ |
| 18 | "points=\"256.814,12.705 317.205,198.566"+ |
| 19 | " 512.631,198.566 354.529,313.435 "+ |
| 20 | "414.918,499.295 256.814,384.427 "+ |
| 21 | "98.713,499.295 159.102,313.435 "+ |
| 22 | "1,198.566 196.426,198.566 \"/>"+ |
| 23 | "</svg>"; |
| 24 | |
| 25 | // The Default values of different options available in the Plugin |
| 26 | var DEFAULTS = { |
| 27 | |
| 28 | starWidth : "32px", |
| 29 | normalFill: "rgba(255, 255, 255, 0.2)", |
| 30 | ratedFill : "#f39c12", |
| 31 | numStars : 5, |
| 32 | maxValue : 5, |
| 33 | precision : 1, |
| 34 | rating : 0, |
| 35 | fullStar : false, |
| 36 | halfStar : false, |
| 37 | readOnly : false, |
| 38 | spacing : "0px", |
| 39 | rtl : false, |
| 40 | multiColor: null, |
| 41 | onInit : null, |
| 42 | onChange : null, |
| 43 | onSet : null, |
| 44 | starSvg : null |
| 45 | }; |
| 46 | |
| 47 | //Default colors for multi-color rating |
| 48 | var MULTICOLOR_OPTIONS = { |
| 49 | |
| 50 | startColor: "#c0392b", //red |
| 51 | endColor : "#f1c40f" //yellow |
| 52 | }; |
| 53 | |
| 54 | // http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser |
| 55 | function isMobileBrowser () { |
| 56 | var check = false; |
| 57 | /* jshint ignore:start */ |
| 58 | (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); |
| 59 | /* jshint ignore:end */ |
| 60 | return check; |
| 61 | } |
| 62 | |
| 63 | function checkPrecision (value, minValue, maxValue) { |
| 64 | |
| 65 | /* |
| 66 | * This function removes the unnecessary precision, at Min and Max Values |
| 67 | */ |
| 68 | |
| 69 | // Its like comparing 0.0 with 0, which is true |
| 70 | if (value === minValue) { |
| 71 | |
| 72 | value = minValue; |
| 73 | } |
| 74 | else if(value === maxValue) { |
| 75 | |
| 76 | value = maxValue; |
| 77 | } |
| 78 | |
| 79 | return value; |
| 80 | } |
| 81 | |
| 82 | function checkBounds (value, minValue, maxValue) { |
| 83 | |
| 84 | /* |
| 85 | * Check if the value is between min and max values, if not, throw an error |
| 86 | */ |
| 87 | |
| 88 | var isValid = value >= minValue && value <= maxValue; |
| 89 | |
| 90 | if(!isValid){ |
| 91 | |
| 92 | throw Error("Invalid Rating, expected value between "+ minValue + |
| 93 | " and " + maxValue); |
| 94 | } |
| 95 | |
| 96 | return value; |
| 97 | } |
| 98 | |
| 99 | function isDefined(value) { |
| 100 | |
| 101 | // Better way to check if a variable is defined or not |
| 102 | return typeof value !== "undefined"; |
| 103 | } |
| 104 | |
| 105 | // Regex to match Colors in Hex Format like #FF00FF |
| 106 | var hexRegex = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i; |
| 107 | |
| 108 | var hexToRGB = function (hex) { |
| 109 | |
| 110 | /* |
| 111 | * Extracts and returns the Red, Blue, Green Channel values, |
| 112 | * in the form of decimals |
| 113 | */ |
| 114 | |
| 115 | if (!hexRegex.test(hex)) { |
| 116 | |
| 117 | return null; |
| 118 | } |
| 119 | |
| 120 | var hexValues = hexRegex.exec(hex), |
| 121 | r = parseInt(hexValues[1], 16), |
| 122 | g = parseInt(hexValues[2], 16), |
| 123 | b = parseInt(hexValues[3], 16); |
| 124 | |
| 125 | return {r:r, g:g, b:b}; |
| 126 | }; |
| 127 | |
| 128 | function getChannelValue(startVal, endVal, percent) { |
| 129 | |
| 130 | /* |
| 131 | * Returns a value between `startVal` and `endVal` based on the percent |
| 132 | */ |
| 133 | |
| 134 | var newVal = (endVal - startVal)*(percent/100); |
| 135 | |
| 136 | newVal = Math.round(startVal + newVal).toString(16); |
| 137 | |
| 138 | if (newVal.length === 1) { |
| 139 | |
| 140 | newVal = "0" + newVal; |
| 141 | } |
| 142 | |
| 143 | return newVal; |
| 144 | } |
| 145 | |
| 146 | function getColor (startColor, endColor, percent) { |
| 147 | |
| 148 | /* |
| 149 | * Given the percentage( `percent` ) of `endColor` to be mixed |
| 150 | * with the `startColor`, returns the mixed color. |
| 151 | * Colors should be only in Hex Format |
| 152 | */ |
| 153 | |
| 154 | if (!startColor || !endColor) { |
| 155 | |
| 156 | return null; |
| 157 | } |
| 158 | |
| 159 | percent = isDefined(percent)? percent : 0; |
| 160 | |
| 161 | startColor = hexToRGB(startColor); |
| 162 | endColor = hexToRGB(endColor); |
| 163 | |
| 164 | var r = getChannelValue(startColor.r, endColor.r, percent), |
| 165 | b = getChannelValue(startColor.b, endColor.b, percent), |
| 166 | g = getChannelValue(startColor.g, endColor.g, percent); |
| 167 | |
| 168 | return "#" + r + g + b; |
| 169 | } |
| 170 | |
| 171 | function SGRateYo ($node, options) { |
| 172 | |
| 173 | /* |
| 174 | * The Contructor, whose instances are used by plugin itself |
| 175 | */ |
| 176 | |
| 177 | // Storing the HTML element as a property, for future access |
| 178 | this.node = $node.get(0); |
| 179 | |
| 180 | var that = this; |
| 181 | |
| 182 | // Remove any stuff that is present inside the container, and add the plugin class |
| 183 | $node.empty().addClass("jq-ry-container"); |
| 184 | |
| 185 | /* |
| 186 | * Basically the plugin displays the rating using two rows of stars lying one above |
| 187 | * the other, the row that is on the top represents the actual rating, and the one |
| 188 | * behind acts just like a background. |
| 189 | * |
| 190 | * `$groupWrapper`: is an element that wraps both the rows |
| 191 | * `$normalGroup`: is the container for row of stars thats behind and |
| 192 | * acts as background |
| 193 | * `$ratedGroup`: is the container for row of stars that display the actual rating. |
| 194 | * |
| 195 | * The rating is displayed by adjusting the width of `$ratedGroup` |
| 196 | */ |
| 197 | var $groupWrapper = $("<div/>").addClass("jq-ry-group-wrapper") |
| 198 | .appendTo($node); |
| 199 | |
| 200 | var $normalGroup = $("<div/>").addClass("jq-ry-normal-group") |
| 201 | .addClass("jq-ry-group") |
| 202 | .appendTo($groupWrapper); |
| 203 | |
| 204 | var $ratedGroup = $("<div/>").addClass("jq-ry-rated-group") |
| 205 | .addClass("jq-ry-group") |
| 206 | .appendTo($groupWrapper); |
| 207 | |
| 208 | /* |
| 209 | * Variable `step`: store the value of the rating for each star |
| 210 | * eg: if `maxValue` is 5 and `numStars` is 5, value of each star |
| 211 | * is 1. |
| 212 | * Variable `starWidth`: stores the decimal value of width of star in units of px |
| 213 | * Variable `percentOfStar`: stores the percentage of width each star takes w.r.t |
| 214 | * the container |
| 215 | * Variable `spacing`: stores the decimal value of the spacing between stars |
| 216 | * in the units of px |
| 217 | * Variable `percentOfSpacing`: stores the percentage of width of the spacing |
| 218 | * between stars w.r.t the container |
| 219 | */ |
| 220 | var step, starWidth, percentOfStar, spacing, |
| 221 | percentOfSpacing, containerWidth, minValue = 0; |
| 222 | |
| 223 | /* |
| 224 | * `currentRating` contains rating that is being displayed at the latest point of |
| 225 | * time. |
| 226 | * |
| 227 | * When ever you hover over the plugin UI, the rating value changes |
| 228 | * according to the place where you point the cursor, currentRating contains |
| 229 | * the current value of rating that is being shown in the UI |
| 230 | */ |
| 231 | var currentRating = options.rating; |
| 232 | |
| 233 | // A flag to store if the plugin is already being displayed in the UI |
| 234 | var isInitialized = false; |
| 235 | |
| 236 | function showRating (ratingVal) { |
| 237 | |
| 238 | /* |
| 239 | * The function is responsible for displaying the rating by changing |
| 240 | * the width of `$ratedGroup` |
| 241 | */ |
| 242 | |
| 243 | if (!isDefined(ratingVal)) { |
| 244 | |
| 245 | ratingVal = options.rating; |
| 246 | } |
| 247 | |
| 248 | // Storing the value that is being shown in `currentRating`. |
| 249 | currentRating = ratingVal; |
| 250 | |
| 251 | var numStarsToShow = ratingVal/step; |
| 252 | |
| 253 | // calculating the percentage of width of $ratedGroup with respect to its parent |
| 254 | var percent = numStarsToShow*percentOfStar; |
| 255 | |
| 256 | if (numStarsToShow > 1) { |
| 257 | |
| 258 | // adding the percentage of space that is taken by the gap the stars |
| 259 | percent += (Math.ceil(numStarsToShow) - 1)*percentOfSpacing; |
| 260 | } |
| 261 | |
| 262 | setRatedFill(options.ratedFill); |
| 263 | |
| 264 | percent = options.rtl ? 100 - percent : percent; |
| 265 | |
| 266 | $ratedGroup.css("width", percent + "%"); |
| 267 | } |
| 268 | |
| 269 | function setContainerWidth () { |
| 270 | |
| 271 | /* |
| 272 | * Set the width of the `this.node` based on the width of each star and |
| 273 | * the space between them |
| 274 | */ |
| 275 | |
| 276 | containerWidth = starWidth*options.numStars + spacing*(options.numStars - 1); |
| 277 | |
| 278 | percentOfStar = (starWidth/containerWidth)*100; |
| 279 | |
| 280 | percentOfSpacing = (spacing/containerWidth)*100; |
| 281 | |
| 282 | $node.width(containerWidth); |
| 283 | |
| 284 | showRating(); |
| 285 | } |
| 286 | |
| 287 | function setStarWidth (newWidth) { |
| 288 | |
| 289 | /* |
| 290 | * Set the width and height of each SVG star, called whenever one changes the |
| 291 | * `starWidth` option |
| 292 | */ |
| 293 | |
| 294 | // The width and height of the star should be the same |
| 295 | var starHeight = options.starWidth = newWidth; |
| 296 | |
| 297 | starWidth = window.parseFloat(options.starWidth.replace("px", "")); |
| 298 | |
| 299 | $normalGroup.find("svg") |
| 300 | .attr({width : options.starWidth, |
| 301 | height: starHeight}); |
| 302 | |
| 303 | $ratedGroup.find("svg") |
| 304 | .attr({width : options.starWidth, |
| 305 | height: starHeight}); |
| 306 | |
| 307 | setContainerWidth(); |
| 308 | |
| 309 | return $node; |
| 310 | } |
| 311 | |
| 312 | function setSpacing (newSpacing) { |
| 313 | |
| 314 | /* |
| 315 | * Set spacing between the SVG stars, called whenever one changes |
| 316 | * the `spacing` option |
| 317 | */ |
| 318 | |
| 319 | options.spacing = newSpacing; |
| 320 | |
| 321 | spacing = parseFloat(options.spacing.replace("px", "")); |
| 322 | |
| 323 | $normalGroup.find("svg:not(:first-child)") |
| 324 | .css({"margin-left": newSpacing}); |
| 325 | |
| 326 | $ratedGroup.find("svg:not(:first-child)") |
| 327 | .css({"margin-left": newSpacing}); |
| 328 | |
| 329 | setContainerWidth(); |
| 330 | |
| 331 | return $node; |
| 332 | } |
| 333 | |
| 334 | function setNormalFill (newFill) { |
| 335 | |
| 336 | /* |
| 337 | * Set the background fill of the Stars, called whenever one changes the |
| 338 | * `normalFill` option |
| 339 | */ |
| 340 | |
| 341 | options.normalFill = newFill; |
| 342 | |
| 343 | var $svgs = (options.rtl ? $ratedGroup : $normalGroup).find("svg"); |
| 344 | |
| 345 | $svgs.attr({fill: options.normalFill}); |
| 346 | |
| 347 | return $node; |
| 348 | } |
| 349 | |
| 350 | /* |
| 351 | * Store the recent `ratedFill` option in a variable |
| 352 | * so that if multiColor is unset, we can use the perviously set `ratedFill` |
| 353 | * from this variable |
| 354 | */ |
| 355 | var ratedFill = options.ratedFill; |
| 356 | |
| 357 | function setRatedFill (newFill) { |
| 358 | |
| 359 | /* |
| 360 | * Set ratedFill of the stars, called when one changes the `ratedFill` option |
| 361 | */ |
| 362 | |
| 363 | /* |
| 364 | * If `multiColor` option is set, `newFill` variable is dynamically set |
| 365 | * based on the rating, what ever set as parameter will be discarded |
| 366 | */ |
| 367 | if (options.multiColor) { |
| 368 | |
| 369 | var ratingDiff = currentRating - minValue, |
| 370 | percentCovered = (ratingDiff/options.maxValue)*100; |
| 371 | |
| 372 | var colorOpts = options.multiColor || {}, |
| 373 | startColor = colorOpts.startColor || MULTICOLOR_OPTIONS.startColor, |
| 374 | endColor = colorOpts.endColor || MULTICOLOR_OPTIONS.endColor; |
| 375 | |
| 376 | newFill = getColor(startColor, endColor, percentCovered); |
| 377 | } else { |
| 378 | |
| 379 | ratedFill = newFill; |
| 380 | } |
| 381 | |
| 382 | options.ratedFill = newFill; |
| 383 | |
| 384 | var $svgs = (options.rtl ? $normalGroup : $ratedGroup).find("svg"); |
| 385 | |
| 386 | $svgs.attr({fill: options.ratedFill}); |
| 387 | |
| 388 | return $node; |
| 389 | } |
| 390 | |
| 391 | function setRtl (newValue) { |
| 392 | |
| 393 | newValue = !!newValue; |
| 394 | |
| 395 | options.rtl = newValue; |
| 396 | |
| 397 | setNormalFill(options.normalFill); |
| 398 | showRating(); |
| 399 | } |
| 400 | |
| 401 | function setMultiColor (colorOptions) { |
| 402 | |
| 403 | /* |
| 404 | * called whenever one changes the `multiColor` option |
| 405 | */ |
| 406 | |
| 407 | options.multiColor = colorOptions; |
| 408 | |
| 409 | // set the recently set `ratedFill` option, if multiColor Options are unset |
| 410 | setRatedFill(colorOptions ? colorOptions : ratedFill); |
| 411 | } |
| 412 | |
| 413 | function setNumStars (newValue) { |
| 414 | |
| 415 | /* |
| 416 | * Set the number of stars to use to display the rating, called whenever one |
| 417 | * changes the `numStars` option |
| 418 | */ |
| 419 | |
| 420 | options.numStars = newValue; |
| 421 | |
| 422 | step = options.maxValue/options.numStars; |
| 423 | |
| 424 | $normalGroup.empty(); |
| 425 | $ratedGroup.empty(); |
| 426 | |
| 427 | for (var i=0; i<options.numStars; i++) { |
| 428 | |
| 429 | $normalGroup.append($(options.starSvg || BASICSTAR)); |
| 430 | $ratedGroup.append($(options.starSvg || BASICSTAR)); |
| 431 | } |
| 432 | |
| 433 | setStarWidth(options.starWidth); |
| 434 | setNormalFill(options.normalFill); |
| 435 | setSpacing(options.spacing); |
| 436 | |
| 437 | showRating(); |
| 438 | |
| 439 | return $node; |
| 440 | } |
| 441 | |
| 442 | function setMaxValue (newValue) { |
| 443 | |
| 444 | /* |
| 445 | * set the Maximum Value of rating to be allowed, called whenever |
| 446 | * one changes the `maxValue` option |
| 447 | */ |
| 448 | |
| 449 | options.maxValue = newValue; |
| 450 | |
| 451 | step = options.maxValue/options.numStars; |
| 452 | |
| 453 | if (options.rating > newValue) { |
| 454 | |
| 455 | setRating(newValue); |
| 456 | } |
| 457 | |
| 458 | showRating(); |
| 459 | |
| 460 | return $node; |
| 461 | } |
| 462 | |
| 463 | function setPrecision (newValue) { |
| 464 | |
| 465 | /* |
| 466 | * Set the precision of the rating value, called if one changes the |
| 467 | * `precision` option |
| 468 | */ |
| 469 | |
| 470 | options.precision = newValue; |
| 471 | |
| 472 | setRating(options.rating); |
| 473 | |
| 474 | return $node; |
| 475 | } |
| 476 | |
| 477 | function setHalfStar (newValue) { |
| 478 | |
| 479 | /* |
| 480 | * This function will be called if one changes the `halfStar` option |
| 481 | */ |
| 482 | |
| 483 | options.halfStar = newValue; |
| 484 | |
| 485 | return $node; |
| 486 | } |
| 487 | |
| 488 | function setFullStar (newValue) { |
| 489 | |
| 490 | /* |
| 491 | * This function will be called if one changes the `fullStar` option |
| 492 | */ |
| 493 | |
| 494 | options.fullStar = newValue; |
| 495 | |
| 496 | return $node; |
| 497 | } |
| 498 | |
| 499 | function round (value) { |
| 500 | |
| 501 | /* |
| 502 | * Rounds the value of rating if `halfStar` or `fullStar` options are chosen |
| 503 | */ |
| 504 | |
| 505 | var remainder = value%step, |
| 506 | halfStep = step/2, |
| 507 | isHalfStar = options.halfStar, |
| 508 | isFullStar = options.fullStar; |
| 509 | |
| 510 | if (!isFullStar && !isHalfStar) { |
| 511 | |
| 512 | return value; |
| 513 | } |
| 514 | |
| 515 | if (isFullStar || (isHalfStar && remainder > halfStep)) { |
| 516 | |
| 517 | value += step - remainder; |
| 518 | } else { |
| 519 | |
| 520 | value = value - remainder; |
| 521 | |
| 522 | if (remainder > 0) { |
| 523 | |
| 524 | value += halfStep; |
| 525 | } |
| 526 | } |
| 527 | |
| 528 | return value; |
| 529 | } |
| 530 | |
| 531 | function calculateRating (e) { |
| 532 | |
| 533 | /* |
| 534 | * Calculates and returns the rating based on the position of cursor w.r.t the |
| 535 | * plugin container |
| 536 | */ |
| 537 | |
| 538 | var position = $normalGroup.offset(), |
| 539 | nodeStartX = position.left, |
| 540 | nodeEndX = nodeStartX + $normalGroup.width(); |
| 541 | |
| 542 | var maxValue = options.maxValue; |
| 543 | |
| 544 | // The x-coordinate(position) of the mouse pointer w.r.t page |
| 545 | var pageX = e.pageX; |
| 546 | |
| 547 | var calculatedRating = 0; |
| 548 | |
| 549 | // If the mouse pointer is to the left of the container |
| 550 | if(pageX < nodeStartX) { |
| 551 | |
| 552 | calculatedRating = minValue; |
| 553 | }else if (pageX > nodeEndX) { // If the mouse pointer is right of the container |
| 554 | |
| 555 | calculatedRating = maxValue; |
| 556 | }else { // If the mouse pointer is inside the continer |
| 557 | |
| 558 | /* |
| 559 | * The fraction of width covered by the pointer w.r.t to the total width |
| 560 | * of the container. |
| 561 | */ |
| 562 | var calcPrcnt = ((pageX - nodeStartX)/(nodeEndX - nodeStartX)); |
| 563 | |
| 564 | if (spacing > 0) { |
| 565 | |
| 566 | /* |
| 567 | * If there is spacing between stars, take the percentage of width covered |
| 568 | * and subtract the percentage of width covered by stars and spacing, to find |
| 569 | * how many stars are covered, the number of stars covered is the rating |
| 570 | * |
| 571 | * TODO: I strongly feel that this logic can be improved!, Please help! |
| 572 | */ |
| 573 | calcPrcnt *= 100; |
| 574 | |
| 575 | var remPrcnt = calcPrcnt; |
| 576 | |
| 577 | while (remPrcnt > 0) { |
| 578 | |
| 579 | if (remPrcnt > percentOfStar) { |
| 580 | |
| 581 | calculatedRating += step; |
| 582 | remPrcnt -= (percentOfStar + percentOfSpacing); |
| 583 | } else { |
| 584 | |
| 585 | calculatedRating += remPrcnt/percentOfStar*step; |
| 586 | remPrcnt = 0; |
| 587 | } |
| 588 | } |
| 589 | } else { |
| 590 | |
| 591 | /* |
| 592 | * If there is not spacing between stars, the fraction of width covered per |
| 593 | * `maxValue` is the rating |
| 594 | */ |
| 595 | calculatedRating = calcPrcnt * (options.maxValue); |
| 596 | } |
| 597 | |
| 598 | // Round the rating if `halfStar` or `fullStar` options are chosen |
| 599 | calculatedRating = round(calculatedRating); |
| 600 | } |
| 601 | |
| 602 | if (options.rtl) { |
| 603 | |
| 604 | calculatedRating = maxValue - calculatedRating; |
| 605 | } |
| 606 | |
| 607 | return calculatedRating; |
| 608 | } |
| 609 | |
| 610 | function setReadOnly (newValue) { |
| 611 | |
| 612 | /* |
| 613 | * UnBinds mouse event handlers, called when whenever one changes the |
| 614 | * `readOnly` option |
| 615 | */ |
| 616 | |
| 617 | options.readOnly = newValue; |
| 618 | |
| 619 | $node.attr("readonly", true); |
| 620 | |
| 621 | unbindEvents(); |
| 622 | |
| 623 | if (!newValue) { |
| 624 | |
| 625 | $node.removeAttr("readonly"); |
| 626 | |
| 627 | bindEvents(); |
| 628 | } |
| 629 | |
| 630 | return $node; |
| 631 | } |
| 632 | |
| 633 | function setRating (newValue) { |
| 634 | |
| 635 | /* |
| 636 | * Sets the rating of the Plugin, Called when option `rating` is changed |
| 637 | * or, when `rating` method is called |
| 638 | */ |
| 639 | |
| 640 | var rating = newValue; |
| 641 | |
| 642 | var maxValue = options.maxValue; |
| 643 | |
| 644 | if (typeof rating === "string") { |
| 645 | |
| 646 | // If rating is given in percentage, maxValue should be 100 |
| 647 | if (rating[rating.length - 1] === "%") { |
| 648 | |
| 649 | rating = rating.substr(0, rating.length - 1); |
| 650 | maxValue = 100; |
| 651 | |
| 652 | setMaxValue(maxValue); |
| 653 | } |
| 654 | |
| 655 | rating = parseFloat(rating); |
| 656 | } |
| 657 | |
| 658 | checkBounds(rating, minValue, maxValue); |
| 659 | |
| 660 | rating = parseFloat(rating.toFixed(options.precision)); |
| 661 | |
| 662 | checkPrecision(parseFloat(rating), minValue, maxValue); |
| 663 | |
| 664 | options.rating = rating; |
| 665 | |
| 666 | showRating(); |
| 667 | |
| 668 | if (isInitialized) { |
| 669 | |
| 670 | $node.trigger("rateyo.set", {rating: rating}); |
| 671 | } |
| 672 | |
| 673 | return $node; |
| 674 | } |
| 675 | |
| 676 | function setOnInit (method) { |
| 677 | |
| 678 | /* |
| 679 | * set what method to be called on Initialization |
| 680 | */ |
| 681 | |
| 682 | options.onInit = method; |
| 683 | |
| 684 | return $node; |
| 685 | } |
| 686 | |
| 687 | function setOnSet (method) { |
| 688 | |
| 689 | /* |
| 690 | * set what method to be called when rating is set |
| 691 | */ |
| 692 | |
| 693 | options.onSet = method; |
| 694 | |
| 695 | return $node; |
| 696 | } |
| 697 | |
| 698 | function setOnChange (method) { |
| 699 | |
| 700 | /* |
| 701 | * set what method to be called rating in the UI is changed |
| 702 | */ |
| 703 | |
| 704 | options.onChange = method; |
| 705 | |
| 706 | return $node; |
| 707 | } |
| 708 | |
| 709 | this.rating = function (newValue) { |
| 710 | |
| 711 | /* |
| 712 | * rating getter/setter |
| 713 | */ |
| 714 | |
| 715 | if (!isDefined(newValue)) { |
| 716 | |
| 717 | return options.rating; |
| 718 | } |
| 719 | |
| 720 | setRating(newValue); |
| 721 | |
| 722 | return $node; |
| 723 | }; |
| 724 | |
| 725 | this.destroy = function () { |
| 726 | |
| 727 | /* |
| 728 | * Removes the Rating UI by clearing the content, and removing the custom classes |
| 729 | */ |
| 730 | |
| 731 | if (!options.readOnly) { |
| 732 | |
| 733 | unbindEvents(); |
| 734 | } |
| 735 | |
| 736 | SGRateYo.prototype.collection = deleteInstance($node.get(0), this.collection); |
| 737 | |
| 738 | $node.removeClass("jq-ry-container").children().remove(); |
| 739 | |
| 740 | return $node; |
| 741 | }; |
| 742 | |
| 743 | this.method = function (methodName) { |
| 744 | |
| 745 | /* |
| 746 | * Method to call the methods of RateYo Instance |
| 747 | */ |
| 748 | |
| 749 | if (!methodName) { |
| 750 | |
| 751 | throw Error("Method name not specified!"); |
| 752 | } |
| 753 | |
| 754 | if (!isDefined(this[methodName])) { |
| 755 | |
| 756 | throw Error("Method " + methodName + " doesn't exist!"); |
| 757 | } |
| 758 | |
| 759 | var args = Array.prototype.slice.apply(arguments, []), |
| 760 | params = args.slice(1), |
| 761 | method = this[methodName]; |
| 762 | |
| 763 | return method.apply(this, params); |
| 764 | }; |
| 765 | |
| 766 | this.option = function (optionName, param) { |
| 767 | |
| 768 | /* |
| 769 | * Method to get/set Options |
| 770 | */ |
| 771 | |
| 772 | if (!isDefined(optionName)) { |
| 773 | |
| 774 | return options; |
| 775 | } |
| 776 | |
| 777 | var method; |
| 778 | |
| 779 | switch (optionName) { |
| 780 | |
| 781 | case "starWidth": |
| 782 | |
| 783 | method = setStarWidth; |
| 784 | break; |
| 785 | case "numStars": |
| 786 | |
| 787 | method = setNumStars; |
| 788 | break; |
| 789 | case "normalFill": |
| 790 | |
| 791 | method = setNormalFill; |
| 792 | break; |
| 793 | case "ratedFill": |
| 794 | |
| 795 | method = setRatedFill; |
| 796 | break; |
| 797 | case "multiColor": |
| 798 | |
| 799 | method = setMultiColor; |
| 800 | break; |
| 801 | case "maxValue": |
| 802 | |
| 803 | method = setMaxValue; |
| 804 | break; |
| 805 | case "precision": |
| 806 | |
| 807 | method = setPrecision; |
| 808 | break; |
| 809 | case "rating": |
| 810 | |
| 811 | method = setRating; |
| 812 | break; |
| 813 | case "halfStar": |
| 814 | |
| 815 | method = setHalfStar; |
| 816 | break; |
| 817 | case "fullStar": |
| 818 | |
| 819 | method = setFullStar; |
| 820 | break; |
| 821 | case "readOnly": |
| 822 | |
| 823 | method = setReadOnly; |
| 824 | break; |
| 825 | case "spacing": |
| 826 | |
| 827 | method = setSpacing; |
| 828 | break; |
| 829 | case "rtl": |
| 830 | |
| 831 | method = setRtl; |
| 832 | break; |
| 833 | case "onInit": |
| 834 | |
| 835 | method = setOnInit; |
| 836 | break; |
| 837 | case "onSet": |
| 838 | |
| 839 | method = setOnSet; |
| 840 | break; |
| 841 | case "onChange": |
| 842 | |
| 843 | method = setOnChange; |
| 844 | break; |
| 845 | default: |
| 846 | |
| 847 | throw Error("No such option as " + optionName); |
| 848 | } |
| 849 | |
| 850 | return isDefined(param) ? method(param) : options[optionName]; |
| 851 | }; |
| 852 | |
| 853 | function onMouseEnter (e) { |
| 854 | |
| 855 | /* |
| 856 | * If the Mouse Pointer is inside the container, calculate and show the rating |
| 857 | * in UI |
| 858 | */ |
| 859 | |
| 860 | var rating = calculateRating(e).toFixed(options.precision); |
| 861 | |
| 862 | var maxValue = options.maxValue; |
| 863 | |
| 864 | rating = checkPrecision(parseFloat(rating), minValue, maxValue); |
| 865 | |
| 866 | showRating(rating); |
| 867 | |
| 868 | $node.trigger("rateyo.change", {rating: rating}); |
| 869 | } |
| 870 | |
| 871 | function onMouseLeave () { |
| 872 | if (isMobileBrowser()) { |
| 873 | return; |
| 874 | } |
| 875 | |
| 876 | /* |
| 877 | * If mouse leaves, revert the rating in UI to previously set rating, |
| 878 | * when empty value is passed to showRating, it will take the previously set |
| 879 | * rating |
| 880 | */ |
| 881 | |
| 882 | showRating(); |
| 883 | |
| 884 | $node.trigger("rateyo.change", {rating: options.rating}); |
| 885 | } |
| 886 | |
| 887 | function onMouseClick (e) { |
| 888 | |
| 889 | /* |
| 890 | * On clicking the mouse inside the container, calculate and set the rating |
| 891 | */ |
| 892 | |
| 893 | var resultantRating = calculateRating(e).toFixed(options.precision); |
| 894 | resultantRating = parseFloat(resultantRating); |
| 895 | |
| 896 | that.rating(resultantRating); |
| 897 | } |
| 898 | |
| 899 | function onInit(e, data) { |
| 900 | |
| 901 | if(options.onInit && typeof options.onInit === "function") { |
| 902 | |
| 903 | /* jshint validthis:true */ |
| 904 | options.onInit.apply(this, [data.rating, that]); |
| 905 | } |
| 906 | } |
| 907 | |
| 908 | function onChange (e, data) { |
| 909 | |
| 910 | if(options.onChange && typeof options.onChange === "function") { |
| 911 | |
| 912 | /* jshint validthis:true */ |
| 913 | options.onChange.apply(this, [data.rating, that]); |
| 914 | } |
| 915 | } |
| 916 | |
| 917 | function onSet (e, data) { |
| 918 | |
| 919 | if(options.onSet && typeof options.onSet === "function") { |
| 920 | |
| 921 | /* jshint validthis:true */ |
| 922 | options.onSet.apply(this, [data.rating, that]); |
| 923 | } |
| 924 | } |
| 925 | |
| 926 | function bindEvents () { |
| 927 | |
| 928 | $node.on("mousemove", onMouseEnter) |
| 929 | .on("mouseenter", onMouseEnter) |
| 930 | .on("mouseleave", onMouseLeave) |
| 931 | .on("click", onMouseClick) |
| 932 | .on("rateyo.init", onInit) |
| 933 | .on("rateyo.change", onChange) |
| 934 | .on("rateyo.set", onSet); |
| 935 | } |
| 936 | |
| 937 | function unbindEvents () { |
| 938 | |
| 939 | $node.off("mousemove", onMouseEnter) |
| 940 | .off("mouseenter", onMouseEnter) |
| 941 | .off("mouseleave", onMouseLeave) |
| 942 | .off("click", onMouseClick) |
| 943 | .off("rateyo.init", onInit) |
| 944 | .off("rateyo.change", onChange) |
| 945 | .off("rateyo.set", onSet); |
| 946 | } |
| 947 | |
| 948 | setNumStars(options.numStars); |
| 949 | setReadOnly(options.readOnly); |
| 950 | |
| 951 | if (options.rtl) { |
| 952 | |
| 953 | setRtl(options.rtl); |
| 954 | } |
| 955 | |
| 956 | this.collection.push(this); |
| 957 | this.rating(options.rating, true); |
| 958 | |
| 959 | isInitialized = true; |
| 960 | $node.trigger("rateyo.init", {rating: options.rating}); |
| 961 | } |
| 962 | |
| 963 | SGRateYo.prototype.collection = []; |
| 964 | |
| 965 | function getInstance (node, collection) { |
| 966 | |
| 967 | /* |
| 968 | * Given a HTML element (node) and a collection of RateYo instances, |
| 969 | * this function will search through the collection and return the matched |
| 970 | * instance having the node |
| 971 | */ |
| 972 | |
| 973 | var instance; |
| 974 | |
| 975 | $.each(collection, function () { |
| 976 | |
| 977 | if(node === this.node){ |
| 978 | |
| 979 | instance = this; |
| 980 | return false; |
| 981 | } |
| 982 | }); |
| 983 | |
| 984 | return instance; |
| 985 | } |
| 986 | |
| 987 | function deleteInstance (node, collection) { |
| 988 | |
| 989 | /* |
| 990 | * Given a HTML element (node) and a collection of RateYo instances, |
| 991 | * this function will search through the collection and delete the |
| 992 | * instance having the node, and return the modified collection |
| 993 | */ |
| 994 | |
| 995 | $.each(collection, function (index) { |
| 996 | |
| 997 | if (node === this.node) { |
| 998 | |
| 999 | var firstPart = collection.slice(0, index), |
| 1000 | secondPart = collection.slice(index+1, collection.length); |
| 1001 | |
| 1002 | collection = firstPart.concat(secondPart); |
| 1003 | |
| 1004 | return false; |
| 1005 | } |
| 1006 | }); |
| 1007 | |
| 1008 | return collection; |
| 1009 | } |
| 1010 | |
| 1011 | function _rateYo (options) { |
| 1012 | |
| 1013 | var rateYoInstances = SGRateYo.prototype.collection; |
| 1014 | |
| 1015 | /* jshint validthis:true */ |
| 1016 | var $nodes = $(this); |
| 1017 | |
| 1018 | if($nodes.length === 0) { |
| 1019 | |
| 1020 | return $nodes; |
| 1021 | } |
| 1022 | |
| 1023 | var args = Array.prototype.slice.apply(arguments, []); |
| 1024 | |
| 1025 | if (args.length === 0) { |
| 1026 | |
| 1027 | //If args length is 0, Initialize the UI with default settings |
| 1028 | options = args[0] = {}; |
| 1029 | }else if (args.length === 1 && typeof args[0] === "object") { |
| 1030 | |
| 1031 | //If an Object is specified as first argument, it is considered as options |
| 1032 | options = args[0]; |
| 1033 | }else if (args.length >= 1 && typeof args[0] === "string") { |
| 1034 | |
| 1035 | /* |
| 1036 | * if there is only one argument, and if its a string, it is supposed to be a |
| 1037 | * method name, if more than one argument is specified, the remaining arguments |
| 1038 | * except the first argument, will be passed as a params to the specified method |
| 1039 | */ |
| 1040 | |
| 1041 | var methodName = args[0], |
| 1042 | params = args.slice(1); |
| 1043 | |
| 1044 | var result = []; |
| 1045 | |
| 1046 | $.each($nodes, function (i, node) { |
| 1047 | |
| 1048 | var existingInstance = getInstance(node, rateYoInstances); |
| 1049 | |
| 1050 | if(!existingInstance) { |
| 1051 | |
| 1052 | throw Error("Trying to set options before even initialization"); |
| 1053 | } |
| 1054 | |
| 1055 | var method = existingInstance[methodName]; |
| 1056 | |
| 1057 | if (!method) { |
| 1058 | |
| 1059 | throw Error("Method " + methodName + " does not exist!"); |
| 1060 | } |
| 1061 | |
| 1062 | var returnVal = method.apply(existingInstance, params); |
| 1063 | |
| 1064 | result.push(returnVal); |
| 1065 | }); |
| 1066 | |
| 1067 | /* |
| 1068 | * If the plugin in being called on only one jQuery Element, return only the |
| 1069 | * first value, to support chaining. |
| 1070 | */ |
| 1071 | result = result.length === 1? result[0]: result; |
| 1072 | |
| 1073 | return result; |
| 1074 | }else { |
| 1075 | |
| 1076 | throw Error("Invalid Arguments"); |
| 1077 | } |
| 1078 | |
| 1079 | /* |
| 1080 | * if only options are passed, extend default options, and if the plugin is not |
| 1081 | * initialized on a particular jQuery element, initalize RateYo on it |
| 1082 | */ |
| 1083 | options = $.extend({}, DEFAULTS, options); |
| 1084 | |
| 1085 | return $.each($nodes, function () { |
| 1086 | |
| 1087 | var existingInstance = getInstance(this, rateYoInstances); |
| 1088 | |
| 1089 | if (!existingInstance) { |
| 1090 | |
| 1091 | return new SGRateYo($(this), $.extend({}, options)); |
| 1092 | } |
| 1093 | }); |
| 1094 | } |
| 1095 | |
| 1096 | function rateYo () { |
| 1097 | |
| 1098 | /* jshint validthis:true */ |
| 1099 | return _rateYo.apply(this, Array.prototype.slice.apply(arguments, [])); |
| 1100 | } |
| 1101 | |
| 1102 | window.SGRateYo = SGRateYo; |
| 1103 | $.fn.rateYo = rateYo; |
| 1104 | |
| 1105 | }(window.jQuery)); |
| 1106 |