web/demo.html

<html>
  <head>
    <title>Bracery</title>
  </head>
  <body style="display: flex; flex-direction: row; justify-content: space-around;">
    <div style="width: 600px; background-color: #eee; padding: 4px;">
      <h1><a href="https://github.com/ihh/bracery">Bracery</a></h1>
      <p>
	Expansion (<a id="reroll" href="#">re-roll</a>):
	<div id="expansion" style="width: 100%; background-color: lightgray;">
	</div>
	<br><p>
	Source text (<a href="#" id="erase">erase</a> / <a href="#" id="reset">example</a> / <a href="#" id="link">link</a>):
	<div>
	  <div contenteditable="true" id="eval" style="width: 100%; min-height: 10em; resize: vertical; background: white; border-width: 1px; border-style: solid;">
	  </div>
	</div>
	<div id="showadvancedcontainer">
	  <a href="#" id="showadvanced">Advanced options</a>
	</div>
	<div id="advanced" style="display: none;">
	    Configuration:
	    <div>
	      <div contenteditable="true" id="config" style="width: 100%; background: white; border-width: 1px; border-style: solid;">
	      </div>
	    </div>
	    <br><p>
	    Parse tree:
	    <div id="tree">
	    </div>
	</div>
	<!-- bracery -->
	<script src="bracery.min.js"></script>
	<!-- hook up the UI -->
	<script>
	  var evalElement = document.getElementById('eval')
	  var eraseElement = document.getElementById('erase')
	  var resetElement = document.getElementById('reset')
	  var linkElement = document.getElementById('link')
	  var rerollElement = document.getElementById('reroll')
	  var expElement = document.getElementById('expansion')
	  var configElement = document.getElementById('config')
	  var treeElement = document.getElementById('tree')
	  var showElement = document.getElementById('showadvanced')
	  var showContainer = document.getElementById('showadvancedcontainer')
	  var advElement = document.getElementById('advanced')
	  function show (expansion) {
	    expElement.innerText = expansion.text
	    treeElement.innerText = JSON.stringify (expansion.tree)
	  }
	  function reset() {
            // hack: pass in text via hash, to work around hosts (e.g. github HTML preview) that won't allow URI parameters
	    evalElement.innerText = (window.location.hash
                                 ? window.decodeURIComponent (window.location.hash.substr(1))
                                 : (['[greetings=>[hello|well met] [now|there]|how [goes|fares] it with [you|thee]]',
	                             '[wizard=>wizard|witch|mage|magus|magician|sorcerer|enchanter]',
	                             '[earthsea=>earthsea|Earth|Middle Earth|the planet|the world]',
	                             '#greetings#, #wizard# of #earthsea#'].join('\n')+'\n'))
	    update()
	  }
	  function link() {
            // hack: pass in text via hash, to work around hosts (e.g. github HTML preview) that won't allow URI parameters
	    window.location.href = window.location.href.replace(/#.*/,'') + '#' + window.encodeURIComponent(evalElement.innerText)
	    var ta = document.createElement('textarea')
	    ta.value = window.location.href
	    document.body.appendChild(ta)
	    ta.select()
	    document.execCommand('copy')
	    document.body.removeChild(ta)
	    window.alert ("URL copied to clipboard")
	  }
	  function update (evt) {
	    try {
	      var text = evalElement.innerText.match(/\S/) ? evalElement.innerText : ''
	      var config = configElement.innerText.match(/\S/) ? JSON.parse(configElement.innerText) : {}
	      var b = new bracery.Bracery()
              evalElement.placeholder = 'Enter text, e.g. [something|other]'
	      show (b.expand (text, config))
	  } catch (e) {
	      expElement.innerText = e
	    }
	  }
	  evalElement.addEventListener ('keyup', update)
	  configElement.addEventListener ('keyup', update)
	  expElement.addEventListener ('click', update)
	  eraseElement.addEventListener ('click', function (evt) { evt.preventDefault(); evalElement.innerText = ''; update() })
	  resetElement.addEventListener ('click', function (evt) { evt.preventDefault(); reset() })
	  linkElement.addEventListener ('click', function (evt) { evt.preventDefault(); link() })
	  rerollElement.addEventListener ('click', function (evt) { evt.preventDefault(); update() })
	  showElement.addEventListener ('click', function (evt) { evt.preventDefault(); showContainer.remove(); advElement.style = '' })
	  configElement.innerText = '{"maxDepth":100,"maxRecursion":3,"enableParse":true}'
	  reset()
	</script>
    </div>
  </body>
</html>