Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Docs and typo in onMouseup case

  • Loading branch information...
commit de94f601abb5725c69d40a034f73b3ac498ac455 1 parent 9d0db18
Lee Goddard authored November 01, 2012
23  Docs/Knob.html
@@ -17,7 +17,8 @@
17 17
 <span class="cm">...</span>
18 18
 <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>
19 19
 
20  
-<p>Version 0.7 - auto-scale for dragging
  20
+<p>Version 0.8 - added onComplete event and support data-set defined events
  21
+Version 0.7 - auto-scale for dragging
21 22
 Version 0.6 - degrees-to-value for dblclick; better dragging: still no auto-scale for dragging
22 23
 Version 0.5 - degreesoffset, nearly got double-click support, 
23 24
 Version 0.4 - Default pointer
@@ -31,14 +32,15 @@
31 32
 <p>Provides events:</p>
32 33
 
33 34
 <pre><code>onMousedown - when the knob is clicked
34  
-onTick - every time the knob turns
  35
+onTick - every time the knob turns, prior to rendering
35 36
 onMouseup - when the knob is released
  37
+onComplete - when control has been left for n milliseconds
36 38
 </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>
37 39
 
38 40
 <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>
39 41
   <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
40  
-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>Milliseconds after which onComplete is fired if render has been inactive</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="nx">completedelay</span><span class="o">:</span> <span class="mi">500</span><span class="p">,</span>
41  
-    </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 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-20">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-20">&#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-21">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-21">&#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></pre></div>             </td>           </tr>                               <tr id="section-22">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-22">&#182;</a>               </div>               <p>Fired when movement is complete, after <code>options.completedelay</code> milliseconds</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="nx">onComplete</span><span class="o">:</span>   <span class="kd">function</span><span class="p">(){}</span>
  42
+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>Milliseconds after which onComplete is fired if render has been inactive</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="nx">completedelay</span><span class="o">:</span> <span class="mi">1000</span><span class="p">,</span>
  43
+    </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 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-20">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-20">&#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-21">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-21">&#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></pre></div>             </td>           </tr>                               <tr id="section-22">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-22">&#182;</a>               </div>               <p>Fired when movement is complete, after <code>options.completedelay</code> milliseconds</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="nx">onComplete</span><span class="o">:</span>   <span class="kd">function</span><span class="p">(){}</span>
42 44
   <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>               <h3> Other fields</h3>             </td>             <td class="code">               <div class="highlight"><pre>  </pre></div>             </td>           </tr>                               <tr id="section-24">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-24">&#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-25">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-25">&#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-26">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-26">&#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-27">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-27">&#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-28">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-28">&#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-29">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-29">&#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-30">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-30">&#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-31">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-31">&#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-32">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-32">&#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-33">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-33">&#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-34">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-34">&#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-35">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-35">&#182;</a>               </div>               <p>Timer - see render()</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nx">onCompleteTimer</span><span class="o">:</span>  <span class="kc">null</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>Set to false after initial render</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nx">initialising</span><span class="o">:</span> <span class="kc">true</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>Flag</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nx">allowRender</span><span class="o">:</span> <span class="kc">true</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>               <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>
43 45
     <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>
44 46
     
@@ -354,12 +356,15 @@
354 356
           <span class="k">return</span> <span class="s1">&#39;on&#39;</span> <span class="o">+</span> <span class="nx">initial</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">()</span> <span class="o">+</span> <span class="nx">remainder</span><span class="p">;</span>
355 357
         <span class="p">}</span>
356 358
       <span class="p">)</span> <span class="o">||</span> <span class="nx">i</span><span class="p">;</span>
357  
-      </pre></div>             </td>           </tr>                               <tr id="section-62">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-62">&#182;</a>               </div>               <p>Rough casting </p>             </td>             <td class="code">               <div class="highlight"><pre>      <span class="k">try</span> <span class="p">{</span> 
  359
