📄 window.js
字号:
// Copyright (c) 2006 Sébastien Gruhier (http://xilinus.com, http://itseb.com)
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// VERSION 1.0
var Window = Class.create();
Window.keepMultiModalWindow = false;
Window.prototype = {
// Constructor
// Available parameters : className, title, minWidth, minHeight, maxWidth, maxHeight, width, height, top, left, bottom, right, resizable, zIndex, opacity, recenterAuto, wiredDrag
// hideEffect, showEffect, showEffectOptions, hideEffectOptions, effectOptions, url, draggable, closable, minimizable, maximizable, parent, onload
initialize: function(id) {
if ($(id))
alert("Window " + id + " is already register is the DOM!!, be sure to use setDestroyOnClose()")
this.hasEffectLib = String.prototype.parseColor != null;
this.options = Object.extend({
className: "dialog",
minWidth: 100,
minHeight: 20,
resizable: true,
closable: true,
minimizable: true,
maximizable: true,
draggable: true,
userData: null,
showEffect: (this.hasEffectLib ? Effect.Appear : Element.show),
hideEffect: (this.hasEffectLib ? Effect.Fade : Element.hide),
showEffectOptions: {},
hideEffectOptions: {},
effectOptions: null,
parent: document.body,
title: " ",
url: null,
onload: Prototype.emptyFunction,
width: 200,
height: 300,
opacity: 1,
recenterAuto: true,
wiredDrag: false
}, arguments[1] || {});
if (this.options.effectOptions) {
Object.extend(this.options.hideEffectOptions, this.options.effectOptions);
Object.extend(this.options.showEffectOptions, this.options.effectOptions);
if (this.options.showEffect == Element.Appear)
this.options.showEffectOptions.to = this.options.opacity;
}
if (this.options.showEffect == Effect.Appear)
this.options.showEffectOptions.to = this.options.opacity;
if (this.options.hideEffect == Effect.Fade)
this.options.hideEffectOptions.from = this.options.opacity;
if (this.options.hideEffect == Element.hide)
this.options.hideEffect = function(){ Element.hide(this.element); if (this.destroyOnClose) this.destroy(); }.bind(this)
this.element = this._createWindow(id);
// Bind event listener
this.eventMouseDown = this._initDrag.bindAsEventListener(this);
this.eventMouseUp = this._endDrag.bindAsEventListener(this);
this.eventMouseMove = this._updateDrag.bindAsEventListener(this);
this.eventOnLoad = this._getWindowBorderSize.bindAsEventListener(this);
this.eventMouseDownContent = this.toFront.bindAsEventListener(this);
this.eventResize = this._recenter.bindAsEventListener(this);
this.topbar = $(this.element.id + "_top");
this.bottombar = $(this.element.id + "_bottom");
this.content = $(this.element.id + "_content");
Event.observe(this.topbar, "mousedown", this.eventMouseDown);
Event.observe(this.bottombar, "mousedown", this.eventMouseDown);
Event.observe(this.content, "mousedown", this.eventMouseDownContent);
Event.observe(window, "load", this.eventOnLoad);
Event.observe(window, "resize", this.eventResize);
Event.observe(window, "scroll", this.eventResize);
if (this.options.draggable) {
var that = this;
[this.topbar, this.topbar.up().previous(), this.topbar.up().next()].each(function(element) {
element.observe("mousedown", that.eventMouseDown);
element.addClassName("top_draggable")
});
[this.bottombar, this.bottombar.up().previous(), this.bottombar.up().next()].each(function(element) {
element.observe("mousedown", that.eventMouseDown);
element.addClassName("bottom_draggable")
});
}
if (this.options.resizable) {
this.sizer = $(this.element.id + "_sizer");
Event.observe(this.sizer, "mousedown", this.eventMouseDown);
}
this.useLeft = null;
this.useTop = null;
if (arguments[1].left != null) {
this.element.setStyle({left: parseFloat(arguments[1].left) + 'px'});
this.useLeft = true;
}
if (arguments[1].right != null) {
this.element.setStyle({right: parseFloat(arguments[1].right) + 'px'});
this.useLeft = false;
}
if (this.useLeft == null) {
this.element.setStyle({left: "0px"});
this.useLeft = true;
}
if (arguments[1].top != null) {
this.element.setStyle({top: parseFloat(arguments[1].top) + 'px'});
this.useTop = true;
}
if (arguments[1].bottom != null) {
this.element.setStyle({bottom: parseFloat(arguments[1].bottom) + 'px'});
this.useTop = false;
}
if (this.useTop == null) {
this.element.setStyle({top: "0px"});
this.useTop = true;
}
this.storedLocation = null;
this.setOpacity(this.options.opacity);
if (this.options.zIndex)
this.setZIndex(this.options.zIndex)
this.destroyOnClose = false;
this._getWindowBorderSize();
this.width = this.options.width;
this.height = this.options.height;
this.visible = false;
this.constraint = false;
this.constraintPad = {top: 0, left:0, bottom:0, right:0};
if (this.width && this.height)
this.setSize(this.options.width, this.options.height);
this.setTitle(this.options.title)
Windows.register(this);
},
// Destructor
destroy: function() {
Windows.notify("onDestroy", this);
Event.stopObserving(this.topbar, "mousedown", this.eventMouseDown);
Event.stopObserving(this.bottombar, "mousedown", this.eventMouseDown);
Event.stopObserving(this.content, "mousedown", this.eventMouseDownContent);
Event.stopObserving(window, "load", this.eventOnLoad);
Event.stopObserving(window, "resize", this.eventResize);
Event.stopObserving(window, "scroll", this.eventResize);
Event.stopObserving(this.content, "load", this.options.onload);
if (this._oldParent) {
var content = this.getContent();
var originalContent = null;
for(var i = 0; i < content.childNodes.length; i++) {
originalContent = content.childNodes[i];
if (originalContent.nodeType == 1)
break;
originalContent = null;
}
if (originalContent)
this._oldParent.appendChild(originalContent);
this._oldParent = null;
}
if (this.sizer)
Event.stopObserving(this.sizer, "mousedown", this.eventMouseDown);
if (this.options.url)
this.content.src = null
if(this.iefix)
Element.remove(this.iefix);
Element.remove(this.element);
Windows.unregister(this);
},
// Sets window deleagte, should have functions: "canClose(window)"
setDelegate: function(delegate) {
this.delegate = delegate
},
// Gets current window delegate
getDelegate: function() {
return this.delegate;
},
// Gets window content
getContent: function () {
return this.content;
},
// Sets the content with an element id
setContent: function(id, autoresize, autoposition) {
var element = $(id);
if (null == element) throw "Unable to find element '" + id + "' in DOM";
this._oldParent = element.parentNode;
var d = null;
var p = null;
if (autoresize)
d = Element.getDimensions(element);
if (autoposition)
p = Position.cumulativeOffset(element);
var content = this.getContent()
content.appendChild(element);
element.show();
if (autoresize)
this.setSize(d.width, d.height);
if (autoposition)
this.setLocation(p[1] - this.heightN, p[0] - this.widthW);
},
setHTMLContent: function(html) {
if (this.options.url) {
this.content.src = null;
this.options.url = null;
var content ="<div id=\"" + this.getId() + "_content\" class=\"" + this.options.className + "_content\"> </div>";
$(this.getId() +"_table_content").innerHTML = content;
this.content = $(this.element.id + "_content");
}
this.getContent().innerHTML = html;
},
setAjaxContent: function(url, options, showCentered, showModal) {
this.showFunction = showCentered ? "showCenter" : "show";
this.showModal = showModal || false;
if (options == null)
options = {}
this.onComplete = options.onComplete;
if (! this._onCompleteHandler)
this._onCompleteHandler = this._setAjaxContent.bind(this);
options.onComplete = this._onCompleteHandler;
new Ajax.Request(url, options);
options.onComplete = this.onComplete;
},
_setAjaxContent: function(originalRequest) {
Element.update(this.getContent(), originalRequest.responseText);
if (this.onComplete)
this.onComplete(originalRequest);
this.onComplete = null;
this[this.showFunction](this.showModal)
},
setURL: function(url) {
// Not an url content, change div to iframe
if (!this.options.url) {
this.options.url = url;
var content= "<iframe frameborder=\"0\" name=\"" + this.getId() + "_content\" id=\"" + this.getId() + "_content\" src=\"" + url + "\"> </iframe>";
$(this.getId() +"_table_content").innerHTML = content;
this.content = $(this.element.id + "_content");
} else {
this.options.url = url;
$(this.element.getAttribute('id') + '_content').src = url;
}
},
getURL: function() {
return this.options.url ? this.options.url : null;
},
refresh: function() {
if (this.options.url)
$(this.element.getAttribute('id') + '_content').src = this.options.url;
},
// Stores position/size in a cookie, by default named with window id
setCookie: function(name, expires, path, domain, secure) {
name = name || this.element.id;
this.cookie = [name, expires, path, domain, secure];
// Get cookie
var value = WindowUtilities.getCookie(name)
// If exists
if (value) {
var values = value.split(',');
var x = values[0].split(':');
var y = values[1].split(':');
var w = parseFloat(values[2]), h = parseFloat(values[3]);
var mini = values[4];
var maxi = values[5];
this.setSize(w, h);
if (mini == "true")
this.doMinimize = true; // Minimize will be done at onload window event
else if (maxi == "true")
this.doMaximize = true; // Maximize will be done at onload window event
this.useLeft = x[0] == "l";
this.useTop = y[0] == "t";
this.element.setStyle(this.useLeft ? {left: x[1]} : {right: x[1]});
this.element.setStyle(this.useTop ? {top: y[1]} : {bottom: y[1]});
}
},
// Gets window ID
getId: function() {
return this.element.id;
},
// Detroys itself when closing
setDestroyOnClose: function() {
var destroyFunc = this.destroy.bind(this);
if (this.options.hideEffectOptions.afterFinish) {
var func = this.options.hideEffectOptions.afterFinish;
this.options.hideEffectOptions.afterFinish = function() {func();destroyFunc() }
}
else
this.options.hideEffectOptions.afterFinish = function() {destroyFunc() }
this.destroyOnClose = true;
},
setConstraint: function(bool, padding) {
this.constraint = bool;
this.constraintPad = Object.extend(this.constraintPad, padding || {});
// Reset location to apply constraint
if (this.useTop && this.useLeft)
this.setLocation(parseFloat(this.element.style.top), parseFloat(this.element.style.left));
},
// initDrag event
_initDrag: function(event) {
if (isIE && this.heightN == 0)
this._getWindowBorderSize();
// Get pointer X,Y
this.pointer = [Event.pointerX(event), Event.pointerY(event)];
if (this.options.wiredDrag)
this.currentDrag = this._createWiredElement();
else
this.currentDrag = this.element;
// Resize
if (Event.element(event) == this.sizer) {
this.doResize = true;
this.widthOrg = this.width;
this.heightOrg = this.height;
this.bottomOrg = parseFloat(this.element.getStyle('bottom'));
this.rightOrg = parseFloat(this.element.getStyle('right'));
Windows.notify("onStartResize", this);
}
else {
this.doResize = false;
// Check if click on close button,
var closeButton = $(this.getId() + '_close');
if (closeButton && Position.within(closeButton, this.pointer[0], this.pointer[1])) {
this.currentDrag = null;
return;
}
this.toFront();
if (! this.options.draggable)
return;
Windows.notify("onStartMove", this);
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -