Factorizing ImageUploader and adding Flickr

Factorizing the Image Uploader application, adding Flickr support.
deanlandolt · Sep 30, 2012 · 59ad0c3 · 59ad0c3
1 parent c4b5d87
commit 59ad0c3
Show file tree

Hide file tree

Showing 5 changed files with 880 additions and 491 deletions.
diff --git a/test_apps/image-uploader/index.html b/test_apps/image-uploader/index.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<!-- vim: set ts=2 sw=2 et: -->
 <html>
   <head>
     <meta charset="utf-8" />
@@ -32,48 +33,13 @@ <h2 class="bb-docs">Previews</h2>
       </div>
     </section>
 
-    <section role=region" id="services">
+    <section role="region" id="services">
       <div class="bb-docs">
         <h2 class="bb-docs">Services</h2>
-        <ul data-state="edit">
-          <li>
-            <img src="style/images/canardpc.jpg">
-            <label class="check">
-              <input type="checkbox" name="canardpc" id="upload-canardpc" />
-              <span></span>
-            </label>
-            <dl>
-              <dt>CanardPC</dt>
-              <dd><span>anonymous</span></dd>
-            </dl>
-          </li>
-          <li>
-            <img src="style/images/twitter-bird-light-bgs.png">
-            <label class="check">
-              <input type="checkbox" name="twitter" id="upload-twitter" />
-              <span></span>
-            </label>
-            <dl>
-              <dt>Twitter</dt>
-              <dd><span>auth</span></dd>
-            </dl>
-          </li>
-          <li>
-            <img src="style/images/imgur-iphone.png">
-            <label class="check">
-              <input type="checkbox" name="imgur" id="upload-imgur" />
-              <span></span>
-            </label>
-            <dl>
-              <dt>Imgur</dt>
-              <dd><span>anonymous</span></dd>
-            </dl>
-          </li>
+        <ul data-state="edit" id="services-list">
         </ul>
-        <div class="bb-docs" id="twitter-content">
-          <label id="label-twitter-message" for="twitter-message">Your Tweet:</label>
-          <textarea id="twitter-message" class="message" rows="3" cols="50" maxlength="140"></textarea>
-          <p id="credentials-status"></p>
+        <h2 class="bb-docs">Content for upload</h2>
+        <div class="bb-docs" id="service-content">
         </div>
         <div class="bb-docs">
           <button id="share">Share</button>
@@ -88,52 +54,6 @@ <h2 class="bb-docs">Services</h2>
       </p>
     </section>
 
-    <section role="dialog" id="confirm-twitter-auth">
-      <div>
-          <h3>Confirmation</h3>
-          <div class="content">
-          <img src="style/images/twitter-bird-light-bgs.png">
-          <strong>Twitter</strong>
-          <small>Authorization</small>
-        </div>
-        <p>We now need that you authorize our application. A browser window
-will get you to Twitter website, where you will be able to authenticate
-yourself and to authorize us. It will give you a PIN code. Please keep it, get
-back here and fill it in the prompt.</p>
-      </div>
-      <menu data-items="2">
-        <button id="twitter-auth-cancel">Cancel</button>
-        <button id="twitter-auth-continue" class="affirmative">Continue</button>
-      </menu>
-    </section>
-
-    <section role="dialog" id="twitter-pin">
-      <div>
-          <h3>Enter PIN</h3>
-          <div class="content">
-          <img src="style/images/twitter-bird-light-bgs.png">
-          <strong>Twitter</strong>
-          <small>Authorization</small>
-        </div>
-        <p>Please enter PIN code given by Twitter:</p>
-        <input type="number" placeholder="PIN code" id="twitter-pincode">
-      </div>
-      <menu data-items="1">
-        <button id="twitter-pin-continue" class="affirmative">Continue</button>
-      </menu>
-    </section>
-
-    <section role="dialog" id="confirm-twitter-revoke">
-      <div>
-       <h3>Confirmation</h3>
-       <p>Are you sure you want to revoke this Twitter account?</p>
-      </div>
-      <menu data-items="2">
-        <button id="twitter-revoke-cancel">Cancel</button>
-        <button id="twitter-revoke-revoke" class="negative">Revoke</button>
-      </menu>
-    </section>
-
   </body>
 </html>
 
diff --git a/test_apps/image-uploader/js/credentials_db.js b/test_apps/image-uploader/js/credentials_db.js
@@ -4,7 +4,7 @@ function CredentialsDB(provider) {
   this.ready = false;
   this.indexes = [];
   this.provider = provider;
-  this.version = 1;
+  this.version = 3;
   var credsdb = this;
 
   // Set up IndexedDB
@@ -37,7 +37,7 @@ function CredentialsDB(provider) {
 
     // Now build the database
     var filestore = db.createObjectStore(
-      'credentials', { keyPath: 'screen_name' }
+      'credentials', { keyPath: 'provider' }
     );
     credsdb.indexes.forEach(function(indexName)  {
       // the index name is also the keypath
@@ -89,13 +89,13 @@ CredentialsDB.prototype = {
     var trans = this.db.transaction('credentials', 'readwrite');
     var store = trans.objectStore('credentials');
     var addRequest = store.add(creds);
+    addRequest.onsuccess = function() {
+      callback(null);
+    };
     addRequest.onerror = function(e) {
       e.stopPropagation();
       callback(e);
     };
-    addRequest.onsuccess = function() {
-      callback(null);
-    };
   },
 
   delcreds: function(screenName, callback) {