Add support for viewing image files within the editor.

fshost · Nov 29, 2011 · 0fc7baa · 0fc7baa
1 parent 3c6d82f
commit 0fc7baa
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 39 deletions.
diff --git a/client/css/style.css b/client/css/style.css
@@ -171,6 +171,13 @@ body {
 	border-radius: 8px;
 }
 
+.code-editor img.view {
+	background: white url('../img/checkerboard.png');
+	box-shadow: 0 0 1px black, 0 0 10px rgba(0,0,0,0.15);
+	display: block;
+	margin: 0 auto;
+}
+
 .galaxy-background {
 	position: absolute;
 	top: 0;

diff --git a/client/js/CodeEditor.js b/client/js/CodeEditor.js
@@ -18,6 +18,10 @@
             default: return undefined;
         }
     }
+
+    var makeViewPath = function(path) {
+        return document.location.protocol + "//" + document.location.hostname + ':' + ((parseInt(document.location.port) || 80) + 1) + path
+    }
 
     var createCodeMirror = function(parentNode, contents, path, options) {
         var mode = inferCodeMirrorModeFromPath(path);
@@ -99,7 +103,7 @@
 
         if (actionsBar.viewButton) {
             $(actionsBar.viewButton).click(function(e) {
-                var url = document.location.protocol + "//" + document.location.hostname + ':' + ((parseInt(document.location.port) || 80) + 1) + entry.path;
+                var url = makeViewPath(entry.path);
                 window.open(url, 'view-window');
             })
         }
@@ -284,47 +288,55 @@
         editor.appendChild(actionsBar)
         editor.className = 'code-editor'
 
-        connection.loadFile(entry.path, function(err, file) {
-            if (err) {
-                var errorBar = document.createElement('div');
-                errorBar.className = 'error'
-                errorBar.innerHTML = '<b>Unable to open file:</b> ' + err;
-                editor.appendChild(errorBar);
-                $(errorBar).hide();
-                $(errorBar).fadeIn(250);
-            } else {
-                codeMirror = createCodeMirror(editor, file, entry.path, { onChange: function(editor) {
-                    content = editor.getValue()
-                    changed = true
-                }})
+        if (entry.path.match(/\.(jpe?g|png|gif|bmp)$/)) {
+            var image = document.createElement('img')
+            image.src = makeViewPath(entry.path);
+            image.className = 'view'
+            editor.appendChild(image);
+            $(actionsBar.versionsButton).hide();
+        } else {
+            connection.loadFile(entry.path, function(err, file) {
+                if (err) {
+                    var errorBar = document.createElement('div');
+                    errorBar.className = 'error'
+                    errorBar.innerHTML = '<b>Unable to open file:</b> ' + err;
+                    editor.appendChild(errorBar);
+                    $(errorBar).hide();
+                    $(errorBar).fadeIn(250);
+                } else {
+                    codeMirror = createCodeMirror(editor, file, entry.path, { onChange: function(editor) {
+                        content = editor.getValue()
+                        changed = true
+                    }})
 
-                var content = file
-                var changed = false;
-                var saving = false;
+                    var content = file
+                    var changed = false;
+                    var saving = false;
 
-                setInterval(function() {
-                    if (changed && !saving) {
-                        var done = false;
-                        saving = true;
-                        var selected = $('.selected')
-                        selected.addClass('syncing')
-                        connection.saveFile(entry.path, content, function(err){
-                            if (!err) {
-                                changed = false
-                                done = true;
-                                selected.removeClass('syncing')
-                            }
-                            saving = false
-                        })
-                        setTimeout(function() {
-                            if (!done) {
+                    setInterval(function() {
+                        if (changed && !saving) {
+                            var done = false;
+                            saving = true;
+                            var selected = $('.selected')
+                            selected.addClass('syncing')
+                            connection.saveFile(entry.path, content, function(err){
+                                if (!err) {
+                                    changed = false
+                                    done = true;
+                                    selected.removeClass('syncing')
+                                }
                                 saving = false
-                            }
-                        }, 8000)
-                    }
-                }, 3000)
-            }
-        })
+                            })
+                            setTimeout(function() {
+                                if (!done) {
+                                    saving = false
+                                }
+                            }, 8000)
+                        }
+                    }, 3000)
+                }
+            })
+        }
 
         galaxyBackground.appendChild(editor)
         galaxyBackground.className = 'galaxy-background'