/classes/jeasyui/src/jquery.window.js

/**

 * jQuery EasyUI 1.4.5

 * 

 * Copyright (c) 2009-2016 www.jeasyui.com. All rights reserved.

 *

 * Licensed under the freeware license: http://www.jeasyui.com/license_freeware.php

 * To use it on other terms please contact us: info@jeasyui.com

 *

 */

/**

 * window - jQuery EasyUI

 * 

 * Dependencies:

 * 	 panel

 *   draggable

 *   resizable

 * 

 */

(function($){

	function moveWindow(target, param){

		var state = $.data(target, 'window');

		if (param){

			if (param.left != null) state.options.left = param.left;

			if (param.top != null) state.options.top = param.top;

		}

		$(target).panel('move', state.options);

		if (state.shadow){

			state.shadow.css({

				left: state.options.left,

				top: state.options.top

			});

		}

	}

	

	/**

	 *  center the window only horizontally

	 */

	function hcenter(target, tomove){

		var opts = $.data(target, 'window').options;

		var pp = $(target).window('panel');

		var width = pp._outerWidth();

		if (opts.inline){

			var parent = pp.parent();

			opts.left = Math.ceil((parent.width() - width) / 2 + parent.scrollLeft());

		} else {

			opts.left = Math.ceil(($(window)._outerWidth() - width) / 2 + $(document).scrollLeft());

		}

		if (tomove){moveWindow(target);}

	}

	

	/**

	 * center the window only vertically

	 */

	function vcenter(target, tomove){

		var opts = $.data(target, 'window').options;

		var pp = $(target).window('panel');

		var height = pp._outerHeight();

		if (opts.inline){

			var parent = pp.parent();

			opts.top = Math.ceil((parent.height() - height) / 2 + parent.scrollTop());

		} else {

			opts.top = Math.ceil(($(window)._outerHeight() - height) / 2 + $(document).scrollTop());

		}

		if (tomove){moveWindow(target);}

	}

	

	function create(target){

		var state = $.data(target, 'window');

		var opts = state.options;

		var win = $(target).panel($.extend({}, state.options, {

			border: false,

			doSize: true,	// size the panel, the property undefined in window component

			closed: true,	// close the panel

			cls: 'window ' + (!opts.border?'window-thinborder window-noborder ':(opts.border=='thin'?'window-thinborder ':'')) + (opts.cls || ''),

			headerCls: 'window-header ' + (opts.headerCls || ''),

			bodyCls: 'window-body ' + (opts.noheader ? 'window-body-noheader ' : ' ') + (opts.bodyCls||''),

			

			onBeforeDestroy: function(){

				if (opts.onBeforeDestroy.call(target) == false){return false;}

				if (state.shadow){state.shadow.remove();}

				if (state.mask){state.mask.remove();}

			},

			onClose: function(){

				if (state.shadow){state.shadow.hide();}

				if (state.mask){state.mask.hide();}

				opts.onClose.call(target);

			},

			onOpen: function(){

				if (state.mask){

					state.mask.css($.extend({

						display:'block',

						zIndex: $.fn.window.defaults.zIndex++

					}, $.fn.window.getMaskSize(target)));

				}

				if (state.shadow){

					state.shadow.css({

						display:'block',

						zIndex: $.fn.window.defaults.zIndex++,

						left: opts.left,

						top: opts.top,

						width: state.window._outerWidth(),

						height: state.window._outerHeight()

					});

				}

				state.window.css('z-index', $.fn.window.defaults.zIndex++);

				

				opts.onOpen.call(target);

			},

			onResize: function(width, height){

				var popts = $(this).panel('options');

				$.extend(opts, {

					width: popts.width,

					height: popts.height,

					left: popts.left,

					top: popts.top

				});

				if (state.shadow){

					state.shadow.css({

						left: opts.left,

						top: opts.top,

						width: state.window._outerWidth(),

						height: state.window._outerHeight()

					});

				}

				opts.onResize.call(target, width, height);

			},

			onMinimize: function(){

				if (state.shadow){state.shadow.hide();}

				if (state.mask){state.mask.hide();}

				state.options.onMinimize.call(target);

			},

			onBeforeCollapse: function(){

				if (opts.onBeforeCollapse.call(target) == false){return false;}

				if (state.shadow){state.shadow.hide();}

			},

			onExpand: function(){

				if (state.shadow){state.shadow.show();}

				opts.onExpand.call(target);

			}

		}));

		

		state.window = win.panel('panel');

		

		// create mask

		if (state.mask){state.mask.remove();}

		if (opts.modal){

			state.mask = $('<div class="window-mask" style="display:none"></div>').insertAfter(state.window);

		}

		

		// create shadow

		if (state.shadow){state.shadow.remove();}

		if (opts.shadow){

			state.shadow = $('<div class="window-shadow" style="display:none"></div>').insertAfter(state.window);

		}

		

		// center and open the window

		var closed = opts.closed;

		if (opts.left == null){hcenter(target);}

		if (opts.top == null){vcenter(target);}

		moveWindow(target);

		if (!closed){win.window('open');}

	}

	

	

	/**

	 * set window drag and resize property

	 */

	function setProperties(target){

		var state = $.data(target, 'window');

		

		state.window.draggable({

			handle: '>div.panel-header>div.panel-title',

			disabled: state.options.draggable == false,

			onBeforeDrag: function(e){

				if (state.mask) state.mask.css('z-index', $.fn.window.defaults.zIndex++);

				if (state.shadow) state.shadow.css('z-index', $.fn.window.defaults.zIndex++);

				state.window.css('z-index', $.fn.window.defaults.zIndex++);

			},

			onStartDrag: function(e){

				if (!state.proxy){

					state.proxy = $('<div class="window-proxy"></div>').insertAfter(state.window);

				}

				state.proxy.css({

					display:'none',

					zIndex: $.fn.window.defaults.zIndex++,

					left: e.data.left,

					top: e.data.top

				});

				state.proxy._outerWidth(state.window._outerWidth());

				state.proxy._outerHeight(state.window._outerHeight());

				setTimeout(function(){

					if (state.proxy) state.proxy.show();

				}, 500);

			},

			onDrag: function(e){

				state.proxy.css({

					display:'block',

					left: e.data.left,

					top: e.data.top

				});

				return false;

			},

			onStopDrag: function(e){

				state.options.left = e.data.left;

				state.options.top = e.data.top;

				$(target).window('move');

				state.proxy.remove();

				state.proxy = null;

			}

		});

		

		state.window.resizable({

			disabled: state.options.resizable == false,

			onStartResize:function(e){

				if (state.pmask){state.pmask.remove();}

				state.pmask = $('<div class="window-proxy-mask"></div>').insertAfter(state.window);

				state.pmask.css({

					zIndex: $.fn.window.defaults.zIndex++,

					left: e.data.left,

					top: e.data.top,

					width: state.window._outerWidth(),

					height: state.window._outerHeight()

				});

				if (state.proxy){state.proxy.remove();}

				state.proxy = $('<div class="window-proxy"></div>').insertAfter(state.window);

				state.proxy.css({

					zIndex: $.fn.window.defaults.zIndex++,

					left: e.data.left,

					top: e.data.top

				});

				state.proxy._outerWidth(e.data.width)._outerHeight(e.data.height);

			},

			onResize: function(e){

				state.proxy.css({

					left: e.data.left,

					top: e.data.top

				});

				state.proxy._outerWidth(e.data.width);

				state.proxy._outerHeight(e.data.height);

				return false;

			},

			onStopResize: function(e){

				$(target).window('resize', e.data);

				state.pmask.remove();

				state.pmask = null;

				state.proxy.remove();

				state.proxy = null;

			}

		});

	}

	

	// function getPageArea() {

	// 	if (document.compatMode == 'BackCompat') {

	// 		return {

	// 			width: Math.max(document.body.scrollWidth, document.body.clientWidth),

	// 			height: Math.max(document.body.scrollHeight, document.body.clientHeight)

	// 		}

	// 	} else {

	// 		return {

	// 			width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),

	// 			height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)

	// 		}

	// 	}

	// }

	

	// when window resize, reset the width and height of the window's mask

	$(window).resize(function(){

		$('body>div.window-mask').css({

			width: $(window)._outerWidth(),

			height: $(window)._outerHeight()

		});

		setTimeout(function(){

			$('body>div.window-mask').css($.fn.window.getMaskSize());

		}, 50);

	});

	

	$.fn.window = function(options, param){

		if (typeof options == 'string'){

			var method = $.fn.window.methods[options];

			if (method){

				return method(this, param);

			} else {

				return this.panel(options, param);

			}

		}

		

		options = options || {};

		return this.each(function(){

			var state = $.data(this, 'window');

			if (state){

				$.extend(state.options, options);

			} else {

				state = $.data(this, 'window', {

					options: $.extend({}, $.fn.window.defaults, $.fn.window.parseOptions(this), options)

				});

				if (!state.options.inline){

					document.body.appendChild(this);

				}

			}

			create(this);

			setProperties(this);

		});

	};

	

	$.fn.window.methods = {

		options: function(jq){

			var popts = jq.panel('options');

			var wopts = $.data(jq[0], 'window').options;

			return $.extend(wopts, {

				closed: popts.closed,

				collapsed: popts.collapsed,

				minimized: popts.minimized,

				maximized: popts.maximized

			});

		},

		window: function(jq){

			return $.data(jq[0], 'window').window;

		},

		move: function(jq, param){

			return jq.each(function(){

				moveWindow(this, param);

			});

		},

		hcenter: function(jq){

			return jq.each(function(){

				hcenter(this, true);

			});

		},

		vcenter: function(jq){

			return jq.each(function(){

				vcenter(this, true);

			});

		},

		center: function(jq){

			return jq.each(function(){

				hcenter(this);

				vcenter(this);

				moveWindow(this);

			});

		}

	};



	$.fn.window.getMaskSize = function(target){

		var state = $(target).data('window');

		var inline = (state && state.options.inline);

		return {

			width: (inline ? '100%' : $(document).width()),

			height: (inline ? '100%' : $(document).height())

		};

	};

	

	$.fn.window.parseOptions = function(target){

		return $.extend({}, $.fn.panel.parseOptions(target), $.parser.parseOptions(target, [

			{draggable:'boolean',resizable:'boolean',shadow:'boolean',modal:'boolean',inline:'boolean'}

		]));

	};

	

	// Inherited from $.fn.panel.defaults

	$.fn.window.defaults = $.extend({}, $.fn.panel.defaults, {

		zIndex: 9000,

		draggable: true,

		resizable: true,

		shadow: true,

		modal: false,

		border: true,	// possible values are: true,false,'thin','thick'

		inline: false,	// true to stay inside its parent, false to go on top of all elements

		

		// window's property which difference from panel

		title: 'New Window',

		collapsible: true,

		minimizable: true,

		maximizable: true,

		closable: true,

		closed: false

	});

})(jQuery);