templar

Inline tagged templating and template compliation with Select2

API Reference

Via http://mjpearson.github.io/templar

Installation

Include ./js/templar.min.js and ./css/templar.css into your page.

Licence

MIT http://opensource.org/licenses/MIT

thanks! Michael Pearson

templar's People

Contributors

Stargazers

Watchers

templar's Issues

reimplement

https://developer.mozilla.org/en-US/docs/Web/API/range.insertNode

<!DOCTYPE html>
<html>
<body>
  <div class="span10" contenteditable="plaintext-only">
    some shiney text
  </div> 
  <script>
    window.addEventListener("DOMContentLoaded", function(){
      function getSelection() {
          var savedRange;
          if(window.getSelection && window.getSelection().rangeCount > 0) //FF,Chrome,Opera,Safari,IE9+
          {
              savedRange = window.getSelection().getRangeAt(0).cloneRange();
          }
          else if(document.selection)//IE 8 and lower
          {
              savedRange = document.selection.createRange();
          }
          return savedRange;
      }    

         $('.span10').on('keydown', function(ev) {
      var s = getSelection(), bNode;
      if (ev.ctrlKey && ev.keyCode === 73) {
        ev.stopPropagation();

        var h = '<span contenteditable="false"><select id="e1">' +
          '<option value="AL">Alabama</option>' +
          '<option value="WY">Wyoming</option>' +
          '</select></span>';

        bNode = $(h);

        s.insertNode(bNode[0]);

        //bNode.select2().select2('container').attr('contenteditable', false);
        $('select', bNode).select2();

        s.setStartAfter(bNode[0]);
        var t = document.createTextNode('\u00a0');
        s.insertNode(t);

        // https://developer.mozilla.org/en-US/docs/Web/API/Node.normalize
        $('.span10')[0].normalize();
        updateFocus(t);
      }
    });
  </script>
</body>
</html>