Add template thumbnail generation and display

assets/js/src/newsletter_editor/components/save.js

@@ -6,8 +6,9 @@ define([
     'backbone.marionette',
     'jquery',
     'blob',
-    'filesaver'
-  ], function(App, MailPoet, Notice, Backbone, Marionette, jQuery, Blob, FileSaver) {
+    'filesaver',
+    'html2canvas'
+  ], function(App, MailPoet, Notice, Backbone, Marionette, jQuery, Blob, FileSaver, html2canvas) {
 
   "use strict";
 
@@ -56,16 +57,26 @@ define([
     });
   };
 
-  Module.exportTemplate = function(options) {
-    var data = _.extend(options || {}, {
-      body: App.getBody(),
-    });
-    var blob = new Blob(
-      [JSON.stringify(data)],
-      { type: 'application/json;charset=utf-8' }
-    );
+  Module.getThumbnail = function(element, options) {
+    return html2canvas(element, options || {});
+  };
 
-    FileSaver.saveAs(blob, 'template.json');
+  Module.exportTemplate = function(options) {
+    var that = this;
+    return Module.getThumbnail(
+      jQuery('#mailpoet_editor_content > .mailpoet_block').get(0)
+    ).then(function(thumbnail) {
+      var data = _.extend(options || {}, {
+        thumbnail: thumbnail.toDataURL(),
+        body: App.getBody(),
+      });
+      var blob = new Blob(
+        [JSON.stringify(data)],
+        { type: 'application/json;charset=utf-8' }
+      );
+
+      FileSaver.saveAs(blob, 'template.json');
+    });
   };
 
   Module.SaveView = Marionette.LayoutView.extend({

assets/js/src/newsletter_editor/components/wordpress.js

@@ -56,7 +56,7 @@ define([
   };
 
   Module.getTransformedPosts = function(options) {
-    return Module._query({
+    return Module._cachedQuery({
       action: 'getTransformedPosts',
       options: options,
     });

assets/js/src/newsletters/templates.jsx

@@ -164,11 +164,19 @@ define(
                 Delete
               </a>
             </div>
-          );
+          ), thumbnail = '';
+
+          if (typeof template.thumbnail === 'string'
+              && template.thumbnail.length > 0) {
+            thumbnail = (
+              <img src={ template.thumbnail } />
+            );
+          }
 
           return (
             <li key={ 'template-'+index }>
               <div className="mailpoet_thumbnail">
+                { thumbnail }
               </div>
 
               <div className="mailpoet_description">