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
Akansh Gulati
Zaahir Moolla
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