Fix layout preview

src/collective/cover/widgets/selectpreview.py

@@ -22,17 +22,7 @@ class SelectPreviewWidget(select.SelectWidget):
     display_template = ViewPageTemplateFile('selectpreview_display.pt')
     input_template = ViewPageTemplateFile('selectpreview_input.pt')
 
-    # JavaScript template
-    js_template = """\
-    (function($) {
-        $().ready(function() {
-        var layouts = %(layouts)s;
-        $.fn.layoutpreview('#%(id)s', layouts);
-        });
-    })(jQuery);
-    """
-
-    def js(self):
+    def layouts(self):
         registry = getUtility(IRegistry)
         settings = registry.forInterface(ICoverSettings)
         layouts = settings.layouts
@@ -45,7 +35,7 @@ def js(self):
             self.simplify_layout(lay, simplyfied)
             simple_layouts[layout] = simplyfied
 
-        return self.js_template % dict(id=self.id, layouts=json.dumps(simple_layouts))
+        return json.dumps(simple_layouts)
 
     def render(self):
         if self.mode == interfaces.DISPLAY_MODE:

src/collective/cover/widgets/selectpreview_input.pt

@@ -3,8 +3,6 @@
      xmlns:i18n="http://xml.zope.org/namespaces/i18n"
      i18n:domain="collective.cover"
      tal:omit-tag="">
-<script type="application/javascript" src="++resource++collective.cover/js/selectlayoutpreview.js"></script>
-<script type="application/javascript" tal:content="structure view/js"></script>
 <style media="screen" type="text/css">
 #preview-select-container {
     float: left;
@@ -35,6 +33,7 @@
                             class view/klass;
                             style view/style;
                             title view/title;
+                            data-layouts view/layouts;
                             lang view/lang;
                             onclick view/onclick;
                             ondblclick view/ondblclick;

webpack/app/cover.js

@@ -1,4 +1,4 @@
-// import ContentChooser from './js/contentchooser.js';
+import AddView from './js/add.js';
 import ComposeView from './js/compose.js';
 import LayoutView from './js/layout.js';
 
@@ -11,10 +11,14 @@ jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
 
 
 $(() => {
-  if ($('.template-compose')[0] !== undefined) {
+  let $layoutPreview = $('.template-collective-cover-content #form-widgets-template_layout');
+  if ($layoutPreview[0] !== undefined) {
+    new AddView($layoutPreview);
+  }
+  if ($('.portaltype-collective-cover-content.template-compose')[0] !== undefined) {
     new ComposeView();
   }
-  if ($('.template-layoutedit')[0] !== undefined) {
+  if ($('.portaltype-collective-cover-content.template-layoutedit')[0] !== undefined) {
     new LayoutView();
   }
 
@@ -32,6 +36,7 @@ $(() => {
 
 export default {
   ComposeView,
+  AddView,
   LayoutView,
   CalendarTile,
   CarouselTile,

webpack/app/js/add.js

@@ -0,0 +1,44 @@
+export default class AddView {
+  constructor($el) {
+    let select = $el;
+    let layouts = select.data('layouts');
+    let layout_preview = $('#layout-preview');
+    let ctx = $('#canvas-layout')[0].getContext('2d');
+    this.setup_preview(layout_preview, select, ctx, layouts);
+
+    select.change(function(b, a) {
+      this.setup_preview(layout_preview, $(this), ctx, layouts);
+    });
+  }
+  draw_preview(layout, ctx) {
+    //row position, depends of the number of the content that the row has
+    let row_offset = 10;
+    let canvas_width = 300;
+    $(layout).each(function() {
+      //row
+      ctx.fillStyle = '#EEEEEE';
+      ctx.fillRect(0, row_offset, canvas_width, 70);
+
+      //columns
+      let column_h_offset = 10;
+      let n_columns = this.children.length;
+      $(this.children).each(function() {
+        let column_width = (290 / 16 * this.size) - 10;
+        ctx.fillStyle = '#D9D9D9';
+        ctx.fillRect(column_h_offset, row_offset + 10, column_width, 50);
+
+        column_h_offset = column_h_offset + column_width + 10;
+      });
+
+      row_offset = row_offset + 80;
+    });
+  }
+  setup_preview(layout_preview, select, ctx, layouts) {
+    let layout_name = select.find(':selected').val();
+    $('#canvas-layout')[0].width = $('#canvas-layout')[0].width;
+    $('#canvas-layout')[0].height = 80 * layouts[layout_name].length > 300 ? 80 * layouts[layout_name].length : 300;
+    this.draw_preview(layouts[layout_name], ctx);
+
+    layout_preview.find('h3').html(layout_name);
+  }
+}