Simplified by setting height via template, not JS
Also dropped the minimum height restriction
This commit is contained in:
parent
891f291c32
commit
4f2125c20e
65
converse.js
65
converse.js
@ -100,10 +100,8 @@
|
|||||||
},
|
},
|
||||||
off: function(evt, handler) {
|
off: function(evt, handler) {
|
||||||
$(this).unbind(evt, handler);
|
$(this).unbind(evt, handler);
|
||||||
}
|
},
|
||||||
};
|
refreshWebkit: function () {
|
||||||
|
|
||||||
converse.refreshWebkit = function () {
|
|
||||||
/* This works around a webkit bug. Refresh the browser's viewport,
|
/* This works around a webkit bug. Refresh the browser's viewport,
|
||||||
* otherwise chatboxes are not moved along when one is closed.
|
* otherwise chatboxes are not moved along when one is closed.
|
||||||
*/
|
*/
|
||||||
@ -113,6 +111,7 @@
|
|||||||
conversejs.offsetHeight; // no need to store this anywhere, the reference is enough
|
conversejs.offsetHeight; // no need to store this anywhere, the reference is enough
|
||||||
conversejs.style.display = 'block';
|
conversejs.style.display = 'block';
|
||||||
}
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
converse.initialize = function (settings, callback) {
|
converse.initialize = function (settings, callback) {
|
||||||
@ -150,6 +149,7 @@
|
|||||||
this.bosh_service_url = undefined; // The BOSH connection manager URL.
|
this.bosh_service_url = undefined; // The BOSH connection manager URL.
|
||||||
this.cache_otr_key = false;
|
this.cache_otr_key = false;
|
||||||
this.debug = false;
|
this.debug = false;
|
||||||
|
this.default_box_height = 324; // The default height, in pixels, for the control box, chat boxes and chatrooms.
|
||||||
this.expose_rid_and_sid = false;
|
this.expose_rid_and_sid = false;
|
||||||
this.hide_muc_server = false;
|
this.hide_muc_server = false;
|
||||||
this.i18n = locales.en;
|
this.i18n = locales.en;
|
||||||
@ -180,6 +180,7 @@
|
|||||||
'cache_otr_key',
|
'cache_otr_key',
|
||||||
'connection',
|
'connection',
|
||||||
'debug',
|
'debug',
|
||||||
|
'default_box_height',
|
||||||
'expose_rid_and_sid',
|
'expose_rid_and_sid',
|
||||||
'fullname',
|
'fullname',
|
||||||
'hide_muc_server',
|
'hide_muc_server',
|
||||||
@ -432,6 +433,22 @@
|
|||||||
return new Date(Date.UTC(struct[1], struct[2], struct[3], struct[4], struct[5] + minutesOffset, struct[6], struct[7]));
|
return new Date(Date.UTC(struct[1], struct[2], struct[3], struct[4], struct[5] + minutesOffset, struct[6], struct[7]));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this.applyHeightResistance = function (height) {
|
||||||
|
/* This method applies some resistance/gravity around the
|
||||||
|
* "default_box_height". If "height" is close enough to
|
||||||
|
* default_box_height, then that is returned instead.
|
||||||
|
*/
|
||||||
|
if (typeof height === 'undefined') {
|
||||||
|
return converse.default_box_height;
|
||||||
|
}
|
||||||
|
var resistance = 10;
|
||||||
|
if ((height !== converse.default_box_height) &&
|
||||||
|
(Math.abs(height - converse.default_box_height) < resistance)) {
|
||||||
|
return converse.default_box_height;
|
||||||
|
}
|
||||||
|
return height;
|
||||||
|
};
|
||||||
|
|
||||||
this.updateMsgCounter = function () {
|
this.updateMsgCounter = function () {
|
||||||
if (this.msg_counter > 0) {
|
if (this.msg_counter > 0) {
|
||||||
if (document.title.search(/^Messages \(\d+\) /) == -1) {
|
if (document.title.search(/^Messages \(\d+\) /) == -1) {
|
||||||
@ -516,10 +533,12 @@
|
|||||||
|
|
||||||
$(document).on('mouseup', $.proxy(function (ev) {
|
$(document).on('mouseup', $.proxy(function (ev) {
|
||||||
if (!this.resized_chatbox || !this.allow_dragresize) { return true; }
|
if (!this.resized_chatbox || !this.allow_dragresize) { return true; }
|
||||||
|
ev.preventDefault();
|
||||||
|
var height = this.applyHeightResistance(this.resized_chatbox.height);
|
||||||
if (this.connection) {
|
if (this.connection) {
|
||||||
this.resized_chatbox.model.save({'height': this.resized_chatbox.height});
|
this.resized_chatbox.model.save({'height': height});
|
||||||
} else {
|
} else {
|
||||||
this.resized_chatbox.model.set({'height': this.resized_chatbox.height});
|
this.resized_chatbox.model.set({'height': height});
|
||||||
}
|
}
|
||||||
this.resized_chatbox = null;
|
this.resized_chatbox = null;
|
||||||
}, this));
|
}, this));
|
||||||
@ -625,6 +644,7 @@
|
|||||||
|
|
||||||
this.ChatBox = Backbone.Model.extend({
|
this.ChatBox = Backbone.Model.extend({
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
|
var height;
|
||||||
if (this.get('box_id') !== 'controlbox') {
|
if (this.get('box_id') !== 'controlbox') {
|
||||||
this.messages = new converse.Messages();
|
this.messages = new converse.Messages();
|
||||||
this.messages.localStorage = new Backbone.LocalStorage(
|
this.messages.localStorage = new Backbone.LocalStorage(
|
||||||
@ -633,7 +653,8 @@
|
|||||||
'user_id' : Strophe.getNodeFromJid(this.get('jid')),
|
'user_id' : Strophe.getNodeFromJid(this.get('jid')),
|
||||||
'box_id' : hex_sha1(this.get('jid')),
|
'box_id' : hex_sha1(this.get('jid')),
|
||||||
'otr_status': this.get('otr_status') || UNENCRYPTED,
|
'otr_status': this.get('otr_status') || UNENCRYPTED,
|
||||||
'minimized': this.get('minimized') || false
|
'minimized': this.get('minimized') || false,
|
||||||
|
'height': converse.applyHeightResistance(this.get('height'))
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -900,18 +921,11 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
initDragResize: function () {
|
initDragResize: function () {
|
||||||
this.min_height = 150;
|
|
||||||
this.prev_pageY = 0; // To store last known mouse position
|
this.prev_pageY = 0; // To store last known mouse position
|
||||||
this.original_height = this.$el.children('.box-flyout').height();
|
|
||||||
if (converse.connection) {
|
if (converse.connection) {
|
||||||
this.height = this.model.get('height');
|
this.height = this.model.get('height');
|
||||||
if (this.height) {
|
|
||||||
this.setChatBoxHeight(this.height);
|
|
||||||
} else {
|
|
||||||
this.height = this.original_height;
|
|
||||||
this.model.save({'height': this.height});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
showStatusNotification: function (message, replace) {
|
showStatusNotification: function (message, replace) {
|
||||||
@ -1127,25 +1141,16 @@
|
|||||||
|
|
||||||
setChatBoxHeight: function (height) {
|
setChatBoxHeight: function (height) {
|
||||||
if (!this.model.get('minimized')) {
|
if (!this.model.get('minimized')) {
|
||||||
this.$el.children('.box-flyout')[0].style.height = height+'px';
|
this.$el.children('.box-flyout')[0].style.height = converse.applyHeightResistance(height)+'px';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
resizeChatBox: function (ev) {
|
resizeChatBox: function (ev) {
|
||||||
var diff = ev.pageY - this.prev_pageY;
|
var diff = ev.pageY - this.prev_pageY;
|
||||||
if (!diff) { return; }
|
if (!diff) { return; }
|
||||||
if (this.height - diff < this.min_height) {
|
|
||||||
diff = this.height - this.min_height;
|
|
||||||
}
|
|
||||||
this.height -= diff;
|
this.height -= diff;
|
||||||
this.prev_pageY = ev.pageY;
|
this.prev_pageY = ev.pageY;
|
||||||
if (Math.abs(this.height - this.original_height) < 10) {
|
|
||||||
// Add some resistance around the original height, to allow
|
|
||||||
// users to more easily return to it.
|
|
||||||
this.setChatBoxHeight(this.original_height);
|
|
||||||
} else {
|
|
||||||
this.setChatBoxHeight(this.height);
|
this.setChatBoxHeight(this.height);
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
insertEmoticon: function (ev) {
|
insertEmoticon: function (ev) {
|
||||||
@ -1299,8 +1304,6 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
toggleChatBox: function (ev) {
|
toggleChatBox: function (ev) {
|
||||||
// TODO: Restore chat box to original resized height.
|
|
||||||
// Requires that we save the custom height.
|
|
||||||
this.$el.children('.box-flyout').attr('style', '');
|
this.$el.children('.box-flyout').attr('style', '');
|
||||||
this.saveToggleState();
|
this.saveToggleState();
|
||||||
this.$el.find('div.chat-body').slideToggle('fast');
|
this.$el.find('div.chat-body').slideToggle('fast');
|
||||||
@ -1312,6 +1315,7 @@
|
|||||||
}
|
}
|
||||||
// Toggle drag resize ability
|
// Toggle drag resize ability
|
||||||
this.$el.find('.dragresize-tm').toggle();
|
this.$el.find('.dragresize-tm').toggle();
|
||||||
|
this.setChatBoxHeight(this.height);
|
||||||
},
|
},
|
||||||
|
|
||||||
updateVCard: function () {
|
updateVCard: function () {
|
||||||
@ -1883,7 +1887,8 @@
|
|||||||
'click .configure-chatroom-button': 'configureChatRoom',
|
'click .configure-chatroom-button': 'configureChatRoom',
|
||||||
'click .toggle-smiley': 'toggleEmoticonMenu',
|
'click .toggle-smiley': 'toggleEmoticonMenu',
|
||||||
'click .toggle-smiley ul li': 'insertEmoticon',
|
'click .toggle-smiley ul li': 'insertEmoticon',
|
||||||
'keypress textarea.chat-textarea': 'keyPressed'
|
'keypress textarea.chat-textarea': 'keyPressed',
|
||||||
|
'mousedown .dragresize-tm': 'onDragResizeStart'
|
||||||
},
|
},
|
||||||
is_chatroom: true,
|
is_chatroom: true,
|
||||||
|
|
||||||
@ -1901,6 +1906,7 @@
|
|||||||
this);
|
this);
|
||||||
this.$el.appendTo(converse.chatboxesview.$el);
|
this.$el.appendTo(converse.chatboxesview.$el);
|
||||||
this.render().show().model.messages.fetch({add: true});
|
this.render().show().model.messages.fetch({add: true});
|
||||||
|
this.initDragResize();
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function () {
|
render: function () {
|
||||||
@ -3431,7 +3437,8 @@
|
|||||||
converse.chatboxes.add({
|
converse.chatboxes.add({
|
||||||
id: 'controlbox',
|
id: 'controlbox',
|
||||||
box_id: 'controlbox',
|
box_id: 'controlbox',
|
||||||
visible: true
|
visible: true,
|
||||||
|
height: converse.default_box_height
|
||||||
});
|
});
|
||||||
if (converse.connection) {
|
if (converse.connection) {
|
||||||
converse.chatboxes.get('controlbox').save();
|
converse.chatboxes.get('controlbox').save();
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
<div class="box-flyout {[ if (minimized) { ]} minimized {[ } ]}">
|
<div class="box-flyout {[if (minimized) {]} minimized {[}]}"
|
||||||
<div class="dragresize dragresize-tm"></div>
|
{[if (!minimized) {]} style="height: {{height}}px" {[}]}>
|
||||||
|
<div class="dragresize dragresize-tm" {[ if (minimized) { ]} style="display:none" {[ } ]}></div>
|
||||||
<div class="chat-head chat-head-chatbox">
|
<div class="chat-head chat-head-chatbox">
|
||||||
<a class="close-chatbox-button icon-close"></a>
|
<a class="close-chatbox-button icon-close"></a>
|
||||||
<a class="toggle-chatbox-button
|
<a class="toggle-chatbox-button
|
||||||
|
@ -1,11 +1,17 @@
|
|||||||
<div class="box-flyout">
|
<div class="box-flyout {[if (minimized) {]} minimized {[}]}"
|
||||||
<div class="dragresize dragresize-tm"></div>
|
{[if (!minimized) {]} style="height: {{height}}px" {[}]}>
|
||||||
|
<div class="dragresize dragresize-tm" {[ if (minimized) { ]} style="display:none" {[ } ]}></div>
|
||||||
<div class="chat-head chat-head-chatroom">
|
<div class="chat-head chat-head-chatroom">
|
||||||
<a class="close-chatbox-button icon-close"></a>
|
<a class="close-chatbox-button icon-close"></a>
|
||||||
<a class="toggle-chatbox-button icon-minus"></a>
|
<a class="toggle-chatbox-button
|
||||||
|
{[ if (minimized) { ]} icon-plus {[ } ]}
|
||||||
|
{[ if (!minimized) { ]} icon-minus {[ } ]}
|
||||||
|
"></a>
|
||||||
<a class="configure-chatroom-button icon-wrench" style="display:none"></a>
|
<a class="configure-chatroom-button icon-wrench" style="display:none"></a>
|
||||||
<div class="chat-title"> {{ name }} </div>
|
<div class="chat-title"> {{ name }} </div>
|
||||||
<p class="chatroom-topic"><p/>
|
<p class="chatroom-topic"><p/>
|
||||||
</div>
|
</div>
|
||||||
<div class="chat-body"><span class="spinner centered"/></div>
|
<div class="chat-body" {[ if (minimized) { ]} style="display:none" {[ } ]}>
|
||||||
|
<span class="spinner centered"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<div class="box-flyout">
|
<div class="box-flyout" style="height: {{height}}px">
|
||||||
<div class="dragresize dragresize-tm"></div>
|
<div class="dragresize dragresize-tm"></div>
|
||||||
<div class="chat-head controlbox-head">
|
<div class="chat-head controlbox-head">
|
||||||
<ul id="controlbox-tabs"></ul>
|
<ul id="controlbox-tabs"></ul>
|
||||||
|
Loading…
Reference in New Issue
Block a user