composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-13 07:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°1030 Collapsible Sections :

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

SVN:trunk[5382]
This commit is contained in:
Pierre Goiffon
2018-03-05 15:50:38 +00:00
parent d96015f2c1
commit f9511aba17
4 changed files with 71 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
application/itopwebpage.class.inc.php
View File

@@ -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)
{
$this->add($this->GetStartCollapsibleSection($sSectionLabel, $bOpen));
public function StartCollapsibleSection(
$sSectionLabel, $bOpenedByDefault = false, $sSectionStateStorageBusinessKey = ''
) {
$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{$sImgStyle}\" href=\"#\">$sSectionLabel</a></br>\n";
$sStyle = $bOpen ? '' : 'style="display:none" ';
$sHtml .= "<div id=\"Collapse_$iSectionId\" $sStyle>";
$this->add_ready_script("\$(\"#LnkCollapse_$iSectionId\").click(function() {\$(\"#Collapse_$iSectionId\").slideToggle('normal'); $(\"#LnkCollapse_$iSectionId\").toggleClass('open');});");
//$this->add_ready_script("$('#LnkCollapse_$iSectionId').hide();");
$sHtml .= '<a id="LnkCollapse_'.$iSectionId.'" class="CollapsibleLabel" href="#">'.$sSectionLabel.'</a></br>'."\n";
$sHtml .= '<div id="Collapse_'.$iSectionId.'" style="display:none">'."\n";
$oConfig = MetaModel::GetConfig();
$sSectionStateStorageKey = $oConfig->GetItopInstanceid().'/'.$sSectionStateStorageBusinessKey.'/collapsible-'.$iSectionId;
$sSectionStateStorageKey = json_encode($sSectionStateStorageKey);
$sOpenedByDefault = ($bOpenedByDefault) ? 'true' : 'false';
$this->add_ready_script("initCollapsibleSection($iSectionId, $sOpenedByDefault, '$sSectionStateStorageKey');");
$iSectionId++;
return $sHtml;
}

12
core/config.class.inc.php
View File

@@ -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];

2
pages/notifications.php
View File

@@ -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'));

2
pages/run_query.php
View File

@@ -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();