struggling to understand panels expanding initial state

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

struggling to understand panels expanding initial state

Ricardo Rodríguez
Hi all!

I'm still struggling to understand how expanded/collapsed state of
panels do work.

I'm currently using a 2.4.30451 XE/XEM installation.

Looking for macros controlling this state in macros.vm, I see:

***
#macro(panelheader $title)
#set($cookieName = "${context.user.replaceAll(':','')}_${panel}")
#set($expanded = $xwiki.getUserPreferenceFromCookie($cookieName))
#if(!$expanded)
   #set($expanded = 'expanded')
#end
## Note: We pass the Panel name as an HTML class attribute so that it's
possible to style
## the Panels selectively using CSS.
#set ($specialClassAttribute = "")
#if ($paneldoc && $paneldoc != "")
   #set ($specialClassAttribute =
$util.convertToAlphaNumeric($paneldoc.name))
#end
<div class="panel $expanded $specialClassAttribute">
<h1 class="xwikipaneltitle"
onclick="togglePanelVisibility(this.parentNode,
'${cookieName}');">$title</h1>
<div class="xwikipanelcontents">
#end
***

This macro creates an expanded panel. By clicking the panel title, the
system creates a cookie that stores her current state.

But if I modify this macro and says...

#if(!$expanded)
   #set($expanded = 'collapsed')
#end

No macro is created and panels are always collapsed when loaded and
after relaoding.

Please, could you me understand why?

Thank you so much!!!

Ricardo

--
Ricardo Rodríguez
CTO
eBioTIC.
Life Sciences, Data Modeling and Information Management Systems

_______________________________________________
users mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/users
Reply | Threaded
Open this post in threaded view
|

Re: struggling to understand panels expanding initial state

Raluca Stavro-2
Hello,

On Mon, Mar 7, 2011 at 12:39 AM, Ricardo Rodriguez [eBioTIC.] <
[hidden email]> wrote:

> Hi all!
>
> I'm still struggling to understand how expanded/collapsed state of
> panels do work.
>
> I'm currently using a 2.4.30451 XE/XEM installation.
>
> Looking for macros controlling this state in macros.vm, I see:
>
> ***
> #macro(panelheader $title)
> #set($cookieName = "${context.user.replaceAll(':','')}_${panel}")
> #set($expanded = $xwiki.getUserPreferenceFromCookie($cookieName))
> #if(!$expanded)
>   #set($expanded = 'expanded')
> #end
> ## Note: We pass the Panel name as an HTML class attribute so that it's
> possible to style
> ## the Panels selectively using CSS.
> #set ($specialClassAttribute = "")
> #if ($paneldoc && $paneldoc != "")
>   #set ($specialClassAttribute =
> $util.convertToAlphaNumeric($paneldoc.name))
> #end
> <div class="panel $expanded $specialClassAttribute">
> <h1 class="xwikipaneltitle"
> onclick="togglePanelVisibility(this.parentNode,
> '${cookieName}');">$title</h1>
> <div class="xwikipanelcontents">
> #end
> ***
>
> This macro creates an expanded panel. By clicking the panel title, the
> system creates a cookie that stores her current state.
>
> But if I modify this macro and says...
>
> #if(!$expanded)
>   #set($expanded = 'collapsed')
> #end
>
> No macro is created and panels are always collapsed when loaded and
> after relaoding.
>

That is because 'collapsed' is used as a class name for the panel dom
element and there is also a CSS rule which says that panels with 'collapsed'
class name are being displayed as collapsed.
So, the default logic is like this:

1) take the $expanded value from a cookie
2) set the panel dom element class name as being the value of $expanded
3) on loading the page, with the help of CSS, display the panel as being
'collapsed' or 'expanded', depending on the value of $expanded

And in your case, this is the logic:

1) set the value of $expanded as being 'collapsed'
2) set the panel dom element class name as being the value of $expanded
(which is 'collapsed')
3) on loading the page, with the help of CSS, display the panel as being
'collapsed', this being the value of $expanded

I hope that this helps you understand the logic behind 'collapsed' and
'expanded' panels.

Raluca.

>
> Please, could you me understand why?
>
> Thank you so much!!!
>
> Ricardo
>
> --
> Ricardo Rodríguez
> CTO
> eBioTIC.
> Life Sciences, Data Modeling and Information Management Systems
>
> _______________________________________________
> users mailing list
> [hidden email]
> http://lists.xwiki.org/mailman/listinfo/users
>
_______________________________________________
users mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/users
Reply | Threaded
Open this post in threaded view
|

Re: struggling to understand panels expanding initial state

Lockie
In reply to this post by Ricardo Rodríguez
Ricardo Rodríguez wrote
#if(!$expanded)
   #set($expanded = 'collapsed')
