Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select profile if any of its choices are interacted with #729

Merged
merged 8 commits into from
May 18, 2023
Merged

Select profile if any of its choices are interacted with #729

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
969fcba
select radio when corresponding select is changed, addresses #696
batpad May 1, 2023
c448154
minor, edit comment and format JS
batpad May 1, 2023
bf760b4
bind to click event, not change, so profile gets selected even when o…
batpad May 17, 2023
36368cc
add click-to-select profile to label as well
batpad May 17, 2023
79f54b7
cleanup formatting, comments
batpad May 17, 2023
9904a70
use <span> instead of <label>, remove js to handle clicking on labels…
batpad May 17, 2023
28b3281
autoformatting
batpad May 17, 2023
25bf703
revert to using label instead of span, add back form-control class to…
batpad May 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions kubespawner/templates/form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
<div class="form-group" id="kubespawner-profiles-list">
{%- for profile in profile_list %}
{#- Wrap everything in a label tag so clicking anywhere selects the option #}
<label for="profile-item-{{ profile.slug }}" class="profile">
<label for="profile-item-{{ profile.slug }}"
class="profile js-profile-label">
<div class="radio">
<input type="radio"
name="profile"
Expand All @@ -17,8 +18,10 @@ <h3>{{ profile.display_name }}</h3>
<div>
{%- for k, option in profile.profile_options.items() %}
<div class="option">
<label for="profile-option-{{ profile.slug }}-{{ k }}">{{ option.display_name }}</label>
<select name="profile-option-{{ profile.slug }}-{{ k }}" class="form-control">
<label for="profile-option-{{ profile.slug }}-{{ k }}"
class="js-profile-option-label">{{ option.display_name }}</label>
<select name="profile-option-{{ profile.slug }}-{{ k }}"
class="form-control js-profile-option-select">
{%- for k, choice in option['choices'].items() %}
<option value="{{ k }}" {% if choice.default %}selected{% endif %}>{{ choice.display_name }}</option>
{%- endfor %}
Expand All @@ -31,3 +34,11 @@ <h3>{{ profile.display_name }}</h3>
</label>
{%- endfor %}
</div>
<script>
$('.js-profile-option-select, .js-profile-option-label').click(function() {
// we need this bit of JS to select the profile when a <select> inside is clicked.
$(this).parents('.js-profile-label')
.find('input[type=radio]')
.prop('checked', true);
});
</script>