From c95afc52f7dd4bd966499b9fc61945c01634d448 Mon Sep 17 00:00:00 2001 From: Akansh Gulati Date: Fri, 21 Oct 2016 19:48:11 +0530 Subject: [PATCH] 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. --- lib/DDG/Goodie/HtmlBeautifier.pm | 37 ++++++++++ .../goodie/html_beautifier/content.handlebars | 16 +++++ .../html_beautifier/html_beautifier.css | 34 +++++++++ .../goodie/html_beautifier/html_beautifier.js | 70 +++++++++++++++++++ share/goodie/html_beautifier/triggers.txt | 31 ++++++++ t/HtmlBeautifier.t | 67 ++++++++++++++++++ 6 files changed, 255 insertions(+) create mode 100644 lib/DDG/Goodie/HtmlBeautifier.pm create mode 100644 share/goodie/html_beautifier/content.handlebars create mode 100644 share/goodie/html_beautifier/html_beautifier.css create mode 100644 share/goodie/html_beautifier/html_beautifier.js create mode 100644 share/goodie/html_beautifier/triggers.txt create mode 100644 t/HtmlBeautifier.t diff --git a/lib/DDG/Goodie/HtmlBeautifier.pm b/lib/DDG/Goodie/HtmlBeautifier.pm new file mode 100644 index 000000000..d0c5ebda5 --- /dev/null +++ b/lib/DDG/Goodie/HtmlBeautifier.pm @@ -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; diff --git a/share/goodie/html_beautifier/content.handlebars b/share/goodie/html_beautifier/content.handlebars new file mode 100644 index 000000000..08ae7190a --- /dev/null +++ b/share/goodie/html_beautifier/content.handlebars @@ -0,0 +1,16 @@ +
+
+ +
+ + + +
+ +
+
+ +
+
diff --git a/share/goodie/html_beautifier/html_beautifier.css b/share/goodie/html_beautifier/html_beautifier.css new file mode 100644 index 000000000..8cee74e0a --- /dev/null +++ b/share/goodie/html_beautifier/html_beautifier.css @@ -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; +} diff --git a/share/goodie/html_beautifier/html_beautifier.js b/share/goodie/html_beautifier/html_beautifier.js new file mode 100644 index 000000000..2ce71ef42 --- /dev/null +++ b/share/goodie/html_beautifier/html_beautifier.js @@ -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())); + }); + } + }; +}; \ No newline at end of file diff --git a/share/goodie/html_beautifier/triggers.txt b/share/goodie/html_beautifier/triggers.txt new file mode 100644 index 000000000..40a385687 --- /dev/null +++ b/share/goodie/html_beautifier/triggers.txt @@ -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 \ No newline at end of file diff --git a/t/HtmlBeautifier.t b/t/HtmlBeautifier.t new file mode 100644 index 000000000..28c9d55cb --- /dev/null +++ b/t/HtmlBeautifier.t @@ -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;