Merge pull request #149 from Kibibit/feature-support-images

[Feature] Support images 2

Author: thatkookooguy

app/models/fileService.js

@@ -1,5 +1,6 @@
 var dirTree = require('directory-tree'),
     fs = require('fs'),
+    util = require('util'),
     mime = require('mime-types');
 var console = require('./consoleService')('FILE CONTENT', ['blue', 'inverse']);
 
@@ -20,16 +21,24 @@ fileService.get = function(req, res) {
 
   var showNoContent = false ||
       isFileOfType('zip') ||
-      isFileOfType('program') ||
-      isFileOfType('image') ||
-      isFileOfType('font');
+      isFileOfType('program');
 
   // temprorary solution until we have a view selector on the FRONT-END
   if (showNoContent) {
     res.json({
       content: 'awww man... we can\'t show ' + mimeType + ' yet :-(',
       mimeType: 'text/text'
     });
+  } else if (isFileOfType('image')) {
+    console.info('image requested. Serving data URI');
+    var dataUri = base64Image(fileFullPath);
+    var file = {
+      content: dataUri,
+      mimeType: mimeType
+    };
+    res.json(file);
+  } else if (isFileOfType('font')) {
+    res.download(fileFullPath); // Set disposition and send it.
   } else {
     fs.readFile(fileFullPath, 'utf8', function(err, data) {
       if (err) {
@@ -119,7 +128,6 @@ fileService.putExtraArg = function(req, res) {
       message: 'For a hard save, 2nd param should be: True'
     });
   }
-
 };
 
 fileService.getFileTags = function(filepath) {
@@ -174,6 +182,11 @@ fileService.getFileTags = function(filepath) {
   return fileTags;
 };
 
+function base64Image(src) {
+  var data = fs.readFileSync(src).toString('base64');
+  return util.format('data:%s;base64,%s', mime.lookup(src), data);
+}
+
 function extraTypes(filepath) {
   if (filepath.indexOf('.') !== -1) {
     var extensionStart = filepath.lastIndexOf('.') + 1;

bower.json

@@ -20,7 +20,8 @@
     "json-formatter": "~0.5.0",
     "velocity": "~1.2.3",
     "ngclipboard": "~1.1.1",
-    "ng-device-detector": "~3.0.1"
+    "ng-device-detector": "~3.0.1",
+    "viewerjs": "fengyuanchen/viewerjs#~0.4.0"
   },
   "resolutions": {
     "angular": "1.5.7"

public/app/components/codeEditor/codeEditor.js

@@ -81,16 +81,14 @@ angular.module('kibibitCodeEditor')
       onChange: vm.aceChanged
     };
 
-    vm.updateFileContent = function(filePath) {
-      if (filePath !== '') {
-        FileService.getFile(filePath, function(fileInfo) {
-          vm.fileInfo = fileInfo.data;
-          vm.code = vm.fileInfo.content;
-          var fileMode = getModeFromMimeType(vm.fileInfo);
-          editorSettings.syntaxMode = fileMode;
-          vm.parsedJson = undefined;
-          console.debug('changed mode to ' + fileMode);
-        });
+    vm.updateFileContent = function(fileObject) {
+      if (fileObject) {
+        vm.fileInfo = fileObject;
+        vm.code = vm.fileInfo.content;
+        var fileMode = getModeFromMimeType(vm.fileInfo);
+        editorSettings.syntaxMode = fileMode;
+        vm.parsedJson = undefined;
+        console.debug('changed mode to ' + fileMode);
       }
     };
 

public/app/components/fullImageView/fullImageView.js

@@ -0,0 +1,42 @@
+angular.module('kibibitCodeEditor')
+
+.directive('kbFullImageView', function() {
+  return {
+    scope: {},
+    controller: 'fullImageViewController',
+    controllerAs: 'fullImageViewCtrl',
+    link: function(scope, element, attrs, fullImageViewCtrl) {
+      fullImageViewCtrl.addFullImageView(element);
+
+      scope.$watch(function() {
+        return element.attr('src');
+      }, function() {
+        if (fullImageViewCtrl.viewer) {
+          fullImageViewCtrl.viewer.update();
+        }
+      });
+    }
+  };
+})
+
+.controller('fullImageViewController', [
+  function() {
+    var vm = this;
+
+    vm.addFullImageView = function(element) {
+      if (window.Viewer) {
+        element.css({
+          visibility: 'hidden'
+        });
+        // View one image
+        vm.viewer = new Viewer(element[0], {
+          inline: true,
+          title: false,
+          button: false,
+          navbar: false
+        });
+      }
+    };
+
+  }
+]);

public/app/components/viewByFile/viewByFile.js

@@ -0,0 +1,44 @@
+angular.module('kibibitCodeEditor')
+
+.directive('kbViewByFile', function() {
+  return {
+    scope: {},
+    bindToController: {
+      openFile: '=kbOpenFile'
+    },
+    controller: 'viewByFileController',
+    controllerAs: 'viewByFileCtrl',
+    templateUrl: 'app/components/viewByFile/viewByFileTemplate.html',
+    link: function(scope, element, attrs, viewByFileCtrl) {
+      scope.$watch('viewByFileCtrl.openFile', function(newOpenFile) {
+        viewByFileCtrl.updateFileContent(newOpenFile);
+      });
+    }
+  };
+})
+
+.controller('viewByFileController', [
+  'FileService',
+  function(FileService) {
+    var vm = this;
+
+    vm.updateFileContent = function(filePath) {
+      if (filePath !== '') {
+        FileService.getFile(filePath, function(fileInfo) {
+          vm.fileInfo = fileInfo.data;
+          vm.fileType = getFileTypeFromMimeType(vm.fileInfo.mimeType);
+          vm.imageUri = vm.fileType === 'image' ? vm.fileInfo.content : undefined;
+        });
+      }
+    };
+
+    function getFileTypeFromMimeType(mimeType) {
+      if (mimeType.indexOf('image') !== -1) {
+        return 'image';
+      } else {
+        return 'code';
+      }
+    }
+
+  }
+]);

public/app/components/viewByFile/viewByFileTemplate.html

@@ -0,0 +1,6 @@
+<div class="view-by-file" ng-switch="viewByFileCtrl.fileType">
+	<kb-code-editor kb-open-file="viewByFileCtrl.fileInfo" ng-switch-default></kb-code-editor>
+	<div class="img-view-container" ng-switch-when="image">
+		<img kb-full-image-view class="img-view" ng-src="{{ viewByFileCtrl.imageUri }}">
+	</div>
+</div>

public/app/controllers/mainCtrl.js

@@ -4,13 +4,11 @@ angular.module('kibibitCodeEditor')
   '$scope',
   '$http',
   'ngDialog',
-  'Fullscreen',
   'SettingsService',
   function(
     $scope,
     $http,
     ngDialog,
-    Fullscreen,
     SettingsService) {
 
     var vm = this;

public/app/services/settingsService.js

@@ -198,7 +198,14 @@ angular.module('kibibitCodeEditor')
         });
 
         editorSettings.__defineSetter__('syntaxMode', function(newValue) {
+          if (!settings.currentEditor) {
+            return;
+          }
+
           var matchedMode = CODE_EDITOR.MODE_LIST.modesByName[newValue];
+          matchedMode = matchedMode ?
+            matchedMode :
+            CODE_EDITOR.MODE_LIST.modesByName['text'];
 
           console.assert(matchedMode, {
             'message': ERROR_MSGS
@@ -268,5 +275,5 @@ angular.module('kibibitCodeEditor')
     function currentFullscreenState() {
       return $(window).data('fullscreen-state');
     }
-
-}]);
+  }
+]);

public/app/views/home.html

@@ -1,2 +1,2 @@
 <kb-zombify ng-model="main.zombify" ng-if="main.zombify"></kb-zombify>
-<kb-code-editor kb-open-file="main.openFile"></kb-code-editor>
+<kb-view-by-file kb-open-file="main.openFile"></kb-view-by-file>

public/app/views/index.html

@@ -25,6 +25,7 @@
     <link rel="stylesheet" type="text/css" href="assets/lib/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css"/>
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css">
     <link rel="stylesheet" href="assets/lib/bower_components/angular-emoji/dist/emoji.min.css">
+    <link rel="stylesheet" type="text/css" href="assets/lib/bower_components/viewerjs/dist/viewer.css">
     <link href='//goo.gl/QatcDl' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" type="text/css" href="assets/css/style.css">
 </head>
@@ -115,6 +116,7 @@
     <script src="assets/lib/bower_components/angular-marked/dist/angular-marked.js"></script>
     <script src="assets/lib/highlight/highlight.pack.js"></script>
     <script src="assets/lib/bower_components/angular-emoji/dist/emoji.min.js"></script>
+    <script type="text/javascript" src="assets/lib/bower_components/viewerjs/dist/viewer.js"></script>
 
     <!-- Kibibit Code Editor -->
     <!-- Initialize -->
@@ -135,6 +137,8 @@
     <script type="text/javascript" src="app/components/errorView/errorView.js"></script>
     <script type="text/javascript" src="app/components/movingGears/movingGears.js"></script>
     <script type="text/javascript" src="app/components/zombify/zombify.js"></script>
+    <script type="text/javascript" src="app/components/viewByFile/viewByFile.js"></script>
+    <script type="text/javascript" src="app/components/fullImageView/fullImageView.js"></script>
     <!-- Services -->
     <!-- <script src="app/services/authService.js"></script> -->
     <script type="text/javascript" src="app/services/userService.js"></script>