Showing QrCodes for faster access to Read/Write URLs

.gitignore

@@ -3,6 +3,10 @@
 .sass-cache
 node_modules
 
+# Jetbrains Idea
+*.iml
+.idea
+
 # Ignore SymbolSet font files.
 symbolset/ss-standard.eot
 symbolset/ss-standard.svg

app/app-model.js

@@ -8,7 +8,9 @@ Socrates.Model = Backbone.Model.extend({
     defaults : {
         document  : null,
         documents : null,
-        state     : null
+        state     : null,
+        readQrCodeImgTag  : null,
+        writeQrCodeImgTag : null
     },
 
     bookmarkKey : 'socrates.bookmarks',

app/app-view.js

@@ -25,24 +25,30 @@ Socrates.View = Backbone.View.extend({
     youtubeEmbedTemplate : _.template('<iframe width="100%" height="400" src="http://www.youtube.com/embed/<%= id %>" frameborder="0" allowfullscreen></iframe>'),
 
     events : {
-        'keyup .document-textarea' : 'onTextareaKeyup',
-        'click .read-only-button'  : 'onReadOnlyButtonClick',
-        'click .write-only-button' : 'onWriteOnlyButtonClick',
-        'click .add-button'        : 'onAddButtonClick',
-        'click .menu-button'       : 'onMenuButtonClick'
+        'keyup .document-textarea'   : 'onTextareaKeyup',
+        'click .read-only-button'    : 'onReadOnlyButtonClick',
+        'click .write-only-button'   : 'onWriteOnlyButtonClick',
+        'click .add-button'          : 'onAddButtonClick',
+        'click .menu-button'         : 'onMenuButtonClick',
+        'click .write-qrcode-button' : 'onQrCodeWriteButtonClick',
+        'click .read-qrcode-button'  : 'onQrCodeReadButtonClick'
     },
 
     initialize : function (options) {
         _.bindAll(this);
 
         // Cache some jQuery selectors.
-        this.$title           = this.$('title');
-        this.$menu            = this.$('.document-menu');
-        this.$textarea        = this.$('.document-textarea');
-        this.$article         = this.$('.document-article');
-        this.$menuButton      = this.$('.menu-button');
-        this.$readOnlyButton  = this.$('.read-only-button');
-        this.$writeOnlyButton = this.$('.write-only-button');
+        this.$title             = this.$('title');
+        this.$menu              = this.$('.document-menu');
+        this.$textarea          = this.$('.document-textarea');
+        this.$article           = this.$('.document-article');
+        this.$menuButton        = this.$('.menu-button');
+        this.$readOnlyButton    = this.$('.read-only-button');
+        this.$writeOnlyButton   = this.$('.write-only-button');
+        this.$writeQrCodeButton = this.$('.write-qrcode-button');
+        this.$writeQrCodeArea   = this.$('.write-qrcode-area');
+        this.$readQrCodeButton  = this.$('.read-qrcode-button');
+        this.$readQrCodeArea    = this.$('.read-qrcode-area');
 
         // Allow tabs in the textarea using a jQuery plugin.
         this.$textarea.tabby({tabString:'    '});
@@ -283,6 +289,44 @@ Socrates.View = Backbone.View.extend({
         window.analytics.track('Press Write-only Button');
     },
 
+    onQrCodeReadButtonClick : function (event) {
+        event.preventDefault();
+
+        var imgtag = this.lazy_init_qrcode('readQrCodeImgTag', 'read');
+        this.$readQrCodeArea.empty().append(imgtag).toggle(250);
+
+        this.$readQrCodeButton.toggleState('pressed');
+
+        window.analytics.track('Press Read-QrCode Button');
+    },
+
+    onQrCodeWriteButtonClick : function (event) {
+        event.preventDefault();
+
+        var imgtag = this.lazy_init_qrcode('writeQrCodeImgTag', 'write');
+        this.$writeQrCodeArea.empty().append(imgtag).toggle(250);
+
+        this.$writeQrCodeButton.toggleState('pressed');
+
+        window.analytics.track('Press Write-QrCode Button');
+    },
+
+    lazy_init_qrcode : function (modelName, urlSuffix) {
+        var imgtag = this.model.get(modelName);
+        if (imgtag == null) {
+            imgtag = this.create_qrcode_ImgTag(document.URL + "/" + urlSuffix);
+            this.model.set(modelName, imgtag);
+        }
+        return imgtag;
+    },
+
+    create_qrcode_ImgTag : function(text, typeNumber, errorCorrectLevel) {
+        var qr = qrcode(typeNumber || 4, errorCorrectLevel || 'M');
+        qr.addData(text);
+        qr.make();
+        return qr.createImgTag();
+    },
+
     onAppDocumentChange : function (model, document) {
         var previousDocument = this.model.previous('document');
         if (previousDocument) this.applyDocumentEventHandlers(previousDocument, true);

index.html

@@ -33,7 +33,9 @@
                     <button title="Your Documents" class="menu-button ss-rows"></button>
                     <button title="New Document" class="add-button ss-plus"></button>
                     <button title="Write Mode" class="write-only-button ss-write"></button>
+                    <button title="QR Code" class="write-qrcode-button ss-squares"></button>
                 </div>
+                <div class="write-qrcode-area"> <!-- will be set at runtime --> </div>
                 <div class="write-textarea-wrap">
                     <textarea class="document-textarea"></textarea>
                 </div>
@@ -44,7 +46,9 @@
         <section class="read">
             <div class="read-buttons">
                 <button title="Read Mode" class="read-only-button ss-view"></button>
+                <button title="QR Code" class="read-qrcode-button ss-squares"></button>
             </div>
+            <div class="read-qrcode-area"> <!-- will be set at runtime --> </div>
             <article class="document-article"></article>
         </section>