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
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