I personally am a fan of ExtJS (now Sencha), and this is fairly simple and straightforward to do using that framework. This is how I'd do it:
<body>
<button id="content_define" class="zone_define">Content</button>
<button id="sidebar_define" class="zone_define">Sidebar</button>
<div id="template">
<!-- put your template here -->
</div>
</body>
<script type="text/javascript">
Ext.onReady(function() {
Ext.select('button.zone_define').on('click', function(ev, target) {
ev.stopEvent();
// this listener is bound to two buttons, determine which one was pressed
var zone = target.id.split('_')[0]; // 'content' or 'sidebar'
// add a click listener listener to the template so that when an element within is clicked,
// an Ajax request is initiated
var template = Ext.get('template');
template.addClass('targetable').on('click', function(ev, target) {
template.removeClass('targetable');
// this part is optional, in case the user clicks an <a> or <img> element,
// you may want to get the block element containing the clicked element
var target = ev.getTarget('div'); // or ul, table, p, whatever
// invoke zone_capture on the click target (or containing block element)
zone_capture(zone, target);
}, window, {single: true});
// the {single: true} part removes this listener after one click,
// so the user has to go back and press the button again if they want to redefine
});
// this is the code to do the ajax request
// and also add a class to the target element
function zone_capture(zone, target) {
// first, remove the class from elements which are already defined as this zone
Ext.select(String.format('#template .{0}_zone', zone)).removeClass(zone + '_zone');
// now add that class to the target
target.addClass(zone + '_zone');
// do the POST
Ext.Ajax.request({
method: 'POST',
url: '/region/define',
params: { // these are the params POSTed to your script
template: Ext.get('template').dom.innerHTML
}
});
}
});
</script>
I would also add the following CSS rules for hovering effects, etc.
#template.targetable:hover div { /* add div, p, table, whatever */
border: 1px solid #f00;
}
#template.targetable {
cursor: crosshair;
}
I would call this pseduo-code, but the idea should be enough to get you started. Since you are dealing with user input, you will have a lot of corner cases to check for before you can call this production-ready. It sounds like a cool way to define the template, good luck!
