orangevolt-macrop example

example demonstrating how to use orangevolt-macrop in the browser

by lgersman

HTML

<script src="http://localhost:9090/orangevolt-macrop.js"></script>
<h2>orangevolt-macrop example</h2>

<p>
    <label>input:</label>
    <br>
    <textarea rows="18" cols="40">
sadsadsaa

&lt;&lt;ns1-ns2:ns3:too 
  co-al-foo 
  ns1-ns2:ns3:bar="JOHN DOE" 
  content="
    take it from a 
    multiline attribute
  "
&gt;&gt;
  before
  &lt;&lt;source foo='bar' /&gt;&gt;
  between
  &lt;&lt;rendered target="html"/&gt;&gt;
  after
&lt;&lt;/ns1-ns2:ns3:too&gt;&gt;
        
whats up ?
    </textarea>
    <br>
    <button type="button" onclick="parse()">
        orangevolt.macrop.parse( ...)
    </button>
</p>

<p>
    <label>output:</label>
    <br>
    <pre></pre>
</p>

CSS

TEXTAREA {
    display   : block;
    width     : 100%;
}

pre {
    color : green;
}

JavaScript

function parse() {
    var ta = document.querySelector( 'TEXTAREA'),
        pre = document.querySelector( 'PRE')
    ;

    pre.innerHTML = "parsing ...";
    
    var r = orangevolt.macrop.parse( ta.value,  {});
    pre.innerHTML = JSON.stringify( r, null, '  ')
        .replace( /</g, '&lt;')
        .replace( />/g, '&gt;')
    ;
}