CODEWITHSUNDEEP
plone
Steve
Steve

Reputation: 43

Can I enable users on Plone4 to show/hide the Portlet column on-the-fly

The Portlets in Plone are quite handy but I'd like to be able to provide some method to users to be able to temporarily hide/show the portlets column. That is, by clicking a button, the portlets column should collapse and you see the content page in full width. Then clicking again and the portlets panel on the left expands and the main content page width shrinks to accommodate.

I've observed the HTML ID of the portlets column is "portal-column-one" and I tried adding a button to the page that runs javascript to set the visibility property of that element to "hidden" but this seemed to have no effect. I was able to go into Firebug and add style="visibility:hidden;" to the "portal-column-one" element and it had the effect of making the region invisible w/o resizing the page.

I am using Plone 4.1. I have the site configured with navigation portlet on all pages except the main page which has Navigation, Review List and Recent Changes.

So it seems it must be possible to embed some javascript in the page (I was thinking of adding this to the plone.logo page which I've already customized). But I guess its more complicated than the few stabs I've made at it.

Thanks in advance for any advice.

Solution (Thanks to input from Ulrich Schwarz and hvelarde):

The solution I arrived at uses JavaScript to set CSS attributes to show/hide the Portlets Column (Left side) and expand the content column to fill the space the porlets column filled.

I started by customizing the Plone header template to add a link for the user to toggle the view of the Porlets column. I also put the necessary javascript functions in this header.

To customize the header, go to the following page (need to be logged in as Admin of your Plone site):

http://SERVER/SITE/portal_view_customizations/zope.interface.interface-plone.logo

Where:

To create this page:

  1. Go to Site Setup (as Admin)
  2. Go to Zope Management Interface
  3. Click on "portal_view_customizations"
  4. Click on "plone.logo" (or at least this is where I choose to put the button so it would be located just above the navigation Portlet)
  5. Add the following to the page:
<script>
function getById(id) {
  return document.getElementById(id);
}
function TogglePortletsPanel() {
  var dispVal = getById('portal-column-one').style.display
  if( dispVal == "none") { // Normal display
    SetPortletsPanelState("inline");
  } else { // Full Screen Content
    SetPortletsPanelState("none");
  }
}
function SetPortletsPanelState(dispVal) {
  var nav = getById('portal-column-one');
  var content = getById('portal-column-content');
  if( dispVal == "none") { // Normal display
    nav.style.display='none';
    content.className='cell width-full position-0';
    // Set cookie to updated value
    setCookie("portletDisplayState","none",365);
  } else { // Full Screen Content
    nav.style.display='inline';
    content.className='cell width-3:4 position-1:4';
    // Set cookie to updated value
    setCookie("portletDisplayState","inline",365);
  }
}
function InitializePortletsPanelState() {
  var portletDisplayState=getCookie("portletDisplayState");
//alert("portletDisplayState="+portletDisplayState)
  if (portletDisplayState!=null) SetPortletsPanelState(portletDisplayState);
}
function setCookie(c_name,value,exdays) {
//alert(c_name+"="+value);
// cookie format: document.cookie = 'name=value; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/'
  var exdate=new Date();
  exdate.setDate(exdate.getDate() + exdays);
  var exp= ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
  document.cookie=c_name + "=" + escape(value) + exp + "; path=/";
}
function getCookie(c_name) {
  var i,x,y,ARRcookies=document.cookie.split(";");
  for (i=0;i<ARRcookies.length;i++) {
    x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
    y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
    x=x.replace(/^\s+|\s+$/g,"");
    if (x==c_name)  return unescape(y);
  }
}
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {oldonload(); }
      func();
    }
  }
}

addLoadEvent(InitializePortletsPanelState);

</script>
<a style="font-size:50%;" href="javascript:TogglePortletsPanel();">Toggle Portlets Panel</a>

6. Save the page

Notes:

Upvotes: 1

Views: 633

Answers (3)

Ida
Ida

Reputation: 3965

Try adi.fullscreen, it respects Plone's css-structure as Ulrich Schwarz thoughtfully mentioned.

Upvotes: 0

toutpt
toutpt

Reputation: 5220

This must be achieved client side by javascript (jquery).

You must first read documentation about the css grid framework used by plone: deco.gs. The website is down so, git clone this repo: https://github.com/limi/deco.gs and open pages in a webbrowser

Note: you just have to change css classes on the containers.

Upvotes: 0

Ulrich Schwarz
Ulrich Schwarz

Reputation: 7727

Maybe it's just a matter of setting the right property: you want display:none, not visibility:hidden.

But even then, the content area will probably not reflow automatically, you'll need to (dynamically) change the class on it as well. Specifically, you'll need to put classes width-full and position-0 on portal-column-content, instead of width-1:2 and position-1:4.

Upvotes: 1

Related Questions