#end
Thanks I found this helpful. It means I don't have to have javascript extensions collapsing the panels, slowing down load times.
Lockie
Reply | Threaded
Open this post in threaded view
|

Re: struggling to understand panels expanding initial state

Ricardo Rodríguez
In reply to this post by Raluca Stavro-2
Thanks Raluca!

Please, see below.

On 3/7/11 7:51 AM, Raluca Stavro wrote:

> Hello,
>
> On Mon, Mar 7, 2011 at 12:39 AM, Ricardo Rodriguez [eBioTIC.]
> <[hidden email] <mailto:[hidden email]>>
> wrote:
>
>     Hi all!
>
>     I'm still struggling to understand how expanded/collapsed state of
>     panels do work.
>
>     I'm currently using a 2.4.30451 XE/XEM installation.
>
>     Looking for macros controlling this state in macros.vm, I see:
>
>     ***
>     #macro(panelheader $title)
>     #set($cookieName = "${context.user.replaceAll(':','')}_${panel}")
>     #set($expanded = $xwiki.getUserPreferenceFromCookie($cookieName))
>     #if(!$expanded)
>       #set($expanded = 'expanded')
>     #end
>     ## Note: We pass the Panel name as an HTML class attribute so that
>     it's
>     possible to style
>     ## the Panels selectively using CSS.
>     #set ($specialClassAttribute = "")
>     #if ($paneldoc && $paneldoc != "")
>       #set ($specialClassAttribute =
>     $util.convertToAlphaNumeric($paneldoc.name <http://paneldoc.name>))
>     #end
>     <div class="panel $expanded $specialClassAttribute">
>     <h1 class="xwikipaneltitle"
>     onclick="togglePanelVisibility(this.parentNode,
>     '${cookieName}');">$title</h1>
>     <div class="xwikipanelcontents">
>     #end
>     ***
>
>     This macro creates an expanded panel. By clicking the panel title, the
>     system creates a cookie that stores her current state.
>
>     But if I modify this macro and says...
>
>     #if(!$expanded)
>       #set($expanded = 'collapsed')
>     #end
>
>     No macro is created and panels are always collapsed when loaded and
>     after relaoding.
>
>
> That is because 'collapsed' is used as a class name for the panel dom
> element and there is also a CSS rule which says that panels with
> 'collapsed' class name are being displayed as collapsed.
> So, the default logic is like this:
>
> 1) take the $expanded value from a cookie
> 2) set the panel dom element class name as being the value of $expanded
> 3) on loading the page, with the help of CSS, display the panel as
> being 'collapsed' or 'expanded', depending on the value of $expanded
>
> And in your case, this is the logic:
>
> 1) set the value of $expanded as being 'collapsed'
> 2) set the panel dom element class name as being the value of
> $expanded (which is 'collapsed')
> 3) on loading the page, with the help of CSS, display the panel as
> being 'collapsed', this being the value of $expanded
>
> I hope that this helps you understand the logic behind 'collapsed' and
> 'expanded' panels.
>
> Raluca.

Yes, it helps. Thus, to control the initial state of a panel (collapsed
or expanded) the first time I load a page (no cookie has been set for
that panel) what I need is to create a cookie with the desired value.
Please, is this correct? If yes, could you point me to the best way of
creating that cookie at loading time?

Thanks!!!

>
>     Please, could you me understand why?
>
>     Thank you so much!!!
>
>     Ricardo
>
>     --
>     Ricardo Rodríguez
>     CTO
>     eBioTIC.
>     Life Sciences, Data Modeling and Information Management Systems
>
>     _______________________________________________
>     users mailing list
>     [hidden email] <mailto:[hidden email]>
>     http://lists.xwiki.org/mailman/listinfo/users
>
>

--
Ricardo Rodríguez
CTO
eBioTIC.
Life Sciences, Data Modeling and Information Management Systems

_______________________________________________
users mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/users
Reply | Threaded
Open this post in threaded view
|

Re: struggling to understand panels expanding initial state

Ricardo Rodríguez
In reply to this post by Lockie
Hi Lockie!

On 3/8/11 1:31 AM, Lockie wrote:
> Ricardo Rodríguez wrote:
>> #if(!$expanded)
>>     #set($expanded = 'collapsed')
>> #end
>>
> Thanks I found this helpful. It means I don't have to have javascript
> extensions collapsing the panels, slowing down load times.

But as Raluca stated in her previous message, this causes the panels to
keep collapsed because this value prevents the cookie to be created. I'm
afraid I'm still lost with this issue: I don't understand yet why
setting $expanded = 'collapsed' instead of reading its value from a
cookie prevents cookies function.

Please, Lockie, how to you get a collapsed panel at page loading time
being later on controlled by a cookie? I mean, panel A appears collapsed
when you access the site for the first time. From this moment onwards, a
cookie will remember the preferences of each visitor.