+      </pre></div>             </td>           </tr>                               <tr id="section-62">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-62">&#182;</a>               </div>               <p>If key changed fron onx to onX, assume code to wrap:</p>             </td>             <td class="code">               <div class="highlight"><pre>      <span class="k">if</span> <span class="p">(</span><span class="nx">keyToSet</span> <span class="o">!=</span> <span class="nx">i</span><span class="p">){</span>
  360
+        <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="o">=</span> <span class="s1">&#39;(function(){ &#39;</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="o">+</span><span class="s1">&#39;})&#39;</span><span class="p">;</span>
  361
+      <span class="p">}</span>
  362
+      </pre></div>             </td>           </tr>                               <tr id="section-63">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-63">&#182;</a>               </div>               <p>Rough casting </p>             </td>             <td class="code">               <div class="highlight"><pre>      <span class="k">try</span> <span class="p">{</span>
358 363
         <span class="nx">opts</span><span class="p">[</span><span class="nx">keyToSet</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>
359 364
       <span class="p">}</span>
360  
-      <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-63">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-63">&#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>
  365
+      <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-64">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-64">&#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>
361 366
           <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>
362  
-        <span class="p">}</span> </pre></div>             </td>           </tr>                               <tr id="section-64">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-64">&#182;</a>               </div>               <p>Real issues</p>             </td>             <td class="code">               <div class="highlight"><pre>        <span class="k">else</span> <span class="p">{</span>
  367
+        <span class="p">}</span> </pre></div>             </td>           </tr>                               <tr id="section-65">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-65">&#182;</a>               </div>               <p>Real issues</p>             </td>             <td class="code">               <div class="highlight"><pre>        <span class="k">else</span> <span class="p">{</span>
363 368
           <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">keyToSet</span><span class="o">+</span><span class="s1">&#39; from dataset&#39;</span><span class="p">);</span>
364 369
           <span class="nx">console</span><span class="p">.</span><span class="nx">log</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>
365 370
           <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>
@@ -383,12 +388,12 @@
383 388
     
384 389
     <span class="k">new</span> <span class="nx">Knob</span><span class="p">(</span><span class="nx">opts</span><span class="p">);</span>
385 390
   <span class="p">});</span> <span class="c1">// Next element to convert</span>
386  
-<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-65">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-65">&#182;</a>               </div>               <h2>OperatorError</h2>
  391
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-66">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-66">&#182;</a>               </div>               <h2>OperatorError</h2>
387 392
 
388 393
 <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>
389 394
    <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>
390 395
    <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>
391  
-<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-66">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-66">&#182;</a>               </div>               <h2> Finally</h2>
  396
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-67">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-67">&#182;</a>               </div>               <h2> Finally</h2>
392 397
 
393 398
 <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>
394 399
   <span class="nx">Knob</span><span class="p">.</span><span class="nx">parseDOM</span><span class="p">();</span>  
6  Source/Knob.js
@@ -33,9 +33,9 @@ provides: [Knob]
33 33
 //	Provides events:
34 34
 //	
35 35
 //		onMousedown - when the knob is clicked
36  
-//		onTick - every time the knob turns
  36
+//		onTick - every time the knob turns, prior to rendering
37 37
 //		onMouseup - when the knob is released
38  
-
  38
+//		onComplete - when control has been left for n milliseconds
39 39
 
40 40
 // ## Disgusting global variable
41 41
 // Thhis horrible global variable seems to be necessary 
@@ -80,7 +80,7 @@ var Knob = new Class({
80 80
 		// Fired when the main mouse button is depressed, but after processing
81 81
 		onMousedown: 	function(){},
82 82
 		// Fired when the main mouse button is released, but after processing
83  
-		onmouseup:		function(){},
  83
+		onMouseup:		function(){},
84 84
 		// Fired when movement is complete, after `options.completedelay` milliseconds
85 85
 		onComplete:		function(){}
86 86
 	},

0 notes on commit de94f60

Please sign in to comment.
Something went wrong with that request. Please try again.