Nested Editable Areas

Concrete5 is an amazing tool for CMS but it lacks 1 MUST HAVE functionality for addon developers. Sub areas. What is a sub area? It is a part of a block that creates a new editable region where users can add content. An excellent example of how useful this can be already exists in another addon: Area Splitter by Matogertel. In this addon, it is stupid easy to make tabs, accordion, etc at the cost of all the code Matogertel had to create. It's really cool to use this addons templates because you can literally make an addon that creates editable sub areas or sub blocks by simply adding this code:

<?php   $this->controller->subArea(); ?>

I recently made a template for this addon for each of the available jQuery effects but am sure a giant slew of new addons would emerge with this functionality. Rapidweaver 5, a different CMS currently uses "stacks" where the programmer can easily add a %slice% command which opens a spot for the user to interface and add any additional "stack". The combination of effects and functionality the user experiences is truly amazing. (You could literally place a jQuery fadeIn effect so that your accordion or your ecommerce eases in).

Please, I beg of you, add subAreas to Concrete5 like Matogertel did with his Area Splitter addon.

View Replies:
JohntheFish replied on at Permalink Reply
I used a bit of jQuery as a hacky soultion to that problem. Could probably be cleaned up to use <div>s instead of table cells to split a column. Could also use better css rather than direct styles to get some column separation. But it works as-is.

1. For the blocks in the area, go into 'Design' and give them classes of 'col1-blocks' or 'col2-blocks'.
2. Then, beneath the blocks, add an HTML block that does the dirty work with a bit of jQuery.