Here it is the example that is making me nuts:

http://pescaderias.org

It is a simple portal still in progress. I want that all four menus on
the right will appear collapsed the first time a visitor/users access
the site. And that the stated of each panel will be stored in a cookie
for subsequent visits.

#set($expanded = 'collapsed') allows me to show them collapsed, but prevents cookies function. In fact cookies are never created. I think I understood Raluca's explanation in the her previous message in this same thread, but I'm still not able to find a solution for this issue.

Thanks!

Ricardo


> -----
> ----
> Lockie
> --
> View this message in context: http://xwiki.475771.n2.nabble.com/struggling-to-understand-panels-expanding-initial-state-tp6095465p6099685.html
> Sent from the XWiki- Users mailing list archive at Nabble.com.
> _______________________________________________
> users mailing list
> [hidden email]
> http://lists.xwiki.org/mailman/listinfo/users

--
Ricardo Rodríguez
CTO
eBioTIC.
Life Sciences, Data Modeling and Information Management Systems

_______________________________________________
users mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/users
Reply | Threaded
Open this post in threaded view
|

Re: struggling to understand panels expanding initial state

Lockie
Ricardo Rodríguez wrote
Please, Lockie, how to you get a collapsed panel at page loading time
being later on controlled by a cookie? I mean, panel A appears collapsed
when you access the site for the first time. From this moment onwards, a
cookie will remember the preferences of each visitor.
Hi Ricardo

Unfortunately I haven't solved this issue. I was previously using a javascript extension to default the panels as collapsed but that was also effecting page load times since the script was loaded on each page.

document.observe('xwiki:dom:loaded', function() {
   $$('.panel').each(function(item) {
     item.removeClassName('expanded');
     item.addClassName('collapsed');
   });
});

But that does the exact same thing as this only without the need to have an extension load each time:

 #if(!$expanded)
     #set($expanded = 'collapsed')
 #end

These two ways have the panels collapsed regardless of whether the user has been there or not. So I'm stuck in the same situation as you. :( What would be perfect in my case is if you could somehow link a space to a panel so that the panel whose space you are looking at remains open displaying all its pages, while the other spaces remain closed.
Lockie
Reply | Threaded
Open this post in threaded view
|

Re: struggling to understand panels expanding initial state

Raluca Stavro-2
In reply to this post by Ricardo Rodríguez
Hello Ricardo and Lockie,

If you want the initial value to be collapsed, but then you want cookies to
work, what you have to do is to add a JavaScript function that will handle
the initial cookie.
The rationale is:
1. Check if a cookie exists for the current panel, on the client side
2. If there is no such cookie, toggle panel visibility

This is the code of a panel:

##
## Get cookie
## ----------------------------------
#set($id = $util.generateRandomString(30))
<span id="${id}"></span>
#set($cookieName = "${xcontext.user}_${panel}")
#set($panelCookie = $xwiki.getUserPreferenceFromCookie($cookieName))

##
## Display panel
## ----------------------------------
#panelheader("Test")

#panelfooter
##
## If there is no cookie set for the current panel,
## toggle panel visibility (since by default the panel is expanded)
##
-----------------------------------------------------------------------------------------
#if("$!panelCookie" == '')
  <script type="text/javascript">
    document.observe('xwiki:dom:loaded', function(){
      var id = '${id}';
      var panel = $(id).next('div');
      XWiki.togglePanelVisibility(panel, '${cookieName}');
    });
  </script>
#end

This way, you don't need #set($expanded = 'collapsed') anymore.

I hope this helps you both,

Raluca.


On Sat, Mar 12, 2011 at 5:57 PM, Ricardo Rodriguez [eBioTIC.] <
[hidden email]> wrote:

