Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Docs

  • Loading branch information...
commit b9c45b3d3fafab282bc76268d7512fbd27e57dfb 1 parent 326efe6
@leegee authored
Showing with 101 additions and 85 deletions.
  1. +79 −68 Docs/Knob.html
  2. +5 −6 README.md
  3. +17 −11 Source/Knob.js
View
147 Docs/Knob.html
@@ -10,13 +10,16 @@
<span class="cm">requires:</span>
<span class="cm">- Core </span>
<span class="cm">- Element.Dimensions</span>
+<span class="cm">- Element.Measure</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,
+<p>Version 0.7 - auto-scale for dragging
+Version 0.6 - degrees-to-value for dblclick; better dragging: still no auto-scale for dragging
+Version 0.5 - degreesoffset, nearly got double-click support,
Version 0.4 - Default pointer
Version 0.2 - WIA-ARIA and keyboard control Support</p>
@@ -33,19 +36,19 @@
</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>
+ <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
+Set in relation to the <code>range</code> option, unless the user specifies a value</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">scale</span><span class="o">:</span> <span class="kc">null</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="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> </pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">&#182;</a> </div> <p>Positioning info for double-click-to-value </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">dblClickAnchor</span><span class="o">:</span> <span class="kc">null</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> <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
+ </pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">&#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-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">&#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>
@@ -54,7 +57,7 @@
<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>
@@ -69,26 +72,30 @@
<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>
+ </pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">&#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="k">this</span><span class="p">.</span><span class="nx">renderRange</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">0</span><span class="p">])</span> <span class="p">)</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">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">renderRange</span> <span class="o">&gt;</span> <span class="mi">999</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">scale</span> <span class="o">=</span> <span class="mi">1</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">renderRange</span> <span class="o">&gt;</span> <span class="mi">99</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">scale</span> <span class="o">=</span> <span class="mf">0.1</span>
+ <span class="k">else</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">scale</span> <span class="o">=</span> <span class="mf">0.01</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="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>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">dblclick</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">dblclick</span><span class="p">,</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="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>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>
@@ -102,8 +109,7 @@
<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">dblclick</span><span class="o">:</span> <span class="nx">__ActiveMooToolsKnobCtrl__</span><span class="p">.</span><span class="nx">dblclick</span><span class="p">,</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>
@@ -117,41 +123,31 @@
<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="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-40"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40">&#182;</a> </div> <p>Double-click the control to set it's value</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">dblclick</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></pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">&#182;</a> </div> <p>This is only set when needed, and reset incase of page resize</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">dblClickAnchor</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">getCoordinates</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>Find the angle between the element centre and the click:</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">degrees</span> <span class="o">=</span> <span class="p">((</span><span class="nx">self</span><span class="p">.</span><span class="nx">angleBetween2Points</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>Co-ords of click within element:</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">[</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">dblClickAnchor</span><span class="p">.</span><span class="nx">left</span><span class="p">,</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">dblClickAnchor</span><span class="p">.</span><span class="nx">top</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>Centre of element is width/2, height/2</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">[</span><span class="nx">self</span><span class="p">.</span><span class="nx">dblClickAnchor</span><span class="p">.</span><span class="nx">width</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span>
+ <span class="nx">self</span><span class="p">.</span><span class="nx">dblClickAnchor</span><span class="p">.</span><span class="nx">height</span><span class="o">/</span><span class="mi">2</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>Adjust for display </p> </td> <td class="code"> <div class="highlight"><pre> <span class="o">-</span> <span class="mi">180</span><span class="p">)</span> <span class="o">*</span> <span class="o">-</span><span class="mi">1</span><span class="p">);</span>
+ <span class="cm">/* + self.options.degreesoffset; */</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="kd">var</span> <span class="nx">stepPerDegree</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">renderRange</span> <span class="o">/</span> <span class="mi">360</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="mi">0</span><span class="p">]</span> <span class="o">+</span> <span class="nx">stepPerDegree</span> <span class="o">*</span> <span class="nx">degrees</span><span class="p">;</span>
+
+ <span class="cm">/*</span>
+<span class="cm"> $(&#39;degrees&#39;).set(&#39;text&#39;, degrees);</span>
+<span class="cm"> $(&#39;value&#39;).set(&#39;text&#39;, stepPerDegree +&#39; ... &#39;+ self.value);</span>
+<span class="cm"> */</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="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="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="o">*</span> <span class="p">(</span><span class="mi">180</span> <span class="o">/</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">PI</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>
+ </pre></div> </td> </tr> <tr id="section-46"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-46">&#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>
@@ -177,7 +173,7 @@
<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
+ <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>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
@@ -217,22 +213,13 @@
<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">focus</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>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,
+ <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>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.
@@ -254,13 +241,37 @@
<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="cm">/*</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="cm"> */</span>
+
+ <span class="k">if</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="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">x</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">x</span> <span class="o">&lt;</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">movement</span> <span class="o">*=</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">movement</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="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">y</span> <span class="o">&lt;</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="nx">self</span><span class="p">.</span><span class="nx">movement</span> <span class="o">*=</span> <span class="o">-</span><span class="mi">1</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">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">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-50"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-50">&#182;</a> </div> <p>Cancel the movemouse/dragging events
+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-45"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-45">&#182;</a> </div> <p>Rotates the control knob.
+
+ </pre></div> </td> </tr> <tr id="section-51"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-51">&#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>
@@ -302,7 +313,7 @@
<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>
+<span class="p">});</span></pre></div> </td> </tr> <tr id="section-52"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-52">&#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>.
@@ -318,14 +329,14 @@
<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="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-53"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-53">&#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="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-54"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-54">&#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="p">}</span> </pre></div> </td> </tr> <tr id="section-55"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-55">&#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="nx">console</span><span class="p">.</span><span class="nx">error</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>
@@ -345,12 +356,12 @@
<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>
+<span class="p">}</span></pre></div> </td> </tr> <tr id="section-56"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-56">&#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>
+<span class="p">}</span></pre></div> </td> </tr> <tr id="section-57"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-57">&#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>
View
11 README.md
@@ -31,13 +31,12 @@ depressed. If the alt/meta key is depressed whilst a cursor key is
pressed, the value of the control is set to its maximum or minimum,
dependent on the cursor key.
-The effect of mouse dragging the control must be scaled using the
+The effect of mouse dragging the control is scaled using the
option `scale`: that is, the number of pixels moved will be multiplied
by the value of the `scale` option (or `data-scale` attribute) and added
-to the current value of the knob. If your knob runs from -1000 to 1000, you
-may not need to set the `scale`, but if you knob runs from 1 to 10, then a
-typical mouse movement of 100 pixels will have be useless without at least
-setting `scale` to at least 0.01. What an `autoscale` option be useful?
+to the current value of the knob: the great the range of the knob, the smaller
+the value of `scale`. If you do not like the speed of the knob movement
+in relation to mouse dragging, change `scale`.
Monitoring
----------
@@ -116,7 +115,7 @@ The following options are available. Some may be supplied as
* `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)
+* `scale`: (*null*) Multiplier applied to the number of pixels the mosue may be moved, to acheive change in the `value` field (see Events, below). This is set automatically upon initialisation, unless the user specifies a value.
* `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.
View
28 Source/Knob.js
@@ -18,6 +18,7 @@ provides: [Knob]
*/
// # MooKnob
+// Version 0.7 - auto-scale for dragging
// Version 0.6 - degrees-to-value for dblclick; better dragging: still no auto-scale for dragging
// Version 0.5 - degreesoffset, nearly got double-click support,
// Version 0.4 - Default pointer
@@ -55,8 +56,9 @@ var Knob = new Class({
addpointer: '',
// Minimum and maximum values
range: [-100, 100],
- // Multiplier applied to number of px moved, to acheive change in .value
- scale: 1,
+ // Multiplier applied to number of px moved, to acheive change in .value
+ // Set in relation to the `range` option, unless the user specifies a value
+ scale: null,
// When arrow keys control knob, incrase knob value by this
keychangeby: 1,
// As keyUnit but for when shift key is also pressed
@@ -153,6 +155,10 @@ var Knob = new Class({
+ Math.abs( parseFloat(self.options.range[0]) )
+ Math.abs( parseFloat(self.options.range[1]) );
+ if (this.renderRange > 999) this.options.scale = 1
+ else if (this.renderRange > 99) this.options.scale = 0.1
+ else this.options.scale = 0.01
+
this.attach();
this.render(); // display initial value1
},
@@ -218,14 +224,16 @@ var Knob = new Class({
self.dblClickAnchor.height/2]
)
// Adjust for display
- - 180) * -1)
- // + self.options.degreesoffset;
+ - 180) * -1);
+ /* + self.options.degreesoffset; */
var stepPerDegree = self.renderRange / 360;
self.value = self.options.range[0] + stepPerDegree * degrees;
- // $('degrees').set('text', degrees);
- // $('value').set('text', stepPerDegree +' ... '+ self.value);
+ /*
+ $('degrees').set('text', degrees);
+ $('value').set('text', stepPerDegree +' ... '+ self.value);
+ */
self.render();
},
@@ -339,9 +347,9 @@ 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) );
-
- // self.movement = (Math.abs(self.x) > Math.abs(self.y)? self.x : self.y);
+ /*
+ var d = Math.sqrt( Math.pow(self.movementAnchor.x + self.x, 2) + Math.pow(self.movementAnchor.y + self.y, 2) );
+ */
if (Math.abs(self.x) > Math.abs(self.y)){
self.movement = self.x;
@@ -357,8 +365,6 @@ var Knob = new Class({
self.value = self.initialValue +
(self.movement * self.options.scale);
- // console.log( self.initialValue +' moved by '+ (self.movement * self.options.scale) +' = '+self.value);
-
self.render();
},
Please sign in to comment.
Something went wrong with that request. Please try again.