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.master
parent
6984b6015b
commit
e9c9456f98
|
@ -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;
|
|
@ -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>
|
|
@ -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%;
|
||||||
|
}
|
|
@ -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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
|
@ -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
|
|
@ -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;
|
Loading…
Reference in New Issue