322 lines
13 KiB
JavaScript
322 lines
13 KiB
JavaScript
/*
|
|
* (c) Copyright Ascensio System SIA 2010-2015
|
|
*
|
|
* This program is a free software product. You can redistribute it and/or
|
|
* modify it under the terms of the GNU Affero General Public License (AGPL)
|
|
* version 3 as published by the Free Software Foundation. In accordance with
|
|
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
|
|
* that Ascensio System SIA expressly excludes the warranty of non-infringement
|
|
* of any third-party rights.
|
|
*
|
|
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
|
|
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
|
|
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
|
*
|
|
* You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
|
|
* EU, LV-1021.
|
|
*
|
|
* The interactive user interfaces in modified source and object code versions
|
|
* of the Program must display Appropriate Legal Notices, as required under
|
|
* Section 5 of the GNU AGPL version 3.
|
|
*
|
|
* Pursuant to Section 7(b) of the License you must retain the original Product
|
|
* logo when distributing the program. Pursuant to Section 7(e) we decline to
|
|
* grant you any rights under trademark law for use of our trademarks.
|
|
*
|
|
* All the Product's GUI elements, including illustrations and icon sets, as
|
|
* well as technical writing content are licensed under the terms of the
|
|
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
|
|
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
|
*
|
|
*/
|
|
if (Common === undefined) {
|
|
var Common = {};
|
|
}
|
|
define(["backbone"], function () {
|
|
var BaseLayout = function (options) {
|
|
this.box = null;
|
|
this.panels = [];
|
|
_.extend(this, options || {});
|
|
};
|
|
var LayoutPanel = function () {
|
|
return {
|
|
width: null,
|
|
height: null,
|
|
resize: false,
|
|
stretch: false,
|
|
rely: false
|
|
};
|
|
};
|
|
_.extend(BaseLayout.prototype, Backbone.Events, {
|
|
initialize: function (options) {
|
|
this.$parent = this.box.parent();
|
|
this.resize = {
|
|
eventMove: _.bind(this.resizeMove, this),
|
|
eventStop: _.bind(this.resizeStop, this)
|
|
};
|
|
var panel, resizer, stretch = false;
|
|
options.items.forEach(function (item) {
|
|
item.el instanceof HTMLElement && (item.el = $(item.el));
|
|
panel = _.extend(new LayoutPanel(), item);
|
|
if (panel.stretch) {
|
|
stretch = true;
|
|
panel.rely = false;
|
|
panel.resize = false;
|
|
}
|
|
this.panels.push(panel);
|
|
if (panel.resize) {
|
|
resizer = {
|
|
isresizer: true,
|
|
minpos: panel.resize.min || 0,
|
|
maxpos: panel.resize.max || 0
|
|
};
|
|
if (!stretch) {
|
|
panel.resize.el = resizer.el = panel.el.after('<div class="layout-resizer after"></div>').next();
|
|
this.panels.push(resizer);
|
|
} else {
|
|
panel.resize.el = resizer.el = panel.el.before('<div class="layout-resizer before"></div>').prev();
|
|
this.panels.splice(this.panels.length - 1, 0, resizer);
|
|
}
|
|
panel.resize.hidden && resizer.el.hide();
|
|
}
|
|
},
|
|
this);
|
|
},
|
|
doLayout: function () {},
|
|
getElementHeight: function (el) {
|
|
return parseInt(el.css("height"));
|
|
},
|
|
getElementWidth: function (el) {
|
|
return parseInt(el.css("width"));
|
|
},
|
|
onSelectStart: function (e) {
|
|
if (e.preventDefault) {
|
|
e.preventDefault();
|
|
}
|
|
return false;
|
|
},
|
|
addHandler: function (elem, type, handler) {
|
|
if (elem.addEventListener) {
|
|
elem.addEventListener(type, handler);
|
|
} else {
|
|
if (elem.attachEvent) {
|
|
elem.attachEvent("on" + type, handler);
|
|
} else {
|
|
elem["on" + type] = handler;
|
|
}
|
|
}
|
|
},
|
|
removeHandler: function (elem, type, handler) {
|
|
if (elem.removeEventListener) {
|
|
elem.removeEventListener(type, handler);
|
|
} else {
|
|
if (elem.detachEvent) {
|
|
elem.detachEvent("on" + type, handler);
|
|
} else {
|
|
elem["on" + type] = null;
|
|
}
|
|
}
|
|
},
|
|
clearSelection: function () {
|
|
if (window.getSelection) {
|
|
var selection = window.getSelection();
|
|
if (selection.empty) {
|
|
selection.empty();
|
|
} else {
|
|
if (selection.removeAllRanges) {
|
|
selection.removeAllRanges();
|
|
}
|
|
}
|
|
} else {
|
|
if (document.selection) {
|
|
document.selection.empty();
|
|
}
|
|
}
|
|
},
|
|
resizeStart: function (e) {
|
|
this.clearSelection();
|
|
this.addHandler(window.document, "selectstart", this.onSelectStart);
|
|
$(document).on({
|
|
mousemove: this.resize.eventMove,
|
|
mouseup: this.resize.eventStop
|
|
});
|
|
var panel = e.data.panel;
|
|
this.resize.type = e.data.type;
|
|
this.resize.$el = panel.el;
|
|
this.resize.min = panel.minpos;
|
|
this.resize.$el.addClass("move");
|
|
if (e.data.type == "vertical") {
|
|
this.resize.height = parseInt(this.resize.$el.css("height"));
|
|
this.resize.max = (panel.maxpos > 0 ? panel.maxpos : this.resize.$el.parent().height() + panel.maxpos) - this.resize.height;
|
|
this.resize.inity = e.pageY - parseInt(e.currentTarget.style.top);
|
|
} else {
|
|
if (e.data.type == "horizontal") {
|
|
this.resize.width = parseInt(this.resize.$el.css("width"));
|
|
this.resize.max = (panel.maxpos > 0 ? panel.maxpos : this.resize.$el.parent().height() + panel.maxpos) - this.resize.width;
|
|
this.resize.initx = e.pageX - parseInt(e.currentTarget.style.left);
|
|
}
|
|
}
|
|
},
|
|
resizeMove: function (e) {
|
|
if (this.resize.type == "vertical") {
|
|
var prop = "top",
|
|
value = e.pageY - this.resize.inity;
|
|
} else {
|
|
if (this.resize.type == "horizontal") {
|
|
prop = "left";
|
|
value = e.pageX - this.resize.initx;
|
|
}
|
|
}
|
|
if (! (value < this.resize.min) && !(value > this.resize.max)) {
|
|
this.resize.$el[0].style[prop] = value + "px";
|
|
}
|
|
},
|
|
resizeStop: function (e) {
|
|
this.removeHandler(window.document, "selectstart", this.onSelectStart);
|
|
$(document).off({
|
|
mousemove: this.resize.eventMove,
|
|
mouseup: this.resize.eventStop
|
|
});
|
|
if (this.resize.type == "vertical") {
|
|
var prop = "height";
|
|
var value = e.pageY - this.resize.inity;
|
|
} else {
|
|
if (this.resize.type == "horizontal") {
|
|
prop = "width";
|
|
value = e.pageX - this.resize.initx;
|
|
}
|
|
}
|
|
value < this.resize.min && (value = this.resize.min);
|
|
value > this.resize.max && (value = this.resize.max);
|
|
if (this.resize.$el.hasClass("after")) {
|
|
var panel = this.resize.$el.prev();
|
|
} else {
|
|
panel = this.resize.$el.next();
|
|
value = panel.parent()[prop]() - (value + this.resize[prop]);
|
|
}
|
|
panel.css(prop, value + "px");
|
|
this.resize.$el.removeClass("move");
|
|
delete this.resize.$el;
|
|
if (this.resize.value != value) {
|
|
this.doLayout();
|
|
this.trigger("layout:resizedrag", this);
|
|
}
|
|
}
|
|
}); ! Common.UI && (Common.UI = {});
|
|
Common.UI.VBoxLayout = function (options) {
|
|
BaseLayout.apply(this, arguments);
|
|
this.initialize.apply(this, arguments);
|
|
};
|
|
Common.UI.VBoxLayout.prototype = _.extend(new BaseLayout(), {
|
|
initialize: function (options) {
|
|
BaseLayout.prototype.initialize.call(this, options);
|
|
this.panels.forEach(function (panel) { ! panel.stretch && !panel.height && (panel.height = this.getElementHeight(panel.el));
|
|
if (panel.isresizer) {
|
|
panel.el.on("mousedown", {
|
|
type: "vertical",
|
|
panel: panel
|
|
},
|
|
_.bind(this.resizeStart, this));
|
|
}
|
|
},
|
|
this);
|
|
this.doLayout.call(this);
|
|
},
|
|
doLayout: function () {
|
|
var height = 0,
|
|
stretchable, style;
|
|
this.panels.forEach(function (panel) {
|
|
if (!panel.stretch) {
|
|
style = panel.el.is(":visible");
|
|
if (style) {
|
|
height += (panel.rely !== true ? panel.height : this.getElementHeight(panel.el));
|
|
}
|
|
if (panel.resize && panel.resize.autohide !== false && panel.resize.el) {
|
|
if (style) {
|
|
panel.resize.el.show();
|
|
stretchable && (height += panel.resize.height);
|
|
} else {
|
|
panel.resize.el.hide();
|
|
stretchable && (height -= panel.resize.height);
|
|
}
|
|
}
|
|
} else {
|
|
stretchable = panel;
|
|
}
|
|
},
|
|
this);
|
|
stretchable && (stretchable.height = this.$parent.height() - height);
|
|
height = 0;
|
|
this.panels.forEach(function (panel) {
|
|
if (panel.el.is(":visible")) {
|
|
style = {
|
|
top: height
|
|
};
|
|
panel.rely !== true && (style.height = panel.height);
|
|
panel.el.css(style);
|
|
height += this.getElementHeight(panel.el);
|
|
}
|
|
},
|
|
this);
|
|
}
|
|
});
|
|
Common.UI.HBoxLayout = function (options) {
|
|
BaseLayout.apply(this, arguments);
|
|
this.initialize.apply(this, arguments);
|
|
};
|
|
Common.UI.HBoxLayout.prototype = _.extend(new BaseLayout(), {
|
|
initialize: function (options) {
|
|
BaseLayout.prototype.initialize.call(this, options);
|
|
this.panels.forEach(function (panel) { ! panel.stretch && !panel.width && (panel.width = this.getElementWidth(panel.el));
|
|
if (panel.isresizer) {
|
|
panel.el.on("mousedown", {
|
|
type: "horizontal",
|
|
panel: panel
|
|
},
|
|
_.bind(this.resizeStart, this));
|
|
}
|
|
},
|
|
this);
|
|
this.doLayout.call(this);
|
|
},
|
|
doLayout: function (event) {
|
|
var width = 0,
|
|
stretchable, style;
|
|
this.panels.forEach(function (panel) {
|
|
if (!panel.stretch) {
|
|
style = panel.el.is(":visible");
|
|
if (style) {
|
|
width += (panel.rely !== true ? panel.width : this.getElementWidth(panel.el));
|
|
}
|
|
if (panel.resize && panel.resize.autohide !== false && panel.resize.el) {
|
|
if (style) {
|
|
panel.resize.el.show();
|
|
stretchable && (width -= panel.resize.width);
|
|
} else {
|
|
panel.resize.el.hide();
|
|
stretchable && (width -= panel.resize.width);
|
|
}
|
|
}
|
|
} else {
|
|
stretchable = panel;
|
|
}
|
|
},
|
|
this);
|
|
stretchable && (stretchable.width = this.$parent.width() - width);
|
|
width = 0;
|
|
this.panels.forEach(function (panel) {
|
|
if (panel.el.is(":visible")) {
|
|
style = {
|
|
left: width
|
|
};
|
|
panel.rely !== true && (style.width = panel.width);
|
|
panel.el.css(style);
|
|
width += this.getElementWidth(panel.el);
|
|
}
|
|
},
|
|
this);
|
|
}
|
|
});
|
|
Common.UI.VBoxLayout.prototype.constructor = Common.UI.VBoxLayout;
|
|
Common.UI.HBoxLayout.prototype.constructor = Common.UI.HBoxLayout;
|
|
}); |