Skip to content

Commit

Permalink
Addtional cleanup and simplification
Browse files Browse the repository at this point in the history
  • Loading branch information
@bitwiseman
bitwiseman committed Jul 28, 2020
1 parent 46786fc commit 566ad85
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 134 deletions.
233 changes: 115 additions & 118 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,138 +66,135 @@

<body>
<h1>Online JavaScript Beautifier <span id="version-number"></span></h1>

<div id="about">
<p>
<a class="self" href="./">Beautify, unpack or deobfuscate JavaScript and HTML, make JSON/JSONP readable, etc.</a>
</p>
<p>
All of the source code is completely free and open, available on <a href="https://github.com/beautify-web/js-beautify">GitHub</a> under MIT licence,
<br>and we have a command-line version, python library and a <a href="https://npmjs.org/package/js-beautify">node package</a> as well.
</p>
<p>
<select name="language" id="language">
<option value="css">Beautify CSS</option>
<option value="html">Beautify HTML</option>
<option value="js">Beautify JavaScript</option>
</select>
</p>
</div>

<table id="options">
<tr>
<td>
<select name="tabsize" id="tabsize">
<option value="1">Indent with a tab character</option>
<option value="2">Indent with 2 spaces</option>
<option value="3">Indent with 3 spaces</option>
<option value="4">Indent with 4 spaces</option>
<option value="8">Indent with 8 spaces</option>
</select>
<br>

<select name="max-preserve-newlines" id="max-preserve-newlines">
<option value="-1">Remove all extra newlines</option>
<option value="1">Allow 1 newline between tokens</option>
<option value="2">Allow 2 newlines between tokens</option>
<option value="5">Allow 5 newlines between tokens</option>
<option value="10">Allow 10 newlines between tokens</option>
<option value="0">Allow unlimited newlines between tokens</option>
</select>
<br>

<select name="wrap-line-length" id="wrap-line-length">
<option value="0">Do not wrap lines</option>
<option value="40">Wrap lines near 40 characters</option>
<option value="70">Wrap lines near 70 characters</option>
<option value="80">Wrap lines near 80 characters</option>
<option value="110">Wrap lines near 110 characters</option>
<option value="120">Wrap lines near 120 characters</option>
<option value="160">Wrap lines near 160 characters</option>
</select>
<br>

<select id="brace-style">
<option value="collapse">Braces with control statement</option>
<option value="expand">Braces on own line</option>
<option value="end-expand">End braces on own line</option>
<option value="none">Attempt to keep braces where they are</option>
</select>

<p style="margin:6px 0 0 0">HTML &lt;style&gt;, &lt;script&gt; formatting:</p>
<select id="indent-scripts">
<option value="keep">Keep indent level of the tag</option>
<option value="normal">Add one indent level</option>
<option value="separate">Separate indentation</option>
<div>
<div class="col-6">
<p>
<a class="self" href="./">Beautify, unpack or deobfuscate JavaScript and HTML, make JSON/JSONP readable, etc.</a>
</p>
<p>
All of the source code is completely free and open, available on <a href="https://github.com/beautify-web/js-beautify">GitHub</a> under MIT licence,
<br>and we have a command-line version, python library and a <a href="https://npmjs.org/package/js-beautify">node package</a> as well.
</p>
<p>
<select name="language" id="language">
<option value="css">Beautify CSS</option>
<option value="html">Beautify HTML</option>
<option value="js">Beautify JavaScript</option>
</select>

<p style="margin:6px 0 0 0">Additional Settings (JSON):</p>
<textarea id="additional-options" rows="5" cols="32">{}</textarea>

<p id="additional-options-error" hidden style="margin:6px 0 0 0; color:red ">Could Not Parse JSON!</p>

</td>
<td>
<input class="checkbox" type="checkbox" id="end-with-newline">
<label for="end-with-newline">End script and style with newline?</label>
<br>
<input class="checkbox" type="checkbox" id="e4x">
<label for="e4x">Support e4x/jsx syntax</label>
<br>
<input class="checkbox" type="checkbox" id="comma-first">
<label for="comma-first">Use comma-first list style?</label>
<br>
<input class="checkbox" type="checkbox" id="detect-packers">
<label for="detect-packers">Detect packers and obfuscators?</label>
<br>
<input class="checkbox" type="checkbox" id="brace-preserve-inline">
<label for="brace-preserve-inline">Preserve inline braces/code blocks?</label>
<br>
<input class="checkbox" type="checkbox" id="keep-array-indentation">
<label for="keep-array-indentation">Keep array indentation?</label>
<br>
<input class="checkbox" type="checkbox" id="break-chained-methods">
<label for="break-chained-methods">Break lines on chained methods?</label>
<br>
<input class="checkbox" type="checkbox" id="space-before-conditional">
<label for="space-before-conditional">Space before conditional: "if(x)" / "if (x)"</label>
<br>
<input class="checkbox" type="checkbox" id="unescape-strings">
<label for="unescape-strings">Unescape printable chars encoded as \xNN or \uNNNN?</label>
<br>
<input class="checkbox" type="checkbox" id="jslint-happy">
<label for="jslint-happy">Use JSLint-happy formatting tweaks?</label>
<br>
<input class="checkbox" type="checkbox" id="indent-inner-html">
<label for="indent-inner-html">Indent &lt;head&gt; and &lt;body&gt; sections?</label>
<br>
<input class="checkbox" type="checkbox" id="indent-empty-lines">
<label for="indent-empty-lines">Keep indentation on empty lines?</label>
<br><a href="?without-codemirror" class="turn-off-codemirror">Use a simple textarea for code input?</a>


