Ox.Dialog: handle window resize
This commit is contained in:
parent
9899f80bfb
commit
743a36e308
1 changed files with 28 additions and 22 deletions
|
@ -66,7 +66,7 @@ Ox.Dialog = function(options, self) {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.hide()
|
.hide()
|
||||||
.appendTo(Ox.UI.$body);
|
.appendTo(Ox.$body);
|
||||||
|
|
||||||
self.hasButtons = !!self.options.buttons.length;
|
self.hasButtons = !!self.options.buttons.length;
|
||||||
self.barsHeight = 24 + 24 * self.hasButtons;
|
self.barsHeight = 24 + 24 * self.hasButtons;
|
||||||
|
@ -254,10 +254,7 @@ Ox.Dialog = function(options, self) {
|
||||||
self.drag.top - self.drag.y + event.clientY,
|
self.drag.top - self.drag.y + event.clientY,
|
||||||
self.minTop, self.maxTop
|
self.minTop, self.maxTop
|
||||||
);
|
);
|
||||||
setCSS({
|
setCSS({left: left, top: top});
|
||||||
left: left,
|
|
||||||
top: top
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -350,7 +347,7 @@ Ox.Dialog = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function resize(event) {
|
function resize(event) {
|
||||||
var ratio = self.drag.width / self.drag.height, horizontal, vertical;
|
var horizontal, vertical, offset, ratio = self.drag.width / self.drag.height;
|
||||||
if (!self.drag.fixedRatio && event.shiftKey) {
|
if (!self.drag.fixedRatio && event.shiftKey) {
|
||||||
self.drag.centerX = Math.round(self.drag.left + self.drag.width / 2);
|
self.drag.centerX = Math.round(self.drag.left + self.drag.width / 2);
|
||||||
self.drag.centerY = Math.round(self.drag.top + self.drag.height / 2);
|
self.drag.centerY = Math.round(self.drag.top + self.drag.height / 2);
|
||||||
|
@ -491,7 +488,7 @@ Ox.Dialog = function(options, self) {
|
||||||
width: self.options.width
|
width: self.options.width
|
||||||
} : {}));
|
} : {}));
|
||||||
}
|
}
|
||||||
var offset = that.offset();
|
offset = that.offset();
|
||||||
self.drag.left = offset.left;
|
self.drag.left = offset.left;
|
||||||
self.drag.top = offset.top;
|
self.drag.top = offset.top;
|
||||||
self.drag.width = self.options.width;
|
self.drag.width = self.options.width;
|
||||||
|
@ -512,6 +509,27 @@ Ox.Dialog = function(options, self) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function resizeWindow() {
|
||||||
|
Ox.print('RESIZE WINDOW')
|
||||||
|
self.options.width = Math.min(self.options.width, window.innerWidth);
|
||||||
|
self.options.height = Math.min(self.options.height, window.innerHeight - self.barsHeight);
|
||||||
|
var offset = that.offset();
|
||||||
|
setMinAndMax();
|
||||||
|
if (self.centered) {
|
||||||
|
center();
|
||||||
|
} else if (self.maximized) {
|
||||||
|
self.maximized = false;
|
||||||
|
maximize();
|
||||||
|
} else {
|
||||||
|
setCSS({
|
||||||
|
left: Math.min(offset.left, self.maxLeft),
|
||||||
|
top: Math.min(offset.top, self.maxTop),
|
||||||
|
width: self.options.width,
|
||||||
|
height: self.options.height
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function setButtons() {
|
function setButtons() {
|
||||||
var buttonsLeft,
|
var buttonsLeft,
|
||||||
buttonsRight,
|
buttonsRight,
|
||||||
|
@ -568,6 +586,7 @@ Ox.Dialog = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function setCSS(css, animate) {
|
function setCSS(css, animate) {
|
||||||
|
Ox.print('DIALOG SET CSS', css)
|
||||||
var ms = animate ? 100 : 0,
|
var ms = animate ? 100 : 0,
|
||||||
offset = that.offset(),
|
offset = that.offset(),
|
||||||
triggerEvent = self.isOpen && (
|
triggerEvent = self.isOpen && (
|
||||||
|
@ -621,7 +640,6 @@ Ox.Dialog = function(options, self) {
|
||||||
self.options.minHeight = Math.round(self.options.minWidth / ratio);
|
self.options.minHeight = Math.round(self.options.minWidth / ratio);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Ox.Log('Window', 'sMM', self, window.innerHeight, maxRatio)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
|
@ -646,6 +664,7 @@ Ox.Dialog = function(options, self) {
|
||||||
self.$layer.hide();
|
self.$layer.hide();
|
||||||
that.loseFocus();
|
that.loseFocus();
|
||||||
}
|
}
|
||||||
|
Ox.$window.off({resize: resizeWindow});
|
||||||
that.triggerEvent('close');
|
that.triggerEvent('close');
|
||||||
self.options.removeOnClose && that.remove();
|
self.options.removeOnClose && that.remove();
|
||||||
}
|
}
|
||||||
|
@ -711,20 +730,7 @@ Ox.Dialog = function(options, self) {
|
||||||
self.$layer.show();
|
self.$layer.show();
|
||||||
that.gainFocus();
|
that.gainFocus();
|
||||||
}
|
}
|
||||||
Ox.UI.$window.on({
|
Ox.$window.on({resize: resizeWindow});
|
||||||
resize: function() {
|
|
||||||
var offset = that.offset();
|
|
||||||
setMinAndMax();
|
|
||||||
if (self.centered) {
|
|
||||||
center();
|
|
||||||
} else {
|
|
||||||
that.css({
|
|
||||||
left: Math.min(offset.left, self.maxLeft) + 'px',
|
|
||||||
top: Math.min(offset.top, self.maxTop) + 'px'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
that.triggerEvent('open');
|
that.triggerEvent('open');
|
||||||
}
|
}
|
||||||
return that;
|
return that;
|
||||||
|
|
Loading…
Reference in a new issue