[Seaside] Twitter Bootstrap and Accordion

Mariano Martinez Peck marianopeck at gmail.com
Fri Jul 22 20:51:15 UTC 2016


Looks like I found a way :)

Modifying TBSAccordionItem to the following:

TBSAccordionItem >> renderHeadingOn: html

html tbsPanelHeading: [
html anchor
attributeAt: 'data-toggle' ifAbsentPut: 'collapse';
*onClick: (html jQuery ajax*
* script: [ :s | *
* self isCollapsed: self isCollapsed not.*
* s << JSStream on: '$(''#', self uniqueIdString, ''').collapse()'*
* ]);*
url: '#', self uniqueIdString;
with: self title
]

Added the onClick:  part assuming that #renderBodyOn: html  was already
doing:

self isCollapsed ifFalse: [styleClasses := styleClasses, ' in'].

What do you think?

On Fri, Jul 22, 2016 at 5:38 PM, Mariano Martinez Peck <
marianopeck at gmail.com> wrote:

> Hi Torsten,
>
> Thanks for your accordion! I was taking a look to it and I have a
> question:
>
> I made sure to keep using the same instance of TBSAccordion but the
> problem I have is that when I collapse or expand, that is lost as soon as I
> refresh the page or the containing component, which makes it useless for
> me. So.. is there a way the component itself knows how to memorize whether
> it was expanded or not? I see TBSAccordionItem has a 'isCollapsed'
> instVar but it loooks to be used only at #initialize.
>
> Thoughts?
>
> Thanks!
>
>
>
> On Wed, Jun 3, 2015 at 8:08 AM, Torsten Bergmann <astares at gmx.de> wrote:
>
>> Hi Thomas + Seaside list,
>>
>> I implemented an accordion widget in bootstrap project. One can use a
>> block or
>> a seaside component for the items of the accordion.
>>
>>     accordion := TBSAccordion new.
>>     accordion
>>         add: [:html | html text: 'Some content' ] title: 'A block';
>>         add: [:html | html text: 'Some more content' ] title: 'Item 2';
>>         add: WACounter new title: 'A component'.
>>
>> If required it is possible to do own custom rendering by providing a
>> subclass of
>> TBSAccordionItem and adding this to the accordion using #addItem:
>> instead of using #add:title:
>>
>> A demo is online:
>>
>>   http://pharo.pharocloud.com/bootstrap/browser/Accordion
>>
>> Just update the code to the latest version or grab the latest image from
>> PharoLauncher or CI
>> (https://ci.inria.fr/pharo-contribution/job/Bootstrap/)
>>
>> Hope this helps getting started or use as a template for own experiments.
>>
>>
>> Thx
>> T.
>>
>>
>> _______________________________________________
>> seaside mailing list
>> seaside at lists.squeakfoundation.org
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>>
>
>
> --
> Mariano
> http://marianopeck.wordpress.com
>



-- 
Mariano
http://marianopeck.wordpress.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20160722/6b1d9a54/attachment-0001.htm


More information about the seaside mailing list