tonyair/silverstripe-elemental-basics
1
0
Fork 0
mirror of https://github.com/a2nt/silverstripe-elemental-basics.git synced 2024-10-22 17:05:54 +02:00
Code Issues 1 Projects Releases Wiki Activity

IMPR: Add some options to Accordion element

Browse Source
This commit is contained in:
Tony Air 2022-02-28 14:23:43 +02:00
parent 2135329f4f
commit 27c7539f6f
2 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/Elements/AccordionElement.php
View File

@ -9,6 +9,7 @@
namespace A2nt\ElementalBasics\Elements;
use DNADesign\ElementalList\Model\ElementList;
use SilverStripe\Forms\CheckboxField;
class AccordionElement extends ElementList
{
@ -21,6 +22,11 @@ class AccordionElement extends ElementList
private static $table_name = 'AccordionElement';
private static $db = [
'OpenFirst' => 'Boolean(0)',
'KeepOpenned' => 'Boolean(0)',
];
public function getType()
{
return self::$singular_name;
@ -30,4 +36,16 @@ class AccordionElement extends ElementList
{
return $this->Elements()->renderWith(static::class.'_AccordionArea');
}
public function getCMSFields()
{
$fields = parent::getCMSFields();
$fields->addFieldsToTab('Root.Main', [
CheckboxField::create('OpenFirst', 'Open first accordion element on page load'),
CheckboxField::create('KeepOpenned', 'Keep elements oppened'),
]);
return $fields;
}
}

6
templates/A2nt/ElementalBasics/Elements/AccordionElement_AccordionArea.ss
View File

@ -6,7 +6,7 @@
<button
data-bs-toggle="collapse"
data-bs-target="#ElementContent{$ID}"
aria-expanded="false"
aria-expanded="<% if $First && $OpenFirst %>true<% else %>false<% end_if %>"
aria-controls="ElementContent{$ID}"
class="accordion-button collapsed"
>$Title</button>
@ -14,9 +14,11 @@
<div
id="ElementContent{$ID}"
class="accordion-collapse collapse"
class="accordion-collapse collapse<% if $First && $OpenFirst %> show<% end_if %>"
aria-labelledby="ElementHeader{$ID}"
<% if not $Up.KeepOpenned %>
data-bs-parent="#ElementAccordion{$Parent.ID}"
<% end_if %>
>
<div class="accordion-body">$Me</div>
</div>