7
\$\begingroup\$

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.

Improve this question
\$\endgroup\$

2 Answers 2

Reset to default
3
\$\begingroup\$

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.

Improve this answer
\$\endgroup\$
4
\$\begingroup\$

I'm just commenting on your HTML/CSS.

  • I commented out some br tags, 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>
Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.