Permalink
Browse files

Moved files

  • Loading branch information...
1 parent b1a1a17 commit dfda6dddb3d2c6de168f3b1e9384b3feb22fd1e3 @leegee committed Oct 27, 2012
View
@@ -16,7 +16,7 @@
<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 - Double-click support, degreesoffset
+<p>Version 0.5 - degreesoffset, nearly got double-click support,
Version 0.4 - Default pointer
Version 0.2 - WIA-ARIA and keyboard control Support</p>
@@ -342,14 +342,15 @@
<span class="nx">opts</span><span class="p">.</span><span class="nx">range</span> <span class="o">=</span> <span class="p">[</span><span class="nx">min</span><span class="p">,</span><span class="nx">max</span><span class="p">];</span>
<span class="p">}</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;value&#39;</span><span class="p">)</span> <span class="o">||</span> <span class="nx">el</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">value</span> <span class="o">||</span> <span class="mi">0</span><span class="p">;</span>
- </pre></div> </td> </tr> <tr id="section-50"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-50">&#182;</a> </div> <p>console.debug('Create knob '+el.id);</p> </td> <td class="code"> <div class="highlight"><pre> <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="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>OperatorError</h2>
+
+ <span class="k">new</span> <span class="nx">Knob</span><span class="p">(</span><span class="nx">opts</span><span class="p">);</span>
+ <span class="p">});</span> <span class="c1">// Next element to convert</span>
+<span class="p">}</span></pre></div> </td> </tr> <tr id="section-50"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-50">&#182;</a> </div> <h2>OperatorError</h2>
<p>Exception object for your pleasure.</p> </td> <td class="code"> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">OperatorError</span><span class="p">(</span><span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">message</span> <span class="o">=</span> <span class="nx">message</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="s2">&quot;OperatorError&quot;</span><span class="p">;</span>
-<span class="p">}</span></pre></div> </td> </tr> <tr id="section-52"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-52">&#182;</a> </div> <h2> Finally</h2>
+<span class="p">}</span></pre></div> </td> </tr> <tr id="section-51"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-51">&#182;</a> </div> <h2> Finally</h2>
<p>Que our parse of the DOM</p> </td> <td class="code"> <div class="highlight"><pre><span class="nb">document</span><span class="p">.</span><span class="nx">addEvent</span><span class="p">(</span><span class="s1">&#39;domready&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span>
<span class="nx">Knob</span><span class="p">.</span><span class="nx">parseDOM</span><span class="p">();</span>
View
@@ -1,203 +0,0 @@
-<html lang='en'>
-<head>
- <title>MooTools Knob</title>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <meta charset="utf-8">
-
- <meta name="author" content="Lee Goddard (http://www.leegoddard.net/)" />
- <meta name="copyright" content="Copyright (c) 2011 Lee Goddard" />
- <meta name="description" content="A rotary knob control for MooTools"/>
- <meta name="keywords" content="knob, rotary, ui, mootools, javascript"/>
-
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.4/mootools-yui-compressed.js"></script>
-
- <script type="text/javascript" src="../Source/Knob.js"></script>
-
- <script type="text/javascript">
- window.addEvent('domready', function() {
- var valueDisplaly = $('knob-js-value');
- var knob = new Knob({
- element: 'knob-js',
- onTick: function(){
- valueDisplaly.set('text', this.value );
- }
- });
- });
- </script>
-
- <style>
- .rotary,
- .rotary2 {
- outline: 0;
- border: 1px solid black;
- background: silver;
- text-align: center;
- border-radius: 50%;
- font-weight: bold;
- font-size:42pt;
- line-height: 42pt;
- width: 42pt;
- height: 42pt;
- }
-
- .rotary2 {
- background: gold;
- border: 2px solid gray;
- background-image: -moz-radial-gradient(12pt 12pt 45deg, circle cover, yellow 0%, orange 100%, red 95%);
- background-image: -webkit-radial-gradient(12pt 12pt, circle cover, yellow, orange);
- background-image: radial-gradient(12pt 12pt 45deg, circle cover, yellow 0%, orange 100%, red 95%);
- }
-
- </style>
- </head>
-
-
- <body>
- <header><h1>MooTools Knob</h1></header>
-
- <section>
- <h2>An HTML knob with a range of +/-180</h2>
- <xmp>
- <span id='knob-html1'
- class='mooknob'
- aria-valuemin='-180'
- aria-valuemax='180'
- data-value='0'
- style='background:#aaa; margin-left:200px;font-size:32pt'
- ></span>
- </xmp>
- <p>The result:
- <span id='knob-html1'
- aria-valuemin='-180'
- aria-valuemax='180'
- data-value='0'
- style='background:#aaa; margin-left:200px;font-size:32pt' class='mooknob'></span>
- </p>
- </section>
-
- <section>
- <h2>An HTML knob with more CSS:</h2>
- <xmp>
- <span id='knob-html2'
- class='mooknob'
- data-addpointer='false'
- style='margin-left:200px;
- font-size:32pt;
- border-color: black;
- background: silver;
- text-align: center;
- border-radius: 50%;
- width: 1.2em;
- height: 1.2em;
- '>⇪</span>
- </xmp>
- <p>The result:
- <span id='knob-html2'
- class='mooknob'
- data-addpointer='false'
- style='margin-left:200px;
- border: 1px solid black;
- background: silver;
- text-align: center;
- border-radius: 50%;
- font-size:28pt;
- width: 32pt;
- height: 32pt;
- '>⇪</span>
- </p>
-
- <p>
- As above, with default pointer, and still with an implict range of +/-100,
- with initial values of -100, -50, 0, 50, 100, set in
- the 'calling' element's <code>data-value</code> field:
- </p>
- <p>
- <span style='margin-left:1em' data-value=-100 class='rotary mooknob'></span>
- <span style='margin-left:1em' data-value=-50 class='rotary mooknob'></span>
- <span style='margin-left:1em' data-value=0 class='rotary mooknob'></span>
- <span style='margin-left:1em' data-value=50 class='rotary mooknob'></span>
- <span style='margin-left:1em' data-value=100 class='rotary mooknob'></span>
- </p>
-
-
- </section>
-
- <section>
- <h2>JavaScript API</h2>
- <p>
- A CSS (lightly) styled knob controlled by JavaScript, with a callback to
- update the value display, and a default range of +/-100:
- </p>
-
-<xmp>
- <script type="text/javascript">
- window.addEvent('domready', function() {
- var valueDisplaly = $('knob-js-value');
- var knob = new Knob({
- element: 'knob-js',
- onTick: function(){
- valueDisplaly.set('text', this.value );
- }
- });
- });
- </script>
-
- <span id='knob-js'></span>
- &mdash; value <span id='knob-js-value'></span>
-</xmp>
-
- <p>The result:
- <span id='knob-js'
- style='margin-left:200px;
- border: 1px solid black;
- background: silver;
- text-align: center;
- border-radius: 50%;
- font-size:28pt;
- width: 32pt;
- height: 32pt;
- '></span>
- &mdash; value <span id='knob-js-value'></span>
- </p>
- </section>
-
- <section>
- <h2>As previous, but without JavaScript, plus two-way interation with input field</h2>
- <xmp>
- <span id='knob-jsX' class='mooknob rotary2' data-monitor='knob-jsX-value'></span>
- &mdash; value <span id='knob-jsX-value'></span>
- </xmp>
-
- <p>The result:
- <span id='knob-js99'
- class='mooknob rotary2'
- data-monitor='knob-js99-value'
- style='margin-left:20px'></span>
- &mdash; value <input type='text' value='12' id='knob-js99-value'></span>
- </p>
- </section>
-
- <section>
- <h2>Inline Graphics</h2>
- <p>Default values, with quick graphics:</p>
- <xmp>
- <div style='position:absolute'>
- <span id='bg' style='position:absolute;top:0;background:url(knob_bg_164x165.png); width:164px; height:165px'></span>
- <span class='mooknob' id='fg'
- data-addpointer='false'
- data-scale='0.1'
- style='position:absolute;top:0;left:0;background:url(knob_fg_164x165.png); width:164px; height:165px'></span>
- </div>
- </xmp>
- <p style='position:absolute'>
- Result:
- <span id='bg' style='position:absolute;top:0;left:200px;background:url(knob_bg_164x165.png); width:164px; height:165px'></span>
- <span class='mooknob' data-addpointer='false'
- data-scale='0.1'
- id='fg' style='position:absolute;top:0;left:200px;background:url(knob_fg_164x165.png); width:164px; height:165px'></span>
- </div>
- </section>
-
- </body>
-</html>
-
Deleted file not rendered
Deleted file not rendered
View
Deleted file not rendered

0 comments on commit dfda6dd

Please sign in to comment.