[IMP] Webeditor as a webclient module (with more hackery)

bzr revid: fme@openerp.com-20130627161536-cp6mdz8junts3316

addons/website/__openerp__.py

@@ -2,8 +2,7 @@
     'name': 'Website',
     'category': 'CMS',
     'version': '1.0',
-    'description':
-        """
+    'description': """
 OpenERP Website CMS
 ===================
 
@@ -13,5 +12,8 @@ OpenERP Website CMS
     'installable': True,
     'data': [
         'views/test.xml'
-    ]
+    ],
+    'js': ['static/src/js/website.js'],
+    'css': ['static/src/css/website.css'],
+    'qweb': ['static/src/xml/*.xml'],
 }

addons/website/controllers/main.py

@@ -10,7 +10,7 @@ from openerp.addons.web.http import request
 def get_html_head():
     head = ['<script type="text/javascript" src="%s"></script>' % i for i in manifest_list('js', db=request.db)]
     head += ['<link rel="stylesheet" href="%s">' % i for i in manifest_list('css', db=request.db)]
-    head += ['<script type="text/javascript" src="/website/static/src/js/website_editor.js"></script>']
+    head += ['<script type="text/javascript" src="/website/static/src/js/website_bootstrap.js"></script>']
     return "\n        ".join(head)
 
 # WIIIP !!
