How to use @converse/headless - 10 common examples

// Converse.js
// https://conversejs.org
//
// Copyright (c) 2013-2019, the Converse.js developers
// Licensed under the Mozilla Public License (MPLv2)

/**
 * @module converse-autocomplete
 * @description
 * Converse.js plugin which started as a fork of Lea Verou's Awesomplete
 * https://leaverou.github.io/awesomplete/
 */
import converse from "@converse/headless/converse-core";

const { _, Backbone } = converse.env,
      u = converse.env.utils;

converse.plugins.add("converse-autocomplete", {

    initialize () {
        const { _converse } = this;

        _converse.FILTER_CONTAINS = function (text, input) {
            return RegExp(helpers.regExpEscape(input.trim()), "i").test(text);
        };

        _converse.FILTER_STARTSWITH = function (text, input) {
            return RegExp("^" + helpers.regExpEscape(input.trim()), "i").test(text);
        };

        const SORT_BYLENGTH = function (a, b) {

//
// Copyright (c) 2013-2019, the Converse.js developers
// Licensed under the Mozilla Public License (MPLv2)

/**
 * @module converse-autocomplete
 * @description
 * Converse.js plugin which started as a fork of Lea Verou's Awesomplete
 * https://leaverou.github.io/awesomplete/
 */
import converse from "@converse/headless/converse-core";

const { _, Backbone } = converse.env,
      u = converse.env.utils;

converse.plugins.add("converse-autocomplete", {

    initialize () {
        const { _converse } = this;

        _converse.FILTER_CONTAINS = function (text, input) {
            return RegExp(helpers.regExpEscape(input.trim()), "i").test(text);
        };

        _converse.FILTER_STARTSWITH = function (text, input) {
            return RegExp("^" + helpers.regExpEscape(input.trim()), "i").test(text);
        };

        const SORT_BYLENGTH = function (a, b) {
            if (a.length !== b.length) {
                return a.length - b.length;
            }

// Converse.js (A browser based XMPP chat client)
// https://conversejs.org
//
// This is the utilities module.
//
// Copyright (c) 2013-2019, Jan-Carel Brand 
// Licensed under the Mozilla Public License (MPLv2)
//
import { difference, indexOf } from "lodash";
import converse from "@converse/headless/converse-core";
import u from "./core";

const { Strophe, sizzle } = converse.env;

/**
 * The MUC utils object. Contains utility functions related to multi-user chat.
 * @namespace stanza_utils
 */
const muc_utils = {
    /**
     * Given two lists of objects with 'jid', 'affiliation' and
     * 'reason' properties, return a new list containing
     * those objects that are new, changed or removed
     * (depending on the 'remove_absentees' boolean).
     *
     * The affiliations for new and changed members stay the
     * same, for removed members, the affiliation is set to 'none'.
     *
     * The 'reason' property is not taken into account when

// Converse.js
// https://conversejs.org
//
// Copyright (c) 2013-2019, the Converse.js developers
// Licensed under the Mozilla Public License (MPLv2)
/**
 * @module converse-roster
 */
import "@converse/headless/converse-status";
import { get, invoke, isEmpty, isNaN, isString, propertyOf, sum } from "lodash";
import converse from "@converse/headless/converse-core";
import log from "./log";

const { Backbone, Strophe, $iq, $pres, dayjs, sizzle } = converse.env;
const u = converse.env.utils;


converse.plugins.add('converse-roster', {

    dependencies: ['converse-status'],

    initialize () {
        /* The initialize function gets called as soon as the plugin is
         * loaded by converse.js's plugin machinery.
         */
        const { _converse } = this,
              { __ } = _converse;

        _converse.api.settings.update({
            'allow_contact_requests': true,
            'auto_subscribe': false,

// https://conversejs.org
//
// Copyright (c) 2013-2019, Jan-Carel Brand 
// Licensed under the Mozilla Public License (MPLv2)
/**
 * @module converse-minimize
 */
import "converse-chatview";
import { Overview } from "backbone.overview";
import converse from "@converse/headless/converse-core";
import tpl_chatbox_minimize from "templates/chatbox_minimize.html";
import tpl_chats_panel from "templates/chats_panel.html";
import tpl_toggle_chats from "templates/toggle_chats.html";
import tpl_trimmed_chat from "templates/trimmed_chat.html";

const { _ , Backbone, dayjs } = converse.env;
const u = converse.env.utils;


converse.plugins.add('converse-minimize', {
    /* Optional dependencies are other plugins which might be
     * overridden or relied upon, and therefore need to be loaded before
     * this plugin. They are called "optional" because they might not be
     * available, in which case any overrides applicable to them will be
     * ignored.
     *
     * It's possible however to make optional dependencies non-optional.
     * If the setting "strict_plugin_dependencies" is set to true,
     * an error will be raised if the plugin is not found.
     *
     * NB: These plugins need to have already been loaded via require.js.
     */

// Converse.js
// https://conversejs.org
//
// Copyright (c) 2013-2019, the Converse.js developers
// Licensed under the Mozilla Public License (MPLv2)
/**
 * @module converse-status
 */
import { get, isNaN, isObject, isString } from "lodash";
import converse from "@converse/headless/converse-core";

const { Backbone, Strophe, $build, $pres } = converse.env;


converse.plugins.add('converse-status', {

    initialize () {
        const { _converse } = this;

        _converse.XMPPStatus = Backbone.Model.extend({
            defaults () {
                return {"status":  _converse.default_state}
            },

            initialize () {
                this.on('change', item => {
                    if (!isObject(item.changed)) {
                        return;

// Licensed under the Mozilla Public License (MPLv2)
//
/**
 * @module converse-bookmark-views
 * @description
 * Converse.js plugin which adds views for XEP-0048 bookmarks
 */
import "backbone.nativeview";
import "@converse/headless/converse-muc";
import converse from "@converse/headless/converse-core";
import tpl_bookmarks_list from "templates/bookmarks_list.html"
import tpl_chatroom_bookmark_form from "templates/chatroom_bookmark_form.html";
import tpl_chatroom_bookmark_toggle from "templates/chatroom_bookmark_toggle.html";

const { Backbone, Strophe, _ } = converse.env;
const u = converse.env.utils;


converse.plugins.add('converse-bookmark-views', {

    /* Plugin dependencies are other plugins which might be
     * overridden or relied upon, and therefore need to be loaded before
     * this plugin.
     *
     * If the setting "strict_plugin_dependencies" is set to true,
     * an error will be raised if the plugin is not found. By default it's
     * false, which means these plugins are only loaded opportunistically.
     *
     * NB: These plugins need to have already been loaded via require.js.
     */
    dependencies: ["converse-chatboxes", "converse-muc", "converse-muc-views"],

import "formdata-polyfill";
import { compact, debounce, has, isString, uniq, without } from "lodash";
import { OrderedListView } from "backbone.overview";
import SHA1 from 'strophe.js/src/sha1';
import converse from "@converse/headless/converse-core";
import log from "@converse/headless/log";
import tpl_add_contact_modal from "templates/add_contact_modal.html";
import tpl_group_header from "templates/group_header.html";
import tpl_pending_contact from "templates/pending_contact.html";
import tpl_requesting_contact from "templates/requesting_contact.html";
import tpl_roster from "templates/roster.html";
import tpl_roster_filter from "templates/roster_filter.html";
import tpl_roster_item from "templates/roster_item.html";

const { Backbone, Strophe } = converse.env;
const u = converse.env.utils;


converse.plugins.add('converse-rosterview', {

    dependencies: ["converse-roster", "converse-modal", "converse-chatboxviews"],

    initialize () {
        /* The initialize function gets called as soon as the plugin is
         * loaded by converse.js's plugin machinery.
         */
        const { _converse } = this,
              { __ } = _converse;

        _converse.api.settings.update({
            'autocomplete_add_contact': true,
            'allow_chat_pending_contacts': true,

// Copyright (c) 2013-2018, the Converse.js developers
// Licensed under the Mozilla Public License (MPLv2)
/**
 * @module converse-uniview
 * @description
 * A plugin which ensures that only one chat (private or groupchat) is
 * visible at any one time. All other ongoing chats are hidden and kept in the
 * background.
 *
 * This plugin makes sense in mobile, embedded or fullscreen chat environments
 * (as configured by the `view_mode` setting).
 */
import "converse-chatview";
import converse from "@converse/headless/converse-core";

const u = converse.env.utils;


function hideChat (view) {
    if (view.model.get('id') === 'controlbox') { return; }
    u.safeSave(view.model, {'hidden': true});
    view.hide();
}

function visibleChats (_converse) {
    return _converse.chatboxes
        .filter(cb => (cb.get('id') !== 'controlbox' && !cb.get('hidden'))).length > 0;
}


converse.plugins.add('converse-uniview', {
    // It's possible however to make optional dependencies non-optional.

// Converse.js (A browser based XMPP chat client)
// https://conversejs.org
//
// Copyright (c) 2012-2019, Jan-Carel Brand 
// Licensed under the Mozilla Public License (MPLv2)
//
/**
 * @module converse-mam-views
 * @description
 * Views for XEP-0313 Message Archive Management
 */
import converse from "@converse/headless/converse-core";
import { debounce } from 'lodash'


converse.plugins.add('converse-mam-views', {

    dependencies: ['converse-mam', 'converse-chatview', 'converse-muc-views'],

    overrides: {
        // Overrides mentioned here will be picked up by converse.js's
        // plugin architecture they will replace existing methods on the
        // relevant objects or classes.
        //
        // New functions which don't exist yet can also be added.

        ChatBoxView: {
            render () {
                const result = this.__super__.render.apply(this, arguments);
                if (!this.disable_mam) {
                    this.content.addEventListener('scroll', debounce(this.onScroll.bind(this), 100));
                }