New SASS to CSS IA (#3635)

* Added the SasstoCSS library

* Started with IA

* updated the goodie var

* Updated the classes to handlebar

* Updated the URL

* Updated the test file

* Updated the cdn of sass library

* Updates on format of IA

* fix(sass_to_css): Updated the url of the library.

* fix(triggers): Updated the tests and pm file.

* fix: Updated the file to remove ID param.

* fix(sass.js): Updated the code for synchronous sass compile.

* fix(sass_to_css.js): Load library when data is actually entered.

* fix(layout): Updated the layout of buttons.

lib/DDG/Goodie/SassToCss.pm

@@ -0,0 +1,42 @@
+package DDG::Goodie::SassToCss;
+# ABSTRACT: Write an abstract here
+
+use DDG::Goodie;
+use YAML::XS 'LoadFile';
+use POSIX;
+use Text::Trim;
+use strict;
+use warnings;
+
+zci answer_type => 'sass_to_css';
+
+zci is_cached => 1;
+
+
+
+# Triggers - http://docs.duckduckhack.com/walkthroughs/calculation.html#triggers
+triggers startend => share('triggers.txt')->slurp;
+
+handle remainder => sub {
+
+    # Return unless the remainder is empty or contains online or tool
+    return unless ( $_ =~ /(^$|online|tool|utility)/i );
+
+    return '',
+        structured_answer => {
+             data => {
+                title => 'Sass to Css Converter',
+                subtitle => 'Enter SASS below, then click the button to convert it to CSS'
+            },
+
+            templates => {
+                group => 'text',
+                item => 0,
+                options => {
+                    content => 'DDH.sass_to_css.content'
+                }
+            }
+        };
+};
+
+1;

share/goodie/sass_to_css/content.handlebars

@@ -0,0 +1,16 @@
+<div class="sass_to_css--wrap">
+    <textarea name="sass_to_css--input"
+              class=" forty--screen-l whole--screen-s tx--12 frm__text sass_to_css--input" rows="{{rows}}" cols="60"
+              placeholder="Paste code here..."></textarea>
+    <textarea name="sass_to_css--output"
+              class="forty--screen-l whole--screen-s tx--12 frm__text sass_to_css--output is-hidden"
+              rows="{{rows}}" cols="60"
+              placeholder="Output"></textarea>
+</div>
+<button class="btn is-disabled whole--screen-s sass_to_css--validate_button" disabled>Convert</button>
+<button class="btn is-disabled whole--screen-s sass_to_css--clear_button" disabled>Clear</button>
+
+<div class="sass_to_css--error__wrap is-hidden">
+    <h6 class="text--secondary">Error: </h6>
+    <pre class="sass_to_css--error whole tx--12"></pre>
+</div>

share/goodie/sass_to_css/sass_to_css.css

@@ -0,0 +1,37 @@
+.sass_to_css--wrap {
+    min-width: 700px;
+    margin-bottom: 10px;
+    margin-left: -1em;
+    width: 80vw;
+}
+
+.zci--sass_to_css textarea {
+    font-family: monospace;
+    resize: vertical;
+    white-space: pre;
+    overflow: auto; /* Hide default scrollbars on IE */
+    margin-left: 1em;
+}
+
+.zci--sass_to_css .sass_to_css--restart_button {
+    cursor: default;
+}
+
+.zci--sass_to_css .sass_to_css--clear_button {
+    cursor: pointer;
+}
+
+.zci--sass_to_css .sass_to_css--error__wrap {
+    margin-top: 1em;
+}
+
+/* Mobile */
+.is-mobile .zci--sass_to_css textarea {
+    resize: vertical;
+}
+
+.is-mobile .zci--sass_to_css button {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+}

share/goodie/sass_to_css/sass_to_css.js

@@ -0,0 +1,104 @@
+DDH.sass_to_css = DDH.sass_to_css || {};
+
+DDH.sass_to_css.build = function (ops) {
+    "use strict";
+
+    // Flag to make denote if IA has been shown or not
+    var shown = false,
+        sass;
+    ops.data.rows = is_mobile ? 8 : 30;
+    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--sass_to_css'),
+                $validateButton = $dom.find('.sass_to_css--validate_button'),
+                $clearButton = $dom.find('.sass_to_css--clear_button'),
+                $input = $dom.find('.sass_to_css--input'),
+                $output = $dom.find('.sass_to_css--output'),
+                $error = $dom.find('.sass_to_css--error');
+
+            function enableButtons() {
+                $validateButton
+                    .prop('disabled', false)
+                    .css('cursor', 'pointer')
+                    .removeClass('is-disabled')
+                    .addClass('btn--primary');
+                $clearButton
+                    .prop('disabled', false)
+                    .css('cursor', 'pointer')
+                    .removeClass('is-disabled')
+                    .addClass('btn--secondary');
+            }
+
+            function disableButtons() {
+                $validateButton
+                    .prop('disabled', true)
+                    .css('cursor', 'default')
+                    .addClass('is-disabled')
+                    .removeClass('btn--primary');
+                $clearButton
+                    .prop('disabled', true)
+                    .css('cursor', 'default')
+                    .addClass('is-disabled')
+                    .removeClass('btn--secondary');
+            }
+
+            // Load library when the IA is shown for the first time
+            $input.on('input', function () {
+                if (!$input.val().length) {
+                    disableButtons();
+                } else if (!sass) {
+
+                    $validateButton
+                        .text('Loading..');
+
+                    DDG.require('sass.js', function () {
+                        sass = Sass;
+                        $validateButton
+                            .text('Convert');
+                        enableButtons();
+                    });
+                } else {
+                    enableButtons();
+                }
+            });
+
+            $validateButton
+                .click(function () {
+                    if (sass) {
+                        $error.parent().addClass('is-hidden');
+                        $output.val('');
+                        sass.compile($input.val(), function (result) {
+                            if (result.status === 0) {
+                                $output.removeClass('is-hidden');
+                                $output.val(result.text);
+                                return;
+                            }
+                            $error.parent().removeClass('is-hidden');
+                            $error.html(result.formatted);
+                        });
+                    }
+                });
+
+            $clearButton.click(function () {
+                // clear the input textarea
+                $input.val('');
+                $output.val('');
+                $output.addClass('is-hidden');
+                // hide the results section
+                $error.parent().addClass('is-hidden');
+
+                // disable validate and clear buttons
+                disableButtons();
+            });
+        }
+    };
+};

