mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-25 11:16:51 +00:00
remove flash-of-unstyled-content, consolidate base HTML for the sandbox in sandbox/base.php
This commit is contained in:
Neil Kandalgaonkar
parent
aa161bb64a
commit
fb5998f1b6
|
|
@ -30,137 +30,10 @@ class SpecialVisualEditorSandbox extends SpecialPage {
|
|||
$feedbackPrompt = wfMsgHtml( 'visualeditor-feedback-prompt' );
|
||||
$feedbackDialogTitle = wfMsgHtml( 'visualeditor-feedback-dialog-title' );
|
||||
|
||||
$out = <<<HTML
|
||||
<!-- VisualEditor Sandbox -->
|
||||
<div id="es-docs">
|
||||
<div id="es-docs-label">Example documents:</div>
|
||||
<ul id="es-docs-list" ></ul>
|
||||
</div>
|
||||
<div id="es-base">
|
||||
<div id="es-toolbar-wrapper">
|
||||
<div id="es-toolbar" class="es-toolbar">
|
||||
<div id="es-modes" class="es-modes">
|
||||
<div id="es-mode-wikitext" class="es-modes-button" title="$modeWikitext"></div>
|
||||
<div id="es-mode-json" class="es-modes-button" title="$modeJson"></div>
|
||||
<div id="es-mode-html" class="es-modes-button" title="$modeHtml"></div>
|
||||
<div id="es-mode-render" class="es-modes-button" title="$modeRender"></div>
|
||||
<div id="es-mode-history" class="es-modes-button" title="$modeHistory"></div>
|
||||
<div id="es-mode-help" class="es-modes-button" title="$modeHelp"></div>
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
<div id="es-toolbar-shadow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="es-panes">
|
||||
<div id="es-visual">
|
||||
<div id="es-editor"></div>
|
||||
</div>
|
||||
<div id="es-panels">
|
||||
<div id="es-panel-wikitext" class="es-panel es-code"></div>
|
||||
<div id="es-panel-json" class="es-panel es-code"></div>
|
||||
<div id="es-panel-html" class="es-panel es-code"></div>
|
||||
<div id="es-panel-render" class="es-panel es-render"></div>
|
||||
<div id="es-panel-history" class="es-panel es-code"></div>
|
||||
<div id="es-panel-help" class="es-panel">
|
||||
<div class="es-help-title">Keyboard Shortcuts</div>
|
||||
<div class="es-help-shortcuts-title">Clipboard</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">C</span>
|
||||
</span>
|
||||
Copy selected text
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">X</span>
|
||||
</span>
|
||||
Cut selected text
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">V</span>
|
||||
</span>
|
||||
Paste text at the cursor
|
||||
</div>
|
||||
<div class="es-help-shortcuts-title">History navigation</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">Z</span>
|
||||
</span>
|
||||
Undo
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">Y</span>
|
||||
</span>
|
||||
Redo
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">⇧</span> +
|
||||
<span class="es-help-key">Z</span>
|
||||
</span>
|
||||
Redo
|
||||
</div>
|
||||
<div class="es-help-shortcuts-title">Formatting</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">B</span>
|
||||
</span>
|
||||
Make selected text bold
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">I</span>
|
||||
</span>
|
||||
Make selected text italic
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">K</span>
|
||||
</span>
|
||||
Make selected text a link
|
||||
</div>
|
||||
<div class="es-help-shortcuts-title">Selection</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">⇧</span> +
|
||||
<span class="es-help-key">Arrow</span>
|
||||
</span>
|
||||
Adjust selection
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Alt</span> +
|
||||
<span class="es-help-key">Arrow</span>
|
||||
</span>
|
||||
Move cursor by words or blocks
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Alt</span> +
|
||||
<span class="es-help-key">⇧</span> +
|
||||
<span class="es-help-key">Arrow</span>
|
||||
</span>
|
||||
Adjust selection by words or blocks
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /VisualEditor Sandbox -->
|
||||
HTML;
|
||||
|
||||
$dir = dirname( __FILE__ );
|
||||
ob_start();
|
||||
include( 'modules/sandbox/base.php' );
|
||||
$out = ob_get_clean();
|
||||
$wgOut->addHtml( $out );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,133 +65,17 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="es-docs">
|
||||
<div id="es-docs-label">Example documents:</div>
|
||||
<ul id="es-docs-list" ></ul>
|
||||
</div>
|
||||
<div id="es-base">
|
||||
<div id="es-toolbar-wrapper">
|
||||
<div id="es-toolbar" class="es-toolbar">
|
||||
<div id="es-modes" class="es-modes">
|
||||
<div id="es-mode-wikitext" class="es-modes-button" title="Toggle wikitext view"></div>
|
||||
<div id="es-mode-json" class="es-modes-button" title="Toggle JSON view"></div>
|
||||
<div id="es-mode-html" class="es-modes-button" title="Toggle HTML view"></div>
|
||||
<div id="es-mode-render" class="es-modes-button" title="Toggle preview"></div>
|
||||
<div id="es-mode-history" class="es-modes-button" title="Toggle transaction history view"></div>
|
||||
<div id="es-mode-help" class="es-modes-button" title="Toggle help view"></div>
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
<div id="es-toolbar-shadow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="es-panes">
|
||||
<div id="es-visual">
|
||||
<div id="es-editor"></div>
|
||||
</div>
|
||||
<div id="es-panels">
|
||||
<div id="es-panel-wikitext" class="es-panel es-code"></div>
|
||||
<div id="es-panel-json" class="es-panel es-code"></div>
|
||||
<div id="es-panel-html" class="es-panel es-code"></div>
|
||||
<div id="es-panel-render" class="es-panel es-render"></div>
|
||||
<div id="es-panel-history" class="es-panel es-code"></div>
|
||||
<div id="es-panel-help" class="es-panel">
|
||||
<div class="es-help-title">Keyboard Shortcuts</div>
|
||||
<div class="es-help-shortcuts-title">Clipboard</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">C</span>
|
||||
</span>
|
||||
Copy selected text
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">X</span>
|
||||
</span>
|
||||
Cut selected text
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">V</span>
|
||||
</span>
|
||||
Paste text at the cursor
|
||||
</div>
|
||||
<div class="es-help-shortcuts-title">History navigation</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">Z</span>
|
||||
</span>
|
||||
Undo
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">Y</span>
|
||||
</span>
|
||||
Redo
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">⇧</span> +
|
||||
<span class="es-help-key">Z</span>
|
||||
</span>
|
||||
Redo
|
||||
</div>
|
||||
<div class="es-help-shortcuts-title">Formatting</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">B</span>
|
||||
</span>
|
||||
Make selected text bold
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">I</span>
|
||||
</span>
|
||||
Make selected text italic
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">K</span>
|
||||
</span>
|
||||
Make selected text a link
|
||||
</div>
|
||||
<div class="es-help-shortcuts-title">Selection</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">⇧</span> +
|
||||
<span class="es-help-key">Arrow</span>
|
||||
</span>
|
||||
Adjust selection
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Alt</span> +
|
||||
<span class="es-help-key">Arrow</span>
|
||||
</span>
|
||||
Move cursor by words or blocks
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Alt</span> +
|
||||
<span class="es-help-key">⇧</span> +
|
||||
<span class="es-help-key">Arrow</span>
|
||||
</span>
|
||||
Adjust selection by words or blocks
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$modeWikitext = "Toggle wikitext view";
|
||||
$modeJson = "Toggle JSON view";
|
||||
$modeHtml = "Toggle HTML view";
|
||||
$modeRender = "Toggle preview";
|
||||
$modeHistory = "Toggle transaction history view";
|
||||
$modeHelp = "Toggle help view";
|
||||
|
||||
include( '../modules/sandbox/base.php' );
|
||||
|
||||
?>
|
||||
<!-- EditSurface -->
|
||||
<script src="../modules/jquery/jquery.js"></script>
|
||||
<script src="../modules/es/es.js"></script>
|
||||
|
|
@ -265,4 +149,4 @@
|
|||
<!-- Demo -->
|
||||
<script src="../modules/sandbox/sandbox.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
128
modules/sandbox/base.php
Normal file
128
modules/sandbox/base.php
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
<!-- VisualEditor Sandbox -->
|
||||
<div id="es-docs" style="visibility: hidden">
|
||||
<div id="es-docs-label">Example documents:</div>
|
||||
<ul id="es-docs-list" ></ul>
|
||||
</div>
|
||||
<div id="es-base" style="visibility: hidden">
|
||||
<div id="es-toolbar-wrapper">
|
||||
<div id="es-toolbar" class="es-toolbar">
|
||||
<div id="es-modes" class="es-modes">
|
||||
<div id="es-mode-wikitext" class="es-modes-button" title="<?php echo $modeWikitext ?>"></div>
|
||||
<div id="es-mode-json" class="es-modes-button" title="<?php echo $modeJson ?>"></div>
|
||||
<div id="es-mode-html" class="es-modes-button" title="<?php echo $modeHtml?>"></div>
|
||||
<div id="es-mode-render" class="es-modes-button" title="<?php echo $modeRender ?>"></div>
|
||||
<div id="es-mode-history" class="es-modes-button" title="<?php echo $modeHistory ?>"></div>
|
||||
<div id="es-mode-help" class="es-modes-button" title="<?php echo $modeHelp ?>"></div>
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
<div id="es-toolbar-shadow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="es-panes">
|
||||
<div id="es-visual">
|
||||
<div id="es-editor"></div>
|
||||
</div>
|
||||
<div id="es-panels">
|
||||
<div id="es-panel-wikitext" class="es-panel es-code"></div>
|
||||
<div id="es-panel-json" class="es-panel es-code"></div>
|
||||
<div id="es-panel-html" class="es-panel es-code"></div>
|
||||
<div id="es-panel-render" class="es-panel es-render"></div>
|
||||
<div id="es-panel-history" class="es-panel es-code"></div>
|
||||
<div id="es-panel-help" class="es-panel">
|
||||
<div class="es-help-title">Keyboard Shortcuts</div>
|
||||
<div class="es-help-shortcuts-title">Clipboard</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">C</span>
|
||||
</span>
|
||||
Copy selected text
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">X</span>
|
||||
</span>
|
||||
Cut selected text
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">V</span>
|
||||
</span>
|
||||
Paste text at the cursor
|
||||
</div>
|
||||
<div class="es-help-shortcuts-title">History navigation</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">Z</span>
|
||||
</span>
|
||||
Undo
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">Y</span>
|
||||
</span>
|
||||
Redo
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">⇧</span> +
|
||||
<span class="es-help-key">Z</span>
|
||||
</span>
|
||||
Redo
|
||||
</div>
|
||||
<div class="es-help-shortcuts-title">Formatting</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">B</span>
|
||||
</span>
|
||||
Make selected text bold
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">I</span>
|
||||
</span>
|
||||
Make selected text italic
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Ctl <span class="es-help-key-or">or</span> ⌘</span> +
|
||||
<span class="es-help-key">K</span>
|
||||
</span>
|
||||
Make selected text a link
|
||||
</div>
|
||||
<div class="es-help-shortcuts-title">Selection</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">⇧</span> +
|
||||
<span class="es-help-key">Arrow</span>
|
||||
</span>
|
||||
Adjust selection
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Alt</span> +
|
||||
<span class="es-help-key">Arrow</span>
|
||||
</span>
|
||||
Move cursor by words or blocks
|
||||
</div>
|
||||
<div class="es-help-shortcut">
|
||||
<span class="es-help-keys">
|
||||
<span class="es-help-key">Alt</span> +
|
||||
<span class="es-help-key">⇧</span> +
|
||||
<span class="es-help-key">Arrow</span>
|
||||
</span>
|
||||
Adjust selection by words or blocks
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /VisualEditor Sandbox -->
|
||||
|
|
@ -740,4 +740,7 @@ $(document).ready( function() {
|
|||
currentMode.update.call( currentMode );
|
||||
}
|
||||
} );
|
||||
|
||||
$( '#es-docs' ).css( { 'visibility': 'visible' } );
|
||||
$( '#es-base' ).css( { 'visibility': 'visible' } );
|
||||
} );
|
||||
|
|
|
|||
Loading…
Reference in a new issue