<table id="split-into-cols"><tr>
<td style="width:50%;padding-right:10px;"></td>
<td style="width:50%;padding-left:10px;"></td>
<script type="text/javascript">
$(document).ready(function() {
  if (CCM_EDIT_MODE){ 
    $("#split-into-cols").find("td").first().append('SCRIPT INSIDE - EDIT AT EXTREME PERIL'); 
  } else { 

PS. In last week's Totally Random Andrew and Franz mentioned something about stacks for 5.5, so you may get your wish.
JohntheFish replied on at Permalink Reply
Maybe I should package this up into an add-on?
Lepozepo replied on at Permalink Reply
I'm trying to break up the area splitter addon so that everyone can use it as a framework in the mean time I guess. I really hope they do add stacks. It would make addons amazing and stupidly intuitive for users.
jordanlev replied on at Permalink Reply
Hi, I don't know if this is applicable to your situation, but just want to make sure you're aware that the area splitter functionality has been included in the Concrete5 core system for about a year now -- it's called "Area Layouts" (or just "Layouts"). If you edit a page and click on an area (for example, "Add to Main"), then choose "Layouts" from the popup menu, it lets you put these into your page.

Instead of trying to shoehorn this into a block, it might make more sense to have your users just create an area layout and put their blocks in there.
Lepozepo replied on at Permalink Reply
Well, what I'm trying to do is have the user add a jQuery effect block where all the code for a fadeIn on page load is programmed. Now the next step for the user is to place any other block inside the div so that the other block, be it an accordion or the ecommerce addon or just plain content, fades in. I was looking through the documentation but I'm honestly a total n00b for php so I don't know how I could use layouts for this. The area splitter has additional functionality to just subdividing areas like layouts do, you can also create "layouts", the best one is the accordion layout because it adds an accordion that you can expand infinitely and add any other block to it. It definitely simplifies things and makes things more intuitive for users I believe. Still, how would you do it with the layout feature?
jordanlev replied on at Permalink Reply
I see. Yeah, the layouts won't help with that. I wish there were some way to attach a "name" to each block so you could just have some javascript that took every block and put it in a tab or accordion structure, and use this hypothetical "block name" as the tab title -- but alas there is not.

What I've done in the past is make custom blocks (using Designer Content) for the contents of the tabs, having a field for tab title and tab content, then in the template it pulls out the name from each block controller. But this is a bit advanced and requires a good understanding of PHP. It also restricts you to one kind of block in all the tabs.

Another way I've seen it done (and this is used by several addons in the marketplace that do tabs or accordions) is to make a global scrapbook, and each block in the global scrapbook serves as a tab (and scrapbook blocks *do* have names so this can be used for the tab names). But this is not an optimal editing experience in my opinion -- it's better to edit things on the page itself then to have to go to the dashboard scrapbook manager.

Another solution that might work, although it's a little hacky, is to create a custom block that serves the purpose of collecting the tab/accordion names. The block doesn't actually display anything but just provides the user with a textbox to enter tab names into. Or you could have one block per tab name, so the blocks in the area would alternate between a special "title" block and then the actual content.

Wish I had a better answer for this, but unfortunately there's no perfect way to do it (so your idea to use area splitter may actually be the best one).
Lepozepo replied on at Permalink Reply
Or hopefully we can stir up some attention and pray the functionality is added to a future version of Concrete5 right? :D Man, the Area Splitter is super intense, I keep breaking my sites, lol.
kirkroberts replied on at Permalink Reply
There are blocks in the Marketplace that turn Layouts into either an accordion or tabs.
Or, why not just continue using the Area Splitter block if that fits the bill?
Lepozepo replied on at Permalink Reply
Oh, I didn't know that. I just saw Easy Accordion and the way it works, I don't know how easy it is to develop something like that. It's still not intuitive enough for the user in my opinion though. The intended workflow for users I believe is click>add>edit not click>add>add again>edit. I mean, I get how to do it and all, but if I had to show one of my clients how to do it it would certainly look messy. So yeah, I think up to know using layouts could very well be the best choice to develop new addons with similar functionality to an accordion or tabs but it is still not the best. Like I said, I'm not trying to make an accordion addon, I'm trying to just make a very simple jQuery fadeIn that can be used on any div. At the moment I already have the template made for the Area Splitter and works perfectly, just add the area splitter, select fadeIn, and anything you put inside will fade in. The workflow rocks but the programming required is overwhelming when it shouldn't be, lol.
kirkroberts replied on at Permalink Reply
Agreed on workflow!

In my client work I'm finding that a big goal is to TAKE AWAY flexibility with a mind to make things simpler with less of a leaning curve. Having too many choices can be a bad thing. Too many steps is DEFINITELY a bad thing :-)

Teaching a client how to use the Layout tool? I'd rather not have them have to do so many things... or have that much power to make the site ugly. The client usually doesn't have design skills. So I'm starting to disable both the Layout and Design options.

I just implemented this simple tutorial to create some tabs (didn't use jQuery UI, though):
It isn't perfect, but I like it better than using Layouts.

EDIT: using the tutorial, reordering the tabs is probably too cumbersome for the average client to do... but I think that's an issue with using a Layout also.
Lepozepo replied on at Permalink Reply
I followed your tutorial the first time around before finding the addons for making an accordion. I liked it ^_^ and it helped me understand more. While it may be cumbersome, the tutorial rocked :D.
JohntheFish replied on at Permalink Reply
Thanks for the tip. C5 continues to surprise me. When solving a new challenge we all tend to reach for whatever technology we are most familiar with, hence my tendancy to tweak what C5 outputs with a bit of jQuery.

I just had a play with the built in layouts and I am not sure I could have achieved exactly the same as I did with jQuery, but could have done something pretty close with the benefit of a more WYSWYG editing experience. I will have to keep them in mind for next time I need to split the display.

Going from the descriptions of many of the area splitting addons (be it menus, accordions, tabs, expanders .....)(I have not used most of them), many (but not all) seem to map whatever they are doing with blocks 1:1, where in many cases I would like to have a more flexible 1:many mapping like I now understand the ones that use layouts do. This could just be unclear descriptions, so a perceived issue rather than a real issue.
Lepozepo replied on at Permalink Reply
Well you're right, the functionality is there through layouts, it's just not as good or as intuitive as it could be for a user that doesn't want to touch code. I'm getting closer to getting the framework done, yay!