Theme preview extracted from can code and refactored

Author: canstudios-louisem

frontend/src/modules/editor/selectTheme/less/editorTheme.less

@@ -6,7 +6,7 @@
 }
 
 .theme-list-item {
-  height: 175px;
+  height: 280px;
   width: 275px;
   margin-left:0px;
   margin-right: 30px;
@@ -33,19 +33,26 @@
   }
 
   &-inner {
-    padding: 20px;
+    padding-top: 20px;
+
     .theme-header {
-      padding-bottom: 30px;
-    }
-  }
+      .display-name {
+        padding-left: 20px;
+        font-size: 175%;
+        font-weight: @font-weight;
+      }
 
-  .display-name {
-    font-size: 175%;
-    font-weight: @font-weight;
-  }
-  .description {
-    font-size: 110%;
-    color: #a6c2ca;
+      .description {
+        padding-left: 20px;
+        padding-bottom: 15px;
+        font-size: 110%;
+        color: @quaternary-color;
+      }
+
+      .theme_preview {
+        padding-top: 10px;
+      }
+    }
   }
 }
 
@@ -56,7 +63,7 @@
     width: 60px;
     float: left;
     position: relative;
-    background: url(/css/assets/theme_bg.png) top left no-repeat;
+    background: url(/images/theme_bg.png) top left no-repeat;
     margin-left: 0;
     margin-right: 18px;
 

frontend/src/modules/editor/selectTheme/templates/editorThemeItem.hbs

@@ -2,6 +2,7 @@
   <div class="theme-header">
     <div class="display-name"><h4 style="color: {{foreground_color.default}}">{{displayName}}</h4></div>
     <div class="description">{{description}}</div>
+    <div class="theme-preview"></div>
   </div>
   {{#if settings}}
     <div class="theme-pallet-container">

frontend/src/modules/editor/selectTheme/views/editorThemeItemView.js

@@ -24,6 +24,17 @@ define(function(require){
     },
 
     postRender: function() {
+      var previewUrl = '/api/theme/preview/' + this.model.attributes.name + '/' + this.model.attributes.version;
+      var $previewLoc = this.$el.find('.theme-preview');
+
+      $.ajax(previewUrl, {
+        statusCode: {
+          // if a preview image is found
+          200: function() {
+            $previewLoc.prepend('<img src="' + previewUrl + '"alt="Preview image"' + '/>');
+          }
+        }
+      });
     },
 
     toggleSelect: function(event) {

package.json

@@ -90,7 +90,7 @@
   },
   "dependencies": {
     "archiver": "~0.16.0",
-    "async": "0.2.5",
+    "async": "2.5.0",
     "bcrypt-nodejs": "0.0.3",
     "body-parser": "^1.13.3",
     "bower": "1.6.5",

plugins/content/theme/index.js

@@ -130,6 +130,33 @@ function initialize () {
   var app = origin();
   app.once('serverStarted', function (server) {
 
+    //get the theme preview image
+    rest.get('/theme/preview/:themename/:version', function (req, res, next) {
+      //strip slashes to stop unwanted directory traversal
+      var themeName = req.params.themename.replace(/\\(.)/mg, "$1");
+      var themeVersion = req.params.version.replace(/\\(.)/mg, "$1");
+      var tenantId = configuration.getConfig('masterTenantID');
+
+      async.tryEach([
+        function(callback) {
+          //try manual install location
+          fs.readFile(path.join(__dirname, 'versions', themeName, themeVersion, themeName, 'preview.jpg'), callback);
+        },
+        function(callback) {
+          //try bower install location
+          fs.readFile(path.join(__dirname, '..', '..', '..', 'temp', tenantId, 'adapt_framework', 'src', 'theme', themeName, 'preview.jpg'), callback);
+        }
+      ],function(err, img) {
+        if(err){
+          res.sendStatus(404);
+          return res;
+        }
+        res.writeHead(200, {'Content-Type': 'image/jpg' });
+        res.end(img);
+        return res;
+      });
+    });
+
     // Assign a theme to to a course
     rest.post('/theme/:themeid/makeitso/:courseid', function (req, res, next) {
       var themeId = req.params.themeid;