Browse Source

add rendering of list results to view

  - Fetch list in js, if available
  - Fall back to rendering server-side if not
  - Use oojs-ui / OOUI for rendering form
Brennen Bearnes 9 months ago
parent
commit
4bd322b1f6
4 changed files with 123 additions and 9 deletions
  1. 1
    0
      public/jquery-dist
  2. 1
    0
      public/oojs-dist
  3. 1
    0
      public/oojs-ui-dist
  4. 120
    9
      templates/index.phtml

+ 1
- 0
public/jquery-dist View File

@@ -0,0 +1 @@
1
+../node_modules/jquery/dist

+ 1
- 0
public/oojs-dist View File

@@ -0,0 +1 @@
1
+../node_modules/oojs/dist

+ 1
- 0
public/oojs-ui-dist View File

@@ -0,0 +1 @@
1
+../node_modules/oojs-ui/dist

+ 120
- 9
templates/index.phtml View File

@@ -1,20 +1,131 @@
1
+<?php
2
+
3
+use OOUI\WikimediaUITheme;
4
+
5
+OOUI\Theme::setSingleton( new WikimediaUITheme() );
6
+OOUI\Element::setDefaultDir( 'ltr' );
7
+
8
+// Create form elements
9
+$catInput = new OOUI\TextInputWidget( [
10
+	'infusable' => true,
11
+	'name' => 'cat',
12
+	'placeholder' => 'Category name'
13
+] );
14
+
15
+if ( isset($cat) && strlen($cat) ) {
16
+	$catInput->setValue( $cat );
17
+}
18
+
19
+$submit = new OOUI\ButtonInputWidget( [
20
+	'infusable' => true,
21
+	'label' => 'Submit',
22
+	'type' => 'submit'
23
+] );
24
+
25
+$fieldset = new OOUI\FieldsetLayout( [
26
+	'infusable' => true,
27
+	'label' => 'Find readability of first ~50 pages in Wikipedia category:',
28
+	'classes' => [ "container" ]
29
+] );
30
+
31
+$fieldset->addItems( [
32
+	new OOUI\FieldLayout( $catInput, [
33
+		'infusable' => true,
34
+		'align' => 'left'
35
+	] ),
36
+	new OOUI\FieldLayout( $submit )
37
+] );
38
+
39
+$form = new OOUI\FormLayout( [
40
+	'infusable' => true,
41
+	'items' => [ $fieldset ],
42
+	'action' => '/category',
43
+	'method' => 'get',
44
+	'id' => 'category-form'
45
+] );
46
+
47
+?>
1 48
 <!DOCTYPE html>
2 49
 <html lang="en">
3 50
 <head>
4
-  <meta charset="utf-8"/>
5
-  <title>Readability</title>
6
-  <link href="" rel="stylesheet" type="text/css">
51
+<meta charset="utf-8"/>
52
+<title>Readability of Wikipedia Pages by Category</title>
53
+<link href="/oojs-ui-dist/oojs-ui-wikimediaui.css" rel="stylesheet" type="text/css">
54
+<link href="/oojs-ui-dist/oojs-ui-images-wikimediaui.css" rel="stylesheet" type="text/css">
55
+<script src="/jquery-dist/jquery.min.js"></script>
56
+<script src="/oojs-dist/oojs.min.js"></script>
57
+<script src="/oojs-ui-dist/oojs-ui.min.js"></script>
58
+<script src="/oojs-ui-dist/oojs-ui-wikimediaui.min.js"></script>
59
+<script>
60
+$( document ).ready(function() {
61
+	var myForm = OO.ui.infuse( 'category-form' );
62
+
63
+	// Ask for JSON specifically:
64
+	myForm.addItems( [
65
+		new OO.ui.HiddenInputWidget( {
66
+			name: 'type',
67
+			value: 'json',
68
+		} )
69
+	] );
70
+
71
+	myForm.on( 'submit', function () {
72
+
73
+		$.get( '/category', myForm.$element.serialize() ).done( function( result ) {
74
+			var table = $( '<table id=pagelist><thead><tr><th>Page Name</th> <th>Dale-Chall Readability Score</th></tr></thead></table>' );
75
+			if ( $( '#pagelist' ).length ) {
76
+				$( '#pagelist' ).replaceWith( table );
77
+			} else {
78
+				$( 'body' ).append( table );
79
+			}
80
+			$( result.pageList ).each( function ( index, values ) {
81
+				var title = values[ 0 ];
82
+				var readability = values[ 2 ];
83
+				var row = $( '<tr>' )
84
+					.append( $( '<td>' ).text( title ) )
85
+					.append( $( '<td>' ).text( readability ) );
86
+				table.append( row );
87
+			});
88
+		});
89
+
90
+	} );
91
+});
92
+</script>
93
+
94
+<style>
95
+body {
96
+	max-width: 38em;
97
+	margin-left: auto;
98
+	margin-right: auto;
99
+}
100
+</style>
7 101
 </head>
8 102
 
9 103
 <body>
10 104
 
11
-  <h1>Readability</h1>
105
+<?php echo $form; ?>
12 106
 
13
-  <form action="/category" method="get">
14
-    <label for="category-name">Category:</label>
15
-    <input type="text" id="category-name" name="cat">
16
-  </form>
107
+<?php
17 108
 
18
-</body>
109
+	$td = function ( $content ) {
110
+		return '<td>' . htmlspecialchars( $content ) . '</td>';
111
+	};
19 112
 
113
+	// If we've got a $pageList, go ahead and render it as a table.  This is
114
+	// only going to happen in the situation where a client doesn't have JS
115
+	// enabled.
116
+
117
+	if ( isset( $pageList ) ) {
118
+		echo '<table>';
119
+		echo '<tr> <th>Page Name</th> <th>Dale-Chall Readability Score</th> </tr>';
120
+		
121
+		foreach ( $pageList as $page ) {
122
+			echo '<tr>', $td( $page[0] ), $td( $page[2] ), '</tr>';
123
+		}
124
+		
125
+		echo '</table>';
126
+	}
127
+
128
+?>
129
+
130
+</body>
20 131
 </html>