/**
* @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);
}
});