Converse converse.js

Source: plugins/dragresize/index.js

/**
 * @module converse-dragresize
 * @copyright 2022, the Converse.js contributors
 * @license Mozilla Public License (MPLv2)
 */
import './components/dragresize.js';
import { applyDragResistance, onMouseUp, onMouseMove } from './utils.js';
import DragResizableMixin from './mixin.js';
import { _converse, api, converse } from '@converse/headless/core';

converse.plugins.add('converse-dragresize', {
    /* 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.
     */
    dependencies: ['converse-chatview', 'converse-headlines-view', 'converse-muc-views'],

    enabled (_converse) {
        return _converse.api.settings.get('view_mode') == 'overlayed';
    },

    // Overrides mentioned here will be picked up by converse.js's
    // plugin architecture they will replace existing methods on the
    // relevant objects or classes.
    overrides: {
        ChatBox: {
            initialize () {
                const result = this.__super__.initialize.apply(this, arguments);
                const height = this.get('height');
                const width = this.get('width');
                const save = this.get('id') === 'controlbox' ? a => this.set(a) : a => this.save(a);
                save({
                    'height': applyDragResistance(height, this.get('default_height')),
                    'width': applyDragResistance(width, this.get('default_width'))
                });
                return result;
            }
        }
    },

    initialize () {
        /* The initialize function gets called as soon as the plugin is
         * loaded by converse.js's plugin machinery.
         */
        api.settings.extend({
            'allow_dragresize': true
        });

        Object.assign(_converse.ChatBoxView.prototype, DragResizableMixin);
        Object.assign(_converse.ChatRoomView.prototype, DragResizableMixin);
        if (_converse.ControlBoxView) {
            Object.assign(_converse.ControlBoxView.prototype, DragResizableMixin);
        }

        /************************ BEGIN Event Handlers ************************/
        function registerGlobalEventHandlers () {
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
        }

        function unregisterGlobalEventHandlers () {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        }

        /**
         * This function registers mousedown and mouseup events hadlers to 
         * all iframes in the DOM when converse UI resizing events are called
         * to prevent mouse drag stutter effect which is bad user experience.
         * @function dragresizeOverIframeHandler
         * @param {Object} e - dragging node element.
         */
        function dragresizeOverIframeHandler (e) {
          const iframes = document.getElementsByTagName('iframe');
          for (let iframe of iframes) {
            e.addEventListener('mousedown', () => {
                iframe.style.pointerEvents  = 'none';
            }, { once: true });
            
            e.addEventListener('mouseup', () => {
                iframe.style.pointerEvents  = 'initial';
            }, { once: true });
          }
        }
        
        api.listen.on('registeredGlobalEventHandlers', registerGlobalEventHandlers);
        api.listen.on('unregisteredGlobalEventHandlers', unregisterGlobalEventHandlers);
        api.listen.on('beforeShowingChatView', view => view.initDragResize().setDimensions());
        api.listen.on('startDiagonalResize', dragresizeOverIframeHandler);
        api.listen.on('startHorizontalResize', dragresizeOverIframeHandler);
        api.listen.on('startVerticalResize', dragresizeOverIframeHandler);
    }
});