new: [web_bootstrap_markdown] Initial release for new text form widget with markdown syntaxe

web_bootstrap_markdown/README.rst

@@ -0,0 +1,44 @@
+==============================
+Add new text field form widget
+==============================
+
+Description
+-----------
+
+This modules add a new widget for text field in form view on Odoo:
+
+- In readonly mode, it use marked to parse and render to html markdown syntaxe.
+- In write mode, use [bootstrap-markdown][1]
+
+[1]: http://www.codingdrama.com/bootstrap-markdown/    "bootstrap-markdown"
+
+Requirements
+------------
+
+Was tested on openerp trunk, 8.0 branch.
+
+Example
+-------
+
+Your XML form view definition should contain::
+
+    ...
+    <field name="description" widget="bootstrap_markdown"/>
+    ...
+
+Note / Todo
+-----------
+
+- Improve user experience with Odoo specific syntaxe
+- Improve user experience with Github specific syntaxe
+- Add a working parsed field in tree view
+- Add ir.attachment support
+- Add images support (with drag'n'drop)
+- ...
+
+Thanks to
+---------
+
+- Nicolas JEUDY <nicolas@sudokeys.com>
+
+If you have questions, please email one of them, or report issue on github

web_bootstrap_markdown/__openerp__.py

@@ -0,0 +1,17 @@
+{
+    'name': 'web_bootstrap_markdown',
+    'version': '1.0',
+    'author': 'Sudokeys',
+    'maintainer': 'Sudokeys',
+    'category': '',
+    'license': 'AGPL-3',
+    'depends': ['base'],
+    'website': 'http://www.sudokey.com',
+    'data': ['views/web_bootstrap_markdown.xml',],
+    "qweb": ["static/src/xml/bootstrap_markdown.xml",
+             ],
+    'demo': [],
+    'installable': True,
+    'auto_install': False,
+    'application': False
+}

web_bootstrap_markdown/static/src/css/bootstrap-markdown.min.css