share/goodie/sass_to_css/triggers.txt

@@ -0,0 +1,7 @@
+sass to css
+convert sass to css
+sass to css converter
+compile sass to css
+converter sass to css
+sass to css compiler
+sass convert to css

t/SassToCss.t

@@ -0,0 +1,52 @@
+#!/usr/bin/env perl
+
+use strict;
+use warnings;
+use Test::More;
+use Test::Deep;
+use DDG::Test::Goodie;
+
+zci answer_type => 'sass_to_css';
+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 => {
+            data => {
+                title => 'Sass to Css Converter',
+                subtitle => 'Enter SASS below, then click the button to convert it to CSS',
+            },
+
+            templates => {
+                group => "text",
+                item => 0,
+                options  => {
+                    content  => "DDH.sass_to_css.content"
+                }
+            }
+        };
+}
+
+# Use this to build expected results for your tests.
+sub build_test { test_zci(build_structured_answer(@_)) }
+
+ddg_goodie_test(
+    [qw( DDG::Goodie::SassToCss )],
+
+    'sass to css' => build_test(),
+    'sass to css converter' => build_test(),
+    'compile sass to css' => build_test(),
+    'converter sass to css' => build_test(),
+    'sass to css compiler' => build_test(),
+    'sass convert to css' => build_test(),
+    'compile sass to css' => build_test(),
+
+    'convert sass' => undef,
+
+);
+
+done_testing;