2136 lines
259 KiB
HTML
2136 lines
259 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
|
<title>360player.js</title>
|
|
<meta name="robots" content="noindex" />
|
|
<link rel="stylesheet" href="http://jashkenas.github.com/docco/resources/docco.css">
|
|
</head>
|
|
<body>
|
|
<div id='container'>
|
|
<div id="background"></div>
|
|
<div id="jump_to">
|
|
Jump To …
|
|
<div id="jump_wrapper">
|
|
<div id="jump_page">
|
|
<a class="source" href="360player.html">360player.js</a>
|
|
<a class="source" href="../../flashblock/flashblock.html">flashblock.css</a>
|
|
<a class="source" href="../../mp3-player-button/script/mp3-player-button.html">mp3-player-button.js</a>
|
|
<a class="source" href="../../mpc/script/mpc.html">mpc.js</a>
|
|
<a class="source" href="../../page-player/script/page-player.html">page-player.js</a>
|
|
<a class="source" href="../../play-mp3-links/script/inlineplayer.html">inlineplayer.js</a>
|
|
<a class="source" href="../../../script/soundmanager2.html">soundmanager2.js</a>
|
|
<a class="source" href="../../../src/SoundManager2.html">SoundManager2.as</a>
|
|
<a class="source" href="../../../src/SoundManager2_AS3.html">SoundManager2_AS3.as</a>
|
|
<a class="source" href="../../../src/SoundManager2_SMSound_AS3.html">SoundManager2_SMSound_AS3.as</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<table cellspacing=0 cellpadding=0>
|
|
<thead>
|
|
<tr>
|
|
<th class=docs><h1>360player.js</h1></th>
|
|
<th class=code></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr id='section-SoundManager_2_Demo:_360-degree_/_&ldquo;donut_player&rdquo;'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-SoundManager_2_Demo:_360-degree_/_&ldquo;donut_player&rdquo;">¶</a>
|
|
</div>
|
|
<h2>SoundManager 2 Demo: 360-degree / “donut player”</h2>
|
|
|
|
<p>http://schillmania.com/projects/soundmanager2/</p>
|
|
|
|
<p>An inline player with a circular UI.
|
|
Based on the original SM2 inline player.
|
|
Inspired by Apple’s preview feature in the
|
|
iTunes music store (iPhone), among others.</p>
|
|
|
|
<p>Requires SoundManager 2 Javascript API.
|
|
Also uses Bernie’s Better Animation Class (BSD):
|
|
http://www.berniecode.com/writing/animator.html</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre><span class="cm">/*jslint white: false, onevar: true, undef: true, nomen: false, eqeqeq: true, plusplus: false, bitwise: true, regexp: false, newcap: true, immed: true */</span>
|
|
<span class="cm">/*global document, window, soundManager, navigator */</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">threeSixtyPlayer</span><span class="p">,</span> <span class="c1">// instance</span>
|
|
<span class="nx">ThreeSixtyPlayer</span><span class="p">;</span> <span class="c1">// constructor</span>
|
|
|
|
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nb">window</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="kd">function</span> <span class="nx">ThreeSixtyPlayer</span><span class="p">()</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">pl</span> <span class="o">=</span> <span class="k">this</span><span class="p">,</span>
|
|
<span class="nx">sm</span> <span class="o">=</span> <span class="nx">soundManager</span><span class="p">,</span> <span class="c1">// soundManager instance</span>
|
|
<span class="nx">uA</span> <span class="o">=</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">,</span>
|
|
<span class="nx">isIE</span> <span class="o">=</span> <span class="p">(</span><span class="nx">uA</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/msie/i</span><span class="p">)),</span>
|
|
<span class="nx">isOpera</span> <span class="o">=</span> <span class="p">(</span><span class="nx">uA</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/opera/i</span><span class="p">)),</span>
|
|
<span class="nx">isSafari</span> <span class="o">=</span> <span class="p">(</span><span class="nx">uA</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/safari/i</span><span class="p">)),</span>
|
|
<span class="nx">isChrome</span> <span class="o">=</span> <span class="p">(</span><span class="nx">uA</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/chrome/i</span><span class="p">)),</span>
|
|
<span class="nx">isFirefox</span> <span class="o">=</span> <span class="p">(</span><span class="nx">uA</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/firefox/i</span><span class="p">)),</span>
|
|
<span class="nx">isTouchDevice</span> <span class="o">=</span> <span class="p">(</span><span class="nx">uA</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/ipad|iphone/i</span><span class="p">)),</span>
|
|
<span class="nx">hasRealCanvas</span> <span class="o">=</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">G_vmlCanvasManager</span> <span class="o">===</span> <span class="s1">'undefined'</span> <span class="o">&&</span> <span class="k">typeof</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'canvas'</span><span class="p">).</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">'2d'</span><span class="p">)</span> <span class="o">!==</span> <span class="s1">'undefined'</span><span class="p">),</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-2'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-2">¶</a>
|
|
</div>
|
|
<p>I dunno what Opera doesn’t like about this. I’m probably doing it wrong.</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">fullCircle</span> <span class="o">=</span> <span class="p">(</span><span class="nx">isOpera</span><span class="o">||</span><span class="nx">isChrome</span><span class="o">?</span><span class="mf">359.9</span><span class="o">:</span><span class="mi">360</span><span class="p">);</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-3'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-3">¶</a>
|
|
</div>
|
|
<p>CSS class for ignoring MP3 links</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">this</span><span class="p">.</span><span class="nx">excludeClass</span> <span class="o">=</span> <span class="s1">'threesixty-exclude'</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">links</span> <span class="o">=</span> <span class="p">[];</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">sounds</span> <span class="o">=</span> <span class="p">[];</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">soundsByURL</span> <span class="o">=</span> <span class="p">[];</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">indexByURL</span> <span class="o">=</span> <span class="p">[];</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">lastSound</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">lastTouchedSound</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">soundCount</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">oUITemplate</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">oUIImageMap</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">vuMeter</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">callbackCount</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">peakDataHistory</span> <span class="o">=</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">¶</a>
|
|
</div>
|
|
<p>360player configuration options</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">this</span><span class="p">.</span><span class="nx">config</span> <span class="o">=</span> <span class="p">{</span>
|
|
|
|
<span class="nx">playNext</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// stop after one sound, or play through list until end</span>
|
|
<span class="nx">autoPlay</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// start playing the first sound right away</span>
|
|
<span class="nx">allowMultiple</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// let many sounds play at once (false = only one sound playing at a time)</span>
|
|
<span class="nx">loadRingColor</span><span class="o">:</span> <span class="s1">'#ccc'</span><span class="p">,</span> <span class="c1">// how much has loaded</span>
|
|
<span class="nx">playRingColor</span><span class="o">:</span> <span class="s1">'#000'</span><span class="p">,</span> <span class="c1">// how much has played</span>
|
|
<span class="nx">backgroundRingColor</span><span class="o">:</span> <span class="s1">'#eee'</span><span class="p">,</span> <span class="c1">// color shown underneath load + play ("not yet loaded" color)</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-5'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-5">¶</a>
|
|
</div>
|
|
<p>optional segment/annotation (metadata) stuff..</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">segmentRingColor</span><span class="o">:</span> <span class="s1">'rgba(255,255,255,0.33)'</span><span class="p">,</span> <span class="c1">// metadata/annotation (segment) colors</span>
|
|
<span class="nx">segmentRingColorAlt</span><span class="o">:</span> <span class="s1">'rgba(0,0,0,0.1)'</span><span class="p">,</span>
|
|
<span class="nx">loadRingColorMetadata</span><span class="o">:</span> <span class="s1">'#ddd'</span><span class="p">,</span> <span class="c1">// "annotations" load color</span>
|
|
<span class="nx">playRingColorMetadata</span><span class="o">:</span> <span class="s1">'rgba(128,192,256,0.9)'</span><span class="p">,</span> <span class="c1">// how much has played when metadata is present</span>
|
|
|
|
<span class="nx">circleDiameter</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> <span class="c1">// set dynamically according to values from CSS</span>
|
|
<span class="nx">circleRadius</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
|
<span class="nx">animDuration</span><span class="o">:</span> <span class="mi">500</span><span class="p">,</span>
|
|
<span class="nx">animTransition</span><span class="o">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">Animator</span><span class="p">.</span><span class="nx">tx</span><span class="p">.</span><span class="nx">bouncy</span><span class="p">,</span> <span class="c1">// http://www.berniecode.com/writing/animator.html</span>
|
|
<span class="nx">showHMSTime</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// hours:minutes:seconds vs. seconds-only</span>
|
|
<span class="nx">scaleFont</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// also set the font size (if possible) while animating the circle</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-6'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-6">¶</a>
|
|
</div>
|
|
<p>optional: spectrum or EQ graph in canvas (not supported in IE <9, too slow via ExCanvas)</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">useWaveformData</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
|
|
<span class="nx">waveformDataColor</span><span class="o">:</span> <span class="s1">'#0099ff'</span><span class="p">,</span>
|
|
<span class="nx">waveformDataDownsample</span><span class="o">:</span> <span class="mi">3</span><span class="p">,</span> <span class="c1">// use only one in X (of a set of 256 values) - 1 means all 256</span>
|
|
<span class="nx">waveformDataOutside</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
|
|
<span class="nx">waveformDataConstrain</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// if true, +ve values only - keep within inside circle</span>
|
|
<span class="nx">waveformDataLineRatio</span><span class="o">:</span> <span class="mf">0.64</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">¶</a>
|
|
</div>
|
|
<p>“spectrum frequency” option</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">useEQData</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
|
|
<span class="nx">eqDataColor</span><span class="o">:</span> <span class="s1">'#339933'</span><span class="p">,</span>
|
|
<span class="nx">eqDataDownsample</span><span class="o">:</span> <span class="mi">4</span><span class="p">,</span> <span class="c1">// use only one in X (of 256 values)</span>
|
|
<span class="nx">eqDataOutside</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="nx">eqDataLineRatio</span><span class="o">:</span> <span class="mf">0.54</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">¶</a>
|
|
</div>
|
|
<p>enable “amplifier” (canvas pulses like a speaker) effect</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">usePeakData</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="nx">peakDataColor</span><span class="o">:</span> <span class="s1">'#ff33ff'</span><span class="p">,</span>
|
|
<span class="nx">peakDataOutside</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="nx">peakDataLineRatio</span><span class="o">:</span> <span class="mf">0.5</span><span class="p">,</span>
|
|
|
|
<span class="nx">useAmplifier</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// "pulse" like a speaker</span>
|
|
|
|
<span class="nx">fontSizeMax</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> <span class="c1">// set according to CSS</span>
|
|
|
|
<span class="nx">scaleArcWidth</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="c1">// thickness factor of playback progress ring</span>
|
|
|
|
<span class="nx">useFavIcon</span><span class="o">:</span> <span class="kc">false</span> <span class="c1">// Experimental (also requires usePeakData: true).. Try to draw a "VU Meter" in the favicon area, if browser supports it (Firefox + Opera as of 2009)</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">css</span> <span class="o">=</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">¶</a>
|
|
</div>
|
|
<p>CSS class names appended to link during various states</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">sDefault</span><span class="o">:</span> <span class="s1">'sm2_link'</span><span class="p">,</span> <span class="c1">// default state</span>
|
|
<span class="nx">sBuffering</span><span class="o">:</span> <span class="s1">'sm2_buffering'</span><span class="p">,</span>
|
|
<span class="nx">sPlaying</span><span class="o">:</span> <span class="s1">'sm2_playing'</span><span class="p">,</span>
|
|
<span class="nx">sPaused</span><span class="o">:</span> <span class="s1">'sm2_paused'</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">addEventHandler</span> <span class="o">=</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span> <span class="o">!==</span> <span class="s1">'undefined'</span> <span class="o">?</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span> <span class="nx">evtName</span><span class="p">,</span> <span class="nx">evtHandler</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="nx">o</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="nx">evtName</span><span class="p">,</span><span class="nx">evtHandler</span><span class="p">,</span><span class="kc">false</span><span class="p">);</span>
|
|
<span class="p">}</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span> <span class="nx">evtName</span><span class="p">,</span> <span class="nx">evtHandler</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">o</span><span class="p">.</span><span class="nx">attachEvent</span><span class="p">(</span><span class="s1">'on'</span><span class="o">+</span><span class="nx">evtName</span><span class="p">,</span><span class="nx">evtHandler</span><span class="p">);</span>
|
|
<span class="p">});</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">removeEventHandler</span> <span class="o">=</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">removeEventListener</span> <span class="o">!==</span> <span class="s1">'undefined'</span> <span class="o">?</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span> <span class="nx">evtName</span><span class="p">,</span> <span class="nx">evtHandler</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="nx">o</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="nx">evtName</span><span class="p">,</span><span class="nx">evtHandler</span><span class="p">,</span><span class="kc">false</span><span class="p">);</span>
|
|
<span class="p">}</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span> <span class="nx">evtName</span><span class="p">,</span> <span class="nx">evtHandler</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="nx">o</span><span class="p">.</span><span class="nx">detachEvent</span><span class="p">(</span><span class="s1">'on'</span><span class="o">+</span><span class="nx">evtName</span><span class="p">,</span><span class="nx">evtHandler</span><span class="p">);</span>
|
|
<span class="p">});</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">hasClass</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">cStr</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="k">typeof</span><span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">className</span><span class="p">)</span><span class="o">!==</span><span class="s1">'undefined'</span><span class="o">?</span><span class="nx">o</span><span class="p">.</span><span class="nx">className</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s1">'(\\s|^)'</span><span class="o">+</span><span class="nx">cStr</span><span class="o">+</span><span class="s1">'(\\s|$)'</span><span class="p">))</span><span class="o">:</span><span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">addClass</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">cStr</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">o</span> <span class="o">||</span> <span class="o">!</span><span class="nx">cStr</span> <span class="o">||</span> <span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">cStr</span><span class="p">))</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">o</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">className</span><span class="o">?</span><span class="nx">o</span><span class="p">.</span><span class="nx">className</span><span class="o">+</span><span class="s1">' '</span><span class="o">:</span><span class="s1">''</span><span class="p">)</span><span class="o">+</span><span class="nx">cStr</span><span class="p">;</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">removeClass</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">cStr</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">o</span> <span class="o">||</span> <span class="o">!</span><span class="nx">cStr</span> <span class="o">||</span> <span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">cStr</span><span class="p">))</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">o</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">className</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s1">'( '</span><span class="o">+</span><span class="nx">cStr</span><span class="o">+</span><span class="s1">')|('</span><span class="o">+</span><span class="nx">cStr</span><span class="o">+</span><span class="s1">')'</span><span class="p">,</span><span class="s1">'g'</span><span class="p">),</span><span class="s1">''</span><span class="p">);</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">getElementsByClassName</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">className</span><span class="p">,</span><span class="nx">tagNames</span><span class="p">,</span><span class="nx">oParent</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="p">(</span><span class="nx">oParent</span><span class="o">||</span><span class="nb">document</span><span class="p">),</span>
|
|
<span class="nx">matches</span> <span class="o">=</span> <span class="p">[],</span> <span class="nx">i</span><span class="p">,</span><span class="nx">j</span><span class="p">,</span> <span class="nx">nodes</span> <span class="o">=</span> <span class="p">[];</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">tagNames</span> <span class="o">!==</span> <span class="s1">'undefined'</span> <span class="o">&&</span> <span class="k">typeof</span> <span class="nx">tagNames</span> <span class="o">!==</span> <span class="s1">'string'</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="nx">tagNames</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">--</span><span class="p">;)</span> <span class="p">{</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">nodes</span> <span class="o">||</span> <span class="o">!</span><span class="nx">nodes</span><span class="p">[</span><span class="nx">tagNames</span><span class="p">[</span><span class="nx">i</span><span class="p">]])</span> <span class="p">{</span>
|
|
<span class="nx">nodes</span><span class="p">[</span><span class="nx">tagNames</span><span class="p">[</span><span class="nx">i</span><span class="p">]]</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="nx">tagNames</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">tagNames</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">nodes</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="nx">tagNames</span><span class="p">);</span>
|
|
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
|
<span class="nx">nodes</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">all</span><span class="o">||</span><span class="nx">doc</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'*'</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">tagNames</span><span class="p">)</span><span class="o">!==</span><span class="s1">'string'</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="nx">tagNames</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">--</span><span class="p">;)</span> <span class="p">{</span>
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">j</span><span class="o">=</span><span class="nx">nodes</span><span class="p">[</span><span class="nx">tagNames</span><span class="p">[</span><span class="nx">i</span><span class="p">]].</span><span class="nx">length</span><span class="p">;</span> <span class="nx">j</span><span class="o">--</span><span class="p">;)</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">hasClass</span><span class="p">(</span><span class="nx">nodes</span><span class="p">[</span><span class="nx">tagNames</span><span class="p">[</span><span class="nx">i</span><span class="p">]][</span><span class="nx">j</span><span class="p">],</span><span class="nx">className</span><span class="p">))</span> <span class="p">{</span>
|
|
<span class="nx">matches</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">nodes</span><span class="p">[</span><span class="nx">tagNames</span><span class="p">[</span><span class="nx">i</span><span class="p">]][</span><span class="nx">j</span><span class="p">]);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="nx">nodes</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</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">hasClass</span><span class="p">(</span><span class="nx">nodes</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span><span class="nx">className</span><span class="p">))</span> <span class="p">{</span>
|
|
<span class="nx">matches</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">nodes</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="k">return</span> <span class="nx">matches</span><span class="p">;</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">getParentByNodeName</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oChild</span><span class="p">,</span><span class="nx">sParentNodeName</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">oChild</span> <span class="o">||</span> <span class="o">!</span><span class="nx">sParentNodeName</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">sParentNodeName</span> <span class="o">=</span> <span class="nx">sParentNodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">();</span>
|
|
<span class="k">while</span> <span class="p">(</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span> <span class="o">&&</span> <span class="nx">sParentNodeName</span> <span class="o">!==</span> <span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">nodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">())</span> <span class="p">{</span>
|
|
<span class="nx">oChild</span> <span class="o">=</span> <span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="k">return</span> <span class="p">(</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span> <span class="o">&&</span> <span class="nx">sParentNodeName</span> <span class="o">===</span> <span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">nodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()</span><span class="o">?</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span><span class="o">:</span><span class="kc">null</span><span class="p">);</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">getParentByClassName</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oChild</span><span class="p">,</span><span class="nx">sParentClassName</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">oChild</span> <span class="o">||</span> <span class="o">!</span><span class="nx">sParentClassName</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="k">while</span> <span class="p">(</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">,</span><span class="nx">sParentClassName</span><span class="p">))</span> <span class="p">{</span>
|
|
<span class="nx">oChild</span> <span class="o">=</span> <span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="k">return</span> <span class="p">(</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span> <span class="o">&&</span> <span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">,</span><span class="nx">sParentClassName</span><span class="p">)</span><span class="o">?</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span><span class="o">:</span><span class="kc">null</span><span class="p">);</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">getSoundByURL</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sURL</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">self</span><span class="p">.</span><span class="nx">soundsByURL</span><span class="p">[</span><span class="nx">sURL</span><span class="p">]</span> <span class="o">!==</span> <span class="s1">'undefined'</span><span class="o">?</span><span class="nx">self</span><span class="p">.</span><span class="nx">soundsByURL</span><span class="p">[</span><span class="nx">sURL</span><span class="p">]</span><span class="o">:</span><span class="kc">null</span><span class="p">);</span>
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">isChildOfNode</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">sNodeName</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">o</span> <span class="o">||</span> <span class="o">!</span><span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">sNodeName</span> <span class="o">=</span> <span class="nx">sNodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">();</span>
|
|
<span class="k">do</span> <span class="p">{</span>
|
|
<span class="nx">o</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">;</span>
|
|
<span class="p">}</span> <span class="k">while</span> <span class="p">(</span><span class="nx">o</span> <span class="o">&&</span> <span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span> <span class="o">&&</span> <span class="nx">o</span><span class="p">.</span><span class="nx">nodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()</span> <span class="o">!==</span> <span class="nx">sNodeName</span><span class="p">);</span>
|
|
<span class="k">return</span> <span class="p">(</span><span class="nx">o</span> <span class="o">&&</span> <span class="nx">o</span><span class="p">.</span><span class="nx">nodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()</span> <span class="o">===</span> <span class="nx">sNodeName</span><span class="o">?</span><span class="nx">o</span><span class="o">:</span><span class="kc">null</span><span class="p">);</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">isChildOfClass</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oChild</span><span class="p">,</span><span class="nx">oClass</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">oChild</span> <span class="o">||</span> <span class="o">!</span><span class="nx">oClass</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="k">while</span> <span class="p">(</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">oChild</span><span class="p">,</span><span class="nx">oClass</span><span class="p">))</span> <span class="p">{</span>
|
|
<span class="nx">oChild</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">findParent</span><span class="p">(</span><span class="nx">oChild</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="k">return</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">oChild</span><span class="p">,</span><span class="nx">oClass</span><span class="p">));</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">findParent</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">o</span> <span class="o">||</span> <span class="o">!</span><span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">o</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">;</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">nodeType</span> <span class="o">===</span> <span class="mi">2</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">while</span> <span class="p">(</span><span class="nx">o</span> <span class="o">&&</span> <span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span> <span class="o">&&</span> <span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">nodeType</span> <span class="o">===</span> <span class="mi">2</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">o</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="k">return</span> <span class="nx">o</span><span class="p">;</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">getStyle</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">sProp</span><span class="p">)</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">¶</a>
|
|
</div>
|
|
<p>http://www.quirksmode.org/dom/getstyles.html</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">try</span> <span class="p">{</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">currentStyle</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="nx">o</span><span class="p">.</span><span class="nx">currentStyle</span><span class="p">[</span><span class="nx">sProp</span><span class="p">];</span>
|
|
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">getComputedStyle</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="nb">document</span><span class="p">.</span><span class="nx">defaultView</span><span class="p">.</span><span class="nx">getComputedStyle</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="kc">null</span><span class="p">).</span><span class="nx">getPropertyValue</span><span class="p">(</span><span class="nx">sProp</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-11'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-11">¶</a>
|
|
</div>
|
|
<p>oh well</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="p">}</span>
|
|
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">findXY</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">curleft</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">curtop</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
<span class="k">do</span> <span class="p">{</span>
|
|
<span class="nx">curleft</span> <span class="o">+=</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">offsetLeft</span><span class="p">;</span>
|
|
<span class="nx">curtop</span> <span class="o">+=</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">offsetTop</span><span class="p">;</span>
|
|
<span class="p">}</span> <span class="k">while</span> <span class="p">(</span><span class="o">!!</span><span class="p">(</span><span class="nx">obj</span> <span class="o">=</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">offsetParent</span><span class="p">));</span>
|
|
<span class="k">return</span> <span class="p">[</span><span class="nx">curleft</span><span class="p">,</span><span class="nx">curtop</span><span class="p">];</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">getMouseXY</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="p">{</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-12'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-12">¶</a>
|
|
</div>
|
|
<p>http://www.quirksmode.org/js/events_properties.html</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">e</span> <span class="o">=</span> <span class="nx">e</span><span class="o">?</span><span class="nx">e</span><span class="o">:</span><span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">;</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">isTouchDevice</span> <span class="o">&&</span> <span class="nx">e</span><span class="p">.</span><span class="nx">touches</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">e</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">touches</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
|
|
<span class="p">}</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span> <span class="o">||</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pageY</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="p">[</span><span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span><span class="p">,</span><span class="nx">e</span><span class="p">.</span><span class="nx">pageY</span><span class="p">];</span>
|
|
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span> <span class="o">||</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="p">[</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span><span class="o">+</span><span class="nx">self</span><span class="p">.</span><span class="nx">getScrollLeft</span><span class="p">(),</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span><span class="o">+</span><span class="nx">self</span><span class="p">.</span><span class="nx">getScrollTop</span><span class="p">()];</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">getScrollLeft</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">scrollLeft</span><span class="o">+</span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">scrollLeft</span><span class="p">);</span>
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">getScrollTop</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">scrollTop</span><span class="o">+</span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">scrollTop</span><span class="p">);</span>
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">events</span> <span class="o">=</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">¶</a>
|
|
</div>
|
|
<p>handlers for sound events as they’re started/stopped/played</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">play</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="nx">pl</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="nx">pl</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sPlaying</span><span class="p">;</span>
|
|
<span class="nx">pl</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">fanOut</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="nx">stop</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="nx">pl</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">fanIn</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="nx">pause</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="nx">pl</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="nx">pl</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sPaused</span><span class="p">;</span>
|
|
<span class="nx">pl</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="nx">resume</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="nx">pl</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="nx">pl</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sPlaying</span><span class="p">;</span>
|
|
<span class="nx">pl</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="nx">finish</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="kd">var</span> <span class="nx">nextLink</span><span class="p">;</span>
|
|
<span class="nx">pl</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">''</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">¶</a>
|
|
</div>
|
|
<p>self.clearCanvas(this._360data.oCanvas);</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">didFinish</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="c1">// so fan draws full circle</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">fanIn</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">pl</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">playNext</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">nextLink</span> <span class="o">=</span> <span class="p">(</span><span class="nx">pl</span><span class="p">.</span><span class="nx">indexByURL</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">.</span><span class="nx">href</span><span class="p">]</span><span class="o">+</span><span class="mi">1</span><span class="p">);</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">nextLink</span><span class="o"><</span><span class="nx">pl</span><span class="p">.</span><span class="nx">links</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">pl</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">({</span><span class="s1">'target'</span><span class="o">:</span><span class="nx">pl</span><span class="p">.</span><span class="nx">links</span><span class="p">[</span><span class="nx">nextLink</span><span class="p">]});</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="nx">whileloading</span><span class="o">:</span> <span class="kd">function</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">paused</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">updatePlaying</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="nx">whileplaying</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">updatePlaying</span><span class="p">.</span><span class="nx">apply</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">_360data</span><span class="p">.</span><span class="nx">fps</span><span class="o">++</span><span class="p">;</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="nx">bufferchange</span><span class="o">:</span> <span class="kd">function</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">isBuffering</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">pl</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="nx">pl</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sBuffering</span><span class="p">);</span>
|
|
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
|
<span class="nx">pl</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="nx">pl</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sBuffering</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">stopEvent</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="p">{</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">e</span> <span class="o">!==</span> <span class="s1">'undefined'</span> <span class="o">&&</span> <span class="k">typeof</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span> <span class="o">!==</span> <span class="s1">'undefined'</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
|
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">event</span> <span class="o">!==</span> <span class="s1">'undefined'</span> <span class="o">&&</span> <span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">returnValue</span> <span class="o">!==</span> <span class="s1">'undefined'</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">returnValue</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">getTheDamnLink</span> <span class="o">=</span> <span class="p">(</span><span class="nx">isIE</span><span class="p">)</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="p">{</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-15'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-15">¶</a>
|
|
</div>
|
|
<p>I really didn’t want to have to do this.</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">return</span> <span class="p">(</span><span class="nx">e</span> <span class="o">&&</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="o">?</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="o">:</span><span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">srcElement</span><span class="p">);</span>
|
|
<span class="p">}</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="p">{</span>
|
|
<span class="k">return</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">;</span>
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">handleClick</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="p">{</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-16'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-16">¶</a>
|
|
</div>
|
|
<p>a sound link was clicked</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">button</span> <span class="o">></span> <span class="mi">1</span><span class="p">)</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">¶</a>
|
|
</div>
|
|
<p>only catch left-clicks</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">o</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getTheDamnLink</span><span class="p">(</span><span class="nx">e</span><span class="p">),</span>
|
|
<span class="nx">sURL</span><span class="p">,</span> <span class="nx">soundURL</span><span class="p">,</span> <span class="nx">thisSound</span><span class="p">,</span> <span class="nx">oContainer</span><span class="p">,</span> <span class="nx">has_vis</span><span class="p">,</span> <span class="nx">diameter</span><span class="p">;</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">nodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()</span> <span class="o">!==</span> <span class="s1">'a'</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">o</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">isChildOfNode</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="s1">'a'</span><span class="p">);</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">o</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">isChildOfClass</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="s1">'ui360'</span><span class="p">))</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">¶</a>
|
|
</div>
|
|
<p>not a link we’re interested in</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">sURL</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s1">'href'</span><span class="p">);</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">o</span><span class="p">.</span><span class="nx">href</span> <span class="o">||</span> <span class="o">!</span><span class="nx">sm</span><span class="p">.</span><span class="nx">canPlayLink</span><span class="p">(</span><span class="nx">o</span><span class="p">)</span> <span class="o">||</span> <span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">excludeClass</span><span class="p">))</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span> <span class="c1">// pass-thru for non-MP3/non-links</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">sm</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">'handleClick()'</span><span class="p">);</span>
|
|
<span class="nx">soundURL</span> <span class="o">=</span> <span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">href</span><span class="p">);</span>
|
|
<span class="nx">thisSound</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getSoundByURL</span><span class="p">(</span><span class="nx">soundURL</span><span class="p">);</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">thisSound</span><span class="p">)</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">¶</a>
|
|
</div>
|
|
<p>already exists</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">thisSound</span> <span class="o">===</span> <span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">)</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">¶</a>
|
|
</div>
|
|
<p>and was playing (or paused)</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">togglePause</span><span class="p">();</span>
|
|
<span class="p">}</span> <span class="k">else</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">¶</a>
|
|
</div>
|
|
<p>different sound</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">togglePause</span><span class="p">();</span> <span class="c1">// start playing current</span>
|
|
<span class="nx">sm</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">'sound different than last sound: '</span><span class="o">+</span><span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">allowMultiple</span> <span class="o">&&</span> <span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">stopSound</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">}</span> <span class="k">else</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">¶</a>
|
|
</div>
|
|
<p>append some dom shiz, make noise</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">oContainer</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">;</span>
|
|
<span class="nx">has_vis</span> <span class="o">=</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'ui360-vis'</span><span class="p">,</span><span class="s1">'div'</span><span class="p">,</span><span class="nx">oContainer</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">).</span><span class="nx">length</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">¶</a>
|
|
</div>
|
|
<p>create sound</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">thisSound</span> <span class="o">=</span> <span class="nx">sm</span><span class="p">.</span><span class="nx">createSound</span><span class="p">({</span>
|
|
<span class="nx">id</span><span class="o">:</span><span class="s1">'ui360Sound'</span><span class="o">+</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">soundCount</span><span class="o">++</span><span class="p">),</span>
|
|
<span class="nx">url</span><span class="o">:</span><span class="nx">soundURL</span><span class="p">,</span>
|
|
<span class="nx">onplay</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">play</span><span class="p">,</span>
|
|
<span class="nx">onstop</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">stop</span><span class="p">,</span>
|
|
<span class="nx">onpause</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">pause</span><span class="p">,</span>
|
|
<span class="nx">onresume</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">resume</span><span class="p">,</span>
|
|
<span class="nx">onfinish</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">finish</span><span class="p">,</span>
|
|
<span class="nx">onbufferchange</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">bufferchange</span><span class="p">,</span>
|
|
<span class="nx">type</span><span class="o">:</span><span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">type</span><span class="o">||</span><span class="kc">null</span><span class="p">),</span>
|
|
<span class="nx">whileloading</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">whileloading</span><span class="p">,</span>
|
|
<span class="nx">whileplaying</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">whileplaying</span><span class="p">,</span>
|
|
<span class="nx">useWaveformData</span><span class="o">:</span><span class="p">(</span><span class="nx">has_vis</span> <span class="o">&&</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useWaveformData</span><span class="p">),</span>
|
|
<span class="nx">useEQData</span><span class="o">:</span><span class="p">(</span><span class="nx">has_vis</span> <span class="o">&&</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useEQData</span><span class="p">),</span>
|
|
<span class="nx">usePeakData</span><span class="o">:</span><span class="p">(</span><span class="nx">has_vis</span> <span class="o">&&</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">usePeakData</span><span class="p">)</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">¶</a>
|
|
</div>
|
|
<p>tack on some custom data</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">diameter</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'sm2-360ui'</span><span class="p">,</span><span class="s1">'div'</span><span class="p">,</span><span class="nx">oContainer</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">offsetWidth</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
|
|
|
|
<span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">oUI360</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getParentByClassName</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="s1">'ui360'</span><span class="p">),</span> <span class="c1">// the (whole) entire container</span>
|
|
<span class="nx">oLink</span><span class="o">:</span> <span class="nx">o</span><span class="p">,</span> <span class="c1">// DOM node for reference within SM2 object event handlers</span>
|
|
<span class="nx">className</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sPlaying</span><span class="p">,</span>
|
|
<span class="nx">oUIBox</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'sm2-360ui'</span><span class="p">,</span><span class="s1">'div'</span><span class="p">,</span><span class="nx">oContainer</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span>
|
|
<span class="nx">oCanvas</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'sm2-canvas'</span><span class="p">,</span><span class="s1">'canvas'</span><span class="p">,</span><span class="nx">oContainer</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span>
|
|
<span class="nx">oButton</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'sm2-360btn'</span><span class="p">,</span><span class="s1">'span'</span><span class="p">,</span><span class="nx">oContainer</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span>
|
|
<span class="nx">oTiming</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'sm2-timing'</span><span class="p">,</span><span class="s1">'div'</span><span class="p">,</span><span class="nx">oContainer</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span>
|
|
<span class="nx">oCover</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'sm2-cover'</span><span class="p">,</span><span class="s1">'div'</span><span class="p">,</span><span class="nx">oContainer</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span>
|
|
<span class="nx">circleDiameter</span><span class="o">:</span> <span class="nx">diameter</span><span class="p">,</span>
|
|
<span class="nx">circleRadius</span><span class="o">:</span> <span class="nx">diameter</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span>
|
|
<span class="nx">lastTime</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
|
<span class="nx">didFinish</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
|
<span class="nx">pauseCount</span><span class="o">:</span><span class="mi">0</span><span class="p">,</span>
|
|
<span class="nx">radius</span><span class="o">:</span><span class="mi">0</span><span class="p">,</span>
|
|
<span class="nx">fontSize</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>
|
|
<span class="nx">fontSizeMax</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">fontSizeMax</span><span class="p">,</span>
|
|
<span class="nx">scaleFont</span><span class="o">:</span> <span class="p">(</span><span class="nx">has_vis</span> <span class="o">&&</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">scaleFont</span><span class="p">),</span>
|
|
<span class="nx">showHMSTime</span><span class="o">:</span> <span class="nx">has_vis</span><span class="p">,</span>
|
|
<span class="nx">amplifier</span><span class="o">:</span> <span class="p">(</span><span class="nx">has_vis</span> <span class="o">&&</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">usePeakData</span><span class="o">?</span><span class="mf">0.9</span><span class="o">:</span><span class="mi">1</span><span class="p">),</span> <span class="c1">// TODO: x1 if not being used, else use dynamic "how much to amplify by" value</span>
|
|
<span class="nx">radiusMax</span><span class="o">:</span> <span class="nx">diameter</span><span class="o">*</span><span class="mf">0.175</span><span class="p">,</span> <span class="c1">// circle radius</span>
|
|
<span class="nx">width</span><span class="o">:</span><span class="mi">0</span><span class="p">,</span>
|
|
<span class="nx">widthMax</span><span class="o">:</span> <span class="nx">diameter</span><span class="o">*</span><span class="mf">0.4</span><span class="p">,</span> <span class="c1">// width of the outer ring</span>
|
|
<span class="nx">lastValues</span><span class="o">:</span> <span class="p">{</span>
|
|
<span class="nx">bytesLoaded</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
|
|
<span class="nx">bytesTotal</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
|
|
<span class="nx">position</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
|
|
<span class="nx">durationEstimate</span><span class="o">:</span> <span class="mi">0</span>
|
|
<span class="p">},</span> <span class="c1">// used to track "last good known" values before sound finish/reset for anim</span>
|
|
<span class="nx">animating</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
|
|
<span class="nx">oAnim</span><span class="o">:</span> <span class="k">new</span> <span class="nb">window</span><span class="p">.</span><span class="nx">Animator</span><span class="p">({</span>
|
|
<span class="nx">duration</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">animDuration</span><span class="p">,</span>
|
|
<span class="nx">transition</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">animTransition</span><span class="p">,</span>
|
|
<span class="nx">onComplete</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-25'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-25">¶</a>
|
|
</div>
|
|
<p>var thisSound = this;
|
|
thisSound._360data.didFinish = false; // reset full circle</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="p">}</span>
|
|
<span class="p">}),</span>
|
|
<span class="nx">oAnimProgress</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nProgress</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kd">var</span> <span class="nx">thisSound</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
|
<span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radius</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radiusMax</span><span class="o">*</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">amplifier</span><span class="o">*</span><span class="nx">nProgress</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
|
|
<span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">widthMax</span><span class="o">*</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">amplifier</span><span class="o">*</span><span class="nx">nProgress</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">scaleFont</span> <span class="o">&&</span> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">fontSizeMax</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oTiming</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">fontSizeMax</span><span class="o">*</span><span class="nx">nProgress</span><span class="p">),</span> <span class="mi">10</span><span class="p">)</span><span class="o">+</span><span class="s1">'px'</span><span class="p">;</span>
|
|
<span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oTiming</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">opacity</span> <span class="o">=</span> <span class="nx">nProgress</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">paused</span> <span class="o">||</span> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">playState</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">||</span> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">bytesLoaded</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">||</span> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">position</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">updatePlaying</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">},</span>
|
|
<span class="nx">fps</span><span class="o">:</span> <span class="mi">0</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">¶</a>
|
|
</div>
|
|
<p>“Metadata” (annotations)</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">self</span><span class="p">.</span><span class="nx">Metadata</span> <span class="o">!==</span> <span class="s1">'undefined'</span> <span class="o">&&</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'metadata'</span><span class="p">,</span><span class="s1">'div'</span><span class="p">,</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUI360</span><span class="p">).</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">metadata</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">self</span><span class="p">.</span><span class="nx">Metadata</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">,</span><span class="nx">self</span><span class="p">);</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">¶</a>
|
|
</div>
|
|
<p>minimize ze font</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">scaleFont</span> <span class="o">&&</span> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">fontSizeMax</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oTiming</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">=</span> <span class="s1">'1px'</span><span class="p">;</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">¶</a>
|
|
</div>
|
|
<p>set up ze animation</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oAnim</span><span class="p">.</span><span class="nx">addSubject</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oAnimProgress</span><span class="p">,</span><span class="nx">thisSound</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">¶</a>
|
|
</div>
|
|
<p>animate the radius out nice</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">refreshCoords</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">);</span>
|
|
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">updatePlaying</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">);</span>
|
|
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">soundsByURL</span><span class="p">[</span><span class="nx">soundURL</span><span class="p">]</span> <span class="o">=</span> <span class="nx">thisSound</span><span class="p">;</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">sounds</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">);</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">allowMultiple</span> <span class="o">&&</span> <span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">stopSound</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">thisSound</span><span class="p">.</span><span class="nx">play</span><span class="p">();</span>
|
|
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span> <span class="o">=</span> <span class="nx">thisSound</span><span class="p">;</span> <span class="c1">// reference for next call</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">e</span> <span class="o">!==</span> <span class="s1">'undefined'</span> <span class="o">&&</span> <span class="k">typeof</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span> <span class="o">!==</span> <span class="s1">'undefined'</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
|
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">event</span> <span class="o">!==</span> <span class="s1">'undefined'</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">returnValue</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">fanOut</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oSound</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">thisSound</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">;</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">animating</span> <span class="o">===</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">animating</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
<span class="nx">soundManager</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">'fanOut: '</span><span class="o">+</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">id</span><span class="o">+</span><span class="s1">': '</span><span class="o">+</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">.</span><span class="nx">href</span><span class="p">);</span>
|
|
<span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oAnim</span><span class="p">.</span><span class="nx">seekTo</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> <span class="c1">// play to end</span>
|
|
<span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</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">¶</a>
|
|
</div>
|
|
<p>oncomplete hack</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">animating</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
<span class="p">},</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">animDuration</span><span class="o">+</span><span class="mi">20</span><span class="p">);</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">fanIn</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oSound</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">thisSound</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">;</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">animating</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">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">animating</span> <span class="o">=</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
|
|
<span class="nx">soundManager</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">'fanIn: '</span><span class="o">+</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">id</span><span class="o">+</span><span class="s1">': '</span><span class="o">+</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">.</span><span class="nx">href</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">¶</a>
|
|
</div>
|
|
<p>massive hack</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oAnim</span><span class="p">.</span><span class="nx">seekTo</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span> <span class="c1">// play to end</span>
|
|
<span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</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">¶</a>
|
|
</div>
|
|
<p>reset full 360 fill after animation has completed (oncomplete hack)</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">didFinish</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">animating</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">resetLastValues</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">);</span>
|
|
<span class="p">},</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">animDuration</span><span class="o">+</span><span class="mi">20</span><span class="p">);</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">resetLastValues</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oSound</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">position</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">refreshCoords</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasXY</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">findXY</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oCanvas</span><span class="p">);</span>
|
|
<span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasMid</span> <span class="o">=</span> <span class="p">[</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">circleRadius</span><span class="p">,</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">circleRadius</span><span class="p">];</span>
|
|
<span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasMidXY</span> <span class="o">=</span> <span class="p">[</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasXY</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span><span class="o">+</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasMid</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasXY</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span><span class="o">+</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasMid</span><span class="p">[</span><span class="mi">1</span><span class="p">]];</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">stopSound</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oSound</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="nx">soundManager</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">'stopSound: '</span><span class="o">+</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
|
|
<span class="nx">soundManager</span><span class="p">.</span><span class="nx">stop</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">isTouchDevice</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// iOS 4.2+ security blocks onfinish() -> playNext() if we set a .src in-between(?)</span>
|
|
<span class="nx">soundManager</span><span class="p">.</span><span class="nx">unload</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">buttonClick</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="p">{</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">o</span> <span class="o">=</span> <span class="nx">e</span><span class="o">?</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="o">?</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="o">:</span><span class="nx">e</span><span class="p">.</span><span class="nx">srcElement</span><span class="p">)</span><span class="o">:</span><span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">srcElement</span><span class="p">;</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">({</span><span class="nx">target</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">getParentByClassName</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="s1">'sm2-360ui'</span><span class="p">).</span><span class="nx">nextSibling</span><span class="p">});</span> <span class="c1">// link next to the nodes we inserted</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">buttonMouseDown</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="p">{</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-33'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-33">¶</a>
|
|
</div>
|
|
<p>user might decide to drag from here
|
|
watch for mouse move</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">isTouchDevice</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nb">document</span><span class="p">.</span><span class="nx">onmousemove</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="p">{</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-34'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-34">¶</a>
|
|
</div>
|
|
<p>should be boundary-checked, really (eg. move 3px first?)</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">mouseDown</span><span class="p">(</span><span class="nx">e</span><span class="p">);</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">addEventHandler</span><span class="p">(</span><span class="nb">document</span><span class="p">,</span><span class="s1">'touchmove'</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">mouseDown</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">stopEvent</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">mouseDown</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">isTouchDevice</span> <span class="o">&&</span> <span class="nx">e</span><span class="p">.</span><span class="nx">button</span> <span class="o">></span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span> <span class="c1">// ignore non-left-click</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">stopEvent</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">evt</span> <span class="o">=</span> <span class="nx">e</span><span class="o">?</span><span class="nx">e</span><span class="o">:</span><span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">,</span>
|
|
<span class="nx">target</span><span class="p">,</span> <span class="nx">thisSound</span><span class="p">,</span> <span class="nx">oData</span><span class="p">;</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">isTouchDevice</span> <span class="o">&&</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">touches</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">evt</span> <span class="o">=</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">touches</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">target</span> <span class="o">=</span> <span class="p">(</span><span class="nx">evt</span><span class="p">.</span><span class="nx">target</span><span class="o">||</span><span class="nx">evt</span><span class="p">.</span><span class="nx">srcElement</span><span class="p">);</span>
|
|
|
|
<span class="nx">thisSound</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getSoundByURL</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'sm2_link'</span><span class="p">,</span><span class="s1">'a'</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">getParentByClassName</span><span class="p">(</span><span class="nx">target</span><span class="p">,</span><span class="s1">'ui360'</span><span class="p">))[</span><span class="mi">0</span><span class="p">].</span><span class="nx">href</span><span class="p">);</span> <span class="c1">// self.lastSound; // TODO: In multiple sound case, figure out which sound is involved etc.</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-35'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-35">¶</a>
|
|
</div>
|
|
<p>just in case, update coordinates (maybe the element moved since last time.)</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">lastTouchedSound</span> <span class="o">=</span> <span class="nx">thisSound</span><span class="p">;</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">refreshCoords</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">);</span>
|
|
<span class="nx">oData</span> <span class="o">=</span> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">;</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="nx">oData</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="s1">'sm2_dragging'</span><span class="p">);</span>
|
|
<span class="nx">oData</span><span class="p">.</span><span class="nx">pauseCount</span> <span class="o">=</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">lastTouchedSound</span><span class="p">.</span><span class="nx">paused</span><span class="o">?</span><span class="mi">1</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">¶</a>
|
|
</div>
|
|
<p>self.lastSound.pause();</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">mmh</span><span class="p">(</span><span class="nx">e</span><span class="o">?</span><span class="nx">e</span><span class="o">:</span><span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">);</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">isTouchDevice</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">removeEventHandler</span><span class="p">(</span><span class="nb">document</span><span class="p">,</span><span class="s1">'touchmove'</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">mouseDown</span><span class="p">);</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">addEventHandler</span><span class="p">(</span><span class="nb">document</span><span class="p">,</span><span class="s1">'touchmove'</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">mmh</span><span class="p">);</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">addEventHandler</span><span class="p">(</span><span class="nb">document</span><span class="p">,</span><span class="s1">'touchend'</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="p">}</span> <span class="k">else</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">¶</a>
|
|
</div>
|
|
<p>incredibly old-skool. TODO: Modernize.</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nb">document</span><span class="p">.</span><span class="nx">onmousemove</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">mmh</span><span class="p">;</span>
|
|
<span class="nb">document</span><span class="p">.</span><span class="nx">onmouseup</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">mouseUp</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">stopEvent</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><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="p">{</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">oData</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">lastTouchedSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">;</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="nx">oData</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="s1">'sm2_dragging'</span><span class="p">);</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">oData</span><span class="p">.</span><span class="nx">pauseCount</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">lastTouchedSound</span><span class="p">.</span><span class="nx">resume</span><span class="p">();</span>
|
|
<span class="p">}</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">isTouchDevice</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nb">document</span><span class="p">.</span><span class="nx">onmousemove</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
|
<span class="nb">document</span><span class="p">.</span><span class="nx">onmouseup</span> <span class="o">=</span> <span class="kc">null</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">removeEventHandler</span><span class="p">(</span><span class="nb">document</span><span class="p">,</span><span class="s1">'touchmove'</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">mmh</span><span class="p">);</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">removeEventHandler</span><span class="p">(</span><span class="nb">document</span><span class="p">,</span><span class="s1">'touchend'</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="p">}</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">mmh</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="p">{</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">e</span> <span class="o">===</span> <span class="s1">'undefined'</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">e</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="kd">var</span> <span class="nx">oSound</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">lastTouchedSound</span><span class="p">,</span>
|
|
<span class="nx">coords</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getMouseXY</span><span class="p">(</span><span class="nx">e</span><span class="p">),</span>
|
|
<span class="nx">x</span> <span class="o">=</span> <span class="nx">coords</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span>
|
|
<span class="nx">y</span> <span class="o">=</span> <span class="nx">coords</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span>
|
|
<span class="nx">deltaX</span> <span class="o">=</span> <span class="nx">x</span><span class="o">-</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasMidXY</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span>
|
|
<span class="nx">deltaY</span> <span class="o">=</span> <span class="nx">y</span><span class="o">-</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasMidXY</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span>
|
|
<span class="nx">angle</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">fullCircle</span><span class="o">-</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">rad2deg</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">atan2</span><span class="p">(</span><span class="nx">deltaX</span><span class="p">,</span><span class="nx">deltaY</span><span class="p">))</span><span class="o">+</span><span class="mi">180</span><span class="p">));</span>
|
|
|
|
<span class="nx">oSound</span><span class="p">.</span><span class="nx">setPosition</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">durationEstimate</span><span class="o">*</span><span class="p">(</span><span class="nx">angle</span><span class="o">/</span><span class="nx">fullCircle</span><span class="p">));</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">stopEvent</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
|
|
<span class="k">return</span> <span class="kc">false</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">¶</a>
|
|
</div>
|
|
<p>assignMouseDown();</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">this</span><span class="p">.</span><span class="nx">drawSolidArc</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oCanvas</span><span class="p">,</span> <span class="nx">color</span><span class="p">,</span> <span class="nx">radius</span><span class="p">,</span> <span class="nx">width</span><span class="p">,</span> <span class="nx">radians</span><span class="p">,</span> <span class="nx">startAngle</span><span class="p">,</span> <span class="nx">noClear</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">¶</a>
|
|
</div>
|
|
<p>thank you, http://www.snipersystems.co.nz/community/polarclock/tutorial.html</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">radius</span><span class="p">,</span>
|
|
<span class="nx">y</span> <span class="o">=</span> <span class="nx">radius</span><span class="p">,</span>
|
|
<span class="nx">canvas</span> <span class="o">=</span> <span class="nx">oCanvas</span><span class="p">,</span>
|
|
<span class="nx">ctx</span><span class="p">,</span> <span class="nx">innerRadius</span><span class="p">,</span> <span class="nx">doesntLikeZero</span><span class="p">,</span> <span class="nx">endPoint</span><span class="p">;</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</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">¶</a>
|
|
</div>
|
|
<p>use getContext to use the canvas for drawing</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">ctx</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">'2d'</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">¶</a>
|
|
</div>
|
|
<p>re-assign canvas as the actual context</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">oCanvas</span> <span class="o">=</span> <span class="nx">ctx</span><span class="p">;</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">noClear</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">clearCanvas</span><span class="p">(</span><span class="nx">canvas</span><span class="p">);</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">¶</a>
|
|
</div>
|
|
<p>ctx.restore();</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">ctx</span><span class="p">.</span><span class="nx">fillStyle</span> <span class="o">=</span> <span class="nx">color</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">oCanvas</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">();</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="nb">isNaN</span><span class="p">(</span><span class="nx">radians</span><span class="p">))</span> <span class="p">{</span>
|
|
<span class="nx">radians</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">innerRadius</span> <span class="o">=</span> <span class="nx">radius</span><span class="o">-</span><span class="nx">width</span><span class="p">;</span>
|
|
<span class="nx">doesntLikeZero</span> <span class="o">=</span> <span class="p">(</span><span class="nx">isOpera</span> <span class="o">||</span> <span class="nx">isSafari</span><span class="p">);</span> <span class="c1">// safari 4 doesn't actually seem to mind.</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">doesntLikeZero</span> <span class="o">||</span> <span class="p">(</span><span class="nx">doesntLikeZero</span> <span class="o">&&</span> <span class="nx">radius</span> <span class="o">></span> <span class="mi">0</span><span class="p">))</span> <span class="p">{</span>
|
|
<span class="nx">oCanvas</span><span class="p">.</span><span class="nx">arc</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">radius</span><span class="p">,</span> <span class="nx">startAngle</span><span class="p">,</span> <span class="nx">radians</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
|
|
<span class="nx">endPoint</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getArcEndpointCoords</span><span class="p">(</span><span class="nx">innerRadius</span><span class="p">,</span> <span class="nx">radians</span><span class="p">);</span>
|
|
<span class="nx">oCanvas</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="nx">endPoint</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span> <span class="nx">endPoint</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span>
|
|
<span class="nx">oCanvas</span><span class="p">.</span><span class="nx">arc</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">innerRadius</span><span class="p">,</span> <span class="nx">radians</span><span class="p">,</span> <span class="nx">startAngle</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
|
|
<span class="nx">oCanvas</span><span class="p">.</span><span class="nx">closePath</span><span class="p">();</span>
|
|
<span class="nx">oCanvas</span><span class="p">.</span><span class="nx">fill</span><span class="p">();</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">getArcEndpointCoords</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">radius</span><span class="p">,</span> <span class="nx">radians</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="k">return</span> <span class="p">{</span>
|
|
<span class="nx">x</span><span class="o">:</span> <span class="nx">radius</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">cos</span><span class="p">(</span><span class="nx">radians</span><span class="p">),</span>
|
|
<span class="nx">y</span><span class="o">:</span> <span class="nx">radius</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">sin</span><span class="p">(</span><span class="nx">radians</span><span class="p">)</span>
|
|
<span class="p">};</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">deg2rad</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nDeg</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="p">(</span><span class="nx">nDeg</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span><span class="o">/</span><span class="mi">180</span><span class="p">);</span>
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">rad2deg</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nRad</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="p">(</span><span class="nx">nRad</span> <span class="o">*</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>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">getTime</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nMSec</span><span class="p">,</span><span class="nx">bAsString</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">¶</a>
|
|
</div>
|
|
<p>convert milliseconds to mm:ss, return as object literal or string</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="kd">var</span> <span class="nx">nSec</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">nMSec</span><span class="o">/</span><span class="mi">1000</span><span class="p">),</span>
|
|
<span class="nx">min</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">nSec</span><span class="o">/</span><span class="mi">60</span><span class="p">),</span>
|
|
<span class="nx">sec</span> <span class="o">=</span> <span class="nx">nSec</span><span class="o">-</span><span class="p">(</span><span class="nx">min</span><span class="o">*</span><span class="mi">60</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">¶</a>
|
|
</div>
|
|
<p>if (min === 0 && sec === 0) return null; // return 0:00 as null</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">return</span> <span class="p">(</span><span class="nx">bAsString</span><span class="o">?</span><span class="p">(</span><span class="nx">min</span><span class="o">+</span><span class="s1">':'</span><span class="o">+</span><span class="p">(</span><span class="nx">sec</span><span class="o"><</span><span class="mi">10</span><span class="o">?</span><span class="s1">'0'</span><span class="o">+</span><span class="nx">sec</span><span class="o">:</span><span class="nx">sec</span><span class="p">))</span><span class="o">:</span><span class="p">{</span><span class="s1">'min'</span><span class="o">:</span><span class="nx">min</span><span class="p">,</span><span class="s1">'sec'</span><span class="o">:</span><span class="nx">sec</span><span class="p">});</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">clearCanvas</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oCanvas</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="nx">oCanvas</span><span class="p">,</span>
|
|
<span class="nx">ctx</span> <span class="o">=</span> <span class="kc">null</span><span class="p">,</span>
|
|
<span class="nx">width</span><span class="p">,</span> <span class="nx">height</span><span class="p">;</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</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">¶</a>
|
|
</div>
|
|
<p>use getContext to use the canvas for drawing</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">ctx</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">'2d'</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">width</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">offsetWidth</span><span class="p">;</span>
|
|
<span class="nx">height</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">offsetHeight</span><span class="p">;</span>
|
|
<span class="nx">ctx</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="o">-</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="o">-</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="nx">width</span><span class="p">,</span> <span class="nx">height</span><span class="p">);</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">updatePlaying</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">timeNow</span> <span class="o">=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">showHMSTime</span><span class="o">?</span><span class="nx">self</span><span class="p">.</span><span class="nx">getTime</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">position</span><span class="p">,</span><span class="kc">true</span><span class="p">)</span><span class="o">:</span><span class="nb">parseInt</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">position</span><span class="o">/</span><span class="mi">1000</span><span class="p">,</span> <span class="mi">10</span><span class="p">));</span>
|
|
<span class="kd">var</span> <span class="nx">ringScaleFactor</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">scaleArcWidth</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">bytesLoaded</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">bytesLoaded</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">bytesLoaded</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">bytesTotal</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">bytesTotal</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">position</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">position</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">position</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">durationEstimate</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">durationEstimate</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">durationEstimate</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">¶</a>
|
|
</div>
|
|
<p>background ring</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">drawSolidArc</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oCanvas</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">backgroundRingColor</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radius</span> <span class="o">*</span> <span class="nx">ringScaleFactor</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">(</span><span class="nx">fullCircle</span><span class="p">),</span><span class="kc">false</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">¶</a>
|
|
</div>
|
|
<p>loaded ring</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">drawSolidArc</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oCanvas</span><span class="p">,(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">metadata</span><span class="o">?</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">loadRingColorMetadata</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">loadRingColor</span><span class="p">),</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radius</span> <span class="o">*</span> <span class="nx">ringScaleFactor</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">(</span><span class="nx">fullCircle</span><span class="o">*</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">bytesLoaded</span><span class="o">/</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">bytesTotal</span><span class="p">)),</span><span class="mi">0</span><span class="p">,</span><span class="kc">true</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">¶</a>
|
|
</div>
|
|
<p>don’t draw if 0 (full black circle in Opera)</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">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">position</span> <span class="o">!==</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">drawSolidArc</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oCanvas</span><span class="p">,(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">metadata</span><span class="o">?</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">playRingColorMetadata</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">playRingColor</span><span class="p">),</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radius</span> <span class="o">*</span> <span class="nx">ringScaleFactor</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">((</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">didFinish</span><span class="o">===</span><span class="mi">1</span><span class="o">?</span><span class="nx">fullCircle</span><span class="o">:</span><span class="nx">fullCircle</span><span class="o">*</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">position</span><span class="o">/</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">durationEstimate</span><span class="p">))),</span><span class="mi">0</span><span class="p">,</span><span class="kc">true</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">¶</a>
|
|
</div>
|
|
<p>metadata goes here</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">_360data</span><span class="p">.</span><span class="nx">metadata</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">metadata</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">whileplaying</span><span class="p">();</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">timeNow</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastTime</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastTime</span> <span class="o">=</span> <span class="nx">timeNow</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oTiming</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">timeNow</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">¶</a>
|
|
</div>
|
|
<p>draw spectrum, if applicable</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">instanceOptions</span><span class="p">.</span><span class="nx">useWaveformData</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">instanceOptions</span><span class="p">.</span><span class="nx">useEQData</span><span class="p">)</span> <span class="o">&&</span> <span class="nx">hasRealCanvas</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// IE <9 can render maybe 3 or 4 FPS when including the wave/EQ, so don't bother.</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">updateWaveform</span><span class="p">(</span><span class="k">this</span><span class="p">);</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">config</span><span class="p">.</span><span class="nx">useFavIcon</span> <span class="o">&&</span> <span class="nx">self</span><span class="p">.</span><span class="nx">vuMeter</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">vuMeter</span><span class="p">.</span><span class="nx">updateVU</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">updateWaveform</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oSound</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="k">if</span> <span class="p">((</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useWaveformData</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useEQData</span><span class="p">)</span> <span class="o">||</span> <span class="p">(</span><span class="o">!</span><span class="nx">sm</span><span class="p">.</span><span class="nx">features</span><span class="p">.</span><span class="nx">waveformData</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">sm</span><span class="p">.</span><span class="nx">features</span><span class="p">.</span><span class="nx">eqData</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">¶</a>
|
|
</div>
|
|
<p>feature not enabled..</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">waveformData</span><span class="p">.</span><span class="nx">left</span><span class="p">.</span><span class="nx">length</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">eqData</span><span class="p">.</span><span class="nx">length</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">peakData</span><span class="p">.</span><span class="nx">left</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">¶</a>
|
|
</div>
|
|
<p>no data (or errored out/paused/unavailable?)</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="cm">/* use for testing the data */</span>
|
|
<span class="cm">/*</span>
|
|
<span class="cm"> for (i=0; i<256; i++) {</span>
|
|
<span class="cm"> oSound.eqData[i] = 1-(i/256);</span>
|
|
<span class="cm"> }</span>
|
|
<span class="cm"> */</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">oCanvas</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oCanvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">'2d'</span><span class="p">),</span>
|
|
<span class="nx">offX</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
|
|
<span class="nx">offY</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">circleDiameter</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span> <span class="mi">10</span><span class="p">),</span>
|
|
<span class="nx">scale</span> <span class="o">=</span> <span class="nx">offY</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span> <span class="c1">// Y axis (+/- this distance from 0)</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-53'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-53">¶</a>
|
|
</div>
|
|
<p>lineWidth = Math.floor(oSound.<em>360data.circleDiameter-(oSound.</em>360data.circleDiameter*0.175)/(oSound._360data.circleDiameter/255)); // width for each line</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">lineWidth</span> <span class="o">=</span> <span class="mi">1</span><span class="p">,</span>
|
|
<span class="nx">lineHeight</span> <span class="o">=</span> <span class="mi">1</span><span class="p">,</span>
|
|
<span class="nx">thisY</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
|
|
<span class="nx">offset</span> <span class="o">=</span> <span class="nx">offY</span><span class="p">,</span>
|
|
<span class="nx">i</span><span class="p">,</span> <span class="nx">j</span><span class="p">,</span> <span class="nx">direction</span><span class="p">,</span> <span class="nx">downSample</span><span class="p">,</span> <span class="nx">dataLength</span><span class="p">,</span> <span class="nx">sampleCount</span><span class="p">,</span> <span class="nx">startAngle</span><span class="p">,</span> <span class="nx">endAngle</span><span class="p">,</span> <span class="nx">waveData</span><span class="p">,</span> <span class="nx">innerRadius</span><span class="p">,</span> <span class="nx">perItemAngle</span><span class="p">,</span> <span class="nx">yDiff</span><span class="p">,</span> <span class="nx">eqSamples</span><span class="p">,</span> <span class="nx">playedAngle</span><span class="p">,</span> <span class="nx">iAvg</span><span class="p">,</span> <span class="nx">nPeak</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">config</span><span class="p">.</span><span class="nx">useWaveformData</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">¶</a>
|
|
</div>
|
|
<p>raw waveform</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">downSample</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">waveformDataDownsample</span><span class="p">;</span> <span class="c1">// only sample X in 256 (greater number = less sample points)</span>
|
|
<span class="nx">downSample</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="nx">downSample</span><span class="p">);</span> <span class="c1">// make sure it's at least 1</span>
|
|
<span class="nx">dataLength</span> <span class="o">=</span> <span class="mi">256</span><span class="p">;</span>
|
|
<span class="nx">sampleCount</span> <span class="o">=</span> <span class="p">(</span><span class="nx">dataLength</span><span class="o">/</span><span class="nx">downSample</span><span class="p">);</span>
|
|
<span class="nx">startAngle</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
<span class="nx">endAngle</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
<span class="nx">waveData</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
|
<span class="nx">innerRadius</span> <span class="o">=</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">waveformDataOutside</span><span class="o">?</span><span class="mi">1</span><span class="o">:</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">waveformDataConstrain</span><span class="o">?</span><span class="mf">0.5</span><span class="o">:</span><span class="mf">0.565</span><span class="p">));</span>
|
|
<span class="nx">scale</span> <span class="o">=</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">waveformDataOutside</span><span class="o">?</span><span class="mf">0.7</span><span class="o">:</span><span class="mf">0.75</span><span class="p">);</span>
|
|
<span class="nx">perItemAngle</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">((</span><span class="mi">360</span><span class="o">/</span><span class="nx">sampleCount</span><span class="p">)</span><span class="o">*</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">waveformDataLineRatio</span><span class="p">);</span> <span class="c1">// 0.85 = clean pixel lines at 150? // self.deg2rad(360*(Math.max(1,downSample-1))/sampleCount);</span>
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="nx">dataLength</span><span class="p">;</span> <span class="nx">i</span><span class="o">+=</span><span class="nx">downSample</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">startAngle</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">(</span><span class="mi">360</span><span class="o">*</span><span class="p">(</span><span class="nx">i</span><span class="o">/</span><span class="p">(</span><span class="nx">sampleCount</span><span class="p">)</span><span class="o">*</span><span class="mi">1</span><span class="o">/</span><span class="nx">downSample</span><span class="p">));</span> <span class="c1">// +0.67 - counter for spacing</span>
|
|
<span class="nx">endAngle</span> <span class="o">=</span> <span class="nx">startAngle</span><span class="o">+</span><span class="nx">perItemAngle</span><span class="p">;</span>
|
|
<span class="nx">waveData</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">waveformData</span><span class="p">.</span><span class="nx">left</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">waveData</span><span class="o"><</span><span class="mi">0</span> <span class="o">&&</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">waveformDataConstrain</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">waveData</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="nx">waveData</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">drawSolidArc</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oCanvas</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">waveformDataColor</span><span class="p">,</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">width</span><span class="o">*</span><span class="nx">innerRadius</span><span class="o">*</span><span class="p">(</span><span class="mi">2</span><span class="o">-</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">scaleArcWidth</span><span class="p">),</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radius</span><span class="o">*</span><span class="nx">scale</span><span class="o">*</span><span class="mf">1.25</span><span class="o">*</span><span class="nx">waveData</span><span class="p">,</span><span class="nx">endAngle</span><span class="p">,</span><span class="nx">startAngle</span><span class="p">,</span><span class="kc">true</span><span class="p">);</span>
|
|
<span class="p">}</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">config</span><span class="p">.</span><span class="nx">useEQData</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">¶</a>
|
|
</div>
|
|
<p>EQ spectrum</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">downSample</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">eqDataDownsample</span><span class="p">;</span> <span class="c1">// only sample N in 256</span>
|
|
<span class="nx">yDiff</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
<span class="nx">downSample</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="nx">downSample</span><span class="p">);</span> <span class="c1">// make sure it's at least 1</span>
|
|
<span class="nx">eqSamples</span> <span class="o">=</span> <span class="mi">192</span><span class="p">;</span> <span class="c1">// drop the last 25% of the spectrum (>16500 Hz), most stuff won't actually use it.</span>
|
|
<span class="nx">sampleCount</span> <span class="o">=</span> <span class="p">(</span><span class="nx">eqSamples</span><span class="o">/</span><span class="nx">downSample</span><span class="p">);</span>
|
|
<span class="nx">innerRadius</span> <span class="o">=</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">eqDataOutside</span><span class="o">?</span><span class="mi">1</span><span class="o">:</span><span class="mf">0.565</span><span class="p">);</span>
|
|
<span class="nx">direction</span> <span class="o">=</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">eqDataOutside</span><span class="o">?-</span><span class="mi">1</span><span class="o">:</span><span class="mi">1</span><span class="p">);</span>
|
|
<span class="nx">scale</span> <span class="o">=</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">eqDataOutside</span><span class="o">?</span><span class="mf">0.5</span><span class="o">:</span><span class="mf">0.75</span><span class="p">);</span>
|
|
<span class="nx">startAngle</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
<span class="nx">endAngle</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
<span class="nx">perItemAngle</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">((</span><span class="mi">360</span><span class="o">/</span><span class="nx">sampleCount</span><span class="p">)</span><span class="o">*</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">eqDataLineRatio</span><span class="p">);</span> <span class="c1">// self.deg2rad(360/(sampleCount+1));</span>
|
|
<span class="nx">playedAngle</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">((</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">didFinish</span><span class="o">===</span><span class="mi">1</span><span class="o">?</span><span class="mi">360</span><span class="o">:</span><span class="mi">360</span><span class="o">*</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">position</span><span class="o">/</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">durationEstimate</span><span class="p">)));</span>
|
|
<span class="nx">j</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span>
|
|
<span class="nx">iAvg</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="nx">eqSamples</span><span class="p">;</span> <span class="nx">i</span><span class="o">+=</span><span class="nx">downSample</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">startAngle</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">(</span><span class="mi">360</span><span class="o">*</span><span class="p">(</span><span class="nx">i</span><span class="o">/</span><span class="nx">eqSamples</span><span class="p">));</span>
|
|
<span class="nx">endAngle</span> <span class="o">=</span> <span class="nx">startAngle</span><span class="o">+</span><span class="nx">perItemAngle</span><span class="p">;</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">drawSolidArc</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oCanvas</span><span class="p">,(</span><span class="nx">endAngle</span><span class="o">></span><span class="nx">playedAngle</span><span class="o">?</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">eqDataColor</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">playRingColor</span><span class="p">),</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">width</span><span class="o">*</span><span class="nx">innerRadius</span><span class="p">,</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radius</span><span class="o">*</span><span class="nx">scale</span><span class="o">*</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">eqData</span><span class="p">.</span><span class="nx">left</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span><span class="o">*</span><span class="nx">direction</span><span class="p">),</span><span class="nx">endAngle</span><span class="p">,</span><span class="nx">startAngle</span><span class="p">,</span><span class="kc">true</span><span class="p">);</span>
|
|
<span class="p">}</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">config</span><span class="p">.</span><span class="nx">usePeakData</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">animating</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">nPeak</span> <span class="o">=</span> <span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">peakData</span><span class="p">.</span><span class="nx">left</span><span class="o">||</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">peakData</span><span class="p">.</span><span class="nx">right</span><span class="p">);</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-56'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-56">¶</a>
|
|
</div>
|
|
<p>GIANT HACK: use EQ spectrum data for bass frequencies</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">eqSamples</span> <span class="o">=</span> <span class="mi">3</span><span class="p">;</span>
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="nx">eqSamples</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">nPeak</span> <span class="o">=</span> <span class="p">(</span><span class="nx">nPeak</span><span class="o">||</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">eqData</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">amplifier</span> <span class="o">=</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useAmplifier</span><span class="o">?</span><span class="p">(</span><span class="mf">0.9</span><span class="o">+</span><span class="p">(</span><span class="nx">nPeak</span><span class="o">*</span><span class="mf">0.1</span><span class="p">))</span><span class="o">:</span><span class="mi">1</span><span class="p">);</span>
|
|
<span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radiusMax</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">circleDiameter</span><span class="o">*</span><span class="mf">0.175</span><span class="o">*</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">amplifier</span><span class="p">;</span>
|
|
<span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">widthMax</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">circleDiameter</span><span class="o">*</span><span class="mf">0.4</span><span class="o">*</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">amplifier</span><span class="p">;</span>
|
|
<span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radius</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radiusMax</span><span class="o">*</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">amplifier</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
|
|
<span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">widthMax</span><span class="o">*</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">amplifier</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">getUIHTML</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">diameter</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="k">return</span> <span class="p">[</span>
|
|
<span class="s1">'<canvas class="sm2-canvas" width="'</span><span class="o">+</span><span class="nx">diameter</span><span class="o">+</span><span class="s1">'" height="'</span><span class="o">+</span><span class="nx">diameter</span><span class="o">+</span><span class="s1">'"></canvas>'</span><span class="p">,</span>
|
|
<span class="s1">' <span class="sm2-360btn sm2-360btn-default"></span>'</span><span class="p">,</span> <span class="c1">// note use of imageMap, edit or remove if you use a different-size image.</span>
|
|
<span class="s1">' <div class="sm2-timing'</span><span class="o">+</span><span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/safari/i</span><span class="p">)</span><span class="o">?</span><span class="s1">' alignTweak'</span><span class="o">:</span><span class="s1">''</span><span class="p">)</span><span class="o">+</span><span class="s1">'"></div>'</span><span class="p">,</span> <span class="c1">// + Ever-so-slight Safari horizontal alignment tweak</span>
|
|
<span class="s1">' <div class="sm2-cover"></div>'</span>
|
|
<span class="p">];</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">uiTest</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sClass</span><span class="p">)</span> <span class="p">{</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-57'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-57">¶</a>
|
|
</div>
|
|
<p>fake a 360 UI so we can get some numbers from CSS, etc.</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="kd">var</span> <span class="nx">oTemplate</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'div'</span><span class="p">),</span>
|
|
<span class="nx">oFakeUI</span><span class="p">,</span> <span class="nx">oFakeUIBox</span><span class="p">,</span> <span class="nx">oTemp</span><span class="p">,</span> <span class="nx">fakeDiameter</span><span class="p">,</span> <span class="nx">uiHTML</span><span class="p">,</span> <span class="nx">circleDiameter</span><span class="p">,</span> <span class="nx">circleRadius</span><span class="p">,</span> <span class="nx">fontSizeMax</span><span class="p">,</span> <span class="nx">oTiming</span><span class="p">;</span>
|
|
|
|
<span class="nx">oTemplate</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">'sm2-360ui'</span><span class="p">;</span>
|
|
|
|
<span class="nx">oFakeUI</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'div'</span><span class="p">);</span>
|
|
<span class="nx">oFakeUI</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">'ui360'</span><span class="o">+</span><span class="p">(</span><span class="nx">sClass</span><span class="o">?</span><span class="s1">' '</span><span class="o">+</span><span class="nx">sClass</span><span class="o">:</span><span class="s1">''</span><span class="p">);</span> <span class="c1">// ui360 ui360-vis</span>
|
|
|
|
<span class="nx">oFakeUIBox</span> <span class="o">=</span> <span class="nx">oFakeUI</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">oTemplate</span><span class="p">.</span><span class="nx">cloneNode</span><span class="p">(</span><span class="kc">true</span><span class="p">));</span>
|
|
|
|
<span class="nx">oFakeUI</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">position</span> <span class="o">=</span> <span class="s1">'absolute'</span><span class="p">;</span>
|
|
<span class="nx">oFakeUI</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">left</span> <span class="o">=</span> <span class="s1">'-9999px'</span><span class="p">;</span>
|
|
|
|
<span class="nx">oTemp</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">oFakeUI</span><span class="p">);</span>
|
|
|
|
<span class="nx">fakeDiameter</span> <span class="o">=</span> <span class="nx">oFakeUIBox</span><span class="p">.</span><span class="nx">offsetWidth</span><span class="p">;</span>
|
|
|
|
<span class="nx">uiHTML</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getUIHTML</span><span class="p">(</span><span class="nx">fakeDiameter</span><span class="p">);</span>
|
|
|
|
<span class="nx">oFakeUIBox</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">uiHTML</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span><span class="o">+</span><span class="nx">uiHTML</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span><span class="o">+</span><span class="nx">uiHTML</span><span class="p">[</span><span class="mi">3</span><span class="p">];</span>
|
|
|
|
<span class="nx">circleDiameter</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">oFakeUIBox</span><span class="p">.</span><span class="nx">offsetWidth</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
|
|
<span class="nx">circleRadius</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">circleDiameter</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
|
|
|
|
<span class="nx">oTiming</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'sm2-timing'</span><span class="p">,</span><span class="s1">'div'</span><span class="p">,</span><span class="nx">oTemp</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
|
|
<span class="nx">fontSizeMax</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">getStyle</span><span class="p">(</span><span class="nx">oTiming</span><span class="p">,</span><span class="s1">'font-size'</span><span class="p">),</span> <span class="mi">10</span><span class="p">);</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nb">isNaN</span><span class="p">(</span><span class="nx">fontSizeMax</span><span class="p">))</span> <span class="p">{</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-58'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-58">¶</a>
|
|
</div>
|
|
<p>getStyle() etc. didn’t work.</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">fontSizeMax</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-59'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-59">¶</a>
|
|
</div>
|
|
<p>soundManager._writeDebug(‘diameter, font size: ’+circleDiameter+‘,’+fontSizeMax);</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">oFakeUI</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="nx">oFakeUI</span><span class="p">);</span>
|
|
|
|
<span class="nx">uiHTML</span> <span class="o">=</span> <span class="nx">oFakeUI</span> <span class="o">=</span> <span class="nx">oFakeUIBox</span> <span class="o">=</span> <span class="nx">oTemp</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
|
|
|
<span class="k">return</span> <span class="p">{</span>
|
|
<span class="nx">circleDiameter</span><span class="o">:</span> <span class="nx">circleDiameter</span><span class="p">,</span>
|
|
<span class="nx">circleRadius</span><span class="o">:</span> <span class="nx">circleRadius</span><span class="p">,</span>
|
|
<span class="nx">fontSizeMax</span><span class="o">:</span> <span class="nx">fontSizeMax</span>
|
|
<span class="p">};</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">init</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
|
|
<span class="nx">sm</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">'threeSixtyPlayer.init()'</span><span class="p">);</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">oItems</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'ui360'</span><span class="p">,</span><span class="s1">'div'</span><span class="p">),</span>
|
|
<span class="nx">i</span><span class="p">,</span> <span class="nx">j</span><span class="p">,</span> <span class="nx">oLinks</span> <span class="o">=</span> <span class="p">[],</span> <span class="nx">is_vis</span> <span class="o">=</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">foundItems</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">oCanvas</span><span class="p">,</span> <span class="nx">oCanvasCTX</span><span class="p">,</span> <span class="nx">oCover</span><span class="p">,</span> <span class="nx">diameter</span><span class="p">,</span> <span class="nx">radius</span><span class="p">,</span> <span class="nx">uiData</span><span class="p">,</span> <span class="nx">uiDataVis</span><span class="p">,</span> <span class="nx">oUI</span><span class="p">,</span> <span class="nx">oBtn</span><span class="p">,</span> <span class="nx">o</span><span class="p">,</span> <span class="nx">o2</span><span class="p">,</span> <span class="nx">oID</span><span class="p">;</span>
|
|
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span><span class="nx">j</span><span class="o">=</span><span class="nx">oItems</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="nx">j</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">oLinks</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">oItems</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'a'</span><span class="p">)[</span><span class="mi">0</span><span class="p">]);</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-60'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-60">¶</a>
|
|
</div>
|
|
<p>remove “fake” play button (unsupported case)</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">oItems</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundImage</span> <span class="o">=</span> <span class="s1">'none'</span><span class="p">;</span>
|
|
<span class="p">}</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-61'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-61">¶</a>
|
|
</div>
|
|
<p>grab all links, look for .mp3</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">oUITemplate</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'div'</span><span class="p">);</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">oUITemplate</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">'sm2-360ui'</span><span class="p">;</span>
|
|
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">oUITemplateVis</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'div'</span><span class="p">);</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">oUITemplateVis</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">'sm2-360ui'</span><span class="p">;</span>
|
|
|
|
<span class="nx">uiData</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">uiTest</span><span class="p">();</span>
|
|
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">circleDiameter</span> <span class="o">=</span> <span class="nx">uiData</span><span class="p">.</span><span class="nx">circleDiameter</span><span class="p">;</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">circleRadius</span> <span class="o">=</span> <span class="nx">uiData</span><span class="p">.</span><span class="nx">circleRadius</span><span class="p">;</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-62'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-62">¶</a>
|
|
</div>
|
|
<p>self.config.fontSizeMax = uiData.fontSizeMax;</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">uiDataVis</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">uiTest</span><span class="p">(</span><span class="s1">'ui360-vis'</span><span class="p">);</span>
|
|
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">fontSizeMax</span> <span class="o">=</span> <span class="nx">uiDataVis</span><span class="p">.</span><span class="nx">fontSizeMax</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">¶</a>
|
|
</div>
|
|
<p>canvas needs inline width and height, doesn’t quite work otherwise</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">oUITemplate</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getUIHTML</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">circleDiameter</span><span class="p">).</span><span class="nx">join</span><span class="p">(</span><span class="s1">''</span><span class="p">);</span>
|
|
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">oUITemplateVis</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getUIHTML</span><span class="p">(</span><span class="nx">uiDataVis</span><span class="p">.</span><span class="nx">circleDiameter</span><span class="p">).</span><span class="nx">join</span><span class="p">(</span><span class="s1">''</span><span class="p">);</span>
|
|
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span><span class="nx">j</span><span class="o">=</span><span class="nx">oLinks</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="nx">j</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">sm</span><span class="p">.</span><span class="nx">canPlayLink</span><span class="p">(</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">])</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span><span class="nx">self</span><span class="p">.</span><span class="nx">excludeClass</span><span class="p">)</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span><span class="nx">self</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sDefault</span><span class="p">))</span> <span class="p">{</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span><span class="nx">self</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sDefault</span><span class="p">);</span> <span class="c1">// add default CSS decoration</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">links</span><span class="p">[</span><span class="nx">foundItems</span><span class="p">]</span> <span class="o">=</span> <span class="p">(</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">indexByURL</span><span class="p">[</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">href</span><span class="p">]</span> <span class="o">=</span> <span class="nx">foundItems</span><span class="p">;</span> <span class="c1">// hack for indexing</span>
|
|
<span class="nx">foundItems</span><span class="o">++</span><span class="p">;</span>
|
|
|
|
<span class="nx">is_vis</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">parentNode</span><span class="p">,</span> <span class="s1">'ui360-vis'</span><span class="p">);</span>
|
|
|
|
<span class="nx">diameter</span> <span class="o">=</span> <span class="p">(</span><span class="nx">is_vis</span> <span class="o">?</span> <span class="nx">uiDataVis</span> <span class="o">:</span> <span class="nx">uiData</span><span class="p">).</span><span class="nx">circleDiameter</span><span class="p">;</span>
|
|
<span class="nx">radius</span> <span class="o">=</span> <span class="p">(</span><span class="nx">is_vis</span> <span class="o">?</span> <span class="nx">uiDataVis</span> <span class="o">:</span> <span class="nx">uiData</span><span class="p">).</span><span class="nx">circleRadius</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">¶</a>
|
|
</div>
|
|
<p>add canvas shiz</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">oUI</span> <span class="o">=</span> <span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">((</span><span class="nx">is_vis</span><span class="o">?</span><span class="nx">self</span><span class="p">.</span><span class="nx">oUITemplateVis</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">oUITemplate</span><span class="p">).</span><span class="nx">cloneNode</span><span class="p">(</span><span class="kc">true</span><span class="p">),</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">isIE</span> <span class="o">&&</span> <span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">G_vmlCanvasManager</span> <span class="o">!==</span> <span class="s1">'undefined'</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// IE only</span>
|
|
<span class="nx">o</span> <span class="o">=</span> <span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">parentNode</span><span class="p">;</span>
|
|
<span class="nx">o2</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'canvas'</span><span class="p">);</span>
|
|
<span class="nx">o2</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">'sm2-canvas'</span><span class="p">;</span>
|
|
<span class="nx">oID</span> <span class="o">=</span> <span class="s1">'sm2_canvas_'</span><span class="o">+</span><span class="nb">parseInt</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="o">*</span><span class="mi">1048576</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
|
|
<span class="nx">o2</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">oID</span><span class="p">;</span>
|
|
<span class="nx">o2</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">diameter</span><span class="p">;</span>
|
|
<span class="nx">o2</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nx">diameter</span><span class="p">;</span>
|
|
<span class="nx">oUI</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">o2</span><span class="p">);</span>
|
|
<span class="nb">window</span><span class="p">.</span><span class="nx">G_vmlCanvasManager</span><span class="p">.</span><span class="nx">initElement</span><span class="p">(</span><span class="nx">o2</span><span class="p">);</span> <span class="c1">// Apply ExCanvas compatibility magic</span>
|
|
<span class="nx">oCanvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">oID</span><span class="p">);</span>
|
|
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-65'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-65">¶</a>
|
|
</div>
|
|
<p>add a handler for the button</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">oCanvas</span> <span class="o">=</span> <span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'canvas'</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">oCover</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'sm2-cover'</span><span class="p">,</span><span class="s1">'div'</span><span class="p">,</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">parentNode</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
|
|
<span class="nx">oBtn</span> <span class="o">=</span> <span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'span'</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">addEventHandler</span><span class="p">(</span><span class="nx">oBtn</span><span class="p">,</span><span class="s1">'click'</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">buttonClick</span><span class="p">);</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">isTouchDevice</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">addEventHandler</span><span class="p">(</span><span class="nx">oCover</span><span class="p">,</span><span class="s1">'mousedown'</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">mouseDown</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">addEventHandler</span><span class="p">(</span><span class="nx">oCover</span><span class="p">,</span><span class="s1">'touchstart'</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">mouseDown</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">oCanvasCTX</span> <span class="o">=</span> <span class="nx">oCanvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">'2d'</span><span class="p">);</span>
|
|
<span class="nx">oCanvasCTX</span><span class="p">.</span><span class="nx">translate</span><span class="p">(</span><span class="nx">radius</span><span class="p">,</span> <span class="nx">radius</span><span class="p">);</span>
|
|
<span class="nx">oCanvasCTX</span><span class="p">.</span><span class="nx">rotate</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">(</span><span class="o">-</span><span class="mi">90</span><span class="p">));</span> <span class="c1">// compensate for arc starting at EAST // http://stackoverflow.com/questions/319267/tutorial-for-html-canvass-arc-function</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">foundItems</span><span class="o">></span><span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">addEventHandler</span><span class="p">(</span><span class="nb">document</span><span class="p">,</span><span class="s1">'click'</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">handleClick</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">config</span><span class="p">.</span><span class="nx">autoPlay</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">self</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">({</span><span class="nx">target</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">links</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span><span class="nx">preventDefault</span><span class="o">:</span><span class="kd">function</span><span class="p">(){}});</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">sm</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">'threeSixtyPlayer.init(): Found '</span><span class="o">+</span><span class="nx">foundItems</span><span class="o">+</span><span class="s1">' relevant items.'</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">config</span><span class="p">.</span><span class="nx">useFavIcon</span> <span class="o">&&</span> <span class="k">typeof</span> <span class="k">this</span><span class="p">.</span><span class="nx">VUMeter</span> <span class="o">!==</span> <span class="s1">'undefined'</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">vuMeter</span> <span class="o">=</span> <span class="k">new</span> <span class="k">this</span><span class="p">.</span><span class="nx">VUMeter</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="p">}</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-66'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-66">¶</a>
|
|
</div>
|
|
<p>Optional: VU Meter component</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre><span class="nx">ThreeSixtyPlayer</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">VUMeter</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oParent</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="nx">oParent</span><span class="p">,</span>
|
|
<span class="nx">me</span> <span class="o">=</span> <span class="k">this</span><span class="p">,</span>
|
|
<span class="nx">_head</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'head'</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span>
|
|
<span class="nx">isOpera</span> <span class="o">=</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/opera/i</span><span class="p">)),</span>
|
|
<span class="nx">isFirefox</span> <span class="o">=</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/firefox/i</span><span class="p">));</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">vuMeterData</span> <span class="o">=</span> <span class="p">[];</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">vuDataCanvas</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">setPageIcon</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sDataURL</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useFavIcon</span> <span class="o">||</span> <span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">usePeakData</span> <span class="o">||</span> <span class="o">!</span><span class="nx">sDataURL</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">link</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'sm2-favicon'</span><span class="p">);</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">link</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">_head</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="nx">link</span><span class="p">);</span>
|
|
<span class="nx">link</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">link</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">link</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'link'</span><span class="p">);</span>
|
|
<span class="nx">link</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="s1">'sm2-favicon'</span><span class="p">;</span>
|
|
<span class="nx">link</span><span class="p">.</span><span class="nx">rel</span> <span class="o">=</span> <span class="s1">'shortcut icon'</span><span class="p">;</span>
|
|
<span class="nx">link</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s1">'image/png'</span><span class="p">;</span>
|
|
<span class="nx">link</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">sDataURL</span><span class="p">;</span>
|
|
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'head'</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">link</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">resetPageIcon</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useFavIcon</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="kd">var</span> <span class="nx">link</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'favicon'</span><span class="p">);</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">link</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">link</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="s1">'/favicon.ico'</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">updateVU</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oSound</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">soundManager</span><span class="p">.</span><span class="nx">flashVersion</span> <span class="o">>=</span> <span class="mi">9</span> <span class="o">&&</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useFavIcon</span> <span class="o">&&</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">usePeakData</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">me</span><span class="p">.</span><span class="nx">setPageIcon</span><span class="p">(</span><span class="nx">me</span><span class="p">.</span><span class="nx">vuMeterData</span><span class="p">[</span><span class="nb">parseInt</span><span class="p">(</span><span class="mi">16</span><span class="o">*</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">peakData</span><span class="p">.</span><span class="nx">left</span><span class="p">,</span> <span class="mi">10</span><span class="p">)][</span><span class="nb">parseInt</span><span class="p">(</span><span class="mi">16</span><span class="o">*</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">peakData</span><span class="p">.</span><span class="nx">right</span><span class="p">,</span> <span class="mi">10</span><span class="p">)]);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">createVUData</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="nx">j</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span>
|
|
<span class="nx">canvas</span> <span class="o">=</span> <span class="nx">me</span><span class="p">.</span><span class="nx">vuDataCanvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">'2d'</span><span class="p">),</span>
|
|
<span class="nx">vuGrad</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">createLinearGradient</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">),</span>
|
|
<span class="nx">bgGrad</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">createLinearGradient</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">),</span>
|
|
<span class="nx">outline</span> <span class="o">=</span> <span class="s1">'rgba(0,0,0,0.2)'</span><span class="p">;</span>
|
|
|
|
<span class="nx">vuGrad</span><span class="p">.</span><span class="nx">addColorStop</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="s1">'rgb(0,192,0)'</span><span class="p">);</span>
|
|
<span class="nx">vuGrad</span><span class="p">.</span><span class="nx">addColorStop</span><span class="p">(</span><span class="mf">0.30</span><span class="p">,</span><span class="s1">'rgb(0,255,0)'</span><span class="p">);</span>
|
|
<span class="nx">vuGrad</span><span class="p">.</span><span class="nx">addColorStop</span><span class="p">(</span><span class="mf">0.625</span><span class="p">,</span><span class="s1">'rgb(255,255,0)'</span><span class="p">);</span>
|
|
<span class="nx">vuGrad</span><span class="p">.</span><span class="nx">addColorStop</span><span class="p">(</span><span class="mf">0.85</span><span class="p">,</span><span class="s1">'rgb(255,0,0)'</span><span class="p">);</span>
|
|
<span class="nx">bgGrad</span><span class="p">.</span><span class="nx">addColorStop</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="nx">outline</span><span class="p">);</span>
|
|
<span class="nx">bgGrad</span><span class="p">.</span><span class="nx">addColorStop</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="s1">'rgba(0,0,0,0.5)'</span><span class="p">);</span>
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="mi">16</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">me</span><span class="p">.</span><span class="nx">vuMeterData</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="p">[];</span>
|
|
<span class="p">}</span>
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="mi">16</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">j</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">j</span><span class="o"><</span><span class="mi">16</span><span class="p">;</span> <span class="nx">j</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-67'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-67">¶</a>
|
|
</div>
|
|
<p>reset/erase canvas</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">me</span><span class="p">.</span><span class="nx">vuDataCanvas</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">'width'</span><span class="p">,</span><span class="mi">16</span><span class="p">);</span>
|
|
<span class="nx">me</span><span class="p">.</span><span class="nx">vuDataCanvas</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">'height'</span><span class="p">,</span><span class="mi">16</span><span class="p">);</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-68'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-68">¶</a>
|
|
</div>
|
|
<p>draw new stuffs</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">canvas</span><span class="p">.</span><span class="nx">fillStyle</span> <span class="o">=</span> <span class="nx">bgGrad</span><span class="p">;</span>
|
|
<span class="nx">canvas</span><span class="p">.</span><span class="nx">fillRect</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">7</span><span class="p">,</span><span class="mi">15</span><span class="p">);</span>
|
|
<span class="nx">canvas</span><span class="p">.</span><span class="nx">fillRect</span><span class="p">(</span><span class="mi">8</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">7</span><span class="p">,</span><span class="mi">15</span><span class="p">);</span>
|
|
<span class="cm">/*</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-69'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-69">¶</a>
|
|
</div>
|
|
<p>shadow</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre><span class="cm"> canvas.fillStyle = 'rgba(0,0,0,0.1)';</span>
|
|
<span class="cm"> canvas.fillRect(1,15-i,7,17-(17-i));</span>
|
|
<span class="cm"> canvas.fillRect(9,15-j,7,17-(17-j));</span>
|
|
<span class="cm"> */</span>
|
|
<span class="nx">canvas</span><span class="p">.</span><span class="nx">fillStyle</span> <span class="o">=</span> <span class="nx">vuGrad</span><span class="p">;</span>
|
|
<span class="nx">canvas</span><span class="p">.</span><span class="nx">fillRect</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">15</span><span class="o">-</span><span class="nx">i</span><span class="p">,</span><span class="mi">7</span><span class="p">,</span><span class="mi">16</span><span class="o">-</span><span class="p">(</span><span class="mi">16</span><span class="o">-</span><span class="nx">i</span><span class="p">));</span>
|
|
<span class="nx">canvas</span><span class="p">.</span><span class="nx">fillRect</span><span class="p">(</span><span class="mi">8</span><span class="p">,</span><span class="mi">15</span><span class="o">-</span><span class="nx">j</span><span class="p">,</span><span class="mi">7</span><span class="p">,</span><span class="mi">16</span><span class="o">-</span><span class="p">(</span><span class="mi">16</span><span class="o">-</span><span class="nx">j</span><span class="p">));</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-70'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-70">¶</a>
|
|
</div>
|
|
<p>and now, clear out some bits.</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">canvas</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">16</span><span class="p">,</span><span class="mi">1</span><span class="p">);</span>
|
|
<span class="nx">canvas</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">7</span><span class="p">,</span><span class="mi">16</span><span class="p">,</span><span class="mi">1</span><span class="p">);</span>
|
|
<span class="nx">canvas</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">11</span><span class="p">,</span><span class="mi">16</span><span class="p">,</span><span class="mi">1</span><span class="p">);</span>
|
|
<span class="nx">me</span><span class="p">.</span><span class="nx">vuMeterData</span><span class="p">[</span><span class="nx">i</span><span class="p">][</span><span class="nx">j</span><span class="p">]</span> <span class="o">=</span> <span class="nx">me</span><span class="p">.</span><span class="nx">vuDataCanvas</span><span class="p">.</span><span class="nx">toDataURL</span><span class="p">(</span><span class="s1">'image/png'</span><span class="p">);</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-71'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-71">¶</a>
|
|
</div>
|
|
<p>for debugging VU images</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="cm">/*</span>
|
|
<span class="cm"> var o = document.createElement('img');</span>
|
|
<span class="cm"> o.style.marginRight = '5px'; </span>
|
|
<span class="cm"> o.src = vuMeterData[i][j];</span>
|
|
<span class="cm"> document.documentElement.appendChild(o);</span>
|
|
<span class="cm"> */</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">testCanvas</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-72'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-72">¶</a>
|
|
</div>
|
|
<p>canvas + toDataURL();</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="kd">var</span> <span class="nx">c</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'canvas'</span><span class="p">),</span>
|
|
<span class="nx">ctx</span> <span class="o">=</span> <span class="kc">null</span><span class="p">,</span> <span class="nx">ok</span><span class="p">;</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">c</span> <span class="o">||</span> <span class="k">typeof</span> <span class="nx">c</span><span class="p">.</span><span class="nx">getContext</span> <span class="o">===</span> <span class="s1">'undefined'</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">ctx</span> <span class="o">=</span> <span class="nx">c</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">'2d'</span><span class="p">);</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">ctx</span> <span class="o">||</span> <span class="k">typeof</span> <span class="nx">c</span><span class="p">.</span><span class="nx">toDataURL</span> <span class="o">!==</span> <span class="s1">'function'</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
|
<span class="p">}</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-73'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-73">¶</a>
|
|
</div>
|
|
<p>just in case..</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">try</span> <span class="p">{</span>
|
|
<span class="nx">ok</span> <span class="o">=</span> <span class="nx">c</span><span class="p">.</span><span class="nx">toDataURL</span><span class="p">(</span><span class="s1">'image/png'</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-74'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-74">¶</a>
|
|
</div>
|
|
<p>no canvas or no toDataURL()</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
|
<span class="p">}</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-75'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-75">¶</a>
|
|
</div>
|
|
<p>assume we’re all good.</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="k">return</span> <span class="nx">c</span><span class="p">;</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">init</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</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">config</span><span class="p">.</span><span class="nx">useFavIcon</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">me</span><span class="p">.</span><span class="nx">vuDataCanvas</span> <span class="o">=</span> <span class="nx">me</span><span class="p">.</span><span class="nx">testCanvas</span><span class="p">();</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">me</span><span class="p">.</span><span class="nx">vuDataCanvas</span> <span class="o">&&</span> <span class="p">(</span><span class="nx">isFirefox</span> <span class="o">||</span> <span class="nx">isOpera</span><span class="p">))</span> <span class="p">{</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-76'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-76">¶</a>
|
|
</div>
|
|
<p>these browsers support dynamically-updating the favicon</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">me</span><span class="p">.</span><span class="nx">createVUData</span><span class="p">();</span>
|
|
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-77'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-77">¶</a>
|
|
</div>
|
|
<p>browser doesn’t support doing this</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useFavIcon</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
|
|
|
|
<span class="p">};</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-78'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-78">¶</a>
|
|
</div>
|
|
<p>completely optional: Metadata/annotations/segments code</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre><span class="nx">ThreeSixtyPlayer</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">Metadata</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oSound</span><span class="p">,</span> <span class="nx">oParent</span><span class="p">)</span> <span class="p">{</span>
|
|
|
|
<span class="nx">soundManager</span><span class="p">.</span><span class="nx">_wD</span><span class="p">(</span><span class="s1">'Metadata()'</span><span class="p">);</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">me</span> <span class="o">=</span> <span class="k">this</span><span class="p">,</span>
|
|
<span class="nx">oBox</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUI360</span><span class="p">,</span>
|
|
<span class="nx">o</span> <span class="o">=</span> <span class="nx">oBox</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'ul'</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span>
|
|
<span class="nx">oItems</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'li'</span><span class="p">),</span>
|
|
<span class="nx">isFirefox</span> <span class="o">=</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/firefox/i</span><span class="p">)),</span>
|
|
<span class="nx">isAlt</span> <span class="o">=</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">i</span><span class="p">,</span> <span class="nx">oDuration</span><span class="p">;</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">lastWPExec</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">refreshInterval</span> <span class="o">=</span> <span class="mi">250</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">totalTime</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">events</span> <span class="o">=</span> <span class="p">{</span>
|
|
|
|
<span class="nx">whileplaying</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">width</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span>
|
|
<span class="nx">radius</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radius</span><span class="p">,</span>
|
|
<span class="nx">fullDuration</span> <span class="o">=</span> <span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">durationEstimate</span><span class="o">||</span><span class="p">(</span><span class="nx">me</span><span class="p">.</span><span class="nx">totalTime</span><span class="o">*</span><span class="mi">1000</span><span class="p">)),</span>
|
|
<span class="nx">isAlt</span> <span class="o">=</span> <span class="kc">null</span><span class="p">,</span> <span class="nx">i</span><span class="p">,</span> <span class="nx">j</span><span class="p">,</span> <span class="nx">d</span><span class="p">;</span>
|
|
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span><span class="nx">j</span><span class="o">=</span><span class="nx">me</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="nx">j</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">isAlt</span> <span class="o">=</span> <span class="p">(</span><span class="nx">i</span><span class="o">%</span><span class="mi">2</span><span class="o">===</span><span class="mi">0</span><span class="p">);</span>
|
|
<span class="nx">oParent</span><span class="p">.</span><span class="nx">drawSolidArc</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oCanvas</span><span class="p">,(</span><span class="nx">isAlt</span><span class="o">?</span><span class="nx">oParent</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">segmentRingColorAlt</span><span class="o">:</span><span class="nx">oParent</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">segmentRingColor</span><span class="p">),</span><span class="nx">isAlt</span><span class="o">?</span><span class="nx">width</span><span class="o">:</span><span class="nx">width</span><span class="p">,</span> <span class="nx">isAlt</span><span class="o">?</span><span class="nx">radius</span><span class="o">/</span><span class="mi">2</span><span class="o">:</span><span class="nx">radius</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span> <span class="nx">oParent</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">(</span><span class="mi">360</span><span class="o">*</span><span class="p">(</span><span class="nx">me</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">endTimeMS</span><span class="o">/</span><span class="nx">fullDuration</span><span class="p">)),</span> <span class="nx">oParent</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">(</span><span class="mi">360</span><span class="o">*</span><span class="p">((</span><span class="nx">me</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">startTimeMS</span><span class="o">||</span><span class="mi">1</span><span class="p">)</span><span class="o">/</span><span class="nx">fullDuration</span><span class="p">)),</span> <span class="kc">true</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">d</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">();</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">d</span><span class="o">-</span><span class="nx">me</span><span class="p">.</span><span class="nx">lastWPExec</span><span class="o">></span><span class="nx">me</span><span class="p">.</span><span class="nx">refreshInterval</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">me</span><span class="p">.</span><span class="nx">refresh</span><span class="p">();</span>
|
|
<span class="nx">me</span><span class="p">.</span><span class="nx">lastWPExec</span> <span class="o">=</span> <span class="nx">d</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">refresh</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-79'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-79">¶</a>
|
|
</div>
|
|
<p>Display info as appropriate</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="kd">var</span> <span class="nx">i</span><span class="p">,</span> <span class="nx">j</span><span class="p">,</span> <span class="nx">index</span> <span class="o">=</span> <span class="kc">null</span><span class="p">,</span>
|
|
<span class="nx">now</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">position</span><span class="p">,</span>
|
|
<span class="nx">metadata</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">metadata</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
|
|
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="nx">j</span><span class="o">=</span><span class="nx">metadata</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="nx">j</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">now</span> <span class="o">>=</span> <span class="nx">metadata</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">startTimeMS</span> <span class="o">&&</span> <span class="nx">now</span> <span class="o"><=</span> <span class="nx">metadata</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">endTimeMS</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">index</span> <span class="o">=</span> <span class="nx">i</span><span class="p">;</span>
|
|
<span class="k">break</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">index</span> <span class="o">!==</span> <span class="nx">metadata</span><span class="p">.</span><span class="nx">currentItem</span> <span class="o">&&</span> <span class="nx">index</span> <span class="o"><</span> <span class="nx">metadata</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-80'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-80">¶</a>
|
|
</div>
|
|
<p>update</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">metadata</span><span class="p">.</span><span class="nx">mainTitle</span><span class="o">+</span><span class="s1">' <span class="metadata"><span class="sm2_divider"> | </span><span class="sm2_metadata">'</span><span class="o">+</span><span class="nx">metadata</span><span class="p">[</span><span class="nx">index</span><span class="p">].</span><span class="nx">title</span><span class="o">+</span><span class="s1">'</span></span>'</span><span class="p">;</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-81'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-81">¶</a>
|
|
</div>
|
|
<p>self.setPageTitle(metadata[index].title+‘ | ’+metadata.mainTitle);</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">metadata</span><span class="p">.</span><span class="nx">currentItem</span> <span class="o">=</span> <span class="nx">index</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">strToTime</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sTime</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kd">var</span> <span class="nx">segments</span> <span class="o">=</span> <span class="nx">sTime</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">':'</span><span class="p">),</span>
|
|
<span class="nx">seconds</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">i</span><span class="p">;</span>
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="nx">segments</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">--</span><span class="p">;)</span> <span class="p">{</span>
|
|
<span class="nx">seconds</span> <span class="o">+=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">segments</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="mi">10</span><span class="p">)</span><span class="o">*</span><span class="nb">Math</span><span class="p">.</span><span class="nx">pow</span><span class="p">(</span><span class="mi">60</span><span class="p">,</span><span class="nx">segments</span><span class="p">.</span><span class="nx">length</span><span class="o">-</span><span class="mi">1</span><span class="o">-</span><span class="nx">i</span><span class="p">);</span> <span class="c1">// hours, minutes</span>
|
|
<span class="p">}</span>
|
|
<span class="k">return</span> <span class="nx">seconds</span><span class="p">;</span>
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">data</span> <span class="o">=</span> <span class="p">[];</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">givenDuration</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">currentItem</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">mainTitle</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">;</span>
|
|
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="nx">oItems</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">o</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
|
<span class="nx">title</span><span class="o">:</span> <span class="nx">oItems</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'p'</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">innerHTML</span><span class="p">,</span>
|
|
<span class="nx">startTime</span><span class="o">:</span> <span class="nx">oItems</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'span'</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">innerHTML</span><span class="p">,</span>
|
|
<span class="nx">startSeconds</span><span class="o">:</span> <span class="nx">me</span><span class="p">.</span><span class="nx">strToTime</span><span class="p">(</span><span class="nx">oItems</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'span'</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">innerHTML</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/[()]/g</span><span class="p">,</span><span class="s1">''</span><span class="p">)),</span>
|
|
<span class="nx">duration</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
|
|
<span class="nx">durationMS</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
|
<span class="nx">startTimeMS</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
|
<span class="nx">endTimeMS</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
|
<span class="nx">oNote</span><span class="o">:</span> <span class="kc">null</span>
|
|
<span class="p">};</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">oDuration</span> <span class="o">=</span> <span class="nx">oParent</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'duration'</span><span class="p">,</span><span class="s1">'div'</span><span class="p">,</span><span class="nx">oBox</span><span class="p">);</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">givenDuration</span> <span class="o">=</span> <span class="p">(</span><span class="nx">oDuration</span><span class="p">.</span><span class="nx">length</span><span class="o">?</span><span class="nx">me</span><span class="p">.</span><span class="nx">strToTime</span><span class="p">(</span><span class="nx">oDuration</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">innerHTML</span><span class="p">)</span><span class="o">*</span><span class="mi">1000</span><span class="o">:</span><span class="mi">0</span><span class="p">);</span>
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">duration</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="o">+</span><span class="mi">1</span><span class="p">]</span><span class="o">?</span><span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="o">+</span><span class="mi">1</span><span class="p">].</span><span class="nx">startSeconds</span><span class="o">:</span><span class="p">(</span><span class="nx">me</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">givenDuration</span><span class="o">?</span><span class="nx">me</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">givenDuration</span><span class="o">:</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">durationEstimate</span><span class="p">)</span><span class="o">/</span><span class="mi">1000</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span><span class="o">-</span><span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">startSeconds</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">startTimeMS</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">startSeconds</span><span class="o">*</span><span class="mi">1000</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">durationMS</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">duration</span><span class="o">*</span><span class="mi">1000</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">endTimeMS</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">startTimeMS</span><span class="o">+</span><span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">durationMS</span><span class="p">;</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">totalTime</span> <span class="o">+=</span> <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">duration</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/webkit/i</span><span class="p">)</span> <span class="o">&&</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/mobile/i</span><span class="p">))</span> <span class="p">{</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-82'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-82">¶</a>
|
|
</div>
|
|
<p>iPad, iPhone etc.</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre> <span class="nx">soundManager</span><span class="p">.</span><span class="nx">setup</span><span class="p">({</span>
|
|
<span class="nx">useHTML5Audio</span><span class="o">:</span> <span class="kc">true</span>
|
|
<span class="p">});</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">soundManager</span><span class="p">.</span><span class="nx">setup</span><span class="p">({</span>
|
|
<span class="nx">html5PollingInterval</span><span class="o">:</span> <span class="mi">50</span><span class="p">,</span> <span class="c1">// increased framerate for whileplaying() etc.</span>
|
|
<span class="nx">debugMode</span><span class="o">:</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/debug=1/i</span><span class="p">)),</span> <span class="c1">// disable or enable debug output</span>
|
|
<span class="nx">consoleOnly</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="nx">flashVersion</span><span class="o">:</span> <span class="mi">9</span><span class="p">,</span>
|
|
<span class="nx">useHighPerformance</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="nx">useFlashBlock</span><span class="o">:</span> <span class="kc">true</span>
|
|
<span class="p">});</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-83'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-83">¶</a>
|
|
</div>
|
|
<p>FPS data, testing/debug only</p>
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre><span class="k">if</span> <span class="p">(</span><span class="nx">soundManager</span><span class="p">.</span><span class="nx">debugMode</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nb">window</span><span class="p">.</span><span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="kd">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">threeSixtyPlayer</span><span class="p">;</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">p</span> <span class="o">&&</span> <span class="nx">p</span><span class="p">.</span><span class="nx">lastSound</span> <span class="o">&&</span> <span class="nx">p</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">fps</span> <span class="o">&&</span> <span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">isHome</span> <span class="o">===</span> <span class="s1">'undefined'</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">soundManager</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">'fps: ~'</span><span class="o">+</span><span class="nx">p</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">fps</span><span class="p">);</span>
|
|
<span class="nx">p</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">fps</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">},</span><span class="mi">1000</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nb">window</span><span class="p">.</span><span class="nx">ThreeSixtyPlayer</span> <span class="o">=</span> <span class="nx">ThreeSixtyPlayer</span><span class="p">;</span> <span class="c1">// constructor</span>
|
|
|
|
<span class="p">}(</span><span class="nb">window</span><span class="p">));</span>
|
|
|
|
<span class="nx">threeSixtyPlayer</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ThreeSixtyPlayer</span><span class="p">();</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
<tr id='section-84'>
|
|
<td class=docs>
|
|
<div class="pilwrap">
|
|
<a class="pilcrow" href="#section-84">¶</a>
|
|
</div>
|
|
<p>hook into SM2 init</p>
|
|
|
|
</td>
|
|
<td class=code>
|
|
<div class='highlight'><pre><span class="nx">soundManager</span><span class="p">.</span><span class="nx">onready</span><span class="p">(</span><span class="nx">threeSixtyPlayer</span><span class="p">.</span><span class="nx">init</span><span class="p">);</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</body>
|