dojo_app/js/library/dijit/_editor/plugins/FullScreen.js

define([
	"dojo/aspect",
	"dojo/_base/declare", // declare
	"dojo/dom-class", // domClass.add domClass.remove
	"dojo/dom-geometry",
	"dojo/dom-style",
	"dojo/i18n", // i18n.getLocalization
	"dojo/keys", // keys.F11 keys.TAB
	"dojo/_base/lang", // lang.hitch
	"dojo/on", // on()
	"dojo/sniff", // has("ie"), has("quirks")
	"dojo/_base/window", // win.body
	"dojo/window", // winUtils.getBox winUtils.scrollIntoView
	"../../focus", // focus.focus(), focus.curNode
	"../_Plugin",
	"../../form/ToggleButton",
	"../../registry", // registry.getEnclosingWidget()
	"dojo/i18n!../nls/commands"
], function(aspect, declare, domClass, domGeometry, domStyle, i18n, keys, lang, on, has, win, winUtils,
			focus, _Plugin, ToggleButton, registry){

	// module:
	//		dijit/_editor/plugins/FullScreen

	var FullScreen = declare("dijit._editor.plugins.FullScreen", _Plugin, {
		// summary:
		//		This plugin provides FullScreen capability to the editor.  When
		//		toggled on, it will render the editor into the full window and
		//		overlay everything.  It also binds to the hotkey: CTRL-SHIFT-F11
		//		for toggling fullscreen mode.

		// zIndex: [public] Number
		//		zIndex value used for overlaying the full page.
		//		default is 500.
		zIndex: 500,

		// _origState: [private] Object
		//		The original view state of the editor.
		_origState: null,

		// _origiFrameState: [private] Object
		//		The original view state of the iframe of the editor.
		_origiFrameState: null,

		// _resizeHandle: [private] Object
		//		Connection point used for handling resize when window resizes.
		_resizeHandle: null,

		// isFullscreen: [const] boolean
		//		Read-Only variable used to denote of the editor is in fullscreen mode or not.
		isFullscreen: false,

		toggle: function(){
			// summary:
			//		Function to allow programmatic toggling of the view.
			this.button.set("checked", !this.button.get("checked"));
		},

		_initButton: function(){
			// summary:
			//		Over-ride for creation of the resize button.
			var strings = i18n.getLocalization("dijit._editor", "commands"),
				editor = this.editor;
			this.button = new ToggleButton({
				label: strings["fullScreen"],
				ownerDocument: editor.ownerDocument,
				dir: editor.dir,
				lang: editor.lang,
				showLabel: false,
				iconClass: this.iconClassPrefix + " " + this.iconClassPrefix + "FullScreen",
				tabIndex: "-1",
				onChange: lang.hitch(this, "_setFullScreen")
			});
		},

		setEditor: function(editor){
			// summary:
			//		Over-ride for the setting of the editor.
			// editor: Object
			//		The editor to configure for this plugin to use.
			this.editor = editor;
			this._initButton();

			this.editor.addKeyHandler(keys.F11, true, true, lang.hitch(this, function(e){
				// Enable the CTRL-SHIFT-F11 hotkey for fullscreen mode.
				this.toggle();
				e.stopPropagation();
				e.preventDefault();
				this.editor.defer("focus", 250);
				return true;
			}));
			this.own(on(this.editor.domNode, "keydown", lang.hitch(this, "_containFocus")));
		},

		_containFocus: function(e){
			// summary:
			//		When in Full Screen mode, it's good to try and retain focus in the editor
			//		so this function is intended to try and constrain the TAB key.
			// e: Event
			//		The key event.
			// tags:
			//		private
			if(this.isFullscreen){
				var ed = this.editor;
				if(!ed.isTabIndent &&
					ed._fullscreen_oldOnKeyDown &&
					e.keyCode === keys.TAB){
					// If we're in fullscreen mode, we want to take over how tab moves focus a bit.
					// to keep it within the editor since it's hiding the rest of the page.
					// IE hates changing focus IN the event handler, so need to put calls
					// in a timeout.  Gotta love IE.
					// Also need to check for alternate view nodes if present and active.
					var f = focus.curNode;
					var avn = this._getAltViewNode();
					if(f == ed.iframe ||
						(avn && f === avn)){
						setTimeout(lang.hitch(this, function(){
							ed.toolbar.focus();
						}), 10);
					}else{
						if(avn && domStyle.get(ed.iframe, "display") === "none"){
							setTimeout(lang.hitch(this, function(){
								focus.focus(avn);
							}), 10);
						}else{
							setTimeout(lang.hitch(this, function(){
								ed.focus();
							}), 10);
						}
					}
					event.stopPropagation();
					event.preventDefault();
				}else if(ed._fullscreen_oldOnKeyDown){
					// Only call up when it's a different function.  Traps corner case event issue
					// on IE which caused stack overflow on handler cleanup.
					ed._fullscreen_oldOnKeyDown(e);
				}
			}
		},

		_resizeEditor: function(){
			// summary:
			//		Function to handle resizing the editor as the viewport
			//		resizes (window scaled)
			// tags:
			//		private
			var vp = winUtils.getBox(this.editor.ownerDocument);
			domGeometry.setMarginBox(this.editor.domNode, {
				w: vp.w,
				h: vp.h
			});

			//Adjust the internal heights too, as they can be a bit off.
			var hHeight = this.editor.getHeaderHeight();
			var fHeight = this.editor.getFooterHeight();
			var extents = domGeometry.getPadBorderExtents(this.editor.domNode);
			var fcpExtents = domGeometry.getPadBorderExtents(this.editor.iframe.parentNode);
			var fcmExtents = domGeometry.getMarginExtents(this.editor.iframe.parentNode);

			var cHeight = vp.h - (hHeight + extents.h + fHeight);
			domGeometry.setMarginBox(this.editor.iframe.parentNode, {
				h: cHeight,
				w: vp.w
			});
			domGeometry.setMarginBox(this.editor.iframe, {
				h: cHeight - (fcpExtents.h + fcmExtents.h)
			});
		},

		_getAltViewNode: function(){
			// summary:
			//		This function is intended as a hook point for setting an
			//		alternate view node for when in full screen mode and the
			//		editable iframe is hidden.
			// tags:
			//		protected.
		},

		_setFullScreen: function(full){
			// summary:
			//		Function to handle toggling between full screen and
			//		regular view.
			// tags:
			//		private

			//Alias this for shorter code.
			var ed = this.editor;
			var body = ed.ownerDocumentBody;
			var editorParent = ed.domNode.parentNode;

			var vp = winUtils.getBox(ed.ownerDocument);

			this.isFullscreen = full;

			if(full){
				//Parent classes can royally screw up this plugin, so we
				//have to set everything to position static.
				while(editorParent && editorParent !== body){
					domClass.add(editorParent, "dijitForceStatic");
					editorParent = editorParent.parentNode;
				}

				// Save off the resize function.  We want to kill its behavior.
				this._editorResizeHolder = this.editor.resize;
				ed.resize = function(){
				};

				// Try to constrain focus control.
				ed._fullscreen_oldOnKeyDown = ed.onKeyDown;
				ed.onKeyDown = lang.hitch(this, this._containFocus);

				this._origState = {};
				this._origiFrameState = {};

				// Store the basic editor state we have to restore later.
				// Not using domStyle.get here, had problems, didn't
				// give me stuff like 100%, gave me pixel calculated values.
				// Need the exact original values.
				var domNode = ed.domNode,
					rawStyle = domNode && domNode.style || {};
				this._origState = {
					width: rawStyle.width || "",
					height: rawStyle.height || "",
					top: domStyle.get(domNode, "top") || "",
					left: domStyle.get(domNode, "left") || "",
					position: domStyle.get(domNode, "position") || "static",
					marginBox: domGeometry.getMarginBox(ed.domNode)
				};

				// Store the iframe state we have to restore later.
				// Not using domStyle.get here, had problems, didn't
				// give me stuff like 100%, gave me pixel calculated values.
				// Need the exact original values.
				var iframe = ed.iframe,
					iframeStyle = iframe && iframe.style || {};

				var bc = domStyle.get(ed.iframe, "backgroundColor");
				this._origiFrameState = {
					backgroundColor: bc || "transparent",
					width: iframeStyle.width || "auto",
					height: iframeStyle.height || "auto",
					zIndex: iframeStyle.zIndex || ""
				};

				// Okay, size everything.
				domStyle.set(ed.domNode, {
					position: "absolute",
					top: "0px",
					left: "0px",
					zIndex: this.zIndex,
					width: vp.w + "px",
					height: vp.h + "px"
				});

				domStyle.set(ed.iframe, {
					height: "100%",
					width: "100%",
					zIndex: this.zIndex,
					backgroundColor: bc !== "transparent" &&
						bc !== "rgba(0, 0, 0, 0)" ? bc : "white"
				});

				domStyle.set(ed.iframe.parentNode, {
					height: "95%",
					width: "100%"
				});

				// Store the overflow state we have to restore later.
				// IE had issues, so have to check that it's defined.  Ugh.
				if(body.style && body.style.overflow){
					this._oldOverflow = domStyle.get(body, "overflow");
				}else{
					this._oldOverflow = "";
				}

				if(has("ie") && !has("quirks")){
					// IE will put scrollbars in anyway, html (parent of body)
					// also controls them in standards mode, so we have to
					// remove them, argh.
					if(body.parentNode &&
						body.parentNode.style &&
						body.parentNode.style.overflow){
						this._oldBodyParentOverflow = body.parentNode.style.overflow;
					}else{
						try{
							this._oldBodyParentOverflow = domStyle.get(body.parentNode, "overflow");
						}catch(e){
							this._oldBodyParentOverflow = "scroll";
						}
					}
					domStyle.set(body.parentNode, "overflow", "hidden");
				}
				domStyle.set(body, "overflow", "hidden");

				var resizer = function(){
					// function to handle resize events.
					// Will check current VP and only resize if
					// different.
					var vp = winUtils.getBox(ed.ownerDocument);
					if("_prevW" in this && "_prevH" in this){
						// No actual size change, ignore.
						if(vp.w === this._prevW && vp.h === this._prevH){
							return;
						}
					}else{
						this._prevW = vp.w;
						this._prevH = vp.h;
					}
					if(this._resizer){
						clearTimeout(this._resizer);
						delete this._resizer;
					}
					// Timeout it to help avoid spamming resize on IE.
					// Works for all browsers.
					this._resizer = setTimeout(lang.hitch(this, function(){
						delete this._resizer;
						this._resizeEditor();
					}), 10);
				};
				this._resizeHandle = on(window, "resize", lang.hitch(this, resizer));

				// Also monitor for direct calls to resize and adapt editor.
				this._resizeHandle2 = aspect.after(ed, "onResize", lang.hitch(this, function(){
					if(this._resizer){
						clearTimeout(this._resizer);
						delete this._resizer;
					}
					this._resizer = setTimeout(lang.hitch(this, function(){
						delete this._resizer;
						this._resizeEditor();
					}), 10);
				}));

				// Call it once to work around IE glitchiness.  Safe for other browsers too.
				this._resizeEditor();
				var dn = this.editor.toolbar.domNode;
				setTimeout(function(){
					winUtils.scrollIntoView(dn);
				}, 250);
			}else{
				if(this._resizeHandle){
					// Cleanup resizing listeners
					this._resizeHandle.remove();
					this._resizeHandle = null;
				}
				if(this._resizeHandle2){
					// Cleanup resizing listeners
					this._resizeHandle2.remove();
					this._resizeHandle2 = null;
				}
				if(this._rst){
					clearTimeout(this._rst);
					this._rst = null;
				}

				//Remove all position static class assigns.
				while(editorParent && editorParent !== body){
					domClass.remove(editorParent, "dijitForceStatic");
					editorParent = editorParent.parentNode;
				}

				// Restore resize function
				if(this._editorResizeHolder){
					this.editor.resize = this._editorResizeHolder;
				}

				if(!this._origState && !this._origiFrameState){
					// If we actually didn't toggle, then don't do anything.
					return;
				}
				if(ed._fullscreen_oldOnKeyDown){
					ed.onKeyDown = ed._fullscreen_oldOnKeyDown;
					delete ed._fullscreen_oldOnKeyDown;
				}

				// Add a timeout to make sure we don't have a resize firing in the
				// background at the time of minimize.
				var self = this;
				setTimeout(function(){
					// Restore all the editor state.
					var mb = self._origState.marginBox;
					var oh = self._origState.height;
					if(has("ie") && !has("quirks")){
						body.parentNode.style.overflow = self._oldBodyParentOverflow;
						delete self._oldBodyParentOverflow;
					}
					domStyle.set(body, "overflow", self._oldOverflow);
					delete self._oldOverflow;

					domStyle.set(ed.domNode, self._origState);
					domStyle.set(ed.iframe.parentNode, {
						height: "",
						width: ""
					});
					domStyle.set(ed.iframe, self._origiFrameState);
					delete self._origState;
					delete self._origiFrameState;
					// In case it is contained in a layout and the layout changed size,
					// go ahead and call resize.
					var pWidget = registry.getEnclosingWidget(ed.domNode.parentNode);
					if(pWidget && pWidget.resize){
						pWidget.resize();
					}else{
						if(!oh || oh.indexOf("%") < 0){
							// Resize if the original size wasn't set
							// or wasn't in percent.  Timeout is to avoid
							// an IE crash in unit testing.
							setTimeout(lang.hitch(this, function(){
								ed.resize({h: mb.h});
							}), 0);
						}
					}
					winUtils.scrollIntoView(self.editor.toolbar.domNode);
				}, 100);
			}
		},

		updateState: function(){
			// summary:
			//		Over-ride for button state control for disabled to work.
			this.button.set("disabled", this.get("disabled"));
		},

		destroy: function(){
			// summary:
			//		Over-ride to ensure the resize handle gets cleaned up.
			if(this._resizeHandle){
				// Cleanup resizing listeners
				this._resizeHandle.remove();
				this._resizeHandle = null;
			}
			if(this._resizeHandle2){
				// Cleanup resizing listeners
				this._resizeHandle2.remove();
				this._resizeHandle2 = null;
			}
			if(this._resizer){
				clearTimeout(this._resizer);
				this._resizer = null;
			}
			this.inherited(arguments);
		}
	});

	// Register this plugin.
	// For back-compat accept "fullscreen" (all lowercase) too, remove in 2.0
	_Plugin.registry["fullScreen"] = _Plugin.registry["fullscreen"] = function(args){
		return new FullScreen({
			zIndex: ("zIndex" in args) ? args.zIndex : 500
		});
	};

	return FullScreen;
});