1"use strict"; 2 3(function ($) { 4 5 $.fn.circliful = function (options, callback) { 6 7 var settings = $.extend({ 8 // These are the defaults. 9 //startDegree: 0, 10 foregroundColor: "#3498DB", 11 backgroundColor: "#ccc", 12 pointColor: "none", 13 fillColor: 'none', 14 foregroundBorderWidth: 15, 15 backgroundBorderWidth: 15, 16 pointSize: 28.5, 17 fontColor: '#aaa', 18 percent: 75, 19 animation: 1, 20 animationStep: 5, 21 icon: 'none', 22 iconSize: '30', 23 iconColor: '#ccc', 24 iconPosition: 'top', 25 target: 0, 26 start: 0, 27 showPercent: 1, 28 percentageTextSize: 22, 29 textAdditionalCss: '', 30 targetPercent: 0, 31 targetTextSize: 17, 32 targetColor: '#2980B9', 33 text: null, 34 textStyle: null, 35 textColor: '#666', 36 multiPercentage: 0, 37 percentages: null, 38 textBelow: false, 39 noPercentageSign: false, 40 replacePercentageByText: null, 41 textX:115, 42 textY:100, 43 halfCircle: false 44 }, options); 45 46 return this.each(function () { 47 var circleContainer = $(this); 48 var percent = settings.percent; 49 var iconY = 83; 50 var iconX = 100; 51 var textY = settings.textX; 52 var textX = settings.textY; 53 var additionalCss; 54 var elements; 55 var icon; 56 var backgroundBorderWidth = settings.backgroundBorderWidth; 57 58 if(settings.halfCircle) { 59 if(settings.iconPosition == 'left') { 60 iconX = 80; 61 iconY = 100; 62 textX = 117; 63 textY = 100; 64 } else if(settings.halfCircle) { 65 iconY = 80; 66 textY = 100; 67 } 68 } else { 69 if (settings.iconPosition == 'bottom') { 70 iconY = 124; 71 textY = 95; 72 } else if (settings.iconPosition == 'left') { 73 iconX = 80; 74 iconY = 110; 75 textX = 117; 76 } else if (settings.iconPosition == 'middle') { 77 if (settings.multiPercentage == 1) { 78 if (typeof settings.percentages == "object") { 79 backgroundBorderWidth = 30; 80 } else { 81 iconY = 110; 82 elements = '<g stroke="' + (settings.backgroundColor != 'none' ? settings.backgroundColor : '#ccc') + '" ><line x1="133" y1="50" x2="140" y2="40" stroke-width="2" /></g>'; 83 elements += '<g stroke="' + (settings.backgroundColor != 'none' ? settings.backgroundColor : '#ccc') + '" ><line x1="140" y1="40" x2="200" y2="40" stroke-width="2" /></g>'; 84 textX = 228; 85 textY = 47; 86 } 87 } else { 88 iconY = 110; 89 elements = '<g stroke="' + (settings.backgroundColor != 'none' ? settings.backgroundColor : '#ccc') + '" ><line x1="133" y1="50" x2="140" y2="40" stroke-width="2" /></g>'; 90 elements += '<g stroke="' + (settings.backgroundColor != 'none' ? settings.backgroundColor : '#ccc') + '" ><line x1="140" y1="40" x2="200" y2="40" stroke-width="2" /></g>'; 91 textX = 175; 92 textY = 35; 93 } 94 } else if (settings.iconPosition == 'right') { 95 iconX = 120; 96 iconY = 110; 97 textX = 80; 98 } 99 } 100 101 if(settings.targetPercent > 0) { 102 textY = 95; 103 elements = '<g stroke="' + (settings.backgroundColor != 'none' ? settings.backgroundColor : '#ccc') + '" >
103<line x1="75" y1="101" x2="125" y2="101" stroke-width="1" /></g>'; 104 elements += '<text text-anchor="middle" x="' + textX + '" y="120" style="font-size: ' + settings.targetTextSize + 'px;" fill="' + settings.targetColor + '">' + settings.targetPercent + (settings.noPercentageSign && settings.replacePercentageByText == null ? '' : '%') + '</text>'; 105 elements += '<circle cx="100" cy="100" r="69" fill="none" stroke="' + settings.backgroundColor + '" stroke-width="3" stroke-dasharray="450" transform="rotate(-90,100,100)" />'; 106 elements += '<circle cx="100" cy="100" r="69" fill="none" stroke="' + settings.targetColor + '" stroke-width="3" stroke-dasharray="' + (360 / 100 * settings.targetPercent) + ', 20000" transform="rotate(-90,100,100)" />'; 107 } 108 109 if (settings.text != null){ 110 if(settings.halfCircle) { 111 if (settings.textBelow){ 112 elements += '<text text-anchor="middle" x="100" y="120" style="' + settings.textStyle + '" fill="' + settings.textColor + '">' + settings.text + '</text>'; 113 } 114 else if (settings.multiPercentage == 0){ 115 elements += '<text text-anchor="middle" x="100" y="115" style="' + settings.textStyle + '" fill="' + settings.textColor + '">' + settings.text + '</text>'; 116 } 117 else if(settings.multiPercentage == 1) { 118 elements += '<text text-anchor="middle" x="228" y="65" style="' + settings.textStyle + '" fill="' + settings.textColor + '">' + settings.text + '</text>'; 119 } 120 } else { 121 if (settings.textBelow){ 122 elements += '<text text-anchor="middle" x="100" y="190" style="' + settings.textStyle + '" fill="' + settings.textColor + '">' + settings.text + '</text>'; 123 } 124 else if (settings.multiPercentage == 0){ 125 elements += '<text text-anchor="middle" x="100" y="115" style="' + settings.textStyle + '" fill="' + settings.textColor + '">' + settings.text + '</text>'; 126 } 127 else if(settings.multiPercentage == 1) { 128 elements += '<text text-anchor="middle" x="228" y="65" style="' + settings.textStyle + '" fill="' + settings.textColor + '">' + settings.text + '</text>'; 129 } 130 } 131 } 132 133 if (settings.icon != 'none') { 134 icon = '<text text-anchor="middle" x="' + iconX + '" y="' + iconY + '" class="icon" style="font-size: ' + settings.iconSize + 'px" fill="' + settings.iconColor + '">&#x' + settings.icon + '</text>'; 135 } 136 137 if(settings.halfCircle) { 138 var rotate = 'transform="rotate(-180,100,100)"'; 139 circleContainer 140 .addClass('svg-container') 141 .append( 142 $('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">' + 143 elements + 144 '<clipPath id="cut-off-bottom"> <rect x="100" y="0" width="100" height="200" /> </clipPath>' + 145 '<circle cx="100" cy="100" r="57" class="border" fill="' + settings.fillColor + '" stroke="' + settings.backgroundColor + '" stroke-width="' + backgroundBorderWidth + '" stroke-dasharray="360" clip-path="url(#cut-off-bottom)" transform="rotate(-90,100,100)" />' + 146 '<circle class="circle" cx="100" cy="100" r="57" class="border" fill="none" stroke="' + settings.foregroundColor + '" stroke-width="' + settings.foregroundBorderWidth + '" stroke-dasharray="0,20000" ' + rotate + ' />' + 147 '<circle cx="100" cy="100" r="' + settings.pointSize + '" fill="' + settings.pointColor + '" clip-path="url(#cut-off-bottom)" transform="rotate(-90,100,100)" />' + 148 icon + 149 '<text class="timer" text-anchor="middle" x="' + textX + '" y="' + textY + '" style="font-size: ' + settings.percentageTextSize + 'px; ' + additionalCss + ';' + settings.textAdditionalCss + '" fill="' + settings.fontColor + '">
149'+ (settings.replacePercentageByText == null ? 0 : settings.replacePercentageByText) + (settings.noPercentageSign || settings.replacePercentageByText != null ? '' : '%') + '</text>') 150 ); 151 } else { 152 circleContainer 153 .addClass('svg-container') 154 .append( 155 $('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">' + 156 elements + 157 '<circle cx="100" cy="100" r="57" class="border" fill="' + settings.fillColor + '" stroke="' + settings.backgroundColor + '" stroke-width="' + backgroundBorderWidth + '" stroke-dasharray="360" transform="rotate(-90,100,100)" />' + 158 '<circle class="circle" cx="100" cy="100" r="57" class="border" fill="none" stroke="' + settings.foregroundColor + '" stroke-width="' + settings.foregroundBorderWidth + '" stroke-dasharray="0,20000" transform="rotate(-90,100,100)" />' + 159 '<circle cx="100" cy="100" r="' + settings.pointSize + '" fill="' + settings.pointColor + '" />' + 160 icon + 161 '<text class="timer" text-anchor="middle" x="' + textX + '" y="' + textY + '" style="font-size: ' + settings.percentageTextSize + 'px; ' + additionalCss + ';' + settings.textAdditionalCss + '" fill="' + settings.fontColor + '">'+ (settings.replacePercentageByText == null ? 0 : settings.replacePercentageByText) + (settings.noPercentageSign || settings.replacePercentageByText != null ? '' : '%') + '</text>') 162 ); 163 } 164 165 var circle = circleContainer.find('.circle'); 166 var myTimer = circleContainer.find('.timer'); 167 var interval = 30; 168 var angle = 0; 169 var angleIncrement = settings.animationStep; 170 var last = 0; 171 var summary = 0; 172 var oneStep = 0; 173 var text = percent; 174 var calculateFill = (360 / 100 * percent); 175 176 if(settings.halfCircle) { 177 calculateFill = (360 / 100 * percent) / 2; 178 } 179 180 if(settings.replacePercentageByText != null) { 181 text = settings.replacePercentageByText; 182 } 183 184 if (settings.start > 0 && settings.target > 0) { 185 percent = settings.start / (settings.target / 100); 186 oneStep = settings.target / 100; 187 } 188 189 if (settings.animation == 1) { 190 var timer = window.setInterval(function () { 191 if ((angle) >= calculateFill) { 192 window.clearInterval(timer); 193 last = 1; 194 if(typeof callback == 'function') 195 { 196 callback.call(this); 197 } 198 } else { 199 angle += angleIncrement; 200 summary += oneStep; 201 } 202 203 if (angle / 3.6 >= percent && last == 1) { 204 angle = 3.6 * percent; 205 } 206 207 if (summary > settings.target && last == 1) { 208 summary = settings.target; 209 } 210 211 if(settings.replacePercentageByText == null) { 212 if(settings.halfCircle) { 213 text = parseInt((100 * angle / 360) * 2); 214 } else { 215 text = parseInt((100 * angle / 360)); 216 } 217 } 218 219 circle 220 .attr("stroke-dasharray", angle + ", 20000"); 221 222 if (settings.showPercent == 1) { 223 myTimer 224 .text(text + (settings.noPercentageSign || settings.replacePercentageByText != null ? '' : '%')); 225 } else { 226 myTimer 227 .text(summary); 228 } 229 230 }.bind(circle), interval); 231 } else { 232 circle 233 .attr("stroke-dasharray", calculateFill + ", 20000"); 234 235 if (settings.showPercent == 1) { 236 myTimer 237 .text(text + (settings.noPercentageSign ? '' : '%')); 238 } else { 239 myTimer
240 .text(settings.target); 241 } 242 } 243 }); 244 } 245}(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.