|
|
- <?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>
|
