Add the ability to resize windows.
This commit is contained in:
Julia Radzhabova
parent
52bc1f57fd
commit
bc0a3bffd1
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue