[xwiki-users] struggling to understand panels expanding initial state
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
Hello, On Mon, Mar 7, 2011 at 12:39 AM, Ricardo Rodriguez [eBioTIC.] < [email protected]> 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 [email protected] http://lists.xwiki.org/mailman/listinfo/users
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 -- View this message in context: http://xwiki.475771.n2.nabble.com/struggling-to-understand-panels-expanding-... Sent from the XWiki- Users mailing list archive at Nabble.com.
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.] <[email protected] <mailto:[email protected]>> 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 [email protected] <mailto:[email protected]> http://lists.xwiki.org/mailman/listinfo/users
-- Ricardo Rodríguez CTO eBioTIC. Life Sciences, Data Modeling and Information Management Systems
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-... Sent from the XWiki- Users mailing list archive at Nabble.com. _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
-- Ricardo Rodríguez CTO eBioTIC. Life Sciences, Data Modeling and Information Management Systems
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 -- View this message in context: http://xwiki.475771.n2.nabble.com/struggling-to-understand-panels-expanding-... Sent from the XWiki- Users mailing list archive at Nabble.com.
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.] < [email protected]> 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:
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-... Sent from the XWiki- Users mailing list archive at Nabble.com. _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
-- Ricardo Rodríguez CTO eBioTIC. Life Sciences, Data Modeling and Information Management Systems
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
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" == '')
#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.] < [email protected]> 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:
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-... Sent from the XWiki- Users mailing list archive at Nabble.com. _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
-- Ricardo Rodríguez CTO eBioTIC. Life Sciences, Data Modeling and Information Management Systems
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
----- ---- Lockie -- View this message in context: http://xwiki.475771.n2.nabble.com/struggling-to-understand-panels-expanding-... Sent from the XWiki- Users mailing list archive at Nabble.com.
participants (3)
-
Lockie -
Raluca Stavro -
Ricardo Rodriguez [eBioTIC.]