First Initial
This commit is contained in:
Nakorn Rientrakrunchai
125
wwwroot/BackendScript/assets/jquery-knob/README.md
Normal file
125
wwwroot/BackendScript/assets/jquery-knob/README.md
Normal file
@@ -0,0 +1,125 @@
|
||||
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.
|
||||
* 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" | default=gauge.
|
||||
* thickness : gauge thickness.
|
||||
* width : dial width.
|
||||
* displayInput : default=true | false=hide input.
|
||||
* displayPrevious : default=false | true=displays the previous value with transparency.
|
||||
* fgColor : foreground color.
|
||||
* 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
|
||||
|
||||
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.
|
||||
275
wwwroot/BackendScript/assets/jquery-knob/index.html
Normal file
275
wwwroot/BackendScript/assets/jquery-knob/index.html
Normal file
@@ -0,0 +1,275 @@
|
||||
<!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 src="js/jquery.jqcanvas.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$(".knob").knob({
|
||||
/*change : function (value) {
|
||||
//console.log("change : " + value);
|
||||
},
|
||||
release : function (value) {
|
||||
console.log("release : " + value);
|
||||
},
|
||||
cancel : function () {
|
||||
console.log("cancel : " + this.value);
|
||||
},*/
|
||||
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
|
||||
</pre>
|
||||
<input class="knob" data-angleOffset=90 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</p>
|
||||
<pre>
|
||||
data-min="-15000"
|
||||
data-max="15000"
|
||||
</pre>
|
||||
<input class="knob" data-min="-15000" data-max="15000" 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">
|
||||
<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>
|
||||
<div style="border: 0 none; position: absolute; right: 0; top: 0;"><a href="https://github.com/aterrien" target="_blank"><img src="../i/github-ribbon.png" style="border: 0 none;"></a></div>
|
||||
<script type="text/javascript">
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-3008949-6']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var ga = document.createElement('script');
|
||||
ga.type = 'text/javascript';
|
||||
ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
652
wwwroot/BackendScript/assets/jquery-knob/js/jquery.knob.js
Normal file
652
wwwroot/BackendScript/assets/jquery-knob/js/jquery.knob.js
Normal file
@@ -0,0 +1,652 @@
|
||||
/*!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; // 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.$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.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,
|
||||
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',
|
||||
inline : false,
|
||||
|
||||
// Hooks
|
||||
draw : null, // function () {}
|
||||
change : null, // function (value) {}
|
||||
cancel : null, // function () {}
|
||||
release : null // function (value) {}
|
||||
}, 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.$.val());
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
(!this.o.displayInput) && this.$.hide();
|
||||
|
||||
this.$c = $('<canvas width="' +
|
||||
this.o.width + 'px" height="' +
|
||||
this.o.height + 'px"></canvas>');
|
||||
this.c = this.$c[0].getContext("2d");
|
||||
|
||||
this.$
|
||||
.wrap($('<div style="' + (this.o.inline ? 'display:inline;' : '') +
|
||||
'width:' + this.o.width + 'px;height:' +
|
||||
this.o.height + 'px;"></div>'))
|
||||
.before(this.$c);
|
||||
|
||||
if (this.v instanceof Object) {
|
||||
this.cv = {};
|
||||
this.copy(this.v, this.cv);
|
||||
} else {
|
||||
this.cv = this.v;
|
||||
}
|
||||
|
||||
this.$
|
||||
.bind("configure", cf)
|
||||
.parent()
|
||||
.bind("configure", cf);
|
||||
|
||||
this._listen()
|
||||
._configure()
|
||||
._xy()
|
||||
.init();
|
||||
|
||||
this.isInit = true;
|
||||
|
||||
this._draw();
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this._draw = function () {
|
||||
|
||||
// canvas pre-rendering
|
||||
var d = true,
|
||||
c = document.createElement('canvas');
|
||||
|
||||
c.width = s.o.width;
|
||||
c.height = s.o.height;
|
||||
s.g = c.getContext('2d');
|
||||
|
||||
s.clear();
|
||||
|
||||
s.dH
|
||||
&& (d = s.dH());
|
||||
|
||||
(d !== false) && s.draw();
|
||||
|
||||
s.c.drawImage(c, 0, 0);
|
||||
c = null;
|
||||
};
|
||||
|
||||
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(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(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);
|
||||
}
|
||||
);
|
||||
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;
|
||||
};
|
||||
|
||||
// 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 ? 1 : deltaX<0 || deltaY<0 ? -1 : 0);
|
||||
|
||||
if (
|
||||
s.cH
|
||||
&& (s.cH(v) === false)
|
||||
) return;
|
||||
|
||||
s.val(v);
|
||||
}
|
||||
, kval, to, m = 1, kv = {37:-1, 38:1, 39:1, 40:-1};
|
||||
|
||||
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.o.width / 2;
|
||||
this.cursorExt = this.o.cursor / 100;
|
||||
this.xy = this.w2;
|
||||
this.lineWidth = this.xy * this.o.thickness;
|
||||
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.o.width / 2 + 4) >> 0) + 'px'
|
||||
,'height' : ((this.o.width / 3) >> 0) + 'px'
|
||||
,'position' : 'absolute'
|
||||
,'vertical-align' : 'middle'
|
||||
,'margin-top' : ((this.o.width / 3) >> 0) + 'px'
|
||||
,'margin-left' : '-' + ((this.o.width * 3 / 4 + 2) >> 0) + 'px'
|
||||
,'border' : 0
|
||||
,'background' : 'none'
|
||||
,'font' : 'bold ' + ((this.o.width / s) >> 0) + 'px Arial'
|
||||
,'text-align' : 'center'
|
||||
,'color' : 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;
|
||||
|
||||
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);
|
||||
Reference in New Issue
Block a user