Display page updates for gallery per #64

Author: scottgarner

display/index.html

@@ -68,6 +68,9 @@ <h4 class="modal-title" id="codeModalTitle">Processing Code</h4>
 </div><!-- /.modal -->
 
 <!-- End Modal Code Window -->
+
+<script src="//www.parsecdn.com/js/parse-1.3.1.min.js"></script>
+
 <script src="/js/vendor/ace/ace.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/vendor/FileSaver.min.js" type="text/javascript"></script>
 

js/display.js

@@ -21,8 +21,13 @@ var helloDisplay = {
         // Get the gistID from the URL and display it
 
         if (document.URL.indexOf('#') >= 0) {
-            var gistID = document.URL.split('#')[1];
-            this.displayGist(gistID);
+            var sketchID = document.URL.split('#')[1];
+
+            if (sketchID[0] == "@") {
+                this.displayGallery(sketchID.substr(1));
+            } else {
+                this.displayGist(sketchID);
+            }
         }
 
         $("#displayCode").click(function () {
@@ -66,37 +71,66 @@ var helloDisplay = {
 
                 var gistFiles = data.responseJSON.files,
                     gistFile = gistFiles[Object.keys(gistFiles)[0]],
-                    gistSource = gistFile.content,
-                    processingCanvas,
-                    processingInstance,
-                    displayHeight,
-                    displayWidth;
-
-                helloDisplay.processingSource = gistSource;
-                helloDisplay.editor.setValue(gistSource, -1);
-
-                try {
-                    processingCanvas = document.getElementById("displayCanvas");
-                    processingInstance = new Processing(processingCanvas, gistSource);
-
-                    displayHeight = 400;
-                    displayWidth = (processingInstance.width / processingInstance.height) * displayHeight;
-
-                    $("#displayCanvas").css({
-                        width: displayWidth,
-                        height: displayHeight
-                    });
-
-                    $("#displayCanvasBox").css({
-                        width: displayWidth + ($("#displayInfo").outerWidth() + 10),
-                        height: displayHeight,
-                        marginTop: displayHeight / -2,
-                        marginLeft: (displayWidth + $("#displayInfo").outerWidth() + 10) / -2
-                    });
-                } catch (e) {
-                    console.log("ERROR! " + e.toString());
-                }
+                    gistSource = gistFile.content;                    
+
+                helloDisplay.showSketch(gistSource);
             }
         });
+    },
+    /**
+     * Fetch sketch code Parse
+     */    
+    displayGallery: function (parseID) {    
+
+        Parse.initialize("x8FmMInL8BbVeBqonPzgvS8WNKbPro65Li5DzTI0", "Y7PPNnhLPhCdFMAKgw7amBxGerz67gAnG3UKb53s");
+
+        var GalleryObject = Parse.Object.extend("Gallery");
+        var query = new Parse.Query(GalleryObject);
+        query.get(parseID, {
+          success: function(gallery) {
+            helloDisplay.showSketch(gallery.get("source"));
+          },
+          error: function(object, error) {
+            // The object was not retrieved successfully.
+            // error is a Parse.Error with an error code and message.
+          }
+        });
+
+    },
+    /**
+     * Feed sourceto Processing.js
+     */
+    showSketch: function (source) {
+
+        var processingCanvas,
+            processingInstance,
+            displayHeight,
+            displayWidth;
+
+        helloDisplay.processingSource = source;
+        helloDisplay.editor.setValue(source, -1);
+
+        try {
+            processingCanvas = document.getElementById("displayCanvas");
+            processingInstance = new Processing(processingCanvas, source);
+
+            displayHeight = 400;
+            displayWidth = (processingInstance.width / processingInstance.height) * displayHeight;
+
+            $("#displayCanvas").css({
+                width: displayWidth,
+                height: displayHeight
+            });
+
+            $("#displayCanvasBox").css({
+                width: displayWidth + ($("#displayInfo").outerWidth() + 10),
+                height: displayHeight,
+                marginTop: displayHeight / -2,
+                marginLeft: (displayWidth + $("#displayInfo").outerWidth() + 10) / -2
+            });
+        } catch (e) {
+            console.log("ERROR! " + e.toString());
+        }
+
     }
 };