Skip to content

W
web-apps
Commit bc0a3bff authored by Julia Radzhabova's avatar Julia Radzhabova
Browse files
Options

Add the ability to resize windows.

parent 52bc1f57
Hide whitespace changes
Inline Side-by-side
Showing with 148 additions and 1 deletion
apps/common/main/lib/component/Window.js
View file @ bc0a3bff
......@@ -150,7 +150,11 @@ define([
title: 'Title',
alias: 'Window',
cls: '',
toolclose: 'close'
toolclose: 'close',
maxwidth: undefined,
maxheight: undefined,
minwidth: 0,
minheight: 0
};
var template = '<div class="asc-window<%= modal?" modal":"" %><%= cls?" "+cls:"" %>" id="<%= id %>" style="width:<%= width %>px;">' +
......@@ -286,6 +290,81 @@ define([
}
}
/* window resize functions */
function _resizestart(event) {
Common.UI.Menu.Manager.hideAll();
var el = $(event.target),
left = parseInt(this.$window.css('left')),
top = parseInt(this.$window.css('top'));
this.resizing.enabled = true;
this.resizing.initpage_x = event.pageX;
this.resizing.initpage_y = event.pageY;
this.resizing.initx = event.pageX - left;
this.resizing.inity = event.pageY - top;
this.resizing.initw = parseInt(this.$window.css("width"));
this.resizing.inith = parseInt(this.$window.css("height"));
this.resizing.type = [el.hasClass('left') ? -1 : (el.hasClass('right') ? 1 : 0), el.hasClass('top') ? -1 : (el.hasClass('bottom') ? 1 : 0)];
var main_width = (window.innerHeight == undefined) ? document.documentElement.offsetWidth : window.innerWidth;
var main_height = (window.innerHeight == undefined) ? document.documentElement.offsetHeight : window.innerHeight;
if (!this.initConfig.maxwidth) this.initConfig.maxwidth = main_width;
if (!this.initConfig.maxheight) this.initConfig.maxheight = main_height;
if (this.resizing.type[0]>0) {
this.resizing.maxx = Math.min(main_width, left+this.initConfig.maxwidth);
this.resizing.minx = left+this.initConfig.minwidth;
} else if (this.resizing.type[0]<0) {
this.resizing.maxx = left+this.resizing.initw-this.initConfig.minwidth;
this.resizing.minx = Math.max(0, left+this.resizing.initw-this.initConfig.maxwidth);
}
if (this.resizing.type[1]>0) {
this.resizing.maxy = Math.min(main_height, top+this.initConfig.maxheight);
this.resizing.miny = top+this.initConfig.minheight;
} else if (this.resizing.type[1]<0) {
this.resizing.maxy = top+this.resizing.inith-this.initConfig.minheight;
this.resizing.miny = Math.max(0, top+this.resizing.inith-this.initConfig.maxheight);
}
$(document.body).css('cursor', el.css('cursor'));
this.$window.find('.resize-border').addClass('resizing');
this.$window.find('.header').addClass('resizing');
$(document).on('mousemove', this.binding.resize);
$(document).on('mouseup', this.binding.resizeStop);
this.fireEvent('resize', [this, 'start']);
}
function _resize(event) {
if (this.resizing.enabled) {
var resized = false;
if (this.resizing.type[0] && event.pageX<this.resizing.maxx && event.pageX>this.resizing.minx) {
if (this.resizing.type[0]<0)
this.$window.css({left: event.pageX - this.resizing.initx});
this.setWidth(this.resizing.initw + (event.pageX - this.resizing.initpage_x) * this.resizing.type[0]);
resized = true;
}
if (this.resizing.type[1] && event.pageY<this.resizing.maxy && event.pageY>this.resizing.miny) {
if (this.resizing.type[1]<0)
this.$window.css({top: event.pageY - this.resizing.inity});
this.setHeight(this.resizing.inith + (event.pageY - this.resizing.initpage_y) * this.resizing.type[1]);
resized = true;
}
if (resized) this.fireEvent('resizing');
}
}
function _resizestop() {
$(document).off('mousemove', this.binding.resize);
$(document).off('mouseup', this.binding.resizeStop);
$(document.body).css('cursor', 'auto');
this.$window.find('.resize-border').removeClass('resizing');
this.$window.find('.header').removeClass('resizing');
this.resizing.enabled = false;
this.fireEvent('resize', [this, 'end']);
}
Common.UI.alert = function(options) {
var me = this.Window.prototype;
var arrBtns = {ok: me.okButtonText, cancel: me.cancelButtonText,
......@@ -450,6 +529,7 @@ define([
$window : undefined,
$lastmodal : undefined,
dragging : {enabled: false},
resizing : {enabled: false},
initialize : function(options) {
this.initConfig = {};
......@@ -503,6 +583,9 @@ define([
this.$window.css('height',this.initConfig.height);
}
if (this.initConfig.resizable)
this.setResizable(this.initConfig.resizable);
var me = this;
Common.NotificationCenter.on('window:close', function() {
if (me.$window && me.isVisible()) me.close();
......@@ -683,6 +766,7 @@ define([
if (width >= 0) {
var min = parseInt(this.$window.css('min-width'));
width < min && (width = min);
width -= (parseInt(this.$window.css('border-left-width')) + parseInt(this.$window.css('border-right-width')));
this.$window.width(width);
}
},
......@@ -695,6 +779,7 @@ define([
if (height >= 0) {
var min = parseInt(this.$window.css('min-height'));
height < min && (height = min);
height -= (parseInt(this.$window.css('border-bottom-width')) + parseInt(this.$window.css('border-top-width')));
this.$window.height(height);
if (this.initConfig.header)
......@@ -729,6 +814,38 @@ define([
return this.$window && this.$window.is(':visible');
},
setResizable: function(resizable) {
if (resizable !== this.resizable) {
if (resizable) {
var bordersTemplate = '<div class="resize-border left" style="top:' + ((this.initConfig.header) ? '33' : '5') + 'px; bottom: 5px; height: auto; border-right-style: solid; cursor: e-resize;"></div>' +
'<div class="resize-border left bottom" style="border-bottom-left-radius: 5px; cursor: sw-resize;"></div>' +
'<div class="resize-border bottom" style="left: 4px; right: 4px; width: auto; z-index: 2; border-top-style: solid; cursor: s-resize;"></div>' +
'<div class="resize-border right bottom" style="border-bottom-right-radius: 5px; cursor: se-resize;"></div>' +
'<div class="resize-border right" style="top:' + ((this.initConfig.header) ? '33' : '5') + 'px; bottom: 5px; height: auto; border-left-style: solid; cursor: w-resize;"></div>' +
'<div class="resize-border left top" style="border-top-left-radius: 5px; cursor: se-resize;"></div>' +
'<div class="resize-border top" style="left: 4px; right: 4px; width: auto; z-index: 2; border-bottom-style:' + ((this.initConfig.header) ? "none" : "solid") + '; cursor: s-resize;"></div>' +
'<div class="resize-border right top" style="border-top-right-radius: 5px; cursor: sw-resize;"></div>';
if (this.initConfig.header)
bordersTemplate += '<div class="resize-border left" style="top: 5px; height: 28px; cursor: e-resize;"></div>' +
'<div class="resize-border right" style="top: 5px; height: 28px; cursor: w-resize;"></div>';
this.$window.append(_.template(bordersTemplate));
this.binding.resize = _.bind(_resize, this);
this.binding.resizeStop = _.bind(_resizestop, this);
this.binding.resizeStart = _.bind(_resizestart, this);
(this.initConfig.minwidth==undefined) && (this.initConfig.minwidth = 0);
(this.initConfig.minheight==undefined) && (this.initConfig.minheight = 0);
this.$window.find('.resize-border').on('mousedown', this.binding.resizeStart);
} else {
this.$window.find('.resize-border').remove();
}
this.resizable = resizable;
}
},
onPrimary: function() {},
cancelButtonText: 'Cancel',
......
apps/common/main/resources/less/window.less
View file @ bc0a3bff
......@@ -80,6 +80,10 @@
}
}
}
&.resizing {
cursor: inherit !important;
}
}
> .body {
......@@ -185,6 +189,32 @@
-o-transform: none !important;
-o-transition: none !important;
}
.resize-border {
position: absolute;
width: 5px;
height: 5px;
z-index: 1;
background: @gray-lighter;
border: 1px none @gray-dark;
&.left {
left: 0;
}
&.right {
right: 0;
}
&.top {
top: 0;
}
&.bottom {
bottom: 0;
}
&.resizing {
cursor: inherit !important;
}
}
}
.modal-dlg {
......
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