1/** 2 * @package Liquid Meter 3 * @author Okler Themes 4 * @license Licensed under CC BY-NC-ND 5 * 6 * Copyright (c) 2014 7 * Inspired on dribble shot: 8 * http://dribbble.com/shots/1069484-Charging-Animation 9 */ 10 11(function($) { 12 13 'use strict'; 14 15 var defaultOptions = { 16 shape: 'circle', 17 color: '#82BF41', 18 background: '#4C4C52', 19 stroke: '#23282F', 20 textColor: '#FFFFFF', 21 fontFamily: 'Open Sans', 22 fontSize: '24px', 23 fontWeight: '600', 24 liquidOpacity: 0.9, 25 liquidPalette: ['#82BF41'], 26 speed: 3000, 27 animate: true 28 }; 29 30 var LiquidMeter = function(el, options) { 31 32 if (typeof Snap == 'undefined') { 33 throw 'Snap.js not found.'; 34 } 35 36 this.meter = $(el); 37 this.options = options; 38 this.options.text = this.meter.text(); 39 this.init(); 40 41 }; 42 43 LiquidMeter.prototype = { 44 45 init: function(el, options) { 46 47 this.wrapper = this.meter.parent('.liquid-meter'); 48 if ( !this.wrapper.get(0) ) { 49 var wrapper = $('<div>').attr({ 'class': 'liquid-meter' }); 50 this.wrapper = this.meter.wrap( wrapper ).parent(); 51 } 52 53 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 54 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); 55 svg.setAttribute('viewBox', '0 0 220 220'); 56 this.wrapper.prepend(svg); 57 58 this.svg = $(svg).attr({ 59 width: '100%', 60 height: '100%' 61 }); 62 63 this.frames = [ 64 [6, -6, -10, 6, 13, -10], // 1 65 [6, -5, -13, 4, 31, -5], // 2 66 [7, -5, -9, 0, 31, -5], // 3 67 [7, -5, -9, -6, 30, -6], // 4 68 [6, -10, -10, -10, 33, -4], // 5 69 [8, -4, -8, -13, 38, 7], // 6 70 [8, -8, -5, -15, 55, 11], // 7 71 [7, -19, -2, -16, 33, 16], // 8 72 [3, -23, -2, -16, 42, 21], // 9 73 [3, -22, 7, -18, 27, 21], // 10 74 [2, -26, 15, -18, 25, 20] , // 11 75 [-3, -23, 18, -18, 26, 19] , // 12 76 [-6, -40, 18, -18, 22, 22] , // 13 77 [-15, -16, 23, -13, 37, 22], // 14 78 [-15, -16, 23, -13, 37, 22], // 15 79 [-17, -16, 23, -10, 33, 22], // 16 80 [-18, -16, 23, -10, 35, 21], // 17 81 [-20, -12, 23, -5, 34, 20], // 18 82 [-22, -13, 20, -1, 35, 22], // 19 83 [-22, -13, 20, 5, 32, 21], // 20 84 [-21, -16, 19, 8, 34, 15], // 21 85 [-23, -16, 16, 10, 36, 9], // 22 86 [-22, -23, 13, 10, 48, 0], // 23 87 [-23, -20, 13, 8, 45, -6], // 24 88 [-20, -22, 7, 10, 44, -6], // 25 89 [-20, -22, 5, 10, 42, -7], // 26 90 [-18, -20, 0, 10, 41, -8], // 27 91 [-15, -22, -7, 10, 41, -8], // 28 92 [-11, -33, -8, 10, 41, -8], // 29 93 [-7, -36, -6, 10, 15, -11], // 30 94 [0, -39, -8, 10, 15, -11], // 31 95 [0, -36, -8, 7, 15, -11], // 32 96 ]; 97 98 this.paper = Snap(svg); 99 100 this.draw(); 101 this.observe(); 102 if ( this.options.animate ) { 103 this.animate(); 104 } else { 105 this.drawFrame(1); 106 } 107 108 this.wrapper.addClass( 'liquid-meter-loaded' ); 109 110 return this; 111 }, 112 113 draw: function() { 114 this.value = parseInt(this.meter.val() || this.meter.attr('value'), 10); 115 116 var paper = this.paper; 117 118 this.recipient = paper.circle(110, 110, 95); 119 120 var background = this.makeGradient(this.options.background); 121 122 this.recipient.attr({ 123 fill: background, 124 stroke: this.options.stroke, 125 strokeWidth: 15 126 }); 127 128 var mask = paper.circle(110, 110, 87); 129 mask.attr({ 130 fill: '#FFFFFF' 131 }); 132 133 this.liquid = paper.path(); 134 135 this.liquid.attr({ 136 id: 'front', 137 fill: this.options.color, 138 mask: mask, 139 stroke: lighten(this.options.color, 20), 140 strokeWidth: 1 141 }); 142 143 this.label = paper.text('50%', '50%', [this.value, '%']); 144 this.label.attr({ 145 fill: this.options.textColor, 146 dy: '.4em', 147 'font-family': this.options.fontFamily, 148 'font-size': this.options.fontSize, 149 'font-weight': this.options.fontWeight, 150 'text-anchor': 'middle', 151 stroke: this.options.textColor 152 }); 153 this.label.selectAll('tspan:nth-child(2)').attr({ 154 'font-size': '24', 155 stroke: 'none' 156 }); 157 158 return this; 159 160 }, 161 162 observe: function() { 163 var _self = this; 164 165 this.meter.on('change', function() { 166 _self.set( $(this).val() ); 167 }); 168 }, 169 170 set: function( val ) { 171 var value = parseInt( val, 10 ); 172 this.meter.val( value ); 173 this.value = value; 174 this.label.node.textContent = value + '%'; 175 }, 176 177 liquidPalette: function( val ) { 178 this.options.liquidPalette = val; 179 }, 180 181 background: function( val ) { 182 this.options.background = val; 183 }, 184 185 stroke: function( val ) { 186 this.options.stroke = val; 187 }, 188 189 color: function( val ) { 190 this.options.color = val; 191 192 this.liquid.attr({ 193 fill: this.options.color, 194 stroke: lighten(this.options.color, 20) 195 }); 196 }, 197 198 makeGradient: function(color) { 199 return this.paper.gradient(Snap.format('L(0, 0, 100, 100){color.top}-{color.bottom}', { 200 color: { 201 top: lighten(color, 6), 202 bottom: color 203 } 204 })); 205 }, 206 207 makePath: function(value, t1, x1, y1, t2, x2, y2) { 208 var top = ((100 - value) * 1.76) + 22; 209 return Snap.format('M0,{left} C{curve.x1},{curve.y1} {curve.x2},{curve.y2} 220,{right} L220,220 L0,220 z', { 210 left: top - (t1 || 0), 211 right: top - (t2 || 0), 212 curve: { 213 x1: x1 + top, 214 y1: y1 + top, 215 x2: x2 + top, 216 y2: y2 + top 217 } 218 }); 219 }, 220 221 drawFrame: function(number) { 222 var frame = this.frames[number - 1], 223 t1 = frame[0], 224 x1 = frame[1], 225 y1 = frame[2], 226 t2 = frame[3], 227 x2 = frame[4], 228 y2 = frame[5]; 229 this.liquid.attr({ d: this.makePath( this.value, t1, x1, y1, t2, x2, y2 )}); 230 }, 231 232 animate: function() { 233 var requestAnimationFrame = window.requestAnimationFrame || 234 window.webkitRequestAnimationFrame || 235 window.mozRequestAnimationFrame || 236 window.oRequestAnimationFrame || 237 window.msRequestAnimationFrame || 238 function (callback) { 239 setTimeout(callback, 0); 240 }, 241 frames = this.frames.length, 242 interval = this.options.speed / frames, 243 currentFrame = 1, 244 drawFrame = this.drawFrame.bind(this); 245 246 function loop() { 247 requestAnimationFrame(function() { 248 draw(); 249 }); 250 setTimeout(loop, interval); 251 } 252 253 function draw() { 254 drawFrame(currentFrame); 255 currentFrame++; 256 if (currentFrame >= frames) { 257 currentFrame = 1; 258 } 259 } 260 261 loop(); 262 263 return this; 264 } 265 266 }; 267 268 /** 269 * liquidMeter jQuery plugin - public method 270 * @param - {Object} options - Passed options extending defaultOptions 271 * @return - {Selector} - Array of elements 272 */ 273 $.fn.liquidMeter = function(options, value) { 274 var isSetter = (typeof options === 'string' && !!value); 275 276 if ( !isSetter ) { 277 options = $.extend({}, defaultOptions, options); 278 } 279 return this.map(function () { 280 281 // preventing against multiple instantiations 282 var instance = $(this).data('liquid-meter'); 283 if (!instance) { 284 instance = new LiquidMeter(this, options); 285 $(this).data('liquid-meter', instance); 286 } 287 if ( isSetter ) { 288 instance[ options ]( value ); 289 } 290 return instance; 291 292 }); 293 }; 294 295 /** 296 * Util function for lightening the colour with a % 297 * @param - string - colour with leading # 298 * @param - number - percentage to lighten by 299 */ 300 function lighten(color, percent) { 301 var n = parseInt(color.slice(1), 16), 302 a = Math.round(2.55 * percent || 0), 303 // Bitshift 16 bits to the left 304 r = (n >> 16) + a, 305 // Bitshift 8 bits to the left based on blue 306 b = (n >> 8 & 0x00FF) + a, 307 // 308 g = (n & 0x0000FF) + a; 309 // Calculate 310 return '#' + ( 311 0x1000000 + (r < 255 ? r < 1 ? 0 : r : 255) * 0x10000 + 312 (b < 255 ? b < 1 ? 0 : b : 255) * 0x100 + (g < 255 ? g < 1 ? 0 : g : 255) 313 ).toString(16).slice(1).toUpperCase(); 314 }; 315 316}(jQuery));
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.