From e56953d94e71854ed57540743a6a00e6ceafe9ba Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@openerp.com>
Date: Fri, 6 Sep 2013 10:50:45 +0200
Subject: [PATCH] [ADD] new table-creation button

bzr revid: xmo@openerp.com-20130906085045-zpemzy2akh3bz7q3
---
 addons/website/static/src/css/editor.css      | 13 +++-
 addons/website/static/src/css/editor.sass     | 13 +++-
 .../website/static/src/js/website.editor.js   | 66 ++++++++++++++++++-
 .../website/static/src/xml/website.editor.xml | 12 ++++
 4 files changed, 95 insertions(+), 9 deletions(-)

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 785b4ffe1ea..5c798b36d57 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -1,4 +1,3 @@
-@charset "utf-8";
 /* ---- CKEditor Minimal Reset ---- */
 .navbar.navbar-inverse .cke_chrome {
   border: none;
@@ -21,11 +20,10 @@
   position: fixed;
   top: 0;
   right: 0;
-  z-index: 10;
   display: block;
   width: 100%;
   padding: 2px;
-  margin: 0px;
+  margin: 0;
   z-index: 10000;
   background-color: #414141;
   background: -webkit-linear-gradient(#646060, #262626);
@@ -83,6 +81,15 @@
   top: 2px;
 }
 
+/* ---- EDITOR BAR ---- */
+table.editorbar-panel {
+  cursor: pointer;
+  width: 100%;
+}
+table.editorbar-panel td.selected {
+  background-color: #b1c9d9;
+}
+
 /* ---- SNIPPET EDITOR ---- */
 .oe_snippets {
   position: fixed;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index ec009b64ec2..4897ff0c004 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -21,11 +21,10 @@
     position: fixed
     top: 0
     right: 0
-    z-index: 10
     display: block
     width: 100%
     padding: 2px
-    margin: 0px
+    margin: 0
     z-index: 10000
     background-color: #414141
     background: -webkit-linear-gradient(#646060, #262626)
@@ -73,6 +72,14 @@
         position: relative !important
         top: +2px
 
+/* ---- EDITOR BAR ---- */
+
+table.editorbar-panel
+    cursor: pointer
+    width: 100%
+    td.selected
+        background-color: #b1c9d9
+
 /* ---- SNIPPET EDITOR ---- */
 
 .oe_snippets
@@ -261,4 +268,4 @@ $remove_color: $icon_close
     .oe_remove
         color: $remove_color
     .oe_seo_suggestion
-        cursor: pointer
\ No newline at end of file
+        cursor: pointer
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 32e77acedab..3ccd331cc48 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -53,9 +53,69 @@
                     canUndo: false,
                     editorFocus: true,
                 });
-
             }
         });
+        CKEDITOR.plugins.add( 'tablebutton', {
+            requires: 'panelbutton,floatpanel',
+            init: function( editor ) {
+                var label = "Table";
+
+                editor.ui.add('TableButton', CKEDITOR.UI_PANELBUTTON, {
+                    label: label,
+                    title: label,
+                    // use existing 'table' icon
+                    icon: 'table',
+                    modes: { wysiwyg: true },
+                    editorFocus: true,
+                    // panel opens in iframe, @css is CSS file <link>-ed within
+                    // frame document, @attributes are set on iframe itself.
+                    panel: {
+                        css: '/website/static/src/css/editor.css',
+                        attributes: { 'role': 'listbox', 'aria-label': label, },
+                    },
+
+                    onBlock: function (panel, block) {
+                        block.autoSize = true;
+                        block.element.setHtml(openerp.qweb.render('website.editor.table.panel', {
+                            rows: 5,
+                            cols: 5,
+                        }));
+
+                        var $table = $(block.element.$).on('mouseenter', 'td', function (e) {
+                            var $e = $(e.target);
+                            var y = $e.index() + 1;
+                            var x = $e.closest('tr').index() + 1;
+
+                            $table
+                                .find('td').removeClass('selected').end()
+                                .find('tr:lt(' + String(x) + ')')
+                                .children().filter(function () { return $(this).index() < y; })
+                                .addClass('selected');
+                        }).on('click', 'td', function (e) {
+                            var $e = $(e.target);
+
+                            var table = new CKEDITOR.dom.element(
+                                $(openerp.qweb.render('website.editor.table', {
+                                    rows: $e.closest('tr').index() + 1,
+                                    cols: $e.index() + 1,
+                                }))[0]);
+
+                            editor.insertElement(table);
+                            setTimeout(function () {
+                                var firstCell = new CKEDITOR.dom.element(table.$.rows[0].cells[0]);
+                                var range = editor.createRange();
+                                range.moveToPosition(firstCell, CKEDITOR.POSITION_AFTER_START);
+                                range.select();
+                            }, 0);
+                        });
+
+                        block.element.getDocument().getBody().setStyle('overflow', 'hidden');
+                        CKEDITOR.ui.fire('ready', this);
+                    },
+                });
+            }
+        });
+
         var editor = new website.EditorBar();
         var $body = $(document.body);
         editor.prependTo($body);
@@ -262,7 +322,7 @@
                 autoParagraph: false,
                 filebrowserImageUploadUrl: "/website/attach",
                 // Support for sharedSpaces in 4.x
-                extraPlugins: 'sharedspace,customdialogs',
+                extraPlugins: 'sharedspace,customdialogs,tablebutton',
                 // Place toolbar in controlled location
                 sharedSpaces: { top: 'oe_rte_toolbar' },
                 toolbar: [
@@ -278,7 +338,7 @@
                         "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"
                     ]},{
                     name: 'special', items: [
-                        "Image", "Table"
+                        "Image", "TableButton"
                     ]},{
                     name: 'styles', items: [
                         "Styles"
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 927ad3df66e..5b2673f16d1 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -116,4 +116,16 @@
             </div>
         </div>
     </t>
+    <t t-name="website.editor.table.panel">
+        <table class="editorbar-panel">
+            <tr t-foreach="rows"><td t-foreach="cols">&#8203;</td></tr>
+        </table>
+    </t>
+    <t t-name="website.editor.table">
+        <table class="table table-bordered table-responsive">
+            <tbody>
+                <tr t-foreach="rows"><td t-foreach="cols">&#8203;</td></tr>
+            </tbody>
+        </table>
+    </t>
 </templates>