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.
131 lines
2.9 KiB
131 lines
2.9 KiB
<?php
|
|
|
|
use OOUI\WikimediaUITheme;
|
|
|
|
OOUI\Theme::setSingleton( new WikimediaUITheme() );
|
|
OOUI\Element::setDefaultDir( 'ltr' );
|
|
|
|
// Create form elements
|
|
$catInput = new OOUI\TextInputWidget( [
|
|
'infusable' => true,
|
|
'name' => 'cat',
|
|
'placeholder' => 'Category name'
|
|
] );
|
|
|
|
if ( isset($cat) && strlen($cat) ) {
|
|
$catInput->setValue( $cat );
|
|
}
|
|
|
|
$submit = new OOUI\ButtonInputWidget( [
|
|
'infusable' => true,
|
|
'label' => 'Submit',
|
|
'type' => 'submit'
|
|
] );
|
|
|
|
$fieldset = new OOUI\FieldsetLayout( [
|
|
'infusable' => true,
|
|
'label' => 'Find readability of first ~50 pages in Wikipedia category:',
|
|
'classes' => [ "container" ]
|
|
] );
|
|
|
|
$fieldset->addItems( [
|
|
new OOUI\FieldLayout( $catInput, [
|
|
'infusable' => true,
|
|
'align' => 'left'
|
|
] ),
|
|
new OOUI\FieldLayout( $submit )
|
|
] );
|
|
|
|
$form = new OOUI\FormLayout( [
|
|
'infusable' => true,
|
|
'items' => [ $fieldset ],
|
|
'action' => '/category',
|
|
'method' => 'get',
|
|
'id' => 'category-form'
|
|
] );
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>Readability of Wikipedia Pages by Category</title>
|
|
<link href="/oojs-ui-dist/oojs-ui-wikimediaui.css" rel="stylesheet" type="text/css">
|
|
<link href="/oojs-ui-dist/oojs-ui-images-wikimediaui.css" rel="stylesheet" type="text/css">
|
|
<script src="/jquery-dist/jquery.min.js"></script>
|
|
<script src="/oojs-dist/oojs.min.js"></script>
|
|
<script src="/oojs-ui-dist/oojs-ui.min.js"></script>
|
|
<script src="/oojs-ui-dist/oojs-ui-wikimediaui.min.js"></script>
|
|
<script>
|
|
$( document ).ready(function() {
|
|
var myForm = OO.ui.infuse( 'category-form' );
|
|
|
|
// Ask for JSON specifically:
|
|
myForm.addItems( [
|
|
new OO.ui.HiddenInputWidget( {
|
|
name: 'type',
|
|
value: 'json',
|
|
} )
|
|
] );
|
|
|
|
myForm.on( 'submit', function () {
|
|
|
|
$.get( '/category', myForm.$element.serialize() ).done( function( result ) {
|
|
var table = $( '<table id=pagelist><thead><tr><th>Page Name</th> <th>Dale-Chall Readability Score</th></tr></thead></table>' );
|
|
if ( $( '#pagelist' ).length ) {
|
|
$( '#pagelist' ).replaceWith( table );
|
|
} else {
|
|
$( 'body' ).append( table );
|
|
}
|
|
$( result.pageList ).each( function ( index, values ) {
|
|
var title = values[ 0 ];
|
|
var readability = values[ 2 ];
|
|
var row = $( '<tr>' )
|
|
.append( $( '<td>' ).text( title ) )
|
|
.append( $( '<td>' ).text( readability ) );
|
|
table.append( row );
|
|
});
|
|
});
|
|
|
|
} );
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
max-width: 38em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<?php echo $form; ?>
|
|
|
|
<?php
|
|
|
|
$td = function ( $content ) {
|
|
return '<td>' . htmlspecialchars( $content ) . '</td>';
|
|
};
|
|
|
|
// If we've got a $pageList, go ahead and render it as a table. This is
|
|
// only going to happen in the situation where a client doesn't have JS
|
|
// enabled.
|
|
|
|
if ( isset( $pageList ) ) {
|
|
echo '<table>';
|
|
echo '<tr> <th>Page Name</th> <th>Dale-Chall Readability Score</th> </tr>';
|
|
|
|
foreach ( $pageList as $page ) {
|
|
echo '<tr>', $td( $page[0] ), $td( $page[2] ), '</tr>';
|
|
}
|
|
|
|
echo '</table>';
|
|
}
|
|
|
|
?>
|
|
|
|
</body>
|
|
</html>
|