Page editor

Demonstrates a UI that lets a user edit a page

by doug65536

HTML

<div class="main">
    <div class="post-cnt">
    <h3>Edit You Website Pages</h3>
        <hr/>
    <div class='cp_page' data-pageid="1">
        <span class="editable noselect" data-part="name" data-title="Page Name">Home</span><br/>
        <span class="editable noselect" data-part="title" data-title="Page Title">Welcome to my website!</span><br/>
        <span class="editable noselect" data-part="content" data-title="Text">this is a test page! (:</span><br/>
     </div>
     <div class='cp_page' data-pageid="2">
        <span class="editable noselect" data-part="name" data-title="Page Name">Home</span><br/>
        <span class="editable noselect" data-part="title" data-title="Page Title">Welcome to my website!</span><br/>
        <span class="editable noselect" data-part="content" data-title="Content">this is a test page! (:</span><br/>
     </div>

            </div>
    </div>

<button name="save">Save</button>
<button name="add">Add another page</button>

CSS

.cp_page {
    margin-bottom: 16px;
}
.noselect {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}
.editable {
    cursor: text;
}
.editable:hover {
    border: solid black 1px;
}
.editable:before {
    content: attr(data-title) ": ";
}

JavaScript

var pageChanges = {};

$(".post-cnt").on('click', '.editable', function (event) {
    var span = $(event.target), text = span.text();
    var title = span.data('title');
    var label = $('<label/>').text(title + ': ').addClass('noselect');
    var input = $('<input/>').attr('value', text);
    label.append(input);
    label.insertAfter(span);
    span.hide();
    input.select().focus();
    input.one('blur', function() {
        var newtext = input.val();
        var pageid = input.closest('.cp_page').data('pageid');
        if (pageChanges[pageid] === undefined) {
            pageChanges[pageid] = {};
        }
        pageChanges[pageid][span.data('part')] = newtext;
        span.text(newtext);
        input.closest('label').remove();
        span.show();
    }).on('keydown', function(event) {
        if (event.which === 27) {
            span.show();
            input.off('keydown');
            input.closest('label').remove();
        }
    });
});

$('button[name=save]').on('click', function() {
    alert(JSON.stringify(pageChanges));
});
$('button[name=add]').on('click', function() {
    var lastpage = $('.main .cp_page').last();
    var newpage = lastpage.clone();
    var pageid = newpage.attr('data-pageid');
    newpage.attr('data-pageid', +pageid + 1);
    newpage.insertAfter(lastpage);
});