enchancement(html-beautifier): Added options and clear button. (#3770)
Akansh Gulati
Zaahir Moolla
parent
8e5d7b46e8
commit
598ea8b6aa
|
|
@ -3,7 +3,7 @@
|
|||
<textarea name="html_beautifier--input" class="html_beautifier--input whole tx--12 frm__text" rows="{{cols}}" cols="60" placeholder="Paste code here..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="g html_beautifier--wrap fifty is-hidden frm">
|
||||
<div class="g html_beautifier--wrap fifty frm is-hidden">
|
||||
<textarea name="html_beautifier--output" class="html_beautifier--output whole tx--12 frm__text" rows="{{cols}}" cols="60" readonly="readonly" onclick="this.focus();this.select()"></textarea>
|
||||
</div>
|
||||
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
|
||||
<div class="gw">
|
||||
<div class="g html_beautifier--action_box fifty">
|
||||
<button class="btn btn--skeleton" disabled>Beautify HTML</button>
|
||||
<button class="btn is-disabled html--beautify-btn" disabled>Beautify</button>
|
||||
<button class="btn is-disabled html--clear-btn" disabled>Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -12,7 +12,7 @@ DDH.html_beautifier.build = function(ops) {
|
|||
ops.data.cols = is_mobile ? 8 : 20;
|
||||
|
||||
return {
|
||||
onShow: function() {
|
||||
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
|
||||
|
|
@ -23,16 +23,45 @@ DDH.html_beautifier.build = function(ops) {
|
|||
shown = true;
|
||||
|
||||
var $dom = $('.zci--html_beautifier'),
|
||||
$beautifyButton = $dom.find('button'),
|
||||
$input = $dom.find('.html_beautifier--input'),
|
||||
$output = $dom.find('.html_beautifier--output');
|
||||
$beautifyButton = $dom.find('.html--beautify-btn'),
|
||||
$clearButton = $dom.find('.html--clear-btn'),
|
||||
$input = $dom.find('.html_beautifier--input'),
|
||||
$output = $dom.find('.html_beautifier--output');
|
||||
|
||||
function enableButtons() {
|
||||
$beautifyButton
|
||||
.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() {
|
||||
$beautifyButton
|
||||
.prop('disabled', true)
|
||||
.addClass('is-disabled')
|
||||
.removeClass('btn--primary');
|
||||
|
||||
$clearButton
|
||||
.prop('disabled', true)
|
||||
.addClass('is-disabled')
|
||||
.removeClass('btn--secondary');
|
||||
}
|
||||
|
||||
// remove max-width restriction from container
|
||||
$dom.find(".zci__main").removeClass('c-base');
|
||||
|
||||
// Add event handler for change in input of textarea
|
||||
$input.on('input', function() {
|
||||
if (!libLoaded) {
|
||||
$input.on('input', function () {
|
||||
if (!$input.val().length) {
|
||||
disableButtons();
|
||||
}
|
||||
else if (!libLoaded) {
|
||||
// Set the flag to make sure the library isn't loaded
|
||||
// again and again
|
||||
libLoaded = true;
|
||||
|
|
@ -43,27 +72,54 @@ DDH.html_beautifier.build = function(ops) {
|
|||
$beautifyButton.text('Loading..');
|
||||
|
||||
// load the library
|
||||
DDG.require('html-beautify', function() {
|
||||
DDG.require('html-beautify', function () {
|
||||
// Change the text of button back to 'Beautify',
|
||||
// enable the button and change the pointer back to
|
||||
// 'pointer'
|
||||
$beautifyButton
|
||||
.text('Beautify HTML')
|
||||
.prop('disabled', false)
|
||||
.css('cursor', 'pointer')
|
||||
.removeClass('btn--skeleton')
|
||||
.addClass('btn--primary');
|
||||
$beautifyButton.text('Beautify');
|
||||
enableButtons();
|
||||
});
|
||||
} else {
|
||||
enableButtons();
|
||||
}
|
||||
});
|
||||
|
||||
// Add click handler for the beautify button
|
||||
$beautifyButton.click(function() {
|
||||
$beautifyButton.click(function () {
|
||||
var options = {
|
||||
"indent_size": 4,
|
||||
"indent_char": " ",
|
||||
"eol": "\n",
|
||||
"indent_level": 0,
|
||||
"indent_with_tabs": false,
|
||||
"preserve_newlines": true,
|
||||
"max_preserve_newlines": 1,
|
||||
"jslint_happy": false,
|
||||
"space_after_anon_function": true,
|
||||
"brace_style": "collapse",
|
||||
"keep_array_indentation": false,
|
||||
"keep_function_indentation": false,
|
||||
"space_before_conditional": true,
|
||||
"break_chained_methods": false,
|
||||
"eval_code": false,
|
||||
"unescape_strings": true,
|
||||
"wrap_line_length": 0,
|
||||
"wrap_attributes": "auto",
|
||||
"wrap_attributes_indent_size": 4,
|
||||
"end_with_newline": false
|
||||
};
|
||||
// Remove is-hidden class to make it visible again
|
||||
$output.parent().removeClass('is-hidden');
|
||||
|
||||
// Add the output to output textarea field
|
||||
$output.val(window.html_beautify($input.val()));
|
||||
$output.val(window.html_beautify($input.val(), options));
|
||||
});
|
||||
$clearButton.click(function () {
|
||||
// clear the input textarea
|
||||
$input.val('');
|
||||
$output.val('');
|
||||
$output.parent().addClass('is-hidden');
|
||||
// disable validate and clear buttons
|
||||
disableButtons();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue