You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@jspwiki.apache.org by Gary Kephart <ga...@pobox.com> on 2021/09/11 18:34:34 UTC
hiding/displaying list items based on cookie values
Problem:
I have a website that is a reference website for a series of books. It
has spoilers for the books all over the place. New readers of the series
would like to visit the site but avoid spoilers. Most of these spoilers
are in list items.
Solution:
What I'd like to do is to have a Settings page that contains checkboxes
for each book in the series. Checking or unchecking a book sets the
cookie value for that book. I would also like a CSS class for each book
and have that CSS class change based on the cookie value for that book.
The value would change from "display" to 'hidden" based on that value.
Example:
There's a checkbox for the book "The Eye of the World" and that changes
the value of the "teotw" cookie and one for "The Dragon Reborn" that
changes the values of the "tdr" cookie. The raw HTML might look like this:
<li class="teotw">Here's something that happened to Rand (TEotW,Ch4)</li>
<li class="tdr">Here's something else that happened to Rand (TDR,Ch25)</li>
Questions:
1. Is there any way to set the CSS class of individual list items?
Right now, I just see "*" and "#" for list items, with no way to add
a CSS class to it. This might kill the whole idea right here.
2. I've followed the instructions to create a form using FormOutput,
etc, and it looks like I'll need to create some plugin, like
SpoilerPlugin, to handle the form submission by taking the checkbox
values and setting the appropriate cookies. Does this sound correct?
3. Is there a better way to do this in JSPWiki, or is it just not possible?
Thanks,
Gary
--
Gary Kephart
Facebook: gary.kephart
Twitter: @garykephart
"The penalty that good men pay for not being interested in politics is to be governed by lesser men." -- Plato.
Re: hiding/displaying list items based on cookie values
Posted by Dirk Frederickx <di...@gmail.com>.
Gary,
You need to modify the collapsible behavior JS code at
.../jspwiki-war/src/main/scripts/behaviors/Collapsible.js
Check out the function buildCollapsibleList(..).
When it matches an "ol" element, it adds a .closed class to the li parent
element.
Hope this helps,
BR,
dirk
On Tue, Sep 14, 2021 at 11:32 PM Gary Kephart <ga...@pobox.com>
wrote:
> You mentioned:
>
> By default the ordered-list (#) inside a %%collapse style are closed
> (hidden) by default.
>
> Does this also apply to unordered lists? If not, what's the JS to change
> that?
>
> Thanks,
> Gary
>
> On 9/12/2021 7:49 AM, Gary Kephart wrote:
> > Hmm. A bit more clunky, in that the readers will have to do this on
> > every page instead of just one, but yeah, we could do it that way.
> >
> > Thanks,
> > Gary
> >
> > On 9/11/2021 11:43 PM, Dirk Frederickx wrote:
> >> Hi Gary,
> >>
> >> Tx for using JSPWiki !
> >>
> >> For this use-case you may want to explore the use of %%collapse (for
> >> collapsible lists) or %%collapsebox.
> >>
> >> %%collapse
> >> # Book Title 1
> >> ## Spoiler content 1
> >> # Book Title 2
> >> ## Spoiler content 2
> >> /%
> >>
> >> By default the ordered-list (#) inside a %%collapse style are closed
> >> (hidden) by default. When clicking the list bullets they become
> >> visible.
> >> The status open/close of the item is saved in a page cookie, which
> >> you can
> >> reset if needed in the UserPreferences.
> >>
> >> %%collapsebox-closed
> >> !Book Title 1
> >> Spoiler content 1
> >> /%
> >>
> >> Collapseboxes have a similar behaviour (states are saved in a page
> >> cookie)
> >>
> >> See:
> >> https://jspwiki-wiki.apache.org/Wiki.jsp?page=CollapsibleList,
> >> https://jspwiki-wiki.apache.org/Wiki.jsp?page=Collapsible%20Box.
> >>
> >>
> >> BR,
> >> dirk
> >>
> >>
> >>
> >> On Sat, Sep 11, 2021 at 8:34 PM Gary Kephart <ga...@pobox.com>
> >> wrote:
> >>
> >>> Problem:
> >>> I have a website that is a reference website for a series of books. It
> >>> has spoilers for the books all over the place. New readers of the
> >>> series
> >>> would like to visit the site but avoid spoilers. Most of these spoilers
> >>> are in list items.
> >>>
> >>> Solution:
> >>> What I'd like to do is to have a Settings page that contains checkboxes
> >>> for each book in the series. Checking or unchecking a book sets the
> >>> cookie value for that book. I would also like a CSS class for each book
> >>> and have that CSS class change based on the cookie value for that book.
> >>> The value would change from "display" to 'hidden" based on that value.
> >>>
> >>> Example:
> >>> There's a checkbox for the book "The Eye of the World" and that changes
> >>> the value of the "teotw" cookie and one for "The Dragon Reborn" that
> >>> changes the values of the "tdr" cookie. The raw HTML might look like
> >>> this:
> >>>
> >>> <li class="teotw">Here's something that happened to Rand
> >>> (TEotW,Ch4)</li>
> >>> <li class="tdr">Here's something else that happened to Rand
> >>> (TDR,Ch25)</li>
> >>>
> >>> Questions:
> >>>
> >>> 1. Is there any way to set the CSS class of individual list items?
> >>> Right now, I just see "*" and "#" for list items, with no way
> >>> to add
> >>> a CSS class to it. This might kill the whole idea right here.
> >>> 2. I've followed the instructions to create a form using FormOutput,
> >>> etc, and it looks like I'll need to create some plugin, like
> >>> SpoilerPlugin, to handle the form submission by taking the
> >>> checkbox
> >>> values and setting the appropriate cookies. Does this sound
> >>> correct?
> >>> 3. Is there a better way to do this in JSPWiki, or is it just not
> >>> possible?
>
> --
> Gary Kephart
> Facebook: gary.kephart
> Twitter: @garykephart
>
> "The penalty that good men pay for not being interested in politics is to
> be governed by lesser men." -- Plato.
>
>
Re: hiding/displaying list items based on cookie values
Posted by Gary Kephart <ga...@pobox.com>.
You mentioned:
By default the ordered-list (#) inside a %%collapse style are closed
(hidden) by default.
Does this also apply to unordered lists? If not, what's the JS to change
that?
Thanks,
Gary
On 9/12/2021 7:49 AM, Gary Kephart wrote:
> Hmm. A bit more clunky, in that the readers will have to do this on
> every page instead of just one, but yeah, we could do it that way.
>
> Thanks,
> Gary
>
> On 9/11/2021 11:43 PM, Dirk Frederickx wrote:
>> Hi Gary,
>>
>> Tx for using JSPWiki !
>>
>> For this use-case you may want to explore the use of %%collapse (for
>> collapsible lists) or %%collapsebox.
>>
>> %%collapse
>> # Book Title 1
>> ## Spoiler content 1
>> # Book Title 2
>> ## Spoiler content 2
>> /%
>>
>> By default the ordered-list (#) inside a %%collapse style are closed
>> (hidden) by default. When clicking the list bullets they become
>> visible.
>> The status open/close of the item is saved in a page cookie, which
>> you can
>> reset if needed in the UserPreferences.
>>
>> %%collapsebox-closed
>> !Book Title 1
>> Spoiler content 1
>> /%
>>
>> Collapseboxes have a similar behaviour (states are saved in a page
>> cookie)
>>
>> See:
>> https://jspwiki-wiki.apache.org/Wiki.jsp?page=CollapsibleList,
>> https://jspwiki-wiki.apache.org/Wiki.jsp?page=Collapsible%20Box.
>>
>>
>> BR,
>> dirk
>>
>>
>>
>> On Sat, Sep 11, 2021 at 8:34 PM Gary Kephart <ga...@pobox.com>
>> wrote:
>>
>>> Problem:
>>> I have a website that is a reference website for a series of books. It
>>> has spoilers for the books all over the place. New readers of the
>>> series
>>> would like to visit the site but avoid spoilers. Most of these spoilers
>>> are in list items.
>>>
>>> Solution:
>>> What I'd like to do is to have a Settings page that contains checkboxes
>>> for each book in the series. Checking or unchecking a book sets the
>>> cookie value for that book. I would also like a CSS class for each book
>>> and have that CSS class change based on the cookie value for that book.
>>> The value would change from "display" to 'hidden" based on that value.
>>>
>>> Example:
>>> There's a checkbox for the book "The Eye of the World" and that changes
>>> the value of the "teotw" cookie and one for "The Dragon Reborn" that
>>> changes the values of the "tdr" cookie. The raw HTML might look like
>>> this:
>>>
>>> <li class="teotw">Here's something that happened to Rand
>>> (TEotW,Ch4)</li>
>>> <li class="tdr">Here's something else that happened to Rand
>>> (TDR,Ch25)</li>
>>>
>>> Questions:
>>>
>>> 1. Is there any way to set the CSS class of individual list items?
>>> Right now, I just see "*" and "#" for list items, with no way
>>> to add
>>> a CSS class to it. This might kill the whole idea right here.
>>> 2. I've followed the instructions to create a form using FormOutput,
>>> etc, and it looks like I'll need to create some plugin, like
>>> SpoilerPlugin, to handle the form submission by taking the
>>> checkbox
>>> values and setting the appropriate cookies. Does this sound
>>> correct?
>>> 3. Is there a better way to do this in JSPWiki, or is it just not
>>> possible?
--
Gary Kephart
Facebook: gary.kephart
Twitter: @garykephart
"The penalty that good men pay for not being interested in politics is to be governed by lesser men." -- Plato.
Re: hiding/displaying list items based on cookie values
Posted by Gary Kephart <ga...@pobox.com>.
Hmm. A bit more clunky, in that the readers will have to do this on
every page instead of just one, but yeah, we could do it that way.
Thanks,
Gary
On 9/11/2021 11:43 PM, Dirk Frederickx wrote:
> Hi Gary,
>
> Tx for using JSPWiki !
>
> For this use-case you may want to explore the use of %%collapse (for
> collapsible lists) or %%collapsebox.
>
> %%collapse
> # Book Title 1
> ## Spoiler content 1
> # Book Title 2
> ## Spoiler content 2
> /%
>
> By default the ordered-list (#) inside a %%collapse style are closed
> (hidden) by default. When clicking the list bullets they become visible.
> The status open/close of the item is saved in a page cookie, which you can
> reset if needed in the UserPreferences.
>
> %%collapsebox-closed
> !Book Title 1
> Spoiler content 1
> /%
>
> Collapseboxes have a similar behaviour (states are saved in a page cookie)
>
> See:
> https://jspwiki-wiki.apache.org/Wiki.jsp?page=CollapsibleList,
> https://jspwiki-wiki.apache.org/Wiki.jsp?page=Collapsible%20Box.
>
>
> BR,
> dirk
>
>
>
> On Sat, Sep 11, 2021 at 8:34 PM Gary Kephart <ga...@pobox.com> wrote:
>
>> Problem:
>> I have a website that is a reference website for a series of books. It
>> has spoilers for the books all over the place. New readers of the series
>> would like to visit the site but avoid spoilers. Most of these spoilers
>> are in list items.
>>
>> Solution:
>> What I'd like to do is to have a Settings page that contains checkboxes
>> for each book in the series. Checking or unchecking a book sets the
>> cookie value for that book. I would also like a CSS class for each book
>> and have that CSS class change based on the cookie value for that book.
>> The value would change from "display" to 'hidden" based on that value.
>>
>> Example:
>> There's a checkbox for the book "The Eye of the World" and that changes
>> the value of the "teotw" cookie and one for "The Dragon Reborn" that
>> changes the values of the "tdr" cookie. The raw HTML might look like this:
>>
>> <li class="teotw">Here's something that happened to Rand (TEotW,Ch4)</li>
>> <li class="tdr">Here's something else that happened to Rand (TDR,Ch25)</li>
>>
>> Questions:
>>
>> 1. Is there any way to set the CSS class of individual list items?
>> Right now, I just see "*" and "#" for list items, with no way to add
>> a CSS class to it. This might kill the whole idea right here.
>> 2. I've followed the instructions to create a form using FormOutput,
>> etc, and it looks like I'll need to create some plugin, like
>> SpoilerPlugin, to handle the form submission by taking the checkbox
>> values and setting the appropriate cookies. Does this sound correct?
>> 3. Is there a better way to do this in JSPWiki, or is it just not
>> possible?
>>
>> Thanks,
>> Gary
>>
>> --
>> Gary Kephart
>> Facebook: gary.kephart
>> Twitter: @garykephart
>>
>> "The penalty that good men pay for not being interested in politics is to
>> be governed by lesser men." -- Plato.
>>
>>
--
Gary Kephart
Facebook: gary.kephart
Twitter: @garykephart
"The penalty that good men pay for not being interested in politics is to be governed by lesser men." -- Plato.
Re: hiding/displaying list items based on cookie values
Posted by Dirk Frederickx <di...@gmail.com>.
Hi Gary,
Tx for using JSPWiki !
For this use-case you may want to explore the use of %%collapse (for
collapsible lists) or %%collapsebox.
%%collapse
# Book Title 1
## Spoiler content 1
# Book Title 2
## Spoiler content 2
/%
By default the ordered-list (#) inside a %%collapse style are closed
(hidden) by default. When clicking the list bullets they become visible.
The status open/close of the item is saved in a page cookie, which you can
reset if needed in the UserPreferences.
%%collapsebox-closed
!Book Title 1
Spoiler content 1
/%
Collapseboxes have a similar behaviour (states are saved in a page cookie)
See:
https://jspwiki-wiki.apache.org/Wiki.jsp?page=CollapsibleList,
https://jspwiki-wiki.apache.org/Wiki.jsp?page=Collapsible%20Box.
BR,
dirk
On Sat, Sep 11, 2021 at 8:34 PM Gary Kephart <ga...@pobox.com> wrote:
> Problem:
> I have a website that is a reference website for a series of books. It
> has spoilers for the books all over the place. New readers of the series
> would like to visit the site but avoid spoilers. Most of these spoilers
> are in list items.
>
> Solution:
> What I'd like to do is to have a Settings page that contains checkboxes
> for each book in the series. Checking or unchecking a book sets the
> cookie value for that book. I would also like a CSS class for each book
> and have that CSS class change based on the cookie value for that book.
> The value would change from "display" to 'hidden" based on that value.
>
> Example:
> There's a checkbox for the book "The Eye of the World" and that changes
> the value of the "teotw" cookie and one for "The Dragon Reborn" that
> changes the values of the "tdr" cookie. The raw HTML might look like this:
>
> <li class="teotw">Here's something that happened to Rand (TEotW,Ch4)</li>
> <li class="tdr">Here's something else that happened to Rand (TDR,Ch25)</li>
>
> Questions:
>
> 1. Is there any way to set the CSS class of individual list items?
> Right now, I just see "*" and "#" for list items, with no way to add
> a CSS class to it. This might kill the whole idea right here.
> 2. I've followed the instructions to create a form using FormOutput,
> etc, and it looks like I'll need to create some plugin, like
> SpoilerPlugin, to handle the form submission by taking the checkbox
> values and setting the appropriate cookies. Does this sound correct?
> 3. Is there a better way to do this in JSPWiki, or is it just not
> possible?
>
> Thanks,
> Gary
>
> --
> Gary Kephart
> Facebook: gary.kephart
> Twitter: @garykephart
>
> "The penalty that good men pay for not being interested in politics is to
> be governed by lesser men." -- Plato.
>
>