New JS Beautifier Goodie (#3640)
* Js Beautifier * fix(js_beautifier.js): Updated the library URL to internal. * fix(triggers): Added more triggers. * fix(triggers): Added a few more triggers and tests.master
parent
c95afc52f7
commit
9ce00a9e8e
|
@ -0,0 +1,38 @@
|
||||||
|
package DDG::Goodie::JsBeautifier;
|
||||||
|
# ABSTRACT: Write an abstract here
|
||||||
|
|
||||||
|
use DDG::Goodie;
|
||||||
|
use strict;
|
||||||
|
use warnings;
|
||||||
|
|
||||||
|
zci answer_type => 'jsbeautifier';
|
||||||
|
zci is_cached => 1;
|
||||||
|
|
||||||
|
triggers startend => share('triggers.txt')->slurp;
|
||||||
|
|
||||||
|
handle remainder => sub {
|
||||||
|
|
||||||
|
# Return unless the remainder is empty or contains online or tool
|
||||||
|
return unless ( $_ =~ /(^$|online|tool|code|utility)/i );
|
||||||
|
|
||||||
|
return '',
|
||||||
|
structured_answer => {
|
||||||
|
|
||||||
|
id => "js_beautifier",
|
||||||
|
|
||||||
|
data => {
|
||||||
|
title => 'JavaScript Beautifier',
|
||||||
|
subtitle => 'Enter code below, then click the button to beautify'
|
||||||
|
},
|
||||||
|
|
||||||
|
templates => {
|
||||||
|
group => 'text',
|
||||||
|
item => 0,
|
||||||
|
options => {
|
||||||
|
content => 'DDH.js_beautifier.content'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
1;
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div class="gw">
|
||||||
|
<div class="g js_beautifier--wrap fifty frm">
|
||||||
|
<textarea name="js_beautifier--input" class="js_beautifier--input whole tx--12 frm__text" rows="{{cols}}" cols="60" placeholder="Paste code here..."></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="g js_beautifier--wrap fifty is-hidden frm">
|
||||||
|
<textarea name="js_beautifier--output" class="js_beautifier--output whole tx--12 frm__text" rows="{{cols}}" cols="60" readonly="readonly" onclick="this.focus();this.select()"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gw">
|
||||||
|
<div class="g js_beautifier--action_box fifty">
|
||||||
|
<button class="btn btn--skeleton" disabled>Beautify Code</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,33 @@
|
||||||
|
.zci--js_beautifier .js_beautifier--wrap {
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zci--js_beautifier textarea {
|
||||||
|
font-family: monospace;
|
||||||
|
overflow: auto;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zci--js_beautifier .js_beautifier--input {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zci--js_beautifier .btn {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Mobile */
|
||||||
|
.is-mobile .zci--js_beautifier .js_beautifier--action_box {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-mobile .zci--js_beautifier .js_beautifier--action_box button {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-mobile .zci--js_beautifier .btn {
|
||||||
|
height: 2.5em;
|
||||||
|
}
|
|
@ -0,0 +1,70 @@
|
||||||
|
DDH.js_beautifier = DDH.js_beautifier || {};
|
||||||
|
|
||||||
|
DDH.js_beautifier.build = function(ops) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Flag to make denote if IA has been shown or not
|
||||||
|
var shown = false;
|
||||||
|
|
||||||
|
// Flag to denote if library 'beautify-js' has been loaded or not
|
||||||
|
var libLoaded = false;
|
||||||
|
|
||||||
|
ops.data.cols = is_mobile ? 8 : 20;
|
||||||
|
|
||||||
|
return {
|
||||||
|
onShow: function() {
|
||||||
|
// Make sure this function is run only once, the first time
|
||||||
|
// the IA is shown otherwise things will get initialized
|
||||||
|
// more than once
|
||||||
|
if (shown)
|
||||||
|
return;
|
||||||
|
|
||||||
|
// Set the flag to true so it doesn't get run again
|
||||||
|
shown = true;
|
||||||
|
|
||||||
|
var $dom = $('.zci--js_beautifier'),
|
||||||
|
$beautifyButton = $dom.find('button'),
|
||||||
|
$input = $dom.find('.js_beautifier--input'),
|
||||||
|
$output = $dom.find('.js_beautifier--output');
|
||||||
|
|
||||||
|
// remove max-width restriction from container
|
||||||
|
$dom.find(".zci__main").removeClass('c-base');
|
||||||
|
|
||||||
|
// Add event handler for change in input of textarea
|
||||||
|
$input.on('input', function() {
|
||||||
|
if (!libLoaded) {
|
||||||
|
// Set the flag to make sure the library isn't loaded
|
||||||
|
// again and again
|
||||||
|
libLoaded = true;
|
||||||
|
|
||||||
|
// Change text of button to show the loading action
|
||||||
|
// to make sure users aren't confused to see
|
||||||
|
// the disabled button
|
||||||
|
$beautifyButton.text('Loading..');
|
||||||
|
|
||||||
|
// load the library
|
||||||
|
DDG.require('js-beautify', function(){
|
||||||
|
// Change the text of button back to 'Beautify',
|
||||||
|
// enable the button and change the pointer back to
|
||||||
|
// 'pointer'
|
||||||
|
$beautifyButton
|
||||||
|
.text('Beautify Code')
|
||||||
|
.prop('disabled', false)
|
||||||
|
.css('cursor', 'pointer')
|
||||||
|
.removeClass('btn--skeleton')
|
||||||
|
.addClass('btn--primary');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add click handler for the beautify button
|
||||||
|
$beautifyButton.click(function() {
|
||||||
|
// Remove is-hidden class to make it visible again
|
||||||
|
$output.parent().removeClass('is-hidden');
|
||||||
|
|
||||||
|
// Add the output to output textarea field
|
||||||
|
$output.val(window.js_beautify($input.val()));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
|
@ -0,0 +1,37 @@
|
||||||
|
js beautify
|
||||||
|
beautify js
|
||||||
|
unminify js
|
||||||
|
js unminify
|
||||||
|
prettify js
|
||||||
|
js prettify
|
||||||
|
js beautifier
|
||||||
|
un minify js
|
||||||
|
jsbeautify
|
||||||
|
uncompress js
|
||||||
|
pretty print js
|
||||||
|
js prettyprint
|
||||||
|
prettyprint js
|
||||||
|
js pretty print
|
||||||
|
js pretty
|
||||||
|
decompress js
|
||||||
|
tidy js
|
||||||
|
js tidy
|
||||||
|
format js
|
||||||
|
javascript beautify
|
||||||
|
beautify javascript
|
||||||
|
unminify javascript
|
||||||
|
javascript unminify
|
||||||
|
prettify javascript
|
||||||
|
javascript prettify
|
||||||
|
javascript beautifier
|
||||||
|
un minify javascript
|
||||||
|
uncompress javascript
|
||||||
|
pretty print javascript
|
||||||
|
javascript prettyprint
|
||||||
|
prettyprint javascript
|
||||||
|
javascript pretty print
|
||||||
|
javascript pretty
|
||||||
|
decompress javascript
|
||||||
|
tidy javascript
|
||||||
|
javascript tidy
|
||||||
|
format javascript
|
|
@ -0,0 +1,61 @@
|
||||||
|
#!/usr/bin/env perl
|
||||||
|
|
||||||
|
use strict;
|
||||||
|
use warnings;
|
||||||
|
use Test::More;
|
||||||
|
use Test::Deep;
|
||||||
|
use DDG::Test::Goodie;
|
||||||
|
|
||||||
|
zci answer_type => "jsbeautifier";
|
||||||
|
zci is_cached => 1;
|
||||||
|
|
||||||
|
# Build a structured answer that should match the response from the
|
||||||
|
# Perl file.
|
||||||
|
sub build_structured_answer {
|
||||||
|
my @test_params = @_;
|
||||||
|
|
||||||
|
return "",
|
||||||
|
structured_answer => {
|
||||||
|
|
||||||
|
id => "js_beautifier",
|
||||||
|
|
||||||
|
data => {
|
||||||
|
title => 'JavaScript Beautifier',
|
||||||
|
subtitle => 'Enter code below, then click the button to beautify'
|
||||||
|
},
|
||||||
|
|
||||||
|
templates => {
|
||||||
|
group => 'text',
|
||||||
|
item => 0,
|
||||||
|
options => {
|
||||||
|
content => 'DDH.js_beautifier.content'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
# Use this to build expected results for your tests.
|
||||||
|
sub build_test { test_zci(build_structured_answer(@_)) }
|
||||||
|
|
||||||
|
ddg_goodie_test(
|
||||||
|
[qw( DDG::Goodie::JsBeautifier)],
|
||||||
|
|
||||||
|
'js beautify' => build_test(),
|
||||||
|
'js beautify online' => build_test(),
|
||||||
|
'unminify js code' => build_test(),
|
||||||
|
'decompress js utility' => build_test(),
|
||||||
|
'format js code' => build_test(),
|
||||||
|
'js tidy' => build_test(),
|
||||||
|
'javascript pretty tool' => build_test(),
|
||||||
|
'online tidy js' => build_test(),
|
||||||
|
|
||||||
|
'html beautify' => undef,
|
||||||
|
'js beautify library' => undef,
|
||||||
|
'js beatify online' => undef,
|
||||||
|
'js minify' => undef,
|
||||||
|
'js prettified' => undef,
|
||||||
|
'css beautify' => undef,
|
||||||
|
'beautify js cdn' => undef
|
||||||
|
);
|
||||||
|
|
||||||
|
done_testing;
|
Loading…
Reference in New Issue