Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Show how to bind the UI events to the appropriate actions

  • Loading branch information...
commit 9ef70e4bcff568ae01d48465f1ea5d63dc61ce92 1 parent 69ab710
@galfert galfert authored
Showing with 117 additions and 3 deletions.
  1. +112 −0 docs/app.html
  2. +2 −3 docs/tutorial.html
  3. +3 −0  js/tutorial.js
View
112 docs/app.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html> <html> <head> <title>app.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> app.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="nx">require</span><span class="p">([</span><span class="s1">&#39;./js/tutorial&#39;</span><span class="p">,</span> <span class="s1">&#39;./js/helper&#39;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">unhosted</span><span class="p">,</span> <span class="nx">helper</span><span class="p">)</span> <span class="p">{</span>
+
+ <span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+
+ <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#connect&#39;</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</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">userAddress</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#userAddress&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
+
+ <span class="nx">helper</span><span class="p">.</span><span class="nx">showSpinner</span><span class="p">(</span><span class="s1">&#39;connectionSpinner&#39;</span><span class="p">);</span>
+
+ <span class="nx">unhosted</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">userAddress</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">,</span> <span class="nx">storageInfo</span><span class="p">)</span> <span class="p">{</span>
+ <span class="k">if</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">helper</span><span class="p">.</span><span class="nx">setConnectionState</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
+ <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
+ <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">&#39;userStorageInfo&#39;</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">storageInfo</span><span class="p">));</span>
+ <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">&#39;userAddress&#39;</span><span class="p">,</span> <span class="nx">userAddress</span><span class="p">);</span>
+ <span class="nx">helper</span><span class="p">.</span><span class="nx">setConnectionState</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
+ <span class="p">}</span>
+
+ <span class="nx">helper</span><span class="p">.</span><span class="nx">hideSpinner</span><span class="p">(</span><span class="s1">&#39;connectionSpinner&#39;</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">$</span><span class="p">(</span><span class="s1">&#39;#fetchPublicKey&#39;</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</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">key</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#publicKey&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
+
+ <span class="nx">helper</span><span class="p">.</span><span class="nx">showSpinner</span><span class="p">(</span><span class="s1">&#39;fetchPublicSpinner&#39;</span><span class="p">);</span>
+
+ <span class="nx">unhosted</span><span class="p">.</span><span class="nx">getData</span><span class="p">(</span><span class="s1">&#39;public&#39;</span><span class="p">,</span> <span class="nx">key</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">,</span> <span class="nx">data</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">error</span> <span class="o">&amp;&amp;</span> <span class="nx">data</span> <span class="o">!=</span> <span class="s2">&quot;null&quot;</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#publicValue&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
+ <span class="p">}</span>
+
+ <span class="nx">helper</span><span class="p">.</span><span class="nx">hideSpinner</span><span class="p">(</span><span class="s1">&#39;fetchPublicSpinner&#39;</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">$</span><span class="p">(</span><span class="s1">&#39;#publishPublic&#39;</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</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">key</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#publicKey&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
+ <span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#publicValue&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
+
+ <span class="nx">helper</span><span class="p">.</span><span class="nx">showSpinner</span><span class="p">(</span><span class="s1">&#39;publishPublicSpinner&#39;</span><span class="p">);</span>
+
+ <span class="nx">unhosted</span><span class="p">.</span><span class="nx">putData</span><span class="p">(</span><span class="s1">&#39;public&#39;</span><span class="p">,</span> <span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">error</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">error</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#publicValue&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
+ <span class="p">}</span>
+
+ <span class="nx">helper</span><span class="p">.</span><span class="nx">hideSpinner</span><span class="p">(</span><span class="s1">&#39;publishPublicSpinner&#39;</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">$</span><span class="p">(</span><span class="s1">&#39;#authorize&#39;</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+ <span class="nx">unhosted</span><span class="p">.</span><span class="nx">authorize</span><span class="p">([</span><span class="s1">&#39;public&#39;</span><span class="p">,</span> <span class="s1">&#39;tutorial&#39;</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">$</span><span class="p">(</span><span class="s1">&#39;#publishTutorial&#39;</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</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">key</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#tutorialKey&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
+ <span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#tutorialValue&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
+
+ <span class="nx">helper</span><span class="p">.</span><span class="nx">showSpinner</span><span class="p">(</span><span class="s1">&#39;publishTutorialSpinner&#39;</span><span class="p">);</span>
+
+ <span class="nx">unhosted</span><span class="p">.</span><span class="nx">putData</span><span class="p">(</span><span class="s1">&#39;tutorial&#39;</span><span class="p">,</span> <span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">error</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">error</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#tutorialValue&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
+ <span class="p">}</span>
+
+ <span class="nx">helper</span><span class="p">.</span><span class="nx">hideSpinner</span><span class="p">(</span><span class="s1">&#39;publishTutorialSpinner&#39;</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">$</span><span class="p">(</span><span class="s1">&#39;#fetchTutorialKey&#39;</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</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">key</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#tutorialKey&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
+
+ <span class="nx">helper</span><span class="p">.</span><span class="nx">showSpinner</span><span class="p">(</span><span class="s1">&#39;fetchTutorialSpinner&#39;</span><span class="p">);</span>
+
+ <span class="nx">unhosted</span><span class="p">.</span><span class="nx">getData</span><span class="p">(</span><span class="s1">&#39;tutorial&#39;</span><span class="p">,</span> <span class="nx">key</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">,</span> <span class="nx">data</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">error</span> <span class="o">&amp;&amp;</span> <span class="nx">data</span> <span class="o">!==</span> <span class="s2">&quot;null&quot;</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#tutorialValue&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
+ <span class="p">}</span>
+
+ <span class="nx">helper</span><span class="p">.</span><span class="nx">hideSpinner</span><span class="p">(</span><span class="s1">&#39;fetchTutorialSpinner&#39;</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">$</span><span class="p">(</span><span class="s1">&#39;#disconnect&#39;</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+ <span class="nx">helper</span><span class="p">.</span><span class="nx">disconnect</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">$</span><span class="p">(</span><span class="s1">&#39;#deauthorize&#39;</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+ <span class="nx">helper</span><span class="p">.</span><span class="nx">deauthorize</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">helper</span><span class="p">.</span><span class="nx">setConnectionState</span><span class="p">(</span><span class="nx">helper</span><span class="p">.</span><span class="nx">isConnected</span><span class="p">());</span>
+ <span class="nx">helper</span><span class="p">.</span><span class="nx">setAuthorizedState</span><span class="p">(</span><span class="nx">helper</span><span class="p">.</span><span class="nx">isAuthorized</span><span class="p">());</span>
+ <span class="p">});</span>
+
+<span class="p">});</span>
+
+</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
View
5 docs/tutorial.html
@@ -73,9 +73,8 @@
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Stored &quot;&#39;</span> <span class="o">+</span> <span class="nx">value</span> <span class="o">+</span> <span class="s1">&#39;&quot; for key &quot;&#39;</span> <span class="o">+</span> <span class="nx">key</span> <span class="o">+</span> <span class="s1">&#39;&quot; in &quot;&#39;</span> <span class="o">+</span> <span class="nx">category</span> <span class="o">+</span> <span class="s1">&#39;&quot; category&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
- <span class="p">}</span>
-
- <span class="k">return</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">&#182;</a> </div> <p>Now all that's left is to bind the events from the different UI
+elements to these actions, as can be seen <a href="app.html">here</a>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="p">{</span>
<span class="nx">connect</span><span class="o">:</span> <span class="nx">connect</span><span class="p">,</span>
<span class="nx">authorize</span><span class="o">:</span> <span class="nx">authorize</span><span class="p">,</span>
<span class="nx">getData</span><span class="o">:</span> <span class="nx">getData</span><span class="p">,</span>
View
3  js/tutorial.js
@@ -101,6 +101,9 @@ define(['./remoteStorage', './helper'], function(remoteStorage, helper) {
});
}
+ // Now all that's left is to bind the events from the different UI
+ // elements to these actions, as can be seen [here](app.html).
+
return {
connect: connect,
authorize: authorize,
Please sign in to comment.
Something went wrong with that request. Please try again.