Home/ Questions/Q 930101
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T20:16:54+00:00

I’m coding a templating system that is supposed to support easily converting any old

  • 0

I’m coding a templating system that is supposed to support easily converting any old html/xhtml form into a format that can be used with my system (it’s a template system for my cms).

Here’s what I’m aiming for:

  1. The user clicks a “Zone Define” button for example: “Content”, “Sidebar”, etc
  2. When the user hovers any elements they become get a border or are highlighted somehow
  3. If the user clicks that element it is modified to have a class like ‘zone-content’
  4. The page sends the new html to the script via ajax

Is there any already existing libraries that would facilitate something like this?

UPDATE:

I ended up using the answers below and hacking together a jquery solution (we’re going to use jquery in the rest of the project). It’s a bit ugly and hacky but it works
http://ilsken.com/labs/template/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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!

    • 0