Parcourir la source

add toolbar utilities plugin

Dele Olajide il y a 4 ans
Parent
commit
a3d59b6631

+ 2 - 2
index.html

@@ -11,11 +11,11 @@
     <script src="./dist/converse.js"></script>
 
     <script src="packages/download-dialog/dist/download-dialog.js"></script>
+    <script src="packages/toolbar-utilities/toolbar-utilities.js"></script>
 
     <link type="text/css" rel="stylesheet" media="screen" href="packages/stickers/stickers.css" />
     <script src="packages/stickers/stickers.js"></script>
 
-
 </head>
 <body class="reset">
     <div class="converse-content" style="display:none">
@@ -65,7 +65,7 @@
         discover_connection_methods: false,
         bosh_service_url: 'https://conversejs.org/http-bind/',
         view_mode: 'fullscreen',
-        whitelisted_plugins: ["download-dialog", "stickers"]
+        whitelisted_plugins: ["download-dialog", "stickers", "toolbar-utilities"]
     };
 
     converse.initialize(config);

+ 18 - 0
packages/toolbar-utilities/readme.md

@@ -0,0 +1,18 @@
+# Toolbar utilities plugin for converse.js
+
+<img src="https://github.com/conversejs/community-plugins/blob/master/packages/toolbar-utilities/toolbar-utilities.png" />
+
+## Overview
+This plugin adds additional icons to a chatbox toolbar in order to perform the following common actions.
+
+- scroll to the bottom of the chat
+- trash (clear) the chat history stored local storage
+- refresh (close/open) the chatbox
+
+## Install
+See https://m.conversejs.org/docs/html/plugin_development.html on how to install this plugin
+
+See index.html for example usage
+
+## How to use
+Click on the appropriate icon to perform the associated action.

+ 100 - 0
packages/toolbar-utilities/toolbar-utilities.js

@@ -0,0 +1,100 @@
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(["converse"], factory);
+    } else {
+        factory(converse);
+    }
+}(this, function (converse) {
+    let Strophe, $iq, $msg, $pres, $build, b64_sha1, _ , __, dayjs, html, _converse;
+
+    converse.plugins.add("toolbar-utilities", {
+        'dependencies': [],
+
+        'initialize': function () {
+            _converse = this._converse;
+
+            Strophe = converse.env.Strophe;
+            $iq = converse.env.$iq;
+            $msg = converse.env.$msg;
+            $pres = converse.env.$pres;
+            $build = converse.env.$build;
+            b64_sha1 = converse.env.b64_sha1;
+            _ = converse.env._;
+            __ = _converse.__;
+            dayjs = converse.env.dayjs;
+            html = converse.env.html;
+
+            _converse.api.listen.on('getToolbarButtons', function(toolbar_el, buttons)
+            {
+                console.debug("getToolbarButtons", toolbar_el.model.get("jid"));
+
+                buttons.push(html`
+                    <button class="toolbar-utilities-scroll" title="${__('Scroll to the bottom')}" @click=${scrollToBottom} .chatview=${this.chatview}/>
+                        <converse-icon class="fa fa-angle-double-down" size="1em"></converse-icon>
+                    </button>
+                `);
+
+                buttons.push(html`
+                    <button class="toolbar-utilities-thrash" title="${__('Trash chat history')}" @click=${trashHistory} .chatview=${this.chatview}/>
+                        <converse-icon class="far fa-trash-alt" size="1em"></converse-icon>
+                    </button>
+                `);
+
+                buttons.push(html`
+                    <button class="toolbar-utilities-refresh" title="${__('Refresh chat history')}" @click=${refreshHistory} .chatview=${this.chatview}/>
+                        <converse-icon class="fa fa-sync" size="1em"></converse-icon>
+                    </button>
+                `);
+
+                return buttons;
+            });
+
+        }
+    });
+
+    function refreshHistory(ev)
+    {
+        const openChatbox = function(view)
+        {
+            let jid = view.model.get("jid");
+            let type = view.model.get("type");
+
+            console.debug("openChatbox", jid, type);
+
+            if (jid)
+            {
+                if (type == "chatbox") _converse.api.chats.open(jid, {'bring_to_foreground': true}, true);
+                else
+                if (type == "chatroom") _converse.api.rooms.open(jid, {'bring_to_foreground': true}, true);
+            }
+        }
+
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        const view = this.chatview;
+
+        if (view)
+        {
+            view.close();
+            setTimeout(function() { openChatbox(view) });
+        }
+    }
+
+    function trashHistory(ev)
+    {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        this.chatview.clearMessages();
+    }
+
+    function scrollToBottom(ev)
+    {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        this.chatview.viewUnreadMessages();
+    }
+
+}));

BIN
packages/toolbar-utilities/toolbar-utilities.png