diff --git a/lib/DDG/Goodie/SassToCss.pm b/lib/DDG/Goodie/SassToCss.pm new file mode 100644 index 000000000..8fe175784 --- /dev/null +++ b/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; diff --git a/share/goodie/sass_to_css/content.handlebars b/share/goodie/sass_to_css/content.handlebars new file mode 100644 index 000000000..f1f1f5d99 --- /dev/null +++ b/share/goodie/sass_to_css/content.handlebars @@ -0,0 +1,16 @@ +
+ + +
+ + + + diff --git a/share/goodie/sass_to_css/sass_to_css.css b/share/goodie/sass_to_css/sass_to_css.css new file mode 100644 index 000000000..56c5bc0ee --- /dev/null +++ b/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%; +} diff --git a/share/goodie/sass_to_css/sass_to_css.js b/share/goodie/sass_to_css/sass_to_css.js new file mode 100644 index 000000000..16af681f6 --- /dev/null +++ b/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(); + }); + } + }; +}; diff --git a/share/goodie/sass_to_css/triggers.txt b/share/goodie/sass_to_css/triggers.txt new file mode 100644 index 000000000..2ffd7356a --- /dev/null +++ b/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 diff --git a/t/SassToCss.t b/t/SassToCss.t new file mode 100644 index 000000000..5eed0b846 --- /dev/null +++ b/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;