From fa35c561bb21ff8cf46cfc367112035a98e9c33f Mon Sep 17 00:00:00 2001
From: Rodrigo Ferreira de Souza <rodfersou@gmail.com>
Date: Thu, 29 Nov 2018 15:58:27 -0200
Subject: [PATCH] Use webpack (#826)

* Add changelog

* Move static files to webpack

* Review resources registry

* Review compose view

* Review content chooser

* Test fixes

* Initialize carousel tile after drop content

* Move static files to viewlet

* Move unload code into webpack

* Fix layout preview

* Add upgrade step

* Fix tests

* Review static resources for Plone 5

* Code review

* Update docs

* Code review
---
 .gitignore                                    |   1 +
 CHANGES.rst                                   |   7 +-
 README.rst                                    |  36 +
 buildout.cfg                                  |  21 +-
 src/collective/cover/browser/__init__.py      |   5 +
 src/collective/cover/browser/configure.zcml   |  15 +
 .../cover/browser/static/README.rst           |   3 +
 .../cover/browser/templates/compose.pt        |  22 -
 .../cover/browser/templates/layoutedit.pt     |  22 -
 src/collective/cover/configure.zcml           |   5 -
 .../cover/profiles/default/cssregistry.xml    |   9 -
 .../cover/profiles/default/jsregistry.xml     |  12 -
 .../cover/profiles/default/metadata.xml       |   2 +-
 .../cover/static/css/contentchooser.css       | 197 -----
 src/collective/cover/static/css/cover.css     | 278 ------
 .../static/css/layout_edit_201806251610.css   | 788 -----------------
 src/collective/cover/static/js/compose.js     | 207 -----
 src/collective/cover/static/js/layout_base.js |  34 -
 src/collective/cover/static/js/layout_edit.js | 746 ----------------
 src/collective/cover/static/js/main.js        |  46 -
 .../cover/static/js/selectlayoutpreview.js    |  46 -
 .../static/js/vendor/jquery.endless-scroll.js | 343 -------
 .../cover/static/js/vendor/jss.min.js         |   1 -
 .../cover/tests/test_resources_viewlet.py     |  49 +
 src/collective/cover/tests/test_setup.py      |  23 +-
 src/collective/cover/tests/test_upgrades.py   |  37 +
 .../cover/tiles/templates/carousel.pt         |   2 +-
 src/collective/cover/upgrades/configure.zcml  |   1 +
 src/collective/cover/upgrades/v24/__init__.py |  32 +
 .../cover/upgrades/v24/configure.zcml         |  28 +
 src/collective/cover/widgets/selectpreview.py |  14 +-
 .../cover/widgets/selectpreview_input.pt      |   3 +-
 webpack/.gitignore                            |   5 +
 webpack/app/cover.js                          |  43 +
 webpack/app/cover.scss                        |   3 +
 .../app/galleria/theme.css                    |   0
 .../app/galleria/theme.js                     |   2 +-
 .../static => webpack/app}/img/arrow-left.gif | Bin
 .../app}/img/arrow-right.gif                  | Bin
 .../static => webpack/app}/img/columns.png    | Bin
 .../cover/static => webpack/app}/img/conf.png | Bin
 .../cover/static => webpack/app}/img/dot.png  | Bin
 .../static => webpack/app}/img/drophere.png   | Bin
 .../app}/img/frontpage_icon.png               | Bin
 .../cover/static => webpack/app}/img/move.png | Bin
 webpack/app/img/pb_close.png                  | Bin 0 -> 1910 bytes
 .../static => webpack/app}/img/remove.png     | Bin
 .../static => webpack/app}/img/resize-hor.png | Bin
 .../cover/static => webpack/app}/img/rows.png | Bin
 .../static => webpack/app}/img/spinner.gif    | Bin
 .../app}/img/tile-banner.png                  | Bin
 .../static => webpack/app}/img/tile-basic.png | Bin
 .../app}/img/tile-calendar.png                | Bin
 .../app}/img/tile-carousel.png                | Bin
 .../app}/img/tile-collection.png              | Bin
 .../app}/img/tile-contentbody.png             | Bin
 .../static => webpack/app}/img/tile-embed.png | Bin
 .../static => webpack/app}/img/tile-file.png  | Bin
 .../app}/img/tile-generic.png                 | Bin
 .../static => webpack/app}/img/tile-list.png  | Bin
 .../static => webpack/app}/img/tile-pfg.png   | Bin
 .../app}/img/tile-richtext.png                | Bin
 .../static => webpack/app}/img/tiles.png      | Bin
 .../static => webpack/app}/img/visibility.png | Bin
 webpack/app/js/add.js                         |  44 +
 webpack/app/js/compose.js                     | 218 +++++
 .../app}/js/contentchooser.js                 | 836 +++++++++---------
 webpack/app/js/cssclasswidget.js              | 106 +++
 webpack/app/js/layout.js                      | 644 ++++++++++++++
 webpack/app/js/tiles/calendar.js              |  28 +
 webpack/app/js/tiles/carousel.js              |  20 +
 .../static => webpack/app}/js/vendor/jss.js   |   3 +-
 webpack/app/resources.pt                      |   6 +
 webpack/app/scss/_contentchooser.scss         | 142 +++
 webpack/app/scss/_cover.scss                  | 222 +++++
 webpack/app/scss/_layout.scss                 | 604 +++++++++++++
 webpack/package.json                          |  30 +
 webpack/postcss.config.js                     |   7 +
 webpack/webpack.config.js                     |  44 +
 79 files changed, 2821 insertions(+), 3221 deletions(-)
 create mode 100644 src/collective/cover/browser/static/README.rst
 delete mode 100644 src/collective/cover/profiles/default/cssregistry.xml
 delete mode 100644 src/collective/cover/static/css/contentchooser.css
 delete mode 100644 src/collective/cover/static/css/cover.css
 delete mode 100644 src/collective/cover/static/css/layout_edit_201806251610.css
 delete mode 100644 src/collective/cover/static/js/compose.js
 delete mode 100644 src/collective/cover/static/js/layout_base.js
 delete mode 100644 src/collective/cover/static/js/layout_edit.js
 delete mode 100644 src/collective/cover/static/js/main.js
 delete mode 100644 src/collective/cover/static/js/selectlayoutpreview.js
 delete mode 100644 src/collective/cover/static/js/vendor/jquery.endless-scroll.js
 delete mode 100644 src/collective/cover/static/js/vendor/jss.min.js
 create mode 100644 src/collective/cover/tests/test_resources_viewlet.py
 create mode 100644 src/collective/cover/upgrades/v24/__init__.py
 create mode 100644 src/collective/cover/upgrades/v24/configure.zcml
 create mode 100644 webpack/.gitignore
 create mode 100644 webpack/app/cover.js
 create mode 100644 webpack/app/cover.scss
 rename src/collective/cover/static/css/galleria.cover_theme.css => webpack/app/galleria/theme.css (100%)
 rename src/collective/cover/static/js/galleria.cover_theme.js => webpack/app/galleria/theme.js (98%)
 rename {src/collective/cover/static => webpack/app}/img/arrow-left.gif (100%)
 rename {src/collective/cover/static => webpack/app}/img/arrow-right.gif (100%)
 rename {src/collective/cover/static => webpack/app}/img/columns.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/conf.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/dot.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/drophere.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/frontpage_icon.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/move.png (100%)
 create mode 100644 webpack/app/img/pb_close.png
 rename {src/collective/cover/static => webpack/app}/img/remove.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/resize-hor.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/rows.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/spinner.gif (100%)
 rename {src/collective/cover/static => webpack/app}/img/tile-banner.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/tile-basic.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/tile-calendar.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/tile-carousel.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/tile-collection.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/tile-contentbody.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/tile-embed.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/tile-file.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/tile-generic.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/tile-list.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/tile-pfg.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/tile-richtext.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/tiles.png (100%)
 rename {src/collective/cover/static => webpack/app}/img/visibility.png (100%)
 create mode 100644 webpack/app/js/add.js
 create mode 100644 webpack/app/js/compose.js
 rename {src/collective/cover/static => webpack/app}/js/contentchooser.js (54%)
 create mode 100644 webpack/app/js/cssclasswidget.js
 create mode 100644 webpack/app/js/layout.js
 create mode 100644 webpack/app/js/tiles/calendar.js
 create mode 100644 webpack/app/js/tiles/carousel.js
 rename {src/collective/cover/static => webpack/app}/js/vendor/jss.js (99%)
 create mode 100644 webpack/app/resources.pt
 create mode 100644 webpack/app/scss/_contentchooser.scss
 create mode 100644 webpack/app/scss/_cover.scss
 create mode 100644 webpack/app/scss/_layout.scss
 create mode 100644 webpack/package.json
 create mode 100644 webpack/postcss.config.js
 create mode 100644 webpack/webpack.config.js

diff --git a/.gitignore b/.gitignore
index 7b134ce5f..7c51cb7b1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,4 @@ parts/
 report.html
 selenium*
 var/
+src/collective/cover/browser/static/
diff --git a/CHANGES.rst b/CHANGES.rst
index 7c9f5467e..66a28e560 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -6,7 +6,12 @@ There's a frood who really knows where his towel is.
 2.1b3 (unreleased)
 ^^^^^^^^^^^^^^^^^^
 
-- Nothing changed yet.
+- Deprecate resource registries; instead, we now use a viewlet in plone.htmlhead to load JavaScript code.
+  This simplifies maintainance of the add-on among multiple Plone versions.
+  [rodfersou]
+
+- Process static resources using webpack.
+  [rodfersou]
 
 
 2.1b2 (2018-10-04)
diff --git a/README.rst b/README.rst
index ffa7591eb..ee5e1a4ec 100644
--- a/README.rst
+++ b/README.rst
@@ -153,6 +153,42 @@ Check the box next to ``collective.cover`` and click the 'Activate' button.
     You may have to empty your browser cache and save your resource registries
     in order to see the effects of the product installation.
 
+Development
+-----------
+
+We use `webpack <https://webpack.js.org/>`_ to process static resources on this package.
+`webpack`_ processes SCSS and JS files, minifies the resulting CSS and JS, and optimizes all images.
+
+To contribute, you should start the instance in one shell and start webpack watcher on another with the following command:
+
+.. code-block:: console
+
+    $ bin/watch-cover
+
+Then go to ``webpack/app`` folder and edit SCSS and JS files;
+`webpack`_ watcher will automatically create the final resources in the right place.
+
+There are also other commands added to handle more complex scenarios.
+
+The following command will set the buildout node installation in the system PATH,
+this way you can use `webpack`_ as described on their documentation.
+
+.. code-block:: console
+
+    $ bin/env-cover
+
+The following command generates JS and CSS without the minify step (it can be used to check the code being generated in a human readable way).
+
+.. code-block:: console
+
+    $ bin/debug-cover
+
+The following command rebuilds static files and exit (insted of keep watching the changes):
+
+.. code-block:: console
+
+    $ bin/build-cover
+
 Upgrading from 1.x to 2.x
 ^^^^^^^^^^^^^^^^^^^^^^^^^
 
diff --git a/buildout.cfg b/buildout.cfg
index 686382b73..0a963657c 100644
--- a/buildout.cfg
+++ b/buildout.cfg
@@ -17,6 +17,7 @@ parts +=
     pylint
     rebuild_i18n-sh
     robot
+    staticresources
 
 [checkversions]
 recipe = zc.recipe.egg
@@ -26,14 +27,10 @@ eggs = z3c.checkversions [buildout]
 recipe = plone.recipe.codeanalysis[recommended]
 directory = ${buildout:directory}/src/collective/cover
 clean-lines = True
-clean-lines-exclude = ${buildout:directory}/src/collective/cover/static/js/vendor/
-csslint = True
-csslint-bin = bin/csslint
+clean-lines-exclude = ${:directory}/browser/static
 debug-statements = True
 flake8-ignore = B901,D001,E501,P001,T000
 flake8-max-complexity = 12
-jshint = True
-jshint-bin = bin/jshint
 multiprocessing = True
 pre-commit-hook = True
 prefer-single-quotes = True
@@ -70,3 +67,17 @@ eggs =
 scripts =
     robot-server
     robot
+
+[node]
+recipe = gp.recipe.node
+version = 8.11.2
+npms = npm yarn
+scripts = npm yarn
+
+[staticresources]
+recipe = sc.recipe.staticresources
+name = collective.cover
+short_name = cover
+
+[versions]
+sc.recipe.staticresources = 1.1b5
diff --git a/src/collective/cover/browser/__init__.py b/src/collective/cover/browser/__init__.py
index 40a96afc6..43d584716 100644
--- a/src/collective/cover/browser/__init__.py
+++ b/src/collective/cover/browser/__init__.py
@@ -1 +1,6 @@
 # -*- coding: utf-8 -*-
+from plone.app.layout.viewlets import ViewletBase
+
+
+class ResourcesViewlet(ViewletBase):
+    """This viewlet inserts static resources on page header."""
diff --git a/src/collective/cover/browser/configure.zcml b/src/collective/cover/browser/configure.zcml
index 41bb6e024..51a135b53 100644
--- a/src/collective/cover/browser/configure.zcml
+++ b/src/collective/cover/browser/configure.zcml
@@ -154,4 +154,19 @@
       permission="zope2.View"
       />
 
+  <browser:resourceDirectory
+      name="collective.cover"
+      directory="static"
+      />
+
+  <browser:viewlet
+      name="collective.cover.resources"
+      for="..interfaces.ICover"
+      manager="plone.app.layout.viewlets.interfaces.IHtmlHead"
+      class=".ResourcesViewlet"
+      template="static/resources.pt"
+      permission="zope2.Public"
+      layer="collective.cover.interfaces.ICoverLayer"
+      />
+
 </configure>
diff --git a/src/collective/cover/browser/static/README.rst b/src/collective/cover/browser/static/README.rst
new file mode 100644
index 000000000..a0f03accb
--- /dev/null
+++ b/src/collective/cover/browser/static/README.rst
@@ -0,0 +1,3 @@
+.. note::
+    Content on this folder is generated automatically by `webpack <https://webpack.js.org/>`_.
+    Check package documentation for more information.
diff --git a/src/collective/cover/browser/templates/compose.pt b/src/collective/cover/browser/templates/compose.pt
index 22e8a999f..cf81650cc 100644
--- a/src/collective/cover/browser/templates/compose.pt
+++ b/src/collective/cover/browser/templates/compose.pt
@@ -7,28 +7,6 @@
       i18n:domain="collective.cover">
 <body>
 
-<metal:js fill-slot="javascript_head_slot">
-    <script type="application/javascript"
-        tal:define="navroot context/@@plone_portal_state/navigation_root_url"
-        tal:attributes="src string:${navroot}/++resource++collective.cover/js/compose.js">
-    </script>
-
-    <script type="application/javascript">
-      jQuery(document).ready(function() {
-        if (typeof(plone) !== 'undefined') {
-          jQuery(window).unload(plone.UnlockHandler.execute);
-        }
-      });
-    </script>
-</metal:js>
-
-<metal:styles fill-slot="style_slot">
-    <link rel="stylesheet" type="text/css" media="screen" href=""
-          tal:define="navroot context/@@plone_portal_state/navigation_root_url"
-          tal:attributes="href string:${navroot}/++resource++collective.cover/css/cover.css"
-          />
-</metal:styles>
-
 <metal:main fill-slot="main">
     <div tal:define="layout nocall:context/@@layout"
         tal:replace="structure layout/render_compose" />
diff --git a/src/collective/cover/browser/templates/layoutedit.pt b/src/collective/cover/browser/templates/layoutedit.pt
index d08152d05..e841bd053 100644
--- a/src/collective/cover/browser/templates/layoutedit.pt
+++ b/src/collective/cover/browser/templates/layoutedit.pt
@@ -6,28 +6,6 @@
       metal:use-macro="context/main_template/macros/master"
       i18n:domain="collective.cover">
     <body>
-        <metal:js fill-slot="javascript_head_slot">
-            <script type="application/javascript"
-                    tal:define="navroot context/@@plone_portal_state/navigation_root_url"
-                    tal:attributes="src string:${navroot}/++resource++collective.cover/js/vendor/jss.min.js">
-            </script>
-            <script type="application/javascript"
-                    tal:define="navroot context/@@plone_portal_state/navigation_root_url"
-                    tal:attributes="src string:${navroot}/++resource++collective.cover/js/layout_base.js">
-            </script>
-            <script type="application/javascript">
-            jQuery(document).ready(function() {
-                if (typeof(plone) !== 'undefined') {
-                    jQuery(window).unload(plone.UnlockHandler.execute);
-                }
-            });
-            </script>
-        </metal:js>
-        <metal:styles fill-slot="style_slot">
-            <link rel="stylesheet" type="text/css" media="screen" href=""
-                  tal:define="navroot context/@@plone_portal_state/navigation_root_url"
-                  tal:attributes="href string:${navroot}/++resource++collective.cover/css/layout_edit_201806251610.css" />
-        </metal:styles>
         <metal:main fill-slot="main">
             <tal:block tal:define="can_export_layout view/can_export_layout">
                 <div id="sidebar">
diff --git a/src/collective/cover/configure.zcml b/src/collective/cover/configure.zcml
index ed8d98edf..3f005edde 100644
--- a/src/collective/cover/configure.zcml
+++ b/src/collective/cover/configure.zcml
@@ -33,11 +33,6 @@
   <include package=".tiles" />
   <include package=".upgrades" />
 
-  <browser:resourceDirectory
-      name="collective.cover"
-      directory="static"
-      />
-
   <class class=".widgets.selectpreview.SelectPreviewWidget">
     <require
         permission="zope.Public"
diff --git a/src/collective/cover/profiles/default/cssregistry.xml b/src/collective/cover/profiles/default/cssregistry.xml
deleted file mode 100644
index f030c7572..000000000
--- a/src/collective/cover/profiles/default/cssregistry.xml
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0"?>
-<object name="portal_css" meta_type="Stylesheets Registry">
- <stylesheet title="" cacheable="True" compression="safe" cookable="True"
-    enabled="1" expression="" id="++resource++collective.cover/css/contentchooser.css" media="screen"
-    rel="stylesheet" rendering="link"/>
- <stylesheet title="" cacheable="True" compression="safe" cookable="True"
-    enabled="1" expression="" id="++resource++collective.cover/css/cover.css" media="screen"
-    rel="stylesheet" rendering="link"/>
-</object>
diff --git a/src/collective/cover/profiles/default/jsregistry.xml b/src/collective/cover/profiles/default/jsregistry.xml
index 0057cc1d4..9ee702977 100644
--- a/src/collective/cover/profiles/default/jsregistry.xml
+++ b/src/collective/cover/profiles/default/jsregistry.xml
@@ -1,18 +1,6 @@
 <?xml version="1.0"?>
 <object name="portal_javascripts">
-  <javascript id="++resource++collective.cover/js/contentchooser.js"
-      cacheable="True" compression="none" cookable="True" enabled="True"
-      expression="" inline="False" authenticated="True" />
   <javascript id="++resource++collective.js.bootstrap/js/bootstrap.min.js"
       cacheable="True" compression="none" cookable="True" enabled="True"
       expression="" inline="False" />
-  <javascript id="++resource++collective.cover/js/vendor/jquery.endless-scroll.js"
-      cacheable="True" compression="none" cookable="True" enabled="True"
-      expression="" inline="False" authenticated="True" />
-  <javascript id="++resource++collective.cover/js/layout_edit.js"
-      cacheable="True" compression="none" cookable="True" enabled="True"
-      expression="" inline="False" authenticated="True" />
-  <javascript id="++resource++collective.cover/js/main.js"
-      cacheable="True" compression="none" cookable="True" enabled="True"
-      expression="" inline="False" authenticated="False" />
 </object>
diff --git a/src/collective/cover/profiles/default/metadata.xml b/src/collective/cover/profiles/default/metadata.xml
index b44829407..4e5e19412 100644
--- a/src/collective/cover/profiles/default/metadata.xml
+++ b/src/collective/cover/profiles/default/metadata.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <metadata>
-  <version>23</version>
+  <version>24</version>
   <dependencies>
     <dependency>profile-collective.js.galleria:default</dependency>
     <dependency>profile-collective.js.jqueryui:default</dependency>