</td>
</tr>
</table>
</p>
</div>
<div class="col-6">
<table id="options">
<tr>
<td>
<select name="tabsize" id="tabsize">
<option value="1">Indent with a tab character</option>
<option value="2">Indent with 2 spaces</option>
<option value="3">Indent with 3 spaces</option>
<option value="4">Indent with 4 spaces</option>
<option value="8">Indent with 8 spaces</option>
</select>
<br>

<select name="max-preserve-newlines" id="max-preserve-newlines">
<option value="-1">Remove all extra newlines</option>
<option value="1">Allow 1 newline between tokens</option>
<option value="2">Allow 2 newlines between tokens</option>
<option value="5">Allow 5 newlines between tokens</option>
<option value="10">Allow 10 newlines between tokens</option>
<option value="0">Allow unlimited newlines between tokens</option>
</select>
<br>

<select name="wrap-line-length" id="wrap-line-length">
<option value="0">Do not wrap lines</option>
<option value="40">Wrap lines near 40 characters</option>
<option value="70">Wrap lines near 70 characters</option>
<option value="80">Wrap lines near 80 characters</option>
<option value="110">Wrap lines near 110 characters</option>
<option value="120">Wrap lines near 120 characters</option>
<option value="160">Wrap lines near 160 characters</option>
</select>
<br>

<select id="brace-style">
<option value="collapse">Braces with control statement</option>
<option value="expand">Braces on own line</option>
<option value="end-expand">End braces on own line</option>
<option value="none">Attempt to keep braces where they are</option>
</select>

<p style="margin:6px 0 0 0">HTML &lt;style&gt;, &lt;script&gt; formatting:</p>
<select id="indent-scripts">
<option value="keep">Keep indent level of the tag</option>
<option value="normal">Add one indent level</option>
<option value="separate">Separate indentation</option>
</select>

<p style="margin:6px 0 0 0">Additional Settings (JSON):</p>
<textarea id="additional-options" rows="5" cols="32">{}</textarea>

<p id="additional-options-error" hidden style="margin:6px 0 0 0; color:red ">Could Not Parse JSON!</p>

</td>
<td>
<input class="checkbox" type="checkbox" id="end-with-newline">
<label for="end-with-newline">End script and style with newline?</label>
<br>
<input class="checkbox" type="checkbox" id="e4x">
<label for="e4x">Support e4x/jsx syntax</label>
<br>
<input class="checkbox" type="checkbox" id="comma-first">
<label for="comma-first">Use comma-first list style?</label>
<br>
<input class="checkbox" type="checkbox" id="detect-packers">
<label for="detect-packers">Detect packers and obfuscators?</label>
<br>
<input class="checkbox" type="checkbox" id="brace-preserve-inline">
<label for="brace-preserve-inline">Preserve inline braces/code blocks?</label>
<br>
<input class="checkbox" type="checkbox" id="keep-array-indentation">
<label for="keep-array-indentation">Keep array indentation?</label>
<br>
<input class="checkbox" type="checkbox" id="break-chained-methods">
<label for="break-chained-methods">Break lines on chained methods?</label>
<br>
<input class="checkbox" type="checkbox" id="space-before-conditional">
<label for="space-before-conditional">Space before conditional: "if(x)" / "if (x)"</label>
<br>
<input class="checkbox" type="checkbox" id="unescape-strings">
<label for="unescape-strings">Unescape printable chars encoded as \xNN or \uNNNN?</label>
<br>
<input class="checkbox" type="checkbox" id="jslint-happy">
<label for="jslint-happy">Use JSLint-happy formatting tweaks?</label>
<br>
<input class="checkbox" type="checkbox" id="indent-inner-html">
<label for="indent-inner-html">Indent &lt;head&gt; and &lt;body&gt; sections?</label>
<br>
<input class="checkbox" type="checkbox" id="indent-empty-lines">
<label for="indent-empty-lines">Keep indentation on empty lines?</label>
<br><a href="?without-codemirror" class="turn-off-codemirror">Use a simple textarea for code input?</a>

</td>
</tr>
</table>
</div>
</div>

<div>
<button class="submit"><strong>Beautify Code</strong> <em>(ctrl-enter)</em>
</button>

<div style="text-align: center;">
<button class="submit"><strong>Beautify Code</strong> <em>(ctrl-enter)</em></button>
<button class="control" type="button" onclick="copyText()"><strong>Copy to Clipboard</strong></button>
<button class="control" type="button" onclick="selectAll()"><strong>Select All</strong></button>
</div>

<textarea id="source" rows="30" cols="160"></textarea>

<div style="text-align: center;">
<button class="submit"><strong>Beautify Code</strong> <em>(ctrl-enter)</em></button>
<button class="control" type="button" onclick="copyText()"><strong>Copy to Clipboard</strong></button>
<button class="control" type="button" onclick="selectAll()"><strong>Select All</strong></button>

</div>
<button class="submit"><strong>Beautify Code</strong> <em>(ctrl-enter)</em>
</button>
</div>

<p style="margin:6px 0 0 0">Your Selected Options (JSON):</p>
Expand Down
16 changes: 0 additions & 16 deletions web/common-style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,6 @@ a.turn-off-codemirror {
}

button.submit {
width: 100%;
padding: 10px 0;
cursor: pointer;
margin: 0;
}
Expand All @@ -37,8 +35,6 @@ button.submit em {
}

button.control {
width: 10%;
padding: 5px 0;
cursor: pointer;
margin: 0;
}
Expand All @@ -51,10 +47,6 @@ select {
width: 220px;
}

table#options {
float: right;
}

table#options td {
vertical-align: top;
padding-left: 10px;
Expand All @@ -65,14 +57,6 @@ table#options td {
float: left;
}

#about {
float: left;
}

#about p {
margin: 0 6px 6px 0;
}

#version-number {
font-size: .5em;
}
Expand Down

0 comments on commit 566ad85

Please sign in to comment.