composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-25 11:38:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°3564 Alert and CollapsibleSectionState can now be saved

Browse Source
This commit is contained in:
Pierre Goiffon
2020-12-24 11:36:51 +01:00
parent d3efd3ea0e
commit 2c0d001721
7 changed files with 128 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
js/components/alert.js
View File

@@ -25,7 +25,10 @@ $(function()
{
// default options
options:
{},
{
hasCollapsibleStateSavingEnabled: false,
collapsibleStateStorageKey: null,
},
css_classes:
{
opened: 'ibo-is-opened',
@@ -60,6 +63,26 @@ $(function()
},
_onCollapseTogglerClick: function (oEvent) {
this.element.toggleClass(this.css_classes.opened);
if (this.options.hasCollapsibleStateSavingEnabled) {
localStorage.setItem(
this.options.collapsibleStateStorageKey,
this.element.hasClass(this.css_classes.opened)
);
}
},
enableSaveCollapsibleState: function (bOpenedByDefault, sSectionStateStorageKey) {
this.options.hasCollapsibleStateSavingEnabled = true;
this.options.collapsibleStateStorageKey = sSectionStateStorageKey;
let bStoredSectionState = JSON.parse(localStorage.getItem(sSectionStateStorageKey));
let bIsSectionOpenedInitially = (bStoredSectionState == null) ? bOpenedByDefault : bStoredSectionState;
if (bIsSectionOpenedInitially) {
this.element.addClass(this.css_classes.opened);
} else {
this.element.removeClass(this.css_classes.opened);
}
}
})
});

25
js/components/collapsible-section.js
View File

@@ -24,7 +24,10 @@ $(function () {
{
// default options
options:
{},
{
hasCollapsibleStateSavingEnabled: false,
collapsibleStateStorageKey: null,
},
css_classes:
{
opened: 'ibo-is-opened',
@@ -51,6 +54,26 @@ $(function () {
},
_onCollapseTogglerClick: function (oEvent) {
this.element.toggleClass(this.css_classes.opened);
if (this.options.hasCollapsibleStateSavingEnabled) {
localStorage.setItem(
this.options.collapsibleStateStorageKey,
this.element.hasClass(this.css_classes.opened)
);
}
},
enableSaveCollapsibleState: function (bOpenedByDefault, sSectionStateStorageKey) {
this.options.hasCollapsibleStateSavingEnabled = true;
this.options.collapsibleStateStorageKey = sSectionStateStorageKey;
let bStoredSectionState = JSON.parse(localStorage.getItem(sSectionStateStorageKey));
let bIsSectionOpenedInitially = (bStoredSectionState == null) ? bOpenedByDefault : bStoredSectionState;
if (bIsSectionOpenedInitially) {
this.element.addClass(this.css_classes.opened);
} else {
this.element.removeClass(this.css_classes.opened);
}
}
})
});

29
sources/application/UI/Base/Component/Alert/Alert.php
View File

@@ -21,6 +21,7 @@ namespace Combodo\iTop\Application\UI\Base\Component\Alert;
use Combodo\iTop\Application\UI\Base\UIBlock;
use utils;
/**
* Class Alert
@@ -96,6 +97,10 @@ class Alert extends UIBlock
protected $bIsCollapsible;
/** @var bool Whether the alert is opened by default or not, only works when $bIsCollapsible set to true */
protected $bIsOpenedByDefault;
/** @var boolean if true will store collapsible state */
protected $bIsSaveCollapsibleStateEnabled = false;
/** @var string localStorage key used to store collapsible state */
protected $sSectionStateStorageKey;
/**
* Alert constructor.
@@ -116,6 +121,20 @@ class Alert extends UIBlock
parent::__construct($sId);
}
/**
* @param $sSectionStateStorageKey
*
* @return self
*/
public function EnableSaveCollapsibleState($sSectionStateStorageKey)
{
$this->bIsSaveCollapsibleStateEnabled = true;
$sSectionStateStorageKeyPrefix = utils::GetConfig()->GetItopInstanceid();
$this->sSectionStateStorageKey = $sSectionStateStorageKeyPrefix.'/'.$sSectionStateStorageKey;
return $this;
}
/**
* @return string
*/
@@ -247,4 +266,14 @@ class Alert extends UIBlock
return $this;
}
public function IsSaveCollapsibleStateEnabled(): bool
{
return $this->bIsSaveCollapsibleStateEnabled;
}
public function GetSessionCollapsibleStateStorageKey(): string
{
return $this->sSectionStateStorageKey;
}
}

