New Html beautifier Goodie (#3658)
* Template Created * Added the HTML beautifier files * Updated the code * Renamed the files * Added more triggers and updated test file * fix(html-beautify): Updated the url of library. * fix(html_beautify): Added global scope to method.master
Akansh Gulati
Zaahir Moolla
parent
9d0fee92e2
commit
c95afc52f7
|
|
@ -0,0 +1,37 @@
|
|||
package DDG::Goodie::HtmlBeautifier;
|
||||
# ABSTRACT: A Goodie to beautify HTML tags.
|
||||
use DDG::Goodie;
|
||||
use strict;
|
||||
use warnings;
|
||||
|
||||
zci answer_type => 'htmlbeautifier';
|
||||
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 => "html_beautifier",
|
||||
|
||||
data => {
|
||||
title => 'HTML Beautifier',
|
||||
subtitle => 'Reformat HTML code by adding proper indentation.'
|
||||
},
|
||||
|
||||
templates => {
|
||||
group => 'text',
|
||||
item => 0,
|
||||
options => {
|
||||
content => 'DDH.html_beautifier.content'
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
1;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<div class="gw">
|
||||
<div class="g html_beautifier--wrap fifty frm">
|
||||
<textarea name="html_beautifier--input" class="html_beautifier--input whole tx--12 frm__text" rows="{{cols}}" cols="60" placeholder="Paste code here..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="g html_beautifier--wrap fifty is-hidden frm">
|
||||
<textarea name="html_beautifier--output" class="html_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 html_beautifier--action_box fifty">
|
||||
<button class="btn btn--skeleton" disabled>Beautify HTML</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
.zci--html_beautifier .html_beautifier--wrap {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.zci--html_beautifier textarea {
|
||||
font-family: monospace;
|
||||
/* Hide default scrollbars on IE */
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.zci--html_beautifier .html_beautifier--input {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.zci--html_beautifier .btn {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
/* Mobile */
|
||||
.is-mobile .zci--html_beautifier .html_beautifier--action_box {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-mobile .zci--html_beautifier .html_beautifier--action_box button {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.is-mobile .zci--html_beautifier .btn {
|
||||
height: 2.5em;
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
DDH.html_beautifier = DDH.html_beautifier || {};
|
||||
|
||||
DDH.html_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 'prettydiff' 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--html_beautifier'),
|
||||
$beautifyButton = $dom.find('button'),
|
||||
$input = $dom.find('.html_beautifier--input'),
|
||||
$output = $dom.find('.html_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('html-beautify', function() {
|
||||
// Change the text of button back to 'Beautify',
|
||||
// enable the button and change the pointer back to
|
||||
// 'pointer'
|
||||
$beautifyButton
|
||||
.text('Beautify HTML')
|
||||
.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.html_beautify($input.val()));
|
||||
});
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
html beautifier
|
||||
beautify html
|
||||
html beautify
|
||||
html prettify
|
||||
prettify html
|
||||
html cleanup
|
||||
clean html
|
||||
html pretty print
|
||||
html code beautifier
|
||||
html code formatter
|
||||
html formatter
|
||||
online html cleanup
|
||||
reformat html
|
||||
html code cleanup
|
||||
html reformat
|
||||
html indent
|
||||
html5 beautifier
|
||||
beautify html5
|
||||
html5 beautify
|
||||
html5 prettify
|
||||
prettify html5
|
||||
html5 cleanup
|
||||
clean html5
|
||||
html5 pretty print
|
||||
html5 code beautifier
|
||||
html5 code formatter
|
||||
html5 formatter
|
||||
reformat html5
|
||||
html5 code cleanup
|
||||
html5 reformat
|
||||
html5 indent
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
#!/usr/bin/env perl
|
||||
|
||||
use strict;
|
||||
use warnings;
|
||||
use Test::More;
|
||||
use Test::Deep;
|
||||
use DDG::Test::Goodie;
|
||||
|
||||
zci answer_type => 'htmlbeautifier';
|
||||
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 => "html_beautifier",
|
||||
|
||||
data => {
|
||||
title => 'HTML Beautifier',
|
||||
subtitle => 'Reformat HTML code by adding proper indentation.'
|
||||
},
|
||||
|
||||
templates => {
|
||||
group => "text",
|
||||
item => 0,
|
||||
options => {
|
||||
content => "DDH.html_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::HtmlBeautifier )],
|
||||
|
||||
'beautify html' => build_test(),
|
||||
'html beautifier online' => build_test(),
|
||||
'prettify html tool' => build_test(),
|
||||
'online html cleanup' => build_test(),
|
||||
'html code cleanup' => build_test(),
|
||||
'html cleanup code' => build_test(),
|
||||
'html cleanup utility' => build_test(),
|
||||
'html prettify online' => build_test(),
|
||||
'html prettify tool' => build_test(),
|
||||
'reformat html5 tool' => build_test(),
|
||||
'prettify html5 code' => build_test(),
|
||||
'prettify html5' => build_test(),
|
||||
|
||||
'php beautify' => undef,
|
||||
'html5 beatify library' => undef,
|
||||
'js beautify online' => undef,
|
||||
'code beautify online' => undef,
|
||||
'html prettified' => undef,
|
||||
'css beautifier tool' => undef,
|
||||
'online pretty print' => undef,
|
||||
'beautify code' => undef,
|
||||
'php html beautifier' => undef
|
||||
);
|
||||
|
||||
done_testing;
|
||||
Loading…
Reference in New Issue