diff options
Diffstat (limited to 'lib/dijit/_editor/plugins/FullScreen.js.uncompressed.js')
| -rw-r--r-- | lib/dijit/_editor/plugins/FullScreen.js.uncompressed.js | 450 |
1 files changed, 450 insertions, 0 deletions
diff --git a/lib/dijit/_editor/plugins/FullScreen.js.uncompressed.js b/lib/dijit/_editor/plugins/FullScreen.js.uncompressed.js new file mode 100644 index 000000000..68f27954b --- /dev/null +++ b/lib/dijit/_editor/plugins/FullScreen.js.uncompressed.js @@ -0,0 +1,450 @@ +define("dijit/_editor/plugins/FullScreen", [ + "dojo/aspect", + "dojo/_base/declare", // declare + "dojo/dom-class", // domClass.add domClass.remove + "dojo/dom-geometry", + "dojo/dom-style", + "dojo/_base/event", // event.stop + "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, event, 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(); + event.stop(e); + setTimeout(lang.hitch(this, function(){this.editor.focus();}), 250); + return true; + })); + this.connect(this.editor.domNode, "onkeydown", "_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.stop(e); + }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; +}); |