28
sources/application/UI/Base/Component/CollapsibleSection/CollapsibleSection.php
View File

@@ -22,6 +22,7 @@ namespace Combodo\iTop\Application\UI\Base\Component\CollapsibleSection;
use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
use Combodo\iTop\Application\UI\Base\tUIContentAreas;
use utils;
/**
* @package Combodo\iTop\Application\UI\Base\Component\CollapsibleSection
@@ -43,6 +44,10 @@ class CollapsibleSection extends UIContentBlock
protected $bIsOpenedByDefault = false;
/** @var string */
private $sTitle;
/** @var boolean if true will store collapsible state */
protected $bIsSaveCollapsibleStateEnabled = false;
/** @var string localStorage key used to store collapsible state */
protected $sSectionStateStorageKey;
public function __construct(string $sTitle, array $aSubBlocks = [], ?string $sId = null)
{
@@ -51,6 +56,19 @@ class CollapsibleSection extends UIContentBlock
$this->aSubBlocks = $aSubBlocks;
}
/**
* @param $sSectionStateStorageKey
*
* @return self
*/
public function EnableSaveCollapsibleState($sSectionStateStorageKey)
{
$this->bIsSaveCollapsibleStateEnabled = true;
$sSectionStateStorageKeyPrefix = utils::GetConfig()->GetItopInstanceid();
$this->sSectionStateStorageKey = $sSectionStateStorageKeyPrefix.'/'.$sSectionStateStorageKey;
return $this;
}
public function IsOpenedByDefault()
{
@@ -73,4 +91,14 @@ class CollapsibleSection extends UIContentBlock
{
return $this->sTitle;
}
public function IsSaveCollapsibleStateEnabled(): bool
{
return $this->bIsSaveCollapsibleStateEnabled;
}
public function GetSessionCollapsibleStateStorageKey(): string
{
return $this->sSectionStateStorageKey;
}
}

6
templates/base/components/alert/layout.js.twig
View File

@@ -1 +1,7 @@
$('#{{ oUIBlock.GetId() }}').alert();
{% if oUIBlock.IsSaveCollapsibleStateEnabled() %}
$('#{{ oUIBlock.GetId() }}').alert("instance").enableSaveCollapsibleState(
{{ oUIBlock.IsOpenedByDefault() }},
'{{ oUIBlock.GetSessionCollapsibleStateStorageKey() }}'
);
{% endif %}

6
templates/base/components/collapsible-section/layout.js.twig
View File

@@ -1 +1,7 @@
$('#{{ oUIBlock.GetId() }}').collapsibleSection();
{% if oUIBlock.IsSaveCollapsibleStateEnabled() %}
$('#{{ oUIBlock.GetId() }}').collapsibleSection("instance").enableSaveCollapsibleState(
{{ oUIBlock.IsOpenedByDefault()|var_export }},
'{{ oUIBlock.GetSessionCollapsibleStateStorageKey() }}'
);
{% endif %}

10
test/VisualTest/Backoffice/RenderAllUiBlocks.php
View File

@@ -82,6 +82,9 @@ $oAlertNonClosable = AlertFactory::MakeNeutral('Alert not closable, not collapsa
->SetIsClosable(false)
->SetIsCollapsible(false);
$oPageContentLayout->AddMainBlock($oAlertNonClosable);
$oAlertSaveCollapsibleState = AlertFactory::MakeNeutral('Alert with collapsible state saving', $sContent)
->EnableSaveCollapsibleState('RenderAllUiBlocks-alert');
$oPageContentLayout->AddMainBlock($oAlertSaveCollapsibleState);
$oPageContentLayout->AddMainBlock(new Html('<hr/>'));
@@ -167,7 +170,12 @@ $oPageContentLayout->AddMainBlock(new Html('<hr/>'));
$oCollapsibleSectionTitle = new Html('<h2 id="title-panels">Collapsible Sections examples</h2>');
$oPage->AddUiBlock($oCollapsibleSectionTitle);
$oCollapsibleSection = new CollapsibleSection('Section title', [new Html("This the section content !")]);
$sSectionContent = 'This is the section content !';
$oCollapsibleSection = new CollapsibleSection('Section title', [new Html($sSectionContent)]);
$oPage->AddUiBlock($oCollapsibleSection);
$oCollapsibleSectionSaveState = new CollapsibleSection('Section save state', [new Html($sSectionContent)]);
$oCollapsibleSectionSaveState->EnableSaveCollapsibleState('RenderAllUiBlocks-collapsible-section');
$oPage->AddUiBlock($oCollapsibleSectionSaveState);
$oPage->output();