bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tidy up code

Browse Source
This commit is contained in:
Jorge Manrubia
2025-06-05 08:54:31 +02:00
parent 6eece93f10
commit b9dd7fe808
3 changed files with 59 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/controllers/knob_controller.js
+23 -13
View File
@@ -3,26 +3,36 @@ import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = [ "field", "option", "slider" ]
optionChanged(e) {
this.#setIndex(e.target.getAttribute("data-index"))
connect() {
this.#index = this.#selectedOption.dataset.index
}
sliderChanged(e) {
const index = e.target.value
this.#setIndex(index)
this.#setValue(index)
optionChanged({ target }) {
this.#index = target.dataset.index
}
#setIndex(index) {
sliderChanged({ target }) {
this.#index = target.value
}
get #selectedOption() {
return this.optionTargets.find(option => {
return option.checked
})
}
set #index(index) {
this.fieldTarget.style.setProperty("--knob-index", `${index}`);
this.sliderTarget.value = index;
this.sliderTarget.value = index
}
#setValue(index) {
const option = this.optionTargets.find(option => {
return option.dataset.index === index;
});
set #value(index) {
this.#optionForIndex(index).checked = true
}
option.checked = true;
#optionForIndex(index) {
return this.optionTargets.find(option => {
return option.dataset.index === index;
})
}
}
app/views/entropy/_auto_close.html.erb
+12 -12
View File
@@ -4,24 +4,24 @@
<div class="flex flex-column full-width" style="flex-basis: 48%">
<strong>Cards in Considering</strong>
<p class="txt-x-small margin-none-block-start">Auto-close after…</p>
<%= form_with model: model, url: url || collection_path(model), data: { controller: "form" } do |form| %>
<%= render "entropy/knob",
knob_options: collection_auto_close_options.map(&:first).map(&:to_i),
label: "Days until auto-close",
period: model.auto_close_period,
field_name: url ? "entropy_configuration[auto_close_period]" : "collection[auto_close_period]" %>
<%= form_with model: model, url: url, data: { controller: "form" } do |form| %>
<%= render "entropy/knob",
form: form,
name: :auto_close_period,
knob_options: collection_auto_close_options.map(&:first).map(&:to_i),
label: "Days until auto-close" %>
<% end %>
</div>
<div class="separator margin-block-half" style="--border-color: var(--color-ink-light); min-block-size: 3lh;"></div>
<div class="flex flex-column full-width" style="flex-basis: 48%">
<strong>Cards in Doing</strong>
<p class="txt-x-small margin-none-block-start">Fall back to Considering after…</p>
<%= form_with model: model, url: url || collection_path(model), data: { controller: "form" } do |form| %>
<%= render "entropy/knob",
knob_options: collection_auto_close_options.map(&:first).map(&:to_i),
label: "Days until auto-close",
period: model.auto_reconsider_period,
field_name: url ? "entropy_configuration[auto_reconsider_period]" : "collection[auto_reconsider_period]" %>
<%= form_with model: model, url: url, data: { controller: "form" } do |form| %>
<%= render "entropy/knob",
form: form,
name: :auto_reconsider_period,
knob_options: collection_auto_close_options.map(&:first).map(&:to_i),
label: "Days until auto-close" %>
<% end %>
</div>
</div>
app/views/entropy/_knob.html.erb
+24 -33
View File
@@ -1,42 +1,33 @@
<%
name = label.parameterize
default_index = if period
knob_options.index(period.to_i / 1.day)
else
knob_options.index(Entropy::Configuration.default.auto_close_period.to_i / 1.day)
end
<%
period = form.object.send(name)
current_index = knob_options.index(period.to_i / 1.day)
%>
<fieldset class="knob" data-controller="knob" data-knob-target="field" style="--knob-options: <%= knob_options.length %>; --knob-index: <%= default_index %>;">
<div class="position-relative" role="radiogroup" aria-labelledby="<%= name %>">
<% knob_options.each_with_index do |value, i| %>
<label class="knob__option" style="--i: <%= i %>">
<input
<%= "checked" if value == knob_options[default_index] %>
data-action="change->knob#optionChanged change->form#submit"
data-index="<%= i %>"
data-knob-target="option"
name="<%= field_name %>"
type="radio"
value="<%= value.days %>"
/>
<fieldset class="knob" data-controller="knob" data-knob-target="field" style="--knob-options: <%= knob_options.length %>; --knob-index: <%= current_index %>">
<div class="position-relative" role="radiogroup" aria-labelledby="<%= dom_id(form.object, name) %>">
<% knob_options.each_with_index do |value, index| %>
<label class="knob__option" style="--i: <%= index %>">
<%= form.radio_button name,
value.days,
data: {
action: "change->knob#optionChanged change->form#submit",
index: index,
knob_target: "option"
} %>
<span><%= value %></span>
</label>
<% end %>
<input
aria-hidden
class="knob__slider"
data-action="input->knob#sliderChanged change->form#submit"
data-knob-target="slider"
max="<%= knob_options.length - 1 %>"
min="0"
type="range"
value="<%= default_index %>"
/>
<%= form.range_field :slider,
class: "knob__slider",
data: { action: "input->knob#sliderChanged change->form#submit", knob_target: "slider" },
"aria-hidden": true,
max: knob_options.length - 1,
min: 0
%>
<div class="knob__knob" aria-hidden></div>
</div>
<div id="<%= name %>" class="knob__label">Days</div>
</fieldset>
<div id="<%= dom_id(form.object, name) %>" class="knob__label">Days</div>
</fieldset>