From 9ce00a9e8e5192d1f0f2f306be6d4562f0739a9b Mon Sep 17 00:00:00 2001 From: Akansh Gulati Date: Fri, 21 Oct 2016 19:54:15 +0530 Subject: [PATCH] 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. --- lib/DDG/Goodie/JsBeautifier.pm | 38 ++++++++++ share/goodie/js_beautifier/content.handlebars | 16 +++++ share/goodie/js_beautifier/js_beautifier.css | 33 +++++++++ share/goodie/js_beautifier/js_beautifier.js | 70 +++++++++++++++++++ share/goodie/js_beautifier/triggers.txt | 37 ++++++++++ t/JsBeautifier.t | 61 ++++++++++++++++ 6 files changed, 255 insertions(+) create mode 100644 lib/DDG/Goodie/JsBeautifier.pm create mode 100644 share/goodie/js_beautifier/content.handlebars create mode 100644 share/goodie/js_beautifier/js_beautifier.css create mode 100644 share/goodie/js_beautifier/js_beautifier.js create mode 100644 share/goodie/js_beautifier/triggers.txt create mode 100644 t/JsBeautifier.t diff --git a/lib/DDG/Goodie/JsBeautifier.pm b/lib/DDG/Goodie/JsBeautifier.pm new file mode 100644 index 000000000..ea16acbbc --- /dev/null +++ b/lib/DDG/Goodie/JsBeautifier.pm @@ -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; \ No newline at end of file diff --git a/share/goodie/js_beautifier/content.handlebars b/share/goodie/js_beautifier/content.handlebars new file mode 100644 index 000000000..81274b747 --- /dev/null +++ b/share/goodie/js_beautifier/content.handlebars @@ -0,0 +1,16 @@ +
+
+ +
+ + + +
+ +
+
+ +
+
diff --git a/share/goodie/js_beautifier/js_beautifier.css b/share/goodie/js_beautifier/js_beautifier.css new file mode 100644 index 000000000..64f6b1e4f --- /dev/null +++ b/share/goodie/js_beautifier/js_beautifier.css @@ -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; +} diff --git a/share/goodie/js_beautifier/js_beautifier.js b/share/goodie/js_beautifier/js_beautifier.js new file mode 100644 index 000000000..55c832f9e --- /dev/null +++ b/share/goodie/js_beautifier/js_beautifier.js @@ -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())); + }); + } + }; +}; diff --git a/share/goodie/js_beautifier/triggers.txt b/share/goodie/js_beautifier/triggers.txt new file mode 100644 index 000000000..9ae6f7dd2 --- /dev/null +++ b/share/goodie/js_beautifier/triggers.txt @@ -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 \ No newline at end of file diff --git a/t/JsBeautifier.t b/t/JsBeautifier.t new file mode 100644 index 000000000..500977d3f --- /dev/null +++ b/t/JsBeautifier.t @@ -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;