Move the drag-resize code into a separate component.
This commit is contained in:
JC Brand
parent
332a0d920d
commit
a6c3b46237
|
|
@ -48,6 +48,7 @@ require.config({
|
|||
"converse-chatview": "src/converse-chatview",
|
||||
"converse-controlbox": "src/converse-controlbox",
|
||||
"converse-core": "src/converse-core",
|
||||
"converse-dragresize": "src/converse-dragresize",
|
||||
"converse-headline": "src/converse-headline",
|
||||
"converse-mam": "src/converse-mam",
|
||||
"converse-minimize": "src/converse-minimize",
|
||||
|
|
@ -242,6 +243,7 @@ if (typeof define !== 'undefined') {
|
|||
"converse-ping", // XEP-0199 XMPP Ping
|
||||
"converse-notification",// HTML5 Notifications
|
||||
"converse-minimize", // Allows chat boxes to be minimized
|
||||
"converse-dragresize", // Allows chat boxes to be resized by dragging them
|
||||
"converse-headline", // Support for headline messages
|
||||
/* END: Removable components */
|
||||
|
||||
|
|
|
|||
|
|
@ -68,14 +68,10 @@
|
|||
'click .toggle-smiley': 'toggleEmoticonMenu',
|
||||
'click .toggle-smiley ul li': 'insertEmoticon',
|
||||
'click .toggle-clear': 'clearMessages',
|
||||
'click .toggle-call': 'toggleCall',
|
||||
'mousedown .dragresize-top': 'onStartVerticalResize',
|
||||
'mousedown .dragresize-left': 'onStartHorizontalResize',
|
||||
'mousedown .dragresize-topleft': 'onStartDiagonalResize'
|
||||
'click .toggle-call': 'toggleCall'
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
$(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
|
||||
this.model.messages.on('add', this.onMessageAdded, this);
|
||||
this.model.on('show', this.show, this);
|
||||
this.model.on('destroy', this.hide, this);
|
||||
|
|
@ -103,7 +99,6 @@
|
|||
)
|
||||
)
|
||||
);
|
||||
this.setWidth();
|
||||
this.$content = this.$el.find('.chat-content');
|
||||
this.renderToolbar().renderAvatar();
|
||||
converse.emit('chatBoxOpened', this);
|
||||
|
|
@ -111,14 +106,6 @@
|
|||
return this.showStatusMessage();
|
||||
},
|
||||
|
||||
setWidth: function () {
|
||||
// If a custom width is applied (due to drag-resizing),
|
||||
// then we need to set the width of the .chatbox element as well.
|
||||
if (this.model.get('width')) {
|
||||
this.$el.css('width', this.model.get('width'));
|
||||
}
|
||||
},
|
||||
|
||||
afterMessagesFetched: function () {
|
||||
// Provides a hook for plugins, such as converse-mam.
|
||||
return;
|
||||
|
|
@ -140,56 +127,6 @@
|
|||
return this;
|
||||
},
|
||||
|
||||
adjustToViewport: function () {
|
||||
/* Event handler called when viewport gets resized. We remove
|
||||
* custom width/height from chat boxes.
|
||||
*/
|
||||
var viewport_width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
||||
var viewport_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
||||
if (viewport_width <= 480) {
|
||||
this.model.set('height', undefined);
|
||||
this.model.set('width', undefined);
|
||||
} else if (viewport_width <= this.model.get('width')) {
|
||||
this.model.set('width', undefined);
|
||||
} else if (viewport_height <= this.model.get('height')) {
|
||||
this.model.set('height', undefined);
|
||||
}
|
||||
},
|
||||
|
||||
initDragResize: function () {
|
||||
/* Determine and store the default box size.
|
||||
* We need this information for the drag-resizing feature.
|
||||
*/
|
||||
var $flyout = this.$el.find('.box-flyout');
|
||||
if (typeof this.model.get('height') === 'undefined') {
|
||||
var height = $flyout.height();
|
||||
var width = $flyout.width();
|
||||
this.model.set('height', height);
|
||||
this.model.set('default_height', height);
|
||||
this.model.set('width', width);
|
||||
this.model.set('default_width', width);
|
||||
}
|
||||
var min_width = $flyout.css('min-width');
|
||||
var min_height = $flyout.css('min-height');
|
||||
this.model.set('min_width', min_width.endsWith('px') ? Number(min_width.replace(/px$/, '')) :0);
|
||||
this.model.set('min_height', min_height.endsWith('px') ? Number(min_height.replace(/px$/, '')) :0);
|
||||
// Initialize last known mouse position
|
||||
this.prev_pageY = 0;
|
||||
this.prev_pageX = 0;
|
||||
if (converse.connection.connected) {
|
||||
this.height = this.model.get('height');
|
||||
this.width = this.model.get('width');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
setDimensions: function () {
|
||||
// Make sure the chat box has the right height and width.
|
||||
this.adjustToViewport();
|
||||
this.setChatBoxHeight(this.model.get('height'));
|
||||
this.setChatBoxWidth(this.model.get('width'));
|
||||
},
|
||||
|
||||
clearStatusNotification: function () {
|
||||
this.$content.find('div.chat-event').remove();
|
||||
},
|
||||
|
|
@ -569,72 +506,6 @@
|
|||
}
|
||||
},
|
||||
|
||||
onStartVerticalResize: function (ev) {
|
||||
if (!converse.allow_dragresize) { return true; }
|
||||
// Record element attributes for mouseMove().
|
||||
this.height = this.$el.children('.box-flyout').height();
|
||||
converse.resizing = {
|
||||
'chatbox': this,
|
||||
'direction': 'top'
|
||||
};
|
||||
this.prev_pageY = ev.pageY;
|
||||
},
|
||||
|
||||
onStartHorizontalResize: function (ev) {
|
||||
if (!converse.allow_dragresize) { return true; }
|
||||
this.width = this.$el.children('.box-flyout').width();
|
||||
converse.resizing = {
|
||||
'chatbox': this,
|
||||
'direction': 'left'
|
||||
};
|
||||
this.prev_pageX = ev.pageX;
|
||||
},
|
||||
|
||||
onStartDiagonalResize: function (ev) {
|
||||
this.onStartHorizontalResize(ev);
|
||||
this.onStartVerticalResize(ev);
|
||||
converse.resizing.direction = 'topleft';
|
||||
},
|
||||
|
||||
setChatBoxHeight: function (height) {
|
||||
if (height) {
|
||||
height = converse.applyDragResistance(height, this.model.get('default_height'))+'px';
|
||||
} else {
|
||||
height = "";
|
||||
}
|
||||
this.$el.children('.box-flyout')[0].style.height = height;
|
||||
},
|
||||
|
||||
setChatBoxWidth: function (width) {
|
||||
if (width) {
|
||||
width = converse.applyDragResistance(width, this.model.get('default_width'))+'px';
|
||||
} else {
|
||||
width = "";
|
||||
}
|
||||
this.$el[0].style.width = width;
|
||||
this.$el.children('.box-flyout')[0].style.width = width;
|
||||
},
|
||||
|
||||
resizeChatBox: function (ev) {
|
||||
var diff;
|
||||
if (converse.resizing.direction.indexOf('top') === 0) {
|
||||
diff = ev.pageY - this.prev_pageY;
|
||||
if (diff) {
|
||||
this.height = ((this.height-diff) > (this.model.get('min_height') || 0)) ? (this.height-diff) : this.model.get('min_height');
|
||||
this.prev_pageY = ev.pageY;
|
||||
this.setChatBoxHeight(this.height);
|
||||
}
|
||||
}
|
||||
if (converse.resizing.direction.indexOf('left') !== -1) {
|
||||
diff = this.prev_pageX - ev.pageX;
|
||||
if (diff) {
|
||||
this.width = ((this.width+diff) > (this.model.get('min_width') || 0)) ? (this.width+diff) : this.model.get('min_width');
|
||||
this.prev_pageX = ev.pageX;
|
||||
this.setChatBoxWidth(this.width);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
clearMessages: function (ev) {
|
||||
if (ev && ev.preventDefault) { ev.preventDefault(); }
|
||||
var result = confirm(__("Are you sure you want to clear the messages from this chat box?"));
|
||||
|
|
@ -792,20 +663,22 @@
|
|||
}
|
||||
},
|
||||
|
||||
_show: function (focus) {
|
||||
/* Inner show method that gets debounced */
|
||||
if (this.$el.is(':visible') && this.$el.css('opacity') === "1") {
|
||||
if (focus) { this.focus(); }
|
||||
return;
|
||||
}
|
||||
this.$el.fadeIn(this.afterShown.bind(this));
|
||||
},
|
||||
|
||||
show: function (focus) {
|
||||
if (typeof this.debouncedShow === 'undefined') {
|
||||
/* We wrap the method in a debouncer and set it on the
|
||||
* instance, so that we have it debounced per instance.
|
||||
* Debouncing it on the class-level is too broad.
|
||||
*/
|
||||
this.debouncedShow = _.debounce(function (focus) {
|
||||
if (this.$el.is(':visible') && this.$el.css('opacity') === "1") {
|
||||
if (focus) { this.focus(); }
|
||||
return;
|
||||
}
|
||||
this.initDragResize().setDimensions();
|
||||
this.$el.fadeIn(this.afterShown.bind(this));
|
||||
}, 250, true);
|
||||
this.debouncedShow = _.debounce(this._show, 250, true);
|
||||
}
|
||||
this.debouncedShow.apply(this, arguments);
|
||||
return this;
|
||||
|
|
|
|||
|
|
@ -137,11 +137,10 @@
|
|||
ChatBox: {
|
||||
initialize: function () {
|
||||
if (this.get('id') === 'controlbox') {
|
||||
this.set(
|
||||
_.extend(
|
||||
this.getDefaultSettings(),
|
||||
{ 'time_opened': moment(0).valueOf() }
|
||||
));
|
||||
this.set({
|
||||
'time_opened': moment(0).valueOf(),
|
||||
'num_unread': 0
|
||||
});
|
||||
} else {
|
||||
this._super.initialize.apply(this, arguments);
|
||||
}
|
||||
|
|
@ -196,14 +195,10 @@
|
|||
events: {
|
||||
'click a.close-chatbox-button': 'close',
|
||||
'click ul#controlbox-tabs li a': 'switchTab',
|
||||
'mousedown .dragresize-top': 'onStartVerticalResize',
|
||||
'mousedown .dragresize-left': 'onStartHorizontalResize',
|
||||
'mousedown .dragresize-topleft': 'onStartDiagonalResize'
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
this.$el.insertAfter(converse.controlboxtoggle.$el);
|
||||
$(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
|
||||
this.model.on('change:connected', this.onConnected, this);
|
||||
this.model.on('destroy', this.hide, this);
|
||||
this.model.on('hide', this.hide, this);
|
||||
|
|
@ -277,7 +272,6 @@
|
|||
this.loginpanel.delegateEvents().initialize(cfg);
|
||||
}
|
||||
this.loginpanel.render();
|
||||
this.initDragResize().setDimensions();
|
||||
if ($feedback.length && $feedback.text() !== __('Connecting')) {
|
||||
this.$('.conn-feedback').replaceWith($feedback);
|
||||
}
|
||||
|
|
@ -293,7 +287,6 @@
|
|||
'model': converse.xmppstatus
|
||||
});
|
||||
converse.xmppstatusview.render();
|
||||
this.initDragResize().setDimensions();
|
||||
},
|
||||
|
||||
close: function (ev) {
|
||||
|
|
|
|||
|
|
@ -244,7 +244,6 @@
|
|||
// ----------------------------
|
||||
this.default_settings = {
|
||||
allow_contact_requests: true,
|
||||
allow_dragresize: true,
|
||||
animate: true,
|
||||
authentication: 'login', // Available values are "login", "prebind", "anonymous".
|
||||
auto_away: 0, // Seconds after which user status is set to 'away'
|
||||
|
|
@ -500,24 +499,6 @@
|
|||
}
|
||||
};
|
||||
|
||||
this.applyDragResistance = function (value, default_value) {
|
||||
/* This method applies some resistance around the
|
||||
* default_value. If value is close enough to
|
||||
* default_value, then default_value is returned instead.
|
||||
*/
|
||||
if (typeof value === 'undefined') {
|
||||
return undefined;
|
||||
} else if (typeof default_value === 'undefined') {
|
||||
return value;
|
||||
}
|
||||
var resistance = 10;
|
||||
if ((value !== default_value) &&
|
||||
(Math.abs(value- default_value) < resistance)) {
|
||||
return default_value;
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
this.updateMsgCounter = function () {
|
||||
if (this.msg_counter > 0) {
|
||||
if (document.title.search(/^Messages \(\d+\) /) === -1) {
|
||||
|
|
@ -579,33 +560,6 @@
|
|||
};
|
||||
|
||||
this.registerGlobalEventHandlers = function () {
|
||||
$(document).on('mousemove', function (ev) {
|
||||
if (!this.resizing || !this.allow_dragresize) { return true; }
|
||||
ev.preventDefault();
|
||||
this.resizing.chatbox.resizeChatBox(ev);
|
||||
}.bind(this));
|
||||
|
||||
$(document).on('mouseup', function (ev) {
|
||||
if (!this.resizing || !this.allow_dragresize) { return true; }
|
||||
ev.preventDefault();
|
||||
var height = this.applyDragResistance(
|
||||
this.resizing.chatbox.height,
|
||||
this.resizing.chatbox.model.get('default_height')
|
||||
);
|
||||
var width = this.applyDragResistance(
|
||||
this.resizing.chatbox.width,
|
||||
this.resizing.chatbox.model.get('default_width')
|
||||
);
|
||||
if (this.connection.connected) {
|
||||
this.resizing.chatbox.model.save({'height': height});
|
||||
this.resizing.chatbox.model.save({'width': width});
|
||||
} else {
|
||||
this.resizing.chatbox.model.set({'height': height});
|
||||
this.resizing.chatbox.model.set({'width': width});
|
||||
}
|
||||
this.resizing = null;
|
||||
}.bind(this));
|
||||
|
||||
$(window).on("blur focus", function (ev) {
|
||||
if ((converse.windowState !== ev.type) && (ev.type === 'focus')) {
|
||||
converse.clearMsgCounter();
|
||||
|
|
@ -1204,25 +1158,16 @@
|
|||
this.messages = new converse.Messages();
|
||||
this.messages.browserStorage = new Backbone.BrowserStorage[converse.storage](
|
||||
b64_sha1('converse.messages'+this.get('jid')+converse.bare_jid));
|
||||
this.save(_.extend(this.getDefaultSettings(), {
|
||||
this.save({
|
||||
// The chat_state will be set to ACTIVE once the chat box is opened
|
||||
// and we listen for change:chat_state, so shouldn't set it to ACTIVE here.
|
||||
'chat_state': undefined,
|
||||
'box_id' : b64_sha1(this.get('jid')),
|
||||
'chat_state': undefined,
|
||||
'num_unread': this.get('num_unread') || 0,
|
||||
'time_opened': this.get('time_opened') || moment().valueOf(),
|
||||
'url': '',
|
||||
'user_id' : Strophe.getNodeFromJid(this.get('jid'))
|
||||
}));
|
||||
},
|
||||
|
||||
getDefaultSettings: function () {
|
||||
var height = this.get('height'),
|
||||
width = this.get('width');
|
||||
return {
|
||||
'height': converse.applyDragResistance(height, this.get('default_height')),
|
||||
'width': converse.applyDragResistance(width, this.get('default_width')),
|
||||
'num_unread': this.get('num_unread') || 0
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
createMessage: function ($message, $delay) {
|
||||
|
|
|
|||
297
src/converse-dragresize.js
Normal file
297
src/converse-dragresize.js
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
// Converse.js (A browser based XMPP chat client)
|
||||
// http://conversejs.org
|
||||
//
|
||||
// Copyright (c) 2012-2016, Jan-Carel Brand <jc@opkode.com>
|
||||
// Licensed under the Mozilla Public License (MPLv2)
|
||||
//
|
||||
/*global define, window */
|
||||
|
||||
(function (root, factory) {
|
||||
define("converse-dragresize", [
|
||||
"converse-core",
|
||||
"converse-api",
|
||||
"converse-chatview",
|
||||
"converse-muc", // XXX: would like to remove this
|
||||
"converse-controlbox"
|
||||
], factory);
|
||||
}(this, function (converse, converse_api) {
|
||||
"use strict";
|
||||
var $ = converse_api.env.jQuery,
|
||||
_ = converse_api.env._;
|
||||
|
||||
converse_api.plugins.add('dragresize', {
|
||||
|
||||
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.
|
||||
|
||||
registerGlobalEventHandlers: function () {
|
||||
$(document).on('mousemove', function (ev) {
|
||||
if (!this.resizing || !this.allow_dragresize) { return true; }
|
||||
ev.preventDefault();
|
||||
this.resizing.chatbox.resizeChatBox(ev);
|
||||
}.bind(this));
|
||||
|
||||
$(document).on('mouseup', function (ev) {
|
||||
if (!this.resizing || !this.allow_dragresize) { return true; }
|
||||
ev.preventDefault();
|
||||
var height = this.applyDragResistance(
|
||||
this.resizing.chatbox.height,
|
||||
this.resizing.chatbox.model.get('default_height')
|
||||
);
|
||||
var width = this.applyDragResistance(
|
||||
this.resizing.chatbox.width,
|
||||
this.resizing.chatbox.model.get('default_width')
|
||||
);
|
||||
if (this.connection.connected) {
|
||||
this.resizing.chatbox.model.save({'height': height});
|
||||
this.resizing.chatbox.model.save({'width': width});
|
||||
} else {
|
||||
this.resizing.chatbox.model.set({'height': height});
|
||||
this.resizing.chatbox.model.set({'width': width});
|
||||
}
|
||||
this.resizing = null;
|
||||
}.bind(this));
|
||||
|
||||
return this._super.registerGlobalEventHandlers.apply(this, arguments);
|
||||
},
|
||||
|
||||
ChatBox: {
|
||||
initializhe: function () {
|
||||
var result = this._super.initialize.apply(this, arguments),
|
||||
height = this.get('height'), width = this.get('width'),
|
||||
save = this.get('id') === 'controlbox' ? this.set.bind(this) : this.save.bind(this);
|
||||
save({
|
||||
'height': converse.applyDragResistance(height, this.get('default_height')),
|
||||
'width': converse.applyDragResistance(width, this.get('default_width')),
|
||||
});
|
||||
return result;
|
||||
}
|
||||
},
|
||||
|
||||
ChatBoxView: {
|
||||
events: {
|
||||
'mousedown .dragresize-top': 'onStartVerticalResize',
|
||||
'mousedown .dragresize-left': 'onStartHorizontalResize',
|
||||
'mousedown .dragresize-topleft': 'onStartDiagonalResize'
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
$(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
|
||||
this._super.initialize.apply(this, arguments);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
var result = this._super.render.apply(this, arguments);
|
||||
this.setWidth();
|
||||
return result;
|
||||
},
|
||||
|
||||
setWidth: function () {
|
||||
// If a custom width is applied (due to drag-resizing),
|
||||
// then we need to set the width of the .chatbox element as well.
|
||||
if (this.model.get('width')) {
|
||||
this.$el.css('width', this.model.get('width'));
|
||||
}
|
||||
},
|
||||
|
||||
_show: function () {
|
||||
this.initDragResize().setDimensions();
|
||||
this._super._show.apply(this, arguments);
|
||||
},
|
||||
|
||||
initDragResize: function () {
|
||||
/* Determine and store the default box size.
|
||||
* We need this information for the drag-resizing feature.
|
||||
*/
|
||||
var $flyout = this.$el.find('.box-flyout');
|
||||
if (typeof this.model.get('height') === 'undefined') {
|
||||
var height = $flyout.height();
|
||||
var width = $flyout.width();
|
||||
this.model.set('height', height);
|
||||
this.model.set('default_height', height);
|
||||
this.model.set('width', width);
|
||||
this.model.set('default_width', width);
|
||||
}
|
||||
var min_width = $flyout.css('min-width');
|
||||
var min_height = $flyout.css('min-height');
|
||||
this.model.set('min_width', min_width.endsWith('px') ? Number(min_width.replace(/px$/, '')) :0);
|
||||
this.model.set('min_height', min_height.endsWith('px') ? Number(min_height.replace(/px$/, '')) :0);
|
||||
// Initialize last known mouse position
|
||||
this.prev_pageY = 0;
|
||||
this.prev_pageX = 0;
|
||||
if (converse.connection.connected) {
|
||||
this.height = this.model.get('height');
|
||||
this.width = this.model.get('width');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
setDimensions: function () {
|
||||
// Make sure the chat box has the right height and width.
|
||||
this.adjustToViewport();
|
||||
this.setChatBoxHeight(this.model.get('height'));
|
||||
this.setChatBoxWidth(this.model.get('width'));
|
||||
},
|
||||
|
||||
setChatBoxHeight: function (height) {
|
||||
if (height) {
|
||||
height = converse.applyDragResistance(height, this.model.get('default_height'))+'px';
|
||||
} else {
|
||||
height = "";
|
||||
}
|
||||
this.$el.children('.box-flyout')[0].style.height = height;
|
||||
},
|
||||
|
||||
setChatBoxWidth: function (width) {
|
||||
if (width) {
|
||||
width = converse.applyDragResistance(width, this.model.get('default_width'))+'px';
|
||||
} else {
|
||||
width = "";
|
||||
}
|
||||
this.$el[0].style.width = width;
|
||||
this.$el.children('.box-flyout')[0].style.width = width;
|
||||
},
|
||||
|
||||
|
||||
adjustToViewport: function () {
|
||||
/* Event handler called when viewport gets resized. We remove
|
||||
* custom width/height from chat boxes.
|
||||
*/
|
||||
var viewport_width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
||||
var viewport_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
||||
if (viewport_width <= 480) {
|
||||
this.model.set('height', undefined);
|
||||
this.model.set('width', undefined);
|
||||
} else if (viewport_width <= this.model.get('width')) {
|
||||
this.model.set('width', undefined);
|
||||
} else if (viewport_height <= this.model.get('height')) {
|
||||
this.model.set('height', undefined);
|
||||
}
|
||||
},
|
||||
|
||||
onStartVerticalResize: function (ev) {
|
||||
if (!converse.allow_dragresize) { return true; }
|
||||
// Record element attributes for mouseMove().
|
||||
this.height = this.$el.children('.box-flyout').height();
|
||||
converse.resizing = {
|
||||
'chatbox': this,
|
||||
'direction': 'top'
|
||||
};
|
||||
this.prev_pageY = ev.pageY;
|
||||
},
|
||||
|
||||
onStartHorizontalResize: function (ev) {
|
||||
if (!converse.allow_dragresize) { return true; }
|
||||
this.width = this.$el.children('.box-flyout').width();
|
||||
converse.resizing = {
|
||||
'chatbox': this,
|
||||
'direction': 'left'
|
||||
};
|
||||
this.prev_pageX = ev.pageX;
|
||||
},
|
||||
|
||||
onStartDiagonalResize: function (ev) {
|
||||
this.onStartHorizontalResize(ev);
|
||||
this.onStartVerticalResize(ev);
|
||||
converse.resizing.direction = 'topleft';
|
||||
},
|
||||
|
||||
resizeChatBox: function (ev) {
|
||||
var diff;
|
||||
if (converse.resizing.direction.indexOf('top') === 0) {
|
||||
diff = ev.pageY - this.prev_pageY;
|
||||
if (diff) {
|
||||
this.height = ((this.height-diff) > (this.model.get('min_height') || 0)) ? (this.height-diff) : this.model.get('min_height');
|
||||
this.prev_pageY = ev.pageY;
|
||||
this.setChatBoxHeight(this.height);
|
||||
}
|
||||
}
|
||||
if (converse.resizing.direction.indexOf('left') !== -1) {
|
||||
diff = this.prev_pageX - ev.pageX;
|
||||
if (diff) {
|
||||
this.width = ((this.width+diff) > (this.model.get('min_width') || 0)) ? (this.width+diff) : this.model.get('min_width');
|
||||
this.prev_pageX = ev.pageX;
|
||||
this.setChatBoxWidth(this.width);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
ControlBoxView: {
|
||||
events: {
|
||||
'mousedown .dragresize-top': 'onStartVerticalResize',
|
||||
'mousedown .dragresize-left': 'onStartHorizontalResize',
|
||||
'mousedown .dragresize-topleft': 'onStartDiagonalResize'
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
$(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
|
||||
this._super.initialize.apply(this, arguments);
|
||||
},
|
||||
|
||||
renderLoginPanel: function () {
|
||||
var result = this._super.renderLoginPanel.apply(this, arguments);
|
||||
this.initDragResize().setDimensions();
|
||||
return result;
|
||||
},
|
||||
|
||||
renderContactsPanel: function () {
|
||||
var result = this._super.renderContactsPanel.apply(this, arguments);
|
||||
this.initDragResize().setDimensions();
|
||||
return result;
|
||||
}
|
||||
},
|
||||
|
||||
ChatRoomView: {
|
||||
events: {
|
||||
'mousedown .dragresize-top': 'onStartVerticalResize',
|
||||
'mousedown .dragresize-left': 'onStartHorizontalResize',
|
||||
'mousedown .dragresize-topleft': 'onStartDiagonalResize'
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
$(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
|
||||
this._super.initialize.apply(this, arguments);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
var result = this._super.render.apply(this, arguments);
|
||||
this.setWidth();
|
||||
return result;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
initialize: function () {
|
||||
/* The initialize function gets called as soon as the plugin is
|
||||
* loaded by converse.js's plugin machinery.
|
||||
*/
|
||||
var converse = this.converse;
|
||||
this.updateSettings({
|
||||
allow_dragresize: true,
|
||||
});
|
||||
converse.applyDragResistance = function (value, default_value) {
|
||||
/* This method applies some resistance around the
|
||||
* default_value. If value is close enough to
|
||||
* default_value, then default_value is returned instead.
|
||||
*/
|
||||
if (typeof value === 'undefined') {
|
||||
return undefined;
|
||||
} else if (typeof default_value === 'undefined') {
|
||||
return value;
|
||||
}
|
||||
var resistance = 10;
|
||||
if ((value !== default_value) &&
|
||||
(Math.abs(value- default_value) < resistance)) {
|
||||
return default_value;
|
||||
}
|
||||
return value;
|
||||
};
|
||||
}
|
||||
});
|
||||
}));
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
"converse-core",
|
||||
"converse-api",
|
||||
"converse-chatview", // Could be made a soft dependency
|
||||
"converse-muc", // Could be made a soft dependency
|
||||
"strophe.rsm"
|
||||
], factory);
|
||||
}(this, function (converse, converse_api) {
|
||||
|
|
@ -115,8 +116,19 @@
|
|||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
ChatRoomView: {
|
||||
render: function () {
|
||||
var result = this._super.render.apply(this, arguments);
|
||||
if (!this.disable_mam) {
|
||||
this.$content.on('scroll', _.debounce(this.onScroll.bind(this), 100));
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -51,13 +51,12 @@
|
|||
},
|
||||
|
||||
registerGlobalEventHandlers: function () {
|
||||
this._super.registerGlobalEventHandlers.apply(this, arguments);
|
||||
|
||||
$(window).on("resize", _.debounce(function (ev) {
|
||||
if (converse.connection.connected) {
|
||||
converse.chatboxviews.trimChats();
|
||||
}
|
||||
}, 200));
|
||||
return this._super.registerGlobalEventHandlers.apply(this, arguments);
|
||||
},
|
||||
|
||||
wrappedChatBox: function (chatbox) {
|
||||
|
|
|
|||
|
|
@ -176,13 +176,9 @@
|
|||
'click .toggle-call': 'toggleCall',
|
||||
'click .toggle-occupants a': 'toggleOccupants',
|
||||
'keypress textarea.chat-textarea': 'keyPressed',
|
||||
'mousedown .dragresize-top': 'onStartVerticalResize',
|
||||
'mousedown .dragresize-left': 'onStartHorizontalResize',
|
||||
'mousedown .dragresize-topleft': 'onStartDiagonalResize'
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
$(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
|
||||
this.model.messages.on('add', this.onMessageAdded, this);
|
||||
this.occupantsview = new converse.ChatRoomOccupantsView({
|
||||
model: new converse.ChatRoomOccupants({nick: this.model.get('nick')})
|
||||
|
|
@ -203,8 +199,6 @@
|
|||
this.$el.attr('id', this.model.get('box_id'))
|
||||
.html(converse.templates.chatroom(this.model.toJSON()));
|
||||
this.renderChatArea();
|
||||
this.$content.on('scroll', _.debounce(this.onScroll.bind(this), 100));
|
||||
this.setWidth();
|
||||
window.setTimeout(converse.refreshWebkit, 50);
|
||||
return this;
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user