Collapsible settings per user

Exactly.
For example i have some div's that the user has chosen to hide. I want to keep them hidden until the user decides that he wants them expanded.
The state can be changed when the user clicks the toggle button, through an ajax request that will store (maybe on the user object?or on a table?) the setting.

Why do you prefer a cookie over a database record? For performance issues?
And what expiration time do you think is the most suitable for a cookie like that?

But what happens if the user clears browser cookies? Or he logins from a different pc?
He loses his settings and has to re-setting them all again from the start. And if there are many divs this is annoying for the user.

Is it possible to execute the queries only if the cookie is not present?

I re-organized my thoughts and i am thinking something like that:

A div has been wrapped by the ctools-collapsible classes.
Firstly we checked if there is a cookie, for example a cookie named ctoos-collapsible-uid, where uid is the current users' uid.

If there is, we read the cookie, and set the divs accordingly.
else we check for a record in our database.
If a record exists we create a cookie and set the div accordingly.
else we continue as it is.

So we create a cookie for each user, which he/she wants their div to be opened/closed.

So when a user clicks on the toggle area:

An ajax request updates the database record with the user's setting and if a cookie exists we updated it, or we create a new cookie.

So in that case we read the database *only* if there isn't a cookie and we use the cookie for the rest of the users' session.

Perhaps i have some bugs in my thoughts.

I ll tested it and post my results asap.

Thank you very much,
apanag

I tested it and it is working great.
One question though:

Why you wrote two theme functions? You can merge them in one.

For example:

function theme_ctools_collapsible($handle, $content, $collapsed = FALSE, $remember = FALSE) {
  ctools_add_js('collapsible-div');
  ctools_add_css('collapsible-div');

  $class = $collapsed ? ' ctools-collapsed' : '';
  $class_remember = $remember ? 'ctools-collapsible-remember' : ''; 
  $output = '<div class="ctools-collapsible-container' . $class . $class_remember .'">';
  $output .= '<div class="ctools-collapsible-handle">' . $handle . '</div>';
  $output .= '<div class="ctools-collapsible-content">' . $content . '</div>';
  $output .= '</div>';

  return $output;
}

Indeed i forgot about the $id but you can overcome the problem with an if function.
But i see your point. I agree that keep things clean and simple is a much better solution, than have one function for multiple things. (OOP related :-D )

One last question: is it possible for the API to add a function for other html elements? such as tables?

I need this API for making collapsible containers for advanced_forums: http://drupal.org/node/291084

As far as a user specifies the correct classes and has the structure you specified, it is much more flexible for other elements to have collapsible functionality.

Thank you,
apanag

Hello,

merlinofchaos i followed your instructions but i dont get it how it is supposed to work.
I am using the following code:

<table id="table-1" class="ctools-collapsible-remember ctools-no-container ctools-collapsible-container">
  <thead>
    <tr><td class="ctools-collapsible-handle">Title</td></tr>
  </thead>
  <tbody id="table-1-content" class="ctools-collapsible-content">
    <tr><td>Collapsed Area</td></tr>
  </tbody>
</table>

I append to id of the container the id of the handle but it still doesnt works.
I tested also on divs without any success.

Is something i am missing here?

I even try this without any success:

print theme('ctools_collapsible_remembered', 'apanag', 'title', 'text', FALSE);

I added it on a custom block, but when i loaded it, nothing appeared.

One silly question:

Isn't supposed ctools_collapsible_theme to return an array?

After i emptied my cache, the block appears correctly.

FInally i got it working with the following changes:

From:

Drupal.behaviors.CToolsCollapsible = function(context) {
  $('div.ctools-collapsible-container:not(.ctools-collapsible-processed)', context)
    .each(Drupal.CTools.bindCollapsible)
    .addClass('ctools-collapsible-processed');
}

I changed it to

Drupal.behaviors.CToolsCollapsible = function(context) {
  $('.ctools-collapsible-container:not(.ctools-collapsible-processed)', context)
    .each(Drupal.CTools.bindCollapsible)
    .addClass('ctools-collapsible-processed');
}

So the selectors doesnt always looks for div, but for any html elements that has the requested class.

And i changed:

var content = $($container.attr('id') + '-content');

To

var content = $('#'+ $container.attr('id') + '-content');

To select the id of the content. With those changes it works like a charm.

apanag

One small fix. You deleted the dot also. So it doesnt select the classes:

From:

$('ctools-collapsible-container:not(.ctools-collapsible-processed)', context)

To:

$('.ctools-collapsible-container:not(.ctools-collapsible-processed)', context)

Thanks again for your work.

Hello again merlinofchaos.

The last commit works great except of a small bug with tables related.
You use the slideToggle effect to hide and show the collapsed area. The slideToggle effect overrides the default table class providing a "display:block" instead of "display: table-row-group".
I added an if to check whether or not it is a table element. If it is a table element i use toggle effect, instead of slideToggle.

apanag

I forgot to changed the status.

1) My mistake.
2) Changed.