mirror of
https://github.com/byReqz/webdriverinstaller.git
synced 2024-11-15 02:33:15 +00:00
401 lines
21 KiB
JavaScript
401 lines
21 KiB
JavaScript
|
/*
|
||
|
|
jquery.percentageloader.js
|
||
|
|
|
||
|
|
Copyright (c) 2012, Better2Web
|
||
|
|
All rights reserved.
|
||
|
|
|
||
|
|
This jQuery plugin is licensed under the Simplified BSD License. Please
|
||
|
|
see the file license.txt that was included with the plugin bundle.
|
||
|
|
|
||
|
|
*/
|
||
|
|
|
||
|
|
/*global jQuery */
|
||
|
|
|
||
|
|
(function ($) {
|
||
|
|
/* Strict mode for this plugin */
|
||
|
|
"use strict";
|
||
|
|
/*jslint browser: true */
|
||
|
|
|
||
|
|
/* Our spiral gradient data */
|
||
|
|
var imgdata = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAIAAABMXPacAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDM4RjdFNzQ5MzAyMTFFMUFFQTdENUVDNDUwOEI2RUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDM4RjdFNzU5MzAyMTFFMUFFQTdENUVDNDUwOEI2RUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMzhGN0U3MjkzMDIxMUUxQUVBN0Q1RUM0NTA4QjZFRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMzhGN0U3MzkzMDIxMUUxQUVBN0Q1RUM0NTA4QjZFRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv4BSzoAAA+OSURBVHja1F1bkutK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
|
||
|
|
gradient = new Image();
|
||
|
|
gradient.src = imgdata;
|
||
|
|
|
||
|
|
/** Percentage loader
|
||
|
|
* @param params Specify options in {}. May be on of width, height, progress or value.
|
||
|
|
*
|
||
|
|
* @example $("#myloader-container).percentageLoader({
|
||
|
|
width : 256, // width in pixels
|
||
|
|
height : 256, // height in pixels
|
||
|
|
progress: 0, // initialise progress bar position, within the range [0..1]
|
||
|
|
value: '0kb' // initialise text label to this value
|
||
|
|
});
|
||
|
|
*/
|
||
|
|
$.fn.percentageLoader = function (params) {
|
||
|
|
var settings, canvas, percentageText, valueText, items, i, item, selectors, s, ctx, progress,
|
||
|
|
value, cX, cY, lingrad, innerGrad, tubeGrad, innerRadius, innerBarRadius, outerBarRadius,
|
||
|
|
radius, startAngle, endAngle, counterClockwise, completeAngle, setProgress, setValue,
|
||
|
|
applyAngle, drawLoader, clipValue, outerDiv;
|
||
|
|
|
||
|
|
/* Specify default settings */
|
||
|
|
settings = {
|
||
|
|
width: 256,
|
||
|
|
height: 256,
|
||
|
|
progress: 0,
|
||
|
|
value: '0kb',
|
||
|
|
controllable: false
|
||
|
|
};
|
||
|
|
|
||
|
|
/* Override default settings with provided params, if any */
|
||
|
|
if (params !== undefined) {
|
||
|
|
$.extend(settings, params);
|
||
|
|
} else {
|
||
|
|
params = settings;
|
||
|
|
}
|
||
|
|
|
||
|
|
outerDiv = document.createElement('div');
|
||
|
|
outerDiv.style.width = settings.width + 'px';
|
||
|
|
outerDiv.style.height = settings.height + 'px';
|
||
|
|
outerDiv.style.position = 'relative';
|
||
|
|
|
||
|
|
$(this).append(outerDiv);
|
||
|
|
|
||
|
|
/* Create our canvas object */
|
||
|
|
canvas = document.createElement('canvas');
|
||
|
|
canvas.setAttribute('width', settings.width);
|
||
|
|
canvas.setAttribute('height', settings.height);
|
||
|
|
outerDiv.appendChild(canvas);
|
||
|
|
|
||
|
|
/* Create div elements we'll use for text. Drawing text is
|
||
|
|
* possible with canvas but it is tricky working with custom
|
||
|
|
* fonts as it is hard to guarantee when they become available
|
||
|
|
* with differences between browsers. DOM is a safer bet here */
|
||
|
|
percentageText = document.createElement('div');
|
||
|
|
percentageText.style.width = (settings.width.toString() - 2) + 'px';
|
||
|
|
percentageText.style.textAlign = 'center';
|
||
|
|
percentageText.style.height = '50px';
|
||
|
|
percentageText.style.left = 0;
|
||
|
|
percentageText.style.position = 'absolute';
|
||
|
|
|
||
|
|
valueText = document.createElement('div');
|
||
|
|
valueText.style.width = (settings.width - 2).toString() + 'px';
|
||
|
|
valueText.style.textAlign = 'center';
|
||
|
|
valueText.style.height = '0px';
|
||
|
|
valueText.style.overflow = 'hidden';
|
||
|
|
valueText.style.left = 0;
|
||
|
|
valueText.style.position = 'absolute';
|
||
|
|
|
||
|
|
/* Force text items to not allow selection */
|
||
|
|
items = [valueText, percentageText];
|
||
|
|
for (i = 0; i < items.length; i += 1) {
|
||
|
|
item = items[i];
|
||
|
|
selectors = [
|
||
|
|
'-webkit-user-select',
|
||
|
|
'-khtml-user-select',
|
||
|
|
'-moz-user-select',
|
||
|
|
'-o-user-select',
|
||
|
|
'user-select'];
|
||
|
|
|
||
|
|
for (s = 0; s < selectors.length; s += 1) {
|
||
|
|
$(item).css(selectors[s], 'none');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Add the new dom elements to the containing div */
|
||
|
|
outerDiv.appendChild(percentageText);
|
||
|
|
outerDiv.appendChild(valueText);
|
||
|
|
|
||
|
|
/* Get a reference to the context of our canvas object */
|
||
|
|
ctx = canvas.getContext("2d");
|
||
|
|
|
||
|
|
|
||
|
|
/* Set various initial values */
|
||
|
|
|
||
|
|
/* Centre point */
|
||
|
|
cX = (canvas.width / 2) - 1;
|
||
|
|
cY = (canvas.height / 2) - 1;
|
||
|
|
|
||
|
|
/* Create our linear gradient for the outer ring */
|
||
|
|
lingrad = ctx.createLinearGradient(cX, 0, cX, canvas.height);
|
||
|
|
lingrad.addColorStop(0, '#d6eeff');
|
||
|
|
lingrad.addColorStop(1, '#b6d8f0');
|
||
|
|
|
||
|
|
/* Create inner gradient for the outer ring */
|
||
|
|
innerGrad = ctx.createLinearGradient(cX, cX * 0.133333, cX, canvas.height - cX * 0.133333);
|
||
|
|
innerGrad.addColorStop(0, '#f9fcfe');
|
||
|
|
innerGrad.addColorStop(1, '#d9ebf7');
|
||
|
|
|
||
|
|
/* Tube gradient (background, not the spiral gradient) */
|
||
|
|
tubeGrad = ctx.createLinearGradient(cX, 0, cX, canvas.height);
|
||
|
|
tubeGrad.addColorStop(0, '#c1dff4');
|
||
|
|
tubeGrad.addColorStop(1, '#aacee6');
|
||
|
|
|
||
|
|
/* The inner circle is 2/3rds the size of the outer one */
|
||
|
|
innerRadius = cX * 0.6666;
|
||
|
|
/* Outer radius is the same as the width / 2, same as the centre x
|
||
|
|
* (but we leave a little room so the borders aren't truncated) */
|
||
|
|
radius = cX - 2;
|
||
|
|
|
||
|
|
/* Calculate the radii of the inner tube */
|
||
|
|
innerBarRadius = innerRadius + (cX * 0.06);
|
||
|
|
outerBarRadius = radius - (cX * 0.06);
|
||
|
|
|
||
|
|
/* Bottom left angle */
|
||
|
|
startAngle = 2.1707963267949;
|
||
|
|
/* Bottom right angle */
|
||
|
|
endAngle = 0.9707963267949 + (Math.PI * 2.0);
|
||
|
|
|
||
|
|
/* Nicer to pass counterClockwise / clockwise into canvas functions
|
||
|
|
* than true / false */
|
||
|
|
counterClockwise = false;
|
||
|
|
|
||
|
|
/* Borders should be 1px */
|
||
|
|
ctx.lineWidth = 1;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Little helper method for transforming points on a given
|
||
|
|
* angle and distance for code clarity
|
||
|
|
*/
|
||
|
|
applyAngle = function (point, angle, distance) {
|
||
|
|
return {
|
||
|
|
x : point.x + (Math.cos(angle) * distance),
|
||
|
|
y : point.y + (Math.sin(angle) * distance)
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* render the widget in its entirety.
|
||
|
|
*/
|
||
|
|
drawLoader = function () {
|
||
|
|
/* Clear canvas entirely */
|
||
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
|
|
||
|
|
/*** IMAGERY ***/
|
||
|
|
|
||
|
|
/* draw outer circle */
|
||
|
|
ctx.fillStyle = lingrad;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.strokeStyle = '#b2d5ed';
|
||
|
|
ctx.arc(cX, cY, radius, 0, Math.PI * 2, counterClockwise);
|
||
|
|
ctx.fill();
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
/* draw inner circle */
|
||
|
|
ctx.fillStyle = innerGrad;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(cX, cY, innerRadius, 0, Math.PI * 2, counterClockwise);
|
||
|
|
ctx.fill();
|
||
|
|
ctx.strokeStyle = '#b2d5edaa';
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
ctx.beginPath();
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Helper function - adds a path (without calls to beginPath or closePath)
|
||
|
|
* to the context which describes the inner tube. We use this for drawing
|
||
|
|
* the background of the inner tube (which is always at 100%) and the
|
||
|
|
* progress meter itself, which may vary from 0-100% */
|
||
|
|
function makeInnerTubePath(startAngle, endAngle) {
|
||
|
|
var centrePoint, startPoint, controlAngle, capLength, c1, c2, point1, point2;
|
||
|
|
centrePoint = {
|
||
|
|
x : cX,
|
||
|
|
y : cY
|
||
|
|
};
|
||
|
|
|
||
|
|
startPoint = applyAngle(centrePoint, startAngle, innerBarRadius);
|
||
|
|
|
||
|
|
ctx.moveTo(startPoint.x, startPoint.y);
|
||
|
|
|
||
|
|
point1 = applyAngle(centrePoint, endAngle, innerBarRadius);
|
||
|
|
point2 = applyAngle(centrePoint, endAngle, outerBarRadius);
|
||
|
|
|
||
|
|
controlAngle = endAngle + (3.142 / 2.0);
|
||
|
|
/* Cap length - a fifth of the canvas size minus 4 pixels */
|
||
|
|
capLength = (cX * 0.20) - 4;
|
||
|
|
|
||
|
|
c1 = applyAngle(point1, controlAngle, capLength);
|
||
|
|
c2 = applyAngle(point2, controlAngle, capLength);
|
||
|
|
|
||
|
|
ctx.arc(cX, cY, innerBarRadius, startAngle, endAngle, false);
|
||
|
|
ctx.bezierCurveTo(c1.x, c1.y, c2.x, c2.y, point2.x, point2.y);
|
||
|
|
ctx.arc(cX, cY, outerBarRadius, endAngle, startAngle, true);
|
||
|
|
|
||
|
|
point1 = applyAngle(centrePoint, startAngle, innerBarRadius);
|
||
|
|
point2 = applyAngle(centrePoint, startAngle, outerBarRadius);
|
||
|
|
|
||
|
|
controlAngle = startAngle - (3.142 / 2.0);
|
||
|
|
|
||
|
|
c1 = applyAngle(point2, controlAngle, capLength);
|
||
|
|
c2 = applyAngle(point1, controlAngle, capLength);
|
||
|
|
|
||
|
|
ctx.bezierCurveTo(c1.x, c1.y, c2.x, c2.y, point1.x, point1.y);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Background tube */
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.strokeStyle = '#bcd4e5';
|
||
|
|
makeInnerTubePath(startAngle, endAngle);
|
||
|
|
|
||
|
|
ctx.fillStyle = tubeGrad;
|
||
|
|
ctx.fill();
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
/* Calculate angles for the the progress metre */
|
||
|
|
completeAngle = startAngle + (progress * (endAngle - startAngle));
|
||
|
|
|
||
|
|
ctx.beginPath();
|
||
|
|
makeInnerTubePath(startAngle, completeAngle);
|
||
|
|
|
||
|
|
/* We're going to apply a clip so save the current state */
|
||
|
|
ctx.save();
|
||
|
|
/* Clip so we can apply the image gradient */
|
||
|
|
ctx.clip();
|
||
|
|
|
||
|
|
/* Draw the spiral gradient over the clipped area */
|
||
|
|
ctx.drawImage(gradient, 0, 0, canvas.width, canvas.height);
|
||
|
|
|
||
|
|
/* Undo the clip */
|
||
|
|
ctx.restore();
|
||
|
|
|
||
|
|
/* Draw the outline of the path */
|
||
|
|
ctx.beginPath();
|
||
|
|
makeInnerTubePath(startAngle, completeAngle);
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
/*** TEXT ***/
|
||
|
|
(function () {
|
||
|
|
var fontSize, string, smallSize, heightRemaining;
|
||
|
|
/* Calculate the size of the font based on the canvas size */
|
||
|
|
fontSize = cX / 2;
|
||
|
|
|
||
|
|
percentageText.style.top = ((settings.height / 2) - (fontSize / 2)).toString() + 'px';
|
||
|
|
percentageText.style.color = '#000';
|
||
|
|
percentageText.style.font = fontSize.toString() + 'px BebasNeueRegular';
|
||
|
|
percentageText.style.textShadow = '0 1px 1px #FFFFFF';
|
||
|
|
|
||
|
|
/* Calculate the text for the given percentage */
|
||
|
|
string = (progress * 100.0).toFixed(0) + '%';
|
||
|
|
|
||
|
|
percentageText.innerHTML = string;
|
||
|
|
|
||
|
|
/* Calculate font and placement of small 'value' text */
|
||
|
|
smallSize = cX / 5.5;
|
||
|
|
valueText.style.color = '#FFF';
|
||
|
|
valueText.style.font = smallSize.toString() + 'px BebasNeueRegular';
|
||
|
|
valueText.style.height = smallSize.toString() + 'px';
|
||
|
|
valueText.style.textShadow = 'None';
|
||
|
|
|
||
|
|
/* Ugly vertical align calculations - fit into bottom ring.
|
||
|
|
* The bottom ring occupes 1/6 of the diameter of the circle */
|
||
|
|
heightRemaining = (settings.height * 0.16666666) - smallSize;
|
||
|
|
valueText.style.top = ((settings.height * 0.8333333) + (heightRemaining / 4)).toString() + 'px';
|
||
|
|
}());
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Check the progress value and ensure it is within the correct bounds [0..1]
|
||
|
|
*/
|
||
|
|
clipValue = function () {
|
||
|
|
if (progress < 0) {
|
||
|
|
progress = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (progress > 1.0) {
|
||
|
|
progress = 1.0;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
/* Sets the current progress level of the loader
|
||
|
|
*
|
||
|
|
* @param value the progress value, from 0 to 1. Values outside this range
|
||
|
|
* will be clipped
|
||
|
|
*/
|
||
|
|
setProgress = function (value) {
|
||
|
|
/* Clip values to the range [0..1] */
|
||
|
|
progress = value;
|
||
|
|
clipValue();
|
||
|
|
drawLoader();
|
||
|
|
};
|
||
|
|
|
||
|
|
this.setProgress = setProgress;
|
||
|
|
|
||
|
|
setValue = function (val) {
|
||
|
|
value = val;
|
||
|
|
valueText.innerHTML = value;
|
||
|
|
};
|
||
|
|
|
||
|
|
this.setValue = setValue;
|
||
|
|
this.setValue(settings.value);
|
||
|
|
|
||
|
|
progress = settings.progress;
|
||
|
|
clipValue();
|
||
|
|
|
||
|
|
/* Do an initial draw */
|
||
|
|
drawLoader();
|
||
|
|
|
||
|
|
/* In controllable mode, add event handlers */
|
||
|
|
if (params.controllable === true) {
|
||
|
|
(function () {
|
||
|
|
var mouseDown, getDistance, adjustProgressWithXY;
|
||
|
|
getDistance = function (x, y) {
|
||
|
|
return Math.sqrt(Math.pow(x - cX, 2) + Math.pow(y - cY, 2));
|
||
|
|
};
|
||
|
|
|
||
|
|
mouseDown = false;
|
||
|
|
|
||
|
|
adjustProgressWithXY = function (x, y) {
|
||
|
|
/* within the bar, calculate angle of touch point */
|
||
|
|
var pX, pY, angle, startTouchAngle, range, posValue;
|
||
|
|
pX = x - cX;
|
||
|
|
pY = y - cY;
|
||
|
|
|
||
|
|
angle = Math.atan2(pY, pX);
|
||
|
|
if (angle > Math.PI / 2.0) {
|
||
|
|
angle -= (Math.PI * 2.0);
|
||
|
|
}
|
||
|
|
|
||
|
|
startTouchAngle = startAngle - (Math.PI * 2.0);
|
||
|
|
range = endAngle - startAngle;
|
||
|
|
posValue = (angle - startTouchAngle) / range;
|
||
|
|
setProgress(posValue);
|
||
|
|
|
||
|
|
if (params.onProgressUpdate) {
|
||
|
|
/* use the progress value as this will have been clipped
|
||
|
|
* to the correct range [0..1] after the call to setProgress
|
||
|
|
*/
|
||
|
|
params.onProgressUpdate(progress);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
$(outerDiv).mousedown(function (e) {
|
||
|
|
var offset, x, y, distance;
|
||
|
|
offset = $(this).offset();
|
||
|
|
x = e.pageX - offset.left;
|
||
|
|
y = e.pageY - offset.top;
|
||
|
|
|
||
|
|
distance = getDistance(x, y);
|
||
|
|
|
||
|
|
if (distance > innerRadius && distance < radius) {
|
||
|
|
mouseDown = true;
|
||
|
|
adjustProgressWithXY(x, y);
|
||
|
|
}
|
||
|
|
}).mouseup(function () {
|
||
|
|
mouseDown = false;
|
||
|
|
}).mousemove(function (e) {
|
||
|
|
var offset, x, y;
|
||
|
|
if (mouseDown) {
|
||
|
|
offset = $(outerDiv).offset();
|
||
|
|
x = e.pageX - offset.left;
|
||
|
|
y = e.pageY - offset.top;
|
||
|
|
adjustProgressWithXY(x, y);
|
||
|
|
}
|
||
|
|
}).mouseleave(function () {
|
||
|
|
mouseDown = false;
|
||
|
|
});
|
||
|
|
}());
|
||
|
|
}
|
||
|
|
return this;
|
||
|
|
};
|
||
|
|
}(jQuery));
|