> Hi Lockie!
>
> On 3/8/11 1:31 AM, Lockie wrote:
> > Ricardo Rodríguez wrote:
> >> #if(!$expanded)
> >>     #set($expanded = 'collapsed')
> >> #end
> >>
> > Thanks I found this helpful. It means I don't have to have javascript
> > extensions collapsing the panels, slowing down load times.
>
> But as Raluca stated in her previous message, this causes the panels to
> keep collapsed because this value prevents the cookie to be created. I'm
> afraid I'm still lost with this issue: I don't understand yet why
> setting $expanded = 'collapsed' instead of reading its value from a
> cookie prevents cookies function.
>
> Please, Lockie, how to you get a collapsed panel at page loading time
> being later on controlled by a cookie? I mean, panel A appears collapsed
> when you access the site for the first time. From this moment onwards, a
> cookie will remember the preferences of each visitor.
>
> Here it is the example that is making me nuts:
>
> http://pescaderias.org
>
> It is a simple portal still in progress. I want that all four menus on
> the right will appear collapsed the first time a visitor/users access
> the site. And that the stated of each panel will be stored in a cookie
> for subsequent visits.
>
> #set($expanded = 'collapsed') allows me to show them collapsed, but
> prevents cookies function. In fact cookies are never created. I think I
> understood Raluca's explanation in the her previous message in this same
> thread, but I'm still not able to find a solution for this issue.
>
> Thanks!
>
> Ricardo
>
>
> > -----
> > ----
> > Lockie
> > --
> > View this message in context:
> http://xwiki.475771.n2.nabble.com/struggling-to-understand-panels-expanding-initial-state-tp6095465p6099685.html
> > Sent from the XWiki- Users mailing list archive at Nabble.com.
> > _______________________________________________
> > users mailing list
> > [hidden email]
> > http://lists.xwiki.org/mailman/listinfo/users
>
> --
> Ricardo Rodríguez
> CTO
> eBioTIC.
> Life Sciences, Data Modeling and Information Management Systems
>
> _______________________________________________
> users mailing list
> [hidden email]
> http://lists.xwiki.org/mailman/listinfo/users
>
_______________________________________________
users mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/users
Reply | Threaded
Open this post in threaded view
|

Re: struggling to understand panels expanding initial state

Lockie
Looks like you solved it, works great! Thanks Raluca :-)

Regards,

Lockie

Raluca Stavro-2 wrote
Hello Ricardo and Lockie,

If you want the initial value to be collapsed, but then you want cookies to
work, what you have to do is to add a JavaScript function that will handle
the initial cookie.
The rationale is:
1. Check if a cookie exists for the current panel, on the client side
2. If there is no such cookie, toggle panel visibility

This is the code of a panel:

##
## Get cookie
## ----------------------------------
#set($id = $util.generateRandomString(30))

#set($cookieName = "${xcontext.user}_${panel}")
#set($panelCookie = $xwiki.getUserPreferenceFromCookie($cookieName))

##
## Display panel
## ----------------------------------
#panelheader("Test")

#panelfooter
##
## If there is no cookie set for the current panel,
## toggle panel visibility (since by default the panel is expanded)
##
-----------------------------------------------------------------------------------------
#if("$!panelCookie" == '')
  <script type="text/javascript"> document.observe('xwiki:dom:loaded', function(){ var id = '${id}'; var panel = $(id).next('div'); XWiki.togglePanelVisibility(panel, '${cookieName}'); }); </script>#end

This way, you don't need #set($expanded = 'collapsed') anymore.

I hope this helps you both,

Raluca.


On Sat, Mar 12, 2011 at 5:57 PM, Ricardo Rodriguez [eBioTIC.] <
[hidden email]> wrote:

> Hi Lockie!
>
> On 3/8/11 1:31 AM, Lockie wrote:
> > Ricardo Rodríguez wrote:
> >> #if(!$expanded)
> >>     #set($expanded = 'collapsed')
> >> #end
> >>
> > Thanks I found this helpful. It means I don't have to have javascript
> > extensions collapsing the panels, slowing down load times.
>
> But as Raluca stated in her previous message, this causes the panels to
> keep collapsed because this value prevents the cookie to be created. I'm
> afraid I'm still lost with this issue: I don't understand yet why
> setting $expanded = 'collapsed' instead of reading its value from a
> cookie prevents cookies function.
>
> Please, Lockie, how to you get a collapsed panel at page loading time
> being later on controlled by a cookie? I mean, panel A appears collapsed
> when you access the site for the first time. From this moment onwards, a
> cookie will remember the preferences of each visitor.
>
> Here it is the example that is making me nuts:
>
> http://pescaderias.org
>
> It is a simple portal still in progress. I want that all four menus on
> the right will appear collapsed the first time a visitor/users access
> the site. And that the stated of each panel will be stored in a cookie
> for subsequent visits.
>
> #set($expanded = 'collapsed') allows me to show them collapsed, but
> prevents cookies function. In fact cookies are never created. I think I
> understood Raluca's explanation in the her previous message in this same
> thread, but I'm still not able to find a solution for this issue.
>
> Thanks!
>
> Ricardo
>
>
> > -----
> > ----
> > Lockie
> > --
> > View this message in context:
> http://xwiki.475771.n2.nabble.com/struggling-to-understand-panels-expanding-initial-state-tp6095465p6099685.html
> > Sent from the XWiki- Users mailing list archive at Nabble.com.
> > _______________________________________________
> > users mailing list
> > [hidden email]
> > http://lists.xwiki.org/mailman/listinfo/users
>
> --
> Ricardo Rodríguez
> CTO
> eBioTIC.
> Life Sciences, Data Modeling and Information Management Systems
>
> _______________________________________________
> users mailing list
> [hidden email]
> http://lists.xwiki.org/mailman/listinfo/users
>
_______________________________________________
users mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/users
Lockie