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
Akansh Gulati
Zaahir Moolla
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