window.js.svn-base

嵌入式无线路由系统openwrt的web配置工具

				this.titleEl.setStyle('display', 'none');
			}.bind(this));
		}

		// Inject window into DOM
		this.windowEl.inject(this.options.container);

		if (this.options.type != 'notification'){
      this.setMochaControlsWidth();
		}

		this.drawWindow(this.windowEl);

		// Attach events to the window
		this.attachDraggable(this.windowEl);
		this.attachResizable(this.windowEl);
		this.setupEvents(this.windowEl);

		// Move window into position. If position not specified by user then center the window on the page.
		if (this.options.container == document.body || this.options.container == MochaUI.Desktop.desktop){
			var dimensions = window.getSize();
		}
		else {
			var dimensions = $(this.options.container).getSize();
		}

		this.windowEl.setStyles({
			'top': this.options.y ? this.options.y - this.options.shadowBlur : topPad + dimensions.y * topOffset - (this.options.height + this.headerFooterShadow) * winOffset,
			'left': this.options.x ? this.options.x - this.options.shadowBlur : dimensions.x * .5 - this.options.width * .5
		});

		if (this.options.type == 'modal') {
			MochaUI.Modal.show();
			this.windowEl.setStyles({
				'zIndex': 11000,
				'visibility': 'visible'
			});
			this.isFocused = true;
			this.isModal = true;
		}
		else if (this.options.type == 'notification') {
      this.contentEl.set('html', this.options.notifyText);
			this.windowEl.setStyles({
				'zIndex': 13000,
				'visibility': 'visible'
			});

      this.closeTimer = MochaUI.closeWindow.delay(4000, this, this.windowEl);
		}
    else {
      this.windowEl.setStyle('visibility', 'visible');
		  setTimeout(MochaUI.focusWindow.pass(this.windowEl, this), 10);
    }
	},
	setupEvents: function(windowEl) {

		// Set events
		// Note: if a button does not exist, its due to properties passed to newWindow() stating otherwice
		if (this.closeButtonEl){
			this.closeButtonEl.addEvent('click', MochaUI.closeWindow.bind(this, windowEl));
		}

		if (this.options.type == 'window'){
			windowEl.addEvent('click', MochaUI.focusWindow.bind(this, windowEl));
		}

		if (this.minimizeButtonEl) {
			this.minimizeButtonEl.addEvent('click', MochaUI.Dock.minimizeWindow.bind(MochaUI.Dock, windowEl));
		}

		if (this.maximizeButtonEl) {
			this.maximizeButtonEl.addEvent('click', function() {
				if (this.isMaximized) {
					MochaUI.Desktop.restoreWindow(windowEl);
				} else {
					MochaUI.Desktop.maximizeWindow(windowEl);
				}
			}.bind(this));
		}

		if (this.options.collapsible == true){
		  this.titleEl.addEvent('selectstart', MochaUI.eventStop);

			this.titleBarEl.addEvents({
        mousedown: MochaUI.eventStop,
        dblclick: function(e) {
				  new Event(e).stop();
				  MochaUI.collapseToggle(this.windowEl);
        }.bind(this)
      });

      /*
      forms in non-modal windows won't work with this in ff3 win at least

			this.contentEl.addEvents({
        selectstart: MochaUI.eventStop,
        mousedown: MochaUI.eventStop,
        dblclick: function(e) {
				  new Event(e).stop();
				  MochaUI.Dock.minimizeWindow(this.windowEl);
        }.bind(this)
      });
      */
		}

    if (this.options.type == 'notification') {
      this.contentEl.addEvents({
        mouseover: this.notificationOver.bind(this),
        mouseout: MochaUI.closeWindow.bind(this, this.windowEl)
      });
    }
	},
	/*

	Internal Function: notificationOver()
		 Don't close notification window if cursor is over it

  */
	notificationOver: function() {
    if (this.closeTimer) {
      $clear(this.closeTimer);
    }
  },
	/*

	Internal Function: attachDraggable()
		Make window draggable.

	Arguments:
		windowEl

	*/
	attachDraggable: function(windowEl){
		if (!this.options.draggable) return;
		this.windowDrag = new Drag.Move(windowEl, {
			handle: this.titleBarEl,
			container: this.options.restrict == true ? $(this.options.container) : false,
			grid: this.options.draggableGrid,
			limit: this.options.draggableLimit,
			snap: this.options.draggableSnap,
			onStart: function() {
				MochaUI.focusWindow(windowEl);
        this.windowEl.addClass('mochaShadow');
			}.bind(this),
			onComplete: function() {
        this.windowEl.removeClass('mochaShadow');
				// Store new position in options.
				this.saveValues();
			}.bind(this)
		});
	},
	/*

	Internal Function: attachResizable
		Make window resizable.

	Arguments:
		windowEl

	*/
	attachResizable: function(windowEl){
		if (!this.options.resizable) return;
		this.contentWrapperEl.makeResizable({
			container: this.options.restrict == true ? $(this.options.container) : false,
			handle: this.se,
			limit: {
				x: [this.options.resizeLimit.x[0] - (this.options.shadowBlur * 2), this.options.resizeLimit.x[1] - (this.options.shadowBlur * 2) ],
				y: [this.options.resizeLimit.y[0] - this.headerFooterShadow, this.options.resizeLimit.y[1] - this.headerFooterShadow]
			},
			modifiers: {x: 'width', y: 'height'},
			onStart: this.windowEl.addClass.bind(this.windowEl, ['mochaShadow']),
			onDrag: this.sizeWindow.bind(this),
			onComplete: function(){
        this.windowEl.removeClass('mochaShadow');
        this.drawWindow(this.windowEl);
		    this.fireEvent('onResize', this.windowEl);
			}.bind(this)
		});
	},
	/*

	Internal Function: insertWindowElements

	Arguments:
		windowEl

	*/
	insertWindowElements: function(){

		var options = this.options;
		var height = options.height;
		var width = options.width;
		var id = options.id;

		var cache = {};

		if (Browser.Engine.trident4){
			cache.zIndexFixEl = new Element('iframe', {
				'id': id + '_zIndexFix',
				'class': 'zIndexFix',
				'scrolling': 'no',
				'marginWidth': 0,
				'marginHeight': 0,
				'src': ''
			}).inject(this.windowEl);
		}

		cache.overlayEl = new Element('div', {
			'id': id + '_overlay',
			'class': 'mochaOverlay'
		}).inject(this.windowEl);

		cache.titleBarEl = new Element('div', {
			'id': id + '_titleBar',
			'class': 'mochaTitlebar',
			'styles': {
				'cursor': options.draggable ? 'move' : 'default'
			}
		}).inject(cache.overlayEl, 'top');

		cache.titleEl = new Element('h3', {
			'id': id + '_title',
			'class': 'mochaTitle'
		}).inject(cache.titleBarEl);

		cache.contentBorderEl = new Element('div', {
			'id': id + '_contentBorder',
			'class': 'mochaContentBorder'
		}).inject(cache.overlayEl);

    cache.footerEl = new Element('div', {
			'id': id + '_footer',
			'class': 'mochaFooter',
			'styles': {
				'height': this.options.footerHeight
			}
		}).inject(cache.overlayEl);

		cache.contentWrapperEl = new Element('div', {
			'id': id + '_contentWrapper',
			'class': 'mochaContentWrapper',
			'styles': {
				'width': width,
				'height': height
			}
		}).inject(cache.contentBorderEl);

		if (this.options.shape == 'gauge'){
			cache.contentBorderEl.setStyle('borderWidth', 0);
		}

		cache.contentEl = new Element('div', {
			'id': id + '_content',
			'class': 'mochaContent'
		}).inject(cache.contentWrapperEl);

    if (this.options.fixedHeight) {    
      cache.contentEl.setStyles({
        'width': width - this.options.padding.left - this.options.padding.right,
        'height': height - this.options.padding.top - this.options.padding.bottom,
        'overflow-y': 'auto'
      });
    }

		cache.canvasEl = new Element('canvas', {
			'id': id + '_canvas',
			'class': 'mochaCanvas',
			'width': 1,
			'height': 1
		}).inject(this.windowEl);

		if (Browser.Engine.trident && MochaUI.ieSupport == 'excanvas') {
			G_vmlCanvasManager.initElement(cache.canvasEl);
			cache.canvasEl = this.windowEl.getElement('.mochaCanvas');
		}

		cache.controlsEl = new Element('div', {
			'id': id + '_controls',
			'class': 'mochaControls'
		}).inject(cache.overlayEl, 'after');

		if (options.useCanvasControls == true){
			cache.canvasControlsEl = new Element('canvas', {
				'id': id + '_canvasControls',
				'class': 'mochaCanvasControls',
				'width': 14,
				'height': 14
			}).inject(this.windowEl);

			if (Browser.Engine.trident && MochaUI.ieSupport == 'excanvas') {
				G_vmlCanvasManager.initElement(cache.canvasControlsEl);
				cache.canvasControlsEl = this.windowEl.getElement('.mochaCanvasControls');
			}
		}

		if (options.closable){
			cache.closeButtonEl = new Element('div', {
				'id': id + '_closeButton',
				'class': 'mochaCloseButton',
				'title': 'Close'
			}).inject(cache.controlsEl);
			if (options.useCanvasControls == true){
				cache.closeButtonEl.setStyle('background', 'none');
			}
		}

		if (options.maximizable){
			cache.maximizeButtonEl = new Element('div', {
				'id': id + '_maximizeButton',
				'class': 'mochaMaximizeButton',
				'title': 'Maximize'
			}).inject(cache.controlsEl);
			if (options.useCanvasControls == true){
				cache.maximizeButtonEl.setStyle('background', 'none');
			}
		}

		if (options.minimizable){
			cache.minimizeButtonEl = new Element('div', {
				'id': id + '_minimizeButton',
				'class': 'mochaMinimizeButton',
				'title': 'Minimize'
			}).inject(cache.controlsEl);
			if (options.useCanvasControls == true){
				cache.minimizeButtonEl.setStyle('background', 'none');
			}
		}

		if (this.options.shape == 'gauge'){
			cache.canvasHeaderEl = new Element('canvas', {
				'id': id + '_canvasHeader',
				'class': 'mochaCanvasHeader',
				'width': this.options.width,
				'height': 26
			}).inject(this.windowEl, 'bottom');

			if (Browser.Engine.trident && MochaUI.ieSupport == 'excanvas') {
				G_vmlCanvasManager.initElement(cache.canvasHeaderEl);
				cache.canvasHeaderEl = this.windowEl.getElement('.mochaCanvasHeader');
			}
		}

		if ( Browser.Engine.trident ) {
			cache.overlayEl.setStyle('zIndex', 2);
		}

		// For Mac Firefox 2 to help reduce scrollbar bugs in that browser
		if (Browser.Platform.mac && Browser.Engine.gecko) {
			cache.overlayEl.setStyle('overflow', 'auto');
		}

		if (options.resizable){
			cache.se = new Element('div', {
				'id': id + '_resizeHandle_se',
				'class': 'handle cornerSE',
				'styles': {
					'bottom': 0,
					'right': 0,
					'cursor': 'se-resize'
				}
			}).inject(cache.overlayEl, 'after');
		}
		$extend(this, cache);

	},
	sizeWindow: function() {
	  var shadowBlur2x = this.options.shadowBlur * 2;
		var borderHeight = this.contentBorderEl.getStyle('border-top').toInt() + this.contentBorderEl.getStyle('border-bottom').toInt();

		this.headerFooterShadow = this.options.headerHeight + this.options.footerHeight + shadowBlur2x;
		this.windowEl.setStyles({
			'height': this.contentWrapperEl.getStyle('height').toInt() + this.headerFooterShadow + borderHeight,
			'width': this.contentWrapperEl.getStyle('width').toInt() + shadowBlur2x
		});
  },
	/*

	Internal function: drawWindow
		This is where we create the canvas GUI

	Arguments:
		windowEl: the $(window)
		shadows: (boolean) false will draw a window without shadows

	*/
	drawWindow: function(windowEl, shadows) {

		if (this.isCollapsed){
			return this.drawWindowCollapsed(windowEl, shadows);
		}

		var options = this.options;
		var shadowBlur = options.shadowBlur;
		var shadowBlur2x = shadowBlur * 2;
		var shadowOffset = this.options.shadowOffset;

		this.overlayEl.setStyle('width', this.contentWrapperEl.offsetWidth);

		// Resize iframe when window is resized
		if (this.iframe) {
			this.iframeEl.setStyles('height', this.contentWrapperEl.offsetHeight);
		}

		var borderHeight = this.contentBorderEl.getStyle('border-top').toInt() + this.contentBorderEl.getStyle('border-bottom').toInt();

		this.headerFooterShadow = options.headerHeight + options.footerHeight + shadowBlur2x;
		var height = this.contentWrapperEl.getStyle('height').toInt() + this.headerFooterShadow + borderHeight;
		var width = this.contentWrapperEl.getStyle('width').toInt() + shadowBlur2x;
		this.windowEl.setStyles({
			'height': height,
			'width': width