Skip to content

C
converse.js
Commit 319a955f authored by JC Brand's avatar JC Brand
Browse files
Options

Add code that allows resize by click+drag. 

Removed dragresize.js and instead wrote new much smaller and simpler code
in converse.js.
parent 3687631d
Hide whitespace changes
Inline Side-by-side
Showing with 44 additions and 259 deletions
converse.js
View file @ 319a955f
......@@ -12,12 +12,11 @@
define("converse",
["converse-dependencies", "converse-templates"],
function(dependencies, templates) {
var DragResize = dependencies[0];
var otr = dependencies[1];
var otr = dependencies[0];
if (typeof otr !== "undefined") {
return factory(jQuery, _, otr.OTR, otr.DSA, templates, DragResize);
return factory(jQuery, _, otr.OTR, otr.DSA, templates);
} else {
return factory(jQuery, _, undefined, undefined, templates, DragResize);
return factory(jQuery, _, undefined, undefined, templates);
}
}
);
......@@ -29,26 +28,9 @@
interpolate : /\{\{([\s\S]+?)\}\}/g
};
// TODO Templates not defined
root.converse = factory(jQuery, _, OTR, DSA, templates, DragResize);
root.converse = factory(jQuery, _, OTR, DSA, templates);
}
}(this, function ($, _, OTR, DSA, templates, DragResize) {
var dragresize = new DragResize('dragresize', {
minWidth: 200,
minHeight: 250,
minLeft: 20,
minTop: 20,
maxLeft: 0,
maxTop: 600,
handles: ['tm']
});
dragresize.isElement = function(elm) {
if (elm.className && elm.className.indexOf('box-flyout') > -1) {
return true;
}
};
dragresize.apply(document);
}(this, function ($, _, OTR, DSA, templates) {
if (typeof console === "undefined" || typeof console.log === "undefined") {
console = { log: function () {}, error: function () {} };
}
......@@ -154,6 +136,7 @@
// Default configuration values
// ----------------------------
this.allow_contact_requests = true;
this.allow_dragresize = true;
this.allow_muc = true;
this.allow_otr = true;
this.animate = true;
......@@ -178,6 +161,7 @@
// Allow only whitelisted configuration attributes to be overwritten
_.extend(this, _.pick(settings, [
'allow_contact_requests',
'allow_dragresize',
'allow_muc',
'allow_otr',
'animate',
......@@ -499,7 +483,18 @@
}
});
$(window).on("blur focus", $.proxy(function(e) {
$(document).on('mousemove', $.proxy(function (ev) {
if (!this.resized_chatbox || !this.allow_dragresize) { return true; }
ev.preventDefault();
this.resized_chatbox.resizeChatbox(ev);
}, this));
$(document).on('mouseup', $.proxy(function (ev) {
if (!this.resized_chatbox || !this.allow_dragresize) { return true; }
this.resized_chatbox = null;
}, this));
$(window).on("blur focus", $.proxy(function (e) {
if ((this.windowState != e.type) && (e.type == 'focus')) {
converse.clearMsgCounter();
}
......@@ -758,7 +753,8 @@
'click .start-otr': 'startOTRFromToolbar',
'click .end-otr': 'endOTR',
'click .auth-otr': 'authOTR',
'click .toggle-call': 'toggleCall'
'click .toggle-call': 'toggleCall',
'mousedown .dragresize-tm': 'onDragResizeStart'
},
initialize: function (){
......@@ -782,6 +778,10 @@
if (this.model.get('status')) {
this.showStatusMessage(this.model.get('status'));
}
// Drag to resize values
this.chatboxMinHeight = 250;
this.chatboxHeight = this.$el.children('.box-flyout').height();
this.prevPageY = 0; // To store last known mouse position
},
render: function () {
......@@ -999,6 +999,25 @@
}
},
onDragResizeStart: function (ev) {
if (!converse.allow_dragresize) { return true; }
// Record element attributes for mouseMove().
this.chatboxHeight = this.$el.children('.box-flyout').height();
converse.resized_chatbox = this;
this.prevPageY = ev.pageY;
},
resizeChatbox: function (ev) {
var diff = ev.pageY - this.prevPageY;
if (!diff) { return; }
if (this.chatboxHeight - diff < this.chatboxMinHeight) {
diff = this.chatboxHeight - this.chatboxMinHeight;
}
this.chatboxHeight -= diff;
this.prevPageY = ev.pageY;
this.$el.children('.box-flyout')[0].style.height = this.chatboxHeight + 'px';
},
insertEmoticon: function (ev) {
ev.stopPropagation();
this.$el.find('.toggle-smiley ul').slideToggle(200);
......
main.js
View file @ 319a955f
......@@ -2,7 +2,6 @@ config = {
paths: {
"jquery": "components/jquery/jquery",
"jquery.tinysort": "components/tinysort/src/jquery.tinysort",
"dragresize": "src/dragresize",
"locales": "locale/locales",
"underscore": "components/underscore/underscore",
"backbone": "components/backbone/backbone",
......
src/deps-full.js
View file @ 319a955f
define("converse-dependencies", [
"dragresize",
"otr",
"locales",
"backbone.localStorage",
......
src/dragresize.js deleted 100644 → 0
View file @ 3687631d
/*
DragResize v1.1
(c) 2005-2006 Angus Turnbull, TwinHelix Designs http://www.twinhelix.com
Licensed under the CC-GNU LGPL, version 2.1 or later:
http://creativecommons.org/licenses/LGPL/2.1/
This is distributed WITHOUT ANY WARRANTY; without even the implied
warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
Simplified and modified for Converse.js by JC Brand https://opkode.com
*/
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define("dragresize", [], function() { return factory(); });
} else {
root.DragResize = factory();
}
}(this, function () {
function cancelEvent(e, c) {
e.returnValue = false;
if (e.preventDefault) {
e.preventDefault();
}
if (c) {
e.cancelBubble = true;
if (e.stopPropagation) {
e.stopPropagation();
}
}
}
// *** DRAG/RESIZE CODE ***
function DragResize(myName, config) {
var props = {
myName: myName, // Name of the object.
enabled: true, // Global toggle of drag/resize.
handles: ['tl', 'tm', 'tr',
'ml', 'mr', 'bl', 'bm', 'br'], // Array of drag handles: top/mid/bot/right.
isElement: null, // Function ref to test for an element.
element: null, // The currently selected element.
handle: null, // Active handle reference of the element.
minWidth: 10, minHeight: 10, // Minimum pixel size of elements.
zIndex: 1, // The highest Z-Index yet allocated.
lastMouseX: 0, lastMouseY: 0, // Last processed mouse positions.
mOffX: 0, mOffY: 0, // A known offset between position & mouse.
elmW: 0, elmH: 0, // Element size.
allowBlur: true, // Whether to allow automatic blur onclick.
ondragfocus: null, // Event handler functions.
ondragstart: null,
ondragend: null,
ondragblur: null
};
for (var p in props) {
this[p] = (typeof config[p] == 'undefined') ? props[p] : config[p];
}
};
DragResize.prototype.apply = function(node) {
/* Adds object event handlers to the specified DOM node */
$(node).bind('mousedown', this.mouseDown.bind(this));
$(node).bind('mousemove', this.mouseMove.bind(this));
$(node).bind('mouseup', this.mouseUp.bind(this));
};
DragResize.prototype.select = function(newElement) {
with (this) {
// Selects an element for dragging.
if (!document.getElementById || !enabled) return;
// Activate and record our new dragging element.
if (newElement && (newElement != element) && enabled) {
element = newElement;
// Elevate it
element.style.zIndex = ++zIndex;
// Record element attributes for mouseMove().
elmW = element.offsetWidth;
elmH = element.offsetHeight;
if (ondragfocus) this.ondragfocus();
}
}
};
DragResize.prototype.deselect = function(delHandles) {
with (this) {
// Immediately stops dragging an element. If 'delHandles' is true, this
// remove the handles from the element and clears the element flag,
// completely resetting the .
if (!document.getElementById || !enabled) return;
if (delHandles) {
if (ondragblur) this.ondragblur();
element = null;
}
handle = null;
mOffX = 0;
mOffY = 0;
}
};
DragResize.prototype.mouseDown = function(e) {
with (this) {
// Suitable elements are selected for drag/resize on mousedown.
// We also initialise the resize boxes, and drag parameters like mouse position etc.
if (!document.getElementById || !enabled) return true;
var elm = e.target || e.srcElement,
newElement = null,
newHandle = null,
hRE = new RegExp(myName + '-([trmbl]{2})', '');
while (elm) {
// Loop up the DOM looking for matching elements. Remember one if found.
if (elm.className) {
if (!newHandle && (hRE.test(elm.className))) newHandle = elm;
if (isElement(elm)) { newElement = elm; break }
}
elm = elm.parentNode;
}
// If this isn't on the last dragged element, call deselect(),
// which will hide its handles and clear element.
if (element && (element != newElement) && allowBlur) deselect(true);
// If we have a new matching element, call select().
if (newElement && (!element || (newElement == element))) {
// Stop mouse selections if we're dragging a handle.
if (newHandle) cancelEvent(e);
select(newElement, newHandle);
handle = newHandle;
if (handle && ondragstart) this.ondragstart(hRE.test(handle.className));
}
}
};
DragResize.prototype.updateMouseCoordinates = function (e) {
/* Update last processed mouse positions */
this.mOffX = this.mOffY = 0;
this.lastMouseX = e.pageX || e.clientX + document.documentElement.scrollLeft;
this.lastMouseY = e.pageY || e.clientY + document.documentElement.scrollTop;
};
DragResize.prototype.operaHack = function (e) {
// Evil, dirty, hackish Opera select-as-you-drag fix.
if (window.opera && document.documentElement) {
var oDF = document.getElementById('op-drag-fix');
if (!oDF) {
var oDF = document.createElement('input');
oDF.id = 'op-drag-fix';
oDF.style.display = 'none';
document.body.appendChild(oDF);
}
oDF.focus();
}
};
DragResize.prototype.resizeElement = function (e) {
// Let it create an object representing the drag offsets.
var resize = this.resizeHandleDrag(e) ? true : false;
// Assign new info back to the element, with minimum dimensions.
this.element.style.width = this.elmW + 'px';
this.element.style.height = this.elmH + 'px';
this.operaHack();
return e;
};
DragResize.prototype.mouseMove = function (e) {
/* Continuously offsets the dragged element by the difference between the
* previous mouse position and the current mouse position.
*/
if (!this.enabled) return true;
if (!this.handle) {
// We're not dragging anything
this.updateMouseCoordinates(e);
return true;
}
cancelEvent(this.resizeElement(e));
};
DragResize.prototype.mouseUp = function(e) {
with (this) {
// On mouseup, stop dragging, but don't reset handler visibility.
if (!document.getElementById || !enabled) return;
var hRE = new RegExp(myName + '-([trmbl]{2})', '');
if (handle && ondragend) this.ondragend(hRE.test(handle.className));
deselect(false);
}
};
DragResize.prototype.resizeHandleDrag = function(e) {
/* Checks to see whether the
* drag is from a resize handle created above; if so, it changes the stored
* elm* dimensions and mOffX/Y.
*/
var x = e.pageX || e.clientX + document.documentElement.scrollLeft;
var y = e.pageY || e.clientY + document.documentElement.scrollTop;
var diffX = x - this.lastMouseX + this.mOffX;
var diffY = y - this.lastMouseY + this.mOffY;
var hClass = this.handle &&
this.handle.className &&
this.handle.className.match(new RegExp(this.myName + '-([tmblr]{2})')) ? RegExp.$1 : '';
with (this) {
// If the hClass is one of the resize handles, resize one or two dimensions.
// Bounds checking is the hard bit -- basically for each edge, check that the
// element doesn't go under minimum size, and doesn't go beyond its boundary.
var dY = diffY, dX = diffX, processed = false;
if (hClass.indexOf('t') >= 0) {
rs = 1;
if (elmH - dY < minHeight) mOffY = (dY - (diffY = elmH - minHeight));
elmH -= diffY;
processed = true;
}
if (hClass.indexOf('b') >= 0) {
rs = 1;
if (elmH + dY < minHeight) mOffY = (dY - (diffY = minHeight - elmH));
elmH += diffY;
processed = true;
}
this.updateMouseCoordinates(e);
return processed;
}
};
return DragResize;
}));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7