📄 window.js.svn-base
字号:
// 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.0var 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 + -