\$\begingroup\$
\$\endgroup\$
Pretty printer in ABAP does not take care of all my aligning need, so I wrote a small JS script that tabulates/aligns with a custom string. It contains HTML, CSS and script in 1 file because this is a small tool.
Link : https://github.com/konijn/aligner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Aligner</title>
<style>
textarea { width: 100% ; height: 200px ; font-family: monospace }
.emo { margin-top: 10px ; margin-bottom: 10px }
</style>
</head>
<body>
<h2>Aligner</h2>
<label>Editor:</label><br>
<textarea id="editor">
DATA : wa_ekpo TYPE ekpo.
DATA : wa_eket TYPE eket.
DATA : wa_decision TYPE zrms_performance_decision.
DATA : wa_receipt_item TYPE zrmt_rcpt_items.
DATA : wa_container TYPE zrmt_rcpt_hdrs_c.
</textarea><br>
<label class="emo">Align at</label>
<input type="text" id="token" class="emo" value="TYPE">
<button type="button" id= "button">Align</button><br>
<label>Output:</label><br>
<textarea id="output"></textarea><br>
<script>
//Do the DOM querying once, the DOM elements are stable
var editor = document.getElementById( 'editor' ),
output = document.getElementById( 'output' ),
token = document.getElementById( 'token' ),
button = document.getElementById( 'button' );
//What happens when we click that button
button.addEventListener( 'click' , function( e )
{
var lines = editor.value.split('\n'),
columnSizes = {};
//Collect for each line the size of each column, keep the largest column size
lines.forEach( function( line )
{
var columns = line.split( token.value );
columns.forEach( function( column , index )
{
columnSizes[index] = Math.max( column.length , columnSizes[index] || 0 );
});
});
//Build up the new text with aligned columns
output.value = lines.map( function( line )
{
var columns = line.split( token.value );
return columns.map( function( column , index )
{
return column + spaces( columnSizes[index] - column.length );
}).join( token.value );
}).join('\n');
//Make sure Firefox does not go haywire
e.preventDefault();
}, false);
//Return a string with count spaces
function spaces( count )
{
return new Array( count + 1 ).join( " " );
}
</script>
</body>
</html>
Please review for style and maintainability.
Jamal
35.2k13 gold badges134 silver badges238 bronze badges
asked Jan 14, 2014 at 19:01
2 Answers 2
\$\begingroup\$
\$\endgroup\$
I recommend splitting your function into a DOM-and-event-handling function and a text-analysis function.
function alignTextColumns( text, delimiter )
{
...
}
button.addEventListener( 'click' , function( event )
{
output.value = alignTextColumns( editor.value, token.value );
//Make sure Firefox does not go haywire
event.preventDefault();
}, false);
That way, the alignTextColumns() function could be reused if the more text areas are added, or if you change the user interface to want to dump the output to the same text area as the input.
I would also bury the spaces() helper function inside the alignTextColumns() function.
answered Jan 26, 2014 at 12:03
\$\begingroup\$
\$\endgroup\$
I'm just commenting on your HTML/CSS.
- I commented out some
brtags, because they were not necessary - I splitted the HTML in three parts with
div's - Slightly adjusted the CSS rules
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Aligner</title>
<style>
textarea {
width: 100% ;
height: 200px ;
font-family: monospace;
}
.controls {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2>Aligner</h2>
<div class="editor">
<label>Editor:</label><!--<br>-->
<textarea id="editor">
DATA : wa_ekpo TYPE ekpo.
DATA : wa_eket TYPE eket.
DATA : wa_decision TYPE zrms_performance_decision.
DATA : wa_receipt_item TYPE zrmt_rcpt_items.
DATA : wa_container TYPE zrmt_rcpt_hdrs_c.
</textarea><!--<br>-->
</div>
<div class="controls">
<label class="emo">Align at</label>
<input type="text" id="token" class="emo" value="TYPE">
<button type="button" id= "button">Align</button><!--<br>-->
</div>
<div class="output">
<label>Output:</label><!--<br>-->
<textarea id="output"></textarea><!--<br>-->
</div>
<script>
// your script
</script>
</body>
</html>
lang-css