mediawiki-extensions-Visual.../demos/ve/index.php
Roan Kattouw 4c98f753a0 makeStaticLoader: Update fake standalone init module
* Don't add ext.visualEditor.base to it, and strip of ve-mw stuff
** .base doesn't contain ve-mw stuff any more, so no stripping needed
** Instead of appending .base, just load .base and create a
   separate fake module for Standalone init.

* Don't manually register .sa files
** Instead use ext.visualEditor.standalone, it's right there.
** Add missing CSS file to .standalone.

* Documented the purpose of 'Dependencies' and removed scripts
  from that fake module that don't fall under that rationale and
  instead add them as regular modules (rangy, unicodejs).

* Removed weird 'jquery' dependency in 'ext.visualEditor.core'
  module. This is strongly recommended against, and might
  actually cause jQuery to be reloaded due to outstanding bugs
  in core with the state machine in the startup queue (jquery, mediawiki).

* Unlist unused 'jquery.client' dependency in makeStaticLoader.
  As per the module definitions in VisualEditor.php, this is
  only used by the .mediawiki module. Grepped modules/ve/ and
  found 0 uses.

* Update dependency order to roughly match the dependency tree
  as it is specified in ResourceLoader (e.g. rangy is for .core,
  not .base).

* Keep fake modules out of ResourceLoader.

Change-Id: I2a31543e5ad2fc39f5980fea855172108eda4428
2013-12-12 03:34:42 +01:00

454 lines
20 KiB
PHP