@@ -23,13 +23,13 @@ module_template = Template("""
                 </div>
             </div>
             <div
-                class='oe_app_name editable'
+                class='oe_app_name oe_editable'
                 data-model='ir.module.module'
                 data-id='{{ module.id }}'
                 data-field='shortdesc'
             >{{ module.shortdesc }}</div>
             <div
-                class='oe_app_descr editable'
+                class='oe_app_descr oe_editable'
                 data-model='ir.module.module'
                 data-id='{{ module.id }}'
                 data-field='summary'

addons/website/static/src/css/website.css

@@ -0,0 +1,24 @@
+@charset "utf-8";
+.oe_website_editorbar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 10;
+  display: block;
+  width: 100%;
+  padding: 10px;
+  margin: 0px;
+  background: #e9e9e9;
+  box-sizing: border-box;
+}
+.oe_website_editorbar li {
+  display: inline;
+}
+
+.oe_website_editor_container .oe_editable {
+  outline: 1px dotted green;
+}
+
+.oe_website_editor_container .oe_editable.oe_dirty {
+  outline: 1px dotted red;
+}

addons/website/static/src/css/website.sass

@@ -0,0 +1,22 @@
+@charset "utf-8"
+
+.oe_website_editorbar
+    position: fixed
+    top: 0
+    right: 0
+    z-index: 10
+    display: block
+    width: 100%
+    padding: 10px
+    margin: 0px
+    background: #e9e9e9
+    box-sizing: border-box
+
+    li
+        display: inline
+
+.oe_website_editor_container .oe_editable
+    outline: 1px dotted green
+.oe_website_editor_container .oe_editable.oe_dirty
+    outline: 1px dotted red
+

addons/website/static/src/js/website.js

@@ -0,0 +1,72 @@
+openerp.website = function(instance) {
+
+instance.website.EditorBar = instance.web.Widget.extend({
+    template: 'Website.EditorBar',
+    events: {
+        'click button[data-action=save]': 'save',
+        'click button[data-action=cancel]': 'cancel',
+    },
+    container: 'body',
+    start: function() {
+        var self = this;
+        var r = this._super.apply(this, arguments);
+        this.$container = $(this.container);
+        this.$container.addClass('oe_website_editor_container');
+        this.$container.find('.oe_editable').attr('contentEditable', 'true');
+        this.$('button').prop('disabled', true);
+        // .click(function (e) {
+        //     e.stopPropagation();
+        //     e.preventDefault();
+        // });
+        $('body').on("keypress.oe_webeditor", ".oe_editable", function(e) {
+            var $e = $(e.currentTarget);
+            if (!$e.is('.oe_dirty')) {
+                $e.addClass('oe_dirty');
+                self.$('button').prop('disabled', false);
+                // TODO: Are we going to use a meta-data flag in order to know if the field shall be text or html ?
+                $e.data('original', $e.text());
+            }
+            if (e.which == 13) {
+                $e.blur();
+                e.preventDefault();
+            }
+        });
+        return r;
+    },
+    save: function () {
+        var self = this;
+        var defs = [];
+        this.$container.find('.oe_dirty').each(function () {
+            var $el = $(this);
+            var def = self.saveElement($el).then(function () {
+                $el.removeClass('oe_dirty');
+            }).fail(function () {
+                var data = $el.data();
+                self.do_warn('Error', _.str.sprintf('Could not save %s#%d#%s', data.model, data.id, data.field));
+            });
+            defs.push(def);
+        });
+        return $.when.apply(null, defs).then(function () {
+            self.$('button').prop('disabled', true);
+        });
+    },
+    saveElement: function ($el) {
+        var data = $el.data();
+        var update = {};
+        update[data.field] = $el.text();
+        return (new instance.web.DataSet(this, data.model)).write(data.id, update);
+    },
+    cancel: function () {
+        this.$container.find('.oe_dirty').each(function () {
+            $(this).removeClass('oe_dirty').text($(this).data('original'));
+        });
+        this.$('button').prop('disabled', true);
+    },
+    destroy: function () {
+        this._super.apply(this, arguments);
+        this.$container.removeClass('oe_website_editor_container');
+        this.$container.find('.oe_editable').removeAttr('contentEditable');
+    }
+});
+
+};

addons/website/static/src/js/website_bootstrap.js

@@ -3,12 +3,14 @@
     // TODO: Webclient research : use iframe embedding mode
     //       Meanwhile, let's HACK !!!
     var $web = $('<div style="display: none;"/>').appendTo('body');
-    var s = new openerp.init(['web']);
+    var s = new openerp.init(['web', 'website']);
     s.web.WebClient.bind_hashchange = s.web.blockUI = s.web.unblockUI = function() {};
     s.web.WebClient.include({ do_push_state: function() {} });
     var wc = new s.web.WebClient();
     wc.appendTo($web);
     var instance = openerp.instances[wc.session.name];
+    // Another hack since we have no callback when webclient has loaded modules.
+    instance.web.qweb.add_template('/website/static/src/xml/website.xml');
 
     setTimeout(function () {
         // HACKY HACK YUCK YUCK !!
@@ -23,25 +25,8 @@
     }, 2000);
 
     $(function() {
-        $('.editable').css('outline', '1px dotted red').attr('contentEditable', 'true').click(function (e) {
-            e.stopPropagation();
-            e.preventDefault();
-        });
-        $('body').on("keypress", ".editable", function(e) {
-            if (e.which == 13) {
-                var $el = $(e.currentTarget);
-                var data = $el.data();
-                var update = {};
-                // TODO: Are we going to use a meta-data flag in order to know if the field shall be text or html ?
-                update[data.field] = $el.text();
-                (new instance.web.DataSet(this, data.model)).write(data.id, update).done(function() {
-                    $el.blur();
-                    instance.webclient.do_notify('Save', _.str.sprintf('%s#%d#%s saved', data.model, data.id, data.field));
-                }).fail(function () {
-                    console.error('fail');
-                });
-                e.preventDefault();
-            }
-        });
+        var editor = new instance.website.EditorBar(instance.webclient);
+        editor.prependTo($('body'));
+        $('body').css('padding-top', editor.$el.outerHeight());
     });
 })();

addons/website/static/src/xml/website.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- vim:fdl=1:
+-->
+<templates id="template" xml:space="preserve">
+<t t-name="Website.EditorBar">
+    <ul class="oe_website_editorbar openerp">
+        <li><strong>OpenERP Website Editor</strong></li>
+        <li class="oe_right"><button data-action="save">Save</button></li>
+        <li class="oe_right"><button data-action="cancel">Cancel</button></li>
+    </ul>
+</t>
+</templates>