\$\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> 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>Align at</label> <input type="text" value="TYPE"> <button type="button" id= "button">Align</button><br> <label>Output:</label><br> <textarea></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.
2 Answers2
\$\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, thealignTextColumns() 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 thespaces() helper function inside thealignTextColumns() function.
\$\begingroup\$
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> <label>Editor:</label><!--<br>--> <textarea> 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> <label>Align at</label> <input type="text" value="TYPE"> <button type="button" id= "button">Align</button><!--<br>--> </div> <div> <label>Output:</label><!--<br>--> <textarea></textarea><!--<br>--> </div> <script> // your script </script> </body></html>\$\endgroup\$
You mustlog in to answer this question.
Explore related questions
See similar questions with these tags.