diff --git a/src/collective/cover/static/css/contentchooser.css b/src/collective/cover/static/css/contentchooser.css
deleted file mode 100644
index 037f45eda..000000000
--- a/src/collective/cover/static/css/contentchooser.css
+++ /dev/null
@@ -1,197 +0,0 @@
-#contentchooser-content-show-button
-{
-    padding: .5em 1em;
-
-    cursor: pointer;
-
-    border: 1px solid #ccc;
-    -webkit-border-radius: 4px;
-       -moz-border-radius: 4px;
-            border-radius: 4px;
-}
-
-#contentchooser-content-search
-{
-    position: fixed;
-    z-index: 9999;
-
-    display: none;
-
-    padding: 20px;
-
-    cursor: pointer;
-
-    border: 1px solid #ccc;
-    background-color: #fff;
-}
-
-#contentchooser-content-search.right
-{
-    right: 0;
-}
-
-#contentchooser-content-search .item-list
-{
-    overflow: auto;
-
-    width: 500px;
-    max-width: 100%;
-    height: 250px;
-    margin: 10px 0 0;
-    padding: 5px;
-
-    border: 1px solid #ccc;
-}
-
-#contentchooser-content-search .item-list li
-{
-    list-style-type: none;
-    list-style-image: none;
-
-    cursor: url('data:image/x-icon;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8='), all-scroll;
-    cursor: -webkit-grab;
-    cursor:    -moz-grab;
-    cursor:      -o-grab;
-    cursor:     -ms-grab;
-    cursor:         grab;
-}
-
-#contentchooser-content-search .item-list li.ui-draggable-dragging
-{
-    cursor: url('data:image/x-icon;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAAH/AAAB/wAAA/0AAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//+AB///wAf//4AH//+AD///yT/////////////////////////////8='), all-scroll;
-    cursor: -webkit-grabbing;
-    cursor:    -moz-grabbing;
-    cursor:      -o-grabbing;
-    cursor:     -ms-grabbing;
-    cursor:         grabbing;
-}
-
-#contentchooser-content-search .item-list li.stats
-{
-    display: none;
-}
-
-#contentchooser-content-search .item-list li:hover
-{
-    background-color: #205c90;
-}
-
-#content #contentchooser-content-search .item-list li img
-{
-    display: inline-block;
-
-    border: 0;
-}
-
-#content #contentchooser-content-search .item-list li a:link
-{
-    display: inline-block;
-
-    border-bottom: 0;
-}
-
-#contentchooser-content-show-button
-{
-    font-weight: bold;
-
-    position: relative;
-    z-index: 999;
-    top: 0;
-    right: 0;
-
-    float: right;
-
-    margin-bottom: 10px;
-
-    background: #fff;
-}
-
-#contentchooser-content-search .close
-{
-    position: absolute;
-    top: -14px;
-    left: -14px;
-
-    width: 30px;
-    height: 30px;
-
-    cursor: pointer;
-
-    background-image: url('++resource++plone.app.jquerytools.pb_close.png');
-}
-
-.current
-{
-    -webkit-border-top-left-radius: .5em;
-    -moz-border-radius-topleft: .5em;
-            border-top-left-radius: .5em;
-    -webkit-border-top-right-radius: .5em;
-    -moz-border-radius-topright: .5em;
-            border-top-right-radius: .5em;
-    background: #fff;
-}
-
-div.input
-{
-    width: 200px;
-    margin: 10px 0;
-    padding: 3px 15px;
-
-    border: 1px solid #507aaa;
-    border-radius: 10px;
-    background: white;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
-}
-
-input[type='text'].contentchooser-content-trees,
-input[type='text']#contentchooser-content-trees
-{
-    width: 100%;
-    min-width: 12em;
-    height: 16px;
-    padding-top: 1px;
-
-    color: #888;
-    border: 0 solid;
-    background: transparent;
-    text-shadow: 0 1px 1px white;
-}
-
-#content-trees #general_panel
-{
-    padding: 0;
-}
-
-#contentchooser-content-search-input-container,
-#contentchooser-content-trees-container,
-.contentchooser-clear
-{
-    display: inline-block;
-}
-#contentchooser-content-search-input-container,
-#contentchooser-content-trees-container
-{
-    width: 80%;
-}
-.contentchooser-clear
-{
-    height: 13px;
-    margin-left: -25px;
-}
-
-#more-link-field > .results > li
-{
-    display: block; margin-bottom: .25em; cursor: pointer;
-}
-#more-link-field > .results > li:hover
-{
-    background-color: #205c90;
-}
-#more-link-field > div
-{
-    margin-bottom: .5em;
-}
-#more-link-field button
-{
-    padding: 0 .5em;
-}
diff --git a/src/collective/cover/static/css/cover.css b/src/collective/cover/static/css/cover.css
deleted file mode 100644
index b8e0727d5..000000000
--- a/src/collective/cover/static/css/cover.css
+++ /dev/null
@@ -1,278 +0,0 @@
-/* Basic style for tiles */
-.tile-title
-{
-    font-size: 120%;
-    font-weight: bold;
-
-    margin-bottom: 1em;
-}
-.tile-footer
-{
-    text-align: right;
-}
-
-/*loading mask*/
-.loading-mask
-{
-    position: absolute;
-    z-index: 99;
-    top: 0;
-    left: 0;
-
-    display: none;
-
-    width: 100%;
-    height: 100%;
-
-    opacity: .6 !important;
-    background: #000 url('++resource++collective.cover/img/spinner.gif') scroll no-repeat center center;
-    background-color: #000;
-}
-.loading-mask.show
-{
-    display: block;
-}
-.loading-mask.remove-tile
-{
-    background-color: #833434;
-}
-
-.template-compose #content .tile
-{
-    padding-top: 1.2em;
-
-    outline: 1px dotted #999;
-}
-.template-compose #content .tile.ui-draggable:hover
-{
-    cursor: move;
-}
-.template-compose #content .tile.ui-draggable-dragging
-{
-    overflow: hidden;
-
-    height: 114px;
-
-    cursor: move;
-}
-.template-compose .tile-container
-{
-    position: relative;
-}
-
-.template-compose .tile-type-name
-{
-    font-size: 95%;
-    font-weight: bolder;
-
-    position: absolute;
-
-    width: 100%;
-
-    text-align: center;
-
-    opacity: .3;
-}
-.template-compose .edit-tile-link,
-.template-compose .contentbody-link,
-.template-compose .collection-link
-{
-    line-height: 1em;
-
-    position: absolute;
-    top: 0;
-
-    height: 1em;
-}
-.template-compose .contentbody-link,
-.template-compose .collection-link
-{
-    right: 0;
-}
-
-.tile-select-button
-{
-    cursor: pointer;
-}
-
-.tile-move
-{
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    overflow: hidden;
-
-    width: 16px;
-    height: 16px;
-
-    cursor: pointer;
-    white-space: nowrap;
-    text-indent: 101%;
-
-    background: transparent url('++resource++collective.cover/img/move.png') scroll no-repeat top center;
-    background-size: 100%;
-}
-
-.tile-remove-item
-{
-    font-size: 1px;
-
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    width: 14px;
-    height: 14px;
-
-    cursor: pointer;
-
-    background: transparent url('++resource++collective.cover/img/remove.png') scroll no-repeat top center;
-    background-size: 100%;
-}
-
-.tile-remove-item:hover
-{
-    background: transparent url('++resource++collective.cover/img/remove.png') no-repeat scroll center -14px;
-    background-size: 100%;
-}
-.tile-remove-item .text
-{
-    visibility: hidden;
-}
-
-/*drag and drop*/
-
-.ui-sortable-placeholder
-{
-    visibility: visible !important;
-
-    outline: 1px dashed green;
-    background-color: #9ad39d !important;
-}
-.ui-sortable > div:hover
-{
-    cursor: move;
-}
-.tile > .ui-sortable > .ui-sortable-helper
-{
-    cursor: move;
-
-    opacity: .5;
-    outline: 1px solid #333;
-}
-.template-compose #content .tile
-{
-    min-height: 100px;
-    margin-bottom: 1em;
-}
-.ui-state-default .loading-mask
-{
-    display: block;
-
-    opacity: .8 !important;
-    background: #eee url('++resource++collective.cover/img/drophere.png') scroll no-repeat center center;
-}
-.ui-state-hover .loading-mask
-{
-    display: block;
-
-    background-color: #b4fca3;
-}
-.template-compose #content .sortable-tile .list-item:hover
-{
-    outline: 1px dotted #999;
-}
-
-
-/* images */
-.tile img.right
-{
-    float: right;
-
-    margin: 0 1em .5em 0;
-}
-.tile img.left
-{
-    float: left;
-
-    margin: 0 1em .5em 0;
-}
-
-/* conflicts */
-table.invisible
-{
-    visibility: visible;
-}
-.close
-{
-    opacity: 1;
-}
-
-/*Skins*/
-.tile-edge
-{
-    padding: 5px;
-
-    border: 1px solid #ddd;
-    border-radius: 4px;
-}
-
-.tile-dark
-{
-    padding: 5px;
-
-    border-radius: 4px;
-    background: #ddd;
-}
-
-.tile-shadow
-{
-    padding: 5px;
-
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    -webkit-box-shadow: 0 5px 10px #c3c3c3;
-       -moz-box-shadow: 0 5px 10px #c3c3c3;
-            box-shadow: 0 5px 10px #c3c3c3;
-}
-
-.textline-sortable-element.expired
-{
-    border: 1px solid red;
-}
-.textline-sortable-element .tileProperties .tileExpired
-{
-    font-weight: bold;
-
-    color: red;
-}
-
-/* Tile Calendar */
-.cover-calendar-tile .calendar-tile-header
-{
-    font-weight: bold;
-    line-height: normal;
-
-    padding: .42em 1em;
-
-    text-align: center;
-
-    background: #ddd;
-}
-#content .cover-calendar-tile a.calendar-tile-prev,
-#content .cover-calendar-tile a.calendar-tile-next
-{
-    margin: 0 -.5em;
-    padding: 0 1em;
-
-    border-bottom: none;
-}
-.cover-calendar-tile a.calendar-tile-prev
-{
-    float: left;
-}
-.cover-calendar-tile a.calendar-tile-next
-{
-    float: right;
-}
diff --git a/src/collective/cover/static/css/layout_edit_201806251610.css b/src/collective/cover/static/css/layout_edit_201806251610.css
deleted file mode 100644
index 2fdf65b57..000000000
--- a/src/collective/cover/static/css/layout_edit_201806251610.css
+++ /dev/null
@@ -1,788 +0,0 @@
-.layout
-{
-    position: relative;
-
-    clear: both;
-
-    min-height: 130px;
-    margin: 30px 0;
-}
-
-/* bootstrap classes*/
-.btn
-{
-    font-size: 14px;
-    line-height: 20px;
-
-    display: inline-block;
-
-    margin-bottom: 0;
-    padding: 4px 12px;
-
-    cursor: pointer;
-    text-align: center;
-    vertical-align: middle;
-
-    color: #333;
-    border-width: 1px;
-    border-style: solid;
-    border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) #a2a2a2;
-    border-radius: 4px 4px 4px 4px;
-    border-image: none;
-    background-color: #f5f5f5;
-    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
-    background-repeat: repeat-x;
-    box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 1px 2px rgba(0, 0, 0, .05);
-    text-shadow: 0 1px 1px rgba(255, 255, 255, .75);
-
-    -moz-border-bottom-colors: none;
-    -moz-border-left-colors: none;
-    -moz-border-right-colors: none;
-    -moz-border-top-colors: none;
-}
-.btn-inverse
-{
-    color: #fff;    border-color: #222 #222 #000;
-    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
-    background-color: #363636;
-    background-image:    -moz-linear-gradient(top,#444,#222);
-    background-image: -webkit-gradient(linear,0 0,0 100%,from(#444),to(#222));
-    background-image: -webkit-linear-gradient(top,#444,#222);
-    background-image:      -o-linear-gradient(top,#444,#222);
-    background-image:         linear-gradient(to bottom,#444,#222);
-    background-repeat: repeat-x;
-    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-
-    *background-color: #222;
-    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444',endColorstr='#ff222222',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)
-}
-.btn-small
-{
-    font-size: 11.9px;
-
-    padding: 2px 10px;
-
-    border-radius: 3px 3px 3px 3px;
-}
-button.close
-{
-    padding: 0;
-
-    cursor: pointer;
-
-    border: 0 none;
-    background: none repeat scroll 0 0 transparent;
-}
-.close
-{
-    font-size: 20px;
-    font-weight: bold;
-    line-height: 20px;
-
-    float: right;
-
-    opacity: .2;
-    color: rgb(0, 0, 0);
-    text-shadow: 0 1px 0 rgb(255, 255, 255);
-}
-.modal
-{
-    position: fixed;
-    z-index: 1050;
-    top: 10%;
-    left: 50%;
-
-    overflow: auto;
-
-    width: 560px;
-    max-height: 80%;
-    margin-left: -280px;
-    padding: 15px;
-
-    border: 1px solid #999;
-    border: 1px solid rgba(0,0,0,.3);
-    -webkit-border-radius: 6px;
-       -moz-border-radius: 6px;
-            border-radius: 6px;
-    outline: 0;
-    background-color: #fff;
-    -webkit-background-clip: padding-box;
-       -moz-background-clip: padding-box;
-            background-clip: padding-box;
-    -webkit-box-shadow: 0 3px 7px rgba(0,0,0,.3);
-       -moz-box-shadow: 0 3px 7px rgba(0,0,0,.3);
-            box-shadow: 0 3px 7px rgba(0,0,0,.3);
-
-    *border: 1px solid #999;
-}
-
-.hide
-{
-    display: none;
-}
-.show
-{
-    display: block;
-}
-
-.btn:hover,
-.btn:active,
-.btn.active,
-.btn.disabled,
-.btn[disabled]
-{
-    color: #333;
-    background-color: #e6e6e6;
-
-    *background-color: #d9d9d9;
-}
-
-.btn:active,
-.btn.active
-{
-    background-color: #ccc \9;
-}
-
-.btn:hover
-{
-    -webkit-transition: background-position .1s linear;
-       -moz-transition: background-position .1s linear;
-         -o-transition: background-position .1s linear;
-            transition: background-position .1s linear;
-    text-decoration: none;
-
-    color: #333;
-    background-position: 0 -15px;
-}
-
-.btn:focus
-{
-    outline: thin dotted #333;
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
-}
-
-.btn.active,
-.btn:active
-{
-    outline: 0;
-    background-image: none;
-    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
-       -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
-            box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
-}
-
-.btn.disabled,
-.btn[disabled]
-{
-    cursor: default;
-
-    opacity: .65;
-    background-image: none;
-    -webkit-box-shadow: none;
-       -moz-box-shadow: none;
-            box-shadow: none;
-
-    filter: alpha(opacity=65);
-}
-
-.btn-inverse.active
-{
-    color: rgba(255, 255, 255, .75);
-}
-
-.btn-inverse:hover,
-.btn-inverse:active,
-.btn-inverse.active,
-.btn-inverse.disabled,
-.btn-inverse[disabled]
-{
-    color: #fff;
-    background-color: #222;
-
-    *background-color: #151515;
-}
-
-.btn-inverse:active,
-.btn-inverse.active
-{
-    background-color: #080808 \9;
-}
-
-button.btn::-moz-focus-inner,
-input[type='submit'].btn::-moz-focus-inner
-{
-    padding: 0;
-
-    border: 0;
-}
-
-/*ROWS*/
-.layout .cover-row
-{
-    position: relative;
-
-    display: inline-block;
-
-    min-height: 80px;
-    margin: 0;
-    padding: 15px 1%;
-
-    border-top: 1px dashed #ccc;
-}
-
-/*COLUMNS*/
-.layout .cover-column
-{
-    position: relative;
-
-    float: left;
-    overflow: hidden;
-
-    min-height: 80px;
-    padding: 0;
-
-    border: medium none;
-    outline: 1px dashed #ccc;
-}
-
-/*TILES*/
-.layout .cover-tile,
-.tile-placeholder
-{
-    position: relative;
-
-    min-height: 50px;
-    margin: 15px;
-
-    outline: 1px solid #999;
-    background-color: #f9f9f9;
-}
-
-/* SIDEBAR */
-
-#sidebar .btn
-{
-    padding: 0 9px;
-
-    cursor: pointer;
-}
-#sidebar .btn span
-{
-    font-size: 11px;
-
-    display: block;
-}
-#sidebar .draggable
-{
-    cursor: move;
-}
-#sidebar .btn:hover
-{
-    color: #fff !important;
-}
-
-#sidebar ul
-{
-    margin-left: 0;
-
-    list-style-type: none;
-}
-#sidebar li
-{
-    display: inline;
-}
-
-#sidebar.fixed
-{
-    position: fixed;
-    z-index: 2;
-    top: 0;
-    left: 0;
-
-    padding: 17px;
-
-    opacity: .95;
-    border-bottom: 1px solid #f1f1f1;
-    background: #fff;
-    box-shadow: 0 0 2px 0 #888;
-}
-
-
-.ui-sortable-placeholder
-{
-    display: block;
-
-    height: 100px;
-    margin: 0 0 15px;
-
-    outline: 1px solid #999;
-    background-color: #f9f9f9;
-}
-.ui-sortable-placeholder-column
-{
-    position: relative;
-
-    float: left;
-
-    min-height: 100px;
-    padding: 0;
-
-    outline: 1px solid #999;
-    background-color: #f9f9f9;
-}
-.ui-sortable-placeholder-column
-{
-    margin-left: 0 !important;
-}
-
-#content .layout .config-row-link:link,
-#content .layout .config-column-link:link,
-#content .layout .config-tile-link:link
-{
-    font-size: 10px;
-    line-height: 1em;
-
-    position: absolute;
-    top: 0 !important;
-    right: 0;
-    left: auto;
-
-    width: 16px;
-    height: 16px;
-    padding: 0;
-
-    cursor: pointer;
-
-    color: #fff;
-    border: medium none;
-}
-
-#content .layout .config-row-link .config-icon,
-#content .layout .config-column-link .config-icon,
-#content .layout .config-tile-link .config-icon
-{
-    display: block;
-
-    width: 16px;
-    height: 16px;
-
-    background: transparent url('++resource++collective.cover/img/conf.png') no-repeat center center;
-    background-size: 100%;
-}
-
-#content .layout .resizer
-{
-    position: absolute;
-    right: 0;
-    bottom: 0;
-
-    display: block;
-
-    width: 24px;
-    height: 14px;
-    /*cursor: e-resize;*/
-
-    cursor: pointer;
-
-    background: transparent url('++resource++collective.cover/img/resize-hor.png') no-repeat center center;
-    background-size: 100%;
-}
-
-.template-layoutedit .ui-dialog .ui-dialog-titlebar-close
-{
-    height: 20px;
-
-    cursor: pointer;
-
-    border: none;
-    outline: none;
-    background: url('++resource++collective.cover/img/remove.png');
-}
-.template-layoutedit .ui-dialog .ui-dialog-titlebar-close:hover
-{
-    height: 20px;
-
-    background: url('++resource++collective.cover/img/remove.png') 0 20px;
-}
-
-
-
-.tile-placeholder
-{
-    background-color: #ddd;
-}
-
-.layout .row
-{
-    min-height: 100px;
-    margin: 0 0 15px;
-    padding: 15px 0;
-
-    outline: 1px dashed blue;
-}
-
-.layout .column
-{
-    min-height: 100px;
-    padding: 15px 0;
-
-    outline: 1px dashed #ccc;
-}
-
-.layout .tile-wrapper
-{
-    padding: 10px;
-}
-.layout .guides
-{
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    visibility: hidden;
-
-    width: 100%;
-    height: 100%;
-}
-.layout .row-guide
-{
-    height: 100%;
-
-    border-left: 1px dotted #333;
-}
-.layout .config-tile-link
-{
-    float: right;
-}
-
-.ui-resizable-helper
-{
-    border: 1px dotted #00f;
-}
-
-#news img
-{
-    float: right;
-}
-
-#news p
-{
-    clear: both;
-}
-.row-droppable
-{
-    clear: both;
-
-    width: 100%;
-}
-
-.row-droppable.ui-state-default
-{
-    display: block;
-
-    min-height: 20px;
-}
-
-.layout .label
-{
-    font-size: 10px;
-    line-height: 1em;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    min-width: 5em;
-    padding-right: 10px;
-    padding-left: 10px;
-
-    text-align: center;
-}
-
-.layout .columnlabel
-{
-    top: 0;
-    bottom: auto;
-}
-
-.layout .permitionbutton
-{
-    font-size: 10px;
-    line-height: 1.5em;
-
-    position: absolute;
-    top: 0;
-    right: 15px;
-
-    min-width: 5em;
-    padding-right: 10px;
-    padding-left: 10px;
-
-    cursor: pointer;
-    text-align: center;
-
-    color: #fff;
-    background-color: #000;
-}
-
-.layout .to-delete
-{
-    outline: 1px solid red;
-}
-.add-column
-{
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    width: 10px;
-    height: 49%;
-
-    cursor: pointer;
-
-    border-bottom: 1px dashed #ccc;
-    border-left: 1px dashed #ccc;
-    background: #fff url('++resource++collective.cover/img/arrow-right.gif') no-repeat center center;
-}
-
-.remove-column
-{
-    position: absolute;
-    top: 50%;
-    right: 0;
-
-    width: 10px;
-    height: 50%;
-
-    cursor: pointer;
-
-    border-left: 1px dashed #ccc;
-    background: #fff url('++resource++collective.cover/img/arrow-left.gif') no-repeat center center;
-}
-.add-column.disabled
-{
-    background-color: #eaeaea;
-}
-
-/*ACTION BUTTONS*/
-
-.icon-white
-{
-    line-height: 14px;
-
-    display: inline-block;
-
-    width: 22px;
-    height: 14px;
-
-    vertical-align: text-top;
-}
-#btn-row .icon-white
-{
-    background: url('++resource++collective.cover/img/rows.png') no-repeat scroll center 0 transparent;
-}
-
-#btn-column .icon-white
-{
-    background: url('++resource++collective.cover/img/columns.png') no-repeat scroll center 0 transparent;
-}
-
-#btn-tile .icon-white
-{
-    background: url('++resource++collective.cover/img/tiles.png') no-repeat 0 0;
-}
-.layout-actions .icon-white
-{
-    line-height: 32px;
-
-    width: 32px;
-    height: 28px;
-}
-
-.ui-draggable-dragging .icon-white
-{
-    display: none;
-}
-
-#group-select-list,
-#tile-select-list
-{
-    display: none;
-}
-
-#tile-configure
-{
-    display: none;
-}
-
-#collective-cover-list-uuids-size
-{
-    width: 25px;
-}
-
-#content #collective-cover-list-uuids-tiletitle
-{
-    font-size: 1em;
-
-    width: 100px;
-}
-
-.tile-name
-{
-    font-weight: bold;
-
-    position: relative;
-    top: 10px;
-
-    text-align: center;
-}
-
-.btn-tile
-{
-    float: left;
-
-    margin: 0 auto;
-    padding-right: 10px;
-
-    text-align: center;
-}
-.btn-tile span
-{
-    font-size: 11px;
-
-    display: block;
-}
-
-.layout-actions
-{
-    float: left;
-
-    margin-right: 15px;
-    padding-right: 15px;
-
-    border-right: 1px solid #333;
-}
-
-#sidebar
-{
-    float: left;
-    clear: both;
-
-    width: 100%;
-    margin-bottom: 20px;
-}
-
-
-/* tiles config */
-.modal-fields,
-#configure_tile > div
-{position: relative;min-height: 2em;padding-bottom: 8px;
-
-    border-bottom: 1px solid #d1d1d1;
-}
-#configure_tile > div > label
-{float: left;margin-right: 8px;
-    margin-left: 20px;
-}
-#tile-configure .formControls
-{
-    border-bottom: none;
-}
-#configure_tile input[type=radio]
-{
-    display: none;
-}
-#configure_tile input[type=radio] + label
-{
-    display: inline-block; padding: 0 10px;text-indent: -2000px;
-}
-#configure_tile input[type=radio]:checked + label
-{
-    display: none;
-}
-.order-box
-{
-    position: absolute;top: 0;right: 0;
-}
-.visibility-box
-{
-    position: absolute; top: 0; left: 0;
-}
-.visibility-box > span
-{
-    display: none;
-}
-.visibility-no
-{
-    background: url('++resource++collective.cover/img/visibility.png') no-repeat 0 4px;
-}
-.visibility-yes
-{
-    background: url('++resource++collective.cover/img/visibility.png') no-repeat -22px 4px;
-}
-
-#tile-configure .order-box
-{
-    display: none;
-}
-
-#tile-configure .config-sortable
-{
-    cursor: move;
-}
-body .cssclasswidget
-{
-    cursor: pointer;
-}
-/* https://stackoverflow.com/a/10100209 */
-body .cssclasswidget-classlist::-webkit-scrollbar {
-    -webkit-appearance: none;
-    width: 7px;
-}
-body .cssclasswidget-classlist::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background-color: rgba(0,0,0,.5);
-    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
-}
-body .cssclasswidget-classlist
-{
-    position: absolute;
-    z-index: 1001;
-
-    display: flex;
-    overflow-y: scroll;
-    flex-direction: column;
-
-    max-height: 4rem;
-    padding: .4rem;
-
-    list-style-type: none !important;
-
-    border: 1px solid #A9A9A9;
-    background: #FFF;
-
-}
-body .cssclasswidget-classlist li
-{
-    margin-bottom: .2rem;
-}
-body .cssclasswidget-classlist input
-{
-    vertical-align: bottom;
-}
-body .cssclasswidget-classlist span
-{
-    cursor: pointer;
-    padding-left: 1.2rem;
-    margin-left: -1rem;
-}
-body .cssclasswidget-overlay
-{
-    position: fixed;
-    z-index: 1000;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
diff --git a/src/collective/cover/static/js/compose.js b/src/collective/cover/static/js/compose.js
deleted file mode 100644
index 42fccb979..000000000
--- a/src/collective/cover/static/js/compose.js
+++ /dev/null
@@ -1,207 +0,0 @@
-var root = typeof exports !== "undefined" && exports !== null ? exports : this;
-(function($) {
-  $.fn.liveSortable = function(opts) {
-    $(document).on("mouseover", this.selector, function() {
-      if (!$(this).data("init")) {
-        $(this).data("init", true).sortable(opts);
-      }
-    });
-    return $();
-  };
-}(jQuery));
-
-//XXX stupid method and stupid way of coding... XXXXXXX
-function removeObjFromTile() {
-  $(".tile-remove-item").remove();
-  $(".sortable-tile").each(function() {
-    var child = $(this).children('*[data-content-uuid]');
-    child.append("<i class='tile-remove-item'><span class='text'>remove</span></i>");
-  });
-  $(".tile-remove-item").unbind("click");
-  $(".tile-remove-item").click(function(e) {
-    e.preventDefault();
-    var obj = $(this).parent();
-    uuid = obj.attr("data-content-uuid");
-    var tile = obj.parents('.tile');
-
-    tile.find('.loading-mask').addClass('show remove-tile');
-    var tile_type = tile.attr("data-tile-type");
-    var tile_id = tile.attr("id");
-    $.ajax({
-      url: "@@removeitemfromlisttile",
-      data: {
-        'tile-type': tile_type,
-        'tile-id': tile_id,
-        'uuid': uuid
-      },
-      success: function(info) {
-        tile.html(info);
-        tile.trigger('change');
-        TitleMarkupSetup();
-        tile.find('.loading-mask').removeClass('show remove-tile');
-        return false;
-      },
-      error: function(XMLHttpRequest, textStatus, errorThrown) {
-        tile.html(textStatus + ': ' + errorThrown);
-        TitleMarkupSetup();
-        tile.find('.loading-mask').removeClass('show remove-tile');
-        return false;
-      }
-    });
-  });
-}
-
-function TitleMarkupSetup() {
-  $('#content .tile').each(function() {
-    if ($(this).find('.loading-mask')[0] === undefined) {
-      $(this).append('<div class="loading-mask"/>');
-    }
-  });
-  removeObjFromTile();
-}
-
-$(document).ready(function() {
-  $(".sortable-tile").liveSortable({
-    stop: function(event, ui) {
-      var uuids = [];
-      $(this).children().each(function(index) {
-        if ($(this).attr("data-content-uuid") !== undefined) {
-          uuids.push($(this).attr("data-content-uuid"));
-        }
-      });
-      var tile = $(this).closest('.tile');
-      var tile_type = tile.attr("data-tile-type");
-      var tile_id = tile.attr("id");
-      $.ajax({
-        url: "@@updatelisttilecontent",
-        data: {
-          'tile-type': tile_type,
-          'tile-id': tile_id,
-          'uuids': uuids
-        },
-        success: function(info) {
-          tile.html(info);
-          tile.trigger('change');
-          TitleMarkupSetup();
-          return false;
-        },
-        error: function(XMLHttpRequest, textStatus, errorThrown) {
-          tile.html(textStatus + ': ' + errorThrown);
-          TitleMarkupSetup();
-          return false;
-        }
-      });
-    }
-  });
-
-  TitleMarkupSetup();
-
-  var editSortable = function() {
-    //carousel
-    var carousel = $('div[data-carousel="carousel-sort"]');
-    if (carousel[0] !== undefined) {
-
-      var serial_sort = function(textarea, sortable) {
-        textarea.empty();
-        sortable.find('[data-content-uuid]').each(function(e) {
-          textarea.append($(this).attr('data-content-uuid') + "\n");
-        });
-      };
-
-      var textarea = carousel.find('>textarea');
-      var sortable = carousel.find('.sortable');
-      textarea.hide();
-
-      sortable.sortable({
-        stop: function(event, ui) {
-          serial_sort(textarea, sortable);
-        }
-      });
-
-      //create delete buttons
-      sortable.find('[data-content-uuid]').append("<i class='tile-remove-item' data-content-uuid=''><span class='text'>remove</span></i>");
-      sortable.find('[data-content-uuid]').find('.tile-remove-item').click(function(e) {
-        $(this).parent('.textline-sortable-element').remove();
-        serial_sort(textarea, sortable);
-      });
-    }
-  };
-
-  if ($.fn.prepOverlay !== undefined) {
-    $('a.edit-tile-link').prepOverlay({
-      subtype: 'ajax',
-      filter: '.tile-content',
-      formselector: '#edit_tile',
-      closeselector: '[name="buttons.cancel"]',
-      noform: 'close',
-      beforepost: function(return_value, data_parent) {
-        // Before post data, populate the textarea (textarea.mce_editable) with the contents of  iframe created by TinyMCE call.
-        // TODO: This does not solves, if we have more of a textarea widget in tiles. What's the solution?
-        var iframes = jQuery('#edit_tile iframe');
-        var mcs = {};
-
-        iframes.each(function(index) {
-          var iframe = $(this);
-          var idFrame = iframe.attr('id');
-          var idFrameLen = idFrame.length;
-
-          if (idFrameLen > 4 && idFrame.slice(idFrameLen - 4, idFrameLen) == "_ifr") {
-            mcs[idFrame.slice(0, -4)] = iframe;
-          }
-        });
-
-        var newlist = $.map(data_parent, function(value, i) {
-          if (data_parent[i].type == "textarea" && mcs[data_parent[i].name] !== undefined) {
-            value.value = mcs[value.name].contents().find('body').html();
-          }
-          return value;
-        });
-      },
-      afterpost: function(return_value, data_parent) {
-        var tileId = data_parent.data('pbo').src.split('/').pop();
-        var tile = $('#' + tileId);
-        tile.html(return_value.children());
-        tile.trigger('change');
-      },
-      config: {
-        onLoad: function() {
-          // With plone.app.widgets and Plone 4.3
-          if (typeof require !== 'undefined' && require.defined('pat-registry')) {
-            // Remove old editors references to work with ajax
-            if (typeof tinyMCE !== 'undefined' && tinyMCE !== null) {
-              if (tinyMCE.EditorManager != null) {
-                tinyMCE.EditorManager.editors = [];
-              }
-            }
-            // Add tinymce
-            $('.overlay textarea.mce_editable').addClass('pat-tinymce');
-            require('pat-registry').scan($('.overlay'), ['tinymce']);
-            // Wire save buttom to save tinymce
-            $( '.overlay input#buttons-save').on('click', function() {
-              tinyMCE.triggerSave();
-            });
-            // Hack to make overlay work over overlay
-            $('.overlay').on('mouseover', function() {
-              $('div.plone-modal-wrapper').css('z-index', '10050');
-            });
-          } else if (typeof initTinyMCE !== 'undefined') { // Plone 4.3
-            // Remove old editors references to work with ajax
-            if (typeof tinyMCE !== 'undefined' && tinyMCE !== null) {
-              if (tinyMCE.EditorManager != null) {
-                tinyMCE.EditorManager.editors = [];
-              }
-            }
-            // Add tinymce
-            initTinyMCE(this.getOverlay());
-          }
-          // Remove unecessary link, use HTML button of EditorManager
-          $('div.suppressVisualEditor').remove();
-          editSortable();
-        }
-      }
-    });
-  } else {  // Plone 5
-    $('a.edit-tile-link').on('show.plone-modal.patterns', editSortable);
-  }
-  $('.tile[data-tile-type=collective\\.cover\\.carousel]').on('change', root.initializeGallery);
-});
diff --git a/src/collective/cover/static/js/layout_base.js b/src/collective/cover/static/js/layout_base.js
deleted file mode 100644
index d4557e3c7..000000000
--- a/src/collective/cover/static/js/layout_base.js
+++ /dev/null
@@ -1,34 +0,0 @@
-$(document).ready(function() {
-  var layout = $('.layout');
-  if (layout[0] !== undefined) {
-    layout.layoutmanager();
-
-    //bind the save button
-    $('#btn-save').click(function(event) {
-      event.preventDefault();
-      json = layout.layoutmanager().html2json(layout);
-      var $this = $(this);
-      $this.removeClass(function(index, css) {
-        return (css.match(/\bbtn-\S+/g) || []).join(' ');
-      });
-      $this.find('span').text('Saving...');
-      $.ajax({
-        'url': '@@save_layout' + location.search,
-        'data': {
-          'cover_layout': JSON.stringify(json)
-        },
-        'type': 'POST',
-        success: function(data) {
-          $this.find('span').text('Saved');
-          $('#btn-save').removeClass('modified error');
-          $('#btn-save').addClass('saved btn-success');
-          $('#btn-export').removeClass('disabled');
-        },
-        error: function(jqXHR, textStatus, errorThrown) {
-          $this.find('span').text('Error ' + errorThrown);
-          $('#btn-save').addClass('error btn-danger');
-        }
-      });
-    });
-  }
-});
diff --git a/src/collective/cover/static/js/layout_edit.js b/src/collective/cover/static/js/layout_edit.js
deleted file mode 100644
index 1fc4a4bd4..000000000
--- a/src/collective/cover/static/js/layout_edit.js
+++ /dev/null
@@ -1,746 +0,0 @@
-(function($) {
-  var CSSClassWidget = (function() {
-    function CSSClassWidget($el, callback) {
-      this.$el = $el;
-      this.callback = callback;
-      this.$value = $el.next();
-      this.open = false;
-
-      var i, item, len;
-      this.order = [];
-      this.options = {};
-      options = JSON.parse($el.attr('data-options'));
-      for (i = 0, len = options.length; i < len; i++) {
-        item = options[i];
-        this.order.push(item.value);
-        this.options[item.value] = item;
-      }
-      this.setSelected(this.$value.val());
-      this.update();
-      this.$el.on('click', this.onButtonClick.bind(this))
-    }
-    CSSClassWidget.prototype.update = function() {
-      var i, key, item, len;
-      value = '';
-      for (i = 0, len = this.order.length; i < len; i++) {
-        key = this.order[i];
-        item = this.options[key];
-        if (item.selected) {
-          value += ' ' + key;
-        }
-      }
-      value = value.trim();
-      if (value === '') {
-        value = 'tile-default';
-      }
-      this.$value.val(value);
-      if (this.callback instanceof Function) {
-        this.callback(value);
-      }
-    }
-    CSSClassWidget.prototype.setSelected = function(selected) {
-      if (selected == null || selected === '') {
-        selected = [];
-      } else {
-        selected = selected.split(' ');
-      }
-      var i, key, len;
-      for (i = 0, len = selected.length; i < len; i++) {
-        key = selected[i];
-        if (key === 'tile-default') {
-          continue;
-        }
-        if (this.options[key] == null) {
-          continue;
-        }
-        this.options[key].selected = true;
-      }
-      this.update();
-    };
-    CSSClassWidget.prototype.onButtonClick = function(e) {
-      e.preventDefault();
-
-      $('.cssclasswidget-overlay').remove();
-      $('.cssclasswidget-classlist').remove();
-
-      this.open = !this.open;
-      if (!this.open) {
-        return;
-      }
-
-      var $overlay = $('<div class="cssclasswidget-overlay">');
-      $overlay.insertAfter(this.$el);
-      $overlay.on('click', this.onOverlayClick.bind(this));
-
-      var $classlist = $('<ul class="cssclasswidget-classlist">');
-      var i, key, item, $item, len;
-      value = '';
-      for (i = 0, len = this.order.length; i < len; i++) {
-        key = this.order[i];
-        item = this.options[key];
-        $item = $('<li><input name="'+key+'" type="checkbox" value="'+key+'" /><span class="cssclasswidget-'+key+'">'+item.content+'</span></li>');
-        if (item.selected) {
-          $('input', $item).attr('checked', 'checked');
-        }
-        $classlist.append($item);
-      }
-      $classlist.insertAfter(this.$el);
-      $classlist.offset(this.$el.offset());
-      $classlist.css('transform', 'translateY('+(this.$el.height()+4)+'px)');
-      $('span', $classlist).on('click', this.onItemClick.bind(this));
-    };
-    CSSClassWidget.prototype.onOverlayClick = function(e) {
-      e.preventDefault();
-      this.open = false;
-      $('.cssclasswidget-overlay').remove();
-      $('.cssclasswidget-classlist').remove();
-    };
-    CSSClassWidget.prototype.onItemClick = function(e) {
-      e.preventDefault();
-      var $checkbox = $(e.target).prev()
-      var key = $checkbox.attr('name');
-      if ($checkbox.is(':checked')) {
-        $checkbox.removeAttr('checked');
-      } else {
-        $checkbox.attr('checked', 'checked')
-      }
-      this.options[key].selected = $checkbox.is(':checked');
-      this.update();
-    };
-    return CSSClassWidget;
-  })();
-
-  /**
-   * @constructor
-   * @param jqDomObj layout, the layout container
-   * @param {Object} conf, the conf dictionary
-   */
-  function LayoutManager(layout, conf) {
-    var self = this,
-      n_columns = conf.ncolumns,
-      row_class = 'cover-row',
-      row_dom = $('<div class="' + row_class + '">' +
-        '    <a href="#" class="config-row-link">' +
-        '        <i class="config-icon"></i>' +
-        '    </a>' +
-        '</div>'),
-      column_class = 'cover-column',
-      column_dom = $('<div class="' + column_class + '">' +
-        '    <a href="#" class="config-column-link">' +
-        '        <i class="config-icon"></i>' +
-        '    </a>' +
-        '</div>'),
-      tile_class = 'cover-tile',
-      tile_dom = $('<div class="' + tile_class + '">' + '</div>'),
-      le = $('.layout'),
-      BeforeUnloadHandler;
-
-    BeforeUnloadHandler = function() {
-      var self = this,
-        message;
-      this.message = window.form_modified_message ||
-        "Discard changes? If you click OK, any changes you have made will be lost.";
-
-      this.execute = function(event) {
-        var save_btn = $('#btn-save');
-        if (save_btn.hasClass('modified')) {
-          event.returnValue = this.message;
-          return message;
-        }
-      };
-    };
-
-    $.extend(self, {
-      init: function() {
-        self.setup();
-        self.row_events();
-        self.column_events();
-        le.bind('modified.layout', self.layout_modified);
-        window.onbeforeunload = new BeforeUnloadHandler().execute;
-      },
-
-      setup: function() {
-        //buttons draggable binding
-        $("#btn-row").draggable({
-          connectToSortable: ".layout",
-          helper: 'clone'
-        });
-        $("#btn-column").draggable({
-          appendTo: 'body',
-          helper: 'clone'
-        });
-        $(".btn-tile").draggable({
-          appendTo: 'body',
-          helper: 'clone'
-        });
-
-        //sortable rows
-        le.sortable({
-          items: '.' + row_class,
-          placeholder: 'ui-sortable-placeholder',
-          stop: function(event, ui) {
-            if (ui.item.hasClass('btn')) {
-              var row = row_dom.clone();
-              ui.item.after(row);
-              ui.item.remove();
-
-              self.row_events(row);
-              self.delete_manager(row);
-              // after adding the row, call its drop handler
-              // to automatically add a column (closes #212)
-              self.row_drop($(row));
-            }
-            le.trigger('modified.layout');
-          }
-        });
-
-        self.generate_grid_css();
-        self.delete_manager();
-        self.resize_columns_manager();
-        self.class_chooser_manager();
-
-        self.tile_config_manager();
-
-        //export layout
-        $('#btn-export').click(function() {
-          if (!$(this).hasClass('disabled') && $('#btn-save').hasClass('saved')) {
-            $('#export-layout').modal();
-          }
-        });
-
-        $('#btn-cancel-export-layout').click(function(e) {
-          e.preventDefault();
-          $('#export-layout').modal('hide');
-        });
-      },
-
-      /**
-       * Generate a random value to form a UUID; we use a
-       * fallback for browsers without crypto module mainly to
-       * deal with older versions of IE.
-       * See: http://caniuse.com/#search=crypto
-       **/
-      get_random_value: function(c) {
-        var r;
-        if (window.crypto && typeof window.crypto.getRandomValues === 'function') {
-          r = crypto.getRandomValues(new Uint8Array(1))[0] % 16 | 0;
-        } else { // Fallback for older browsers
-          r = Math.random() * 16 | 0;
-        }
-        // Improve randomness. See: http://stackoverflow.com/a/8809472/2116850
-        r = (self.timestamp + r) % 16 | 0;
-        self.timestamp = Math.floor(self.timestamp / 16);
-        if (c !== 'x') {
-          r = r & 0x3 | 0x8;
-        }
-        return r.toString(16);
-      },
-
-      /**
-       * Generate an RFC 4122 version 4 compliant UUID.
-       * See: http://stackoverflow.com/a/2117523/2116850
-       **/
-      generate_uuid: function() {
-        // Improve randomness. See: http://stackoverflow.com/a/8809472/2116850
-        self.timestamp = new Date().getTime();
-        if (window.performance && typeof window.performance.now === 'function') {
-          self.timestamp += performance.now(); // use high-precision timer if available
-        }
-        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
-          /[xy]/g,
-          self.get_random_value
-        );
-      },
-
-      /**
-       * Generate tile id. As we're using the generated UUID as
-       * class id, we need the first char not to be a number.
-       * See: http://css-tricks.com/ids-cannot-start-with-a-number/
-       **/
-      generate_tile_id: function() {
-        var tile_id = self.generate_uuid();
-        while ($.isNumeric(tile_id[0])) {
-          tile_id = self.generate_uuid();
-        }
-        return tile_id;
-      },
-
-      /**
-       * Row drop handler
-       * available from outside the droppable definition
-       **/
-      row_drop: function($row) {
-        //creates a new column
-        var column = column_dom.clone();
-        $row.prepend(column);
-        self.column_events(column);
-        self.delete_manager(column);
-        self.resize_columns_manager(column);
-
-        self.calculate_grid($row.find('.' + column_class));
-
-        le.trigger('modified.layout');
-      },
-
-      /**
-       * Row events binding
-       * makes the event setup in row/s
-       **/
-      row_events: function(row) {
-        var rows = row ? row : le.find('.' + row_class);
-
-        //allow columns droppable
-        rows.droppable({
-          activeClass: 'ui-state-default',
-          hoverClass: 'ui-state-hover',
-          accept: '#btn-column',
-          drop: function(event, ui) {
-            self.row_drop($(this));
-          }
-        });
-
-
-        //allow sortable columns
-        rows.sortable({
-          items: '.' + column_class,
-          connectWith: '.' + row_class,
-          appendTo: '.layout',
-          helper: 'clone',
-          placeholder: 'ui-sortable-placeholder-column',
-          cancel: '.resizer',
-          start: function(e, ui) {
-            ui.placeholder.attr('data-column-size', ui.helper.data('column-size'));
-          },
-          stop: function(event, ui) {
-            le.trigger('modified.layout');
-          },
-          receive: function(event, ui) {
-            if (ui.sender[0] != this) {
-              self.calculate_grid($(this).find('.' + column_class));
-              self.calculate_grid(ui.sender.find('.' + column_class));
-            }
-          }
-        });
-      },
-
-      /**
-       * column events binding
-       * makes the event setup in column/s
-       **/
-      column_events: function(column) {
-        var columns = column ? column : le.find('.' + column_class);
-
-        columns.droppable({
-          activeClass: "ui-state-default",
-          hoverClass: "ui-state-hover",
-          accept: ".btn-tile",
-          drop: function(event, ui) {
-            var new_tile = tile_dom.clone();
-            var column_elem = this;
-
-            var tile_type = ui.draggable.data('tile-type');
-            var is_configurable = ui.draggable.data('tile-configurable');
-            new_tile.attr("data-tile-type", tile_type);
-
-            var tile_id = self.generate_tile_id();
-            new_tile.attr("id", tile_id);
-            var url_config = "@@configure-tile/" + tile_type + "/" + tile_id;
-
-            var config_icon = $("<i/>").addClass("config-icon");
-            var config_link = $("<a />").addClass("config-tile-link")
-              .attr('href', url_config)
-              .append(config_icon);
-            var name_tag = $("<span />").addClass("tile-name")
-              .text(ui.draggable.data('tile-name'));
-            if (is_configurable) {
-              new_tile.append(config_link);
-            }
-            new_tile.append(name_tag);
-
-            $(column_elem).append(new_tile);
-            self.delete_manager(new_tile);
-
-            le.trigger('modified.layout');
-          }
-        });
-
-        //allow sortable tiles
-        columns.sortable({
-          placeholder: 'tile-placeholder',
-          appendTo: '.layout',
-          helper: 'clone',
-          items: '.' + tile_class,
-          connectWith: '.' + column_class,
-          stop: function(event, ui) {
-            le.trigger('modified.layout');
-          }
-        });
-      },
-
-      /**
-       * tile events binding
-       * makes the event setup in tile/s
-       **/
-      tile_events: function(tile) {
-        var tiles = tile ? tile : le.find('.' + tile_class);
-      },
-
-
-      /**
-       * Delete elements in layout
-       * manage the delete process of layout elements
-       **/
-      delete_manager: function(elements) {
-        var button = $('<button class="close">&times;</button>').css({
-          'font-size': '15px',
-          'left': '0',
-          'line-height': '15px',
-          'overflow': 'hidden',
-          'position': 'absolute',
-          'text-align': 'center',
-          'top': '0',
-          'width': '15px'
-        });
-        button.click(function() {
-          var element = $(this).parent('div');
-          element.remove();
-          le.trigger('modified.layout');
-        });
-        button.hover(
-          function() {
-            $(this).parent('div').addClass('to-delete');
-          },
-          function() {
-            $(this).parent('div').removeClass('to-delete');
-          }
-        );
-        elements = elements !== undefined ? elements : le.find('.' + column_class + ', .' + tile_class + ', .' + row_class);
-        elements.append(button);
-      },
-
-      /**
-       * Calculate Grid distribution
-       * manage the grid behavior in new elements
-       **/
-      calculate_grid: function(elements) {
-        var n_elements = elements.length;
-        var column_size = Math.floor(n_columns / n_elements);
-
-        if (n_elements <= n_columns) {
-          $(elements).attr('data-column-size', column_size);
-        }
-      },
-
-      /**
-       * Generate grid css
-       * on the fly generates an stylesheet with a dummy grid
-       * implementation, based on the liquid version of boostrap
-       **/
-      generate_grid_css: function() {
-        var gutter = '3';
-
-        jss.set('.' + row_class, {
-          width: '98%'
-        });
-        jss.set('.' + row_class + ':after', {
-          clear: 'both'
-        });
-        jss.set('.' + row_class + ':before, .' + row_class + ':after', {
-          display: 'table',
-          'line-height': '0',
-          'content': '""'
-        });
-
-        jss.set('.' + column_class, {
-          'display': 'block',
-          'float': 'left',
-          'width': '100%',
-          'min-height': '30px',
-          'box-sizing': 'border-box'
-        });
-
-        var margin_space = (n_columns - 1) * gutter;
-        var computable_space = 100 - margin_space;
-        var minimun_column_width = computable_space / n_columns;
-
-        for (var i = 1; i <= n_columns; i++) {
-
-          var column_width = minimun_column_width * i;
-          var margin_width = gutter * (i - 1);
-
-          jss.set('[data-column-size="' + i + '"]', {
-            'width': column_width + margin_width + '%',
-            'margin-left': gutter + '%'
-          });
-        }
-
-        jss.set('.' + column_class + ':nth-of-type(1)', {
-          'margin-left': '0'
-        });
-      },
-
-      /**
-       * Event, Layout was modified
-       * XXX I can do an autocheck code, but doesn't worth it at this point
-       **/
-      layout_modified: function() {
-        var save_btn = $('#btn-save');
-
-        if (save_btn.hasClass('saved')) {
-          $('#btn-save').find('span').text('Save');
-          $('#btn-save').removeClass(function(index, css) {
-            return (css.match(/\bbtn-\S+/g) || []).join(' ');
-          });
-          $('#btn-save').removeClass('saved error');
-          $('#btn-save').addClass('modified btn-warning');
-
-          //disable export layout
-          $('#btn-export').addClass('disabled');
-        }
-      },
-
-      /**
-       *  Resize columns
-       *
-       **/
-      resize_columns_manager: function(columns) {
-        columns = columns !== undefined ? columns : le.find('.' + column_class);
-
-        var resizer = $('<i/>').addClass('resizer');
-        $(columns).append(resizer);
-
-        $("#resizer").dialog({
-          autoOpen: false
-        });
-
-        $(".resizer").click(function() {
-          $("#resizer").dialog("open");
-
-          var column = $(this).parents('.cover-column');
-          var size = column.attr('data-column-size');
-
-          $("#column-size-resize span").html(size);
-          $('#slider').slider("option", "value", size);
-          $('#slider').off("slide");
-          $('#slider').on("slide", function(event, ui) {
-            column.attr('data-column-size', ui.value);
-            le.trigger('modified.layout');
-          });
-          return false;
-        });
-
-        $("#slider").slider({
-          range: "max",
-          min: 1,
-          max: n_columns,
-          value: 1,
-          slide: function(event, ui) {
-            $("#column-size-resize span").html(ui.value);
-          }
-        });
-        $("#amount").val($("#slider-range-max").slider("value"));
-      },
-
-      /**
-       *  Class chooser
-       *
-       **/
-      class_chooser_manager: function() {
-        $("#class-chooser").dialog({
-          autoOpen: false
-        });
-
-        $(document).on('click', '.config-row-link, .config-column-link', function(e) {
-          e.preventDefault();
-          var $target = $(this).parent();
-          var $widget = $('#class-chooser > .cssclasswidget');
-          var $value = $('#class-chooser > .cssclasswidget-selected');
-          $value.val($target.attr('data-css-class'));
-          new CSSClassWidget($widget, function(value) {
-            $target.attr('data-css-class', value);
-          });
-          $('#class-chooser').dialog("open");
-        });
-      },
-
-      /**
-       *  Tile Config
-       *  Configuration for tiles, manage the save, open and cancel operations
-       **/
-      tile_config_manager: function() {
-        //CONFIGURATION OF THE TILE
-        //when saving the configuration of the tile save it with ajax
-        $(document).on("click", "#configure_tile #buttons-save", function(e) {
-          e.preventDefault();
-          var url = $("#configure_tile").attr("action");
-          var data = $("#configure_tile").serialize();
-          data = data + '&buttons.save=Save&ajax_load=true';
-          $.ajax({
-            type: 'POST',
-            url: url,
-            data: data,
-            success: function(e, v) {
-              $('#tile-configure').html('');
-              $('#tile-configure').modal('hide');
-            }
-          });
-          return false;
-        });
-        //when canceling the configuration of the tile
-        $(document).on("click", "#configure_tile #buttons-cancel", function(e) {
-          e.preventDefault();
-          $('#tile-configure').html('');
-          $('#tile-configure').modal('hide');
-          return false;
-        });
-        //config the tile
-        $(document).on("click", ".config-tile-link", function(e) {
-          e.preventDefault();
-          var url = $(this).attr("href");
-          $('#tile-configure').modal();
-          $.ajax({
-            type: 'GET',
-            url: url,
-            data: {
-              'ajax_load': true
-            },
-            success: function(data) {
-              $('#tile-configure').html(data);
-              // Make sure CSS field is in first place
-              var css_id = $('[id$=css_class]').attr('id');
-              var first = $('#configure_tile div.field:first');
-              if (first.attr('id') != css_id) {
-                $('#' + css_id).insertBefore(first);
-              }
-              new CSSClassWidget($('#' + css_id + ' .cssclasswidget'));
-              $('#configure_tile div.field').not('#' + css_id).addClass('config-sortable');
-              // Fields in tile config sortable
-              $('#configure_tile').sortable({
-                opacity: 0.6,
-                cursor: 'move',
-                placeholder: "ui-state-highlight",
-                zIndex: 9999,
-                refreshPositions: true,
-                axis: 'y',
-                tolerance: 'pointer',
-                forcePlaceholderSize: true,
-                items: 'div.config-sortable',
-                update: function(e, ui) {
-                  var $divs = $(this).children('div.field');
-                  $divs.each(function() {
-                    var $div = $(this);
-                    var newVal = $(this).index() + 1;
-                    // TODO: Is used newVal -1 to prevent the field **Clase CSS** be counted as sortable item
-                    $(this).children('div.order-box').children('input').val(newVal - 1);
-                  });
-                }
-              });
-            }
-          });
-          return false;
-        });
-      },
-
-      /**
-       * Export html2json
-       *
-       **/
-      html2json: function(node) {
-        var data = [];
-        var excluded_elements = '.row-droppable';
-        var remove_classes = 'ui-droppable ui-sortable';
-
-        $(node).find('> div').not('.no-export').each(function(i, elem) {
-          if ($(this).not(excluded_elements)[0] !== undefined) {
-            $(this).removeClass(remove_classes);
-            var entry = {};
-
-            var patt = new RegExp(/\bcolumn|\brow|\btile/);
-            var node_type = patt.exec($(this).attr('class'));
-            if (node_type) {
-              entry.type = node_type[0];
-            }
-
-            if (node_type == 'column') {
-              entry.roles = ['Manager'];
-              entry.type = 'group';
-              entry['column-size'] = $(this).data('columnSize');
-            }
-
-            if ($(this).attr('data-css-class')) {
-              entry['css-class'] = $(this).attr('data-css-class');
-            }
-
-            var iterator = self.html2json($(this));
-            if (iterator[0] !== undefined) {
-              entry.children = iterator;
-            }
-
-            var node_id = $(this).attr('data-panel') || $(this).attr('id');
-            if (node_id !== undefined) {
-              entry.id = node_id;
-            }
-
-            var tile_type = $(this).attr('data-tile-type');
-            if (tile_type !== undefined) {
-              entry['tile-type'] = tile_type;
-            }
-            data.push(entry);
-          }
-        });
-        return data;
-      }
-
-    });
-    self.init();
-  }
-
-  $.fn.layoutmanager = function(options) {
-    // already instanced, return the data object
-    var el = this.data("layoutmanager");
-    if (el) {
-      return el;
-    }
-
-    var default_settings = this.data('layoutmanager-settings');
-    var settings = '';
-    //default settings
-    if (default_settings) {
-      settings = default_settings;
-    } else {
-      settings = {
-        'ncolumns': 16,
-      };
-    }
-
-    if (options) {
-      $.extend(settings, options);
-    }
-
-    return this.each(function() {
-      el = new LayoutManager($(this), settings);
-      $(this).data("layoutmanager", el);
-    });
-  };
-
-  /**
-   * Stick sidebar
-   * stick sidebar on top when scrolling
-   **/
-  var fixed = false;
-  $(document).scroll(function() {
-    if ($(this).scrollTop() > 200) {
-      if (!fixed) {
-        fixed = true;
-        $('#sidebar').addClass("fixed");
-
-      }
-    } else {
-      if (fixed) {
-        fixed = false;
-        $('#sidebar').removeClass("fixed");
-      }
-    }
-  });
-
-})(jQuery);
diff --git a/src/collective/cover/static/js/main.js b/src/collective/cover/static/js/main.js
deleted file mode 100644
index 8945836db..000000000
--- a/src/collective/cover/static/js/main.js
+++ /dev/null
@@ -1,46 +0,0 @@
-var root = typeof exports !== "undefined" && exports !== null ? exports : this;
-
-root.initializeGallery = function() {
-  var $carousel = $(this);
-  if (!$carousel.hasClass('tile-content')) {
-    $carousel = $('.tile-content', $carousel);
-  }
-  Galleria.loadTheme('++resource++collective.cover/js/galleria.cover_theme.js');
-  Galleria.run($carousel);
-  var options = {
-    height: parseFloat($carousel.attr('data-image-ratio'))
-  };
-  if ($('body').hasClass('template-view')) {
-      options.autoplay = ($carousel.attr('data-autoplay') === 'True');
-  }
-  Galleria.configure(options);
-};
-
-$(function() {
-  $('#content').on(
-    'click',
-    '.cover-calendar-tile a.calendar-tile-prev, ' +
-    '.cover-calendar-tile a.calendar-tile-next',
-    function(e) {
-    e.preventDefault();
-    var $a = $(this);
-    var $tile = $a.parents('.tile');
-    $.ajax({
-      url: '@@updatetile',
-      data: {
-        'tile-id': $tile.attr('id'),
-        'month:int': $a.attr('data-month'),
-        'year:int': $a.attr('data-year')
-      },
-      success: function(info) {
-        $tile.html(info);
-        return false;
-      },
-      error: function(XMLHttpRequest, textStatus, errorThrown) {
-        $tile.html(textStatus + ': ' + errorThrown);
-        return false;
-      }
-    });
-  });
-  $('.cover-carousel-tile').each(root.initializeGallery);
-});
diff --git a/src/collective/cover/static/js/selectlayoutpreview.js b/src/collective/cover/static/js/selectlayoutpreview.js
deleted file mode 100644
index 3c0938963..000000000
--- a/src/collective/cover/static/js/selectlayoutpreview.js
+++ /dev/null
@@ -1,46 +0,0 @@
-$(document).ready(function() {
-  function draw_preview(layout, ctx) {
-    //row position, depends of the number of the content that the row has
-    var row_offset = 10;
-    var canvas_width = 300;
-    $(layout).each(function() {
-      //row
-      ctx.fillStyle = "#EEEEEE";
-      ctx.fillRect(0, row_offset, canvas_width, 70);
-
-      //columns
-      var column_h_offset = 10;
-      var n_columns = this.children.length;
-      $(this.children).each(function() {
-        var 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;
-    });
-  }
-
-  function setup_preview(layout_preview, select, ctx, layouts) {
-    var 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;
-    draw_preview(layouts[layout_name], ctx);
-
-    layout_preview.find('h3').html(layout_name);
-  }
-
-  $.fn.layoutpreview = function(id, layouts) {
-    var select = $(id);
-    var layout_preview = $('#layout-preview');
-
-    var ctx = $('#canvas-layout')[0].getContext('2d');
-    setup_preview(layout_preview, select, ctx, layouts);
-
-    select.change(function(b, a) {
-      setup_preview(layout_preview, $(this), ctx, layouts);
-    });
-  };
-});
diff --git a/src/collective/cover/static/js/vendor/jquery.endless-scroll.js b/src/collective/cover/static/js/vendor/jquery.endless-scroll.js
deleted file mode 100644
index 34088c888..000000000
--- a/src/collective/cover/static/js/vendor/jquery.endless-scroll.js
+++ /dev/null
@@ -1,343 +0,0 @@
-// Generated by CoffeeScript 1.3.1
-/*
-  Endless Scroll plugin for jQuery
-
-  v1.8.0
-
-  Copyright (c) 2008-2012 Fred Wu
-
-  Dual licensed under the MIT and GPL licenses:
-    http://www.opensource.org/licenses/mit-license.php
-    http://www.gnu.org/licenses/gpl.html
-*/
-
-/*
-  Usage:
-
-  // using default options
-  $(window).endlessScroll();
-
-  // using some custom options
-  $("#images").endlessScroll({
-    fireOnce: false,
-    fireDelay: false,
-    loader: '<div class="loading"><div>',
-    callback: function(){
-      alert('test');
-    }
-  });
-
-  Configuration options:
-
-  pagesToKeep       integer         the number of 'pages' to keep before either end of the scrolling content are discarded,
-                                    by default (value set to `null`) no content will be discarded
-  inflowPixels      integer         the number of pixels from the boundary of the element that triggers the event
-  fireOnce          boolean         only fire once until the execution of the current event is completed
-  fireDelay         integer         delay the subsequent firing, in milliseconds, 0 or false to disable delay
-  loader            string          the HTML to be displayed during loading
-  content           string|function Plain HTML content to insert after each call, can be either a string or a function
-                                    that returns a string, when passed as a function it accepts three arguments:
-                                      <fireSequence> the number of times the event triggered during the current page session
-                                      <pageSequence> a positive or negative value that represents the scroll direction sequence
-                                      <scrollDirection> a string of either 'prev' or 'next'
-  insertBefore      string          jQuery selector syntax: where to put the loader as well as the plain HTML data
-  insertAfter       string          jQuery selector syntax: where to put the loader as well as the plain HTML data
-  intervalFrequency integer         set the frequency of the scroll event checking, the larger the frequency number,
-                                    the less memory it consumes - but also the less sensitive the event trigger becomes
-  ceaseFireOnEmpty  boolean         ceases fire automatically when the content is empty, set it to `false` if you are using
-                                    `callback` instead of `content` for loading content
-  resetCounter      function        resets the fire sequence counter if the function returns true, this function
-                                    could also perform hook actions since it is applied at the start of the event
-  callback          function        callback function, accepts three arguments:
-                                      <fireSequence> the number of times the event triggered during the current page session
-                                      <pageSequence> a positive or negative value that represents the scroll direction sequence
-                                      <scrollDirection> a string of either 'prev' or 'next'
-  ceaseFire         function        stops the event (no more endless scrolling) if the function returns true,
-                                    accepts three arguments:
-                                      <fireSequence> the number of times the event triggered during the current page session
-                                      <pageSequence> a positive or negative value that represents the scroll direction sequence
-                                      <scrollDirection> a string of either 'prev' or 'next'
-*/
-
-var EndlessScroll;
-
-EndlessScroll = (function() {
-  var defaults;
-
-  EndlessScroll.name = 'EndlessScroll';
-
-  defaults = {
-    pagesToKeep: null,
-    inflowPixels: 50,
-    fireOnce: true,
-    fireDelay: 150,
-    loader: 'Loading...',
-    content: '',
-    insertBefore: null,
-    insertAfter: null,
-    intervalFrequency: 250,
-    ceaseFireOnEmpty: true,
-    resetCounter: function() {
-      return false;
-    },
-    callback: function() {
-      return true;
-    },
-    ceaseFire: function() {
-      return false;
-    }
-  };
-
-  function EndlessScroll(scope, options) {
-    var _this = this;
-    this.options = $.extend({}, defaults, options);
-    this.pagesStack = [0];
-    this.scrollDirection = 'next';
-    this.firing = true;
-    this.fired = false;
-    this.fireSequence = 0;
-    this.pageSequence = 0;
-    this.nextSequence = 1;
-    this.prevSequence = -1;
-    this.lastScrollTop = 0;
-    this.insertLocation = this.options.insertAfter;
-    this.didScroll = false;
-    this.isScrollable = true;
-    this.target = scope;
-    this.targetId = '';
-    this.content = '';
-    this.lastContent = 'dummy';
-    this.innerWrap = $('.endless_scroll_inner_wrap', this.target);
-    this.handleDeprecatedOptions();
-    this.setInsertPositionsWhenNecessary();
-    $(scope).scroll(function() {
-      _this.detectTarget(scope);
-      return _this.detectScrollDirection();
-    });
-  }
-
-  EndlessScroll.prototype.run = function() {
-    var _this = this;
-    return setInterval((function() {
-      if (!_this.shouldTryFiring()) {
-        return;
-      }
-      if (_this.ceaseFireWhenNecessary()) {
-        return;
-      }
-      if (!_this.shouldBeFiring()) {
-        return;
-      }
-      _this.resetFireSequenceWhenNecessary();
-      _this.acknowledgeFiring();
-      _this.insertLoader();
-      if (_this.hasContent()) {
-        _this.showContent();
-        _this.fireCallback();
-        _this.cleanUpPagesWhenNecessary();
-        _this.delayFiringWhenNecessary();
-      }
-      _this.removeLoader();
-      return _this.lastContent = _this.content;
-    }), this.options.intervalFrequency);
-  };
-
-  EndlessScroll.prototype.handleDeprecatedOptions = function() {
-    if (this.options.data) {
-      this.options.content = this.options.data;
-    }
-    if (this.options.bottomPixels) {
-      return this.options.inflowPixels = this.options.bottomPixels;
-    }
-  };
-
-  EndlessScroll.prototype.setInsertPositionsWhenNecessary = function() {
-    var container;
-    container = "" + this.target.selector + " div.endless_scroll_inner_wrap";
-    if (defaults.insertBefore === null) {
-      this.options.insertBefore = "" + container + " div:first";
-    }
-    if (defaults.insertAfter === null) {
-      return this.options.insertAfter = "" + container + " div:last";
-    }
-  };
-
-  EndlessScroll.prototype.detectTarget = function(scope) {
-    this.target = scope;
-    return this.targetId = $(this.target).attr('id');
-  };
-
-  EndlessScroll.prototype.detectScrollDirection = function() {
-    var currentScrollTop;
-    this.didScroll = true;
-    currentScrollTop = $(this.target).scrollTop();
-    if (currentScrollTop > this.lastScrollTop) {
-      this.scrollDirection = 'next';
-    } else {
-      this.scrollDirection = 'prev';
-    }
-    return this.lastScrollTop = currentScrollTop;
-  };
-
-  EndlessScroll.prototype.shouldTryFiring = function() {
-    var shouldTryOrNot;
-    shouldTryOrNot = this.didScroll && this.firing === true;
-    if (shouldTryOrNot) {
-      this.didScroll = false;
-    }
-    return shouldTryOrNot;
-  };
-
-  EndlessScroll.prototype.ceaseFireWhenNecessary = function() {
-    if (this.options.ceaseFireOnEmpty === true && this.lastContent === '' || this.options.ceaseFire.apply(this.target, [this.fireSequence, this.pageSequence, this.scrollDirection])) {
-      this.firing = false;
-      return true;
-    } else {
-      return false;
-    }
-  };
-
-  EndlessScroll.prototype.wrapContainer = function(target) {
-    if (this.innerWrap.length === 0) {
-      return this.innerWrap = $(target).wrapInner('<div class="endless_scroll_content" data-page="0" />').wrapInner('<div class="endless_scroll_inner_wrap" />').find('.endless_scroll_inner_wrap');
-    }
-  };
-
-  EndlessScroll.prototype.scrollableAreaMargin = function(innerWrap, target) {
-    var margin;
-    switch (this.scrollDirection) {
-      case 'next':
-        margin = innerWrap.height() - $(target).height() <= $(target).scrollTop() + this.options.inflowPixels;
-        if (margin) {
-          target.scrollTop(innerWrap.height() - $(target).height() - this.options.inflowPixels);
-        }
-        break;
-      case 'prev':
-        margin = $(target).scrollTop() <= this.options.inflowPixels;
-        if (margin) {
-          target.scrollTop(this.options.inflowPixels);
-        }
-    }
-    return margin;
-  };
-
-  EndlessScroll.prototype.calculateScrollableCanvas = function() {
-    if (this.target[0] === document || this.target[0] === window) {
-      this.wrapContainer("body");
-      return this.isScrollable = this.scrollableAreaMargin($(document), $(window));
-    } else {
-      this.wrapContainer(this.target);
-      return this.isScrollable = this.innerWrap.length > 0 && this.scrollableAreaMargin(this.innerWrap, this.target);
-    }
-  };
-
-  EndlessScroll.prototype.shouldBeFiring = function() {
-    this.calculateScrollableCanvas();
-    return this.isScrollable && (this.options.fireOnce === false || (this.options.fireOnce === true && this.fired !== true));
-  };
-
-  EndlessScroll.prototype.resetFireSequenceWhenNecessary = function() {
-    if (this.options.resetCounter.apply(this.target) === true) {
-      return this.fireSequence = 0;
-    }
-  };
-
-  EndlessScroll.prototype.acknowledgeFiring = function() {
-    this.fired = true;
-    this.fireSequence++;
-    switch (this.scrollDirection) {
-      case 'next':
-        return this.pageSequence = this.nextSequence++;
-      case 'prev':
-        return this.pageSequence = this.prevSequence--;
-    }
-  };
-
-  EndlessScroll.prototype.insertContent = function(content) {
-    switch (this.scrollDirection) {
-      case 'next':
-        return $(this.options.insertAfter).after(content);
-      case 'prev':
-        return $(this.options.insertBefore).before(content);
-    }
-  };
-
-  EndlessScroll.prototype.insertLoader = function() {
-    return this.insertContent("<div class=\"endless_scroll_loader_" + this.targetId + "      endless_scroll_loader\">" + this.options.loader + "</div>");
-  };
-
-  EndlessScroll.prototype.removeLoader = function() {
-    return $('.endless_scroll_loader_' + this.targetId).fadeOut(function() {
-      return $(this).remove();
-    });
-  };
-
-  EndlessScroll.prototype.hasContent = function() {
-    if (typeof this.options.content === 'function') {
-      this.content = this.options.content.apply(this.target, [this.fireSequence, this.pageSequence, this.scrollDirection]);
-    } else {
-      this.content = this.options.content;
-    }
-    return this.content !== false;
-  };
-
-  EndlessScroll.prototype.showContent = function() {
-    $('#endless_scroll_content_current').removeAttr('id');
-    return this.insertContent("<div id=\"endless_scroll_content_current\"      class=\"endless_scroll_content\" data-page=\"" + this.pageSequence + "\">" + this.content + "</div>");
-  };
-
-  EndlessScroll.prototype.fireCallback = function() {
-    return this.options.callback.apply(this.target, [this.fireSequence, this.pageSequence, this.scrollDirection]);
-  };
-
-  EndlessScroll.prototype.cleanUpPagesWhenNecessary = function() {
-    var pageToRemove;
-    if (!(this.options.pagesToKeep >= 1)) {
-      return;
-    }
-    switch (this.scrollDirection) {
-      case 'next':
-        this.pagesStack.push(this.pageSequence);
-        break;
-      case 'prev':
-        this.pagesStack.unshift(this.pageSequence);
-    }
-    if (this.pagesStack.length > this.options.pagesToKeep) {
-      switch (this.scrollDirection) {
-        case 'next':
-          pageToRemove = this.prevSequence = this.pagesStack.shift();
-          break;
-        case 'prev':
-          pageToRemove = this.nextSequence = this.pagesStack.pop();
-      }
-    }
-    this.removePage(pageToRemove);
-    return this.calculateScrollableCanvas();
-  };
-
-  EndlessScroll.prototype.removePage = function(page) {
-    return $(".endless_scroll_content[data-page='" + page + "']", this.target).remove();
-  };
-
-  EndlessScroll.prototype.delayFiringWhenNecessary = function() {
-    var _this = this;
-    if (this.options.fireDelay > 0) {
-      $('body').after('<div id="endless_scroll_marker"></div>');
-      return $('#endless_scroll_marker').fadeTo(this.options.fireDelay, 1, function() {
-        $('#endless_scroll_marker').remove();
-        return _this.fired = false;
-      });
-    } else {
-      return this.fired = false;
-    }
-  };
-
-  return EndlessScroll;
-
-})();
-
-(function($) {
-  return $.fn.endlessScroll = function(options) {
-    return new EndlessScroll(this, options).run();
-  };
-})(jQuery);
diff --git a/src/collective/cover/static/js/vendor/jss.min.js b/src/collective/cover/static/js/vendor/jss.min.js
deleted file mode 100644
index 29bed502a..000000000
--- a/src/collective/cover/static/js/vendor/jss.min.js
+++ /dev/null
@@ -1 +0,0 @@
-var jss=function(){function e(e){for(var t=e.cssRules||e.rules||[],r={},n=0;n<t.length;n++){var s=u(t[n].selectorText);r[s]||(r[s]=[]),r[s].push({sheet:e,index:n,style:t[n].style})}return r}function t(e,t){var r=e.cssRules||e.rules||[],n=[];t=t.toLowerCase();for(var s=0;s<r.length;s++){var u=r[s].selectorText;!u||u!=t&&u!=f(t)&&u!=c(t)||n.push({sheet:e,index:s,style:r[s].style})}return n}function r(e,t){var r=e.cssRules||e.rules||[],u=r.length,i=s(e,t,r,u);return i||n(e,t,u),{sheet:e,index:u,style:r[u].style}}function n(e,t,r){e.insertRule?e.insertRule(t+" { }",r):e.addRule(t,null,r)}function s(e,t,r,s){var o,h;if(x.exec(t))o=t,h=i(t);else{if(!S.exec(t))return!1;o=u(t),h=t}return p||(n(e,o,s),r.length<=s&&(p=!0)),p&&n(e,h,s),!0}function u(e){return e.replace(S,function(e,t,r,n){return t+"::"+n})}function i(e){return e.replace(x,function(e,t,r){return":"+r})}function o(e){var t=e.sheet;t.deleteRule?t.deleteRule(e.index):t.removeRule&&t.removeRule(e.index)}function h(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r]);return e}function l(e){for(var t={},r=0;r<e.length;r++)h(t,a(e[r].style));return t}function a(e){for(var t={},r=0;r<e.length;r++)t[e[r]]=e[v(e[r])];return t}function f(e){for(var t="",r=0;null!=(match=y.exec(e))&&""!==match[0];)t+=e.substring(r,match.index),t+=e.substr(match.index+match[1].length,match[2].length),t+=e.substr(match.index,match[1].length),r=match.index+match[0].length;return t+=e.substr(r)}function c(e){return x.exec(e)?i(e):e}function d(e,t){for(var r in t){var n=t[r],s=n.indexOf(" !important");e.style.removeProperty(r),s>0?e.style.setProperty(r,n.substr(0,s),"important"):e.style.setProperty(r,n)}}function v(e){return e.replace(/-([a-z])/g,function(e,t){return t.toUpperCase()})}function m(e){var t={};for(var r in e)t[g(r)]=e[r];return t}function g(e){return e.replace(/([A-Z])/g,function(e,t){return"-"+t.toLowerCase()})}var p,y=/((?:\.|#)[^\.\s#]+)((?:\.|#)[^\.\s#]+)/g,x=/(::)(before|after|first-line|first-letter|selection)/,S=/([^:])(:)(before|after|first-line|first-letter|selection)/,R=function(e){this.doc=e,this.head=this.doc.head||this.doc.getElementsByTagName("head")[0],this.sheets=this.doc.styleSheets||[]};R.prototype={get:function(r){if(!this.defaultSheet)return{};if(r)return l(t(this.defaultSheet,r));var n=e(this.defaultSheet);for(r in n)n[r]=l(n[r]);return n},getAll:function(e){for(var r={},n=0;n<this.sheets.length;n++)h(r,l(t(this.sheets[n],e)));return r},set:function(e,n){this.defaultSheet||(this.defaultSheet=this._createSheet()),n=m(n);var s=t(this.defaultSheet,e);s.length||(s=[r(this.defaultSheet,e)]);for(var u=0;u<s.length;u++)d(s[u],n)},remove:function(e){if(this.defaultSheet){if(!e)return this._removeSheet(this.defaultSheet),void delete this.defaultSheet;for(var r=t(this.defaultSheet,e),n=0;n<r.length;n++)o(r[n]);return r.length}},_createSheet:function(){var e=this.doc.createElement("style");return e.type="text/css",e.rel="stylesheet",this.head.appendChild(e),e.sheet},_removeSheet:function(e){var t=e.ownerNode;t.parentNode.removeChild(t)}};var b=new R(document);return b.forDocument=function(e){return new R(e)},b}();"undefined"!=typeof module&&module.exports&&(module.exports=jss);
\ No newline at end of file
diff --git a/src/collective/cover/tests/test_resources_viewlet.py b/src/collective/cover/tests/test_resources_viewlet.py
new file mode 100644
index 000000000..31cf28e51
--- /dev/null
+++ b/src/collective/cover/tests/test_resources_viewlet.py
@@ -0,0 +1,49 @@
+# -*- coding: utf-8 -*-
+from collective.cover.testing import INTEGRATION_TESTING
+from lxml import etree  # nosec
+from plone import api
+from Products.Five.browser import BrowserView
+from zope.component import getMultiAdapter
+from zope.viewlet.interfaces import IViewletManager
+
+import unittest
+
+
+class ResourcesViewletTestCase(unittest.TestCase):
+
+    layer = INTEGRATION_TESTING
+
+    def setUp(self):
+        self.portal = self.layer['portal']
+        self.request = self.layer['request']
+
+        with api.env.adopt_roles(['Manager']):
+            self.cover = api.content.create(
+                self.portal, 'collective.cover.content', 'c1')
+
+        self.viewlet = self.get_viewlet(self.cover)
+
+    def get_viewlet_manager(self, context, name='plone.htmlhead'):
+        request = self.request
+        view = BrowserView(context, request)
+        manager = getMultiAdapter(
+            (context, request, view), IViewletManager, name)
+        return manager
+
+    def get_viewlet(self, context, name='collective.cover.resources'):
+        manager = self.get_viewlet_manager(context)
+        manager.update()
+        viewlet = [v for v in manager.viewlets if v.__name__ == name]
+        assert len(viewlet) == 1  # nosec
+        return viewlet[0]
+
+    def test_viewlet(self):
+        html = etree.HTML(self.viewlet())
+        self.assertIn('defer', html.xpath('//script')[0].attrib)
+        # script name must include the hash of latest git commit
+        regexp = r'cover-[\da-f]{7}\.js$'
+        self.assertRegexpMatches(
+            html.xpath('//script')[0].attrib['src'], regexp)
+        regexp = r'cover-[\da-f]{7}\.css$'
+        self.assertRegexpMatches(
+            html.xpath('//link')[0].attrib['href'], regexp)
diff --git a/src/collective/cover/tests/test_setup.py b/src/collective/cover/tests/test_setup.py
index b607b4e2b..eaef78099 100644
--- a/src/collective/cover/tests/test_setup.py
+++ b/src/collective/cover/tests/test_setup.py
@@ -9,18 +9,9 @@
 
 
 JS = [
-    '++resource++collective.cover/js/contentchooser.js',
-    '++resource++collective.cover/js/layout_edit.js',
-    '++resource++collective.cover/js/main.js',
-    '++resource++collective.cover/js/vendor/jquery.endless-scroll.js',
     '++resource++collective.js.bootstrap/js/bootstrap.min.js',
 ]
 
-CSS = [
-    '++resource++collective.cover/css/contentchooser.css',
-    '++resource++collective.cover/css/cover.css',
-]
-
 
 class InstallTestCase(unittest.TestCase):
 
@@ -43,14 +34,8 @@ def test_jsregistry(self):
         for id_ in JS:
             self.assertIn(id_, resource_ids, '{0} not installed'.format(id))
 
-    @unittest.skipIf(IS_PLONE_5, 'No easy way to test this under Plone 5')
-    def test_cssregistry(self):
-        resource_ids = self.portal.portal_css.getResourceIds()
-        for id_ in CSS:
-            self.assertIn(id_, resource_ids, '{0} not installed'.format(id))
-
     def test_resources_available(self):
-        resources = CSS + JS
+        resources = JS
         for id_ in resources:
             res = self.portal.restrictedTraverse(id_)
             self.assertTrue(res)
@@ -98,12 +83,6 @@ def test_jsregistry_removed(self):
         for id_ in JS:
             self.assertNotIn(id_, resource_ids, '{0} not removed'.format(id))
 
-    @unittest.skipIf(IS_PLONE_5, 'No easy way to test this under Plone 5')
-    def test_cssregistry_removed(self):
-        resource_ids = self.portal.portal_css.getResourceIds()
-        for id_ in CSS:
-            self.assertNotIn(id_, resource_ids, '{0} not removed'.format(id))
-
     @unittest.expectedFailure  # XXX: not pretty sure how to test this
     def test_versioning_policy_removed(self):
         repository = self.portal['portal_repository']
diff --git a/src/collective/cover/tests/test_upgrades.py b/src/collective/cover/tests/test_upgrades.py
index c7a154691..e1ab28276 100644
--- a/src/collective/cover/tests/test_upgrades.py
+++ b/src/collective/cover/tests/test_upgrades.py
@@ -334,3 +334,40 @@ def test_add_remote_url_field(self):
             'Found 2 objects in the catalog',
             '/plone/bar ("test"): remote_url=http://example.org/',
         )
+
+
+class Upgrade23to24TestCase(UpgradeTestCaseBase):
+
+    def setUp(self):
+        UpgradeTestCaseBase.setUp(self, u'23', u'24')
+
+    def test_registrations(self):
+        version = self.setup.getLastVersionForProfile(self.profile_id)[0]
+        self.assertGreaterEqual(int(version), int(self.to_version))
+        self.assertEqual(self._how_many_upgrades_to_do(), 3)
+
+    def test_deprecate_resource_registries(self):
+        title = u'Deprecate resource registries'
+        step = self._get_upgrade_step(title)
+        self.assertIsNotNone(step)
+
+        # simulate state on previous version
+        from collective.cover.upgrades.v24 import JS
+        from collective.cover.upgrades.v24 import CSS
+
+        js_tool = api.portal.get_tool('portal_javascripts')
+        for js in JS:
+            js_tool.registerResource(id=js)
+            self.assertIn(js, js_tool.getResourceIds())
+
+        css_tool = api.portal.get_tool('portal_css')
+        for css in CSS:
+            css_tool.registerResource(id=css)
+            self.assertIn(css, css_tool.getResourceIds())
+
+        # run the upgrade step to validate the update
+        self._do_upgrade_step(step)
+        for js in JS:
+            self.assertNotIn(js, js_tool.getResourceIds())
+        for css in CSS:
+            self.assertNotIn(css, css_tool.getResourceIds())
diff --git a/src/collective/cover/tiles/templates/carousel.pt b/src/collective/cover/tiles/templates/carousel.pt
index 4098205f2..c108fce43 100644
--- a/src/collective/cover/tiles/templates/carousel.pt
+++ b/src/collective/cover/tiles/templates/carousel.pt
@@ -6,7 +6,7 @@
 
 <head>
   <link rel="stylesheet" type="text/css"
-      tal:attributes="href string:${context/@@plone_portal_state/portal_url}/++resource++collective.cover/css/galleria.cover_theme.css" />
+      tal:attributes="href string:${context/@@plone_portal_state/portal_url}/++resource++collective.cover/galleria/theme.css" />
 </head>
 
 <body tal:define="is_empty view/is_empty">
diff --git a/src/collective/cover/upgrades/configure.zcml b/src/collective/cover/upgrades/configure.zcml
index b8bc8540c..1fe7530f8 100644
--- a/src/collective/cover/upgrades/configure.zcml
+++ b/src/collective/cover/upgrades/configure.zcml
@@ -9,4 +9,5 @@
   <include package=".v21" />
   <include package=".v22" />
   <include package=".v23" />
+  <include package=".v24" />
 </configure>
diff --git a/src/collective/cover/upgrades/v24/__init__.py b/src/collective/cover/upgrades/v24/__init__.py
new file mode 100644
index 000000000..e63c6fb60
--- /dev/null
+++ b/src/collective/cover/upgrades/v24/__init__.py
@@ -0,0 +1,32 @@
+# -*- coding: utf-8 -*-
+from collective.cover.logger import logger
+from plone import api
+
+
+JS = [
+    '++resource++collective.cover/js/contentchooser.js',
+    '++resource++collective.cover/js/vendor/jquery.endless-scroll.js',
+    '++resource++collective.cover/js/layout_edit.js',
+    '++resource++collective.cover/js/main.js',
+]
+CSS = [
+    '++resource++collective.cover/css/contentchooser.css',
+    '++resource++collective.cover/css/cover.css',
+]
+
+
+def deprecate_resource_registries(setup_tool):
+    """Deprecate resource registries."""
+    js_tool = api.portal.get_tool('portal_javascripts')
+    for js in JS:
+        if js in js_tool.getResourceIds():
+            js_tool.unregisterResource(id=js)
+        assert js not in js_tool.getResourceIds()  # nosec
+
+    css_tool = api.portal.get_tool('portal_css')
+    for css in CSS:
+        if css in css_tool.getResourceIds():
+            css_tool.unregisterResource(id=css)
+        assert css not in css_tool.getResourceIds()  # nosec
+
+    logger.info('Static resources successfully removed from registries')
diff --git a/src/collective/cover/upgrades/v24/configure.zcml b/src/collective/cover/upgrades/v24/configure.zcml
new file mode 100644
index 000000000..5aa52f510
--- /dev/null
+++ b/src/collective/cover/upgrades/v24/configure.zcml
@@ -0,0 +1,28 @@
+<configure
+    xmlns="http://namespaces.zope.org/zope"
+    xmlns:genericsetup="http://namespaces.zope.org/genericsetup">
+
+  <genericsetup:upgradeSteps
+      source="23"
+      destination="24"
+      profile="collective.cover:default">
+
+    <genericsetup:upgradeStep
+        title="Deprecate resource registries"
+        description="Remove static resources from registries; use a viewlet instead."
+        handler=".deprecate_resource_registries"
+        />
+
+    <genericsetup:upgradeStep
+        title="Cook CSS resources"
+        handler="..cook_css_resources"
+        />
+
+    <genericsetup:upgradeStep
+        title="Cook JS resources"
+        handler="..cook_javascript_resources"
+        />
+
+  </genericsetup:upgradeSteps>
+
+</configure>
diff --git a/src/collective/cover/widgets/selectpreview.py b/src/collective/cover/widgets/selectpreview.py
index 8a16f89d2..7f7d1597a 100644
--- a/src/collective/cover/widgets/selectpreview.py
+++ b/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:
diff --git a/src/collective/cover/widgets/selectpreview_input.pt b/src/collective/cover/widgets/selectpreview_input.pt
index fec812405..da9cd38a8 100644
--- a/src/collective/cover/widgets/selectpreview_input.pt
+++ b/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;
diff --git a/webpack/.gitignore b/webpack/.gitignore
new file mode 100644
index 000000000..9aa4a8ded
--- /dev/null
+++ b/webpack/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+yarn.lock
+npm-debug.log
+app/img/sprite.png
+app/scss/_sprite.scss
diff --git a/webpack/app/cover.js b/webpack/app/cover.js
new file mode 100644
index 000000000..a3db8f8a5
--- /dev/null
+++ b/webpack/app/cover.js
@@ -0,0 +1,43 @@
+import AddView from './js/add.js';
+import ComposeView from './js/compose.js';
+import LayoutView from './js/layout.js';
+
+import CalendarTile from './js/tiles/calendar.js';
+import CarouselTile from './js/tiles/carousel.js';
+
+
+// https://hacks.mozilla.org/2015/04/es6-in-depth-iterators-and-the-for-of-loop/
+jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
+
+
+$(() => {
+  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 ($('.portaltype-collective-cover-content.template-layoutedit')[0] !== undefined) {
+    new LayoutView();
+  }
+
+  for (let tile of $('.cover-carousel-tile')) {
+    new CarouselTile(tile);
+  }
+  $('.tile[data-tile-type=collective\\.cover\\.carousel]').on('change', function() {
+    new CarouselTile(this);
+  });
+  if ($('.cover-calendar-tile')[0] !== undefined) {
+    new CalendarTile();
+  }
+});
+
+
+export default {
+  ComposeView,
+  AddView,
+  LayoutView,
+  CalendarTile,
+  CarouselTile,
+}
diff --git a/webpack/app/cover.scss b/webpack/app/cover.scss
new file mode 100644
index 000000000..b0ae49e69
--- /dev/null
+++ b/webpack/app/cover.scss
@@ -0,0 +1,3 @@
+@import 'scss/cover';
+@import 'scss/contentchooser';
+@import 'scss/layout';
diff --git a/src/collective/cover/static/css/galleria.cover_theme.css b/webpack/app/galleria/theme.css
similarity index 100%
rename from src/collective/cover/static/css/galleria.cover_theme.css
rename to webpack/app/galleria/theme.css
diff --git a/src/collective/cover/static/js/galleria.cover_theme.js b/webpack/app/galleria/theme.js
similarity index 98%
rename from src/collective/cover/static/js/galleria.cover_theme.js
rename to webpack/app/galleria/theme.js
index 8b186524c..8a6caafb1 100644
--- a/src/collective/cover/static/js/galleria.cover_theme.js
+++ b/webpack/app/galleria/theme.js
@@ -19,7 +19,7 @@ var rm_button = function(data) {
   Galleria.addTheme({
     name: 'cover_theme',
     author: 'Simples',
-    css: '++resource++collective.cover/css/galleria.cover_theme.css',
+    css: '++resource++collective.cover/galleria/theme.css',
     defaults: {
       transition: 'slide',
       transition_speed: 500,
diff --git a/src/collective/cover/static/img/arrow-left.gif b/webpack/app/img/arrow-left.gif
similarity index 100%
rename from src/collective/cover/static/img/arrow-left.gif
rename to webpack/app/img/arrow-left.gif
diff --git a/src/collective/cover/static/img/arrow-right.gif b/webpack/app/img/arrow-right.gif
similarity index 100%
rename from src/collective/cover/static/img/arrow-right.gif
rename to webpack/app/img/arrow-right.gif
diff --git a/src/collective/cover/static/img/columns.png b/webpack/app/img/columns.png
similarity index 100%
rename from src/collective/cover/static/img/columns.png
rename to webpack/app/img/columns.png
diff --git a/src/collective/cover/static/img/conf.png b/webpack/app/img/conf.png
similarity index 100%
rename from src/collective/cover/static/img/conf.png
rename to webpack/app/img/conf.png
diff --git a/src/collective/cover/static/img/dot.png b/webpack/app/img/dot.png
similarity index 100%
rename from src/collective/cover/static/img/dot.png
rename to webpack/app/img/dot.png
diff --git a/src/collective/cover/static/img/drophere.png b/webpack/app/img/drophere.png
similarity index 100%
rename from src/collective/cover/static/img/drophere.png
rename to webpack/app/img/drophere.png
diff --git a/src/collective/cover/static/img/frontpage_icon.png b/webpack/app/img/frontpage_icon.png
similarity index 100%
rename from src/collective/cover/static/img/frontpage_icon.png
rename to webpack/app/img/frontpage_icon.png
diff --git a/src/collective/cover/static/img/move.png b/webpack/app/img/move.png
similarity index 100%
rename from src/collective/cover/static/img/move.png
rename to webpack/app/img/move.png
diff --git a/webpack/app/img/pb_close.png b/webpack/app/img/pb_close.png
new file mode 100644
index 0000000000000000000000000000000000000000..4de4396d4a09677774f79289de2a09511baeea22
GIT binary patch
literal 1910
zcmV-+2Z{KJP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00009a7bBm000XU
z000XU0RWnu7ytkO1ZP1_K>z^Q>-8KIssI20AY({UO#lFGm;eBCjsO7iaR2~=Yybd*
zy8r;x$N&H_>;M26yq<`~KL7v*>`6pHRCwBAWWWy?p_swJ!GY=X=g*8ke*9qk`ST}Z
zdU`qw7Z(@fv}x0Rf#f+jIR5kU^8P<?;J`nq-v3aH6#xVf3myxZpqN=*U7b}!LxU4Y
za{(=8dG_qte`aQ8K^7JkW}xNIbaZqW<mKi6KYaM`=hdrMzrTL{`VUawUm*Sm#TX6%
z2p~ormNJ8|sHiBbp`js{x3{;LuCA^e5Zm+f^V_kqvRWW(`19w_1z>2LK7aoF=BZPs
zUOIK^)MsF*`~o`QH`D=t(JcoEAauk84FygG1qFf7&``O#bLZLs4PE;m4ZL{q;_rh8
z5B{QyfBg7y1u$e3few}u6cpqKnFTeI3E3im07CaENCB6OjEqoBOpMCLjT`;`{{8y^
zWZ<t~zy8gfIrEpBo7*>_n$O7C)YSBAZ*T9f@87@wgQ~r-ckkXvV`F1EU<e6<%!HZ^
z4`F}+LbsHYkB?8t-Q8Vf)v8s2Kr?=V4BEMK=O17kenGbo9Rt(B*E46%{DJu%s4p5Q
zrU12^6WMZr0D>V<oU#Kkzn-3+Vpms}2Qc0qf;7*cKmQjnA$=xfDGY<uwzjtZgjqg)
z`t(34DJfZy*-$$`b}<435X`r%K+Gc|A|jQQm1Xnp-McL?pORuJG6rQckQu=AaSX`U
z0%8e}9Z<WN00Ib>pg2H5Y-eYuxnRM9M39EBU%&nZ#x+Xt8W|aVwYIj#h+{D^u`kKV
z$v=Qu3ogdS#`gK?)2F{dW*t0uupVfZDo|VqWEaTS009KEm>Z}`3Ydy*?%%(^5TtnW
z<jKE~4F~4cudv{2Y;61q6IW7F`U<oFoTxyF4_QxITG|hg_?tIx_5=BPKr9LMH48uh
z!QvMf|NKf`US1yGzJ0p@Qfy&if#Nez;sVP3N48v5RTXY22y}OM|3ua!EG+y5m{!1Y
z0s;bdKruxi764*4fB=G(Uc%zy;yV8R{!t)BpFVy1i!I)O1<5yL%Yo|Pmabd3?l-pd
zaPi_ra6&6DFV6)QsTx2r5m0ag1P~~g8F_ekn1Kn46IfD#1Q~#Z1J+Vz>(;G*fzk0D
zSSo?}K!d<pWBvN|e}LjYfO#H653m>o)4&2r=HI`6@Kg;DK;Y5@D8S6f$jA!R2#R=y
z-@kw3EZXkgz5D;mmoF#|yK?2qKWvtQ08AWYDKNn@LoH?k2q3V<z~Ezi_39PFojZ5F
zgZL5>5?BoZ76wef+J_SucZ|q}*4Eat0ppwvn;u{u2G>@=;`K8pCnvlB0SF)lXugsH
z7X0Rlii*j=;_ekFPSCRwF!6l>MgdBk`uh5!#Cc9m&JXm$1Xy;1vlOsk$^_bB1{9YD
z<syIpVnV7r{{geqpU00M-v9{&2M426nVOoKOuz()5~rItZwALX5P;PH%K>I&J<iU~
z%)s)2<>kwlS1w(;^Z^)!@LCEWfM7lr1G>gQO-(Jludi<owD$RpTp+;mCCFFksTWj9
zfU*~QC>=U<2%PtU4%`gn2LZ7@5Q~G#ZGZrRXD5)S*xA{=fSSvIdGkEBd`SvUNJ#h&
zEi#`0(?mH?%mZWxEIR=N5WD~ZWo}@L!d6H~C^;o1WhN}%Kn9R%DX3Tl1uIBDuwk$s
zD3%Dsw#WqtKmai#w>W@Fo)wt5IG#Lt!pzOh{RtR^ngIa;EI|DX!1DGl0}&uLHkM`0
znl<devYP4Gv16x!X=N8s_z4id0^*NA3`&5%0RjkKNk9v56;K)h#$i0L_0R$=uQ$Sc
ze&fcCAK~HQ-_he8hCvO4<HwJ~llal2N6!Jpn}IkEWG2*XcqIW4K#WL@0Cs2r4vGV5
zpyl$w5=|*GGE%dqrbbg*S{hWlFaS%fe>ZR5`~$4;!Ko9NO&EZQ5}bNLd|;LO3|NQX
zDk&*B3FO`b6<$F66o}sdF(~nY(#>Ch0AfUH2(Un1!w0oo5@@*$Fu}<J^Q!cO2@}+O
ze0)Tdm6g@81@WUtkM8Z;x9=@5<zEHHFDPgqLxcD^)Y4DTU<S27{{aLLBU;On6>2#z
zG+4x;SOQq;hynAf5U?N-FflO^1=e1m<_rU{W%&_U5xfEBgts6ML*w!V5Wj@tchKm7
z#Vt550|XEwmS!y*Qm}(kyC5{X2|-gN4>0wE+fTqMj{(U315A|Pffy8wAD|Y29Pu8S
zm|(&C3%QvK5I~Grnzu|)pR++TIyW=~c%hErLTWoPKn(*K{0(XeEWv#R;_pxke<L;S
z!2lqD81eKXSfCgd0x-;m)=vHhjkjM=2mD0x;U8F>qBrOP0*Db$8yndX$XyynEc#&m
wB;+m&vSk?cJ3s(2G7t}lRr{Y9MF0T?00rpcocj25u>b%707*qoM6N<$g7<z!%K!iX

literal 0
HcmV?d00001

diff --git a/src/collective/cover/static/img/remove.png b/webpack/app/img/remove.png
similarity index 100%
rename from src/collective/cover/static/img/remove.png
rename to webpack/app/img/remove.png
diff --git a/src/collective/cover/static/img/resize-hor.png b/webpack/app/img/resize-hor.png
similarity index 100%
rename from src/collective/cover/static/img/resize-hor.png
rename to webpack/app/img/resize-hor.png
diff --git a/src/collective/cover/static/img/rows.png b/webpack/app/img/rows.png
similarity index 100%
rename from src/collective/cover/static/img/rows.png
rename to webpack/app/img/rows.png
diff --git a/src/collective/cover/static/img/spinner.gif b/webpack/app/img/spinner.gif
similarity index 100%
rename from src/collective/cover/static/img/spinner.gif
rename to webpack/app/img/spinner.gif
diff --git a/src/collective/cover/static/img/tile-banner.png b/webpack/app/img/tile-banner.png
similarity index 100%
rename from src/collective/cover/static/img/tile-banner.png
rename to webpack/app/img/tile-banner.png
diff --git a/src/collective/cover/static/img/tile-basic.png b/webpack/app/img/tile-basic.png
similarity index 100%
rename from src/collective/cover/static/img/tile-basic.png
rename to webpack/app/img/tile-basic.png
diff --git a/src/collective/cover/static/img/tile-calendar.png b/webpack/app/img/tile-calendar.png
similarity index 100%
rename from src/collective/cover/static/img/tile-calendar.png
rename to webpack/app/img/tile-calendar.png
diff --git a/src/collective/cover/static/img/tile-carousel.png b/webpack/app/img/tile-carousel.png
similarity index 100%
rename from src/collective/cover/static/img/tile-carousel.png
rename to webpack/app/img/tile-carousel.png
diff --git a/src/collective/cover/static/img/tile-collection.png b/webpack/app/img/tile-collection.png
similarity index 100%
rename from src/collective/cover/static/img/tile-collection.png
rename to webpack/app/img/tile-collection.png
diff --git a/src/collective/cover/static/img/tile-contentbody.png b/webpack/app/img/tile-contentbody.png
similarity index 100%
rename from src/collective/cover/static/img/tile-contentbody.png
rename to webpack/app/img/tile-contentbody.png
diff --git a/src/collective/cover/static/img/tile-embed.png b/webpack/app/img/tile-embed.png
similarity index 100%
rename from src/collective/cover/static/img/tile-embed.png
rename to webpack/app/img/tile-embed.png
diff --git a/src/collective/cover/static/img/tile-file.png b/webpack/app/img/tile-file.png
similarity index 100%
rename from src/collective/cover/static/img/tile-file.png
rename to webpack/app/img/tile-file.png
diff --git a/src/collective/cover/static/img/tile-generic.png b/webpack/app/img/tile-generic.png
similarity index 100%
rename from src/collective/cover/static/img/tile-generic.png
rename to webpack/app/img/tile-generic.png
diff --git a/src/collective/cover/static/img/tile-list.png b/webpack/app/img/tile-list.png
similarity index 100%
rename from src/collective/cover/static/img/tile-list.png
rename to webpack/app/img/tile-list.png
diff --git a/src/collective/cover/static/img/tile-pfg.png b/webpack/app/img/tile-pfg.png
similarity index 100%
rename from src/collective/cover/static/img/tile-pfg.png
rename to webpack/app/img/tile-pfg.png
diff --git a/src/collective/cover/static/img/tile-richtext.png b/webpack/app/img/tile-richtext.png
similarity index 100%
rename from src/collective/cover/static/img/tile-richtext.png
rename to webpack/app/img/tile-richtext.png
diff --git a/src/collective/cover/static/img/tiles.png b/webpack/app/img/tiles.png
similarity index 100%
rename from src/collective/cover/static/img/tiles.png
rename to webpack/app/img/tiles.png
diff --git a/src/collective/cover/static/img/visibility.png b/webpack/app/img/visibility.png
similarity index 100%
rename from src/collective/cover/static/img/visibility.png
rename to webpack/app/img/visibility.png
diff --git a/webpack/app/js/add.js b/webpack/app/js/add.js
new file mode 100644
index 000000000..8529a0842
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/webpack/app/js/compose.js b/webpack/app/js/compose.js
new file mode 100644
index 000000000..bc4f3c776
--- /dev/null
+++ b/webpack/app/js/compose.js
@@ -0,0 +1,218 @@
+import ContentChooser from './contentchooser.js';
+
+
+export default class ComposeView {
+  constructor() {
+    this.bindEvents();
+    this.update();
+    this.prepareRichText();
+    new ContentChooser(this);
+
+    if (typeof(plone) !== 'undefined') {
+      $(window).unload(plone.UnlockHandler.execute);
+    }
+  }
+  bindEvents() {
+    $(document).on('mouseover', '.sortable-tile', this.onMouseOverSortable.bind(this));
+  }
+  update() {
+    $('#content .tile').each(function() {
+      if ($(this).find('.loading-mask')[0] === undefined) {
+        $(this).append('<div class="loading-mask"/>');
+      }
+    });
+    this.removeObjFromTile();
+  }
+  removeObjFromTile() {
+    $('.tile-remove-item').remove();
+    $('.sortable-tile').each(function() {
+      let child = $(this).children('*[data-content-uuid]');
+      child.append('<i class="tile-remove-item"><span class="text">remove</span></i>');
+    });
+    $('.tile-remove-item').unbind('click');
+    $('.tile-remove-item').on('click', this.onRemoveClick.bind(this));
+  }
+  editSortable() {
+    //carousel
+    let $carousel = $('div[data-carousel="carousel-sort"]');
+    if ($carousel[0] !== undefined) {
+      let serial_sort = function($textarea, sortable) {
+        $textarea.empty();
+        sortable.find('[data-content-uuid]').each(function(e) {
+          $textarea.append($(this).attr('data-content-uuid') + "\n");
+        });
+      };
+      let $textarea = $carousel.find('>textarea');
+      let $sortable = $carousel.find('.sortable');
+      $textarea.hide();
+
+      $sortable.sortable({
+        stop: function(event, ui) {
+          serial_sort($textarea, $sortable);
+        }
+      });
+
+      //create delete buttons
+      $sortable.find('[data-content-uuid]')
+               .append("<i class='tile-remove-item' data-content-uuid=''><span class='text'>remove</span></i>");
+      $sortable.find('[data-content-uuid]')
+               .find('.tile-remove-item')
+               .click(function(e) {
+        $(this).parent('.textline-sortable-element').remove();
+        serial_sort($textarea, $sortable);
+      });
+    }
+  }
+  prepareRichText() {
+    let self = this;
+    if ($.fn.prepOverlay !== undefined) {
+      $('a.edit-tile-link').prepOverlay({
+        subtype: 'ajax',
+        filter: '.tile-content',
+        formselector: '#edit_tile',
+        closeselector: '[name="buttons.cancel"]',
+        noform: 'close',
+        beforepost: function(return_value, data_parent) {
+          // Before post data, populate the textarea (textarea.mce_editable) with the contents of  iframe created by TinyMCE call.
+          // TODO: This does not solves, if we have more of a textarea widget in tiles. What's the solution?
+          let iframes = jQuery('#edit_tile iframe');
+          let mcs = {};
+
+          iframes.each(function(index) {
+            let iframe = $(this);
+            let idFrame = iframe.attr('id');
+            let idFrameLen = idFrame.length;
+
+            if (idFrameLen > 4 && idFrame.slice(idFrameLen - 4, idFrameLen) == "_ifr") {
+              mcs[idFrame.slice(0, -4)] = iframe;
+            }
+          });
+
+          let newlist = $.map(data_parent, function(value, i) {
+            if (data_parent[i].type == "textarea" && mcs[data_parent[i].name] !== undefined) {
+              value.value = mcs[value.name].contents().find('body').html();
+            }
+            return value;
+          });
+        },
+        afterpost: function(return_value, data_parent) {
+          let tileId = data_parent.data('pbo').src.split('/').pop();
+          let tile = $('#' + tileId);
+          tile.html(return_value.children());
+          tile.trigger('change');
+        },
+        config: {
+          onLoad: function() {
+            // With plone.app.widgets and Plone 4.3
+            if (typeof __non_webpack_require !== 'undefined' && __non_webpack_require.defined('pat-registry')) {
+              // Remove old editors references to work with ajax
+              if (typeof tinyMCE !== 'undefined' && tinyMCE !== null) {
+                if (tinyMCE.EditorManager != null) {
+                  tinyMCE.EditorManager.editors = [];
+                }
+              }
+              // Add tinymce
+              $('.overlay textarea.mce_editable').addClass('pat-tinymce');
+              __non_webpack_require('pat-registry').scan($('.overlay'), ['tinymce']);
+              // Wire save buttom to save tinymce
+              $( '.overlay input#buttons-save').on('click', function() {
+                tinyMCE.triggerSave();
+              });
+              // Hack to make overlay work over overlay
+              $('.overlay').on('mouseover', function() {
+                $('div.plone-modal-wrapper').css('z-index', '10050');
+              });
+            } else if (typeof initTinyMCE !== 'undefined') { // Plone 4.3
+              // Remove old editors references to work with ajax
+              if (typeof tinyMCE !== 'undefined' && tinyMCE !== null) {
+                if (tinyMCE.EditorManager != null) {
+                  tinyMCE.EditorManager.editors = [];
+                }
+              }
+              // Add tinymce
+              initTinyMCE(this.getOverlay());
+            }
+            // Remove unecessary link, use HTML button of EditorManager
+            $('div.suppressVisualEditor').remove();
+            self.editSortable();
+          }
+        }
+      });
+    } else {  // Plone 5
+      $('a.edit-tile-link').on('show.plone-modal.patterns', self.editSortable);
+    }
+  }
+  onMouseOverSortable(e) {
+    let $el = $(e.currentTarget);
+    if ($el.data('init')) {
+      return;
+    }
+    let onStop = function(e, ui) {
+      let $el = $(e.currentTarget);
+      let uuids = [];
+      $(e.currentTarget).children().each(function(index) {
+        if ($el.attr('data-content-uuid') !== undefined) {
+          uuids.push($el.attr('data-content-uuid'));
+        }
+      });
+      let tile = $el.closest('.tile');
+      let tile_type = tile.attr('data-tile-type');
+      let tile_id = tile.attr('id');
+      $.ajax({
+        url: '@@updatelisttilecontent',
+        context: this,
+        data: {
+          'tile-type': tile_type,
+          'tile-id': tile_id,
+          'uuids': uuids
+        },
+        success: function(info) {
+          tile.html(info);
+          tile.trigger('change');
+          this.update();
+          return false;
+        },
+        error: function(XMLHttpRequest, textStatus, errorThrown) {
+          tile.html(textStatus + ': ' + errorThrown);
+          this.update();
+          return false;
+        }
+      });
+    };
+    $el.data('init', true).sortable({
+      stop: onStop.bind(this),
+    });
+  }
+  onRemoveClick(e) {
+    e.preventDefault();
+    let $obj = $(e.currentTarget).parent();
+    uuid = $obj.attr('data-content-uuid');
+    let tile = $obj.parents('.tile');
+
+    tile.find('.loading-mask').addClass('show remove-tile');
+    let tile_type = tile.attr('data-tile-type');
+    let tile_id = tile.attr('id');
+    $.ajax({
+      url: '@@removeitemfromlisttile',
+      context: this,
+      data: {
+        'tile-type': tile_type,
+        'tile-id': tile_id,
+        'uuid': uuid
+      },
+      success: function(info) {
+        tile.html(info);
+        tile.trigger('change');
+        this.update();
+        tile.find('.loading-mask').removeClass('show remove-tile');
+        return false;
+      },
+      error: function(XMLHttpRequest, textStatus, errorThrown) {
+        tile.html(textStatus + ': ' + errorThrown);
+        this.update();
+        tile.find('.loading-mask').removeClass('show remove-tile');
+        return false;
+      }
+    });
+  }
+}
diff --git a/src/collective/cover/static/js/contentchooser.js b/webpack/app/js/contentchooser.js
similarity index 54%
rename from src/collective/cover/static/js/contentchooser.js
rename to webpack/app/js/contentchooser.js
index 177e17664..16f80bbdb 100644
--- a/src/collective/cover/static/js/contentchooser.js
+++ b/webpack/app/js/contentchooser.js
@@ -1,36 +1,304 @@
-// Plone 5 does not include global variables anymore
-var portal_url = (portal_url === undefined) ? $('body').attr('data-portal-url') : portal_url;
-var TIMEOUT = 500;
-
-var coveractions = {
-  /**
-   * Context URL to be used for all AJAX call
-   */
-  call_context: portal_url + '/',
-  current_path: document.location.href,
-
-  preInit: function() {
+import CarouselTile from './tiles/carousel.js';
+
+
+export default class ContentChooser {
+  constructor(parent) {
+    this.parent = parent;
+    this.ajaxSearchRequest = [];
+    this.timeoutIDs = [];
+    this.portal_url = window.portal_url;
+    if (this.portal_url == null) {
+      // Plone 5
+      this.portal_url = $('body').attr('data-portal-url');
+    }
+    this.timeout = 500;
+    // Context URL to be used for all AJAX call
+    this.call_context = `${this.portal_url}/`;
+    this.current_path = document.location.href;
     // If compose exists in url
     if (this.current_path.indexOf('/compose') > 0) {
       this.getFolderContents(this.call_context, '@@jsonbytype');
     }
-  },
 
-  handle_scroll: function() {
-    var $ul = $(this);
-    var last_path = $ul.attr('data-last-path');
-    var has_next = $ul.attr('data-has-next');
+    if ($('#contentchooser-content-search').length) {
+      let content_name = $('#contentchooser-content-search-compose-button').text();
+      $('#content').prepend(`<div class="btn" id="contentchooser-content-show-button">${content_name}</div>`);
+
+      $('#contentchooser-content-search').resizable({
+        maxHeight: 411,
+        minHeight: 411,
+        minWidth: 350,
+        maxWidth: 540
+      });
+    }
+    let self = this;
+    this.contentchooserMaker({
+      draggable: `#contentchooser-content-search .item-list li,
+                  .template-compose #content .tile,
+                  .template-compose #content .tile-move,
+                  .template-compose [data-tile-type=collective\\.cover\\.carousel] [data-content-uuid]`,
+      draggable_acepted: function($origin) {
+        let $target = $(this);
+        let ct = $target.data('tileValidCt');
+        let valid = $.inArray($origin.attr('data-content-type'), ct) >= 0;
+        let isDroppable = $target.attr('data-is-droppable') === 'True';
+        let origin_id = $origin.attr('id');
+        if ($origin.is('[data-tile-id]')) {
+          origin_id = $origin.attr('data-tile-id');
+        }
+        let origin_has_subitem = $origin.attr('data-has-subitem') === 'True';
+        let origin_uuid = $origin.attr('data-content-uuid');
+
+        if (!ct &&
+            origin_has_subitem ||
+            $origin.attr('data-tile-type') === $target.attr('data-tile-type') &&
+            (typeof origin_uuid !== 'undefined' ||
+             $origin.hasClass('tile-move')) &&
+            origin_id !== $target.attr('id')) {
+          return true;
+        }
+        if (!isDroppable ||
+            origin_id === $target.attr('id') ||
+            typeof origin_uuid === 'undefined') {
+          return false;
+        }
+        return valid;
+      },
+      windowId: '#contentchooser-content-search',
+      droppable: '.template-compose #content .tile',
+      dropped: function(event, ui) {
+        let $draggable = ui.draggable;  // JQuery UI copy of $origin
+        let $target = $(this);
+        let target_type = $target.attr('data-tile-type');
+        let target_id = $target.attr('id');
+        let target_has_subitem = $target.attr('data-has_subitem') === 'True';
+        let draggable_id = $draggable.attr('id');
+        if ($draggable.is('[data-tile-id]')) {
+          draggable_id = $draggable.attr('data-tile-id');
+        }
+        let $origin = $('#' + draggable_id);
+        let origin_type = $origin.attr('data-tile-type');
+        let origin_has_subitem = $origin.attr('data-has-subitem') === 'True';
+        let draggable_uuid = $draggable.attr('data-content-uuid');
+        let draggable_type = $draggable.attr('data-content-type');
+        if (target_id === draggable_id) {
+          return false;
+        }
+        $target.find('.loading-mask').addClass('show');
+        if ($draggable.hasClass('tile') || origin_has_subitem) {
+          let move_callback = function() {
+            // TODO: there are a conflict beetween sort list tile and drag and drop content that makes data keep in origin tile
+            //       we should take out the sort functionality of list tile and put it into edit overlay (like carousel tile)
+            if ($('#' + draggable_id + ' [data-content-uuid=' + draggable_uuid + ']').length > 0) {
+              $.ajax({
+                url: '@@removeitemfromlisttile',
+                data: {
+                  'tile-type': origin_type,
+                  'tile-id': draggable_id,
+                  'uuid': draggable_uuid
+                },
+                success: function(info) {
+                  $origin.html(info);
+                  $origin.find('.loading-mask').addClass('show');
+                  if (!origin_has_subitem) {
+                    $origin.removeAttr('data-content-uuid');
+                    $origin.removeAttr('data-content-type');
+                  }
+                  move_callback();
+                  return false;
+                }
+              });
+            } else {
+              $origin.find('.loading-mask').removeClass('show');
+              $target.find('.loading-mask').removeClass('show');
+              self.parent.update();
+            }
+            return false;
+          };
+          $origin.find('.loading-mask').addClass('show');
+          $.ajax({
+            url: '@@movetilecontent',
+            data: {
+              'origin-type': origin_type,
+              'origin-id': draggable_id,
+              'target-type': target_type,
+              'target-id': target_id,
+              'uuid': draggable_uuid
+            },
+            success: function(info) {
+              $target.html(info);
+              $target.find('.loading-mask').addClass('show');
+              if (!target_has_subitem) {
+                $target.attr('data-content-uuid', draggable_uuid);
+                $target.attr('data-content-type', draggable_type);
+              }
+              $.ajax({
+                url: '@@updatetile',
+                data: {
+                  'tile-id': draggable_id,
+                },
+                success: function(info) {
+                  $origin.html(info);
+                  $origin.find('.loading-mask').addClass('show');
+                  if (!origin_has_subitem) {
+                    $origin.removeAttr('data-content-uuid');
+                    $origin.removeAttr('data-content-type');
+                  }
+                  move_callback();
+                  if ($target.attr('data-tile-type') === 'collective.cover.carousel') {
+                    new CarouselTile($target);
+                  }
+                  return false;
+                },
+                error: function(XMLHttpRequest, textStatus, errorThrown) {
+                  $origin.html(textStatus + ': ' + errorThrown);
+                  $origin.find('.loading-mask').removeClass('show');
+                  return false;
+                }
+              });
+              return false;
+            },
+            error: function(XMLHttpRequest, textStatus, errorThrown) {
+              $target.html(textStatus + ': ' + errorThrown);
+              $target.find('.loading-mask').removeClass('show');
+              return false;
+            }
+          });
+        } else {
+          $.ajax({
+            url: '@@updatetilecontent',
+            data: {
+              'tile-type': target_type,
+              'tile-id': target_id,
+              'uuid': draggable_uuid
+            },
+            success: function(info) {
+              $target.html(info);
+              if (!target_has_subitem) {
+                $target.attr('data-content-uuid', draggable_uuid);
+                $target.attr('data-content-type', draggable_type);
+              }
+              $target.find('.loading-mask').removeClass('show');
+              self.parent.update();
+              if ($target.attr('data-tile-type') === 'collective.cover.carousel') {
+                new CarouselTile($target);
+              }
+              return false;
+            },
+            error: function(XMLHttpRequest, textStatus, errorThrown) {
+              $target.html(textStatus + ': ' + errorThrown);
+              $target.find('.loading-mask').removeClass('show');
+              self.parent.update();
+              return false;
+            }
+          });
+        }
+      }
+    });
+    this.bindEvents();
+  }
+  bindEvents() {
+    $('#contentchooser-content-search #content-trees .item-list').on(
+      'scroll', this.onTreeScroll.bind(this)
+    );
+    this.filterOnKeyUp();
+    $('#contentchooser-content-search #recent .item-list').on('scroll', this.onRecentScroll.bind(this));
+    $(document).on('click', '#recent .contentchooser-clear', function(e) {
+      $(e.currentTarget).prev().children('input').val('');
+      let url = $('#contentchooser-content-search-button').attr('data-url');
+      this.ajaxSearchRequest.push($.ajax({
+        url: url,
+        success: function(info) {
+          $('#contentchooser-content-search #recent .item-list').html(info);
+          $('#recent .filter-count').text('');
+          return false;
+        }
+      }));
+      return false;
+    });
+    $(document).on('click', '#content-trees .contentchooser-clear', function(e) {
+      $(e.currentTarget).prev().children('input').val('');
+      this.getFolderContents(portal_url, '@@jsonbytype');
+      return false;
+    });
+    $('#contentchooser-content-search-button').click(function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.contentSearchFilter();
+      return false;
+    }.bind(this));
+    $('#contentchooser-content-search').draggable({
+      start: function(event, ui) {
+        $(this).removeClass('right');
+      },
+      cancel: '.item-list, #contentchooser-content-search-input, #contentchooser-content-trees'
+    });
+    $('#contentchooser-content-show-button').click(function() {
+      let offset = $(this).offset();
+      $('#contentchooser-content-search').css('display', 'block');
+      $('#contentchooser-content-search').offset({
+        'top': offset.top
+      });
+    });
+
+    $('#contentchooser-content-search .close').click(function(e) {
+      e.preventDefault();
+      $('#contentchooser-content-search').css('display', 'none');
+    });
+    $(document).on('click', '#contentchooser-content-search #content-tree .item-list li', function(e) {
+      e.stopPropagation();
+      let child = $(this).children('ul');
+      if (child.is(':visible')) {
+        child.css('display', 'none');
+      } else {
+        child.css('display', 'block');
+      }
+    });
+  }
+  onTreeScroll(e) {
+    let $ul = $(e.currentTarget);
+    let last_path = $ul.attr('data-last-path');
+    let has_next = $ul.attr('data-has-next');
 
     if ((has_next === 'false') ||
       ($ul.scrollTop() + $ul.innerHeight() < $ul[0].scrollHeight)) {
       return;
     }
 
-    coveractions.getFolderContents(last_path, '@@jsonbytype', true);
-  },
-
-  send: function(o) {
-    var x, t, w = window,
+    this.getFolderContents(last_path, '@@jsonbytype', true);
+  }
+  onRecentScroll(e) {
+    let $ul = $(e.currentTarget);
+    let total_li = parseInt($ul.attr('data-total-results'), 10);
+    if (($ul.attr('data-has-next') === 'False') ||
+      ($ul.scrollTop() + $ul.innerHeight() < $ul[0].scrollHeight) ||
+      ($('li', $ul).length >= total_li)) {
+      return;
+    }
+    let url = $('#contentchooser-content-search-button').attr('data-url');
+    let queryVal = $('#contentchooser-content-search-input').val();
+    let nextpage = parseInt($ul.attr('data-nextpage'), 10);
+    let data = {
+      'q': queryVal,
+      'page': nextpage
+    };
+    $('#ajax-spinner').show();
+    this.ajaxSearchRequest.push($.ajax({
+      url: url,
+      data: data,
+      success: function(data) {
+        $('#ajax-spinner').hide();
+        let ul = $(data)[1];
+        $ul.attr('data-has-next', $(ul).attr('data-has-next'));
+        $ul.attr('data-nextpage', $(ul).attr('data-nextpage'));
+        $ul.append(ul.children);
+        return false;
+      }
+    }));
+  }
+  // XXX replace this with jquery ajax
+  send(o) {
+    let x, t, w = window,
       c = 0;
 
     // Default settings
@@ -67,7 +335,7 @@ var coveractions = {
 
       x.send(o.data);
 
-      var ready = function() {
+      let ready = function() {
         if (!o.async || x.readyState == 4 || c++ > 10000) {
           if (o.success && c < 10000 && x.status == 200) {
             o.success.call(o.success_scope, '' + x.responseText, x, o);
@@ -88,71 +356,76 @@ var coveractions = {
       // Wait for response, onReadyStateChange can not be used since it leaks memory in IE
       t = w.setTimeout(ready, 10);
     }
-  },
-
-  getAbsolutePath: function() {
-    var loc = window.location;
-    var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1);
-    return loc.href.substring(0, loc.href.length - ((loc.pathname + loc.search + loc.hash).length - pathName.length));
-  },
-
-  getFolderContents: function(path, method, scroll) {
+  }
+  getAbsolutePath() {
+    let loc = window.location;
+    let pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1);
+    return loc.href.substring(
+      0,
+      loc.href.length -
+      ((loc.pathname  +
+        loc.search    +
+        loc.hash).length -
+       pathName.length)
+    );
+  }
+  getFolderContents(path, method, scroll) {
     if (scroll === null) {
       scroll = false;
     }
     // Sends a low level Ajax request
-    var t = this,
+    let t = this,
       d = document,
       w = window,
       na = navigator,
       ua = na.userAgent;
-    var $ul = $('#content-trees .item-list');
-    var last_path = $ul.attr('data-last-path');
+    let $ul = $('#content-trees .item-list');
+    let last_path = $ul.attr('data-last-path');
     $ul.attr('data-last-path', path);
-    var has_next = $ul.attr('data-has-next');
-    var nextpage = parseInt($ul.attr('data-nextpage'), 10);
+    let has_next = $ul.attr('data-has-next');
+    let nextpage = parseInt($ul.attr('data-nextpage'), 10);
 
     if (path !== last_path) {
       $('input:text[id=contentchooser-content-trees][name=contentchooser-content-trees]').val('');
     }
     if (path === undefined) {
-      path = coveractions.call_context;
+      path = this.call_context;
     }
 
-    var data = "searchtext=" +
+    let data = 'searchtext=' +
       ($('input:text[id=contentchooser-content-trees][name=contentchooser-content-trees]').val() || '') +
-      "&rooted='False'" + "&document_base_url=" + encodeURIComponent(d.baseURI);
+      '&rooted="False"' + '&document_base_url=' + encodeURIComponent(d.baseURI);
 
     if ((has_next !== null) && has_next === 'true' && scroll === true) {
-      data = "page=" + nextpage + "&" + data;
+      data = 'page=' + nextpage + '&' + data;
     }
 
     $('#ajax-spinner').show();
 
-    coveractions.send({
+    // XXX - replace this with jquery ajax
+    this.send({
       url: path + '/' + method,
-      content_type: "application/x-www-form-urlencoded",
+      content_type: 'application/x-www-form-urlencoded',
       type: 'POST',
       data: data,
       success: function(text) {
         $('#ajax-spinner').hide();
-        var html = "";
-        var data = $.parseJSON(text);
+        let html = '';
+        let data = $.parseJSON(text);
 
-        var filter = $('input:text[id=contentchooser-content-trees][name=contentchooser-content-trees]').val();
+        let filter = $('input:text[id=contentchooser-content-trees][name=contentchooser-content-trees]').val();
         if (filter !== '') {
-          $('#content-trees .filter-count').text(" " + data.total_results + " Results");
+          $('#content-trees .filter-count').text(' ' + data.total_results + ' Results');
         } else {
-          $('#content-trees .filter-count').text("");
+          $('#content-trees .filter-count').text('');
         }
 
         $ul.attr('data-has-next', data.has_next);
         $ul.attr('data-nextpage', data.nextpage);
 
         if (data.items.length > 0) {
-          for (var i = 0; i < data.items.length; i++) {
-            //html += '<div class="' + (i % 2 == 0 ? 'even' : 'odd') + '">';
-            html += '<li data-content-type="' + data.items[i].portal_type + '" data-content-uuid="' + data.items[i].uuid + '" class="ui-draggable">';
+          for (let i = 0; i < data.items.length; i++) {
+            html += `<li data-is-folderish="${data.items[i].is_folderish}" data-content-type="${data.items[i].portal_type}" data-content-uuid="${data.items[i].uuid}" class="ui-draggable">`;
 
             if (data.items[i].is_folderish) {
               if (data.items[i].icon.length) {
@@ -161,12 +434,12 @@ var coveractions = {
               html += '<a class="' +
                 data.items[i].classicon + ' ' + data.items[i].r_state + '" ';
               html += 'title="' + data.items[i].description + '" ';
-              html += 'href="javascript:coveractions.getFolderContents(\'' + data.items[i].url + '\',\'@@jsonbytype' + '\')">';
+              html += 'href="' + data.items[i].url + '">';
               html += '<span>' + data.items[i].title + '</span>';
               html += '</a>';
             } else {
               if (data.items[i].portal_type == 'Image') {
-                html += '<img src="' + coveractions.call_context + '/image.png" border="0"/> ';
+                html += '<img src="' + this.call_context + '/image.png" border="0"/> ';
               }
               html += '<a data-ct-type="' +
                 data.items[i].portal_type + '" class="' +
@@ -182,145 +455,137 @@ var coveractions = {
           html = '';
         }
 
-        $(function() {
-          if (data.nextpage === 2) {
-            $("#content-trees > .item-list")[0].innerHTML = html;
-          } else {
-            $("#content-trees > .item-list")[0].innerHTML += html;
+        if (data.nextpage === 2) {
+          $('#content-trees > .item-list')[0].innerHTML = html;
+        } else {
+          $('#content-trees > .item-list')[0].innerHTML += html;
+        }
+        let onFolderishClick = function(e) {
+          e.preventDefault();
+          let $el = $(e.currentTarget);
+          this.getFolderContents($el.attr('href'), '@@jsonbytype');
+        };
+        $('#content-trees > .item-list > li[data-is-folderish="true"] > a').on('click', onFolderishClick.bind(this));
+
+
+        html = '';
+        for (let i = 0; i < data.path.length; i++) {
+          if (i !== 0) {
+            html += ' &rarr; ';
           }
-
-          html = "";
-          for (var i = 0; i < data.path.length; i++) {
-            if (i !== 0) {
-              html += " &rarr; ";
-            }
-            if (i == data.path.length - 1) {
-              html += data.path[i].title;
-            } else {
-              html += '<a href="javascript:coveractions.getFolderContents(\'' + data.path[i].url + '\',\'@@jsonbytype' + '\')">';
-              html += data.path[i].title;
-              html += '</a>';
-            }
+          if (i == data.path.length - 1) {
+            html += data.path[i].title;
+          } else {
+            html += '<a href="' + data.path[i].url + '">';
+            html += data.path[i].title;
+            html += '</a>';
           }
-
-          $('#content-trees #internalpath')[0].innerHTML = html;
-        });
+        }
+        $('#content-trees #internalpath')[0].innerHTML = html;
+        $('#content-trees #internalpath > a').on('click', onFolderishClick.bind(this));
       }
     });
-  },
-
-  getCurrentFolderContents: function() {
+  }
+  getCurrentFolderContents() {
     this.getFolderContents(this.current_path, '@@jsonbytype');
   }
-};
-
-(function($) {
-  var ajaxSearchRequest = [];
-  var timeoutIDs = [];
-  var handle_scroll = function() {
-    var $ul = $(this);
-    var total_li = parseInt($ul.attr('data-total-results'), 10);
-    if (($ul.attr('data-has-next') === 'False') ||
-      ($ul.scrollTop() + $ul.innerHeight() < $ul[0].scrollHeight) ||
-      ($('li', $ul).length >= total_li)) {
-      return;
-    }
-    var url = $("#contentchooser-content-search-button").attr("data-url");
-    var queryVal = $("#contentchooser-content-search-input").val();
-    var nextpage = parseInt($ul.attr('data-nextpage'), 10);
-    var data = {
-      'q': queryVal,
-      'page': nextpage
-    };
-    $('#ajax-spinner').show();
-    ajaxSearchRequest.push($.ajax({
-      url: url,
-      data: data,
-      success: function(data) {
-        $('#ajax-spinner').hide();
-        var ul = $(data)[1];
-        $ul.attr('data-has-next', $(ul).attr('data-has-next'));
-        $ul.attr('data-nextpage', $(ul).attr('data-nextpage'));
-        $ul.append(ul.children);
+  filterOnKeyUp() {
+    let timeoutIDs = [];
+    $('#contentchooser-content-search-button').css('display', 'none');
+    $('#contentchooser-content-trees').keyup(function(e) {
+      let queryVal = $(e.currentTarget).val();
+      if ((queryVal.length > 0) &&
+        (queryVal.length < 3)) {
         return false;
       }
-    }));
-  };
 
-  function contentSearchFilter(page) {
+      let i, len, tid;
+      for (i = 0, len = timeoutIDs.length; i < len; i++) {
+        tid = timeoutIDs[i];
+        clearTimeout(tid);
+      }
+      timeoutIDs = [];
+      $('#ajax-spinner').hide();
+      let timeoutID = setTimeout(function() {
+        let $ul = $('#content-trees .item-list');
+        let last_path = $ul.attr('data-last-path');
+        this.getFolderContents(last_path, '@@jsonbytype');
+      }.bind(this), this.timeout);
+      timeoutIDs.push(timeoutID);
+    }.bind(this));
+    $('#contentchooser-content-search-input').keyup(function() {
+      $('#contentchooser-content-search-button').trigger('click');
+    });
+  }
+  contentSearchFilter(page) {
     if (page === null) {
       page = 1;
     }
-    var url = $("#contentchooser-content-search-button").attr("data-url");
-    var queryVal = $("#contentchooser-content-search-input").val();
+    let url = $('#contentchooser-content-search-button').attr('data-url');
+    let queryVal = $('#contentchooser-content-search-input').val();
     if ((queryVal.length > 0) &&
       (queryVal.length < 3)) {
       return false;
     }
-    var i, len, tid;
-    for (i = 0, len = timeoutIDs.length; i < len; i++) {
-      tid = timeoutIDs[i];
+    let i, len, tid;
+    for (i = 0, len = this.timeoutIDs.length; i < len; i++) {
+      tid = this.timeoutIDs[i];
       clearTimeout(tid);
     }
-    timeoutIDs = [];
+    this.timeoutIDs = [];
     $('#ajax-spinner').hide();
-    var timeoutID = setTimeout(function() {
-      var data = {
+    let timeoutID = setTimeout(function() {
+      let data = {
         'q': queryVal,
         'page': page
       };
       $('#ajax-spinner').show();
-      ajaxSearchRequest.push($.ajax({
+      this.ajaxSearchRequest.push($.ajax({
         url: url,
         data: data,
+        context: this,
         success: function(info) {
           $('#ajax-spinner').hide();
-          $("#contentchooser-content-search #recent .item-list").off("scroll");
-          $("#contentchooser-content-search #recent .item-list").replaceWith(info);
-          $("#contentchooser-content-search #recent .item-list").on("scroll", handle_scroll);
+          $('#contentchooser-content-search #recent .item-list').off('scroll');
+          $('#contentchooser-content-search #recent .item-list').replaceWith(info);
+          $('#contentchooser-content-search #recent .item-list').on('scroll', this.onRecentScroll.bind(this));
           if (queryVal === '') {
-            $('#recent .filter-count').text("");
+            $('#recent .filter-count').text('');
           } else {
-            var $ul = $("#contentchooser-content-search #recent .item-list");
-            var count = $ul.attr('data-total-results');
-            $('#recent .filter-count').text(" " + count + " Results");
+            let $ul = $('#contentchooser-content-search #recent .item-list');
+            let count = $ul.attr('data-total-results');
+            $('#recent .filter-count').text(' ' + count + ' Results');
           }
           return false;
         }
       }));
-    }, TIMEOUT);
-    timeoutIDs.push(timeoutID);
+    }.bind(this), this.timeout);
+    this.timeoutIDs.push(timeoutID);
     return false;
   }
-
-  $.fn.liveDraggable = function(opts) {
-    $(document).on("mouseover", this.selector, function() {
-      if (!$(this).data("init")) {
-        $(this).data("init", true).draggable(opts);
-      }
-    });
-    return $();
-  };
-
-  function contentchooserMaker(options) {
-    var windowId = options.windowId;
-    var droppable = options.droppable;
-    var draggable = options.draggable;
-    var draggable_acepted = options.draggable_acepted;
-    var dropped = options.dropped;
-    var isPlone5 = ($(windowId).attr('data-is-plone-5') === 'True');
-
-    //items inside contentchooser should be draggable
-    $(draggable).liveDraggable({
+  onMouseOverDraggable(e) {
+    let $el = $(e.currentTarget);
+    if ($el.data('init')) {
+      return;
+    }
+    $el.data('init', true).draggable({
       scroll: false,
-      helper: "clone"
+      helper: 'clone'
     });
+  }
+  contentchooserMaker(options) {
+    let windowId = options.windowId;
+    let droppable = options.droppable;
+    let draggable = options.draggable;
+    let isPlone5 = ($(windowId).attr('data-is-plone-5') === 'True');
 
+    //items inside contentchooser should be draggable
+    $(document).on('mouseover', draggable, this.onMouseOverDraggable.bind(this));
     $(droppable).droppable({
       activeClass: 'ui-state-default',
-      accept: draggable_acepted,
+      accept: options.draggable_acepted,
       hoverClass: 'content-drop-hover ui-state-hover',
-      drop: dropped
+      drop: options.dropped,
     });
 
     if (isPlone5 === false && $('.template-compose').length > 0) {
@@ -329,271 +594,4 @@ var coveractions = {
       $(windowId + ' ul.formTabs').tabs(windowId + ' .tab-pane');
     }
   }
-
-  $(function() {
-    $("#contentchooser-content-search #recent .item-list").on("scroll", handle_scroll);
-
-    $(document).on("click", "#recent .contentchooser-clear", function(e) {
-      $(e.currentTarget).prev().children("input").val("");
-      var url = $("#contentchooser-content-search-button").attr("data-url");
-      ajaxSearchRequest.push($.ajax({
-        url: url,
-        success: function(info) {
-          $("#contentchooser-content-search #recent .item-list").html(info);
-          $('#recent .filter-count').text("");
-          return false;
-        }
-      }));
-      return false;
-    });
-
-    $(document).on("click", "#content-trees .contentchooser-clear", function(e) {
-      $(e.currentTarget).prev().children("input").val("");
-      coveractions.getFolderContents(portal_url, '@@jsonbytype');
-      return false;
-    });
-
-    if ($("#contentchooser-content-search").length) {
-      var content_name = $("#contentchooser-content-search-compose-button").text();
-      $("#content").prepend("<div class='btn' id='contentchooser-content-show-button'>" + content_name + "</div>");
-
-      $("#contentchooser-content-search").resizable({
-        maxHeight: 411,
-        minHeight: 411,
-        minWidth: 350,
-        maxWidth: 540
-      });
-    }
-
-    $("#contentchooser-content-search-button").click(function(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      contentSearchFilter();
-      return false;
-    });
-
-    contentchooserMaker({
-      draggable: '#contentchooser-content-search .item-list li, ' +
-                 '.template-compose #content .tile, ' +
-                 '.template-compose #content .tile-move, ' +
-                 '.template-compose [data-tile-type=collective\\.cover\\.carousel] [data-content-uuid]',
-      draggable_acepted: function($origin) {
-        var $target = $(this);
-        var ct = $target.data('tileValidCt');
-        var valid = $.inArray($origin.attr('data-content-type'), ct) >= 0;
-        var isDroppable = $target.attr("data-is-droppable") === "True";
-        var origin_id = $origin.attr('id');
-        if ($origin.is('[data-tile-id]')) {
-          origin_id = $origin.attr('data-tile-id');
-        }
-        var origin_has_subitem = $origin.attr('data-has-subitem') === 'True';
-        var origin_uuid = $origin.attr('data-content-uuid');
-
-        if (!ct &&
-            origin_has_subitem ||
-            $origin.attr('data-tile-type') === $target.attr('data-tile-type') &&
-            (typeof origin_uuid !== 'undefined' ||
-             $origin.hasClass('tile-move')) &&
-            origin_id !== $target.attr('id')) {
-          return true;
-        }
-        if (!isDroppable ||
-            origin_id === $target.attr('id') ||
-            typeof origin_uuid === 'undefined') {
-          return false;
-        }
-        return valid;
-      },
-      windowId: '#contentchooser-content-search',
-      droppable: '.template-compose #content .tile',
-      dropped: function(event, ui) {
-        var $draggable = ui.draggable;  // JQuery UI copy of $origin
-        var $target = $(this);
-        var target_type = $target.attr('data-tile-type');
-        var target_id = $target.attr('id');
-        var target_has_subitem = $target.attr('data-has_subitem') === 'True';
-        var draggable_id = $draggable.attr('id');
-        if ($draggable.is('[data-tile-id]')) {
-          draggable_id = $draggable.attr('data-tile-id');
-        }
-        var $origin = $('#' + draggable_id);
-        var origin_type = $origin.attr('data-tile-type');
-        var origin_has_subitem = $origin.attr('data-has-subitem') === 'True';
-        var draggable_uuid = $draggable.attr('data-content-uuid');
-        var draggable_type = $draggable.attr('data-content-type');
-        if (target_id === draggable_id) {
-          return false;
-        }
-        $target.find('.loading-mask').addClass('show');
-        if ($draggable.hasClass('tile') || origin_has_subitem) {
-          var move_callback = function() {
-            // TODO: there are a conflict beetween sort list tile and drag and drop content that makes data keep in origin tile
-            //       we should take out the sort functionality of list tile and put it into edit overlay (like carousel tile)
-            if ($('#' + draggable_id + ' [data-content-uuid=' + draggable_uuid + ']').length > 0) {
-              $.ajax({
-                url: "@@removeitemfromlisttile",
-                data: {
-                  'tile-type': origin_type,
-                  'tile-id': draggable_id,
-                  'uuid': draggable_uuid
-                },
-                success: function(info) {
-                  $origin.html(info);
-                  $origin.find('.loading-mask').addClass('show');
-                  if (!origin_has_subitem) {
-                    $origin.removeAttr('data-content-uuid');
-                    $origin.removeAttr('data-content-type');
-                  }
-                  move_callback();
-                  return false;
-                }
-              });
-            } else {
-              $origin.find('.loading-mask').removeClass('show');
-              $target.find('.loading-mask').removeClass('show');
-              TitleMarkupSetup();
-            }
-            return false;
-          };
-          $origin.find('.loading-mask').addClass('show');
-          $.ajax({
-            url: '@@movetilecontent',
-            data: {
-              'origin-type': origin_type,
-              'origin-id': draggable_id,
-              'target-type': target_type,
-              'target-id': target_id,
-              'uuid': draggable_uuid
-            },
-            success: function(info) {
-              $target.html(info);
-              $target.find('.loading-mask').addClass('show');
-              if (!target_has_subitem) {
-                $target.attr('data-content-uuid', draggable_uuid);
-                $target.attr('data-content-type', draggable_type);
-              }
-              $.ajax({
-                url: '@@updatetile',
-                data: {
-                  'tile-id': draggable_id,
-                },
-                success: function(info) {
-                  $origin.html(info);
-                  $origin.find('.loading-mask').addClass('show');
-                  if (!origin_has_subitem) {
-                    $origin.removeAttr('data-content-uuid');
-                    $origin.removeAttr('data-content-type');
-                  }
-                  move_callback();
-                  return false;
-                },
-                error: function(XMLHttpRequest, textStatus, errorThrown) {
-                  $origin.html(textStatus + ': ' + errorThrown);
-                  $origin.find('.loading-mask').removeClass('show');
-                  return false;
-                }
-              });
-              return false;
-            },
-            error: function(XMLHttpRequest, textStatus, errorThrown) {
-              $target.html(textStatus + ': ' + errorThrown);
-              $target.find('.loading-mask').removeClass('show');
-              return false;
-            }
-          });
-        } else {
-          $.ajax({
-            url: '@@updatetilecontent',
-            data: {
-              'tile-type': target_type,
-              'tile-id': target_id,
-              'uuid': draggable_uuid
-            },
-            success: function(info) {
-              $target.html(info);
-              if (!target_has_subitem) {
-                $target.attr('data-content-uuid', draggable_uuid);
-                $target.attr('data-content-type', draggable_type);
-              }
-              $target.find('.loading-mask').removeClass('show');
-              TitleMarkupSetup();
-              return false;
-            },
-            error: function(XMLHttpRequest, textStatus, errorThrown) {
-              $target.html(textStatus + ': ' + errorThrown);
-              $target.find('.loading-mask').removeClass('show');
-              TitleMarkupSetup();
-              return false;
-            }
-          });
-        }
-      }
-    });
-
-    $("#contentchooser-content-search").draggable({
-      start: function(event, ui) {
-        $(this).removeClass("right");
-      },
-      cancel: '.item-list, #contentchooser-content-search-input, #contentchooser-content-trees'
-    });
-    $("#contentchooser-content-show-button").click(function() {
-      var offset = $(this).offset();
-      $("#contentchooser-content-search").css("display", "block");
-      $("#contentchooser-content-search").offset({
-        'top': offset.top
-      });
-    });
-
-    $("#contentchooser-content-search .close").click(function(e) {
-      e.preventDefault();
-      $("#contentchooser-content-search").css("display", "none");
-    });
-    $(document).on("click", "#contentchooser-content-search #content-tree .item-list li", function(e) {
-      e.stopPropagation();
-      var child = $(this).children("ul");
-      if (child.is(":visible")) {
-        child.css("display", "none");
-      } else {
-        child.css("display", "block");
-      }
-    });
-  });
-
-  coveractions.preInit();
-
-  function filterOnKeyUp() {
-    var timeoutIDs = [];
-    $("#contentchooser-content-search-button").css("display", "none");
-    $("#contentchooser-content-trees").keyup(function() {
-      var queryVal = $(this).val();
-      if ((queryVal.length > 0) &&
-        (queryVal.length < 3)) {
-        return false;
-      }
-
-      var i, len, tid;
-      for (i = 0, len = timeoutIDs.length; i < len; i++) {
-        tid = timeoutIDs[i];
-        clearTimeout(tid);
-      }
-      timeoutIDs = [];
-      $('#ajax-spinner').hide();
-      var timeoutID = setTimeout(function() {
-        var $ul = $('#content-trees .item-list');
-        var last_path = $ul.attr('data-last-path');
-        coveractions.getFolderContents(last_path, '@@jsonbytype');
-      }, TIMEOUT);
-      timeoutIDs.push(timeoutID);
-    });
-    $("#contentchooser-content-search-input").keyup(function() {
-      $("#contentchooser-content-search-button").trigger("click");
-    });
-  }
-
-  $(document).ready(function() {
-    $("#contentchooser-content-search #content-trees .item-list").on(
-      "scroll", coveractions.handle_scroll
-    );
-    filterOnKeyUp();
-  });
-}(jQuery));
+}
diff --git a/webpack/app/js/cssclasswidget.js b/webpack/app/js/cssclasswidget.js
new file mode 100644
index 000000000..4026c674b
--- /dev/null
+++ b/webpack/app/js/cssclasswidget.js
@@ -0,0 +1,106 @@
+export default class CSSClassWidget {
+  constructor($el, callback) {
+    this.$el = $el;
+    this.callback = callback;
+    this.$value = $el.next();
+    this.open = false;
+
+    let i, item, len;
+    this.order = [];
+    this.options = {};
+    let options = JSON.parse($el.attr('data-options'));
+    for (i = 0, len = options.length; i < len; i++) {
+      item = options[i];
+      this.order.push(item.value);
+      this.options[item.value] = item;
+    }
+    this.setSelected(this.$value.val());
+    this.update();
+    this.$el.on('click', this.onButtonClick.bind(this))
+  }
+  update() {
+    let i, key, item, len;
+    let value = '';
+    for (i = 0, len = this.order.length; i < len; i++) {
+      key = this.order[i];
+      item = this.options[key];
+      if (item.selected) {
+        value += ' ' + key;
+      }
+    }
+    value = value.trim();
+    if (value === '') {
+      value = 'tile-default';
+    }
+    this.$value.val(value);
+    if (this.callback instanceof Function) {
+      this.callback(value);
+    }
+  }
+  setSelected(selected) {
+    if (selected == null || selected === '') {
+      selected = [];
+    } else {
+      selected = selected.split(' ');
+    }
+    let i, key, len;
+    for (i = 0, len = selected.length; i < len; i++) {
+      key = selected[i];
+      if (key === 'tile-default') {
+        continue;
+      }
+      this.options[key].selected = true;
+    }
+    this.update();
+  }
+  onButtonClick(e) {
+    e.preventDefault();
+
+    $('.cssclasswidget-overlay').remove();
+    $('.cssclasswidget-classlist').remove();
+
+    this.open = !this.open;
+    if (!this.open) {
+      return;
+    }
+
+    let $overlay = $('<div class="cssclasswidget-overlay">');
+    $overlay.insertAfter(this.$el);
+    $overlay.on('click', this.onOverlayClick.bind(this));
+
+    let $classlist = $('<ul class="cssclasswidget-classlist">');
+    let i, key, item, $item, len;
+    let value = '';
+    for (i = 0, len = this.order.length; i < len; i++) {
+      key = this.order[i];
+      item = this.options[key];
+      $item = $('<li><input name="'+key+'" type="checkbox" value="'+key+'" /><span class="cssclasswidget-'+key+'">'+item.content+'</span></li>');
+      if (item.selected) {
+        $('input', $item).attr('checked', 'checked');
+      }
+      $classlist.append($item);
+    }
+    $classlist.insertAfter(this.$el);
+    $classlist.offset(this.$el.offset());
+    $classlist.css('transform', 'translateY('+(this.$el.height()+4)+'px)');
+    $('span', $classlist).on('click', this.onItemClick.bind(this));
+  }
+  onOverlayClick(e) {
+    e.preventDefault();
+    this.open = false;
+    $('.cssclasswidget-overlay').remove();
+    $('.cssclasswidget-classlist').remove();
+  }
+  onItemClick(e) {
+    e.preventDefault();
+    let $checkbox = $(e.target).prev()
+    let key = $checkbox.attr('name');
+    if ($checkbox.is(':checked')) {
+      $checkbox.removeAttr('checked');
+    } else {
+      $checkbox.attr('checked', 'checked')
+    }
+    this.options[key].selected = $checkbox.is(':checked');
+    this.update();
+  }
+}
diff --git a/webpack/app/js/layout.js b/webpack/app/js/layout.js
new file mode 100644
index 000000000..419b8fad5
--- /dev/null
+++ b/webpack/app/js/layout.js
@@ -0,0 +1,644 @@
+import jss from './vendor/jss.js';
+
+import CSSClassWidget from './cssclasswidget.js';
+
+
+export default class LayoutView {
+  /**
+   * @constructor
+   * @param jqDomObj layout, the layout container
+   */
+  constructor() {
+    this.$le = $('.layout');
+    this.conf = this.$le.data('layoutmanager-settings');
+    this.n_columns = this.conf.ncolumns;
+    this.row_class = 'cover-row';
+    this.row_dom = $(
+      `<div class="${this.row_class}">
+        <a href="#" class="config-row-link">
+          <i class="config-icon"></i>
+        </a>
+      </div>`
+    );
+    this.column_class = 'cover-column';
+    this.column_dom = $(
+      `<div class="${this.column_class}">
+        <a href="#" class="config-column-link">
+          <i class="config-icon"></i>
+        </a>
+      </div>`
+    );
+    this.tile_class = 'cover-tile';
+    this.tile_dom = $(`<div class="${this.tile_class}"></div>`),
+    this.bindEvents();
+    this.init();
+
+    if (typeof(plone) !== 'undefined') {
+      $(window).unload(plone.UnlockHandler.execute);
+    }
+  }
+  onBeforeUnload(e) {
+    let message = window.form_modified_message ||
+      "Discard changes? If you click OK, any changes you have made will be lost.";
+    let save_btn = $('#btn-save');
+    if (save_btn.hasClass('modified')) {
+      e.returnValue = message;
+      return message;
+    }
+  }
+  bindEvents() {
+    /**
+     * Stick sidebar
+     * stick sidebar on top when scrolling
+     **/
+    let fixed = false;
+    $(document).scroll(function() {
+      if ($(this).scrollTop() > 200) {
+        if (!fixed) {
+          fixed = true;
+          $('#sidebar').addClass("fixed");
+        }
+      } else {
+        if (fixed) {
+          fixed = false;
+          $('#sidebar').removeClass("fixed");
+        }
+      }
+    });
+
+    //bind the save button
+    let $button = $('#btn-save');
+    let onBtnSave = function(e) {
+      e.preventDefault();
+      let json = this.html2json(this.$le);
+      $button.removeClass(function(index, css) {
+        return (css.match(/\bbtn-\S+/g) || []).join(' ');
+      });
+      $button.find('span').text('Saving...');
+      $.ajax({
+        'url': `@@save_layout${location.search}`,
+        'data': {
+          'cover_layout': JSON.stringify(json)
+        },
+        'type': 'POST',
+        success: function(data) {
+          $button.find('span').text('Saved');
+          $('#btn-save').removeClass('modified error');
+          $('#btn-save').addClass('saved btn-success');
+          $('#btn-export').removeClass('disabled');
+        },
+        error: function(jqXHR, textStatus, errorThrown) {
+          $button.find('span').text(`Error ${errorThrown}`);
+          $('#btn-save').addClass('error btn-danger');
+        }
+      });
+    };
+    $button.on("click", onBtnSave.bind(this));
+  }
+  init() {
+    this.setup();
+    this.row_events();
+    this.column_events();
+    this.$le.bind('modified.layout', this.layout_modified);
+    window.onbeforeunload = this.onBeforeUnload;
+  }
+  setup() {
+    //buttons draggable binding
+    $("#btn-row").draggable({
+      connectToSortable: ".layout",
+      helper: 'clone'
+    });
+    $("#btn-column").draggable({
+      appendTo: 'body',
+      helper: 'clone'
+    });
+    $(".btn-tile").draggable({
+      appendTo: 'body',
+      helper: 'clone'
+    });
+
+    //sortable rows
+    let onStop = function(e, ui) {
+      if (ui.item.hasClass('btn')) {
+        let row = this.row_dom.clone();
+        ui.item.after(row);
+        ui.item.remove();
+
+        this.row_events(row);
+        this.delete_manager(row);
+        // after adding the row, call its drop handler
+        // to automatically add a column (closes #212)
+        this.row_drop($(row));
+      }
+      this.$le.trigger('modified.layout');
+    };
+    this.$le.sortable({
+      items: `.${this.row_class}`,
+      placeholder: 'ui-sortable-placeholder',
+      stop: onStop.bind(this)
+    });
+
+    this.generate_grid_css();
+    this.delete_manager();
+    this.resize_columns_manager();
+    this.class_chooser_manager();
+
+    this.tile_config_manager();
+
+    //export layout
+    let $btnExport = $('#btn-export');
+    $btnExport.on('click', function(e) {
+      e.preventDefault();
+      if (!$btnExport.hasClass('disabled') && $('#btn-save').hasClass('saved')) {
+        $('#export-layout').modal();
+      }
+    });
+
+    $('#btn-cancel-export-layout').on('click', function(e) {
+      e.preventDefault();
+      $('#export-layout').modal('hide');
+    });
+  }
+  /**
+   * Generate a random value to form a UUID; we use a
+   * fallback for browsers without crypto module mainly to
+   * deal with older versions of IE.
+   * See: http://caniuse.com/#search=crypto
+   **/
+  get_random_value(c) {
+    let r;
+    if (window.crypto && typeof window.crypto.getRandomValues === 'function') {
+      r = crypto.getRandomValues(new Uint8Array(1))[0] % 16 | 0;
+    } else { // Fallback for older browsers
+      r = Math.random() * 16 | 0;
+    }
+    // Improve randomness. See: http://stackoverflow.com/a/8809472/2116850
+    r = (this.timestamp + r) % 16 | 0;
+    this.timestamp = Math.floor(this.timestamp / 16);
+    if (c !== 'x') {
+      r = r & 0x3 | 0x8;
+    }
+    return r.toString(16);
+  }
+
+  /**
+   * Generate an RFC 4122 version 4 compliant UUID.
+   * See: http://stackoverflow.com/a/2117523/2116850
+   **/
+  generate_uuid() {
+    // Improve randomness. See: http://stackoverflow.com/a/8809472/2116850
+    this.timestamp = new Date().getTime();
+    if (window.performance && typeof window.performance.now === 'function') {
+      this.timestamp += performance.now(); // use high-precision timer if available
+    }
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+      /[xy]/g,
+      this.get_random_value.bind(this)
+    );
+  }
+
+  /**
+   * Generate tile id. As we're using the generated UUID as
+   * class id, we need the first char not to be a number.
+   * See: http://css-tricks.com/ids-cannot-start-with-a-number/
+   **/
+  generate_tile_id() {
+    let tile_id = this.generate_uuid();
+    while ($.isNumeric(tile_id[0])) {
+      tile_id = this.generate_uuid();
+    }
+    return tile_id;
+  }
+
+  /**
+   * Row drop handler
+   * available from outside the droppable definition
+   **/
+  row_drop($row) {
+    //creates a new column
+    let column = this.column_dom.clone();
+    $row.prepend(column);
+    this.column_events(column);
+    this.delete_manager(column);
+    this.resize_columns_manager(column);
+
+    this.calculate_grid($row.find(`.${this.column_class}`));
+
+    this.$le.trigger('modified.layout');
+  }
+
+  /**
+   * Row events binding
+   * makes the event setup in row/s
+   **/
+  row_events(row) {
+    let rows = row ? row : this.$le.find(`.${this.row_class}`);
+
+    //allow columns droppable
+    let onDrop = function(e, ui) {
+      this.row_drop(rows);
+    };
+    rows.droppable({
+      activeClass: 'ui-state-default',
+      hoverClass: 'ui-state-hover',
+      accept: '#btn-column',
+      drop: onDrop.bind(this)
+    });
+
+    //allow sortable columns
+    let onStart = function(e, ui) {
+      ui.placeholder.attr('data-column-size', ui.helper.data('column-size'));
+    };
+    let onStop = function(e, ui) {
+      this.$le.trigger('modified.layout');
+    };
+    let onReceive = function(e, ui) {
+      if (ui.sender[0] != this) {
+        rows.calculate_grid($(this).find(`.${this.column_class}`));
+        rows.calculate_grid(ui.sender.find(`.${this.column_class}`));
+      }
+    };
+    rows.sortable({
+      items: `.${this.column_class}`,
+      connectWith: `.${this.row_class}`,
+      appendTo: '.layout',
+      helper: 'clone',
+      placeholder: 'ui-sortable-placeholder-column',
+      cancel: '.resizer',
+      start: onStart.bind(this),
+      stop: onStop.bind(this),
+      receive: onReceive.bind(this)
+    });
+  }
+
+  /**
+   * column events binding
+   * makes the event setup in column/s
+   **/
+  column_events(column) {
+    let columns = column ? column : this.$le.find(`.${this.column_class}`);
+
+    let onDrop = function(e, ui) {
+      let new_tile = this.tile_dom.clone();
+      let column_elem = columns;
+
+      let tile_type = ui.draggable.data('tile-type');
+      let is_configurable = ui.draggable.data('tile-configurable');
+      new_tile.attr('data-tile-type', tile_type);
+
+      let tile_id = this.generate_tile_id();
+      new_tile.attr('id', tile_id);
+      let url_config = `@@configure-tile/${tile_type}/${tile_id}`;
+
+      let config_icon = $('<i/>').addClass('config-icon');
+      let config_link = $('<a />').addClass('config-tile-link')
+        .attr('href', url_config)
+        .append(config_icon);
+      let name_tag = $('<span />').addClass('tile-name')
+        .text(ui.draggable.data('tile-name'));
+      if (is_configurable) {
+        new_tile.append(config_link);
+      }
+      new_tile.append(name_tag);
+
+      $(column_elem).append(new_tile);
+      this.delete_manager(new_tile);
+
+      this.$le.trigger('modified.layout');
+    };
+    columns.droppable({
+      activeClass: 'ui-state-default',
+      hoverClass: 'ui-state-hover',
+      accept: '.btn-tile',
+      drop: onDrop.bind(this)
+    });
+
+    //allow sortable tiles
+    let onStop = function(e, ui) {
+      this.$le.trigger('modified.layout');
+    };
+    columns.sortable({
+      placeholder: 'tile-placeholder',
+      appendTo: '.layout',
+      helper: 'clone',
+      items: `.${this.tile_class}`,
+      connectWith: `.${this.column_class}`,
+      stop: onStop.bind(this)
+    });
+  }
+
+  /**
+   * tile events binding
+   * makes the event setup in tile/s
+   **/
+  tile_events(tile) {
+    let tiles = tile ? tile : this.$le.find(`.${this.tile_class}`);
+  }
+
+  /**
+   * Delete elements in layout
+   * manage the delete process of layout elements
+   **/
+  delete_manager(elements) {
+    let button = $('<button class="close">&times;</button>').css({
+      'font-size': '15px',
+      'left': '0',
+      'line-height': '15px',
+      'overflow': 'hidden',
+      'position': 'absolute',
+      'text-align': 'center',
+      'top': '0',
+      'width': '15px'
+    });
+    let onClick = function() {
+      let element = button.parent('div');
+      element.remove();
+      this.$le.trigger('modified.layout');
+    };
+    button.on('click', onClick.bind(this));
+    button.hover(
+      function() {
+        $(this).parent('div').addClass('to-delete');
+      },
+      function() {
+        $(this).parent('div').removeClass('to-delete');
+      }
+    );
+    elements = elements !== undefined ? elements : this.$le.find(`.${this.column_class}, .${this.tile_class}, .${this.row_class}`);
+    elements.append(button);
+  }
+
+  /**
+   * Calculate Grid distribution
+   * manage the grid behavior in new elements
+   **/
+  calculate_grid(elements) {
+    let n_elements = elements.length;
+    let column_size = Math.floor(this.n_columns / n_elements);
+
+    if (n_elements <= this.n_columns) {
+      $(elements).attr('data-column-size', column_size);
+    }
+  }
+
+  /**
+   * Generate grid css
+   * on the fly generates an stylesheet with a dummy grid
+   * implementation, based on the liquid version of boostrap
+   **/
+  generate_grid_css() {
+    let gutter = '3';
+
+    jss.set(`.${this.row_class}`, {
+      width: '98%'
+    });
+    jss.set(`.${this.row_class}:after`, {
+      clear: 'both'
+    });
+    jss.set(`.${this.row_class}:before, .${this.row_class}:after`, {
+      display: 'table',
+      'line-height': '0',
+      'content': '""'
+    });
+
+    jss.set(`.${this.column_class}`, {
+      'display': 'block',
+      'float': 'left',
+      'width': '100%',
+      'min-height': '30px',
+      'box-sizing': 'border-box'
+    });
+
+    let margin_space = (this.n_columns - 1) * gutter;
+    let computable_space = 100 - margin_space;
+    let minimun_column_width = computable_space / this.n_columns;
+
+    for (let i = 1; i <= this.n_columns; i++) {
+      let column_width = minimun_column_width * i;
+      let margin_width = gutter * (i - 1);
+
+      jss.set(`[data-column-size="${i}"]`, {
+        'width': column_width + margin_width + '%',
+        'margin-left': gutter + '%'
+      });
+    }
+
+    jss.set(`.${this.column_class}:nth-of-type(1)`, {
+      'margin-left': '0'
+    });
+  }
+
+  /**
+   * Event, Layout was modified
+   * XXX I can do an autocheck code, but doesn't worth it at this point
+   **/
+  layout_modified() {
+    let save_btn = $('#btn-save');
+
+    if (save_btn.hasClass('saved')) {
+      $('#btn-save').find('span').text('Save');
+      $('#btn-save').removeClass(function(index, css) {
+        return (css.match(/\bbtn-\S+/g) || []).join(' ');
+      });
+      $('#btn-save').removeClass('saved error');
+      $('#btn-save').addClass('modified btn-warning');
+
+      //disable export layout
+      $('#btn-export').addClass('disabled');
+    }
+  }
+
+  /**
+   *  Resize columns
+   *
+   **/
+  resize_columns_manager(columns) {
+    columns = columns !== undefined ? columns : this.$le.find(`.${this.column_class}`);
+
+    let resizer = $('<i/>').addClass('resizer');
+    $(columns).append(resizer);
+
+    $("#resizer").dialog({
+      autoOpen: false
+    });
+
+    $(".resizer").click(function() {
+      $("#resizer").dialog("open");
+
+      let column = $(this).parents('.cover-column');
+      let size = column.attr('data-column-size');
+
+      $("#column-size-resize span").html(size);
+      $('#slider').slider("option", "value", size);
+      $('#slider').off("slide");
+      $('#slider').on("slide", function(event, ui) {
+        column.attr('data-column-size', ui.value);
+        le.trigger('modified.layout');
+      });
+      return false;
+    });
+
+    $("#slider").slider({
+      range: "max",
+      min: 1,
+      max: this.n_columns,
+      value: 1,
+      slide: function(event, ui) {
+        $("#column-size-resize span").html(ui.value);
+      }
+    });
+    $("#amount").val($("#slider-range-max").slider("value"));
+  }
+
+  /**
+   *  Class chooser
+   *
+   **/
+  class_chooser_manager() {
+    $("#class-chooser").dialog({
+      autoOpen: false
+    });
+
+    $(document).on('click', '.config-row-link, .config-column-link', function(e) {
+      e.preventDefault();
+      let $target = $(this).parent();
+      let $widget = $('#class-chooser > .cssclasswidget');
+      let $value = $('#class-chooser > .cssclasswidget-selected');
+      $value.val($target.attr('data-css-class'));
+      new CSSClassWidget($widget, function(value) {
+        $target.attr('data-css-class', value);
+      });
+      $('#class-chooser').dialog("open");
+    });
+  }
+
+  /**
+   *  Tile Config
+   *  Configuration for tiles, manage the save, open and cancel operations
+   **/
+  tile_config_manager() {
+    //CONFIGURATION OF THE TILE
+    //when saving the configuration of the tile save it with ajax
+    $(document).on("click", "#configure_tile #buttons-save", function(e) {
+      e.preventDefault();
+      let url = $("#configure_tile").attr("action");
+      let data = $("#configure_tile").serialize();
+      data += '&buttons.save=Save&ajax_load=true';
+      $.ajax({
+        type: 'POST',
+        url: url,
+        data: data,
+        success: function(e, v) {
+          $('#tile-configure').html('');
+          $('#tile-configure').modal('hide');
+        }
+      });
+      return false;
+    });
+    //when canceling the configuration of the tile
+    $(document).on("click", "#configure_tile #buttons-cancel", function(e) {
+      e.preventDefault();
+      $('#tile-configure').html('');
+      $('#tile-configure').modal('hide');
+      return false;
+    });
+    //config the tile
+    $(document).on("click", ".config-tile-link", function(e) {
+      e.preventDefault();
+      let url = $(this).attr("href");
+      $('#tile-configure').modal();
+      $.ajax({
+        type: 'GET',
+        url: url,
+        data: {
+          'ajax_load': true
+        },
+        success: function(data) {
+          $('#tile-configure').html(data);
+          // Make sure CSS field is in first place
+          let css_id = $('[id$=css_class]').attr('id');
+          let first = $('#configure_tile div.field:first');
+          if (first.attr('id') != css_id) {
+            $(`#${css_id}`).insertBefore(first);
+          }
+          new CSSClassWidget($(`#${css_id} .cssclasswidget`));
+          $('#configure_tile div.field').not(`#${css_id}`).addClass('config-sortable');
+          // Fields in tile config sortable
+          $('#configure_tile').sortable({
+            opacity: 0.6,
+            cursor: 'move',
+            placeholder: "ui-state-highlight",
+            zIndex: 9999,
+            refreshPositions: true,
+            axis: 'y',
+            tolerance: 'pointer',
+            forcePlaceholderSize: true,
+            items: 'div.config-sortable',
+            update: function(e, ui) {
+              let $divs = $(this).children('div.field');
+              $divs.each(function() {
+                let $div = $(this);
+                let newVal = $(this).index() + 1;
+                // TODO: Is used newVal -1 to prevent the field **Clase CSS** be counted as sortable item
+                $(this).children('div.order-box').children('input').val(newVal - 1);
+              });
+            }
+          });
+        }
+      });
+      return false;
+    });
+  }
+
+  /**
+   * Export html2json
+   *
+   **/
+  html2json(node) {
+    let data = [];
+    let excluded_elements = '.row-droppable';
+    let remove_classes = 'ui-droppable ui-sortable';
+
+    let $item;
+    for (let item of $(node).find('> div').not('.no-export')) {
+      $item = $(item);
+      if ($item.not(excluded_elements)[0] !== undefined) {
+        $item.removeClass(remove_classes);
+        let entry = {};
+
+        let patt = new RegExp(/\bcolumn|\brow|\btile/);
+        let node_type = patt.exec($item.attr('class'));
+        if (node_type) {
+          entry.type = node_type[0];
+        }
+
+        if (node_type == 'column') {
+          entry.roles = ['Manager'];
+          entry.type = 'group';
+          entry['column-size'] = $item.data('columnSize');
+        }
+
+        if ($item.attr('data-css-class')) {
+          entry['css-class'] = $item.attr('data-css-class');
+        }
+
+        let iterator = this.html2json($item);
+        if (iterator[0] !== undefined) {
+          entry.children = iterator;
+        }
+
+        let node_id = $item.attr('data-panel') || $item.attr('id');
+        if (node_id !== undefined) {
+          entry.id = node_id;
+        }
+
+        let tile_type = $item.attr('data-tile-type');
+        if (tile_type !== undefined) {
+          entry['tile-type'] = tile_type;
+        }
+        data.push(entry);
+      }
+    }
+    return data;
+  }
+}
diff --git a/webpack/app/js/tiles/calendar.js b/webpack/app/js/tiles/calendar.js
new file mode 100644
index 000000000..0421a7549
--- /dev/null
+++ b/webpack/app/js/tiles/calendar.js
@@ -0,0 +1,28 @@
+export default class CalendarTile {
+  constructor(tile) {
+    $('#content').on('click',
+                     `.cover-calendar-tile a.calendar-tile-prev,
+                      .cover-calendar-tile a.calendar-tile-next`,
+                     function(e) {
+      e.preventDefault();
+      var $a = $(this);
+      var $tile = $a.parents('.tile');
+      $.ajax({
+        url: '@@updatetile',
+        data: {
+          'tile-id': $tile.attr('id'),
+          'month:int': $a.attr('data-month'),
+          'year:int': $a.attr('data-year')
+        },
+        success: function(info) {
+          $tile.html(info);
+          return false;
+        },
+        error: function(XMLHttpRequest, textStatus, errorThrown) {
+          $tile.html(textStatus + ': ' + errorThrown);
+          return false;
+        }
+      });
+    });
+  }
+}
diff --git a/webpack/app/js/tiles/carousel.js b/webpack/app/js/tiles/carousel.js
new file mode 100644
index 000000000..4a122b613
--- /dev/null
+++ b/webpack/app/js/tiles/carousel.js
@@ -0,0 +1,20 @@
+export default class CarouselTile {
+  constructor(tile) {
+    this.$tile = $(tile);
+    if (!this.$tile.hasClass('tile-content')) {
+      this.$tile = $('.tile-content', this.$tile);
+    }
+    this.initGalleria();
+  }
+  initGalleria() {
+    Galleria.loadTheme('++resource++collective.cover/galleria/theme.js');
+    Galleria.run(this.$tile);
+    var options = {
+      height: parseFloat(this.$tile.attr('data-image-ratio'))
+    };
+    if ($('body').hasClass('template-view')) {
+        options.autoplay = (this.$tile.attr('data-autoplay') === 'True');
+    }
+    Galleria.configure(options);
+  }
+}
diff --git a/src/collective/cover/static/js/vendor/jss.js b/webpack/app/js/vendor/jss.js
similarity index 99%
rename from src/collective/cover/static/js/vendor/jss.js
rename to webpack/app/js/vendor/jss.js
index ca4cde053..6be168471 100644
--- a/src/collective/cover/static/js/vendor/jss.js
+++ b/webpack/app/js/vendor/jss.js
@@ -152,6 +152,7 @@ var jss = (function() {
     function swapAdjSelAttr(selector) {
         var swap = '';
         var lastIndex = 0;
+        var match;
             
         while ((match = adjSelAttrRegex.exec(selector)) != null) {
             if (match[0] === '')
@@ -287,4 +288,4 @@ var jss = (function() {
     return exports;
 })();
 
-typeof module !== 'undefined' && module.exports && (module.exports = jss); // CommonJS support
\ No newline at end of file
+typeof module !== 'undefined' && module.exports && (module.exports = jss); // CommonJS support
diff --git a/webpack/app/resources.pt b/webpack/app/resources.pt
new file mode 100644
index 000000000..484cb313d
--- /dev/null
+++ b/webpack/app/resources.pt
@@ -0,0 +1,6 @@
+<% for (let css in htmlWebpackPlugin.files.css) { %>
+  <link rel="stylesheet" tal:attributes="href <%= 'string:${view/site_url}/' + htmlWebpackPlugin.files.css[css] %>" />
+<% } %>
+<% for (let js in htmlWebpackPlugin.files.js) { %>
+  <script defer tal:attributes="src <%= 'string:${view/site_url}/' + htmlWebpackPlugin.files.js[js] %>"></script>
+<% } %>
diff --git a/webpack/app/scss/_contentchooser.scss b/webpack/app/scss/_contentchooser.scss
new file mode 100644
index 000000000..a8dd88303
--- /dev/null
+++ b/webpack/app/scss/_contentchooser.scss
@@ -0,0 +1,142 @@
+#contentchooser-content-show-button {
+  padding: .5em 1em;
+  cursor: pointer;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+#contentchooser-content-search {
+  position: fixed;
+  z-index: 9999;
+  display: none;
+  padding: 20px;
+  cursor: pointer;
+  border: 1px solid #ccc;
+  background-color: #fff;
+  &.right {
+    right: 0;
+  }
+  .item-list {
+    overflow: auto;
+    width: 500px;
+    max-width: 100%;
+    height: 250px;
+    margin: 10px 0 0;
+    padding: 5px;
+    border: 1px solid #ccc;
+    li {
+      list-style-type: none;
+      list-style-image: none;
+      cursor: url('data:image/x-icon;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8='), all-scroll;
+      cursor: grab;
+      &.ui-draggable-dragging {
+        cursor: url('data:image/x-icon;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAAH/AAAB/wAAA/0AAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//+AB///wAf//4AH//+AD///yT/////////////////////////////8='), all-scroll;
+        cursor: grabbing;
+      }
+      &.stats {
+        display: none;
+      }
+      &:hover {
+        background-color: #205c90;
+      }
+    }
+  }
+}
+
+#content #contentchooser-content-search .item-list li {
+  img {
+    display: inline-block;
+    border: 0;
+  }
+  a:link {
+    display: inline-block;
+    border-bottom: 0;
+  }
+}
+
+#contentchooser-content-show-button {
+  font-weight: bold;
+  position: relative;
+  z-index: 999;
+  top: 0;
+  right: 0;
+  float: right;
+  margin-bottom: 10px;
+  background: #fff;
+}
+
+#contentchooser-content-search .close {
+  position: absolute;
+  top: -14px;
+  left: -14px;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  // FIXME - https://github.com/simplesconsultoria/sc.recipe.staticresources/issues/44
+  background-image: url('./img/pb_close.png');
+}
+
+.current {
+  border-top-left-radius: .5em;
+  border-top-right-radius: .5em;
+  background: #fff;
+}
+
+div.input {
+  width: 200px;
+  margin: 10px 0;
+  padding: 3px 15px;
+  border: 1px solid #507aaa;
+  border-radius: 10px;
+  background: white;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+input[type='text'] {
+  &.contentchooser-content-trees, &#contentchooser-content-trees {
+    width: 100%;
+    min-width: 12em;
+    height: 16px;
+    padding-top: 1px;
+    color: #888;
+    border: 0 solid;
+    background: transparent;
+    text-shadow: 0 1px 1px white;
+  }
+}
+
+#content-trees #general_panel {
+  padding: 0;
+}
+
+#contentchooser-content-search-input-container, #contentchooser-content-trees-container, .contentchooser-clear {
+  display: inline-block;
+}
+
+#contentchooser-content-search-input-container, #contentchooser-content-trees-container {
+  width: 80%;
+}
+
+.contentchooser-clear {
+  height: 13px;
+  margin-left: -25px;
+}
+
+#more-link-field {
+  > {
+    .results > li {
+      display: block;
+      margin-bottom: .25em;
+      cursor: pointer;
+      &:hover {
+        background-color: #205c90;
+      }
+    }
+    div {
+      margin-bottom: .5em;
+    }
+  }
+  button {
+    padding: 0 .5em;
+  }
+}
diff --git a/webpack/app/scss/_cover.scss b/webpack/app/scss/_cover.scss
new file mode 100644
index 000000000..2ac492b25
--- /dev/null
+++ b/webpack/app/scss/_cover.scss
@@ -0,0 +1,222 @@
+/* Basic style for tiles */
+.tile-title {
+  font-size: 120%;
+  font-weight: bold;
+  margin-bottom: 1em;
+}
+
+.tile-footer {
+  text-align: right;
+}
+
+/*loading mask*/
+
+.loading-mask {
+  position: absolute;
+  z-index: 99;
+  top: 0;
+  left: 0;
+  display: none;
+  width: 100%;
+  height: 100%;
+  opacity: .6 !important;
+  background: #000 url('./img/spinner.gif') scroll no-repeat center center;
+  background-color: #000;
+  &.show {
+    display: block;
+  }
+  &.remove-tile {
+    background-color: #833434;
+  }
+}
+
+.template-compose {
+  #content .tile {
+    padding-top: 1.2em;
+    outline: 1px dotted #999;
+    &.ui-draggable:hover {
+      cursor: move;
+    }
+    &.ui-draggable-dragging {
+      overflow: hidden;
+      height: 114px;
+      cursor: move;
+    }
+  }
+  .tile-container {
+    position: relative;
+  }
+  .tile-type-name {
+    font-size: 95%;
+    font-weight: bolder;
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    opacity: .3;
+  }
+  .edit-tile-link, .contentbody-link, .collection-link {
+    line-height: 1em;
+    position: absolute;
+    top: 0;
+    height: 1em;
+  }
+  .contentbody-link, .collection-link {
+    right: 0;
+  }
+}
+
+.tile-select-button {
+  cursor: pointer;
+}
+
+.tile-move {
+  position: absolute;
+  top: 0;
+  right: 0;
+  overflow: hidden;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  white-space: nowrap;
+  text-indent: 101%;
+  background: transparent url('./img/move.png') scroll no-repeat top center;
+  background-size: 100%;
+}
+
+.tile-remove-item {
+  font-size: 1px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  background: transparent url('./img/remove.png') scroll no-repeat top center;
+  background-size: 100%;
+  &:hover {
+    background: transparent url('./img/remove.png') no-repeat scroll center -14px;
+    background-size: 100%;
+  }
+  .text {
+    visibility: hidden;
+  }
+}
+
+/*drag and drop*/
+
+.ui-sortable-placeholder {
+  visibility: visible !important;
+  outline: 1px dashed green;
+  background-color: #9ad39d !important;
+}
+
+.ui-sortable > div:hover {
+  cursor: move;
+}
+
+.tile > .ui-sortable > .ui-sortable-helper {
+  cursor: move;
+  opacity: .5;
+  outline: 1px solid #333;
+}
+
+.template-compose #content .tile {
+  min-height: 100px;
+  margin-bottom: 1em;
+}
+
+.ui-state-default .loading-mask {
+  display: block;
+  opacity: .8 !important;
+  background: #eee url('./img/drophere.png') scroll no-repeat center center;
+}
+
+.ui-state-hover .loading-mask {
+  display: block;
+  background-color: #b4fca3;
+}
+
+.template-compose #content .sortable-tile .list-item:hover {
+  outline: 1px dotted #999;
+}
+
+/* images */
+
+.tile img {
+  &.right {
+    float: right;
+    margin: 0 1em .5em 0;
+  }
+  &.left {
+    float: left;
+    margin: 0 1em .5em 0;
+  }
+}
+
+/* conflicts */
+
+table.invisible {
+  visibility: visible;
+}
+
+.close {
+  opacity: 1;
+}
+
+/*Skins*/
+
+.tile-edge {
+  padding: 5px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.tile-dark {
+  padding: 5px;
+  border-radius: 4px;
+  background: #ddd;
+}
+
+.tile-shadow {
+  padding: 5px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-shadow: 0 5px 10px #c3c3c3;
+}
+
+.textline-sortable-element {
+  &.expired {
+    border: 1px solid red;
+  }
+  .tileProperties .tileExpired {
+    font-weight: bold;
+    color: red;
+  }
+}
+
+/* Tile Calendar */
+
+.cover-calendar-tile .calendar-tile-header {
+  font-weight: bold;
+  line-height: normal;
+  padding: .42em 1em;
+  text-align: center;
+  background: #ddd;
+}
+
+#content .cover-calendar-tile a {
+  &.calendar-tile-prev, &.calendar-tile-next {
+    margin: 0 -.5em;
+    padding: 0 1em;
+    border-bottom: none;
+  }
+}
+
+.cover-calendar-tile a {
+  &.calendar-tile-prev {
+    float: left;
+  }
+  &.calendar-tile-next {
+    float: right;
+  }
+}
diff --git a/webpack/app/scss/_layout.scss b/webpack/app/scss/_layout.scss
new file mode 100644
index 000000000..f4ea19a80
--- /dev/null
+++ b/webpack/app/scss/_layout.scss
@@ -0,0 +1,604 @@
+.layout {
+  position: relative;
+  clear: both;
+  min-height: 130px;
+  margin: 30px 0;
+}
+
+/* bootstrap classes*/
+
+.btn {
+  font-size: 14px;
+  line-height: 20px;
+  display: inline-block;
+  margin-bottom: 0;
+  padding: 4px 12px;
+  cursor: pointer;
+  text-align: center;
+  vertical-align: middle;
+  color: #333;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #a2a2a2;
+  border-radius: 4px 4px 4px 4px;
+  border-image: none;
+  background-color: #f5f5f5;
+  background-image: linear-gradient(to bottom, #fff, #e6e6e6);
+  background-repeat: repeat-x;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  -moz-border-bottom-colors: none;
+  -moz-border-left-colors: none;
+  -moz-border-right-colors: none;
+  -moz-border-top-colors: none;
+}
+
+.btn-inverse {
+  color: #fff;
+  border-color: #222 #222 #000;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  background-color: #363636;
+  background-image: linear-gradient(to bottom, #444, #222);
+  background-repeat: repeat-x;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  *background-color: #222;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444',endColorstr='#ff222222',GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+.btn-small {
+  font-size: 11.9px;
+  padding: 2px 10px;
+  border-radius: 3px 3px 3px 3px;
+}
+
+button.close {
+  padding: 0;
+  cursor: pointer;
+  border: 0 none;
+  background: none repeat scroll 0 0 transparent;
+}
+
+.close {
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 20px;
+  float: right;
+  opacity: .2;
+  color: rgb(0, 0, 0);
+  text-shadow: 0 1px 0 rgb(255, 255, 255);
+}
+
+.modal {
+  position: fixed;
+  z-index: 1050;
+  top: 10%;
+  left: 50%;
+  overflow: auto;
+  width: 560px;
+  max-height: 80%;
+  margin-left: -280px;
+  padding: 15px;
+  border: 1px solid #999;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 6px;
+  outline: 0;
+  background-color: #fff;
+  background-clip: padding-box;
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  *border: 1px solid #999;
+}
+
+.hide {
+  display: none;
+}
+
+.show {
+  display: block;
+}
+
+.btn {
+  &:hover, &:active, &.active, &.disabled, &[disabled] {
+    color: #333;
+    background-color: #e6e6e6;
+    *background-color: #d9d9d9;
+  }
+  &:active, &.active {
+    background-color: #ccc \9;
+  }
+  &:hover {
+    transition: background-position .1s linear;
+    text-decoration: none;
+    color: #333;
+    background-position: 0 -15px;
+  }
+  &:focus {
+    outline: thin dotted #333;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+  }
+  &.active, &:active {
+    outline: 0;
+    background-image: none;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+  &.disabled, &[disabled] {
+    cursor: default;
+    opacity: .65;
+    background-image: none;
+    box-shadow: none;
+    filter: alpha(opacity = 65);
+  }
+}
+
+.btn-inverse {
+  &.active {
+    color: rgba(255, 255, 255, 0.75);
+  }
+  &:hover, &:active, &.active, &.disabled, &[disabled] {
+    color: #fff;
+    background-color: #222;
+    *background-color: #151515;
+  }
+  &:active, &.active {
+    background-color: #080808 \9;
+  }
+}
+
+button.btn::-moz-focus-inner, input[type='submit'].btn::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+/*ROWS*/
+
+.layout {
+  .cover-row {
+    position: relative;
+    display: inline-block;
+    min-height: 80px;
+    margin: 0;
+    padding: 15px 1%;
+    border-top: 1px dashed #ccc;
+  }
+  .cover-column {
+    position: relative;
+    float: left;
+    overflow: hidden;
+    min-height: 80px;
+    padding: 0;
+    border: medium none;
+    outline: 1px dashed #ccc;
+  }
+  .cover-tile {
+    position: relative;
+    min-height: 50px;
+    margin: 15px;
+    outline: 1px solid #999;
+    background-color: #f9f9f9;
+  }
+}
+
+/*COLUMNS*/
+
+/*TILES*/
+
+.tile-placeholder {
+  position: relative;
+  min-height: 50px;
+  margin: 15px;
+  outline: 1px solid #999;
+  background-color: #f9f9f9;
+}
+
+/* SIDEBAR */
+
+#sidebar {
+  .btn {
+    padding: 0 9px;
+    cursor: pointer;
+    span {
+      font-size: 11px;
+      display: block;
+    }
+  }
+  .draggable {
+    cursor: move;
+  }
+  .btn:hover {
+    color: #fff !important;
+  }
+  ul {
+    margin-left: 0;
+    list-style-type: none;
+  }
+  li {
+    display: inline;
+  }
+  &.fixed {
+    position: fixed;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    padding: 17px;
+    opacity: .95;
+    border-bottom: 1px solid #f1f1f1;
+    background: #fff;
+    box-shadow: 0 0 2px 0 #888;
+  }
+}
+
+.ui-sortable-placeholder {
+  display: block;
+  height: 100px;
+  margin: 0 0 15px;
+  outline: 1px solid #999;
+  background-color: #f9f9f9;
+}
+
+.ui-sortable-placeholder-column {
+  position: relative;
+  float: left;
+  min-height: 100px;
+  padding: 0;
+  outline: 1px solid #999;
+  background-color: #f9f9f9;
+  margin-left: 0 !important;
+}
+
+#content .layout {
+  .config-row-link:link, .config-column-link:link, .config-tile-link:link {
+    font-size: 10px;
+    line-height: 1em;
+    position: absolute;
+    top: 0 !important;
+    right: 0;
+    left: auto;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    cursor: pointer;
+    color: #fff;
+    border: medium none;
+  }
+  .config-row-link .config-icon, .config-column-link .config-icon, .config-tile-link .config-icon {
+    display: block;
+    width: 16px;
+    height: 16px;
+    background: transparent url('./img/conf.png') no-repeat center center;
+    background-size: 100%;
+  }
+  .resizer {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: block;
+    width: 24px;
+    height: 14px;
+    /*cursor: e-resize;*/
+    cursor: pointer;
+    background: transparent url('./img/resize-hor.png') no-repeat center center;
+    background-size: 100%;
+  }
+}
+
+.template-layoutedit .ui-dialog .ui-dialog-titlebar-close {
+  height: 20px;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  background: url('./img/remove.png');
+  &:hover {
+    height: 20px;
+    background: url('./img/remove.png') 0 20px;
+  }
+}
+
+.tile-placeholder {
+  background-color: #ddd;
+}
+
+.layout {
+  .row {
+    min-height: 100px;
+    margin: 0 0 15px;
+    padding: 15px 0;
+    outline: 1px dashed blue;
+  }
+  .column {
+    min-height: 100px;
+    padding: 15px 0;
+    outline: 1px dashed #ccc;
+  }
+  .tile-wrapper {
+    padding: 10px;
+  }
+  .guides {
+    position: absolute;
+    top: 0;
+    left: 0;
+    visibility: hidden;
+    width: 100%;
+    height: 100%;
+  }
+  .row-guide {
+    height: 100%;
+    border-left: 1px dotted #333;
+  }
+  .config-tile-link {
+    float: right;
+  }
+}
+
+.ui-resizable-helper {
+  border: 1px dotted #00f;
+}
+
+#news {
+  img {
+    float: right;
+  }
+  p {
+    clear: both;
+  }
+}
+
+.row-droppable {
+  clear: both;
+  width: 100%;
+  &.ui-state-default {
+    display: block;
+    min-height: 20px;
+  }
+}
+
+.layout {
+  .label {
+    font-size: 10px;
+    line-height: 1em;
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-width: 5em;
+    padding-right: 10px;
+    padding-left: 10px;
+    text-align: center;
+  }
+  .columnlabel {
+    top: 0;
+    bottom: auto;
+  }
+  .permitionbutton {
+    font-size: 10px;
+    line-height: 1.5em;
+    position: absolute;
+    top: 0;
+    right: 15px;
+    min-width: 5em;
+    padding-right: 10px;
+    padding-left: 10px;
+    cursor: pointer;
+    text-align: center;
+    color: #fff;
+    background-color: #000;
+  }
+  .to-delete {
+    outline: 1px solid red;
+  }
+}
+
+.add-column {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 10px;
+  height: 49%;
+  cursor: pointer;
+  border-bottom: 1px dashed #ccc;
+  border-left: 1px dashed #ccc;
+  background: #fff url('./img/arrow-right.gif') no-repeat center center;
+}
+
+.remove-column {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 10px;
+  height: 50%;
+  cursor: pointer;
+  border-left: 1px dashed #ccc;
+  background: #fff url('./img/arrow-left.gif') no-repeat center center;
+}
+
+.add-column.disabled {
+  background-color: #eaeaea;
+}
+
+/*ACTION BUTTONS*/
+
+.icon-white {
+  line-height: 14px;
+  display: inline-block;
+  width: 22px;
+  height: 14px;
+  vertical-align: text-top;
+}
+
+#btn-row .icon-white {
+  background: url('./img/rows.png') no-repeat scroll center 0 transparent;
+}
+
+#btn-column .icon-white {
+  background: url('./img/columns.png') no-repeat scroll center 0 transparent;
+}
+
+#btn-tile .icon-white {
+  background: url('./img/tiles.png') no-repeat 0 0;
+}
+
+.layout-actions .icon-white {
+  line-height: 32px;
+  width: 32px;
+  height: 28px;
+}
+
+.ui-draggable-dragging .icon-white, #group-select-list, #tile-select-list, #tile-configure {
+  display: none;
+}
+
+#collective-cover-list-uuids-size {
+  width: 25px;
+}
+
+#content #collective-cover-list-uuids-tiletitle {
+  font-size: 1em;
+  width: 100px;
+}
+
+.tile-name {
+  font-weight: bold;
+  position: relative;
+  top: 10px;
+  text-align: center;
+}
+
+.btn-tile {
+  float: left;
+  margin: 0 auto;
+  padding-right: 10px;
+  text-align: center;
+  span {
+    font-size: 11px;
+    display: block;
+  }
+}
+
+.layout-actions {
+  float: left;
+  margin-right: 15px;
+  padding-right: 15px;
+  border-right: 1px solid #333;
+}
+
+#sidebar {
+  float: left;
+  clear: both;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+/* tiles config */
+
+.modal-fields {
+  position: relative;
+  min-height: 2em;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #d1d1d1;
+}
+
+#configure_tile > div {
+  position: relative;
+  min-height: 2em;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #d1d1d1;
+  > label {
+    float: left;
+    margin-right: 8px;
+    margin-left: 20px;
+  }
+}
+
+#tile-configure .formControls {
+  border-bottom: none;
+}
+
+#configure_tile input[type=radio] {
+  display: none;
+  + label {
+    display: inline-block;
+    padding: 0 10px;
+    text-indent: -2000px;
+  }
+  &:checked + label {
+    display: none;
+  }
+}
+
+.order-box {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.visibility-box {
+  position: absolute;
+  top: 0;
+  left: 0;
+  > span {
+    display: none;
+  }
+}
+
+.visibility-no {
+  background: url('./img/visibility.png') no-repeat 0 4px;
+}
+
+.visibility-yes {
+  background: url('./img/visibility.png') no-repeat -22px 4px;
+}
+
+#tile-configure {
+  .order-box {
+    display: none;
+  }
+  .config-sortable {
+    cursor: move;
+  }
+}
+
+body {
+  .cssclasswidget {
+    cursor: pointer;
+  }
+  .cssclasswidget-classlist {
+    /* https://stackoverflow.com/a/10100209 */
+    &::-webkit-scrollbar {
+      -webkit-appearance: none;
+      width: 7px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background-color: rgba(0, 0, 0, 0.5);
+      -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+    }
+    position: absolute;
+    z-index: 1001;
+    display: flex;
+    overflow-y: scroll;
+    flex-direction: column;
+    max-height: 4rem;
+    padding: .4rem;
+    list-style-type: none !important;
+    border: 1px solid #A9A9A9;
+    background: #FFF;
+    li {
+      margin-bottom: .2rem;
+    }
+    input {
+      vertical-align: bottom;
+    }
+    span {
+      cursor: pointer;
+      padding-left: 1.2rem;
+      margin-left: -1rem;
+    }
+  }
+  .cssclasswidget-overlay {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
diff --git a/webpack/package.json b/webpack/package.json
new file mode 100644
index 000000000..9db8d0945
--- /dev/null
+++ b/webpack/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "cover",
+  "version": "2.1.2",
+  "main": "app/cover.js",
+  "scripts": {
+    "build": "./node_modules/.bin/webpack -p",
+    "debug": "NODE_ENV=debug ./node_modules/.bin/webpack --watch",
+    "watch": "./node_modules/.bin/webpack -p --watch",
+    "test": "NODE_ENV=testing ./node_modules/.bin/karma start --single-run"
+  },
+  "babel": {
+    "presets": [
+      [
+        "env",
+        {
+          "targets": {
+            "browsers": [
+              "last 3 versions"
+            ]
+          }
+        }
+      ]
+    ]
+  },
+  "repository": {},
+  "license": "GPL-2.0",
+  "dependencies": {
+    "sc-recipe-staticresources": "simplesconsultoria/sc.recipe.staticresources#1.1b5"
+  }
+}
diff --git a/webpack/postcss.config.js b/webpack/postcss.config.js
new file mode 100644
index 000000000..b3a6a324d
--- /dev/null
+++ b/webpack/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-env': {
+      browsers: 'last 3 versions'
+    }
+  },
+};
diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js
new file mode 100644
index 000000000..e28b577dd
--- /dev/null
+++ b/webpack/webpack.config.js
@@ -0,0 +1,44 @@
+const makeConfig = require('sc-recipe-staticresources');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+
+module.exports = makeConfig(
+  //name
+  'collective.cover',
+
+  //shortName
+  'cover',
+
+  //path
+  `${__dirname}/../src/collective/cover/browser/static`,
+
+  //publicPath
+  '++resource++collective.cover/',
+
+  //callback
+  function(config, options) {
+    config.entry.unshift(
+      './app/img/dot.png',
+      './app/img/frontpage_icon.png',
+      './app/img/tile-banner.png',
+      './app/img/tile-basic.png',
+      './app/img/tile-calendar.png',
+      './app/img/tile-carousel.png',
+      './app/img/tile-collection.png',
+      './app/img/tile-contentbody.png',
+      './app/img/tile-embed.png',
+      './app/img/tile-file.png',
+      './app/img/tile-generic.png',
+      './app/img/tile-list.png',
+      './app/img/tile-pfg.png',
+      './app/img/tile-richtext.png',
+    );
+    config.plugins.push(
+      new CopyWebpackPlugin([{
+        from: 'app/galleria/*',
+        to: 'galleria',
+        flatten: true
+      }]),
+    );
+  },
+);