[IMP] im_livechat: add copy to clipboard for the website live chat widget code

This commit adds 2 buttons to copy directly the code needed to add the livechat in the website.
2017-09-14 10:54:00 +02:00
parent 5228daf195
commit ad79fed261
9 changed files with 181 additions and 7 deletions
@@ -34,9 +34,7 @@ Help your customers with this chat, and analyse their feedback.
        'data/mail_shortcode_demo.xml',
    ],
    'depends': ["mail", "rating"],
-    'qweb': [
-        'static/src/xml/im_livechat_backend.xml',
-    ],
+    'qweb': ['static/src/xml/*.xml'],
    'installable': True,
    'auto_install': False,
    'application': True,
@@ -0,0 +1,86 @@
+odoo.define('im_livechat.copy_clipboard', function (require) {
+"use strict";
+
+var core = require('web.core');
+var field_registry = require('web.field_registry');
+var qweb = core.qweb;
+
+var _t = core._t;
+var FieldText = field_registry.get('text');
+var FieldChar = field_registry.get('char');
+
+var CopyClipboard = {
+
+    /**
+     * @override
+     */
+    destroy: function () {
+        this._super.apply(this, arguments);
+        this.clipboard.destroy();
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Instatiates the Clipboad lib.
+     */
+    _initClipboard: function () {
+        var self = this;
+        var $clipboardBtn = this.$('.o_clipboard_button');
+        $clipboardBtn.tooltip({title: _t('Copied !'), trigger: 'manual', placement: 'right'});
+        this.clipboard = new Clipboard($clipboardBtn.get(0), {
+            text: function () {
+                return self.value.trim();
+            }
+        });
+        this.clipboard.on('success', function () {
+            _.defer(function () {
+                $clipboardBtn.tooltip('show');
+                _.delay(function () {
+                    $clipboardBtn.tooltip('hide');
+                }, 800);
+            });
+        });
+    },
+};
+
+var TextCopyClipboard = FieldText.extend(CopyClipboard, {
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _render: function() {
+        this._super.apply(this, arguments);
+        this.$el.addClass('o_field_copy');
+        this.$el.append($(qweb.render('CopyClipboardText')));
+        this._initClipboard();
+    }
+});
+
+var CharCopyClipboard = FieldChar.extend(CopyClipboard, {
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _render: function() {
+        this._super.apply(this, arguments);
+        this.$el.addClass('o_field_copy');
+        this.$el.append($(qweb.render('CopyClipboardChar')));
+        this._initClipboard();
+    }
+});
+
+field_registry
+    .add('CopyClipboardText', TextCopyClipboard)
+    .add('CopyClipboardChar', CharCopyClipboard);
+});
@@ -28,4 +28,4 @@ chat_manager.bus.on('new_message', null, function (msg) {
    });
 });

-});
+});
@@ -0,0 +1,20 @@
+// less properties for copy widget
+.o_field_copy {
+    position: relative;
+    border-radius: 5px;
+    border: 1px solid @btn-primary-border;
+    font-size: @font-size-small;
+    color: @odoo-brand-optional;
+    font-weight: @badge-font-weight;
+    text-align: center;
+    .o_clipboard_button {
+        &.o_btn_text_copy {
+            position: absolute;
+            top: 0;
+            right: 0;
+        }
+        &.o_btn_char_copy {
+            padding-top: 2px;
+        }
+    }
+}
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="CopyClipboardText">
+        <button class="btn btn-xs btn-primary o_clipboard_button o_btn_text_copy">
+            <i class="fa fa-clipboard"/> Copy Text
+        </button>
+    </t>
+
+    <t t-name="CopyClipboardChar">
+        <button class="btn btn-xs btn-primary o_clipboard_button o_btn_char_copy">
+            <i class="fa fa-clipboard"/> Copy Text
+        </button>
+    </t>
+
+</templates>
@@ -0,0 +1,48 @@
+odoo.define('im_livechat.copy_clipboard_tests', function (require) {
+"use strict";
+
+var FormView = require('web.FormView');
+var testUtils = require('web.test_utils');
+
+var createView = testUtils.createView;
+
+QUnit.module('copy_clipboard', {
+    beforeEach: function () {
+        this.data = {
+            partner: {
+                fields: {
+                    script_external: {string: "Script External", type: "text"},
+                    web_page: {string: "Web page link", type: "char"}
+                },
+                records: [{
+                    id: 1,
+                    script_external:'Random Text',
+                    web_page: 'web page links'
+                },],
+            },
+        };
+    }
+});
+
+QUnit.test('im_livechat: Copy to clipboard button', function (assert) {
+    assert.expect(2);
+
+    var form = createView({
+        View: FormView,
+        model: 'partner',
+        data: this.data,
+        arch: '<form string="Partners">' +
+                '<sheet>' +
+                        '<div>' +
+                            '<field name="script_external" widget="CopyClipboardText"/>' +
+                            '<field name="web_page" widget="CopyClipboardChar"/>' +
+                        '</div>' +
+                '</sheet>' +
+            '</form>',
+    });
+    assert.strictEqual(form.$('.o_clipboard_button.o_btn_text_copy').length, 1,"Should have copy button on text type field");
+    assert.strictEqual(form.$('.o_clipboard_button.o_btn_char_copy').length, 1,"Should have copy button on char type field");
+    form.destroy();
+});
+
+});
@@ -8,9 +8,16 @@
        <template id="assets_backend" name="im_livechat assets backend" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/im_livechat/static/src/js/im_livechat_backend.js"></script>
+                <script type="text/javascript" src="/im_livechat/static/src/js/copy_clipboard.js"></script>
+                <link rel="stylesheet" href="/im_livechat/static/src/less/copy_clipboard.less"/>
            </xpath>
        </template>

+        <template id="qunit_suite" name="im_livechat tests" inherit_id="web.qunit_suite">
+            <xpath expr="//script[contains(@src, '/web/static/tests/views/form_tests.js')]" position="after">
+                <script type="text/javascript" src="/im_livechat/static/tests/copy_clipboard_tests.js"></script>
+            </xpath>
+        </template>

        <!--
            Template rendering the external HTML support page
@@ -133,11 +133,11 @@
                        <p>
                            Copy and paste this code into your website, within the &lt;head&gt; tag:
                        </p>
-                        <field name="script_external" readonly="1" class="badge"/>
+                        <field name="script_external" readonly="1" widget="CopyClipboardText"/>
                        <p>
                            or copy this url and send it by email to your customers or suppliers:
                        </p>
-                        <field name="web_page" readonly="1" class="badge"/>
+                        <field name="web_page" readonly="1" widget="CopyClipboardChar"/>
                        <p>For website built with Odoo CMS, please install the website_livechat module. Then go to Website Admin > Configuration > Settings and select the Website Live Chat Channel you want to add on your website.</p>
                    </div>

@@ -1347,7 +1347,6 @@
    </div>
 </t>

-
 <t t-name="BaseSetting.Tabs">
    <t t-foreach="tabItems" t-as="tab">
        <div class="tab" t-attf-data-key="#{tab.key}">