-
Notifications
You must be signed in to change notification settings - Fork 274
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
03ca54e
commit 7df1e83
Showing
28 changed files
with
613 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 0 additions & 11 deletions
11
pgml-dashboard/src/components/cards/newsletter_subscribe/newsletter_subscribe.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| use crate::components::stimulus::StimulusTarget as Target; | ||
| use pgml_components::component; | ||
| use sailfish::TemplateOnce; | ||
|
|
||
| #[derive(Default)] | ||
| pub enum InterpolationType { | ||
| #[default] | ||
| Linear, | ||
| Exponential, | ||
| } | ||
|
|
||
| impl ToString for InterpolationType { | ||
| fn to_string(&self) -> String { | ||
| match self { | ||
| InterpolationType::Linear => String::from("linear"), | ||
| InterpolationType::Exponential => String::from("exponential"), | ||
| } | ||
| } | ||
| } | ||
|
|
||
| impl From<&str> for InterpolationType { | ||
| fn from(s: &str) -> Self { | ||
| match s { | ||
| "linear" => InterpolationType::Linear, | ||
| "exponential" => InterpolationType::Exponential, | ||
| _ => InterpolationType::Linear, | ||
| } | ||
| } | ||
| } | ||
|
|
||
| #[derive(TemplateOnce, Default)] | ||
| #[template(path = "inputs/range/template.html")] | ||
| pub struct Range { | ||
| color: String, | ||
| min: i32, | ||
| max: i32, | ||
| interpolation_type: InterpolationType, | ||
| target: Target, | ||
| initial_value: i32, | ||
| } | ||
|
|
||
| impl Range { | ||
| pub fn new() -> Range { | ||
| Range { | ||
| color: String::from("slate"), | ||
| min: 1000, | ||
| max: 1000000, | ||
| interpolation_type: InterpolationType::Linear, | ||
| target: Target::new(), | ||
| initial_value: 0, | ||
| } | ||
| } | ||
|
|
||
| pub fn color(mut self, color: &str) -> Self { | ||
| self.color = color.to_string(); | ||
| self | ||
| } | ||
|
|
||
| pub fn min(mut self, min: i32) -> Self { | ||
| self.min = min; | ||
| self | ||
| } | ||
|
|
||
| pub fn max(mut self, max: i32) -> Self { | ||
| self.max = max; | ||
| self | ||
| } | ||
|
|
||
| pub fn interpolation_type(mut self, interpolation_type: &str) -> Self { | ||
| self.interpolation_type = InterpolationType::from(interpolation_type); | ||
| self | ||
| } | ||
|
|
||
| pub fn target(mut self, target: Target) -> Self { | ||
| self.target = target; | ||
| self | ||
| } | ||
|
|
||
| pub fn initial_value(mut self, initial_value: i32) -> Self { | ||
| self.initial_value = initial_value; | ||
| self | ||
| } | ||
| } | ||
|
|
||
| component!(Range); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| div[data-controller="inputs-range"] { | ||
| // This allows line overhang for rounding range edges. | ||
| .overlay-offset { | ||
| width: calc(100% - 4px); | ||
| margin-left: 2px; | ||
| } | ||
|
|
||
| .line { | ||
| width: 100%; | ||
| height: 5px; | ||
| position: absolute; | ||
| top: 11px; | ||
| border-radius: 1rem; | ||
| } | ||
|
|
||
| .grab-brightness { | ||
| filter: brightness(90%) !important; | ||
| } | ||
|
|
||
| .range-container { | ||
| position: relative; | ||
|
|
||
| &:hover { | ||
| .line { | ||
| filter: brightness(110%); | ||
| } | ||
|
|
||
| .active-color { | ||
| filter: brightness(110%); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Quick resize fix. This may become a global change later. | ||
| .input-group { | ||
| padding: 8px; | ||
| } | ||
|
|
||
| @mixin color_dependent($color) { | ||
| .line { | ||
| background: linear-gradient(to right, #{$color} 5%, #{$form-range-track-color} 5%); | ||
| } | ||
|
|
||
| .form-range { | ||
| & { | ||
| color: #{$color}; | ||
| } | ||
| } | ||
| } | ||
| .slate { | ||
| @include color_dependent($slate-shade-100); | ||
| } | ||
| .neon { | ||
| @include color_dependent($neon-shade-100); | ||
| } | ||
| } |
91 changes: 91 additions & 0 deletions
91
pgml-dashboard/src/components/inputs/range/range_controller.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import { Controller } from "@hotwired/stimulus"; | ||
|
|
||
| export default class extends Controller { | ||
| static targets = ["range", "line"]; | ||
|
|
||
| static values = { | ||
| interpolationType: String, | ||
| min: Number, | ||
| max: Number, | ||
| initial: Number, | ||
| }; | ||
|
|
||
| static outlets = []; | ||
|
|
||
| initialize() {} | ||
|
|
||
| connect() { | ||
| // console.log("range connected", this.initialValue) | ||
| this.rangeTarget.value = | ||
| this.interpolationTypeValue === "exponential" | ||
| ? this.exponentialInterpolationSolveX(this.initialValue) | ||
| : this.linearInterpolationSolveX(this.initialValue); | ||
| } | ||
|
|
||
| onGrab() { | ||
| if (this.hasLineTarget) { | ||
| this.lineTarget.classList.add("grab-brightness"); | ||
| } | ||
| } | ||
|
|
||
| onRelease() { | ||
| if (this.hasLineTarget) { | ||
| this.lineTarget.classList.remove("grab-brightness"); | ||
| } | ||
| } | ||
|
|
||
| updateSlider(e) { | ||
| this.rangeTarget.value = | ||
| this.interpolationTypeValue === "exponential" | ||
| ? this.exponentialInterpolationSolveX(e.detail) | ||
| : this.linearInterpolationSolveX(e.detail); | ||
| } | ||
|
|
||
| sliderMoved() { | ||
| this.dispatch("sliderMoved", { | ||
| detail: | ||
| this.interpolationTypeValue === "exponential" | ||
| ? this.exponentialInterpolation(this.rangeTarget.value) | ||
| : this.linearInterpolation(this.rangeTarget.value), | ||
| }); | ||
| } | ||
|
|
||
| exponentialInterpolation(value) { | ||
| if (value < 1) { | ||
| return 0; | ||
| } | ||
|
|
||
| let minValue = this.minValue > 1 ? this.minValue : 1; | ||
|
|
||
| let pow = value / 100; | ||
| let out = minValue * Math.pow(this.maxValue / minValue, pow); | ||
| return parseInt(Number(out.toPrecision(3))); | ||
| } | ||
|
|
||
| exponentialInterpolationSolveX(value) { | ||
| if (value < 1) { | ||
| return this.linearInterpolationSolveX(value); | ||
| } | ||
|
|
||
| let minValue = this.minValue > 1 ? this.minValue : 1; | ||
|
|
||
| let numerator = Math.log(value / minValue); | ||
| let denominator = Math.log(this.maxValue / minValue); | ||
| let out = (numerator / denominator) * 100; | ||
| // console.log(numerator, denominator, out, Number(out.toPrecision(3))) | ||
| return parseInt(Number(out.toPrecision(3))); | ||
| } | ||
|
|
||
| linearInterpolation(value) { | ||
| let out = (this.maxValue - this.minValue) * (value / 100) + this.minValue; | ||
| return parseInt(Number(out.toPrecision(3))); | ||
| } | ||
|
|
||
| linearInterpolationSolveX(value) { | ||
| // console.log("linear solve x ", value, this.minValue, this.maxValue) | ||
| let out = ((value - this.minValue) / (this.maxValue - this.minValue)) * 100; | ||
| return parseInt(Number(out.toPrecision(3))); | ||
| } | ||
|
|
||
| disconnect() {} | ||
| } |
Oops, something went wrong.