@@ -0,0 +1 @@
+.md-editor{display:block;border:1px solid #ddd}.md-editor .md-footer,.md-editor>.md-header{display:block;padding:6px 4px;background:#f5f5f5}.md-editor>.md-header{margin:0}.md-editor>.md-preview{background:#fff;border-top:1px dashed #ddd;border-bottom:1px dashed #ddd;min-height:10px;overflow:auto}.md-editor>textarea{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:14px;outline:0;margin:0;display:block;padding:0;width:100%;border:0;border-top:1px dashed #ddd;border-bottom:1px dashed #ddd;border-radius:0;box-shadow:none;background:#eee}.md-editor>textarea:focus{box-shadow:none;background:#fff}.md-editor.active{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.md-editor .md-controls{float:right;padding:3px}.md-editor .md-controls .md-control{right:5px;color:#bebebe;padding:3px 3px 3px 10px}.md-editor .md-controls .md-control:hover{color:#333}.md-editor.md-fullscreen-mode{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;padding:60px 30px 15px;background:#fff!important;border:0!important}.md-editor.md-fullscreen-mode .md-footer{display:none}.md-editor.md-fullscreen-mode .md-input,.md-editor.md-fullscreen-mode .md-preview{margin:0 auto!important;height:100%!important;font-size:20px!important;padding:20px!important;color:#999;line-height:1.6em!important;resize:none!important;box-shadow:none!important;background:#fff!important;border:0!important}.md-editor.md-fullscreen-mode .md-preview{color:#333;overflow:auto}.md-editor.md-fullscreen-mode .md-input:focus,.md-editor.md-fullscreen-mode .md-input:hover{color:#333;background:#fff!important}.md-editor.md-fullscreen-mode .md-header{background:0 0;text-align:center;position:fixed;width:100%;top:20px}.md-editor.md-fullscreen-mode .btn-group{float:none}.md-editor.md-fullscreen-mode .btn{border:0;background:0 0;color:#b3b3b3}.md-editor.md-fullscreen-mode .btn.active,.md-editor.md-fullscreen-mode .btn:active,.md-editor.md-fullscreen-mode .btn:focus,.md-editor.md-fullscreen-mode .btn:hover{box-shadow:none;color:#333}.md-editor.md-fullscreen-mode .md-fullscreen-controls{position:absolute;top:20px;right:20px;text-align:right;z-index:1002;display:block}.md-editor.md-fullscreen-mode .md-fullscreen-controls a{color:#b3b3b3;clear:right;margin:10px;width:30px;height:30px;text-align:center}.md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover{color:#333;text-decoration:none}.md-editor.md-fullscreen-mode .md-editor{height:100%!important;position:relative}.md-editor .md-fullscreen-controls{display:none}.md-nooverflow{overflow:hidden;position:fixed;width:100%}

web_bootstrap_markdown/static/src/css/main.css

@@ -0,0 +1,26 @@
+.openerp .oe_form .oe_form_field_markdown .oe_form_text_content {
+    text-overflow: ellipsis;
+    display: inline-block;
+    white-space: pre-wrap;
+    overflow-x: hidden;
+    width: 100%;
+    background-color: #eee;
+    padding: 10px;
+}
+
+.oe_form_text_markdown pre {
+    background-color: #333;
+    padding: 10px;
+}
+
+.md-editor.md-fullscreen-mode .md-input, .md-editor.md-fullscreen-mode .md-preview {
+    font-size: 13px!important;
+}
+
+.md-editor.md-fullscreen-mode {
+    margin-top: 50px;
+}
+
+.md-editor.md-fullscreen-mode .md-header {
+    top: 70px;
+}

web_bootstrap_markdown/static/src/js/web_bootstrap_markdown.js

@@ -0,0 +1,61 @@
+openerp.web_bootstrap_markdown = function (oe) {
+
+    var _lt = oe.web._lt;
+
+    oe.web.form.widgets.add('bootstrap_markdown', 'openerp.web_bootstrap_markdown.FieldTextMarkDown');
+
+    oe.web_bootstrap_markdown.FieldTextMarkDown = oe.web.form.AbstractField.extend(
+        oe.web.form.ReinitializeFieldMixin,
+        {
+
+            template: 'FieldMarkDown',
+            display_name: _lt('MarkDown'),
+            widget_class: 'oe_form_field_bootstrap_markdown',
+            events: {
+                'change input': 'store_dom_value'
+            },
+
+            init: function (field_manager, node) {
+                this._super(field_manager, node);
+                this.$txt = false;
+
+                this.old_value = null;
+            },
+
+            initialize_content: function () {
+                // Gets called at each redraw of widget
+                //  - switching between read-only mode and edit mode
+                //  - BUT NOT when switching to next object.
+                this.$txt = this.$el.find('textarea[name="' + this.name + '"]');
+                if (!this.get('effective_readonly')) {
+                    this.$txt.markdown({autofocus: false, savable: false});
+                }
+                this.old_value = null; // will trigger a redraw
+            },
+
+            render_value: function () {
+                // Gets called at each redraw/save of widget
+                //  - switching between read-only mode and edit mode
+                //  - when switching to next object.
+
+                var show_value = this.format_value(this.get('value'), '');
+                if (!this.get("effective_readonly")) {
+                    this.$txt.val(show_value);
+                    this.$el.trigger('resize');
+                } else {
+                    // avoids loading markitup...
+                    marked.setOptions({
+                        highlight: function (code) {
+                            return hljs.highlightAuto(code).value;
+                        }
+                    });
+                    this.$el.find('span[class="oe_form_text_content"]').html(marked(show_value));
+                }
+            },
+
+            format_value: function (val, def) {
+                return oe.web.format_value(val, this, def);
+            }
+        }
+    );
+};

web_bootstrap_markdown/static/src/xml/bootstrap_markdown.xml

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- vim:fdl=1:
+-->
+<templates id="template" xml:space="preserve">
+
+    <t t-name="FieldMarkDown">
+
+        <div t-attf-class="oe_form_field oe_form_field_text oe_form_field_markdown #{widget.get('effective_readonly')?'web_markdown_read_only':'web_markdown_edit'}" t-att-style="widget.node.attrs.style">
+
+            <t t-if="!widget.get('effective_readonly')">
+                <textarea rows="6"
+                    t-att-name="widget.name"
+                    class="field_text"
+                    t-att-tabindex="widget.node.attrs.tabindex"
+                    t-att-autofocus="widget.node.attrs.autofocus"
+                    t-att-placeholder="! widget.get('effective_readonly') ? widget.node.attrs.placeholder : ''"
+                    t-att-maxlength="widget.field.size"
+                    ></textarea><img class="oe_field_translate oe_input_icon"
+                    t-if="widget.field.translate and !widget.get('effective_readonly')"
+                    t-att-src='_s + "/web/static/src/img/icons/terp-translate.png"'
+                    width="16"
+                    height="16"
+                    border="0"
+                    />
+                </t>
+                <t t-if="widget.get('effective_readonly')">
+                    <span class="oe_form_text_content"></span>
+                </t>
+            </div>
+        </t>
+
+        <t t-name="FieldTextRst2HtmlReadOnly">
+            <div class="oe_form_field_html oe_form_field_rst2html_readonly"
+                t-att-style="widget.node.attrs.style">
+            </div>
+        </t>
+
+    </templates>

web_bootstrap_markdown/views/web_bootstrap_markdown.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- vim:fdn=3:
+-->
+<openerp>
+    <data>
+        <template id="assets_backend" name="web_bootstrap_markdown assets" inherit_id="web.assets_backend">
+            <xpath expr="." position="inside">
+                <link rel="stylesheet" href="/web_bootstrap_markdown/static/src/css/bootstrap-markdown.min.css"/>
+                <link rel="stylesheet" href="/web_bootstrap_markdown/static/lib/highlight/styles/railscasts.css"/>
+                <link rel="stylesheet" href="/web_bootstrap_markdown/static/src/css/main.css"/>
+                <script type="text/javascript" src="/web_bootstrap_markdown/static/lib/highlight/highlight.min.js"></script>
+                <script type="text/javascript" src="/web_bootstrap_markdown/static/lib/marked/marked.js"></script>
+                <script type="text/javascript" src="/web_bootstrap_markdown/static/lib/bootstrap-markdown/bootstrap-markdown.js"></script>
+                <script type="text/javascript" src="/web_bootstrap_markdown/static/src/js/web_bootstrap_markdown.js"></script>
+            </xpath>
+        </template>
+    </data>
+</openerp>