Module: Ajax Toggle Folders

All files from this thread

File Name	File Size		Posted by	Date
ajax_toggle_folders-0.0.1.tar.bz2	7.1 KB	open | download	Giam Teck Choon	09/12/2011	Read message
ajax_toggle_folders-0.0.1.tar.gz	6.7 KB	open | download	Giam Teck Choon	09/12/2011	Read message
ajax_toggle_folders-0.0.1.zip	9.5 KB	open | download	Giam Teck Choon	09/12/2011	Read message

This is my first module so I am not sure whether posting this in this forum is right and whether is the code is secure or according to phorum standard. Use them at your own risk as I am not responsible for any damages caused. You have been warned!

========== Brief Description ==========
This module is based on the ideas of the following modules:

- Collapsible Folders (http://www.phorum.org/phorum5/read.php?62,138406)
- AJAX style Mark Read Module for Emerald (http://www.phorum.org/phorum5/read.php?62,142855)

This module allows users to toggle (collapse/expand) forum folders with ajax
calls without requiring a page refresh.  Expand/Collapse state are saved except
for guest users.

Custom profile field name mod_ajax_toggle_folders_list will be created
when you click this module settings in Phorum Admin.  This module settings
also let you change the used YUI version and YUI combo URL.  Currently this
module only tested and works in YUI version 2.

========== Credits ==========
Some codes are copied and modified from the modules Collapsible Folders and
AJAX style Mark Read Module for Emerald.  Thanks to both modules author(s).

========== Installation Instructions ==========
1. Unpack the archive.

2. Move the directory "ajax_toggle_folders" to the directory "mods" within
   your Phorum installation.

3. Login as administrator in Phorum's administrative interface and go to the
   "Modules" section.

4. Enable the module "Ajax Toggle Folders".

5. Go to the settings page of the Ajax Toggle Folders module to configure the
   module.

6. Edit the index_new.tpl file for your template.

   See emerald-index_new.tpl.patch file provided about how to patch your 
   template index_new.tpl file.

   If you prefer to edit on your own, please read emerald-index_new.tpl.patch
   to get an idea.  Manually edit index_new.tpl steps as below:

6.1. Go to line 19: <th align="left">{LANG->LastPost}</th> and replace with the
   following:

{IF LOGGEDIN}
    {IF LANG->ajax_toggle_folders}
        {IF FORUMS->COLLAPSE}
            <th align="left">{LANG->LastPost} <a href="{FORUMS->URL->EXPAND}" style="float:right;" id="togglefolder_{FORUMS->forum_id}"><img src="{LANG->ajax_toggle_folders->Icon->Expand}" title="{LANG->ajax_toggle_folders->Expand}"></a></th>
        {ELSE}
            <th align="left">{LANG->LastPost} <a href="{FORUMS->URL->COLLAPSE}" style="float:right;" id="togglefolder_{FORUMS->forum_id}"><img src="{LANG->ajax_toggle_folders->Icon->Collapse}" title="{LANG->ajax_toggle_folders->Collapse}"></a></th>
        {/IF}
    {ELSE}
        <th align="left">{LANG->LastPost}</th>
    {/IF}
{ELSE}
    {IF LANG->ajax_toggle_folders}
        <th align="left">{LANG->LastPost} <a href="#{FORUMS->forum_id}" style="float:right;" id="togglefolder_{FORUMS->forum_id}" onclick="togglefolder('togglefolder_{FORUMS->forum_id}'); return false" title="Click to Show/Hide"><img src="{LANG->ajax_toggle_folders->Icon->Collapse}" title="{LANG->ajax_toggle_folders->Collapse}" /></a></th>
    {ELSE}
        <th align="left">{LANG->LastPost}</th>
    {/IF}
{/IF}

6.2. Locate the following lines:

             </tr>
         {ELSE}
             <tr>

   Replace with the following:

       	     </tr>
       	 {ELSE}
{IF LOGGEDIN}
    {IF LANG->ajax_toggle_folders}
        {IF FORUMS->COLLAPSE}
           <tr {IF FORUMS->parent_id} id="togglefolder_{FORUMS->parent_id}_{FORUMS->forum_id}" style="display:none;" {/IF}>
        {ELSE}
           <tr {IF FORUMS->parent_id} id="togglefolder_{FORUMS->parent_id}_{FORUMS->forum_id}" {/IF}> 
        {/IF}
    {ELSE}
        <tr>
    {/IF}
{ELSE}
    {IF LANG->ajax_toggle_folders}
        <tr {IF FORUMS->parent_id} id="togglefolder_{FORUMS->parent_id}_{FORUMS->forum_id}" {/IF}>
    {ELSE}
        <tr>
    {/IF}
{/IF}

That is all :)

First of all: nice job in combining the ideas and thanks for sharing the module!

The only question that I have is why you have used YUI here. Probably the answer is simply that you are used to it. Phorum provides Ajax calls implemented via hooks and a client js library to talk to those calls. Futhermore, the jQuery library is included by default, so for DOM updates, the jQuery library can be used.

Loading YUI feels like too much extra overhead, unless you are using some specific feature that isn't available from jQuery.

---

Maurice Makaay
Phorum Development Team
my blog linkedin profile secret sauce

First of all, many thanks for your suggestion.

As you have guessed correctly. I am more familiar with YUI and instead of learning Phorum coding API etc. and jQuery I would personally prefer to use what I am familiar ;) Learning phorum API etc. with jQuery would take longer time to implement such module for my own forum and that is why :p

When I have time, I will try to learn jQuery and see what I can come up with... ...

Again, many thanks!

Kindest regards,
Giam Teck Choon

Giam Teck Choon, thanks for an excellent module.

Is there anything that can be done to make this compatible with the Favorite Forums module?

With both Ajax Toggle Folders and Favorite Forums, I can no longer collapse any folders. Which module would need to change in order for things to work? Or do I need to give up using one of the modules?

Sorry for this late reply.

Unfortunately I haven't have time to look into the other module codes you mentioned hence unable to comment. From now, I think you can check your index_new.tpl as whether did you missed something for both modules when you combined? Example, if both modules editing part in index_new.tpl are in, you can test one module at a time. If both modules are working when enabled at a time then I think both modules mostly will work when you enable both?

Thanks.

Kindest regards,
Giam Teck Choon