dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
204 lines (196 loc) • 11.6 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Editor Test: FullScreen Plugin</title>
<script type="text/javascript" src="../boilerplate.js"></script>
<script type="text/javascript">
require([
"dojo/parser",
"dijit/Editor",
"dijit/_editor/plugins/FullScreen",
"dijit/_editor/plugins/ViewSource",
"dijit/layout/BorderContainer",
"dijit/layout/AccordionContainer",
"dijit/layout/StackContainer",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(parser){
parser.parse();
});
</script>
</head>
<body class="claro" role="main">
<br>
<br>
<div>Content before the editor.</div>
<br>
<br>
<div id="editor0" data-dojo-type="dijit/Editor"
data-dojo-props='"aria-label":"editor0", extraPlugins:["fullscreen"], style:"background-color: white; width: 800px; height: 400px;" '>
<h1>Full Screen Plugin details</h1>
<ol>
<li>The Fullscreen plugin provides an extra button on the toolbar to allow switching the
editor into 'full screen' mode, meaning the editor takes over the viewport of the
browser. This plugin is particularly useful when editing large documents.</li>
<li>The mode can also be toggled by entering the key command: CTRL-SHIFT-F11
in the editor pane.</li>
<li>When it toggled to full screen, it makes
the editor text pane opaque white so that the contents behind it are not visible.</li>
<li>When in full screen mode, the plugin attempts to capture the TAB key and allow navigation only between
the editor toolbar and the editing area, as when in full screen mode, the rest of the page is hidden
behind the editor.</li>
</ol>
<h2>Things to test:</h2>
<ol>
<li>Verify that clicking the full screen icon highlights the button appropriately and toggles the full screen mode on.</li>
<li>Verify that clicking the full screen icon again dehighlites the button and toggles the full screen mode off.</li>
<li>Click in the editing pane and verify that CTRL-SHIFT-F11 toggles the full screen mode on and off.</li>
<li>Verify while in full screen mode that TAB seems to behave appropriately. Please note that FireFox and Internet
Explorer work the best here. There are still a few tab control issues in Safari and Chrome.</li>
</ol>
</div>
<br>
<br>
<div>Content after the editor.</div>
<br>
<h1>BorderContainer with center region containing editor.</h1>
<div id="bc" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='style:"width: 600px; height: 500px;"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"left", style:"width: 50px;"'>left</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"top", style:"height: 50px;"'>top</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"right", style:"width: 50px;"'>right</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"bottom", style:"height: 50px;"'>bottom</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center"'>
<div id="editor1" data-dojo-type="dijit/Editor" data-dojo-props='"aria-label":"editor1", extraPlugins:["fullscreen","viewsource"], height:"100%"'>
<h1>Full Screen Plugin details</h1>
<ol>
<li>The Fullscreen plugin provides an extra button on the toolbar to allow switching the
editor into 'full screen' mode, meaning the editor takes over the viewport of the
browser. This plugin is particularly useful when editing large documents.</li>
<li>The mode can also be toggled by entering the key command: CTRL-SHIFT-F11
in the editor pane.</li>
<li>When it toggled to full screen, it makes
the editor text pane opaque white so that the contents behind it are not visible.</li>
<li>When in full screen mode, the plugin attempts to capture the TAB key and allow navigation only between
the editor toolbar and the editing area, as when in full screen mode, the rest of the page is hidden
behind the editor.</li>
</ol>
<h2>Things to test:</h2>
<ol>
<li>Verify that clicking the full screen icon highlights the button appropriately and toggles the full screen mode on.</li>
<li>Verify that clicking the full screen icon again dehighlites the button and toggles the full screen mode off.</li>
<li>Click in the editing pane and verify that CTRL-SHIFT-F11 toggles the full screen mode on and off.</li>
<li>Verify while in full screen mode that TAB seems to behave appropriately. Please note that FireFox and Internet
Explorer work the best here. There are still a few tab control issues in Safari and Chrome.</li>
</ol>
</div>
</div>
</div>
<br>
<h1>TabContainer with tab containing editor.</h1>
<div id="tc" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='style:"width: 600px; height: 500px; border-style: solid; border-width: 1px; padding: 0px; margin: 0px;"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Editor Tab"'>
<div id="editor2" data-dojo-type="dijit/Editor" data-dojo-props='"aria-label":"editor2", extraPlugins:["fullscreen","viewsource"], height:"100%"'>
<h1>Full Screen Plugin details</h1>
<ol>
<li>The Fullscreen plugin provides an extra button on the toolbar to allow switching the
editor into 'full screen' mode, meaning the editor takes over the viewport of the
browser. This plugin is particularly useful when editing large documents.</li>
<li>The mode can also be toggled by entering the key command: CTRL-SHIFT-F11
in the editor pane.</li>
<li>When it toggled to full screen, it makes
the editor text pane opaque white so that the contents behind it are not visible.</li>
<li>When in full screen mode, the plugin attempts to capture the TAB key and allow navigation only between
the editor toolbar and the editing area, as when in full screen mode, the rest of the page is hidden
behind the editor.</li>
</ol>
<h2>Things to test:</h2>
<ol>
<li>Verify that clicking the full screen icon highlights the button appropriately and toggles the full screen mode on.</li>
<li>Verify that clicking the full screen icon again dehighlites the button and toggles the full screen mode off.</li>
<li>Click in the editing pane and verify that CTRL-SHIFT-F11 toggles the full screen mode on and off.</li>
<li>Verify while in full screen mode that TAB seems to behave appropriately. Please note that FireFox and Internet
Explorer work the best here. There are still a few tab control issues in Safari and Chrome.</li>
</ol>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Blank Tab 1"'>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Blank Tab 2"'>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Blank Tab 3"'>
</div>
</div>
<br>
<h1>AccordionContainer with pane containing editor.</h1>
<div id="ac" data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props='style:"width: 600px; height: 500px; border-style: solid; border-width: 1px; padding: 0px; margin: 0px;"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Editor Pane"'>
<div id="editor3" data-dojo-type="dijit/Editor" data-dojo-props='"aria-label":"editor3", extraPlugins:["fullscreen","viewsource"], height:"100%"'>
<h1>Full Screen Plugin details</h1>
<ol>
<li>The Fullscreen plugin provides an extra button on the toolbar to allow switching the
editor into 'full screen' mode, meaning the editor takes over the viewport of the
browser. This plugin is particularly useful when editing large documents.</li>
<li>The mode can also be toggled by entering the key command: CTRL-SHIFT-F11
in the editor pane.</li>
<li>When it toggled to full screen, it makes
the editor text pane opaque white so that the contents behind it are not visible.</li>
<li>When in full screen mode, the plugin attempts to capture the TAB key and allow navigation only between
the editor toolbar and the editing area, as when in full screen mode, the rest of the page is hidden
behind the editor.</li>
</ol>
<h2>Things to test:</h2>
<ol>
<li>Verify that clicking the full screen icon highlights the button appropriately and toggles the full screen mode on.</li>
<li>Verify that clicking the full screen icon again dehighlites the button and toggles the full screen mode off.</li>
<li>Click in the editing pane and verify that CTRL-SHIFT-F11 toggles the full screen mode on and off.</li>
<li>Verify while in full screen mode that TAB seems to behave appropriately. Please note that FireFox and Internet
Explorer work the best here. There are still a few tab control issues in Safari and Chrome.</li>
</ol>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Blank Pane 1"'>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Blank Pane 2"'>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Blank Pane 3"'>
</div>
</div>
<br>
<h1>StackContainer with pane containing editor.</h1>
<div id="sc" data-dojo-type="dijit/layout/StackContainer" data-dojo-props='style:"width: 600px; height: 500px; border-style: solid; border-width: 1px; padding: 0px; margin: 0px;"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Editor Pane"'>
<div id="editor4" data-dojo-type="dijit/Editor" data-dojo-props='"aria-label":"editor4", extraPlugins:["fullscreen","viewsource"], height:"100%"'>
<h1>Full Screen Plugin details</h1>
<ol>
<li>The Fullscreen plugin provides an extra button on the toolbar to allow switching the
editor into 'full screen' mode, meaning the editor takes over the viewport of the
browser. This plugin is particularly useful when editing large documents.</li>
<li>The mode can also be toggled by entering the key command: CTRL-SHIFT-F11
in the editor pane.</li>
<li>When it toggled to full screen, it makes
the editor text pane opaque white so that the contents behind it are not visible.</li>
<li>When in full screen mode, the plugin attempts to capture the TAB key and allow navigation only between
the editor toolbar and the editing area, as when in full screen mode, the rest of the page is hidden
behind the editor.</li>
</ol>
<h2>Things to test:</h2>
<ol>
<li>Verify that clicking the full screen icon highlights the button appropriately and toggles the full screen mode on.</li>
<li>Verify that clicking the full screen icon again dehighlites the button and toggles the full screen mode off.</li>
<li>Click in the editing pane and verify that CTRL-SHIFT-F11 toggles the full screen mode on and off.</li>
<li>Verify while in full screen mode that TAB seems to behave appropriately. Please note that FireFox and Internet
Explorer work the best here. There are still a few tab control issues in Safari and Chrome.</li>
</ol>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Blank Pane 1"'>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Blank Pane 2"'>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Blank Pane 3"'>
</div>
</div>
</body>
</html>