JS Minifier: Added CSS support, Added Beautify support (#4154)
* Add css support for js minifier. * Add support for prettifying. * Fixed tests. * Removed flag code. * update triggers to include prettify for css. * Add case insensitivity. * Remove .fifty from htmlmaster
PJ Hampton
Rob Emery
parent
ca6fcc437d
commit
368bab09c0
|
|
@ -20,8 +20,8 @@ handle remainder => sub {
|
|||
id => "js_minify",
|
||||
|
||||
data => {
|
||||
title => 'JavaScript Minifier',
|
||||
subtitle => 'Enter code below, then click the button to minify'
|
||||
title => 'Minifier',
|
||||
subtitle => 'Enter code below, then click the button to minify or prettify'
|
||||
},
|
||||
|
||||
templates => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
<div class="gw">
|
||||
|
||||
<div class="g js_minify--wrap fifty frm">
|
||||
|
||||
<select class="frm__select" id="lang_select">
|
||||
<option value="css">CSS</option>
|
||||
<option value="javascript">JavaScript</option>
|
||||
</select>
|
||||
|
||||
<textarea name="js_minify--input" class="js_minify--input whole tx--12 frm__text" rows="{{cols}}" cols="60" placeholder="Paste code here..."></textarea>
|
||||
</div>
|
||||
|
||||
|
|
@ -11,6 +18,7 @@
|
|||
|
||||
<div class="gw">
|
||||
<div class="g js_minify--action_box fifty">
|
||||
<button class="btn btn--skeleton" disabled>Minify Code</button>
|
||||
<button class="btn btn--skeleton" id="minify" disabled>Minify</button>
|
||||
<button class="btn btn--skeleton" id="prettify" disabled>Prettify</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,11 @@
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
.zci--js_minify select.frm__select {
|
||||
width: 100%;
|
||||
height: 3em !important;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
.is-mobile .zci--js_minify .js_minify--action_box {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,16 @@ DDH.js_minify.build = function(ops) {
|
|||
|
||||
ops.data.cols = is_mobile ? 8 : 20;
|
||||
|
||||
var lang,
|
||||
query = DDG.get_query();
|
||||
|
||||
// gets the language from the query
|
||||
if (/javascript|js|json/i.test(query)) {
|
||||
lang = "javascript";
|
||||
} else if(/css|style\s?sheets?/i.test(query)) {
|
||||
lang = "css";
|
||||
}
|
||||
|
||||
return {
|
||||
onShow: function() {
|
||||
// Make sure this function is run only once, the first time
|
||||
|
|
@ -23,9 +33,19 @@ DDH.js_minify.build = function(ops) {
|
|||
shown = true;
|
||||
|
||||
var $dom = $('.zci--js_minify'),
|
||||
$minifyButton = $dom.find('button'),
|
||||
$minifyButton = $dom.find('button#minify'),
|
||||
$prettifyButton = $dom.find('button#prettify'),
|
||||
$input = $dom.find('.js_minify--input'),
|
||||
$output = $dom.find('.js_minify--output');
|
||||
$output = $dom.find('.js_minify--output'),
|
||||
$lang_select = $dom.find('#lang_select');
|
||||
|
||||
// sets on the default lang
|
||||
$lang_select.val(lang);
|
||||
|
||||
// allows the user to switch between css and js
|
||||
$lang_select.change(function() {
|
||||
lang = this.value;
|
||||
});
|
||||
|
||||
// remove max-width restriction from container
|
||||
$dom.find(".zci__main").removeClass('c-base');
|
||||
|
|
@ -41,6 +61,7 @@ DDH.js_minify.build = function(ops) {
|
|||
// to make sure users aren't confused to see
|
||||
// the disabled button
|
||||
$minifyButton.text('Loading..');
|
||||
$prettifyButton.text('Loading..');
|
||||
|
||||
// load the library
|
||||
DDG.require('prettydiff', function() {
|
||||
|
|
@ -53,6 +74,12 @@ DDH.js_minify.build = function(ops) {
|
|||
.css('cursor', 'pointer')
|
||||
.removeClass('btn--skeleton')
|
||||
.addClass('btn--primary');
|
||||
$prettifyButton
|
||||
.text('Prettify Code')
|
||||
.prop('disabled', false)
|
||||
.css('cursor', 'pointer')
|
||||
.removeClass('btn--skeleton')
|
||||
.addClass('btn--primary');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -62,7 +89,26 @@ DDH.js_minify.build = function(ops) {
|
|||
// Set config options for minify operation
|
||||
var args = {
|
||||
mode: "minify",
|
||||
lang: "javascript",
|
||||
lang: lang,
|
||||
source: $input.val()
|
||||
};
|
||||
|
||||
// Operate using the prettydiff function provided by the library
|
||||
var output = prettydiff(args);
|
||||
|
||||
// Remove is-hidden class to make it visible again
|
||||
$output.parent().removeClass('is-hidden');
|
||||
|
||||
// Add the output to output textarea field
|
||||
$output.val(output);
|
||||
});
|
||||
|
||||
// Add click handler for the prettify button
|
||||
$prettifyButton.click(function() {
|
||||
// Set config options for minify operation
|
||||
var args = {
|
||||
mode: "beautify",
|
||||
lang: lang,
|
||||
source: $input.val()
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -10,3 +10,22 @@ json minify
|
|||
json minifier
|
||||
minify json
|
||||
minifier json
|
||||
css minify
|
||||
css minifier
|
||||
minify css
|
||||
minify css
|
||||
minify stylesheet
|
||||
minify stylesheets
|
||||
minify style sheet
|
||||
minify style sheets
|
||||
stylesheet minifier
|
||||
style sheet minifier
|
||||
css prettify
|
||||
css prettifier
|
||||
prettify css
|
||||
prettify stylesheet
|
||||
prettify style sheet
|
||||
stylesheet prettify
|
||||
style sheet prettify
|
||||
stylesheet prettifier
|
||||
style sheet prettifier
|
||||
|
|
@ -20,8 +20,8 @@ sub build_structured_answer {
|
|||
id => "js_minify",
|
||||
|
||||
data => {
|
||||
title => 'JavaScript Minifier',
|
||||
subtitle => 'Enter code below, then click the button to minify'
|
||||
title => 'Minifier',
|
||||
subtitle => 'Enter code below, then click the button to minify or prettify'
|
||||
},
|
||||
|
||||
templates => {
|
||||
|
|
@ -52,8 +52,9 @@ ddg_goodie_test(
|
|||
'minify json' => build_test(),
|
||||
'json minifier' => build_test(),
|
||||
'minifier json' => build_test(),
|
||||
'minify css' => build_test(),
|
||||
|
||||
'minify css' => undef,
|
||||
'minify css in grunt' => undef,
|
||||
'js minify gulp' => undef,
|
||||
);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue