acmecms

by moob

HTML

<section>
    <heading>
        <h1 data-acme="1">
        Heading
        </h1>
        <small>not me</small>
    </heading>
    <main data-acme="2">
        <h2>Go ahead, edit away!</h2>
        <p>Here's a typical paragraph element</p>
        <ol>
            <li>and now a list</li>
            <li>with only</li>
            <li>three items</li>
        </ol>
    </main>
</section>

CSS

*[contentEditable] {
    background: #eee;
    outline: 1px solid red;
}

JavaScript

//http://alistapart.com/article/prototypal-object-oriented-programming-using-javascript#comments
(function() {

    if (typeof Object.create !== 'function') {
        Object.create = function(o) {
            function F() {}
            F.prototype = o;
            return new F();
        };
    }

    var acme = Object.create(null);
    acme.id = "0";
    acme.value = "-";
    acme.description = function() {
        return 'id: ' + this.id + '; value: ' + this.value;
    };
    acme.ondblclick = function(e) {
        e.preventDefault(); //dont continue with the event
        this.acme.edit.call(this);
    };
    acme.onblur = function(e) {
        e.preventDefault(); //dont continue with the event
        this.acme.save.call(this);
    };
    acme.edit = function() {
        this.setAttribute("contentEditable", true);
    };
    acme.save = function() {
        this.removeAttribute("contentEditable");
        this.acme.value = this.innerHTML;
        console.log(this.acme.description());
    };
    //init
    var acmeElems = document.querySelectorAll("*[data-acme]");
    for (i = 0; i < acmeElems.length; ++i) {
        var zis = acmeElems[i];
        zis.acme = Object.create(acme);
        zis.acme.id = zis.dataset.acme;
        zis.acme.value = zis.innerHTML;
        acmeElems[i].addEventListener("dblclick", zis.acme.ondblclick, true);
        acmeElems[i].addEventListener("blur", zis.acme.onblur, true);
    }
})();