N°1030 Collapsible Sections :

* stop event propagation (was causing tab switching in notifications)
* save section state in localStorage

SVN:trunk[5382]

application/itopwebpage.class.inc.php

@@ -45,6 +45,8 @@ class iTopWebPage extends NiceWebPage implements iTabbedPage
 	protected $sBreadCrumbEntryIcon;
 	protected $oCtx;
 
+	protected $bHasCollapsibleSection = false;
+
 	public function __construct($sTitle, $bPrintable = false)
 	{
 		parent::__construct($sTitle, $bPrintable);
@@ -623,6 +625,7 @@ EOF
 		);
 	}
 
+
 	/**
 	 * @param string $sId Identifies the item, to search after it in the current breadcrumb
 	 * @param string $sLabel Label of the breadcrumb item
@@ -796,7 +799,7 @@ EOF
 		if ($iBreadCrumbMaxCount > 1)
 		{
 			$oConfig = MetaModel::GetConfig();
-			$siTopInstanceId = json_encode(utils::GetAbsoluteUrlAppRoot().'==='.$oConfig->Get('db_host').'/'.$oConfig->Get('db_name').'/'.$oConfig->Get('db_subname'));
+			$siTopInstanceId = json_encode($oConfig->GetItopInstanceid());
 			if ($this->bBreadCrumbEnabled)
 			{
 				if (is_null($this->sBreadCrumbEntryId))
@@ -821,6 +824,8 @@ EOF
 			);
 		}
 
+		$this->outputCollapsibleSectionInit();
+
 		if ($this->GetOutputFormat() == 'html')
 		{
 			foreach($this->a_headers as $s_header)
@@ -927,7 +932,7 @@ EOF
 				$sHtml .= "</script>\n";
 			}
 		}
-	
+
 		if (count($this->a_styles)>0)
 		{
 			$sHtml .= "<style>\n";
@@ -1241,6 +1246,38 @@ EOF;
 		ExecutionKPI::ReportStats();
 	}
 
+	/**
+	 * Adds init scripts for the collapsible sections
+	 */
+	private function outputCollapsibleSectionInit()
+	{
+		if (!$this->bHasCollapsibleSection)
+		{
+			return;
+		}
+
+		$this->add_script(<<<'EOD'
+function initCollapsibleSection(iSectionId, bOpenedByDefault, sSectionStateStorageKey)
+{
+var bStoredSectionState = JSON.parse(localStorage.getItem(sSectionStateStorageKey));
+var bIsSectionOpenedInitially = (bStoredSectionState == null) ? bOpenedByDefault : bStoredSectionState;
+
+if (bIsSectionOpenedInitially) {
+	$("#LnkCollapse_"+iSectionId).toggleClass("open");
+	$("#Collapse_"+iSectionId).toggle();
+}
+
+$("#LnkCollapse_"+iSectionId).click(function(e) {
+	localStorage.setItem(sSectionStateStorageKey, !($("#Collapse_"+iSectionId).is(":visible")));
+	$("#LnkCollapse_"+iSectionId).toggleClass("open");
+	$("#Collapse_"+iSectionId).slideToggle("normal");
+	e.preventDefault(); // we don't want to do anything more (see #1030 : a non wanted tab switching was triggered)
+});
+}
+EOD
+		);
+	}
+
 	public function AddTabContainer($sTabContainer, $sPrefix = '')
 	{
 		$this->add($this->m_oTabs->AddTabContainer($sTabContainer, $sPrefix));
@@ -1308,21 +1345,28 @@ EOF;
 		$this->add_ready_script($this->m_oTabs->SelectTab($sTabContainer, $sTabLabel));
 	}
 
