window.js

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

/*

Script: Window.js
	Build windows.

Copyright:
	Copyright (c) 2007-2008 Greg Houston, <http://greghoustondesign.com/>.

License:
	MIT-style license.

Requires:
	Core.js

*/

/*
Class: Window
	Creates a single MochaUI window.

Syntax:
	(start code)
	new MochaUI.Window(options);
	(end)

Arguments:
	options

Options:
	id - The ID of the window. If not defined, it will be set to 'win' + windowIDCount.
	title - The title of the window.
	type - ('window', 'modal' or 'notification') Defaults to 'window'.
	container - (element ID) Element the window is injected in. The container defaults to 'desktop'. If no desktop then to document.body. Use 'pageWrapper' if you don't want the windows to overlap the toolbars.
	restrict - (boolean) Restrict window to container when dragging.
	shape - ('box' or 'gauge') Shape of window. Defaults to 'box'.
	fixedHeight - (boolean) Specifies whether contentEl has fixed height or not
	collapsible - (boolean) Defaults to true.
	minimizable - (boolean) Requires MochaUI.Desktop and MochaUI.Dock. Defaults to true if dependenices are met.
	maximizable - (boolean) Requires MochaUI.Desktop. Defaults to true if dependenices are met.
	closable - (boolean) Defaults to true.
	draggable - (boolean) Defaults to false for modals; otherwise true.
	draggableGrid - (false or number) Distance in pixels for snap-to-grid dragging. Defaults to false.
	draggableLimit - (false or number) An object with x and y properties used to limit the movement of the Window. Defaults to false.
	draggableSnap - (boolean) The distance to drag before the Window starts to respond to the drag. Defaults to false.
	resizable - (boolean) Defaults to false for modals, notifications and gauges; otherwise true.
	resizeLimit - (object) Minimum and maximum width and height of window when resized.
	addClass - (string) Add a class to your window to give you more control over styling.
	width - (number) Width of content area.
	height - (number) Height of content area.
	x - (number) If x and y are left undefined the window is centered on the page.
	y - (number)
	scrollbars - (boolean)
	padding - (object)
	shadowBlur -(number) Width of shadows.
	headerHeight - (number) Height of window titlebar.
	footerHeight - (number) Height of window footer.
	cornerRadius - (number)
	contentBgColor - (hex) Body background color
	headerStartColor - ([r,g,b,]) Titlebar gradient's top color
	headerStopColor - ([r,g,b,]) Titlebar gradient's bottom color
	bodyBgColor - ([r,g,b,]) Background color of the main canvas shape
	minimizeBgColor - ([r,g,b,]) Minimize button background color
	minimizeColor - ([r,g,b,]) Minimize button color
	maximizeBgColor - ([r,g,b,]) Maximize button background color
	maximizeColor - ([r,g,b,]) Maximize button color
	closeBgColor - ([r,g,b,]) Close button background color
	closeColor - ([r,g,b,]) Close button color
	resizableColor - ([r,g,b,]) Resizable icon color
	onBeforeBuild - (function) Fired just before the window is built.
	onFocus - (function)  Fired when the window is focused.
	onBlur - (function) Fired when window loses focus.
	onResize - (function) Fired when the window is resized.
	onMinimize - (function) Fired when the window is minimized.
	onMaximize - (function) Fired when the window is maximized.
	onRestore - (function) Fired when a window is restored from minimized or maximized.
	onClose - (function) Fired just before the window is closed.
	onCloseComplete - (function) Fired after the window is closed.

Returns:
	Window object.

*/

// Having these options outside of the Class allows us to add, change, and remove
// individual options without rewriting all of them.

