📄 window.js
字号:
}
// Register global event to capture mouseUp and mouseMove
Event.observe(document, "mouseup", this.eventMouseUp, false);
Event.observe(document, "mousemove", this.eventMouseMove, false);
// Add an invisible div to keep catching mouse event over iframes
WindowUtilities.disableScreen('__invisible__', '__invisible__');
// Stop selection while dragging
document.body.ondrag = function () { return false; };
document.body.onselectstart = function () { return false; };
this.currentDrag.show();
Event.stop(event);
},
// updateDrag event
_updateDrag: function(event) {
var pointer = [Event.pointerX(event), Event.pointerY(event)];
var dx = pointer[0] - this.pointer[0];
var dy = pointer[1] - this.pointer[1];
// Resize case, update width/height
if (this.doResize) {
var w = this.widthOrg + dx;
var h = this.heightOrg + dy;
dx = this.width - this.widthOrg
dy = this.height - this.heightOrg
// Check if it's a right position, update it to keep upper-left corner at the same position
if (this.useLeft)
w = this._updateWidthConstraint(w)
else
this.currentDrag.setStyle({right: (this.rightOrg -dx) + 'px'});
// Check if it's a bottom position, update it to keep upper-left corner at the same position
if (this.useTop)
h = this._updateHeightConstraint(h)
else
this.currentDrag.setStyle({bottom: (this.bottomOrg -dy) + 'px'});
this.setSize(w , h);
Windows.notify("onResize", this);
}
// Move case, update top/left
else {
this.pointer = pointer;
if (this.useLeft) {
var left = parseFloat(this.currentDrag.getStyle('left')) + dx;
var newLeft = this._updateLeftConstraint(left);
// Keep mouse pointer correct
this.pointer[0] += newLeft-left;
this.currentDrag.setStyle({left: newLeft + 'px'});
}
else
this.currentDrag.setStyle({right: parseFloat(this.currentDrag.getStyle('right')) - dx + 'px'});
if (this.useTop) {
var top = parseFloat(this.currentDrag.getStyle('top')) + dy;
var newTop = this._updateTopConstraint(top);
// Keep mouse pointer correct
this.pointer[1] += newTop - top;
this.currentDrag.setStyle({top: newTop + 'px'});
}
else
this.currentDrag.setStyle({bottom: parseFloat(this.currentDrag.getStyle('bottom')) - dy + 'px'});
}
if (this.iefix)
this._fixIEOverlapping();
this._removeStoreLocation();
Event.stop(event);
},
// endDrag callback
_endDrag: function(event) {
// Remove temporary div over iframes
WindowUtilities.enableScreen('__invisible__');
if (this.doResize)
Windows.notify("onEndResize", this);
else
Windows.notify("onEndMove", this);
// Release event observing
Event.stopObserving(document, "mouseup", this.eventMouseUp,false);
Event.stopObserving(document, "mousemove", this.eventMouseMove, false);
Event.stop(event);
this._hideWiredElement();
// Store new location/size if need be
this._saveCookie()
// Restore selection
document.body.ondrag = null;
document.body.onselectstart = null;
},
_updateLeftConstraint: function(left) {
if (this.constraint && this.useLeft && this.useTop) {
var width = this.options.parent == document.body ? WindowUtilities.getPageSize().windowWidth : this.options.parent.getDimensions().width;
if (left < this.constraintPad.left)
left = this.constraintPad.left;
if (left + this.width + this.widthE + this.widthW > width - this.constraintPad.right)
left = width - this.constraintPad.right - this.width - this.widthE - this.widthW;
}
return left;
},
_updateTopConstraint: function(top) {
if (this.constraint && this.useLeft && this.useTop) {
var height = this.options.parent == document.body ? WindowUtilities.getPageSize().windowHeight : this.options.parent.getDimensions().height;
if (top < this.constraintPad.top)
top = this.constraintPad.top;
if (top + this.height + this.heightN + this.heightS > height - this.constraintPad.bottom)
top = height - this.constraintPad.bottom - this.height - this.heightS - this.heightN;
}
return top;
},
_updateWidthConstraint: function(w) {
if (this.constraint && this.useLeft && this.useTop) {
var width = this.options.parent == document.body ? WindowUtilities.getPageSize().windowWidth : this.options.parent.getDimensions().width;
var left = parseFloat(this.element.getStyle("left"));
if (left + w + this.widthE + this.widthW > width - this.constraintPad.right)
w = width - this.constraintPad.right - left - this.widthE - this.widthW;
}
return w;
},
_updateHeightConstraint: function(h) {
if (this.constraint && this.useLeft && this.useTop) {
var height = this.options.parent == document.body ? WindowUtilities.getPageSize().windowHeight : this.options.parent.getDimensions().height;
var top = parseFloat(this.element.getStyle("top"));
if (top + h + this.heightN + this.heightS > height - this.constraintPad.bottom)
h = height - this.constraintPad.bottom - top - this.heightN - this.heightS;
}
return h;
},
// Creates HTML window code
_createWindow: function(id) {
var className = this.options.className;
var win = document.createElement("div");
win.setAttribute('id', id);
win.className = "dialog";
var content;
if (this.options.url)
content= "<iframe frameborder=\"0\" name=\"" + id + "_content\" id=\"" + id + "_content\" src=\"" + this.options.url + "\"> </iframe>";
else
content ="<div id=\"" + id + "_content\" class=\"" +className + "_content\"> </div>";
var closeDiv = this.options.closable ? "<div class='"+ className +"_close' id='"+ id +"_close' onclick='Windows.close(\""+ id +"\", event)'> </div>" : "";
var minDiv = this.options.minimizable ? "<div class='"+ className + "_minimize' id='"+ id +"_minimize' onclick='Windows.minimize(\""+ id +"\", event)'> </div>" : "";
var maxDiv = this.options.maximizable ? "<div class='"+ className + "_maximize' id='"+ id +"_maximize' onclick='Windows.maximize(\""+ id +"\", event)'> </div>" : "";
var seAttributes = this.options.resizable ? "class='" + className + "_sizer' id='" + id + "_sizer'" : "class='" + className + "_se'";
win.innerHTML = closeDiv + minDiv + maxDiv + "\
<table id='"+ id +"_row1' class=\"top table_window\">\
<tr>\
<td class='"+ className +"_nw'> </td>\
<td class='"+ className +"_n'><div id='"+ id +"_top' class='"+ className +"_title title_window'>"+ this.options.title +"</div></td>\
<td class='"+ className +"_ne'> </td>\
</tr>\
</table>\
<table id='"+ id +"_row2' class=\"mid table_window\">\
<tr>\
<td class='"+ className +"_w'></td>\
<td id='"+ id +"_table_content' class='"+ className +"_content' valign='top'>" + content + "</td>\
<td class='"+ className +"_e'></td>\
</tr>\
</table>\
<table id='"+ id +"_row3' class=\"bot table_window\">\
<tr>\
<td class='"+ className +"_sw'> </td>\
<td class='"+ className +"_s'><div id='"+ id +"_bottom' class='status_bar'> </div></td>\
<td " + seAttributes + "> </td>\
</tr>\
</table>\
";
Element.hide(win);
this.options.parent.insertBefore(win, this.options.parent.firstChild);
Event.observe($(id + "_content"), "load", this.options.onload);
return win;
},
changeClassName: function(newClassName) {
var className = this.options.className;
var id = this.getId();
var win = this;
$A(["_close","_minimize","_maximize","_sizer", "_content"]).each(function(value) { win._toggleClassName($(id + value), className + value, newClassName + value) });
$$("#" + id + " td").each(function(td) {td.className = td.className.sub(className,newClassName) });
this.options.className = newClassName;
},
_toggleClassName: function(element, oldClassName, newClassName) {
if (element) {
element.removeClassName(oldClassName);
element.addClassName(newClassName);
}
},
// Sets window location
setLocation: function(top, left) {
top = this._updateTopConstraint(top);
left = this._updateLeftConstraint(left);
this.element.setStyle({top: top + 'px'});
this.element.setStyle({left: left + 'px'});
this.useLeft = true;
this.useTop = true;
},
getLocation: function() {
var location = {};
if (this.useTop)
location = Object.extend(location, {top: this.element.getStyle("top")});
else
location = Object.extend(location, {bottom: this.element.getStyle("bottom")});
if (this.useLeft)
location = Object.extend(location, {left: this.element.getStyle("left")});
else
location = Object.extend(location, {right: this.element.getStyle("right")});
return location;
},
// Gets window size
getSize: function() {
return {width: this.width, height: this.height};
},
// Sets window size
setSize: function(width, height) {
width = parseFloat(width);
height = parseFloat(height);
// Check min and max size
if (width < this.options.minWidth)
width = this.options.minWidth;
if (height < this.options.minHeight)
height = this.options.minHeight;
if (this.options. maxHeight && height > this.options. maxHeight)
height = this.options. maxHeight;
if (this.options. maxWidth && width > this.options. maxWidth)
width = this.options. maxWidth;
this.width = width;
this.height = height;
var e = this.currentDrag ? this.currentDrag : this.element;
e.setStyle({width: width + this.widthW + this.widthE + "px"})
e.setStyle({height: height + this.heightN + this.heightS + "px"})
// Update content height
if (!this.currentDrag || this.currentDrag == this.element) {
var content = $(this.element.id + '_content');
content.setStyle({height: height + 'px'});
content.setStyle({width: width + 'px'});
}
},
updateHeight: function() {
this.setSize(this.width, this.content.scrollHeight)
},
updateWidth: function() {
this.setSize(this.content.scrollWidth, this.height)
},
// Brings window to front
toFront: function() {
if (Windows.focusedWindow == this)
return;
this.setZIndex(Windows.maxZIndex + 20);
Windows.notify("onFocus", this);
},
// Displays window modal state or not
show: function(modal) {
if (modal) {
Windows.addModalWindow(this);
this.modal = true;
this.setZIndex(Windows.maxZIndex + 20);
Windows.unsetOverflow(this);
}
// To restore overflow if need be
if (this.oldStyle)
this.getContent().setStyle({overflow: this.oldStyle});
if (! this.width || !this.height) {
var size = WindowUtilities._computeSize(this.content.innerHTML, this.content.id, this.width, this.height, 0, this.options.className)
if (this.height)
this.width = size + 5
else
this.height = size + 5
}
this.setSize(this.width, this.height);
if (this.centered)
this._center(this.centerTop, this.centerLeft);
Windows.notify("onBeforeShow", this);
if (this.options.showEffect != Element.show && this.options.showEffectOptions )
this.options.showEffect(this.element, this.options.showEffectOptions);
else
this.options.showEffect(this.element);
this._checkIEOverlapping();
this.visible = true;
WindowUtilities.focusedWindow = this
Windows.notify("onShow", this);
},
// Displays window modal state or not at the center of the page
showCenter: function(modal, top, left) {
this.centered = true;
this.centerTop = top;
this.centerLeft = left;
this.show(modal);
},
isVisible: function() {
return this.visible;
},
_center: function(top, left) {
var windowScroll = WindowUtilities.getWindowScroll();
var pageSize = WindowUtilities.getPageSize();
if (!top)
top = (pageSize.windowHeight - (this.height + this.heightN + this.heightS))/2;
top += windowScroll.top
if (!left)
left = (pageSize.windowWidth - (this.width + this.widthW + this.widthE))/2;
left += windowScroll.left
this.setLocation(top, left);
this.toFront();
},
_recenter: function(event) {
if (this.modal && this.centered) {
var pageSize = WindowUtilities.getPageSize();
// Check for this stupid IE that sends dumb events
if (this.pageSize && this.pageSize.pageWidth == pageSize.windowWidth && this.pageSize.pageHeight == pageSize.windowHeight)
return;
this.pageSize = pageSize;
// set height of Overlay to take up whole page and show
if ($('overlay_modal')) {
$('overlay_modal').style.height = (pageSize.pageHeight + 'px');
$('overlay_modal').style.width = (pageSize.pageWidth + 'px');
}
if (this.options.recenterAuto)
this._center(this.centerTop, this.centerLeft);
}
},
// Hides window
hide: function() {
this.visible = false;
if (this.modal) {
Windows.removeModalWindow(this);
Windows.resetOverflow();
}
// To avoid bug on scrolling bar
this.oldStyle = this.getContent().getStyle('overflow') || "auto"
this.getContent().setStyle({overflow: "hidden"});
this.options.hideEffect(this.element, this.options.hideEffectOptions);
if(this.iefix)
this.iefix.hide();
Windows.notify("onHide", this);
},
minimize: function() {
var r2 = $(this.getId() + "_row2");
var dh = r2.getDimensions().height;
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -