pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Multiple drop down sections for toggler

Browse Source
This commit is contained in:
George Drummond
2019-04-18 15:23:24 -04:00
parent d963130674
commit 847c300d33
5 changed files with 139 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
templates/components/toggle_list.html
View File

@@ -1,45 +1,22 @@
{% from "components/icon.html" import Icon %}
{% macro ToggleItem(action, item_type, length, icon) %}
<span
v-on:click="props.toggle"
class="icon-link icon-link--large accordion-table__item__toggler">
{{ action }} {{ item_type }} ({{ length }}){{ Icon(icon) }}
{% macro ToggleButton(action, open_html, close_html, section_name) %}
<span v-on:click="toggleSection('{{ section_name }}')">
<div v-if="selectedSection === '{{ section_name }}'">
{{ close_html }}
</div>
<div v-else>
{{ open_html }}
</div>
</span>
{% endmacro %}
{% macro ToggleList(item_name, item_type, length) %}
<li is="toggler" class="accordion-table__item">
<template slot-scope="props">
<div class="accordion-table__item-content">
<span v-on:click="props.toggle">
{{ item_name }}
</span>
<template v-if="props.isVisible">
{{
ToggleItem(
("common.hide" | translate),
item_type,
length,
"caret_up",
)
}}
</template>
<template v-else>
{{
ToggleItem(
("common.show" | translate),
item_type,
length,
"caret_down",
)
}}
</template>
</div>
<div v-show="props.isVisible">
{{ caller() }}
</div>
</template>
</li>
<div>
{{ caller() }}
</div>
{% endmacro %}
{% macro ToggleSection(section_name) %}
<div v-show="selectedSection === '{{ section_name }}'">
{{ caller() }}
</div>
{% endmacro %}