MochaUI.Windows.windowOptions = {
	id:                null,
	title:             'New Window',
	type:              'window',

	// Container options
	container:         null,
	restrict:          true,
	shape:             'box',
	fixedHeight:       true,

  // text for notify window, use in height calcucation
  notifyText:        '',

	// Window Events
	collapsible:       true,
	minimizable:       true,
	maximizable:       false,
	closable:          true,

	// Draggable
	draggable:         null,
	draggableGrid:     false,
	draggableLimit:    false,
	draggableSnap:     false,

	// Resizable
	resizable:         false,
	resizeLimit:       {'x': [250, 2500], 'y': [125, 2000]},

	// Style options:
	addClass:          '',
	width:             350,
	height:            75,
	x:                 null,
	y:                 null,
	scrollbars:        true,
	padding:   		   { top: 0, right: 0, bottom: 0, left: 0 },
	shadowBlur:        4,
	shadowOffset:      {'x': 0, 'y': 1},       // Should be positive and not be greater than the ShadowBlur.
	controlsOffset:    {'right': 6, 'top': 6}, // Change this if you want to reposition the window controls.
	useCanvasControls: true,                   // Set this to false if you wish to use images for the buttons.

	// Color options:
	headerHeight:      25,
	footerHeight:      25,
	cornerRadius:      10,
	contentBgColor:	   '#fff',
	headerStartColor:  [250, 250, 250],
	headerStopColor:   [229, 229, 229],
	bodyBgColor:       [229, 229, 229],
	notificationBg:    [239, 248, 255],
	minimizeBgColor:   [255, 255, 255],
	minimizeColor:     [0, 0, 0],
	maximizeBgColor:   [255, 255, 255],
	maximizeColor:     [0, 0, 0],
	closeBgColor:      [255, 255, 255],
	closeColor:        [0, 0, 0],
	resizableColor:    [254, 254, 254],

	// Events
	onBeforeBuild:     $empty,
	onFocus:           $empty,
	onBlur:            $empty,
	onResize:          $empty,
	onMinimize:        $empty,
	onMaximize:        $empty,
	onRestore:         $empty,
	onMove:            $empty, // NOT YET IMPLEMENTED
	onClose:           $empty,
	onCloseComplete:   $empty
};

