From 787797232bf05148e02455192335be23d51b96f8 Mon Sep 17 00:00:00 2001
From: Jan Grewe <jan@faked.org>
Date: Wed, 7 Jun 2023 00:44:28 +0200
Subject: [PATCH] hide UI elements not needed for current color mode
---
data_src/index.html | 8 ++++----
data_src/main.js | 17 ++++++++++++++---
2 files changed, 18 insertions(+), 7 deletions(-)
diff --git a/data_src/index.html b/data_src/index.html
index 2f81ac2..523b36a 100644
--- a/data_src/index.html
+++ b/data_src/index.html
@@ -36,22 +36,22 @@
<!-- color mode -->
<div class="row mb-3 px-3">
<div class="btn-group" role="group">
- <input type="radio" class="btn-check btnColorMode" id="btnColorMode_0" data-mode="0" autocomplete="off" disabled>
+ <input type="radio" class="btn-check btnColorMode" id="btnColorMode_0" data-mode="0" data-control="#collapseColorpicker" autocomplete="off" disabled>
<label class="btn btn-outline-primary" for="btnColorMode_0">Static</label>
<input type="radio" class="btn-check btnColorMode" id="btnColorMode_1" data-mode="1" autocomplete="off" disabled>
<label class="btn btn-outline-primary" for="btnColorMode_1">Simple</label>
- <input type="radio" class="btn-check btnColorMode" id="btnColorMode_2" data-mode="2" autocomplete="off" disabled>
+ <input type="radio" class="btn-check btnColorMode" id="btnColorMode_2" data-mode="2" data-control="#collapseDecay" autocomplete="off" disabled>
<label class="btn btn-outline-primary" for="btnColorMode_2">Dynamic</label>
</div>
</div>
<!-- // color mode -->
- <div class="row mb-2 px-3">
+ <div class="row mb-2 px-3 collapse collapseSettings" id="collapseColorpicker">
<div id="colorpicker" class="d-flex justify-content-center"></div>
</div>
- <div class="row mb-2 px-3">
+ <div class="row mb-2 px-3 collapse collapseSettings" id="collapseDecay">
<label for="rangeDecay" class="col-form-label">Cell Aging</label>
<input type="range" class="form-range rangeSetting" id="rangeDecay" data-name="colorDecay" min="1"
max="100" steps="1" disabled>
diff --git a/data_src/main.js b/data_src/main.js
index 3cec1f3..9d4879c 100644
--- a/data_src/main.js
+++ b/data_src/main.js
@@ -27,7 +27,7 @@ $(window).on('load', function () {
colorPicker.on('input:end', function (color) {
settings.color = color.rgb;
sendSettings();
- });
+ });
});
$(document).on('change', '.rangeSetting', function () {
@@ -48,6 +48,12 @@ $(document).on('change', '.rangeSetting', function () {
});
$('.btnColorMode').on('click', function () {
+ $('.collapseSettings').each(function () {
+ bootstrap.Collapse.getInstance($(this)).hide();
+ });
+ if ($(this).data('control')) {
+ bootstrap.Collapse.getInstance($(this).data('control')).show();
+ }
$('.btnColorMode').not(this).prop('checked', false);
var mode = $(this).data('mode');
settings['colorMode'] = mode;
@@ -57,7 +63,7 @@ $('.btnColorMode').on('click', function () {
$('.btnAction').on('click', function () {
var action = $(this).data('action');
sendAction(action);
- if(modalConfirm._isShown) {
+ if (modalConfirm._isShown) {
modalConfirm.hide();
}
});
@@ -165,7 +171,7 @@ function loadSettings(data) {
colorPicker.color.rgb = data.color;
enabledUI(true);
$('.btnColorMode').prop('checked', false);
- $('#btnColorMode_'+settings.colorMode).prop('checked', true);
+ $('#btnColorMode_' + settings.colorMode).prop('checked', true);
$('#rangeDecay').val(data.colorDecay);
$('#rangeBrightness').val(mapRange(data.brightness, 8, 255, 1, 100));
$('#rangeSpeed').val(mapRange(data.interval, 1000, 10, 1, 100));
@@ -206,3 +212,8 @@ function mapRange(number, inMin, inMax, outMin, outMax) {
}
const modalConfirm = new bootstrap.Modal('#modalConfirm', {});
+
+const collapseElements = document.querySelectorAll('.collapseSettings');
+const collapseList = [...collapseElements].map(collapseEl => new bootstrap.Collapse(collapseEl, {
+ toggle: false,
+}));
--
GitLab