Hi Markus,

Sometime in the future, could you consider developing boxes to be (optionally) collapsible? ie. where the administrator could define a box to be collapsed/expanded by the user. When collapsed, the box would simply show its header etc, with an icon which would allow the user to expand the box to show its contents.

With the many box/content options available in iWiccle, pages will undoubtedly become somewhat long (like some of mine). Collapsible boxes would add a very swish finishing touch.

...especially since you removed the 'Top of Page' button

Sure thing, it's easy enough a feature to add in. I'll add it for the next version we have database revisions on. I suppose a dropdown showing options for "None/Open/Collapsed" (and some more?) for each unit should do the trick?

Otherwise if you're interested in a simple hack to accomplish this involving use of the "Parameters" field, let me know. =)

Adding a "to top" button is easy enough of course. Just add a link with <a href="#top">To Top</a> (or with an image instead of text) and place it anywhere you want it to go (likely towards the end of skin_wrappers.php).

If you could produce a 'hack' using the parameters field to collapse boxes, that's really all that's needed (in my mind). I think that many of us would use it immediately.

Thanks for the Top of Page. I intend to use that as well! 

Here's how you do it. Open up skin_units.php, and go to the unit called rounded (for example). In there, find a place where it reads:

        <td class="rounded_mid_center">
                [[UNIT_CONTENT]]
        </td>

And change that to read as follows:

        <td class="rounded_mid_center">
            <#IF:NOT_EMPTY:DISPLAY#>
                <div class="text_italic text_small indent_10" style="cursor: pointer; border: 1px solid #ddd; margin: 5px;"  onclick="showHide('content_unit_[[UNIT_ID]]'); openClose('opener_unit_[[UNIT_ID]]'); if (document.getElementById('opener_unit_[[UNIT_ID]]').title=='c') { writeInner('more_unit_[[UNIT_ID]]', 'more'); } else { writeInner('more_unit_[[UNIT_ID]]', 'less'); }">
                    <img src="templates/{$core['init']['default_skin']}/{$core['skin']['skin_image_folder']}/open.png" alt="Open and Collapse" title="" id="opener_unit_[[UNIT_ID]]" style="margin-right: 2px; margin-bottom: -2px;" />
                    Click to view <span id="more_unit_[[UNIT_ID]]">more</span> &raquo;
                </div>    
                <div id="content_unit_[[UNIT_ID]]" style="[[DISPLAY]]">
                    [[UNIT_CONTENT]]
                </div>
            </#>
            
            <#IF:EMPTY:DISPLAY#>
                [[UNIT_CONTENT]]
            </#>
        </td>       

Heck that was fast!!!

I'm going to try it right now.

Thanks a million, Markus.

You can place the above snippet into all units you wish to have this feature in. It's inactive and transparent until a "display" parameter is given. When you enter "display=display:none;" into the Parameters field, the unit will be collapsed and a message left in place.

In the event that you don't want to copy it to each unit template individually, you can also just enter it to the beginning of the file once under a variable like $collapser, and then just add {$collapser} to wherever you want the HTML snippet copied in all your unit templates. Like this:

$collapser = <<
stick the codes in here...
WIC;

And then replace the default [[UNIT_CONTENT]] tag with the following snippet for each unit you want this feature in:

<td class="rounded_mid_center">
     {$collapser}
</td>

You can edit the "view more" message in the code as you wish. Change for the writeInner() snippet to control how the text is changed when you click. As long as you keep the element IDs and the scripts in place, you can modify the look to be whatever you wish.

In practice, it looks like this (see live at old demo front page):

And to complete things, an explanation of what's happening above.

Unit Parameters: Every parameter entered for an unit is available for the unit templates as a tag, and can also be evaluated with the templating script. (More on Unit parameters). In this case, we have a new parameter called "display" which is available under the [[DISPLAY]] tag.

Conditional Expressions: Here you see two of the basic conditional expressions of Wiccle Templating Script in action. They simply check whether a variable with that name is defined and populated ("not_empty") or undefined/zero-length ("empty"). If "display" parameter is empty, the regular unit code is displayed. If it's in use, the alternative collapse-code will be displayed.

JavaScript Functions: The bundled writeInner() function is a shortcut for inserting text or HTML code to any HTML container (such as span or div) containing an ID. The syntax is writeInner('element_id', 'Your content');.

The other two common javascript functions used are showHide() and openClose(). showHide shows a div if it's hidden, and hides if it's visible. (Also: justShow / justHide, which go only one way.) You could, for example, add an id="" tag for the snippet containing the "click to view more" text, and add a justHide() to the click actions to hide it when clicked (instead of changing to "less"). openClose just controls the open/collapse graphic. There's lots more useful and usable you will find skimming through the /javascripts folder for templates for mini-mods like this.

Unit Identifier Use: Since each unit that's opened or collapsed requires a unique identifier to be individually available for the javascript, we are using the [[UNIT_ID]] tag, which corresponds to the unit's unique database number, and will be different for each unit. This is a tag that comes in handy for many purposes.

In general, things like this are easy enough to produce. This one is now a feature in the next release. Don't be shy with requests if you have more ideas like this!

To complement this feature, you could for example add a unit_preprocessor() into your modules' class extension files, and add in a code that takes the incoming unit content, strips it of formatting and truncates it into the first 250 characters, and returns that as a part of the truncated unit under a variable like "summary". You could then also control summary/no-summary display with another parameter. The above idea would make around twelve lines of code --- let me know if there's interest.

Remind me to talk about all the available and customizable pre- and post-processors one of these days. (Can you tell I have a serious deal of congested and outcoming documentation in my system again?)

Thread moved to Install and Modification, as we got to business straight away.

Markus,  You are indeed a constant source of amazement!

This works perfectly, looks great and a is great addition to iWiccle. I believe that many users will benefit from this mod.

Many, many thanks!!! 

Glad it's working for you there!

There's a lot of stuff that's really quite easy to add in if there's interest. With 1.20, we now have a solid platform and there are countless more possibilities over 1.11 for what could be derived from the existing code. I just can't think of and work on them all at the same time. Many future upgrades and "new" features will simply be stuff we poke out of the current engine.

Speaking of poke and the strange and surprising, here's a sneak peek for a powertool add-on you will get to play with on the first of Q2. Below is a possible shell navigation session log in iWiccle BASIC v1. Yes, it's your very own iWiccle Basic AJAX shell coming up for quick and customizable no-click access across your site and its features!

Collapsible boxes are a standard feature as of iWiccle 1.21, usage as discussed above.