MochaUI.Window = new Class({
  Implements: [Events, Options],

	options: MochaUI.Windows.windowOptions,
	initialize: function(options){
		this.setOptions(options);

		// Shorten object chain
		var options = this.options;

		$extend(this, {
			mochaControlsWidth: 0,
			minimizebuttonX:  0,  // Minimize button horizontal position
			maximizebuttonX: 0,  // Maximize button horizontal position
			closebuttonX: 0,  // Close button horizontal position
			headerFooterShadow: options.headerHeight + options.footerHeight + (options.shadowBlur * 2),
			oldTop: 0,
			oldLeft: 0,
			iframe: options.loadMethod == 'iframe' ? true : false,
			isModal: false,
			isMaximized: false,
			isMinimized: false,
			isCollapsed: false
		});

		// May be better to use if type != window
		if (options.type == 'modal' || options.type == 'notification'){
			options.container = document.body;
		}
		if (!options.container){
			options.container = MochaUI.Desktop.desktop ? MochaUI.Desktop.desktop : document.body;
		}
		else {
      options.container = $(options.container);
    }

		// Set this.options.resizable to default if it was not defined
		if (options.resizable == null) {
			options.resizable = !(options.type == 'modal' || options.shape == 'gauge' || options.type == 'notification');
		}

		// Set this.options.draggable if it was not defined
		if (options.draggable == null) {
			options.draggable = !(options.type == 'modal' || options.type == 'notification');
		}

		// Gauges are not maximizable or resizable, so are notifications
		if (options.shape == 'gauge' || options.type == 'notification') {
			options.collapsible = false;
			options.maximizable = false;
			options.contentBgColor = 'transparent';
			options.scrollbars = false;
			options.footerHeight = 0;
		}

		if (options.type == 'notification'){
			options.minimizable = false;
			options.closable = false;
			options.resizable = false;
			options.headerHeight = 0;
			options.draggable = false;

      // calculate height automatically
      var tmpDiv = new Element('div', {
        'class': 'mochaTmp',
        'styles': {
          'width': this.options.width,
          'visibility': 'hidden'
        },
        'html': this.options.notifyText
      }).inject(document.body);

      var tmpDivSize = tmpDiv.getSize();

      if (tmpDivSize.y > 0) {
        this.options.height = tmpDivSize.y;
      }

      tmpDiv.destroy();
		}
    else if (options.type == 'modal'){
      options.collapsible = false;
      options.resizable = false;
      options.draggable = false;
    }

    // set correct padding if a number was passed
    if ($type(options.padding) == 'number') {
      var pad = options.padding;
      options.padding = { top: pad, right: pad, bottom: pad, left: pad };
    }

    // Minimizable, dock is required and window cannot be modal
    options.minimizable = options.type != 'modal' && MochaUI.Dock && MochaUI.Dock.dock;

		// Maximizable, desktop is required
		options.maximizable = MochaUI.Desktop.desktop && options.maximizable && options.type != 'modal';

		// If window has no ID, give it one.
		if (options.id == null) {
			options.id = 'win' + (++MochaUI.Windows.windowIDCount);
		}
		this.windowEl = $(options.id);

		this.newWindow();

		// Return window object
		return this;
	},
	saveValues: function(){
		var coordinates = this.windowEl.getCoordinates();
		this.options.x = coordinates.left.toInt();
		this.options.y = coordinates.top.toInt();
	},
	/*

	Internal Function: newWindow

	Arguments:
		properties

	*/
	newWindow: function() {

		// Shorten object chain
		var instances = MochaUI.Windows.instances;
		var instanceID = instances.get(this.options.id);

		// Here we check to see if there is already a class instance for this window
		if (instanceID){
			var currentInstance = instanceID;
		}

		// Check if window already exists and is not in progress of closing
		if ( this.windowEl && !this.isClosing ) {
			 // Restore if minimized
			if (currentInstance.isMinimized) {
				MochaUI.Dock.restoreMinimized(this.windowEl);
			}
			// Expand and focus if collapsed
			if (currentInstance.isCollapsed) {
				MochaUI.collapseToggle(this.windowEl);
				setTimeout(MochaUI.focusWindow.pass(this.windowEl, this),10);
			}
			// Else focus
			else {
				setTimeout(MochaUI.focusWindow.pass(this.windowEl, this),10);
			}
			return;
		}
		else {
			instances.set(this.options.id, this);
		}

		this.isClosing = false;
		this.fireEvent('onBeforeBuild', this.options.id);

    var winClass = 'mocha', topPad = 0, topOffset = 0, winOffset = 0;
    if (this.options.type == 'notification') {
      winClass += ' mochaNotification';      
      this.options.height += this.options.padding.top + this.options.padding.bottom;
      topPad = 25;
    }
    else if (this.options.type == 'modal') {
      topOffset = .5;
      winOffset = .5;
    }
    else {
      topOffset = .05;
    }

		// Create window div
		this.windowEl = new Element('div', {
			'class': winClass,
			'id':    this.options.id,
			'styles': {
				'width':   this.options.width,
				'height':  this.options.height,
				'display': 'block',
				'visibility': 'hidden'
			}
		});

		this.windowEl.addClass(this.options.addClass);

		// Fix a mouseover issue with gauges in IE7
		if ( Browser.Engine.trident && this.options.shape == 'gauge') {
			this.windowEl.setStyle('background', 'url(../images/spacer.gif)');
		}

		if ((this.options.type == 'modal' && !Browser.Engine.gecko && !Browser.Engine.trident) || (Browser.Platform.mac && Browser.Engine.gecko)){
			this.windowEl.setStyle('position', 'fixed');
		}

		if (this.options.loadMethod == 'iframe') {
			// Iframes have their own scrollbars and padding.
			this.options.scrollbars = false;
			this.options.padding = { top: 0, right: 0, bottom: 0, left: 0 };
		}

		// Insert sub elements inside windowEl
		this.insertWindowElements();

		// Set title
		this.titleEl.set('html', this.options.title);

		// Set scrollbars, always use 'hidden' for iframe windows
		this.contentWrapperEl.setStyles({
			'overflow': this.options.scrollbars && !this.options.iframe ? 'auto' : 'hidden',
			'background': this.options.contentBgColor
		});

		this.contentEl.setStyles({
			'padding-top': this.options.padding.top,
			'padding-bottom': this.options.padding.bottom,
			'padding-left': this.options.padding.left,
			'padding-right': this.options.padding.right
		});

		if (this.options.shape == 'gauge'){
			if (this.options.useCanvasControls){
				this.canvasControlsEl.setStyle('display', 'none');
			}
			else {
				this.controlsEl.setStyle('display', 'none');
			}
			this.windowEl.addEvent('mouseover', function(){
				this.mouseover = true;
				var showControls = function(){
					if (this.mouseover != false){
						if (this.options.useCanvasControls){
							this.canvasControlsEl.setStyle('display', 'block');
						}
						else {
							this.controlsEl.setStyle('display', 'block');
						}
						this.canvasHeaderEl.setStyle('display', 'block');
						this.titleEl.setStyle('display', 'block');
					}
				};
				showControls.delay(150, this);

			}.bind(this));
			this.windowEl.addEvent('mouseleave', function(){
				this.mouseover = false;
				if (this.options.useCanvasControls){
					this.canvasControlsEl.setStyle('display', 'none');
				}
				else {
					this.controlsEl.setStyle('display', 'none');
				}
				this.canvasHeaderEl.setStyle('display', 'none');