Skip to content
Snippets Groups Projects
Verified Commit 5dec0e42 authored by Pavel Břoušek's avatar Pavel Břoušek
Browse files

fix: make individual identities repeatable

parent 0a634f50
Branches
Tags
1 merge request!6Repeatable components
......@@ -6,7 +6,7 @@
{% set configuration = configuration|merge({'priority': 'secondary'}) %}
{% endif %}
<form id="external" class="text-left" action="{{ currentUrl }}" method="post" name="g">
<form id="external-{{ component_index }}" class="external text-left" action="{{ currentUrl }}" method="post" name="g">
<div class="text-bold margin-bottom-12 {% if muni_jvs %}color-{{ configuration.priority }}{% elseif configuration.priority == 'primary' %}text-dark{% else %}text-muted{% endif %}" >
{% if attribute(configuration.title, currentLanguage) is defined %}{{ attribute(configuration.title, currentLanguage) }}
......@@ -17,7 +17,7 @@
</div>
{% for idp in configuration.identities %}
{% if muni_jvs %}<div class="margin-bottom-12 {% if loop.index0 >= configuration.number_shown %}idp-hidden vhide{% endif %}">{% endif %}
<div class="{% if muni_jvs %}margin-bottom-12{% endif %}{% if loop.index0 >= configuration.number_shown %} idp-hidden d-none vhide{% endif %}">
<button class="btn-individual-identity btn {% if muni_jvs %}btn-primary btn-border color-{{ configuration.priority }} hover-none-{{ configuration.priority }}{% else %}btn-{{ configuration.priority }} btn-lg{% endif %}" type="submit" name="idpentityid" value="{{ idp.upstream_idp }}">
{% if muni_jvs %}<span class="no-uppercase color-{{ configuration.priority }} individual-identity-span-wrap">{% endif %}
<img class="individual-identity-logo" {% if idp.background_color is defined %}style="background-color: {{ idp.background_color }}"{% endif %} src="{{ idp.logo }}" alt=""/>
......@@ -27,16 +27,16 @@
{% endif %}</span>
{% if muni_jvs %}</span>{% endif %}
</button>
{% if muni_jvs %}</div>{% endif %}
</div>
{% endfor %}
<input type="hidden" id="authstate" name="authstate" value="{{ authstate }}" />
<input type="hidden" id="source" name="source" value="{{ sp_source_name }}" />
<input type="hidden" name="authstate" value="{{ authstate }}" />
<input type="hidden" name="source" value="{{ sp_source_name }}" />
</form>
{% if configuration.identities|length > configuration.number_shown %}
<div class="text-center">
<button id="more-options" class="btn {% if muni_jvs %}btn-primary btn-s btn-white hover-none-primary{% else %}btn-outline-{{ configuration.priority }} btn-lg btn-more-options text-center border-0 text-decoration-underline{% endif %}" type="button">
<button class="btn more-options {% if muni_jvs %}btn-primary btn-s btn-white hover-none-primary{% else %}btn-outline-{{ configuration.priority }} btn-lg text-center border-0 text-decoration-underline{% endif %}" type="button" data-targetform="external-{{ component_index }}">
<span class="no-uppercase padding-zero">{{ '{campusmultiauth:more_options}'|trans }}{% if muni_jvs %}<span class="btn-icon icon icon-angle-down"></span>{% else %} <i class="fas fa-arrow-down"></i>{% endif %}</span>
</button>
</div>
......
......@@ -36,7 +36,7 @@
{% if component_configuration.name == 'local_login' %}
{% include '@campusmultiauth/includes/local-login.twig' with {'configuration': component_configuration} %}
{% elseif component_configuration.name == 'individual_identities' %}
{% include '@campusmultiauth/includes/individual-identities.twig' with {'configuration': component_configuration} %}
{% include '@campusmultiauth/includes/individual-identities.twig' with {'configuration': component_configuration, 'component_index': loop.index0} %}
{% elseif component_configuration.name == 'searchbox' %}
{% include '@campusmultiauth/includes/searchbox.twig' with {'configuration': component_configuration, 'component_index': loop.index0} %}
{% endif %}
......
......@@ -62,7 +62,12 @@ html, body {
margin-bottom: 12px;
}
.btn-more-options {
.more-options {
border-bottom: 1px solid #0000dc;
margin-bottom: 24px;
}
.framework_bootstrap5 .more-options {
width: 160px;
margin-top: -24px;
}
......@@ -71,7 +76,7 @@ html, body {
display: none;
}
#external {
.external {
margin-bottom: 24px;
}
......@@ -362,11 +367,6 @@ html, body {
margin-bottom: 24px;
}
#more-options {
border-bottom: 1px solid #0000dc;
margin-bottom: 24px;
}
body {
min-height: 100vh;
display: flex;
......
......@@ -6,9 +6,9 @@ function showElement(element) {
element.classList.remove('vhide', 'd-none');
}
function showMoreOptions() {
document.querySelectorAll('.idp-hidden').forEach(showElement);
hideElement(document.getElementById('more-options'));
function showMoreOptions(showButton) {
document.getElementById(showButton.dataset.targetform).querySelectorAll('.idp-hidden').forEach(showElement);
hideElement(showButton);
}
function selectizeScore() {
......@@ -83,9 +83,11 @@ function selectizeLoad(query, callback) {
}
document.addEventListener("DOMContentLoaded", function () {
var moreOptions = document.getElementById("more-options");
var moreOptions = document.querySelectorAll(".more-options");
if (moreOptions) {
moreOptions.addEventListener("click", showMoreOptions);
moreOptions.forEach(function(showButton){
showButton.addEventListener("click", showMoreOptions.bind(null, showButton));
});
}
var togglePassword = document.getElementById("toggle-password");
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment