Ollypad

by abeisgreat

HTML

<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="http://www.firepad.io/examples/codemirror/lib/codemirror.js"></script>
<script src="http://www.firepad.io/examples/firepad.js"></script>
<link rel="stylesheet" href="http://www.firepad.io/examples/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="http://www.firepad.io/examples/firepad.css">
<script src="http://abeisgreat.github.io/olly/dist/olly.js"></script>
<div id="firepad"></div>

JavaScript

var firepadDiv = document.getElementById('firepad');
var firepadRef = new Firebase('https://firedungeon.firebaseio.com/');
var codeMirror = CodeMirror(firepadDiv, { lineWrapping: true });
var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror,
    { richTextShortcuts: true, richTextToolbar: true });

firepad.registerEntity('div', {
    render: function(info) {
        var attrs = ['class', 'url'];
        var html = '<div ';
        for(var i = 0; i < attrs.length; i++) {
            var attr = attrs[i];
            if (attr in info) {
                html += ' ' + attr + '="' + info[attr] + '"';
            }
        }
        html += ">Loading rich media...</div>";
        return html;
    },
    fromElement: function(element) {
        var info = {};
        for(var i = 0; i < attrs.length; i++) {
            var attr = attrs[i];
            if (element.hasAttribute(attr)) {
                info[attr] = element.getAttribute(attr);
            }
        }
        return info;
    }
});

function updateOlly() {
   var elements = document.getElementsByClassName("olly");
   for(var i = 0; i < elements.length; i++) {
       var element = elements[i];
       
       if (!element.getAttribute('rendered')) {

           element.setAttribute('rendered', true);
           console.log(olly);
           olly.embed(element.getAttribute('url'), element);
       }
   }   
}

codeMirror.on("beforeChange", function (codemirror, other) {
    if (other.text[0].slice(0, 8) == "https://" || other.text[0].slice(0, 7) == "http://") {
        other.cancel()
        setTimeout(function () {
            firepad.insertEntity('div', {class: 'olly', url: other.text[0]}, other.origin);
        }, 100)
    }
});

codeMirror.on("change", updateOlly);
codeMirror.on('update', updateOlly);