vendor: 4,411 bytes, lines 1-155
1/* 2 * jQuery StarRatingSvg v1.2.0 3 * 4 * http://github.com/nashio/star-rating-svg 5 * Author: Ignacio Chavez 6 * [email protected] 7 * Licensed under MIT 8 */ 9 10;(function ( $, window, document, undefined ) { 11 12 'use strict'; 13 14 // Create the defaults once 15 var pluginName = 'starRating'; 16 var noop = function(){}; 17 var defaults = { 18 totalStars: 5, 19 useFullStars: false, 20 starShape: 'straight', 21 emptyColor: 'lightgray', 22 hoverColor: 'orange', 23 activeColor: 'gold', 24 ratedColor: 'crimson', 25 useGradient: true, 26 readOnly: false, 27 disableAfterRate: true, 28 baseUrl: false, 29 starGradient: { 30 start: '#FEF7CD', 31 end: '#FF9511' 32 }, 33 strokeWidth: 4, 34 strokeColor: 'black', 35 initialRating: 0, 36 starSize: 40, 37 callback: noop, 38 onHover: noop, 39 onLeave: noop 40 }; 41 42 // The actual plugin constructor 43 var Plugin = function( element, options ) { 44 var _rating; 45 var newRating; 46 var roundFn; 47 48 this.element = element; 49 this.$el = $(element); 50 this.settings = $.extend( {}, defaults, options ); 51 52 // grab rating if defined on the element 53 _rating = this.$el.data('rating') || this.settings.initialRating; 54 55 // round to the nearest half 56 roundFn = this.settings.forceRoundUp ? Math.ceil : Math.round; 57 newRating = (roundFn( _rating * 2 ) / 2).toFixed(1); 58 this._state = { 59 rating: newRating 60 }; 61 62 // create unique id for stars 63 this._uid = Math.floor( Math.random() * 999 ); 64 65 // override gradient if not used 66 if( !options.starGradient && !this.settings.useGradient ){ 67 this.settings.starGradient.start = this.settings.starGradient.end = this.settings.activeColor; 68 } 69 70 this._defaults = defaults; 71 this._name = pluginName; 72 this.init(); 73 }; 74 75 var methods = { 76 init: function () { 77 this.renderMarkup(); 78 this.addListeners(); 79 this.initRating(); 80 }, 81 82 addListeners: function(){ 83 if( this.settings.readOnly ){ return; } 84 this.$stars.on('mouseover', this.hoverRating.bind(this)); 85 this.$stars.on('mouseout', this.restoreState.bind(this)); 86 this.$stars.on('click', this.handleRating.bind(this)); 87 }, 88 89 // apply styles to hovered stars 90 hoverRating: function(e){ 91 var index = this.getIndex(e); 92 this.paintStars(index, 'hovered'); 93 this.settings.onHover(index + 1, this._state.rating, this.$el); 94 }, 95 96 // clicked on a rate, apply style and state 97 handleRating: function(e){ 98 var index = this.getIndex(e); 99 var rating = index + 1; 100 101 this.applyRating(rating, this.$el); 102 this.executeCallback( rating, this.$el ); 103 104 if(this.settings.disableAfterRate){ 105 this.$stars.off(); 106 } 107 }, 108 109 applyRating: function(rating){ 110 var index = rating - 1; 111 // paint selected and remove hovered color 112 this.paintStars(index, 'rated'); 113 this._state.rating = index + 1; 114 this._state.rated = true; 115 }, 116 117 restoreState: function(e){ 118 var index = this.getIndex(e); 119 var rating = this._state.rating || -1; 120 // determine star color depending on manually rated 121 var colorType = this._state.rated ? 'rated' : 'active'; 122 this.paintStars(rating - 1, colorType); 123 this.settings.onLeave(index + 1, this._state.rating, this.$el); 124 }, 125 126 getIndex: function(e){ 127 var $target = $(e.currentTarget); 128 var width = $target.width(); 129 var side = $(e.target).attr('data-side'); 130 var minRating = this.settings.minRating; 131 132 // hovered outside the star, calculate by pixel instead 133 side = (!side) ? this.getOffsetByPixel(e, $target, width) : side; 134 side = (this.settings.useFullStars) ? 'right' : side ; 135 136 // get index for half or whole star 137 var index = $target.index() - ((side === 'left') ? 0.5 : 0); 138 139 // pointer is way to the left, rating should be none 140 index = ( index < 0.5 && (e.offsetX < width / 4) ) ? -1 : index; 141 142 // force minimum rating 143 index = ( minRating && minRating <= this.settings.totalStars && index < minRating ) ? minRating - 1 : index; 144 return index; 145 }, 146 147 getOffsetByPixel: function(e, $target, width){ 148 var leftX = e.pageX - $target.offset().left; 149 return ( leftX <= (width / 2) && !this.settings.useFullStars) ? 'left' : 'right'; 150 }, 151 152 initRating: function(){ 153 this.paintStars(this._state.rating - 1, 'active'); 154 }, 155
156 paintStars: function(endIndex, stateClass){ 157 var $polygonLeft; 158 var $polygonRight; 159 var leftClass; 160 var rightClass; 161 var s = this.settings; 162 163 $.each(this.$stars, function(index, star){ 164 $polygonLeft = $(star).find('[data-side="left"]'); 165 $polygonRight = $(star).find('[data-side="right"]'); 166 leftClass = rightClass = (index <= endIndex) ? stateClass : 'empty'; 167 168 // has another half rating, add half star 169 leftClass = ( index - endIndex === 0.5 ) ? stateClass : leftClass; 170 171 $polygonLeft.attr('class', 'svg-' + leftClass + '-' + this._uid); 172 $polygonRight.attr('class', 'svg-' + rightClass + '-' + this._uid); 173 174 // get color for level 175 var ratedColorsIndex = endIndex >= 0 ? Math.ceil(endIndex) : 0; 176 177 /*var ratedColor; 178 if (s.ratedColors && s.ratedColors.length && s.ratedColors[ratedColorsIndex]) { 179 ratedColor = s.ratedColors[ratedColorsIndex]; 180 } else { 181 ratedColor = this._defaults.ratedColor; 182 }*/ 183 var ratedColor; if (s.ratedColor && s.ratedColor.length ) { ratedColor = s.ratedColor; } else { ratedColor = this._defaults.ratedColor; } 184 185 // only override colors in rated stars and when rated number is valid 186 /*if (stateClass === 'rated' && endIndex > -1) { 187 if (index <= Math.ceil(endIndex) || (index < 1 && endIndex < 0)) { 188 $polygonLeft.attr('style', 'fill:'+ratedColor); 189 } 190 if (index <= endIndex) { 191 $polygonRight.attr('style', 'fill:'+ratedColor); 192 } 193 }*/ 194 195 if (stateClass === 'rated' && endIndex > -1) { 196 // limit to painting only to rated stars, and specific case for half star 197 if (index <= Math.ceil(endIndex) || (index < 1 && endIndex < 0)) { 198 $polygonLeft.attr('style', 'fill:'+ratedColor); 199 } 200 if (index <= endIndex) { 201 $polygonRight.attr('style', 'fill:'+ratedColor); 202 } 203 } else { 204 $polygonLeft.attr('style', 'stroke-opacity: 0'); 205 $polygonRight.attr('style', 'stroke-opacity: 0'); 206 } 207 208 }.bind(this)); 209 }, 210 211 renderMarkup: function () { 212 var s = this.settings; 213 var baseUrl = s.baseUrl ? location.href.split('#')[0] : ''; 214 215 // inject an svg manually to have control over attributes 216 var star = '<div class="jq-star" style="width:' + s.starSize+ 'px; height:' + s.starSize + 'px;"><svg version="1.0" class="jq-star-svg" shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg" ' + this.getSvgDimensions(s.starShape) + ' stroke-width:' + s.strokeWidth + 'px;" xml:space="preserve"><style type="text/css">.svg-empty-' + this._uid + '{fill:url(' + baseUrl + '#' + this._uid + '_SVGID_1_);}.svg-hovered-' + this._uid + '{fill:url(' + baseUrl + '#' + this._uid + '_SVGID_2_);}.svg-active-' + this._uid + '{fill:url(' + baseUrl + '#' + this._uid + '_SVGID_3_);}.svg-rated-' + this._uid + '{fill:' + s.ratedColor + ';}</style>' + 217 218 this.getLinearGradient(this._uid + '_SVGID_1_', s.emptyColor, s.emptyColor, s.starShape) + 219 this.getLinearGradient(this._uid + '_SVGID_2_', s.hoverColor, s.hoverColor, s.starShape) + 220 this.getLinearGradient(this._uid + '_SVGID_3_', s.starGradient.start, s.starGradient.end, s.starShape) + 221 this.getVectorPath(this._uid, { 222 starShape: s.starShape, 223 strokeWidth: s.strokeWidth, 224 strokeColor: s.strokeColor 225 } ) + 226 '</svg></div>'; 227 228 // inject svg markup 229 var starsMarkup = ''; 230 for( var i = 0; i < s.totalStars; i++){ 231 starsMarkup += star; 232 } 233 this.$el.append(starsMarkup); 234 this.$stars = this.$el.find('.jq-star'); 235 }, 236 237 getVectorPath: function(id, attrs){ 238 return (attrs.starShape === 'rounded') ? 239 this.getRoundedVectorPath(id, attrs) : this.getSpikeVectorPath(id, attrs); 240 }, 241 242 getSpikeVectorPath: function(id, attrs){ 243 return '<polygon data-side="center" class="svg-empty-' + id + '" points="281.1,129.8 364,55.7 255.5,46.8 214,-59 172.5,46.8 64,55.4 146.8,129.7 121.1,241 212.9,181.1 213.9,181 306.5,241 " style="fill: transparent; stroke: ' + attrs.strokeColor + ';" />' + 244 '<polygon data-side="left" class="svg-empty-' + id + '" points="281.1,129.8 364,55.7 255.5,46.8 214,-59 172.5,46.8 64,55.4 146.8,129.7 121.1,241 213.9,181.1 213.9,181 306.5,241 " style="stroke-opacity: 0;" />' + 245 '<polygon data-side="right" class="svg-empty-' + id + '" points="364,55.7 255.5,46.8 214,-59 213.9,181 306.5,241 281.1,129.8 " style="stroke-opacity: 0;" />'; 246 }, 247 248 getRoundedVectorPath: function(id, attrs){ 249 var fullPoints = 'M520.9,336.5c-3.8-11.8-14.2-20.5-26.5-22.2l-140.9-20.5l-63-127.7 c-5.5-11.2-16.8-18.2-29.3-18.2c-12.5,0-23.8,7-29.3,18.2l-63,127.7L28,314.2C15.7,316,5.4,324.7,1.6,336.5S1,361.3,9.9,370 l102,99.4l-24,140.3c-2.1,12.3,2.9,24.6,13,32c5.7,4.2,12.4,6.2,19.2,6.2c5.2,0,10.5-1.2,15.2-3.8l126-66.3l126,66.2 c4.8,2.6,10,3.8,15.2,3.8c6.8,0,13.5-2.1,19.2-6.2c10.1-7.3,15.1-19.7,13-32l-24-140.3l102-99.4 C521.6,361.3,524.8,348.3,520.9,336.5z'; 250 251 return '<path data-side="center" class="svg-empty-' + id + '" d="' + fullPoints + '" style="stroke: ' + attrs.strokeColor + '; fill: transparent; " /><path data-side="right" class="svg-empty-' + id + '" d="' + fullPoints + '" style="stroke-opacity: 0;" /><path data-side="left" class="svg-empty-' + id + '" d="M121,648c-7.3,0-14.1-2.2-19.8-6.4c-10.4-7.6-15.6-20.3-13.4-33l24-139.9l-101.6-99 c-9.1-8.9-12.4-22.4-8.6-34.5c3.9-12.1,14.6-21.1,27.2-23l140.4-20.4L232,164.6c5.7-11.6,17.3-18.8,30.2-16.8c0.6,0,1,0.4,1,1 v430.1c0,0.4-0.2,0.7-0.5,0.9l-126,66.3C132,646.6,126.6,648,121,648z" style="stroke: ' + attrs.strokeColor + '; stroke-opacity: 0;" />'; 252 }, 253 254 getSvgDimensions: function(starShape){ 255 return (starShape === 'rounded') ? 'width="550px" height="500.2px" viewBox="0 146.8 550 500.2" style="enable-background:new 0 0 550 500.2;' : 'x="0px" y="0px" width="305px" height="305px" viewBox="60 -62 309 309" style="enable-background:new 64 -59 305 305;'; 256 }, 257 258 getLinearGradient: function(id, startColor, endColor, starShape){ 259 var height = (starShape === 'rounded') ? 500 : 250; 260 return '<linearGradient id="' + id + '" gradientUnits="userSpaceOnUse" x1="0" y1="-50" x2="0" y2="' + height + '"><stop offset="0" style="stop-color:' + startColor + '"/><stop offset="1" style="stop-color:' + endColor + '"/> </linearGradient>'; 261 }, 262 263 executeCallback: function(rating, $el){ 264 var callback = this.settings.callback; 265 callback(rating, $el); 266 } 267 268 }; 269 270 var publicMethods = { 271 272 unload: function() { 273 var _name = 'plugin_' + pluginName; 274 var $el = $(this); 275 var $starSet = $el.data(_name).$stars; 276 $starSet.off(); 277 $el.removeData(_name).remove(); 278 }, 279 280 setRating: function(rating, round) { 281 var _name = 'plugin_' + pluginName; 282 var $el = $(this); 283 var $plugin = $el.data(_name); 284 if( rating > $plugin.settings.totalStars || rating < 0 ) { return; } 285 if( round ){ 286 rating = Math.round(rating); 287 } 288 $plugin.applyRating(rating); 289 }, 290 291 getRating: function() { 292 var _name = 'plugin_' + pluginName; 293 var $el = $(this); 294 var $starSet = $el.data(_name); 295 return $starSet._state.rating; 296 }, 297 298 resize: function(newSize) { 299 var _name = 'plugin_' + pluginName; 300 var $el = $(this); 301 var $starSet = $el.data(_name); 302 var $stars = $starSet.$stars; 303 304 if(newSize <= 1 || newSize > 200) { 305 console.error('star size out of bounds'); 306 return; 307 } 308 309 $stars = Array.prototype.slice.call($stars);
310 $stars.forEach(function(star){ 311 $(star).css({ 312 'width': newSize + 'px', 313 'height': newSize + 'px' 314 }); 315 }); 316 }, 317 318 setReadOnly: function(flag) { 319 var _name = 'plugin_' + pluginName; 320 var $el = $(this); 321 var $plugin = $el.data(_name); 322 if(flag === true){ 323 $plugin.$stars.off('mouseover mouseout click'); 324 } else { 325 $plugin.settings.readOnly = false; 326 $plugin.addListeners(); 327 } 328 } 329 330 }; 331 332 333 // Avoid Plugin.prototype conflicts 334 $.extend(Plugin.prototype, methods); 335 336 $.fn[ pluginName ] = function ( options ) { 337 338 // if options is a public method 339 if( !$.isPlainObject(options) ){ 340 if( publicMethods.hasOwnProperty(options) ){ 341 return publicMethods[options].apply(this, Array.prototype.slice.call(arguments, 1)); 342 } else { 343 $.error('Method '+ options +' does not exist on ' + pluginName + '.js'); 344 } 345 } 346 347 return this.each(function() { 348 // preventing against multiple instantiations 349 if ( !$.data( this, 'plugin_' + pluginName ) ) { 350 $.data( this, 'plugin_' + pluginName, new Plugin( this, options ) ); 351 } 352 }); 353 }; 354 355})( jQuery, window, document ); 356 357
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.