Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

We’re showing branches in this repository, but you can also compare across forks.

base fork: leegee/Mootools-Knob
base: 1706b2caa8
...
head fork: leegee/Mootools-Knob
compare: dfda6dddb3
  • 4 commits
  • 9 files changed
  • 0 commit comments
  • 1 contributor
Commits on Oct 27, 2012
Lee Goddard Moved Source to Demo;
Removed double-click events until conversion considered
6aa460b
Lee Goddard Docs 307e90b
Lee Goddard # files b1a1a17
Lee Goddard Moved files dfda6dd
4 .gitignore
View
@@ -1,3 +1,4 @@
+\#$
.DS_Store
.DS_Store?
._*
@@ -7,4 +8,5 @@ Icon?
ehthumbs.db
Thumbs.db
*~
-
+.gitignore
+*.marks
10 Docs/index.html → Demo/index.html
View
@@ -179,13 +179,20 @@
<section>
<h2>Inline Graphics</h2>
- <p>Default values, with quick graphics:</p>
+ <p>
+ Default values, with some quick graphics.
+ Added <code>data-scale=0.1</code> to allow greater mousemovements to have smaller effect,
+ so the user has to drag further to twist the knob.
+ Added <code>degreesoffset=180</code>, so that the pointer is initially pointing
+ downwards.
+ </p>
<xmp>
<div style='position:absolute'>
<span id='bg' style='position:absolute;top:0;background:url(knob_bg_164x165.png); width:164px; height:165px'></span>
<span class='mooknob' id='fg'
data-addpointer='false'
data-scale='0.1'
+ data-degreesoffset='180'
style='position:absolute;top:0;left:0;background:url(knob_fg_164x165.png); width:164px; height:165px'></span>
</div>
</xmp>
@@ -194,6 +201,7 @@
<span id='bg' style='position:absolute;top:0;left:200px;background:url(knob_bg_164x165.png); width:164px; height:165px'></span>
<span class='mooknob' data-addpointer='false'
data-scale='0.1'
+ data-degreesoffset='180'
id='fg' style='position:absolute;top:0;left:200px;background:url(knob_fg_164x165.png); width:164px; height:165px'></span>
</div>
</section>
0  Docs/knob_bg_164x165.png → Demo/knob_bg_164x165.png
View
File renamed without changes
0  Docs/knob_fg_164x165.png → Demo/knob_fg_164x165.png
View
File renamed without changes
0  Docs/screenshot.png → Demo/screenshot.png
View
File renamed without changes
359 Docs/Knob.html
View
@@ -0,0 +1,359 @@
+<!DOCTYPE html> <html> <head> <title>Knob.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> Knob.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*</span>
+<span class="cm">---</span>
+<span class="cm">description: Rotary-knob input control with WIA-ARIA and keyboard support</span>
+
+<span class="cm">license: MIT-style</span>
+
+<span class="cm">authors:</span>
+<span class="cm">- Lee Goddard</span>
+
+<span class="cm">requires:</span>
+<span class="cm">- Core </span>
+<span class="cm">- Element.Dimensions</span>
+
+<span class="cm">provides: [Knob]</span>
+
+<span class="cm">...</span>
+<span class="cm">*/</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h1>MooKnob</h1>
+
+<p>Version 0.5 - degreesoffset, nearly got double-click support,
+Version 0.4 - Default pointer
+Version 0.2 - WIA-ARIA and keyboard control Support</p>
+
+<p>This code is copyright (C) 2012 Lee Goddard, Server-side Systems Ltd.
+All Rights Reserved.</p>
+
+<p>Available under the same terms as Perl5.</p>
+
+<p>Provides events:</p>
+
+<pre><code>onMousedown - when the knob is clicked
+onTick - every time the knob turns
+onMouseup - when the knob is released
+</code></pre> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <h2>Disgusting global variable</h2>
+
+<p>Thhis horrible global variable seems to be necessary </p> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">__ActiveMooToolsKnobCtrl__</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <h2>Class definition</h2> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">Knob</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Class</span><span class="p">({</span>
+ <span class="nx">Implements</span><span class="o">:</span> <span class="p">[</span><span class="nx">Options</span><span class="p">,</span> <span class="nx">Events</span><span class="p">],</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <h3>Options</h3> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>Keep options lower-case for dataset compatability</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">options</span><span class="o">:</span> <span class="p">{</span> </pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>DOM element or element ID, to replace with this control </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">element</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>Initial value of control: if not supplied, taken from attributes 'value' or 'data-value' </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">value</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> </pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>Default is an up-arrow (↑). Text to add within knob element. If you set this to null, the up-arrow is not added to the knob element </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addpointer</span><span class="o">:</span> <span class="s1">&#39;↑&#39;</span><span class="p">,</span> </pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <p>Minimum and maximum values </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">range</span><span class="o">:</span> <span class="p">[</span><span class="o">-</span><span class="mi">100</span><span class="p">,</span> <span class="mi">100</span><span class="p">],</span> </pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>Multiplier applied to number of px moved, to acheive change in .value </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">scale</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <p>When arrow keys control knob, incrase knob value by this </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">keychangeby</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>As keyUnit but for when shift key is also pressed </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">keychangebywithshift</span><span class="o">:</span> <span class="mi">10</span><span class="p">,</span> </pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>Force all values to be integers </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">forceint</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> </pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>May be a string or DOM element to monitor: changes in this elements <em>value</em> attribute will change the control's <em>value</em> attribute, and cause the control to be re-rendered. </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">monitor</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>Frequency of checking for monitor.value changes </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">monitorMs</span><span class="o">:</span> <span class="mi">1000</span><span class="o">/</span><span class="mi">4</span><span class="p">,</span> </pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>Adjusts rotation by degrees: changes the knob type from a pan control to a 0-10 control, for eample.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">degreesoffset</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
+ </pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <p>Fired when all processing is done, but for rotation the control by the value in <code>this.degrees</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onTick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){},</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <p>Fired when the main mouse button is depressed, but after processing</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onMousedown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){},</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <p>Fired when the main mouse button is released, but after processing</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onMouseUp</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){}</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <h3> Other fields</h3> </td> <td class="code"> <div class="highlight"><pre> </pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <p>DOM element: ontains the control: see <code>options.element</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">element</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <p>DOM element: See <code>options.monitor</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">monitor</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <p>Previous value of the monitor element </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">monitorOldValue</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <p>setInterval timer for checking monitor.value </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">monitorTimer</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">&#182;</a> </div> <p>The Euclidean distance of dragged cursor from origin in element </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">movement</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <p>Position of element at knob mouse down </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">movementAnchor</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <p>Actual value of control </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">value</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">&#182;</a> </div> <p>Cache of 'value', prior to drag starts </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialValue</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <p>When drag ends and is not canceled </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">finalValue</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">&#182;</a> </div> <p>Flag </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">dragging</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> </pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">&#182;</a> </div> <p>For rendering </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">renderRange</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
+ <span class="cm">/* // Positioning info for double-click-to-value </span>
+<span class="cm"> dblClickAnchor: null, </span>
+<span class="cm"> */</span></pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">&#182;</a> </div> <h3>Methods</h3> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">options</span><span class="p">,</span> <span class="nx">actx</span> <span class="p">){</span>
+ <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">setOptions</span><span class="p">(</span><span class="nx">options</span><span class="p">);</span>
+
+ <span class="k">this</span><span class="p">.</span><span class="nx">element</span> <span class="o">=</span> <span class="p">(</span><span class="k">typeof</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">element</span> <span class="o">==</span> <span class="s1">&#39;string&#39;</span><span class="p">)</span><span class="o">?</span>
+ <span class="nb">document</span><span class="p">.</span><span class="nx">id</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">element</span><span class="p">)</span>
+ <span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">element</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">element</span><span class="p">;</span>
+ </pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">&#182;</a> </div> <p>Required for keyboard focus</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;tabIndex&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s1">&#39;tabIdex&#39;</span><span class="p">)</span> <span class="o">||</span> <span class="mi">0</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">&#182;</a> </div> <p>I was adding this manually a lot, and it was tedious
+to keep looking-up UTF-8 arrow characters</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">addpointer</span><span class="p">)</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;text&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">addpointer</span> <span class="p">);</span>
+
+ <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">monitor</span><span class="p">){</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">monitor</span> <span class="o">=</span> <span class="p">(</span><span class="k">typeof</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">monitor</span> <span class="o">==</span> <span class="s1">&#39;string&#39;</span><span class="p">)</span><span class="o">?</span>
+ <span class="nb">document</span><span class="p">.</span><span class="nx">id</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">monitor</span><span class="p">)</span>
+ <span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">monitor</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">monitor</span><span class="p">;</span>
+ <span class="p">}</span>
+
+ <span class="kd">var</span> <span class="nx">block</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">getStyle</span><span class="p">(</span><span class="s1">&#39;display&#39;</span><span class="p">);</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">block</span><span class="o">==</span><span class="s1">&#39;inline&#39;</span> <span class="o">||</span> <span class="nx">block</span><span class="o">==</span><span class="s1">&#39;&#39;</span><span class="p">)</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">setStyle</span><span class="p">(</span><span class="s1">&#39;display&#39;</span><span class="p">,</span> <span class="s1">&#39;inline-block&#39;</span><span class="p">);</span>
+
+ <span class="nx">self</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">range</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">range</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span>
+ <span class="nx">self</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">range</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">range</span><span class="p">[</span><span class="mi">1</span><span class="p">]);</span>
+
+ <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">monitor</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">monitor</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;value&#39;</span><span class="p">)){</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">monitor</span><span class="p">.</span><span class="nx">value</span> <span class="p">);</span>
+ <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">value</span> <span class="o">!=</span> <span class="kc">null</span><span class="p">){</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
+ <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">value</span><span class="p">){</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
+ <span class="p">}</span>
+ </pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">&#182;</a> </div> <p>Needed when contxt is lost in GUI</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">store</span><span class="p">(</span><span class="s1">&#39;self&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
+
+ <span class="k">this</span><span class="p">.</span><span class="nx">renderRange</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">range</span><span class="p">[</span><span class="mi">0</span><span class="p">])</span> <span class="o">*</span> <span class="o">-</span><span class="mi">1</span>
+ <span class="o">+</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">range</span><span class="p">[</span><span class="mi">1</span><span class="p">])</span> <span class="p">);</span>
+
+ <span class="k">this</span><span class="p">.</span><span class="nx">attach</span><span class="p">();</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> <span class="c1">// display initial value1</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">&#182;</a> </div> <p>Initiate listeners</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">attach</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">addEvents</span><span class="p">({</span>
+ <span class="nx">focus</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">focus</span><span class="p">,</span>
+ <span class="nx">blur</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">blur</span><span class="p">,</span>
+ <span class="cm">/* dblclick: this.dblclick,</span>
+<span class="cm"> */</span>
+ <span class="nx">mousedown</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">mousedown</span>
+ <span class="p">});</span>
+ <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">monitor</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">monitor</span><span class="p">.</span><span class="nx">addEvent</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">monitorValueChange</span><span class="p">);</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">monitorTimer</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">monitorValueChange</span><span class="p">.</span><span class="nx">periodical</span><span class="p">(</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">monitorMs</span><span class="p">,</span> <span class="k">this</span>
+ <span class="p">);</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-38"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-38">&#182;</a> </div> <p>Remove listeners</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">detach</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">){</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">.</span><span class="nx">monitorTimer</span><span class="p">)</span>
+ <span class="nx">clearInterval</span><span class="p">(</span> <span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">.</span><span class="nx">monitorTimer</span> <span class="p">);</span>
+
+ <span class="k">if</span> <span class="p">(</span><span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">.</span><span class="nx">monitor</span><span class="p">)</span>
+ <span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">.</span><span class="nx">monitor</span><span class="p">.</span><span class="nx">removeEvent</span><span class="p">(</span>
+ <span class="s1">&#39;change&#39;</span><span class="p">,</span> <span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">.</span><span class="nx">monitorValueChange</span>
+ <span class="p">);</span>
+
+
+ <span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">removeEvents</span><span class="p">({</span>
+ <span class="nx">focus</span><span class="o">:</span> <span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">.</span><span class="nx">focus</span><span class="p">,</span>
+ <span class="nx">blur</span><span class="o">:</span> <span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">.</span><span class="nx">blur</span><span class="p">,</span>
+ <span class="cm">/* dblclick: __ActiveMooToolsKnobCtrl__.dblclick,</span>
+<span class="cm"> */</span>
+ <span class="nx">mousedown</span><span class="o">:</span> <span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">.</span><span class="nx">mousedown</span>
+ <span class="p">});</span>
+
+ <span class="k">if</span> <span class="p">(</span><span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">.</span><span class="nx">dragging</span><span class="p">)</span>
+ <span class="nb">window</span><span class="p">.</span><span class="nx">removeEvent</span><span class="p">(</span><span class="s1">&#39;mouseup&#39;</span><span class="p">,</span> <span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">.</span><span class="nx">mouseup</span><span class="p">);</span>
+
+ <span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">removeEvent</span><span class="p">(</span><span class="s1">&#39;focus&#39;</span><span class="p">,</span><span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">.</span><span class="nx">focus</span><span class="p">);</span>
+ <span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">removeEvent</span><span class="p">(</span><span class="s1">&#39;blur&#39;</span><span class="p">,</span> <span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">.</span><span class="nx">blur</span><span class="p">);</span>
+
+ <span class="nb">window</span><span class="p">.</span><span class="nx">removeEvent</span><span class="p">(</span><span class="s1">&#39;mousemove&#39;</span><span class="p">,</span> <span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">.</span><span class="nx">mousemove</span><span class="p">);</span>
+ <span class="p">}</span>
+ <span class="p">},</span>
+
+ <span class="nx">destroy</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> <span class="k">this</span><span class="p">.</span><span class="nx">detach</span><span class="p">()</span> <span class="p">},</span></pre></div> </td> </tr> <tr id="section-39"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39">&#182;</a> </div> <p>Double-click the control to set it's value:
+this would make my GUI a lot easier, if only
+I could convert the angle to a value.</p> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*</span>
+<span class="cm"> dblclick: function(e){</span>
+<span class="cm"> var self = this.retrieve(&#39;self&#39;);</span>
+<span class="cm"> if (!self.dblClickAnchor) </span>
+<span class="cm"> self.dblClickAnchor = self.element.getCoordinates();</span>
+<span class="cm"> var theta = self.angleBetween2Points( // Find the angle between the element centre and the click:</span>
+<span class="cm"> [e.page.x - self.dblClickAnchor.left, e.page.y - self.dblClickAnchor.top ], // Co-ords of click within element:</span>
+<span class="cm"> [self.dblClickAnchor.width/2, self.dblClickAnchor.height/2] // Centre of element is width/2, height/2</span>
+<span class="cm"> );</span>
+<span class="cm"> if (theta &lt; 0) theta += 2 * Math.PI; // Keep radians positive</span>
+<span class="cm"> var degrees = theta * (180 / Math.PI); // Convert to degrees</span>
+<span class="cm"> degrees *= -1; // Invert to display</span>
+
+<span class="cm"> console.log( degrees +&#39; &#39;+(degrees*-1) ); // degrees += self.options.degreesoffset;</span>
+<span class="cm"> </span>
+<span class="cm"> ? this.value = (degrees+this.options.degreesoffset) / this.renderRange;</span>
+
+<span class="cm"> self.element.setStyles({ </span>
+<span class="cm"> &#39;transform&#39;: &#39;rotate(&#39;+degrees+&#39;deg)&#39;,</span>
+<span class="cm"> &#39;-ms-transform&#39;: &#39;rotate(&#39;+degrees+&#39;deg)&#39;,</span>
+<span class="cm"> &#39;-webkit-transform&#39;: &#39;rotate(&#39;+degrees+&#39;deg)&#39;,</span>
+<span class="cm"> &#39;-o-transform&#39;: &#39;rotate(&#39;+degrees+&#39;deg)&#39;,</span>
+<span class="cm"> &#39;-moz-transform&#39;: &#39;rotate(&#39;+degrees+&#39;deg)&#39;,</span>
+<span class="cm"> });</span>
+<span class="cm"> },</span>
+<span class="cm">*/</span>
+
+ <span class="nx">angleBetween2Points</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span> <span class="nx">point1</span><span class="p">,</span> <span class="nx">point2</span> <span class="p">)</span> <span class="p">{</span>
+ <span class="kd">var</span> <span class="nx">dx</span> <span class="o">=</span> <span class="nx">point2</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">-</span> <span class="nx">point1</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
+ <span class="kd">var</span> <span class="nx">dy</span> <span class="o">=</span> <span class="nx">point2</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">-</span> <span class="nx">point1</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span>
+ <span class="k">return</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">atan2</span><span class="p">(</span> <span class="nx">dx</span><span class="p">,</span> <span class="nx">dy</span> <span class="p">);</span>
+ <span class="p">},</span>
+ </pre></div> </td> </tr> <tr id="section-40"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40">&#182;</a> </div> <p>Monitor changes in the .monitor field's value, and update control</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">monitorValueChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
+ <span class="k">if</span> <span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">monitor</span> <span class="p">){</span>
+ <span class="kd">var</span> <span class="nx">v</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">monitor</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;value&#39;</span><span class="p">)</span> <span class="p">);</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">v</span> <span class="o">!=</span> <span class="k">this</span><span class="p">.</span><span class="nx">monitorOldValue</span><span class="p">){</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">monitorOldValue</span> <span class="o">=</span> <span class="nx">v</span><span class="p">;</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">v</span><span class="p">;</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
+ <span class="p">}</span>
+ <span class="p">}</span>
+ <span class="p">},</span>
+
+ <span class="nx">focus</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
+ <span class="kd">var</span> <span class="nx">self</span><span class="p">;</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="nx">e</span><span class="p">.</span><span class="nx">stop</span><span class="p">();</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">typeOf</span><span class="p">(</span><span class="k">this</span><span class="p">)</span><span class="o">==</span><span class="s1">&#39;element&#39;</span><span class="p">)</span>
+ <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">retrieve</span><span class="p">(</span><span class="s1">&#39;self&#39;</span><span class="p">);</span>
+ <span class="k">else</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+ <span class="nx">__ActiveMooToolsKnobCtrl__</span> <span class="o">=</span> <span class="nx">self</span><span class="p">;</span>
+ <span class="nb">window</span><span class="p">.</span><span class="nx">addEvent</span><span class="p">(</span><span class="s1">&#39;keydown&#39;</span><span class="p">,</span> <span class="nx">self</span><span class="p">.</span><span class="nx">keydown</span><span class="p">);</span>
+ <span class="p">},</span>
+
+ <span class="nx">blur</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
+ <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">retrieve</span><span class="p">(</span><span class="s1">&#39;self&#39;</span><span class="p">);</span>
+ <span class="nx">e</span><span class="p">.</span><span class="nx">stop</span><span class="p">();</span>
+ <span class="nb">window</span><span class="p">.</span><span class="nx">removeEvent</span><span class="p">(</span><span class="s1">&#39;keydown&#39;</span><span class="p">,</span> <span class="nx">self</span><span class="p">.</span><span class="nx">keydown</span><span class="p">);</span>
+ <span class="nx">__ActiveMooToolsKnobCtrl__</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">&#182;</a> </div> <p>When the control has focus, the arrow keys change the value
+by the amount specified in the options. Use of the shift key
+can optionally change increase the change, by default by a
+factor of ten. Use of meta/ctrl/alt maimises or minimises
+the value within the specified range.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">keydown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
+ <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">;</span>
+ <span class="kd">var</span> <span class="nx">change</span><span class="p">;</span>
+ <span class="k">switch</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="p">){</span>
+ <span class="k">case</span> <span class="s1">&#39;down&#39;</span><span class="o">:</span>
+ <span class="k">case</span> <span class="s1">&#39;left&#39;</span><span class="o">:</span>
+ <span class="nx">e</span><span class="p">.</span><span class="nx">stop</span><span class="p">();</span>
+ <span class="nx">change</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">keychangeby</span> <span class="o">*</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
+ <span class="k">break</span><span class="p">;</span>
+ <span class="k">case</span> <span class="s1">&#39;up&#39;</span><span class="o">:</span>
+ <span class="k">case</span> <span class="s1">&#39;right&#39;</span><span class="o">:</span>
+ <span class="nx">e</span><span class="p">.</span><span class="nx">stop</span><span class="p">();</span>
+ <span class="nx">change</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">keychangeby</span><span class="p">;</span>
+ <span class="p">}</span>
+
+ <span class="k">if</span> <span class="p">(</span><span class="nx">change</span><span class="p">){</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">shift</span><span class="p">)</span> <span class="nx">change</span> <span class="o">*=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">keychangebywithshift</span><span class="p">;</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">range</span>
+ <span class="o">&amp;&amp;</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">control</span> <span class="o">||</span> <span class="nx">e</span><span class="p">.</span><span class="nx">alt</span> <span class="o">||</span> <span class="nx">e</span><span class="p">.</span><span class="nx">meta</span><span class="p">)</span>
+ <span class="p">){</span>
+ <span class="nx">self</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">range</span><span class="p">[</span>
+ <span class="p">(</span><span class="nx">change</span> <span class="o">&lt;</span> <span class="mi">0</span><span class="p">)</span><span class="o">?</span> <span class="mi">0</span> <span class="o">:</span> <span class="mi">1</span>
+ <span class="p">]</span>
+ <span class="p">}</span>
+ <span class="k">else</span> <span class="p">{</span>
+ <span class="nx">self</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="nx">change</span><span class="p">;</span>
+ <span class="p">}</span>
+ <span class="nx">self</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
+ <span class="p">}</span>
+ <span class="p">},</span>
+
+ <span class="nx">mousedown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
+ <span class="nx">e</span><span class="p">.</span><span class="nx">stop</span><span class="p">();</span>
+ <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">retrieve</span><span class="p">(</span><span class="s1">&#39;self&#39;</span><span class="p">);</span>
+ <span class="nx">__ActiveMooToolsKnobCtrl__</span> <span class="o">=</span> <span class="nx">self</span><span class="p">;</span>
+ <span class="nx">self</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
+ <span class="nx">self</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span> </pre></div> </td> </tr> <tr id="section-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">&#182;</a> </div> <p>Get element position here, not earlier, to allow for client resizing:</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">movementAnchor</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getPosition</span><span class="p">();</span>
+ <span class="nx">self</span><span class="p">.</span><span class="nx">initialValue</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
+ <span class="nb">window</span><span class="p">.</span><span class="nx">addEvent</span><span class="p">(</span><span class="s1">&#39;mousemove&#39;</span><span class="p">,</span> <span class="nx">self</span><span class="p">.</span><span class="nx">mousemove</span> <span class="p">);</span>
+ <span class="nb">window</span><span class="p">.</span><span class="nx">addEvent</span><span class="p">(</span><span class="s1">&#39;mouseup&#39;</span><span class="p">,</span> <span class="nx">self</span><span class="p">.</span><span class="nx">mouseup</span> <span class="p">);</span>
+ <span class="nx">self</span><span class="p">.</span><span class="nx">dragging</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
+ <span class="nx">self</span><span class="p">.</span><span class="nx">fireEvent</span><span class="p">(</span><span class="s1">&#39;mousedown&#39;</span><span class="p">);</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">&#182;</a> </div> <p>Unsure how to bind the mouseup event to an object,
+hence the ugly global</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">mouseup</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
+ <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">;</span>
+ <span class="nx">e</span><span class="p">.</span><span class="nx">stop</span><span class="p">();</span>
+ <span class="nb">window</span><span class="p">.</span><span class="nx">removeEvent</span><span class="p">(</span><span class="s1">&#39;mousemove&#39;</span><span class="p">,</span> <span class="nx">self</span><span class="p">.</span><span class="nx">mousemove</span><span class="p">);</span>
+ <span class="nb">window</span><span class="p">.</span><span class="nx">removeEvent</span><span class="p">(</span><span class="s1">&#39;mouseup&#39;</span><span class="p">,</span> <span class="nx">self</span><span class="p">.</span><span class="nx">mouseup</span><span class="p">);</span>
+ <span class="nx">self</span><span class="p">.</span><span class="nx">dragging</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
+ <span class="nx">self</span><span class="p">.</span><span class="nx">fireEvent</span><span class="p">(</span><span class="s1">&#39;mouseup&#39;</span><span class="p">);</span>
+ <span class="p">},</span>
+ </pre></div> </td> </tr> <tr id="section-44"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-44">&#182;</a> </div> <p>Sets the x, y field as the position of the mouse curosr relative to the knob,
+sets the movement field as the greater of these two,
+and increments the value field by 'movement' multiplied by the value of
+the scale field.
+If there is a range field, and the value falls outside of it,
+the value is constrained.
+The value field is passed to the degree field,
+and then the onTick event is fired, to allow something interesting
+to be done with these fields, prior to the CSS 'rotate' transformation,
+which uses the degree field.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">mousemove</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
+ <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">;</span>
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">dragging</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
+
+ <span class="nx">e</span><span class="p">.</span><span class="nx">stop</span><span class="p">();</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">getSelection</span> <span class="o">&amp;&amp;</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createRange</span><span class="p">)</span> <span class="p">{</span>
+ <span class="kd">var</span> <span class="nx">sel</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">getSelection</span><span class="p">();</span>
+ <span class="nx">sel</span><span class="p">.</span><span class="nx">removeAllRanges</span><span class="p">();</span>
+ <span class="p">}</span>
+
+ <span class="nx">self</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">page</span><span class="p">.</span><span class="nx">x</span> <span class="o">-</span> <span class="nx">self</span><span class="p">.</span><span class="nx">movementAnchor</span><span class="p">.</span><span class="nx">x</span><span class="p">;</span>
+ <span class="nx">self</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">page</span><span class="p">.</span><span class="nx">y</span> <span class="o">-</span> <span class="nx">self</span><span class="p">.</span><span class="nx">movementAnchor</span><span class="p">.</span><span class="nx">y</span><span class="p">;</span>
+
+ <span class="cm">/* var d = Math.sqrt( Math.pow(self.movementAnchor.x + self.x, 2) + Math.pow(self.movementAnchor.y + self.y, 2) ); */</span>
+
+ <span class="nx">self</span><span class="p">.</span><span class="nx">movement</span> <span class="o">=</span> <span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">x</span><span class="p">)</span> <span class="o">&gt;</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">y</span><span class="p">)</span><span class="o">?</span> <span class="nx">self</span><span class="p">.</span><span class="nx">x</span> <span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span>
+ <span class="nx">self</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">initialValue</span> <span class="o">+</span> <span class="p">(</span> <span class="nx">self</span><span class="p">.</span><span class="nx">movement</span> <span class="o">*</span> <span class="nx">self</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">scale</span><span class="p">);</span>
+ <span class="nx">self</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
+ <span class="p">},</span>
+ </pre></div> </td> </tr> <tr id="section-45"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-45">&#182;</a> </div> <p>Rotates the control knob.
+Requires this.value to be set.
+Sets this.degrees, and element's aria-valuenow/-valuetext.
+If a parameter is supplied, it sets this.value</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">v</span><span class="p">){</span>
+ <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">v</span> <span class="o">!=</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span> <span class="nx">v</span> <span class="p">);</span>
+
+ <span class="k">if</span> <span class="p">(</span><span class="nb">isNaN</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">))</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">range</span><span class="o">?</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">range</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">:</span> <span class="mi">0</span><span class="p">;</span>
+
+ <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">forceint</span><span class="p">)</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="p">);</span>
+
+ <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">range</span><span class="p">){</span>
+ <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">range</span><span class="p">[</span><span class="mi">0</span><span class="p">])</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">range</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
+ <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">range</span><span class="p">[</span><span class="mi">1</span><span class="p">])</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">range</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span>
+ <span class="p">}</span>
+
+ <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;value&#39;</span><span class="p">))</span> <span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;value&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;title&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
+
+ <span class="k">if</span> <span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">monitor</span> <span class="p">){</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">monitor</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;value&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">monitor</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;aria-valuenow&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">monitor</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;aria-valuetext&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
+ <span class="p">}</span>
+
+ <span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;aria-valuenow&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;aria-valuetext&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
+
+ <span class="k">this</span><span class="p">.</span><span class="nx">degrees</span> <span class="o">=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">*</span> <span class="p">(</span><span class="mi">360</span> <span class="o">/</span> <span class="k">this</span><span class="p">.</span><span class="nx">renderRange</span><span class="p">))</span>
+ <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">degreesoffset</span><span class="p">;</span>
+
+ <span class="k">this</span><span class="p">.</span><span class="nx">fireEvent</span><span class="p">(</span><span class="s1">&#39;tick&#39;</span><span class="p">);</span>
+
+ <span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">setStyles</span><span class="p">({</span>
+ <span class="s1">&#39;transform&#39;</span><span class="o">:</span> <span class="s1">&#39;rotate(&#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">degrees</span> <span class="o">+</span> <span class="s1">&#39;deg)&#39;</span><span class="p">,</span>
+ <span class="s1">&#39;-ms-transform&#39;</span><span class="o">:</span> <span class="s1">&#39;rotate(&#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">degrees</span> <span class="o">+</span> <span class="s1">&#39;deg)&#39;</span><span class="p">,</span>
+ <span class="s1">&#39;-webkit-transform&#39;</span><span class="o">:</span> <span class="s1">&#39;rotate(&#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">degrees</span> <span class="o">+</span> <span class="s1">&#39;deg)&#39;</span><span class="p">,</span>
+ <span class="s1">&#39;-o-transform&#39;</span><span class="o">:</span> <span class="s1">&#39;rotate(&#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">degrees</span> <span class="o">+</span> <span class="s1">&#39;deg)&#39;</span><span class="p">,</span>
+ <span class="s1">&#39;-moz-transform&#39;</span><span class="o">:</span> <span class="s1">&#39;rotate(&#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">degrees</span> <span class="o">+</span> <span class="s1">&#39;deg)&#39;</span>
+ <span class="p">});</span>
+ <span class="p">}</span>
+<span class="p">});</span></pre></div> </td> </tr> <tr id="section-46"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-46">&#182;</a> </div> <h2> Knob.parseDOM(<em>selector</em>)</h2>
+
+<p>Converts to a Knob any element matching <em>selector</em>, which
+defaults to <code>.mooknob</code>.
+The range of a widget defaults to +/-100,
+but can be set with the <code>aria-valuemin</code> and <code>aria-valuemax</code> attributes
+of the element. The initial value can be set via the <code>value</code> attribute
+or <code>data-value</code> attribute. The chosen value of the control will be placed
+in the <code>aria-valuenow</code> and <code>aria-valuetext</code> attributes, and in the <code>value</code>
+attribute, if present, otherwise in the <code>data-value</code> attribute.
+<em>Throws</em> a <code>OperatorError</code> if only one of aria-valuemin and aria-valuemax are set.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">Knob</span><span class="p">.</span><span class="nx">parseDOM</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">selector</span> <span class="p">){</span>
+ <span class="nx">selector</span> <span class="o">=</span> <span class="nx">selector</span> <span class="o">||</span> <span class="s1">&#39;.mooknob&#39;</span><span class="p">;</span>
+ <span class="nx">$$</span><span class="p">(</span><span class="nx">selector</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span> <span class="kd">function</span><span class="p">(</span><span class="nx">el</span><span class="p">){</span>
+ <span class="kd">var</span> <span class="nx">opts</span> <span class="o">=</span> <span class="p">{</span>
+ <span class="nx">element</span><span class="o">:</span> <span class="nx">el</span><span class="p">,</span>
+ <span class="p">};</span>
+ <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">el</span><span class="p">.</span><span class="nx">dataset</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span> <span class="kd">function</span><span class="p">(</span><span class="nx">i</span><span class="p">){</span></pre></div> </td> </tr> <tr id="section-47"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-47">&#182;</a> </div> <p>Rough casting </p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">try</span> <span class="p">{</span>
+ <span class="nx">opts</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nb">eval</span><span class="p">(</span> <span class="nx">el</span><span class="p">.</span><span class="nx">dataset</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="p">)</span>
+ <span class="p">}</span>
+ <span class="k">catch</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-48"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-48">&#182;</a> </div> <p>String literals</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">toString</span><span class="p">().</span><span class="nx">match</span><span class="p">(</span><span class="sr">/ReferenceError/</span><span class="p">)){</span>
+ <span class="nx">opts</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">dataset</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
+ <span class="p">}</span> </pre></div> </td> </tr> <tr id="section-49"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-49">&#182;</a> </div> <p>Real issues</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">else</span> <span class="p">{</span>
+ <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Error setting &#39;</span><span class="o">+</span><span class="nx">i</span><span class="o">+</span><span class="s1">&#39; from dataset&#39;</span><span class="p">);</span>
+ <span class="nx">console</span><span class="p">.</span><span class="nx">info</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
+ <span class="p">}</span>
+ <span class="p">}</span>
+ <span class="p">});</span>
+
+ <span class="kd">var</span> <span class="nx">min</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;aria-valuemin&#39;</span><span class="p">)</span> <span class="o">||</span> <span class="kc">null</span><span class="p">;</span>
+ <span class="kd">var</span> <span class="nx">max</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;aria-valuemax&#39;</span><span class="p">)</span> <span class="o">||</span> <span class="kc">null</span><span class="p">;</span>
+
+ <span class="k">if</span> <span class="p">(</span><span class="nx">min</span> <span class="o">||</span> <span class="nx">max</span><span class="p">){</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">min</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">max</span><span class="p">)</span>
+ <span class="k">throw</span> <span class="k">new</span> <span class="nx">OperatorError</span><span class="p">(</span><span class="s1">&#39;aria-valuemin without aria-valuemax: default range will be used&#39;</span><span class="p">);</span>
+ <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">max</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">min</span><span class="p">)</span>
+ <span class="k">throw</span> <span class="k">new</span> <span class="nx">OperatorError</span><span class="p">(</span><span class="s1">&#39;aria-valuemax without aria-valuemin: default range will be used&#39;</span><span class="p">);</span>
+ <span class="k">else</span>
+ <span class="nx">opts</span><span class="p">.</span><span class="nx">range</span> <span class="o">=</span> <span class="p">[</span><span class="nx">min</span><span class="p">,</span><span class="nx">max</span><span class="p">];</span>
+ <span class="p">}</span>
+ <span class="nx">opts</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;value&#39;</span><span class="p">)</span> <span class="o">||</span> <span class="nx">el</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">value</span> <span class="o">||</span> <span class="mi">0</span><span class="p">;</span>
+
+ <span class="k">new</span> <span class="nx">Knob</span><span class="p">(</span><span class="nx">opts</span><span class="p">);</span>
+ <span class="p">});</span> <span class="c1">// Next element to convert</span>
+<span class="p">}</span></pre></div> </td> </tr> <tr id="section-50"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-50">&#182;</a> </div> <h2>OperatorError</h2>
+
+<p>Exception object for your pleasure.</p> </td> <td class="code"> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">OperatorError</span><span class="p">(</span><span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">message</span> <span class="o">=</span> <span class="nx">message</span><span class="p">;</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="s2">&quot;OperatorError&quot;</span><span class="p">;</span>
+<span class="p">}</span></pre></div> </td> </tr> <tr id="section-51"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-51">&#182;</a> </div> <h2> Finally</h2>
+
+<p>Que our parse of the DOM</p> </td> <td class="code"> <div class="highlight"><pre><span class="nb">document</span><span class="p">.</span><span class="nx">addEvent</span><span class="p">(</span><span class="s1">&#39;domready&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span>
+ <span class="nx">Knob</span><span class="p">.</span><span class="nx">parseDOM</span><span class="p">();</span>
+<span class="p">});</span>
+
+</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
192 Docs/docco.css
View
@@ -0,0 +1,192 @@
+/*--------------------- Layout and Typography ----------------------------*/
+body {
+ font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
+ font-size: 15px;
+ line-height: 22px;
+ color: #252519;
+ margin: 0; padding: 0;
+}
+a {
+ color: #261a3b;
+}
+ a:visited {
+ color: #261a3b;
+ }
+p {
+ margin: 0 0 15px 0;
+}
+h1, h2, h3, h4, h5, h6 {
+ margin: 0px 0 15px 0;
+}
+ h1 {
+ margin-top: 40px;
+ }
+hr {
+ border: 0 none;
+ border-top: 1px solid #e5e5ee;
+ height: 1px;
+ margin: 20px 0;
+}
+#container {
+ position: relative;
+}
+#background {
+ position: fixed;
+ top: 0; left: 525px; right: 0; bottom: 0;
+ background: #f5f5ff;
+ border-left: 1px solid #e5e5ee;
+ z-index: -1;
+}
+#jump_to, #jump_page {
+ background: white;
+ -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;
+ -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
+ font: 10px Arial;
+ text-transform: uppercase;
+ cursor: pointer;
+ text-align: right;
+}
+#jump_to, #jump_wrapper {
+ position: fixed;
+ right: 0; top: 0;
+ padding: 5px 10px;
+}
+ #jump_wrapper {
+ padding: 0;
+ display: none;
+ }
+ #jump_to:hover #jump_wrapper {
+ display: block;
+ }
+ #jump_page {
+ padding: 5px 0 3px;
+ margin: 0 0 25px 25px;
+ }
+ #jump_page .source {
+ display: block;
+ padding: 5px 10px;
+ text-decoration: none;
+ border-top: 1px solid #eee;
+ }
+ #jump_page .source:hover {
+ background: #f5f5ff;
+ }
+ #jump_page .source:first-child {
+ }
+table td {
+ border: 0;
+ outline: 0;
+}
+ td.docs, th.docs {
+ max-width: 450px;
+ min-width: 450px;
+ min-height: 5px;
+ padding: 10px 25px 1px 50px;
+ overflow-x: hidden;
+ vertical-align: top;
+ text-align: left;
+ }
+ .docs pre {
+ margin: 15px 0 15px;
+ padding-left: 15px;
+ }
+ .docs p tt, .docs p code {
+ background: #f8f8ff;
+ border: 1px solid #dedede;
+ font-size: 12px;
+ padding: 0 0.2em;
+ }
+ .pilwrap {
+ position: relative;
+ }
+ .pilcrow {
+ font: 12px Arial;
+ text-decoration: none;
+ color: #454545;
+ position: absolute;
+ top: 3px; left: -20px;
+ padding: 1px 2px;
+ opacity: 0;
+ -webkit-transition: opacity 0.2s linear;
+ }
+ td.docs:hover .pilcrow {
+ opacity: 1;
+ }
+ td.code, th.code {
+ padding: 14px 15px 16px 25px;
+ width: 100%;
+ vertical-align: top;
+ background: #f5f5ff;
+ border-left: 1px solid #e5e5ee;
+ }
+ pre, tt, code {
+ font-size: 12px; line-height: 18px;
+ font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
+ margin: 0; padding: 0;
+ }
+
+
+/*---------------------- Syntax Highlighting -----------------------------*/
+td.linenos { background-color: #f0f0f0; padding-right: 10px; }
+span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }
+body .hll { background-color: #ffffcc }
+body .c { color: #408080; font-style: italic } /* Comment */
+body .err { border: 1px solid #FF0000 } /* Error */
+body .k { color: #954121 } /* Keyword */
+body .o { color: #666666 } /* Operator */
+body .cm { color: #408080; font-style: italic } /* Comment.Multiline */
+body .cp { color: #BC7A00 } /* Comment.Preproc */
+body .c1 { color: #408080; font-style: italic } /* Comment.Single */
+body .cs { color: #408080; font-style: italic } /* Comment.Special */
+body .gd { color: #A00000 } /* Generic.Deleted */
+body .ge { font-style: italic } /* Generic.Emph */
+body .gr { color: #FF0000 } /* Generic.Error */
+body .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+body .gi { color: #00A000 } /* Generic.Inserted */
+body .go { color: #808080 } /* Generic.Output */
+body .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+body .gs { font-weight: bold } /* Generic.Strong */
+body .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+body .gt { color: #0040D0 } /* Generic.Traceback */
+body .kc { color: #954121 } /* Keyword.Constant */
+body .kd { color: #954121; font-weight: bold } /* Keyword.Declaration */
+body .kn { color: #954121; font-weight: bold } /* Keyword.Namespace */
+body .kp { color: #954121 } /* Keyword.Pseudo */
+body .kr { color: #954121; font-weight: bold } /* Keyword.Reserved */
+body .kt { color: #B00040 } /* Keyword.Type */
+body .m { color: #666666 } /* Literal.Number */
+body .s { color: #219161 } /* Literal.String */
+body .na { color: #7D9029 } /* Name.Attribute */
+body .nb { color: #954121 } /* Name.Builtin */
+body .nc { color: #0000FF; font-weight: bold } /* Name.Class */
+body .no { color: #880000 } /* Name.Constant */
+body .nd { color: #AA22FF } /* Name.Decorator */
+body .ni { color: #999999; font-weight: bold } /* Name.Entity */
+body .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
+body .nf { color: #0000FF } /* Name.Function */
+body .nl { color: #A0A000 } /* Name.Label */
+body .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
+body .nt { color: #954121; font-weight: bold } /* Name.Tag */
+body .nv { color: #19469D } /* Name.Variable */
+body .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
+body .w { color: #bbbbbb } /* Text.Whitespace */
+body .mf { color: #666666 } /* Literal.Number.Float */
+body .mh { color: #666666 } /* Literal.Number.Hex */
+body .mi { color: #666666 } /* Literal.Number.Integer */
+body .mo { color: #666666 } /* Literal.Number.Oct */
+body .sb { color: #219161 } /* Literal.String.Backtick */
+body .sc { color: #219161 } /* Literal.String.Char */
+body .sd { color: #219161; font-style: italic } /* Literal.String.Doc */
+body .s2 { color: #219161 } /* Literal.String.Double */
+body .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
+body .sh { color: #219161 } /* Literal.String.Heredoc */
+body .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
+body .sx { color: #954121 } /* Literal.String.Other */
+body .sr { color: #BB6688 } /* Literal.String.Regex */
+body .s1 { color: #219161 } /* Literal.String.Single */
+body .ss { color: #19469D } /* Literal.String.Symbol */
+body .bp { color: #954121 } /* Name.Builtin.Pseudo */
+body .vc { color: #19469D } /* Name.Variable.Class */
+body .vg { color: #19469D } /* Name.Variable.Global */
+body .vi { color: #19469D } /* Name.Variable.Instance */
+body .il { color: #666666 } /* Literal.Number.Integer.Long */
60 README.md
View
@@ -3,7 +3,7 @@ Mootools-Knob
Provides a rotary knob control for Mootools
-![Screenshot](https://raw.github.com/leegee/Mootools-Knob/master/Docs/screenshot.png)
+![Screenshot](https://raw.github.com/leegee/Mootools-Knob/master/Demo/screenshot.png)
How to use
----------
@@ -106,51 +106,57 @@ Options
The following options are available. Some may be supplied as
*dataset-* attributes when their values are literal.
-* **element**: the DOM element to replace with this control
-* **value**: (*0*) The iInitial value of the control. If not supplied, taken from attributes *value* or *data-value*
-* **range**: (*[-100, 100]*) The minimum and maximum values. May be supplied in HTML as *aria-valuemin* and *aria-valuemax*.
-* **scale**: (*1*) Multiplier applied to the number of pixels the mosue may be moved, to acheive change in the **value** field (see Events, below)
-* **keychangeby**: (*1*) When arrow keys control the knob, the **value** field is increased by this factor
-* **keychangebywithshift**: (*10*) As **keychangeby**, above, but for when shift is held.
-* **monitor**: A name for, or instance of, a DOM element that has a **value** field that shoudl be monitored for changes, to be reflected by this control. Intended for text input elements.
-* **monitorMs**: (*250*) The interval, in milliseconds, at which to check the **monitor** element, if supplied. The monitor element's *value* (an aria-related) attribute will also be updated with changes to the control.
-* **addpointer**: (*↑*) By default the module (since 0.3) replaces **element**'s content with an up-arrow to the element. Disable this by setting this option to null or false.
-* **forceint**: (*false*) Force all values to be integers
+* `element`: the DOM element to replace with this control
+* `value`: (*0*) The iInitial value of the control. If not supplied, taken from attributes *value* or *data-value*
+* `range`: (*[-100, 100]*) The minimum and maximum values. May be supplied in HTML as *aria-valuemin* and *aria-valuemax*.
+* `scale`: (*1*) Multiplier applied to the number of pixels the mosue may be moved, to acheive change in the `value` field (see Events, below)
+* `keychangeby`: (*1*) When arrow keys control the knob, the `value` field is increased by this factor
+* `keychangebywithshift`: (*10*) As `keychangeby`, above, but for when shift is held.
+* `monitor`: A name for, or instance of, a DOM element that has a `value` field that shoudl be monitored for changes, to be reflected by this control. Intended for text input elements.
+* `monitorMs`: (*250*) The interval, in milliseconds, at which to check the `monitor` element, if supplied. The monitor element's *value* (an aria-related) attribute will also be updated with changes to the control.
+* `addpointer`: (*↑*) By default the module (since 0.3) replaces `element`'s content with an up-arrow to the element. Disable this by setting this option to null or false.
+* `forceint`: (*false*) Force all values to be integers
+* `degreesoffset`: (*0*) Offset, in degrees, to apply to the rotation of the knob. This does not effect the value of the control, only its appearance, and can change the style of the control form a pan control to a volume control, for example. The default is *0* but this may change.
Events
------
In addition to the above options, the following events are supplied:
-* **onMousedown**: fired when the knob is clicked
-* **onMouseup**: fired when the knob is released but before it is rendered
-* **onTick**: fired as the knob is turned
+* `onMousedown`: fired when the knob is clicked
+* `onMouseup`: fired when the knob is released but before it is rendered
+* `onTick`: fired as the knob is turned
-The **onTick** event is intended to allow the user to adjust the behaviour
+The `onTick` event is intended to allow the user to adjust the behaviour
of the widget, using the following object fields:
-* **x** and **y** represent the position of the mouse curosr relative to the knob
-* **movement** contains the greater of these two,
-* **value** contains the previous value incremented by **movement** multiplied by the value of the **scale** option (*this.options.scale*).
-* **degrees** contains the amount by which the knob will be rotated, and can be set in accordance with the values accepted by the CSS3 Transform/rotate property (0-360, afik)
+* `x` and `y` represent the position of the mouse curosr relative to the knob
+* `movement` contains the greater of these two,
+* `value` contains the previous value incremented by `movement` multiplied by the value of the `scale` option (*this.options.scale*).
+* `degrees` contains the amount by which the knob will be rotated, and can be set in accordance with the values accepted by the CSS3 Transform/rotate property (0-360, afik)
-The **onTick** event could just be used to update a text display field.
+The `onTick` event could just be used to update a text display field.
Public Methods
--------------
-* **render**: Update the control to reflect the current state of the **value** field, which may be set by supply a single, numeric argument
-* **attach**: Called at instantiation to attach eveents to allow the control to operate
-* **detach**: Removes events
+* `render`: Update the control to reflect the current state of the `value` field, which may be set by supply a single, numeric argument
+* `attach`: Called at instantiation to attach eveents to allow the control to operate
+* `detach`: Removes events
+
+TO DO
+-----
+
+* Double click support is nearly available, but how to convert an angle to a value?
FAQ
---
-**When using HTML mark-up to create a knob, why do *valuemin* and *valuemax* not work?**
+`When using HTML mark-up to create a knob, why do *valuemin* and *valuemax* not work?`
-The acceptable range of inputs should be specified through **aria-valuemin** and **aria-valuemax*, not **data-valuemin** and **data-valuemax**.
+The acceptable range of inputs should be specified through `aria-valuemin` and `aria-valuemax*, not `data-valuemin` and `data-valuemax`.
-**Why are arguments all lower case, rather than camel case?**
+`Why are arguments all lower case, rather than camel case?`
-To make parsing of **dataset** attributes easier: these are all forced to lower case by the browser.
+To make parsing of `dataset` attributes easier: these are all forced to lower case by the browser.
331 Source/Knob.js
View
@@ -1,6 +1,6 @@
/*
---
-description: A rotary knob input control
+description: Rotary-knob input control with WIA-ARIA and keyboard support
license: MIT-style
@@ -16,56 +16,96 @@ provides: [Knob]
...
*/
-/*
- Version 0.2 - WIA-ARIA and keyboard control Support
-
- This code is copyright (C) 2012 Lee Goddard, Server-side Systems Ltd.
- All Rights Reserved.
-
- Available under the same terms as Perl5.
+// # MooKnob
+// Version 0.5 - degreesoffset, nearly got double-click support,
+// Version 0.4 - Default pointer
+// Version 0.2 - WIA-ARIA and keyboard control Support
+//
+// This code is copyright (C) 2012 Lee Goddard, Server-side Systems Ltd.
+// All Rights Reserved.
+//
+// Available under the same terms as Perl5.
+//
+// Provides events:
+//
+// onMousedown - when the knob is clicked
+// onTick - every time the knob turns
+// onMouseup - when the knob is released
- Provides events:
-
- onMousedown - when the knob is clicked
- onTick - every time the knob turns
- onMouseup - when the knob is released
-*/
+// ## Disgusting global variable
+// Thhis horrible global variable seems to be necessary
var __ActiveMooToolsKnobCtrl__ = null;
+// ## Class definition
var Knob = new Class({
Implements: [Options, Events],
-
- options: { // Keep options lower-case for dataset compatability
- element: null, /* DOM element to replace with this control */
- value: 0, /* Initial value of control: if not supplied, taken from attributes 'value' or 'data-value' */
- addpointer: '', /* Default is an up-arrow (↑). If you set this to null, the up-arrow is not added to the knob element */
- range: [-100, 100], /* Minimum and maximum values */
- scale: 1, /* Multiplier applied to number of px moved, to acheive change in .value */
- keychangeby: 1, /* When arrow keys control knob, incrase knob value by this */
- keychangebywithshift: 10, /* As keyUnit but for when shift key is also pressed */
- forceint: false, /* Force all values to be integers */
- monitor: null, /* May be a string or DOM element to monitor: changes in this elements *value* attribute will change the control's *value* attribute, and cause the control to be re-rendered. */
- monitorMs: 1000/4, /* Frequency of checking for monitor.value changes */
+
+// ### Options
+
+ // Keep options lower-case for dataset compatability
+ options: {
+ // DOM element or element ID, to replace with this control
+ element: null,
+ // Initial value of control: if not supplied, taken from attributes 'value' or 'data-value'
+ value: 0,
+ // Default is an up-arrow (↑). Text to add within knob element. If you set this to null, the up-arrow is not added to the knob element
+ addpointer: '',
+ // Minimum and maximum values
+ range: [-100, 100],
+ // Multiplier applied to number of px moved, to acheive change in .value
+ scale: 1,
+ // When arrow keys control knob, incrase knob value by this
+ keychangeby: 1,
+ // As keyUnit but for when shift key is also pressed
+ keychangebywithshift: 10,
+ // Force all values to be integers
+ forceint: false,
+ // May be a string or DOM element to monitor: changes in this elements *value* attribute will change the control's *value* attribute, and cause the control to be re-rendered.
+ monitor: null,
+ // Frequency of checking for monitor.value changes
+ monitorMs: 1000/4,
+ // Adjusts rotation by degrees: changes the knob type from a pan control to a 0-10 control, for eample.
+ degreesoffset: 0,
+ // Fired when all processing is done, but for rotation the control by the value in `this.degrees`
onTick: function(){},
+ // Fired when the main mouse button is depressed, but after processing
onMousedown: function(){},
+ // Fired when the main mouse button is released, but after processing
onMouseUp: function(){}
},
+ // ### Other fields
+
+ // DOM element: ontains the control: see `options.element`
element: null,
- monitor: null, /* See options.monitor */
+ // DOM element: See `options.monitor`
+ monitor: null,
+ // Previous value of the monitor element
monitorOldValue: null,
- monitorTimer: null, /* setInterval timer for checking monitor.value */
- movement: null, /* The Euclidean distance of dragged cursor from origin in element */
- movementAnchor: null, /* Position of element at knob mouse down */
- value: null, /* Actual value of control */
- initialValue: null, /* Cache of 'value', prior to drag starts */
- finalValue: null, /* When drag ends and is not canceled */
- dragging: false, /* Flag */
- renderRange: null, /* For rendering */
- // dblClickAnchor: null, /* Position for double-click-to-value */
-
+ // setInterval timer for checking monitor.value
+ monitorTimer: null,
+ // The Euclidean distance of dragged cursor from origin in element
+ movement: null,
+ // Position of element at knob mouse down
+ movementAnchor: null,
+ // Actual value of control
+ value: null,
+ // Cache of 'value', prior to drag starts
+ initialValue: null,
+ // When drag ends and is not canceled
+ finalValue: null,
+ // Flag
+ dragging: false,
+ // For rendering
+ renderRange: null,
+ /* // Positioning info for double-click-to-value
+ dblClickAnchor: null,
+ */
+
+// ### Methods
+
initialize: function( options, actx ){
var self = this;
this.setOptions(options);
@@ -74,13 +114,13 @@ var Knob = new Class({
document.id(this.options.element)
: this.element = this.options.element;
- // console.debug('Initialising knob '+this.element.id);
-
+ // Required for keyboard focus
this.element.setAttribute('tabIndex', this.element.getAttribute('tabIdex') || 0);
- if (this.options.addpointer){
+ // I was adding this manually a lot, and it was tedious
+ // to keep looking-up UTF-8 arrow characters
+ if (this.options.addpointer)
this.element.set('text', this.options.addpointer );
- }
if (this.options.monitor){
this.monitor = (typeof this.options.monitor == 'string')?
@@ -88,11 +128,6 @@ var Knob = new Class({
: this.monitor = this.options.monitor;
}
- this.element.addEvents({
- focus: this.focus,
- blur: this.blur
- });
-
var block = this.element.getStyle('display');
if (block=='inline' || block=='')
this.element.setStyle('display', 'inline-block');
@@ -118,36 +153,83 @@ var Knob = new Class({
this.render(); // display initial value1
},
+ // Initiate listeners
attach: function(){
- // this.element.addEvent('dblclick', this.dblclick);
- this.element.addEvent('mousedown', this.mousedown);
+ this.element.addEvents({
+ focus: this.focus,
+ blur: this.blur,
+ /* dblclick: this.dblclick,
+ */
+ mousedown: this.mousedown
+ });
if (this.monitor) this.monitor.addEvent('change', this.monitorValueChange);
this.monitorTimer = this.monitorValueChange.periodical(
this.options.monitorMs, this
);
},
- /*
+ // Remove listeners
+ detach: function(){
+ if (__ActiveMooToolsKnobCtrl__){
+ if (__ActiveMooToolsKnobCtrl__.monitorTimer)
+ clearInterval( __ActiveMooToolsKnobCtrl__.monitorTimer );
+
+ if (__ActiveMooToolsKnobCtrl__.monitor)
+ __ActiveMooToolsKnobCtrl__.monitor.removeEvent(
+ 'change', __ActiveMooToolsKnobCtrl__.monitorValueChange
+ );
+
+
+ __ActiveMooToolsKnobCtrl__.element.removeEvents({
+ focus: __ActiveMooToolsKnobCtrl__.focus,
+ blur: __ActiveMooToolsKnobCtrl__.blur,
+ /* dblclick: __ActiveMooToolsKnobCtrl__.dblclick,
+ */
+ mousedown: __ActiveMooToolsKnobCtrl__.mousedown
+ });
+
+ if (__ActiveMooToolsKnobCtrl__.dragging)
+ window.removeEvent('mouseup', __ActiveMooToolsKnobCtrl__.mouseup);
+
+ __ActiveMooToolsKnobCtrl__.element.removeEvent('focus',__ActiveMooToolsKnobCtrl__.focus);
+ __ActiveMooToolsKnobCtrl__.element.removeEvent('blur', __ActiveMooToolsKnobCtrl__.blur);
+
+ window.removeEvent('mousemove', __ActiveMooToolsKnobCtrl__.mousemove);
+ }
+ },
+
+ destroy: function(){ this.detach() },
+
+// Double-click the control to set it's value:
+// this would make my GUI a lot easier, if only
+// I could convert the angle to a value.
+
+/*
dblclick: function(e){
var self = this.retrieve('self');
if (!self.dblClickAnchor)
self.dblClickAnchor = self.element.getCoordinates();
- // Co-ords of click within element:
- var x = e.page.x - self.dblClickAnchor.left;
- var y = e.page.y - self.dblClickAnchor.top;
- // Centre of element is width/2, height/2
- // Angle between centre and click:
- var theta = self.angleBetween2Points(
- [x,y],
- [self.dblClickAnchor.width/2, self.dblClickAnchor.height/2]
+ var theta = self.angleBetween2Points( // Find the angle between the element centre and the click:
+ [e.page.x - self.dblClickAnchor.left, e.page.y - self.dblClickAnchor.top ], // Co-ords of click within element:
+ [self.dblClickAnchor.width/2, self.dblClickAnchor.height/2] // Centre of element is width/2, height/2
);
- if (theta < 0) theta += 2 * Math.PI;
- var degrees = theta * (180 / Math.PI);
- degrees += 90;
- if (degrees > 360) degrees -= 360;
- console.log( degrees );
+ if (theta < 0) theta += 2 * Math.PI; // Keep radians positive
+ var degrees = theta * (180 / Math.PI); // Convert to degrees
+ degrees *= -1; // Invert to display
+
+ console.log( degrees +' '+(degrees*-1) ); // degrees += self.options.degreesoffset;
+
+ ? this.value = (degrees+this.options.degreesoffset) / this.renderRange;
+
+ self.element.setStyles({
+ 'transform': 'rotate('+degrees+'deg)',
+ '-ms-transform': 'rotate('+degrees+'deg)',
+ '-webkit-transform': 'rotate('+degrees+'deg)',
+ '-o-transform': 'rotate('+degrees+'deg)',
+ '-moz-transform': 'rotate('+degrees+'deg)',
+ });
},
- */
+*/
angleBetween2Points: function ( point1, point2 ) {
var dx = point2[0] - point1[0];
@@ -155,7 +237,7 @@ var Knob = new Class({
return Math.atan2( dx, dy );
},
- /* Monitor changes in the .monitor field's value, and update control */
+// Monitor changes in the .monitor field's value, and update control
monitorValueChange: function(e){
if ( this.monitor ){
var v = parseFloat( this.monitor.get('value') );
@@ -167,20 +249,6 @@ var Knob = new Class({
}
},
- destroy: function(){ this.detach() },
-
- detach: function(){
- if (this.monitorTimer) clearInterval( this.monitorTimer );
- this.element.removeEvent('mousedown', this.mousedown);
- if (this.dragging)
- window.removeEvent('mouseup', __ActiveMooToolsKnobCtrl__.mouseup);
- if (__ActiveMooToolsKnobCtrl__){
- __ActiveMooToolsKnobCtrl__.element.removeEvent('focus',__ActiveMooToolsKnobCtrl__.focus);
- __ActiveMooToolsKnobCtrl__.element.removeEvent('blur', __ActiveMooToolsKnobCtrl__.blur);
- window.removeEvent('mousemove', __ActiveMooToolsKnobCtrl__.mousemove);
- }
- },
-
focus: function(e){
var self;
if (e) e.stop();
@@ -189,7 +257,6 @@ var Knob = new Class({
else self = this;
__ActiveMooToolsKnobCtrl__ = self;
window.addEvent('keydown', self.keydown);
- // console.debug('Focused '+self.element.id);
},
blur: function(e){
@@ -199,11 +266,11 @@ var Knob = new Class({
__ActiveMooToolsKnobCtrl__ = null;
},
- /* When the control has focus, the arrow keys change the value
- by the amount specified in the options. Use of the shift key
- can optionally change increase the change, by default by a
- factor of ten. Use of meta/ctrl/alt maimises or minimises
- the value within the specified range. */
+// When the control has focus, the arrow keys change the value
+// by the amount specified in the options. Use of the shift key
+// can optionally change increase the change, by default by a
+// factor of ten. Use of meta/ctrl/alt maimises or minimises
+// the value within the specified range.
keydown: function(e){
var self = __ActiveMooToolsKnobCtrl__;
var change;
@@ -236,21 +303,22 @@ var Knob = new Class({
},
mousedown: function(e){
- // Get element position here, not earlier, to allow for resizing:
e.stop();
var self = this.retrieve('self');
__ActiveMooToolsKnobCtrl__ = self;
self.element.focus();
self.focus();
+ // Get element position here, not earlier, to allow for client resizing:
self.movementAnchor = this.getPosition();
self.initialValue = self.value;
window.addEvent('mousemove', self.mousemove );
- // How to maintain lexical context?
window.addEvent('mouseup', self.mouseup );
self.dragging = true;
self.fireEvent('mousedown');
},
-
+
+// Unsure how to bind the mouseup event to an object,
+// hence the ugly global
mouseup: function(e){
var self = __ActiveMooToolsKnobCtrl__;
e.stop();
@@ -260,17 +328,16 @@ var Knob = new Class({
self.fireEvent('mouseup');
},
- /* Sets the x, y field as the position of the mouse curosr relative to the knob,
- sets the movement field as the greater of these two,
- and increments the value field by 'movement' multiplied by the value of
- the scale field.
- If there is a range field, and the value falls outside of it,
- the value is constrained.
- The value field is passed to the degree field,
- and then the onTick event is fired, to allow something interesting
- to be done with these fields, prior to the CSS 'rotate' transformation,
- which uses the degree field.
- */
+// Sets the x, y field as the position of the mouse curosr relative to the knob,
+// sets the movement field as the greater of these two,
+// and increments the value field by 'movement' multiplied by the value of
+// the scale field.
+// If there is a range field, and the value falls outside of it,
+// the value is constrained.
+// The value field is passed to the degree field,
+// and then the onTick event is fired, to allow something interesting
+// to be done with these fields, prior to the CSS 'rotate' transformation,
+// which uses the degree field.
mousemove: function(e){
var self = __ActiveMooToolsKnobCtrl__;
if (!self.dragging) return;
@@ -284,18 +351,17 @@ var Knob = new Class({
self.x = e.page.x - self.movementAnchor.x;
self.y = e.page.y - self.movementAnchor.y;
- // var d = Math.sqrt( Math.pow(self.movementAnchor.x + self.x, 2) + Math.pow(self.movementAnchor.y + self.y, 2) );
+ /* var d = Math.sqrt( Math.pow(self.movementAnchor.x + self.x, 2) + Math.pow(self.movementAnchor.y + self.y, 2) ); */
self.movement = (Math.abs(self.x) > Math.abs(self.y)? self.x : self.y);
self.value = self.initialValue + ( self.movement * self.options.scale);
self.render();
},
- /* Rotates the control knob.
- Requires this.value to be set.
- Sets this.degrees, and element's aria-valuenow/-valuetext.
- If a parameter is supplied, it sets this.value
- */
+// Rotates the control knob.
+// Requires this.value to be set.
+// Sets this.degrees, and element's aria-valuenow/-valuetext.
+// If a parameter is supplied, it sets this.value
render: function(v){
if (typeof v != 'undefined') this.value = parseFloat( v );
@@ -319,29 +385,34 @@ var Knob = new Class({
this.monitor.set('aria-valuetext', this.value);
}
- this.degrees = this.value * (360 / this.renderRange);
this.element.set('aria-valuenow', this.value);
this.element.set('aria-valuetext', this.value);
+
+ this.degrees = (this.value * (360 / this.renderRange))
+ + this.options.degreesoffset;
+
this.fireEvent('tick');
this.element.setStyles({
- 'transform': 'rotate('+this.degrees+'deg)',
- '-ms-transform': 'rotate('+this.degrees+'deg)',
- '-webkit-transform': 'rotate('+this.degrees+'deg)',
- '-o-transform': 'rotate('+this.degrees+'deg)',
- '-moz-transform': 'rotate('+this.degrees+'deg)',
+ 'transform': 'rotate(' + this.degrees + 'deg)',
+ '-ms-transform': 'rotate(' + this.degrees + 'deg)',
+ '-webkit-transform': 'rotate(' + this.degrees + 'deg)',
+ '-o-transform': 'rotate(' + this.degrees + 'deg)',
+ '-moz-transform': 'rotate(' + this.degrees + 'deg)'
});
}
});
-/*
- The range of a widget defaults to +/-100,
- but can be set with the aria-valuemin and aria-valuemax attributes
- of the element. The initial value can be set via the value attribute
- or data-value attribute. The chosen value of the control will be placed
- in the aria-valuenow and aria-valuetext attributes, and in the value
- attribute, if present, otherwise in the data-value attribute.
-*/
+// ## Knob.parseDOM(*selector*)
+// Converts to a Knob any element matching *selector*, which
+// defaults to `.mooknob`.
+// The range of a widget defaults to +/-100,
+// but can be set with the `aria-valuemin` and `aria-valuemax` attributes
+// of the element. The initial value can be set via the `value` attribute
+// or `data-value` attribute. The chosen value of the control will be placed
+// in the `aria-valuenow` and `aria-valuetext` attributes, and in the `value`
+// attribute, if present, otherwise in the `data-value` attribute.
+// *Throws* a `OperatorError` if only one of aria-valuemin and aria-valuemax are set.
Knob.parseDOM = function( selector ){
selector = selector || '.mooknob';
$$(selector).each( function(el){
@@ -349,7 +420,8 @@ Knob.parseDOM = function( selector ){
element: el,
};
Object.keys(el.dataset).each( function(i){
- try { // rough casting
+ // Rough casting
+ try {
opts[i] = eval( el.dataset[i] )
}
catch(e) {
@@ -357,6 +429,7 @@ Knob.parseDOM = function( selector ){
if (e.toString().match(/ReferenceError/)){
opts[i] = el.dataset[i];
}
+ // Real issues
else {
console.log('Error setting '+i+' from dataset');
console.info(e);
@@ -366,21 +439,31 @@ Knob.parseDOM = function( selector ){
var min = el.get('aria-valuemin') || null;
var max = el.get('aria-valuemax') || null;
+
if (min || max){
if (min && !max)
- throw('aria-valuemin without aria-valuemax: default range will be used');
+ throw new OperatorError('aria-valuemin without aria-valuemax: default range will be used');
else if (max && !min)
- throw('aria-valuemax without aria-valuemin: default range will be used');
+ throw new OperatorError('aria-valuemax without aria-valuemin: default range will be used');
else
opts.range = [min,max];
}
opts.value = el.get('value') || el.dataset.value || 0;
- // console.debug('Create knob '+el.id);
new Knob(opts);
- });
-}
+ }); // Next element to convert
+}
+
+
+// ## OperatorError
+// Exception object for your pleasure.
+function OperatorError(message) {
+ this.message = message;
+ this.name = "OperatorError";
+}
+// ## Finally
+// Que our parse of the DOM
document.addEvent('domready', function(){
Knob.parseDOM();
});

No commit comments for this range

Something went wrong with that request. Please try again.