Yesterday Sean mentioned that I could apply an "accordian effect" to the 3 sections in the left sidebar of "Site Content": http://blogs.grf-design.com/archives/2006/04/accordion_effec.html

I assumed that we wanted to allow multiple sections to be open at a time, so I started experimenting and had fun playing around with it late into last night. :)

Using a combination of Effect.Morph and Effect.Blind Up, I got
smooth resizing working quite nicely by making these changes:
http://www.elijahlofgren.com/silverstripe/patches/Left-Frame-Sections-Smooth-Resize-cms-gsoc-r37367.patch

However, Effect.Morph (quite an amazing thing) requires
"script.aculo.us V1.7 and later" so I used Prototype 1.5.1.1 and script.aculo.us 1.7.1 beta 3: to try it out.

Here is a demo where you can actually click the white "+" and "-" icons to try it. I think the effect is quite pleasing instead of the current jerkiness:
http://www.elijahlofgren.com/silverstripe/demos/smooth-sidebar-resizing.html

Note: The demo works in Safari 3, Firefox 2, but not in IE6 or IE7. Also, the demo Admin panel is not functional.

If you guys think it is a good idea a nice effect, I will look into upgrading Prototype and script.aculo.us and getting it working in IE.

Let me know what you think! :)

Thanks,

Elijah

Hi Elijah,

This looks fantastic - a major improvement over the past implementation :-)

Re using more modern version of Prototype and script.aculo.us, upgrading these is no trivial exercise. I've asked Ingo to give you some guidance around this as we've looked into this in the past.

first of all, looks awesome - you're really bringing silverstripe forward, and we're all excited to merge these changes back and amaze our clients and the community with the new flashy interface :)

i've just downloaded accordion.js from the original url, it just uses the scriptaculous v1.0 API:
http://wiki.script.aculo.us/scriptaculous/show/Effect.Parallel
http://wiki.script.aculo.us/scriptaculous/show/Effect.SlideDown

where did you implement Effect.Morph? in which file did you save the accordion code in your example? can't find accordion.js in there...
do we really need the morph-effect, or can we achieve this with "traditional" scriptaculous-animation as well?

migrating to prototype v1.5.1 is a huge task in silverstripe, as we customized prototype v1.4rc1 quite heavily. while this will happen at some point (i've already started), there's too much side-effects and testing involved to upgrade just for having a single effect working :)
in the same run, we will upgrade scriptaculous to the latest version.

in case you really need morph, you can try to separate the functionality out of scriptaculous v1.7 and put it in prototype_improvements.js.

> first of all, looks awesome - you're really bringing silverstripe forward, and we're all excited to merge these changes back and amaze our clients and the community with the new flashy interface :)

Thanks! I'm enjoying it. :)

> i've just downloaded accordion.js from the original url, it just uses the scriptaculous v1.0 API:
http://wiki.script.aculo.us/scriptaculous/show/Effect.Parallel
http://wiki.script.aculo.us/scriptaculous/show/Effect.SlideDown

I didn't actually use accordion.js at all. I just the idea to use Effect.Blind Up from that.

> where did you implement Effect.Morph? in which file did you save the accordion code in your example? can't find accordion.js in there...
do we really need the morph-effect, or can we achieve this with "traditional" scriptaculous-animation as well?

As shown in the patch linked to above, I change this line in cms/javascript/SideTabs.js from:
this.tabs.linkedPane.style.height = eachHeight + 'px';
to:
this.tabs.linkedPane.morph('height: ' + eachHeight + 'px;');

Elijah

The accordion effects are cool, but I think they're a bit slow. You probably want 0.3sec - 0.5sec for the effect, or it gets in the way of people using the system.

I think it would be perfect if it was slightly faster. It's a welcome thing, considering at the moment it's very jagged when you click the tabs.

Great work though Elijah, and I'm glad to see you're enjoying it. :-)

Cheers,
Sean

> The accordion effects are cool, but I think they're a bit slow. You probably want 0.3sec - 0.5sec for the effect, or it gets in the way of people using the system.
> I think it would be perfect if it was slightly faster. It's a welcome thing, considering at the moment it's very jagged when you click the tabs.

I'll see what I can do. I agree that it needs to be fast. I'll experiment with setting the resize effect duration to a shorter time.

I didn't work on this today, because I worked on moving the 'Delete' and 'Move Files' buttons in the File & Images again. Feedback requested:
http://www.silverstripe.com/google-summer-of-code-forum/flat/1607?showPost=1791#post1791

Thanks for all the time you guys have put into helping me with all my questions! :)

Good night,

Elijah

Today I found Effect.ReSize, which eliminated my need for Effect.Morph:
http://wiki.script.aculo.us/scriptaculous/show/Effect+Resize+Extension
I was able to easily modify it to work with our current version of Prototype. :)

In order to make it faster, I made it only apply Effect.ReSize when a section is closed or opened, not when the page is loaded or resized. In addition, I set the effect duration to 0.4 sec. Let me know if you think that should be changed.

Here are the changes I've made to add smooth resizing to the sections:
http://www.elijahlofgren.com/silverstripe/diffs/Left-Frame-Sections-Smooth-Resize-with-Effect-ReSize-cms-gsoc-2007-06-28-2250.diff

Here is a new demo, showing the faster resize effect:
http://elijahlofgren.com/silverstripe/demos/fast-smooth-sidebar-resize.html

I have tested with Firefox2, IE6, IE7, and Safari 3 and it seems to work well in each of those browsers.

What do you think?

If you guys think this is good, I will clean up the code and plan on committing it tomorrow.

Good night,

Elijah