-	public function StartCollapsibleSection($sSectionLabel, $bOpen = false)
+	public function StartCollapsibleSection(
-	{
+		$sSectionLabel, $bOpenedByDefault = false, $sSectionStateStorageBusinessKey = ''
-		$this->add($this->GetStartCollapsibleSection($sSectionLabel, $bOpen));
+	) {
+		$this->add($this->GetStartCollapsibleSection($sSectionLabel, $bOpenedByDefault,
+			$sSectionStateStorageBusinessKey));
 	}
 
-	public function GetStartCollapsibleSection($sSectionLabel, $bOpen = false)
+	private function GetStartCollapsibleSection(
-	{
+		$sSectionLabel, $bOpenedByDefault = false, $sSectionStateStorageBusinessKey = ''
+	) {
+		$this->bHasCollapsibleSection = true;
 		$sHtml = '';
 		static $iSectionId = 0;
-		$sImgStyle = $bOpen ? ' open' : '';
+		$sHtml .= '<a id="LnkCollapse_'.$iSectionId.'" class="CollapsibleLabel" href="#">'.$sSectionLabel.'</a></br>'."\n";
-		$sHtml .= "<a id=\"LnkCollapse_$iSectionId\" class=\"CollapsibleLabel{$sImgStyle}\" href=\"#\">$sSectionLabel</a></br>\n";
+		$sHtml .= '<div id="Collapse_'.$iSectionId.'" style="display:none">'."\n";
-		$sStyle = $bOpen ? '' : 'style="display:none" ';
+
-		$sHtml .= "<div id=\"Collapse_$iSectionId\" $sStyle>";
+		$oConfig = MetaModel::GetConfig();
-		$this->add_ready_script("\$(\"#LnkCollapse_$iSectionId\").click(function() {\$(\"#Collapse_$iSectionId\").slideToggle('normal'); $(\"#LnkCollapse_$iSectionId\").toggleClass('open');});");
+		$sSectionStateStorageKey = $oConfig->GetItopInstanceid().'/'.$sSectionStateStorageBusinessKey.'/collapsible-'.$iSectionId;
-		//$this->add_ready_script("$('#LnkCollapse_$iSectionId').hide();");
+		$sSectionStateStorageKey = json_encode($sSectionStateStorageKey);
+		$sOpenedByDefault = ($bOpenedByDefault) ? 'true' : 'false';
+		$this->add_ready_script("initCollapsibleSection($iSectionId, $sOpenedByDefault, '$sSectionStateStorageKey');");
+
 		$iSectionId++;
 		return $sHtml;
 	}

core/config.class.inc.php

@@ -1086,6 +1086,18 @@ class Config
 		return (array_key_exists($sPropCode, $this->m_aSettings));
 	}
 
+	/**
+	 * @return string identifier that can be used for example to name WebStorage/SessionStorage keys (they
+	 *     are related to a whole domain, and a domain can host multiple itop)
+	 */
+	public function GetItopInstanceid()
+	{
+		return utils::GetAbsoluteUrlAppRoot()
+			.'==='.$this->Get('db_host')
+			.'/'.$this->Get('db_name')
+			.'/'.$this->Get('db_subname');
+	}
+
 	public function GetDescription($sPropCode)
 	{
 		return $this->m_aSettings[$sPropCode];

pages/notifications.php

@@ -44,7 +44,7 @@ $oP->add('</div>');
 
 $oP->SetBreadCrumbEntry('ui-tool-notifications', Dict::S('Menu:NotificationsMenu'), Dict::S('Menu:NotificationsMenu+'), '', '../images/bell.png');
 
-$oP->StartCollapsibleSection(Dict::S('UI:NotificationsMenu:Help'), true);
+$oP->StartCollapsibleSection(Dict::S('UI:NotificationsMenu:Help'), true, 'notifications-home');
 $oP->add('<div style="padding: 1em; font-size:10pt;background:#E8F3CF;margin-top: 0.25em;">');
 $oP->add('<img src="../images/bell.png" style="margin-top: -60px; margin-right: 10px; float: right;">');
 $oP->add(Dict::S('UI:NotificationsMenu:HelpContent'));

pages/run_query.php

@@ -225,7 +225,7 @@ EOF
 		$oP->SetBreadCrumbEntry($sPageId, $sLabel, $oFilter->ToOQL(true), $sUrl, '../images/breadcrumb-search.png');
 
 		$oP->p('');
-		$oP->StartCollapsibleSection(Dict::S('UI:RunQuery:MoreInfo'), false);
+		$oP->StartCollapsibleSection(Dict::S('UI:RunQuery:MoreInfo'), false, 'runQuery');
 		$oP->p(Dict::S('UI:RunQuery:DevelopedQuery').htmlentities($oFilter->ToOQL(), ENT_QUOTES, 'UTF-8'));
 		$oP->p(Dict::S('UI:RunQuery:SerializedFilter').$oFilter->serialize());
 		$oP->EndCollapsibleSection();