<?php
/**
* VisualEditor standalone demo
*
* @file
* @ingroup Extensions
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
$path = __DIR__ . '/pages';
$pages = glob( $path . '/*.html' );
$page = current( $pages );
if ( isset( $_GET['page'] ) && in_array( $path . '/' . $_GET['page'] . '.html', $pages ) ) {
$page = $path . '/' . $_GET['page'] . '.html';
}
$html = file_get_contents( $page );
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VisualEditor Standalone Demo</title>
<!-- Generated by maintenance/makeStaticLoader.php -->
<!-- oojs-ui -->
<link rel=stylesheet href="../../modules/oojs-ui/oojs-ui.svg.css">
<!-- ext.visualEditor.standalone -->
<link rel=stylesheet href="../../modules/ve/init/sa/styles/ve.init.sa.css">
<!-- Standalone init -->
<script>
if (
document.createElementNS &&
document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ).createSVGRect
) {
document.write(
'<link rel="stylesheet" ' +
'href="../../modules/ve/ui/styles/ve.ui.Icons-vector.css">'
);
} else {
document.write(
'<link rel="stylesheet" ' +
'href="../../modules/ve/ui/styles/ve.ui.Icons-raster.css">'
);
}
</script>
<!-- ext.visualEditor.core -->
<link rel=stylesheet href="../../modules/ve/ce/styles/ve.ce.Node.css">
<link rel=stylesheet href="../../modules/ve/ce/styles/ve.ce.Surface.css">
<link rel=stylesheet href="../../modules/ve/ui/styles/ve.ui.Context.css">
<link rel=stylesheet href="../../modules/ve/ui/styles/ve.ui.Inspector.css">
<link rel=stylesheet href="../../modules/ve/ui/styles/ve.ui.Surface.css">
<link rel=stylesheet href="../../modules/ve/ui/styles/ve.ui.Tool.css">
<link rel=stylesheet href="../../modules/ve/ui/styles/ve.ui.Toolbar.css">
<link rel=stylesheet href="../../modules/ve/ui/styles/ve.ui.Widget.css">
<!-- jquery.uls.grid -->
<link rel=stylesheet href="../../modules/jquery.uls/css/jquery.uls.grid.css">
<!-- jquery.uls.compact -->
<link rel=stylesheet href="../../modules/jquery.uls/css/jquery.uls.compact.css">
<!-- jquery.uls -->
<link rel=stylesheet href="../../modules/jquery.uls/css/jquery.uls.css">
<link rel=stylesheet href="../../modules/jquery.uls/css/jquery.uls.lcd.css">
<!-- demo -->
<link rel="stylesheet" href="demo.css">
</head>
<body>
<ul class="ve-demo-docs">
<?php
foreach ( $pages as $page ): ?>
<li>
<a href="./?page=<?php echo basename( $page, '.html' ); ?>">
<?php echo basename( $page, '.html' ); ?>
</a>
</li>
<?php
endforeach; ?>
</ul>
<div class="ve-demo-editor"></div>
<!-- Generated by maintenance/makeStaticLoader.php -->
<!-- jquery -->
<script src="../../modules/jquery/jquery.js"></script>
<!-- oojs -->
<script src="../../modules/oojs/oojs.js"></script>
<!-- oojs-ui -->
<script src="../../modules/oojs-ui/oojs-ui.js"></script>
<!-- unicodejs.wordbreak -->
<script src="../../modules/unicodejs/unicodejs.js"></script>
<script src="../../modules/unicodejs/unicodejs.textstring.js"></script>
<script src="../../modules/unicodejs/unicodejs.graphemebreakproperties.js"></script>
<script src="../../modules/unicodejs/unicodejs.graphemebreak.js"></script>
<script src="../../modules/unicodejs/unicodejs.wordbreakproperties.js"></script>
<script src="../../modules/unicodejs/unicodejs.wordbreak.js"></script>
<!-- ext.visualEditor.base -->
<script src="../../modules/ve/ve.js"></script>
<script src="../../modules/ve/ve.track.js"></script>
<script src="../../modules/ve/init/ve.init.js"></script>
<script src="../../modules/ve/init/ve.init.Platform.js"></script>
<script src="../../modules/ve/init/ve.init.Target.js"></script>
<script src="../../modules/ve/ve.debug.js"></script>
<!-- ext.visualEditor.standalone -->
<script src="../../modules/ve/init/sa/ve.init.sa.js"></script>
<script src="../../modules/ve/init/sa/ve.init.sa.Platform.js"></script>
<script src="../../modules/ve/init/sa/ve.init.sa.Target.js"></script>
<!-- Standalone init -->
<script>
<?php
require '../../modules/../VisualEditor.i18n.php';
echo 've.init.platform.addMessages( ' . json_encode( $messages['en'] ) . " );\n";
?>
ve.init.platform.setModulesUrl( '../../modules' );
</script>
<!-- rangy -->
<script src="../../modules/rangy/rangy-core-1.3.js"></script>
<script src="../../modules/rangy/rangy-position-1.3.js"></script>
<script src="../../modules/rangy/rangy-export.js"></script>
<!-- ext.visualEditor.core -->
<script src="../../modules/ve/ve.Range.js"></script>
<script src="../../modules/ve/ve.Node.js"></script>
<script src="../../modules/ve/ve.BranchNode.js"></script>
<script src="../../modules/ve/ve.LeafNode.js"></script>
<script src="../../modules/ve/ve.Document.js"></script>
<script src="../../modules/ve/ve.EventSequencer.js"></script>
<script src="../../modules/ve/dm/ve.dm.js"></script>
<script src="../../modules/ve/dm/ve.dm.Model.js"></script>
<script src="../../modules/ve/dm/ve.dm.ModelRegistry.js"></script>
<script src="../../modules/ve/dm/ve.dm.NodeFactory.js"></script>
<script src="../../modules/ve/dm/ve.dm.AnnotationFactory.js"></script>
<script src="../../modules/ve/dm/ve.dm.AnnotationSet.js"></script>
<script src="../../modules/ve/dm/ve.dm.MetaItemFactory.js"></script>
<script src="../../modules/ve/dm/ve.dm.Node.js"></script>
<script src="../../modules/ve/dm/ve.dm.BranchNode.js"></script>
<script src="../../modules/ve/dm/ve.dm.LeafNode.js"></script>
<script src="../../modules/ve/dm/ve.dm.Annotation.js"></script>
<script src="../../modules/ve/dm/ve.dm.InternalList.js"></script>
<script src="../../modules/ve/dm/ve.dm.MetaItem.js"></script>
<script src="../../modules/ve/dm/ve.dm.MetaList.js"></script>
<script src="../../modules/ve/dm/ve.dm.TransactionProcessor.js"></script>
<script src="../../modules/ve/dm/ve.dm.Transaction.js"></script>
<script src="../../modules/ve/dm/ve.dm.Surface.js"></script>
<script src="../../modules/ve/dm/ve.dm.SurfaceFragment.js"></script>
<script src="../../modules/ve/dm/ve.dm.DataString.js"></script>
<script src="../../modules/ve/dm/ve.dm.Document.js"></script>
<script src="../../modules/ve/dm/ve.dm.DocumentSlice.js"></script>
<script src="../../modules/ve/dm/ve.dm.LinearData.js"></script>
<script src="../../modules/ve/dm/ve.dm.DocumentSynchronizer.js"></script>
<script src="../../modules/ve/dm/ve.dm.IndexValueStore.js"></script>
<script src="../../modules/ve/dm/ve.dm.Converter.js"></script>
<script src="../../modules/ve/dm/lineardata/ve.dm.FlatLinearData.js"></script>
<script src="../../modules/ve/dm/lineardata/ve.dm.ElementLinearData.js"></script>
<script src="../../modules/ve/dm/lineardata/ve.dm.MetaLinearData.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.GeneratedContentNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.AlienNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.BreakNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.CenterNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.DefinitionListItemNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.DefinitionListNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.DivNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.DocumentNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.HeadingNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.ImageNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.InternalItemNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.InternalListNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.ListItemNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.ListNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.ParagraphNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.PreformattedNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.TableCaptionNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.TableCellNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.TableNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.TableRowNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.TableSectionNode.js"></script>
<script src="../../modules/ve/dm/nodes/ve.dm.TextNode.js"></script>
<script src="../../modules/ve/dm/annotations/ve.dm.LinkAnnotation.js"></script>
<script src="../../modules/ve/dm/annotations/ve.dm.TextStyleAnnotation.js"></script>
<script src="../../modules/ve/dm/metaitems/ve.dm.AlienMetaItem.js"></script>
<script src="../../modules/ve/ce/ve.ce.js"></script>
<script src="../../modules/ve/ce/ve.ce.DomRange.js"></script>
<script src="../../modules/ve/ce/ve.ce.AnnotationFactory.js"></script>
<script src="../../modules/ve/ce/ve.ce.NodeFactory.js"></script>
<script src="../../modules/ve/ce/ve.ce.Document.js"></script>
<script src="../../modules/ve/ce/ve.ce.View.js"></script>
<script src="../../modules/ve/ce/ve.ce.Annotation.js"></script>
<script src="../../modules/ve/ce/ve.ce.Node.js"></script>
<script src="../../modules/ve/ce/ve.ce.BranchNode.js"></script>
<script src="../../modules/ve/ce/ve.ce.ContentBranchNode.js"></script>
<script src="../../modules/ve/ce/ve.ce.LeafNode.js"></script>
<script src="../../modules/ve/ce/ve.ce.ProtectedNode.js"></script>
<script src="../../modules/ve/ce/ve.ce.FocusableNode.js"></script>
<script src="../../modules/ve/ce/ve.ce.RelocatableNode.js"></script>
<script src="../../modules/ve/ce/ve.ce.ResizableNode.js"></script>
<script src="../../modules/ve/ce/ve.ce.Surface.js"></script>
<script src="../../modules/ve/ce/ve.ce.SurfaceObserver.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.GeneratedContentNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.AlienNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.BreakNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.CenterNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.DefinitionListItemNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.DefinitionListNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.DivNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.DocumentNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.HeadingNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.ImageNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.InternalItemNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.InternalListNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.ListItemNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.ListNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.ParagraphNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.PreformattedNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.TableCaptionNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.TableCellNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.TableNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.TableRowNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.TableSectionNode.js"></script>
<script src="../../modules/ve/ce/nodes/ve.ce.TextNode.js"></script>
<script src="../../modules/ve/ce/annotations/ve.ce.LinkAnnotation.js"></script>
<script src="../../modules/ve/ce/annotations/ve.ce.TextStyleAnnotation.js"></script>
<script src="../../modules/ve/ui/ve.ui.js"></script>
<script src="../../modules/ve/ui/ve.ui.Surface.js"></script>
<script src="../../modules/ve/ui/ve.ui.Context.js"></script>
<script src="../../modules/ve/ui/ve.ui.Dialog.js"></script>
<script src="../../modules/ve/ui/ve.ui.Inspector.js"></script>
<script src="../../modules/ve/ui/ve.ui.WindowSet.js"></script>
<script src="../../modules/ve/ui/ve.ui.Toolbar.js"></script>
<script src="../../modules/ve/ui/ve.ui.TargetToolbar.js"></script>
<script src="../../modules/ve/ui/ve.ui.ToolFactory.js"></script>
<script src="../../modules/ve/ui/ve.ui.Command.js"></script>
<script src="../../modules/ve/ui/ve.ui.CommandRegistry.js"></script>
<script src="../../modules/ve/ui/ve.ui.Trigger.js"></script>
<script src="../../modules/ve/ui/ve.ui.TriggerRegistry.js"></script>
<script src="../../modules/ve/ui/ve.ui.Action.js"></script>
<script src="../../modules/ve/ui/ve.ui.ActionFactory.js"></script>
<script src="../../modules/ve/ui/actions/ve.ui.AnnotationAction.js"></script>
<script src="../../modules/ve/ui/actions/ve.ui.ContentAction.js"></script>
<script src="../../modules/ve/ui/actions/ve.ui.DialogAction.js"></script>
<script src="../../modules/ve/ui/actions/ve.ui.FormatAction.js"></script>
<script src="../../modules/ve/ui/actions/ve.ui.HistoryAction.js"></script>
<script src="../../modules/ve/ui/actions/ve.ui.IndentationAction.js"></script>
<script src="../../modules/ve/ui/actions/ve.ui.InspectorAction.js"></script>
<script src="../../modules/ve/ui/actions/ve.ui.ListAction.js"></script>
<script src="../../modules/ve/ui/widgets/ve.ui.SurfaceWidget.js"></script>
<script src="../../modules/ve/ui/widgets/ve.ui.LinkTargetInputWidget.js"></script>
<script src="../../modules/ve/ui/tools/ve.ui.AnnotationTool.js"></script>
<script src="../../modules/ve/ui/tools/ve.ui.ClearAnnotationTool.js"></script>
<script src="../../modules/ve/ui/tools/ve.ui.DialogTool.js"></script>
<script src="../../modules/ve/ui/tools/ve.ui.FormatTool.js"></script>
<script src="../../modules/ve/ui/tools/ve.ui.HistoryTool.js"></script>
<script src="../../modules/ve/ui/tools/ve.ui.IndentationTool.js"></script>
<script src="../../modules/ve/ui/tools/ve.ui.InspectorTool.js"></script>
<script src="../../modules/ve/ui/tools/ve.ui.ListTool.js"></script>
<script src="../../modules/ve/ui/inspectors/ve.ui.AnnotationInspector.js"></script>
<script src="../../modules/ve/ui/inspectors/ve.ui.LinkInspector.js"></script>
<script src="../../modules/ve/ui/widgets/ve.ui.GroupButtonWidget.js"></script>
<script src="../../modules/ve/ui/inspectors/ve.ui.SpecialCharacterInspector.js"></script>
<!-- jquery.uls.data -->
<script src="../../modules/jquery.uls/src/jquery.uls.data.js"></script>
<script src="../../modules/jquery.uls/src/jquery.uls.data.utils.js"></script>
<!-- jquery.uls -->
<script src="../../modules/jquery.uls/src/jquery.uls.core.js"></script>
<script src="../../modules/jquery.uls/src/jquery.uls.lcd.js"></script>
<script src="../../modules/jquery.uls/src/jquery.uls.languagefilter.js"></script>
<script src="../../modules/jquery.uls/src/jquery.uls.regionfilter.js"></script>
<!-- ext.visualEditor.language -->
<script src="../../modules/ve/dm/annotations/ve.dm.LanguageAnnotation.js"></script>
<script src="../../modules/ve/ce/annotations/ve.ce.LanguageAnnotation.js"></script>
<script src="../../modules/ve/ui/inspectors/ve.ui.LanguageInspector.js"></script>
<script src="../../modules/ve/ui/tools/ve.ui.LanguageInspectorTool.js"></script>
<script src="../../modules/ve/ui/widgets/ve.ui.LanguageInputWidget.js"></script>
<!-- demo -->
<script>
$( document ).ready( function () {
new ve.init.sa.Target(
$( '.ve-demo-editor' ),
ve.createDocumentFromHtml( <?php echo json_encode( $html ) ?> )
);
$( '.ve-ce-documentNode' ).focus();
// ve.instances[0].getDialogs().open( 'meta' );
} );
</script>
<div class="ve-demo-utilities">
<p>
<div class="ve-demo-utilities-commands"></div>
</p>
<table id="ve-dump" class="ve-demo-dump">
<thead>
<th>Linear model</th>
<th>View tree</th>
<th>Model tree</th>
</thead>
<tbody>
<tr>
<td width="30%" id="ve-linear-model-dump"></td>
<td id="ve-view-tree-dump" style="vertical-align: top;"></td>
<td id="ve-model-tree-dump" style="vertical-align: top;"></td>
</tr>
</tbody>
</table>
</div>
<script>
$( function () {
// Widgets
var startTextInput = new OO.ui.TextInputWidget( { 'readOnly': true } ),
endTextInput = new OO.ui.TextInputWidget( { 'readOnly': true } ),
startTextInputLabel = new OO.ui.InputLabelWidget(
{ 'label': 'Start', 'input': startTextInput }
),
endTextInputLabel = new OO.ui.InputLabelWidget(
{ 'label': 'End', 'input': endTextInput }
),
getRangeButton = new OO.ui.PushButtonWidget( { 'label': 'Get selected range' } ),
logRangeButton = new OO.ui.PushButtonWidget(
{ 'label': 'Log to console', 'disabled': true }
),
dumpModelButton = new OO.ui.PushButtonWidget( { 'label': 'Dump model' } ),
validateButton = new OO.ui.PushButtonWidget( { 'label': 'Validate view and model' } );
// Initialization
$( '.ve-demo-utilities-commands' ).append(
getRangeButton.$element,
startTextInputLabel.$element,
startTextInput.$element,
endTextInputLabel.$element,
endTextInput.$element,
logRangeButton.$element,
$( '<span class="ve-demo-utilities-commands-divider">&nbsp;</span>' ),
dumpModelButton.$element,
validateButton.$element
);
// Events
getRangeButton.on( 'click', function () {
var range = ve.instances[0].view.model.getSelection();
startTextInput.setValue( range.start );
endTextInput.setValue( range.end );
logRangeButton.setDisabled( false );
} );
logRangeButton.on( 'click', function () {
var start = startTextInput.getValue(),
end = endTextInput.getValue();
// TODO: Validate input
console.dir( ve.instances[0].view.documentView.model.data.slice( start, end ) );
} );
dumpModelButton.on( 'click', function () {
// linear model dump
var i, $li, element, html, annotations,
$ol = $( '<ol start="0"></ol>' );
for ( i = 0; i < ve.instances[0].model.documentModel.data.getLength(); i++ ) {
$li = $( '<li>' );
$label = $( '<span>' );
element = ve.instances[0].model.documentModel.data.getData( i );
if ( element.type ) {
$label.addClass( 've-demo-dump-element' );
text = element.type;
annotations = element.annotations;
} else if ( ve.isArray( element ) ){
$label.addClass( 've-demo-dump-achar' );
text = element[0];
annotations = element[1];
} else {
$label.addClass( 've-demo-dump-char' );
text = element;
annotations = undefined;
}
$label.html( ( text.match( /\S/ ) ? text : '&nbsp;' ) + ' ' );
if ( annotations ) {
$label.append(
$( '<span>' ).text(
'[' + ve.instances[0].model.documentModel.store.values( annotations ).map( function( ann ) {
return ann.name;
} ).join( ', ' ) + ']'
)
);
}
$li.append( $label );
$ol.append( $li );
}
$( '#ve-linear-model-dump' ).html( $ol );
// tree dump
var getKids = function ( obj ) {
var $ol = $( '<ol start="0"></ol>' ),
$li;
for ( var i = 0; i < obj.children.length; i++ ) {
$li = $( '<li>' );
$label = $( '<span>' ).addClass( 've-demo-dump-element' );
if ( obj.children[i].length !== undefined ) {
$li.append(
$label
.text( obj.children[i].type )
.append(
$( '<span>' ).text( ' (' + obj.children[i].length + ')' )
)
);
} else {
$li.append( $label.text( obj.children[i].type ) );
}
if ( obj.children[i].children ) {
$li.append( getKids( obj.children[i] ) );
}
$ol.append( $li );
}
return $ol;
}
$( '#ve-model-tree-dump' ).html(
getKids( ve.instances[0].model.documentModel.getDocumentNode() )
);
$( '#ve-view-tree-dump' ).html(
getKids( ve.instances[0].view.documentView.getDocumentNode() )
);
$( '#ve-dump' ).show();
} );
validateButton.on( 'click', function () {
var failed = false;
$( '.ve-ce-branchNode' ).each( function ( index, element ) {
var $element = $( element ),
view = $element.data( 'view' );
if ( view.canContainContent() ) {
var nodeRange = view.model.getRange();
var textModel = ve.instances[0]
.view.model.getDocument().getText( nodeRange );
var textDom = ve.ce.getDomText( view.$element[0] );
if ( textModel !== textDom ) {
failed = true;
console.log( 'Inconsistent data', {
'textModel': textModel,
'textDom': textDom,
'element': element
} );
}
}
} );
if ( failed ) {
alert( 'Not valid - check JS console for details' );
} else {
alert( 'Valid' );
}
} );
} );
</script>
</body>
</html>