You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
203 lines
11 KiB
203 lines
11 KiB
<!DOCTYPE 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>
|
|
|