Add frontend assets and plugin bundles
Add the legacy frontend themes, scripts, and plugin assets required by the main SPOTA interfaces.
This commit is contained in:
Power BI Dev
154
assets/plugins/jQuery-Knob/README.md
Normal file
154
assets/plugins/jQuery-Knob/README.md
Normal file
@@ -0,0 +1,154 @@
|
||||
jQuery Knob
|
||||
=============
|
||||
|
||||
- canvas based ; no png or jpg sprites.
|
||||
- touch, mouse and mousewheel, keyboard events implemented.
|
||||
- downward compatible ; overloads an input element.
|
||||
|
||||
Example
|
||||
-------
|
||||
|
||||
<input type="text" value="75" class="dial">
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
$(".dial").knob();
|
||||
});
|
||||
</script>
|
||||
|
||||
Options
|
||||
-------
|
||||
|
||||
Options are provided as attributes 'data-option':
|
||||
|
||||
<input type="text" class="dial" data-min="-50" data-max="50">
|
||||
|
||||
... or in the "knob()" call :
|
||||
|
||||
$(".dial").knob({
|
||||
'min':-50
|
||||
,'max':50
|
||||
});
|
||||
|
||||
The following options are supported :
|
||||
|
||||
Behaviors :
|
||||
* min : min value | default=0.
|
||||
* max : max value | default=100.
|
||||
* step : step size | default=1.
|
||||
* angleOffset : starting angle in degrees | default=0.
|
||||
* angleArc : arc size in degrees | default=360.
|
||||
* stopper : stop at min & max on keydown/mousewheel | default=true.
|
||||
* readOnly : disable input and events | default=false.
|
||||
|
||||
UI :
|
||||
* cursor : display mode "cursor", cursor size could be changed passing a numeric value to the option, default width is used when passing boolean value "true" | default=gauge.
|
||||
* thickness : gauge thickness.
|
||||
* lineCap : gauge stroke endings. | default=butt, round=rounded line endings
|
||||
* width : dial width.
|
||||
* displayInput : default=true | false=hide input.
|
||||
* displayPrevious : default=false | true=displays the previous value with transparency.
|
||||
* fgColor : foreground color.
|
||||
* inputColor : input value (number) color.
|
||||
* font : font family.
|
||||
* fontWeight : font weight.
|
||||
* bgColor : background color.
|
||||
|
||||
Hooks
|
||||
-------
|
||||
|
||||
<script>
|
||||
$(".dial").knob({
|
||||
'release' : function (v) { /*make something*/ }
|
||||
});
|
||||
</script>
|
||||
|
||||
* 'release' : executed on release
|
||||
|
||||
Parameters :
|
||||
+ value : int, current value
|
||||
|
||||
* 'change' : executed at each change of the value
|
||||
|
||||
Parameters :
|
||||
+ value : int, current value
|
||||
|
||||
* 'draw' : when drawing the canvas
|
||||
|
||||
Context :
|
||||
- this.g : canvas context 2D (see Canvas documentation)
|
||||
- this.$ : jQuery wrapped element
|
||||
- this.o : options
|
||||
- this.i : input
|
||||
- ... console.log(this);
|
||||
|
||||
* 'cancel' : triggered on [esc] keydown
|
||||
|
||||
* 'error' : called if the browser doesn't support canvases and the plugin didn't initialize as a result
|
||||
|
||||
The scope (this) of each hook function is the current Knob instance (refer to the demo code).
|
||||
|
||||
Example
|
||||
-------
|
||||
|
||||
<input type="text" value="75" class="dial">
|
||||
|
||||
<script>
|
||||
$(".dial").knob({
|
||||
'change' : function (v) { console.log(v); }
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Dynamically configure
|
||||
-------
|
||||
|
||||
<script>
|
||||
$('.dial')
|
||||
.trigger(
|
||||
'configure',
|
||||
{
|
||||
"min":10,
|
||||
"max":40,
|
||||
"fgColor":"#FF0000",
|
||||
"skin":"tron",
|
||||
"cursor":true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
Set the value
|
||||
-------
|
||||
|
||||
<script>
|
||||
$('.dial')
|
||||
.val(27)
|
||||
.trigger('change');
|
||||
</script>
|
||||
|
||||
Supported browser
|
||||
-------
|
||||
|
||||
Tested on Chrome, Safari, Firefox, IE 9.0.
|
||||
|
||||
MIT License
|
||||
-------
|
||||
|
||||
Copyright (C) 2013 Anthony Terrien
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
312
assets/plugins/jQuery-Knob/index.html
Normal file
312
assets/plugins/jQuery-Knob/index.html
Normal file
@@ -0,0 +1,312 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Knob demo</title>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
|
||||
<script src="js/jquery.knob.js"></script>
|
||||
<script>
|
||||
$(function($) {
|
||||
|
||||
$(".knob").knob({
|
||||
change : function (value) {
|
||||
//console.log("change : " + value);
|
||||
},
|
||||
release : function (value) {
|
||||
//console.log(this.$.attr('value'));
|
||||
console.log("release : " + value);
|
||||
},
|
||||
cancel : function () {
|
||||
console.log("cancel : ", this);
|
||||
},
|
||||
draw : function () {
|
||||
|
||||
// "tron" case
|
||||
if(this.$.data('skin') == 'tron') {
|
||||
|
||||
var a = this.angle(this.cv) // Angle
|
||||
, sa = this.startAngle // Previous start angle
|
||||
, sat = this.startAngle // Start angle
|
||||
, ea // Previous end angle
|
||||
, eat = sat + a // End angle
|
||||
, r = 1;
|
||||
|
||||
this.g.lineWidth = this.lineWidth;
|
||||
|
||||
this.o.cursor
|
||||
&& (sat = eat - 0.3)
|
||||
&& (eat = eat + 0.3);
|
||||
|
||||
if (this.o.displayPrevious) {
|
||||
ea = this.startAngle + this.angle(this.v);
|
||||
this.o.cursor
|
||||
&& (sa = ea - 0.3)
|
||||
&& (ea = ea + 0.3);
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = this.pColor;
|
||||
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
|
||||
this.g.stroke();
|
||||
}
|
||||
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
|
||||
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
|
||||
this.g.stroke();
|
||||
|
||||
this.g.lineWidth = 2;
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = this.o.fgColor;
|
||||
this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
|
||||
this.g.stroke();
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Example of infinite knob, iPod click wheel
|
||||
var v, up=0,down=0,i=0
|
||||
,$idir = $("div.idir")
|
||||
,$ival = $("div.ival")
|
||||
,incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); }
|
||||
,decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); };
|
||||
$("input.infinite").knob(
|
||||
{
|
||||
min : 0
|
||||
, max : 20
|
||||
, stopper : false
|
||||
, change : function () {
|
||||
if(v > this.cv){
|
||||
if(up){
|
||||
decr();
|
||||
up=0;
|
||||
}else{up=1;down=0;}
|
||||
} else {
|
||||
if(v < this.cv){
|
||||
if(down){
|
||||
incr();
|
||||
down=0;
|
||||
}else{down=1;up=0;}
|
||||
}
|
||||
}
|
||||
v = this.cv;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body{
|
||||
padding: 0;
|
||||
margin: 0px 50px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
p{font-size: 30px; line-height: 30px}
|
||||
div.demo{text-align: center; width: 280px; float: left}
|
||||
div.demo > p{font-size: 20px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width:100%;font-size:40px;letter-spacing:-8px;line-height:40px;">
|
||||
<h1>jQuery Knob</h1>
|
||||
</div>
|
||||
<div>
|
||||
<p>Nice, downward compatible, touchable, jQuery dial. <a href="http://flattr.com/thing/674900/jQuery-Knob" target="_blank"><img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></p>
|
||||
<p style="font-size: 20px">* implemented interactions : mouse click and wheel mouse, keyboard (on focus) and fingers (touch events)</p>
|
||||
</div>
|
||||
<div class="demo">
|
||||
<p>× Disable display input</p>
|
||||
<pre>
|
||||
data-width="100"
|
||||
data-displayInput=false
|
||||
</pre>
|
||||
<input class="knob" data-width="100" data-displayInput=false value="35">
|
||||
</div>
|
||||
<div class="demo">
|
||||
<p>× 'cursor' mode</p>
|
||||
<pre>
|
||||
data-width="150"
|
||||
data-cursor=true
|
||||
data-thickness=.3
|
||||
data-fgColor="#222222"
|
||||
</pre>
|
||||
<input class="knob" data-width="150" data-cursor=true data-fgColor="#222222" data-thickness=.3 value="29">
|
||||
</div>
|
||||
<div class="demo" >
|
||||
<p>× Display previous value</p>
|
||||
<pre>
|
||||
data-displayPrevious=true
|
||||
data-min="-100"
|
||||
</pre>
|
||||
<input class="knob" data-width="200" data-min="-100" data-displayPrevious=true value="44">
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
<div class="demo">
|
||||
<p>× Angle offset</p>
|
||||
<pre>
|
||||
data-angleOffset=90
|
||||
data-linecap=round
|
||||
</pre>
|
||||
<input class="knob" data-angleOffset=90 data-linecap=round value="35">
|
||||
</div>
|
||||
<div class="demo">
|
||||
<p>× Angle offset and arc</p>
|
||||
<pre>
|
||||
data-fgColor="#66CC66"
|
||||
data-angleOffset=-125
|
||||
data-angleArc=250
|
||||
</pre>
|
||||
<input class="knob" data-angleOffset=-125 data-angleArc=250 data-fgColor="#66EE66" value="35">
|
||||
</div>
|
||||
<div class="demo" >
|
||||
<p>× 5-digit values, step 1000</p>
|
||||
<pre>
|
||||
data-step="1000"
|
||||
data-min="-15000"
|
||||
data-max="15000"
|
||||
data-displayPrevious=true
|
||||
</pre>
|
||||
<input class="knob" data-min="-15000" data-displayPrevious=true data-max="15000" data-step="1000" value="-11000">
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
<div style="text-align: center">
|
||||
<p style="font-size: 20px">× Overloaded 'draw' method</p>
|
||||
</div>
|
||||
<div style="background-color: #222; height: 340px">
|
||||
<div class="demo" style="background-color:#222; color:#FFF;">
|
||||
<pre>
|
||||
data-width="75"
|
||||
data-fgColor="#ffec03"
|
||||
data-skin="tron"
|
||||
data-thickness=".2"
|
||||
data-displayPrevious=true
|
||||
</pre>
|
||||
<input class="knob" data-width="75" data-displayPrevious=true data-fgColor="#ffec03" data-skin="tron" data-cursor=true value="75" data-thickness=".2">
|
||||
</div>
|
||||
<div class="demo" style="background-color:#222; color:#FFF;">
|
||||
<pre>
|
||||
data-width="150"
|
||||
data-fgColor="#ffec03"
|
||||
data-skin="tron"
|
||||
data-thickness=".2"
|
||||
data-displayPrevious=true
|
||||
</pre>
|
||||
<input class="knob" data-width="150" data-displayPrevious=true data-fgColor="#ffec03" data-skin="tron" data-thickness=".2" value="75">
|
||||
</div>
|
||||
<div class="demo" style="background-color:#222; color:#FFF;">
|
||||
<pre>
|
||||
data-width="150"
|
||||
data-fgColor="#C0ffff"
|
||||
data-skin="tron"
|
||||
data-thickness=".1"
|
||||
data-angleOffset="180"
|
||||
</pre>
|
||||
<input class="knob" data-width="150" data-angleOffset="180" data-fgColor="#C0ffff" data-skin="tron" data-thickness=".1" value="35">
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
<div class="demo" style="width:100%">
|
||||
<p>× Responsive</p>
|
||||
<pre>
|
||||
data-width="80%"
|
||||
</pre>
|
||||
<div style="width: 30%; border: 3px dashed; margin-bottom: 20px">
|
||||
<i>
|
||||
Current div width is 30% of window width.<br>
|
||||
Knob width is 80% of current div.<br>
|
||||
Knob width is 80% of 30% of window width.<br>
|
||||
Test resizing window.
|
||||
</i>
|
||||
<br>
|
||||
<br>
|
||||
<input class="knob" data-width="80%" value="35">
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
<script>
|
||||
function clock() {
|
||||
var $s = $(".second"),
|
||||
$m = $(".minute"),
|
||||
$h = $(".hour");
|
||||
d = new Date(),
|
||||
s = d.getSeconds(),
|
||||
m = d.getMinutes(),
|
||||
h = d.getHours();
|
||||
$s.val(s).trigger("change");
|
||||
$m.val(m).trigger("change");
|
||||
$h.val(h).trigger("change");
|
||||
setTimeout("clock()", 1000);
|
||||
}
|
||||
clock();
|
||||
</script>
|
||||
<div class="demo" style="color:#EEE;background:#222;height:420px;width:100%">
|
||||
<p>× Superpose (clock)</p>
|
||||
<div style="position:relative;width:350px;margin:auto">
|
||||
<div style="position:absolute;left:10px;top:10px">
|
||||
<input class="knob hour" data-min="0" data-max="24" data-bgColor="#333" data-fgColor="#ffec03" data-displayInput=false data-width="300" data-height="300" data-thickness=".3">
|
||||
</div>
|
||||
<div style="position:absolute;left:60px;top:60px">
|
||||
<input class="knob minute" data-min="0" data-max="60" data-bgColor="#333" data-displayInput=false data-width="200" data-height="200" data-thickness=".45">
|
||||
</div>
|
||||
<div style="position:absolute;left:110px;top:110px">
|
||||
<input class="knob second" data-min="0" data-max="60" data-bgColor="#333" data-fgColor="rgb(127, 255, 0)" data-displayInput=false data-width="100" data-height="100" data-thickness=".3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
<div class="demo">
|
||||
<p>× Readonly</p>
|
||||
<pre>
|
||||
data-thickness=".4"
|
||||
data-fgColor="chartreuse"
|
||||
data-readOnly=true
|
||||
</pre>
|
||||
<input class="knob" data-fgColor="chartreuse" data-thickness=".4" data-readOnly=true value="22">
|
||||
</div>
|
||||
<div class="demo">
|
||||
<p>× Dynamic</p>
|
||||
<pre>
|
||||
data-width="200"
|
||||
</pre>
|
||||
<input type="button" onclick="$('.knob-dyn').knob();" value="knobify!">
|
||||
<input type="text" class="knob-dyn" data-width="200" data-cursor=true value="56">
|
||||
<pre>
|
||||
data-width="50"
|
||||
data-cursor=true
|
||||
</pre>
|
||||
<input type="button" onclick="$('.knob-dyn2').knob();" value="knobify!">
|
||||
<input type="text" class="knob-dyn2" data-width="50" data-thickness=".4" value="56">
|
||||
</div>
|
||||
<div class="demo" style="height:440px;width:300px">
|
||||
<p>× Infinite || iPod click wheel</p>
|
||||
<div style="float:left;width:180px;height:320px;padding:20px;background-color:#EEEEEE;text-align:center;">
|
||||
<pre>
|
||||
data-width="150"
|
||||
data-cursor=true
|
||||
data-thickness=".5"
|
||||
data-fgColor="#AAAAAA"
|
||||
data-bgColor="#FFFFFF"
|
||||
data-displayInput="false"
|
||||
+ some code
|
||||
</pre>
|
||||
<input class="infinite" data-width="150" data-thickness=".5" data-fgColor="#AAAAAA" data-bgColor="#FFFFFF" data-displayInput="false" data-cursor=true>
|
||||
</div>
|
||||
<div style="float:left;margin-top:200px;">
|
||||
<div class="ival" style="width:80px;text-align:center;font-size:50px;color:#AAA">0</div>
|
||||
<div class="idir" style="width:80px;text-align:center;font-size:50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
<div id="big" class="demo" style="height:800px;width:100%">
|
||||
<p>× Big !</p>
|
||||
<pre>
|
||||
data-width="700"
|
||||
</pre>
|
||||
<input class="knob" data-min="-100" data-max="100" data-width="700" data-height="700" data-thickness=".3" data-cursor=true>
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
<div style="padding:30px; margin-top:30px;">
|
||||
<p style="font-size:20px;">jQuery Knob is © 2012 Anthony Terrien and dual licensed under the MIT or GPL licenses.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
751
assets/plugins/jQuery-Knob/js/jquery.knob.js
Normal file
751
assets/plugins/jQuery-Knob/js/jquery.knob.js
Normal file
@@ -0,0 +1,751 @@
|
||||
/*!jQuery Knob*/
|
||||
/**
|
||||
* Downward compatible, touchable dial
|
||||
*
|
||||
* Version: 1.2.0 (15/07/2012)
|
||||
* Requires: jQuery v1.7+
|
||||
*
|
||||
* Copyright (c) 2012 Anthony Terrien
|
||||
* Under MIT and GPL licenses:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
*
|
||||
* Thanks to vor, eskimoblood, spiffistan, FabrizioC
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
/**
|
||||
* Kontrol library
|
||||
*/
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Definition of globals and core
|
||||
*/
|
||||
var k = {}, // kontrol
|
||||
max = Math.max,
|
||||
min = Math.min;
|
||||
|
||||
k.c = {};
|
||||
k.c.d = $(document);
|
||||
k.c.t = function (e) {
|
||||
return e.originalEvent.touches.length - 1;
|
||||
};
|
||||
|
||||
/**
|
||||
* Kontrol Object
|
||||
*
|
||||
* Definition of an abstract UI control
|
||||
*
|
||||
* Each concrete component must call this one.
|
||||
* <code>
|
||||
* k.o.call(this);
|
||||
* </code>
|
||||
*/
|
||||
k.o = function () {
|
||||
var s = this;
|
||||
|
||||
this.o = null; // array of options
|
||||
this.$ = null; // jQuery wrapped element
|
||||
this.i = null; // mixed HTMLInputElement or array of HTMLInputElement
|
||||
this.g = null; // deprecated 2D graphics context for 'pre-rendering'
|
||||
this.v = null; // value ; mixed array or integer
|
||||
this.cv = null; // change value ; not commited value
|
||||
this.x = 0; // canvas x position
|
||||
this.y = 0; // canvas y position
|
||||
this.w = 0; // canvas width
|
||||
this.h = 0; // canvas height
|
||||
this.$c = null; // jQuery canvas element
|
||||
this.c = null; // rendered canvas context
|
||||
this.t = 0; // touches index
|
||||
this.isInit = false;
|
||||
this.fgColor = null; // main color
|
||||
this.pColor = null; // previous color
|
||||
this.dH = null; // draw hook
|
||||
this.cH = null; // change hook
|
||||
this.eH = null; // cancel hook
|
||||
this.rH = null; // release hook
|
||||
this.scale = 1; // scale factor
|
||||
this.relative = false;
|
||||
this.relativeWidth = false;
|
||||
this.relativeHeight = false;
|
||||
this.$div = null; // component div
|
||||
|
||||
this.run = function () {
|
||||
var cf = function (e, conf) {
|
||||
var k;
|
||||
for (k in conf) {
|
||||
s.o[k] = conf[k];
|
||||
}
|
||||
s.init();
|
||||
s._configure()
|
||||
._draw();
|
||||
};
|
||||
|
||||
if(this.$.data('kontroled')) return;
|
||||
this.$.data('kontroled', true);
|
||||
|
||||
this.extend();
|
||||
this.o = $.extend(
|
||||
{
|
||||
// Config
|
||||
min : this.$.data('min') || 0,
|
||||
max : this.$.data('max') || 100,
|
||||
stopper : true,
|
||||
readOnly : this.$.data('readonly'),
|
||||
|
||||
// UI
|
||||
cursor : (this.$.data('cursor') === true && 30)
|
||||
|| this.$.data('cursor')
|
||||
|| 0,
|
||||
thickness : this.$.data('thickness') || 0.35,
|
||||
lineCap : this.$.data('linecap') || 'butt',
|
||||
width : this.$.data('width') || 200,
|
||||
height : this.$.data('height') || 200,
|
||||
displayInput : this.$.data('displayinput') == null || this.$.data('displayinput'),
|
||||
displayPrevious : this.$.data('displayprevious'),
|
||||
fgColor : this.$.data('fgcolor') || '#87CEEB',
|
||||
inputColor: this.$.data('inputcolor') || this.$.data('fgcolor') || '#87CEEB',
|
||||
font: this.$.data('font') || 'Arial',
|
||||
fontWeight: this.$.data('font-weight') || 'bold',
|
||||
inline : false,
|
||||
step : this.$.data('step') || 1,
|
||||
|
||||
// Hooks
|
||||
draw : null, // function () {}
|
||||
change : null, // function (value) {}
|
||||
cancel : null, // function () {}
|
||||
release : null, // function (value) {}
|
||||
error : null // function () {}
|
||||
}, this.o
|
||||
);
|
||||
|
||||
// routing value
|
||||
if(this.$.is('fieldset')) {
|
||||
|
||||
// fieldset = array of integer
|
||||
this.v = {};
|
||||
this.i = this.$.find('input')
|
||||
this.i.each(function(k) {
|
||||
var $this = $(this);
|
||||
s.i[k] = $this;
|
||||
s.v[k] = $this.val();
|
||||
|
||||
$this.bind(
|
||||
'change'
|
||||
, function () {
|
||||
var val = {};
|
||||
val[k] = $this.val();
|
||||
s.val(val);
|
||||
}
|
||||
);
|
||||
});
|
||||
this.$.find('legend').remove();
|
||||
|
||||
} else {
|
||||
|
||||
// input = integer
|
||||
this.i = this.$;
|
||||
this.v = this.$.val();
|
||||
(this.v == '') && (this.v = this.o.min);
|
||||
|
||||
this.$.bind(
|
||||
'change'
|
||||
, function () {
|
||||
s.val(s._validate(s.$.val()));
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
(!this.o.displayInput) && this.$.hide();
|
||||
|
||||
// adds needed DOM elements (canvas, div)
|
||||
this.$c = $(document.createElement('canvas'));
|
||||
if (typeof G_vmlCanvasManager !== 'undefined') {
|
||||
G_vmlCanvasManager.initElement(this.$c[0]);
|
||||
}
|
||||
this.c = this.$c[0].getContext ? this.$c[0].getContext('2d') : null;
|
||||
if (!this.c) {
|
||||
this.o.error && this.o.error();
|
||||
return;
|
||||
}
|
||||
|
||||
// hdpi support
|
||||
this.scale = (window.devicePixelRatio || 1) /
|
||||
(
|
||||
this.c.webkitBackingStorePixelRatio ||
|
||||
this.c.mozBackingStorePixelRatio ||
|
||||
this.c.msBackingStorePixelRatio ||
|
||||
this.c.oBackingStorePixelRatio ||
|
||||
this.c.backingStorePixelRatio || 1
|
||||
);
|
||||
|
||||
// detects relative width / height
|
||||
this.relativeWidth = ((this.o.width % 1 !== 0)
|
||||
&& this.o.width.indexOf('%'));
|
||||
this.relativeHeight = ((this.o.height % 1 !== 0)
|
||||
&& this.o.height.indexOf('%'));
|
||||
|
||||
this.relative = (this.relativeWidth || this.relativeHeight);
|
||||
|
||||
// wraps all elements in a div
|
||||
this.$div = $('<div style="'
|
||||
+ (this.o.inline ? 'display:inline;' : '')
|
||||
+ '"></div>');
|
||||
|
||||
this.$.wrap(this.$div).before(this.$c);
|
||||
this.$div = this.$.parent();
|
||||
|
||||
// computes size and carves the component
|
||||
this._carve();
|
||||
|
||||
// prepares props for transaction
|
||||
if (this.v instanceof Object) {
|
||||
this.cv = {};
|
||||
this.copy(this.v, this.cv);
|
||||
} else {
|
||||
this.cv = this.v;
|
||||
}
|
||||
|
||||
// binds configure event
|
||||
this.$
|
||||
.bind("configure", cf)
|
||||
.parent()
|
||||
.bind("configure", cf);
|
||||
|
||||
// finalize init
|
||||
this._listen()
|
||||
._configure()
|
||||
._xy()
|
||||
.init();
|
||||
|
||||
this.isInit = true;
|
||||
|
||||
// the most important !
|
||||
this._draw();
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this._carve = function() {
|
||||
if(this.relative) {
|
||||
var w = this.relativeWidth
|
||||
? this.$div.parent().width()
|
||||
* parseInt(this.o.width) / 100
|
||||
: this.$div.parent().width(),
|
||||
h = this.relativeHeight
|
||||
? this.$div.parent().height()
|
||||
* parseInt(this.o.height) / 100
|
||||
: this.$div.parent().height();
|
||||
|
||||
// apply relative
|
||||
this.w = this.h = Math.min(w, h);
|
||||
} else {
|
||||
this.w = this.o.width;
|
||||
this.h = this.o.height;
|
||||
}
|
||||
|
||||
// finalize div
|
||||
this.$div.css({
|
||||
'width': this.w + 'px',
|
||||
'height': this.h + 'px'
|
||||
});
|
||||
|
||||
// finalize canvas with computed width
|
||||
this.$c.attr({
|
||||
width: this.w,
|
||||
height: this.h
|
||||
});
|
||||
|
||||
// scaling
|
||||
if (this.scale !== 1) {
|
||||
this.$c[0].width = this.$c[0].width * this.scale;
|
||||
this.$c[0].height = this.$c[0].height * this.scale;
|
||||
this.$c.width(this.w);
|
||||
this.$c.height(this.h);
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
this._draw = function () {
|
||||
|
||||
// canvas pre-rendering
|
||||
var d = true;
|
||||
|
||||
s.g = s.c;
|
||||
|
||||
s.clear();
|
||||
|
||||
s.dH
|
||||
&& (d = s.dH());
|
||||
|
||||
(d !== false) && s.draw();
|
||||
|
||||
};
|
||||
|
||||
this._touch = function (e) {
|
||||
|
||||
var touchMove = function (e) {
|
||||
|
||||
var v = s.xy2val(
|
||||
e.originalEvent.touches[s.t].pageX,
|
||||
e.originalEvent.touches[s.t].pageY
|
||||
);
|
||||
|
||||
if (v == s.cv) return;
|
||||
|
||||
if (
|
||||
s.cH
|
||||
&& (s.cH(v) === false)
|
||||
) return;
|
||||
|
||||
|
||||
s.change(s._validate(v));
|
||||
s._draw();
|
||||
};
|
||||
|
||||
// get touches index
|
||||
this.t = k.c.t(e);
|
||||
|
||||
// First touch
|
||||
touchMove(e);
|
||||
|
||||
// Touch events listeners
|
||||
k.c.d
|
||||
.bind("touchmove.k", touchMove)
|
||||
.bind(
|
||||
"touchend.k"
|
||||
, function () {
|
||||
k.c.d.unbind('touchmove.k touchend.k');
|
||||
|
||||
if (
|
||||
s.rH
|
||||
&& (s.rH(s.cv) === false)
|
||||
) return;
|
||||
|
||||
s.val(s.cv);
|
||||
}
|
||||
);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this._mouse = function (e) {
|
||||
|
||||
var mouseMove = function (e) {
|
||||
var v = s.xy2val(e.pageX, e.pageY);
|
||||
if (v == s.cv) return;
|
||||
|
||||
if (
|
||||
s.cH
|
||||
&& (s.cH(v) === false)
|
||||
) return;
|
||||
|
||||
s.change(s._validate(v));
|
||||
s._draw();
|
||||
};
|
||||
|
||||
// First click
|
||||
mouseMove(e);
|
||||
|
||||
// Mouse events listeners
|
||||
k.c.d
|
||||
.bind("mousemove.k", mouseMove)
|
||||
.bind(
|
||||
// Escape key cancel current change
|
||||
"keyup.k"
|
||||
, function (e) {
|
||||
if (e.keyCode === 27) {
|
||||
k.c.d.unbind("mouseup.k mousemove.k keyup.k");
|
||||
|
||||
if (
|
||||
s.eH
|
||||
&& (s.eH() === false)
|
||||
) return;
|
||||
|
||||
s.cancel();
|
||||
}
|
||||
}
|
||||
)
|
||||
.bind(
|
||||
"mouseup.k"
|
||||
, function (e) {
|
||||
k.c.d.unbind('mousemove.k mouseup.k keyup.k');
|
||||
|
||||
if (
|
||||
s.rH
|
||||
&& (s.rH(s.cv) === false)
|
||||
) return;
|
||||
|
||||
s.val(s.cv);
|
||||
}
|
||||
);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this._xy = function () {
|
||||
var o = this.$c.offset();
|
||||
this.x = o.left;
|
||||
this.y = o.top;
|
||||
return this;
|
||||
};
|
||||
|
||||
this._listen = function () {
|
||||
|
||||
if (!this.o.readOnly) {
|
||||
this.$c
|
||||
.bind(
|
||||
"mousedown"
|
||||
, function (e) {
|
||||
e.preventDefault();
|
||||
s._xy()._mouse(e);
|
||||
}
|
||||
)
|
||||
.bind(
|
||||
"touchstart"
|
||||
, function (e) {
|
||||
e.preventDefault();
|
||||
s._xy()._touch(e);
|
||||
}
|
||||
);
|
||||
|
||||
if(this.relative) {
|
||||
$(window).resize(function() {
|
||||
s._carve()
|
||||
.init();
|
||||
s._draw();
|
||||
});
|
||||
}
|
||||
|
||||
this.listen();
|
||||
} else {
|
||||
this.$.attr('readonly', 'readonly');
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this._configure = function () {
|
||||
|
||||
// Hooks
|
||||
if (this.o.draw) this.dH = this.o.draw;
|
||||
if (this.o.change) this.cH = this.o.change;
|
||||
if (this.o.cancel) this.eH = this.o.cancel;
|
||||
if (this.o.release) this.rH = this.o.release;
|
||||
|
||||
if (this.o.displayPrevious) {
|
||||
this.pColor = this.h2rgba(this.o.fgColor, "0.4");
|
||||
this.fgColor = this.h2rgba(this.o.fgColor, "0.6");
|
||||
} else {
|
||||
this.fgColor = this.o.fgColor;
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this._clear = function () {
|
||||
this.$c[0].width = this.$c[0].width;
|
||||
};
|
||||
|
||||
this._validate = function(v) {
|
||||
return (~~ (((v < 0) ? -0.5 : 0.5) + (v/this.o.step))) * this.o.step;
|
||||
};
|
||||
|
||||
// Abstract methods
|
||||
this.listen = function () {}; // on start, one time
|
||||
this.extend = function () {}; // each time configure triggered
|
||||
this.init = function () {}; // each time configure triggered
|
||||
this.change = function (v) {}; // on change
|
||||
this.val = function (v) {}; // on release
|
||||
this.xy2val = function (x, y) {}; //
|
||||
this.draw = function () {}; // on change / on release
|
||||
this.clear = function () { this._clear(); };
|
||||
|
||||
// Utils
|
||||
this.h2rgba = function (h, a) {
|
||||
var rgb;
|
||||
h = h.substring(1,7)
|
||||
rgb = [parseInt(h.substring(0,2),16)
|
||||
,parseInt(h.substring(2,4),16)
|
||||
,parseInt(h.substring(4,6),16)];
|
||||
return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + a + ")";
|
||||
};
|
||||
|
||||
this.copy = function (f, t) {
|
||||
for (var i in f) { t[i] = f[i]; }
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* k.Dial
|
||||
*/
|
||||
k.Dial = function () {
|
||||
k.o.call(this);
|
||||
|
||||
this.startAngle = null;
|
||||
this.xy = null;
|
||||
this.radius = null;
|
||||
this.lineWidth = null;
|
||||
this.cursorExt = null;
|
||||
this.w2 = null;
|
||||
this.PI2 = 2*Math.PI;
|
||||
|
||||
this.extend = function () {
|
||||
this.o = $.extend(
|
||||
{
|
||||
bgColor : this.$.data('bgcolor') || '#EEEEEE',
|
||||
angleOffset : this.$.data('angleoffset') || 0,
|
||||
angleArc : this.$.data('anglearc') || 360,
|
||||
inline : true
|
||||
}, this.o
|
||||
);
|
||||
};
|
||||
|
||||
this.val = function (v) {
|
||||
if (null != v) {
|
||||
this.cv = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v;
|
||||
this.v = this.cv;
|
||||
this.$.val(this.v);
|
||||
this._draw();
|
||||
} else {
|
||||
return this.v;
|
||||
}
|
||||
};
|
||||
|
||||
this.xy2val = function (x, y) {
|
||||
var a, ret;
|
||||
|
||||
a = Math.atan2(
|
||||
x - (this.x + this.w2)
|
||||
, - (y - this.y - this.w2)
|
||||
) - this.angleOffset;
|
||||
|
||||
if(this.angleArc != this.PI2 && (a < 0) && (a > -0.5)) {
|
||||
// if isset angleArc option, set to min if .5 under min
|
||||
a = 0;
|
||||
} else if (a < 0) {
|
||||
a += this.PI2;
|
||||
}
|
||||
|
||||
ret = ~~ (0.5 + (a * (this.o.max - this.o.min) / this.angleArc))
|
||||
+ this.o.min;
|
||||
|
||||
this.o.stopper
|
||||
&& (ret = max(min(ret, this.o.max), this.o.min));
|
||||
|
||||
return ret;
|
||||
};
|
||||
|
||||
this.listen = function () {
|
||||
// bind MouseWheel
|
||||
var s = this,
|
||||
mw = function (e) {
|
||||
e.preventDefault();
|
||||
var ori = e.originalEvent
|
||||
,deltaX = ori.detail || ori.wheelDeltaX
|
||||
,deltaY = ori.detail || ori.wheelDeltaY
|
||||
,v = parseInt(s.$.val()) + (deltaX>0 || deltaY>0 ? s.o.step : deltaX<0 || deltaY<0 ? -s.o.step : 0);
|
||||
|
||||
if (
|
||||
s.cH
|
||||
&& (s.cH(v) === false)
|
||||
) return;
|
||||
|
||||
s.val(v);
|
||||
}
|
||||
, kval, to, m = 1, kv = {37:-s.o.step, 38:s.o.step, 39:s.o.step, 40:-s.o.step};
|
||||
|
||||
this.$
|
||||
.bind(
|
||||
"keydown"
|
||||
,function (e) {
|
||||
var kc = e.keyCode;
|
||||
|
||||
// numpad support
|
||||
if(kc >= 96 && kc <= 105) {
|
||||
kc = e.keyCode = kc - 48;
|
||||
}
|
||||
|
||||
kval = parseInt(String.fromCharCode(kc));
|
||||
|
||||
if (isNaN(kval)) {
|
||||
|
||||
(kc !== 13) // enter
|
||||
&& (kc !== 8) // bs
|
||||
&& (kc !== 9) // tab
|
||||
&& (kc !== 189) // -
|
||||
&& e.preventDefault();
|
||||
|
||||
// arrows
|
||||
if ($.inArray(kc,[37,38,39,40]) > -1) {
|
||||
e.preventDefault();
|
||||
|
||||
var v = parseInt(s.$.val()) + kv[kc] * m;
|
||||
|
||||
s.o.stopper
|
||||
&& (v = max(min(v, s.o.max), s.o.min));
|
||||
|
||||
s.change(v);
|
||||
s._draw();
|
||||
|
||||
// long time keydown speed-up
|
||||
to = window.setTimeout(
|
||||
function () { m*=2; }
|
||||
,30
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
.bind(
|
||||
"keyup"
|
||||
,function (e) {
|
||||
if (isNaN(kval)) {
|
||||
if (to) {
|
||||
window.clearTimeout(to);
|
||||
to = null;
|
||||
m = 1;
|
||||
s.val(s.$.val());
|
||||
}
|
||||
} else {
|
||||
// kval postcond
|
||||
(s.$.val() > s.o.max && s.$.val(s.o.max))
|
||||
|| (s.$.val() < s.o.min && s.$.val(s.o.min));
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
this.$c.bind("mousewheel DOMMouseScroll", mw);
|
||||
this.$.bind("mousewheel DOMMouseScroll", mw)
|
||||
};
|
||||
|
||||
this.init = function () {
|
||||
|
||||
if (
|
||||
this.v < this.o.min
|
||||
|| this.v > this.o.max
|
||||
) this.v = this.o.min;
|
||||
|
||||
this.$.val(this.v);
|
||||
this.w2 = this.w / 2;
|
||||
this.cursorExt = this.o.cursor / 100;
|
||||
this.xy = this.w2 * this.scale;
|
||||
this.lineWidth = this.xy * this.o.thickness;
|
||||
this.lineCap = this.o.lineCap;
|
||||
this.radius = this.xy - this.lineWidth / 2;
|
||||
|
||||
this.o.angleOffset
|
||||
&& (this.o.angleOffset = isNaN(this.o.angleOffset) ? 0 : this.o.angleOffset);
|
||||
|
||||
this.o.angleArc
|
||||
&& (this.o.angleArc = isNaN(this.o.angleArc) ? this.PI2 : this.o.angleArc);
|
||||
|
||||
// deg to rad
|
||||
this.angleOffset = this.o.angleOffset * Math.PI / 180;
|
||||
this.angleArc = this.o.angleArc * Math.PI / 180;
|
||||
|
||||
// compute start and end angles
|
||||
this.startAngle = 1.5 * Math.PI + this.angleOffset;
|
||||
this.endAngle = 1.5 * Math.PI + this.angleOffset + this.angleArc;
|
||||
|
||||
var s = max(
|
||||
String(Math.abs(this.o.max)).length
|
||||
, String(Math.abs(this.o.min)).length
|
||||
, 2
|
||||
) + 2;
|
||||
|
||||
this.o.displayInput
|
||||
&& this.i.css({
|
||||
'width' : ((this.w / 2 + 4) >> 0) + 'px'
|
||||
,'height' : ((this.w / 3) >> 0) + 'px'
|
||||
,'position' : 'absolute'
|
||||
,'vertical-align' : 'middle'
|
||||
,'margin-top' : ((this.w / 3) >> 0) + 'px'
|
||||
,'margin-left' : '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px'
|
||||
,'border' : 0
|
||||
,'background' : 'none'
|
||||
,'font' : this.o.fontWeight + ' ' + ((this.w / s) >> 0) + 'px ' + this.o.font
|
||||
,'text-align' : 'center'
|
||||
,'color' : this.o.inputColor || this.o.fgColor
|
||||
,'padding' : '0px'
|
||||
,'-webkit-appearance': 'none'
|
||||
})
|
||||
|| this.i.css({
|
||||
'width' : '0px'
|
||||
,'visibility' : 'hidden'
|
||||
});
|
||||
};
|
||||
|
||||
this.change = function (v) {
|
||||
this.cv = v;
|
||||
this.$.val(v);
|
||||
};
|
||||
|
||||
this.angle = function (v) {
|
||||
return (v - this.o.min) * this.angleArc / (this.o.max - this.o.min);
|
||||
};
|
||||
|
||||
this.draw = function () {
|
||||
|
||||
var c = this.g, // context
|
||||
a = this.angle(this.cv) // Angle
|
||||
, sat = this.startAngle // Start angle
|
||||
, eat = sat + a // End angle
|
||||
, sa, ea // Previous angles
|
||||
, r = 1;
|
||||
|
||||
c.lineWidth = this.lineWidth;
|
||||
|
||||
c.lineCap = this.lineCap;
|
||||
|
||||
this.o.cursor
|
||||
&& (sat = eat - this.cursorExt)
|
||||
&& (eat = eat + this.cursorExt);
|
||||
|
||||
c.beginPath();
|
||||
c.strokeStyle = this.o.bgColor;
|
||||
c.arc(this.xy, this.xy, this.radius, this.endAngle, this.startAngle, true);
|
||||
c.stroke();
|
||||
|
||||
if (this.o.displayPrevious) {
|
||||
ea = this.startAngle + this.angle(this.v);
|
||||
sa = this.startAngle;
|
||||
this.o.cursor
|
||||
&& (sa = ea - this.cursorExt)
|
||||
&& (ea = ea + this.cursorExt);
|
||||
|
||||
c.beginPath();
|
||||
c.strokeStyle = this.pColor;
|
||||
c.arc(this.xy, this.xy, this.radius, sa, ea, false);
|
||||
c.stroke();
|
||||
r = (this.cv == this.v);
|
||||
}
|
||||
|
||||
c.beginPath();
|
||||
c.strokeStyle = r ? this.o.fgColor : this.fgColor ;
|
||||
c.arc(this.xy, this.xy, this.radius, sat, eat, false);
|
||||
c.stroke();
|
||||
};
|
||||
|
||||
this.cancel = function () {
|
||||
this.val(this.v);
|
||||
};
|
||||
};
|
||||
|
||||
$.fn.dial = $.fn.knob = function (o) {
|
||||
return this.each(
|
||||
function () {
|
||||
var d = new k.Dial();
|
||||
d.o = o;
|
||||
d.$ = $(this);
|
||||
d.run();
|
||||
}
|
||||
).parent();
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
37
assets/plugins/jQuery-Knob/knob.jquery.json
Normal file
37
assets/plugins/jQuery-Knob/knob.jquery.json
Normal file
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "knob",
|
||||
"title": "jQuery Knob",
|
||||
"description": "Nice, downward compatible, touchable, jQuery dial.",
|
||||
"keywords": [
|
||||
"dial",
|
||||
"button",
|
||||
"knob",
|
||||
"ui",
|
||||
"input"
|
||||
],
|
||||
"version": "1.2.2",
|
||||
"author": {
|
||||
"name": "Anthony Terrien",
|
||||
"url": "https://github.com/aterrien"
|
||||
},
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "Anthony Terrien",
|
||||
"email": "kontrol@anthonyterrien.com",
|
||||
"url": "http://anthonyterrien.com/knob"
|
||||
}
|
||||
],
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "http://opensource.org/licenses/mit-license.php"
|
||||
}
|
||||
],
|
||||
"bugs": "https://github.com/aterrien/jQuery-Knob/issues",
|
||||
"homepage": "https://github.com/aterrien/jQuery-Knob",
|
||||
"docs": "https://github.com/aterrien/jQuery-Knob",
|
||||
"download": "https://github.com/aterrien/jQuery-Knob/tags",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.7.0"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user