Re: Twitter Bootstrap and Accordion

Mariano Martinez Peck <[email protected]>
Newsgroups gmane.comp.lang.smalltalk.squeak.seaside
Message-ID <CAA+-=mVTWQeJk9cAVFDoXfkSSYhEpKQeKD1G5vWkmTxLigB2cw@mail.gmail.com>
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 <
[email protected]> 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 <[email protected]> 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
>> [email protected]
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>>
>
>
> --
> Mariano
> http://marianopeck.wordpress.com
>



-- 
Mariano
http://marianopeck.wordpress.com

_______________________________________________
seaside mailing list
[email protected]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
lmpx.com only provides a reader for public news (NNTP) servers. It is not affiliated with the servers or forums shown here and is not responsible for the content of articles, which is written by their respective authors.