[ARCH] Image preview draft

src/document/Document.js

@@ -72,13 +72,15 @@ define(function (require, exports, module) {
      * @param {!FileEntry} file  Need not lie within the project.
      * @param {!Date} initialTimestamp  File's timestamp when we read it off disk.
      * @param {!string} rawText  Text content of the file.
+     * @param {!string} template  Viewing instead of editing if present (specifies viewer type).  
      */
-    function Document(file, initialTimestamp, rawText) {
+    function Document(file, initialTimestamp, rawText, template) {
         if (!(this instanceof Document)) {  // error if constructor called without 'new'
             throw new Error("Document constructor must be called with 'new'");
         }
 
         this.file = file;
+        this.template = template;
         this._updateLanguage();
         this.refreshText(rawText, initialTimestamp);
     }
@@ -95,6 +97,12 @@ define(function (require, exports, module) {
      */
     Document.prototype.file = null;
 
+    /**
+     * The template name for this document. Currently used to preview image file types.
+     * @type {!string}
+     */
+    Document.prototype.template = null;
+
     /**
      * The Language for this document. Will be resolved by file extension in the constructor
      * @type {!Language}

src/document/DocumentManager.js

@@ -597,7 +597,10 @@ define(function (require, exports, module) {
             return pendingPromise;
         } else {
             var result = new $.Deferred(),
-                promise = result.promise();
+                promise = result.promise(),
+                // get the document extension to select the opening method 
+                i = fullPath.lastIndexOf("."),
+                ext = (i === -1 || i >= fullPath.length - 1) ? fullPath : fullPath.substr(i + 1);
 
             // create a new document
             var perfTimerName = PerfUtils.markStart("getDocumentForPath:\t" + fullPath);
@@ -617,18 +620,30 @@ define(function (require, exports, module) {
                 getDocumentForPath._pendingDocumentPromises[fullPath] = promise;
 
                 fileEntry = new NativeFileSystem.FileEntry(fullPath);
-                FileUtils.readAsText(fileEntry)
-                    .always(function () {
-                        // document is no longer pending
-                        delete getDocumentForPath._pendingDocumentPromises[fullPath];
-                    })
-                    .done(function (rawText, readTimestamp) {
-                        doc = new DocumentModule.Document(fileEntry, readTimestamp, rawText);
-                        result.resolve(doc);
-                    })
-                    .fail(function (fileError) {
-                        result.reject(fileError);
-                    });
+
+                if (ext.match(/^png|jpe?g|bmp|gif$/)) {
+
+                    doc = new DocumentModule.Document(fileEntry, new Date(), fullPath, 'image');
+                    _gcDocuments();
+                    result.resolve(doc);
+
+                } else {
+
+                    FileUtils.readAsText(fileEntry)
+                        .always(function () {
+                            // document is no longer pending
+                            delete getDocumentForPath._pendingDocumentPromises[fullPath];
+                        })
+                        .done(function (rawText, readTimestamp) {
+                            doc = new DocumentModule.Document(fileEntry, readTimestamp, rawText);
+                            result.resolve(doc);
+                        })
+                        .fail(function (fileError) {
+                            result.reject(fileError);
+                        });
+
+                }
+
             }
 
             // This is a good point to clean up any old dangling Documents

src/editor/Editor.js

@@ -74,7 +74,8 @@ define(function (require, exports, module) {
         TextRange          = require("document/TextRange").TextRange,
         TokenUtils         = require("utils/TokenUtils"),
         ViewUtils          = require("utils/ViewUtils"),
-        Async              = require("utils/Async");
+        Async              = require("utils/Async"),
+        Mustache           = require("thirdparty/mustache/mustache");
 
     var defaultPrefs = { useTabChar: false, tabSize: 4, spaceUnits: 4, closeBrackets: false,
                          showLineNumbers: true, styleActiveLine: false, wordWrap: true };
@@ -420,6 +421,61 @@ define(function (require, exports, module) {
                 return this._codeMirror.getScrollInfo().top;
             }
         });
+
+        /** 
+         * There's no separate viewer class at the moment, so we're tapping
+         * into the editor and replacing it with a corresponding template.
+         */
+        if (document.template) {
+
+            // temporary: storing templates in an object
+            var templates = {
+                'image': '<style> \
+                            .image-viewer { \
+                                background: #f8f8f8; \
+                                display: table; \
+                                width: 100%; \
+                                height: 100%; \
+                                vertical-align: middle; \
+                            } \
+                            .image-viewer span { \
+                                display: table-cell; \
+                                vertical-align: middle; \
+                                text-align: center; \
+                            } \
+                            .image-viewer img { \
+                                max-width: 80%; \
+                                max-height: 80%; \
+                                border-radius: 5px; \
+                            } \
+                            .image-viewer img { \
+                                max-width: 400px; \
+                                max-height: 400px; \
+                                border-radius: 5px; \
+                            } \
+                          </style> \
+                          <div class="image-viewer"> \
+                            <span><img src="file://{{file.fullPath}}" /></span> \
+                          </div>'
+            }
+            var extras = {
+                'image': function() {
+                    self = this;
+                    // dirty; would be nice to extend status bar for this, actually
+                    $('.image-viewer img').load(function () {
+                        $('#status-cursor').text(this.naturalWidth+' x '+this.naturalHeight+ ' '+Strings.UNIT_PIXELS);
+                        $('#status-file').text('— '+self.document.file.name);
+                        $('#status-language').text('Image');
+                    });
+                }
+            }
+
+            // render the template and call the function 
+            // (which should probably be remade into an event)
+            $(this._codeMirror.getWrapperElement()).html(Mustache.render(templates[document.template], document));
+            extras[document.template].call(this);
+
+        }
     }
 
     /**

src/view/ViewCommandHandlers.js

@@ -113,10 +113,11 @@ define(function (require, exports, module) {
      */
     function _setSizeAndRestoreScroll(fontSizeStyle, lineHeightStyle) {
         var editor      = EditorManager.getCurrentFullEditor(),
+            linesblock  = $(".CodeMirror-lines", editor.getRootElement()),
             oldWidth    = editor._codeMirror.defaultCharWidth(),
             oldHeight   = editor.getTextHeight(),
             scrollPos   = editor.getScrollPos(),
-            viewportTop = $(".CodeMirror-lines", editor.getRootElement()).parent().position().top,
+            viewportTop = linesblock.get(0)? linesblock.parent().position().top : 0,
             scrollTop   = scrollPos.y - viewportTop;
 
         // It's necessary to inject a new rule to address all editors.