-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (103 loc) · 3.34 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<title>Stylize</title>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.form.js"></script>
<script src="jquery.blockUI.js"></script>
<link rel="stylesheet" href="css/stylesheets/base.css">
<style>
#body-content {
padding:1em;
display: flex;
flex-direction: column;
}
textarea {
width:98%;
min-height:15em;
font-size: 1.1em;
font-family: monospace;
}
pre {
max-height: 5em;
overflow: auto;
border: solid 1px #EEE;
font-size: 1.1em;
font-family: monospace;
}
</style>
</head>
<body>
<div id="body-content">
<h1>Code style tools. <a href="//www.mediawiki.org/wiki/Manual:Coding_conventions">Coding conventions made easy</a>.</h1>
<p>
Eeek. Tab.
Please follow our whitespace conventions.
Missing space.
Whitespace error.
Bored as well?
Here is the solution.
</p>
<div>
<h2>PHP stylize</h2>
<form id="stylize-php-form" action="/stylize/jsonapi.php" method="post" enctype="multipart/form-data" target="_blank">
<input type="hidden" name="action" value="stylizephp"/>
<textarea name="code" placeholder="<?php">
</textarea>
<button>Stylize PHP</button>
<pre class="stylize-ajax-template"></pre>
</form>
</div>
<div>
<h2>JavaScript stylize</h2>
<form id="stylize-js-form" action="/stylize/jsonapi.php" method="post" enctype="multipart/form-data" target="_blank">
<input type="hidden" name="action" value="stylizejs"/>
<textarea name="code" placeholder="javaScript( 0 === 0 );">
</textarea>
<button>Stylize JavaScript</button>
<pre class="stylize-ajax-template"></pre>
</form>
</div>
<script>
function buildAjaxCode(action, code) {
return '// JavaScript API usage sample\n' +
'$.support.cors = true;\n' +
'$.post(\'//tools.wmflabs.org/stylize/jsonapi.php?action=' + action + '\', {\n' +
'\tcode: \'' + code.replace(/\\/g, '\\\\').replace(/\'/g, '\\\'').replace(/\n/g, '\\n').replace(/\t/g, '\\t') + '\'\n' +
'});'
}
var config;
$.get('jsbeautify.cfg.json').done(function(r) {
config = r;
});
var $stylizePhpForm = $('#stylize-php-form');
$stylizePhpForm.ajaxForm({
beforeSubmit: function() {
$stylizePhpForm.parent().block();
$stylizePhpForm.find('.stylize-ajax-template').text( buildAjaxCode( $stylizePhpForm.find('input').val(), $stylizePhpForm.find('textarea').val() ) );
},
success: function(r) {
$stylizePhpForm.parent().unblock();
$stylizePhpForm.find('textarea').val(r.stylizephp);
}
});
var $stylizeJSForm = $('#stylize-js-form');
$stylizeJSForm.submit(function(e) {
e.preventDefault();
$stylizeJSForm.find('.stylize-ajax-template').text( buildAjaxCode( $stylizeJSForm.find('input').val(), $stylizeJSForm.find('textarea').val() ) );
var $ta = $stylizeJSForm.find('textarea');
$ta.val( js_beautify($ta.val(), config) );
});
</script>
<script src="js/beautify.js"></script>
<div style="color:white">
<div style="width:18%; border-bottom: 2px solid #587; float: left;"> </div>
<div style="width:18%; border-bottom: 2px solid #BDF; float: left;"> </div>
<div style="width:18%; border-bottom: 2px solid #666; float: left;"> </div>
</div>
<div style="clear:left; margin-top: 0.3em">This tool is maintained by <a href="//commons.wikimedia.org/wiki/User:Rillke">Rillke</a>. Issues and pull requests? <a href="https://github.com/Rillke/stylize">On GitHub</a>. Dual-licensed: <a href="LICENSE">GPL.v2+ and MIT</a></div>
</div>
</body>
</html>