WIP/Extended options - Add slider form control #2220

rickyosser · 2024-08-27T10:25:19Z

This adds the Fomantic-slider as a form-control.
A demo will be added shortly as well as some kind of behat tests.

There are a myriad of extra options that can be added, ie, vertical and colors and stuff.
If there is anything missing feel free to add or ask for it.

mvorisek · 2024-08-27T10:50:23Z

demos/form-control/Slider.php

+    public string $inputType = 'hidden';
+
+    /** The lowest value the slider can be. */
+    public int $min = 0;


Are we limited to integers by something?

No, I've changed this to float, but then the result is also returned in float.

We can easily allow int|float to accept integers over 2^53, the deeper question is if the values are correctly typecasted for attributes (machine data) and UI (for user). To verify this, the easiest test is to use Slider together with field with this https://github.com/atk4/ui/blob/5.2.0/demos/init-db.php#L55 DBAL type - you can use any demo model which use this type for all IDs.

demos/form-control/Slider.php

mvorisek · 2024-08-27T10:53:01Z

demos/form-control/Slider.php

+    private $slider;
+
+    /** @var object */
+    private $owner;


owner is stored in the parent API already

I can't find this, do you have an example? I just need to know how to find the parent object.

https://github.com/atk4/ui/blob/5.2.0/src/AbstractView.php#L19

mvorisek · 2024-08-27T10:53:27Z

demos/form-control/Slider.php

+    /** Whether the ticks and labels should be at the bottom. */
+    public bool $bottom = false;
+
+    /** @var object */


Suggested change

/** @var object */

/** @var View */

at least if general View type is needed

must be View not object|View, not only because we do not want to support general object, but also PHPStan will simplify object|View into object only

mvorisek · 2024-08-27T10:56:01Z

demos/form-control/Slider.php

+use Atk4\Ui\Js\JsFunction;
+use Atk4\Ui\Js\JsReload;
+
+class Slider extends Input


enabled/disabled/readonly demo should be added into demos/form-control/input2.php

and there should be probably a separate demo for Slicer + Behat tests are needed

I'll get to this in time...

mvorisek · 2024-08-27T11:01:24Z

demos/form-control/Slider.php

+    public int $labelDistance = 100;
+
+    /** Number of decimals to use with an unstepped slider. */
+    public int $decimalPlaces = 2;


How is this helpful vs. step?

decimalPlaces 2 Number of decimals to use with an unstepped slider
That is from the Fomantic doc, I don't know, just always use step! :)
We can always remove the option in the future.

mvorisek · 2024-08-27T11:02:03Z

demos/form-control/Slider.php

+    public bool $autoAdjustLabels = true;
+
+    /** The distance between labels. */
+    public int $labelDistance = 100;


When is this helpful? Does this affect CSS only?

Yes, but it also defines what labels will be shown, depending on space available.

mvorisek · 2024-08-27T11:02:14Z

demos/form-control/Slider.php

+    public $showLabelTicks = false;
+
+    /** Define smoothness when the slider is moving. */
+    public bool $smooth = false;


What is this?

It's for the movement of the thumb, if it's in steps between ticks or smooth scrolling.

mvorisek · 2024-08-27T11:03:00Z

demos/form-control/Slider.php

+    public bool $ticked = false;
+
+    /** Whether the slider should be labeled or not. */
+    public bool $labeled = false;


Isn't this controlled by something in Input or Control already?

No, you are thinking of caption, that's the info "before" the controller, labeled is if the slider should have text at the ticks or not.

mvorisek · 2024-08-27T11:04:04Z

demos/form-control/Slider.php

+
+    #[\Override]
+    protected function recursiveRender(): void
+    {
+        parent::recursiveRender();
+    }


Suggested change

#[\Override]

protected function recursiveRender(): void

{

parent::recursiveRender();

}

I'll remove it later, now I'm using it to check variables and classes after render.

mvorisek · 2024-08-27T11:05:10Z

demos/form-control/Slider.php

+
+        $this->owner = $this->getOwner();
+
+        $this->slider = View::addTo($this->owner)->addClass('ui slider');


see https://github.com/atk4/ui/blob/5.2.0/src/View.php#L50

demos/form-control/Slider.php

mvorisek · 2024-08-27T11:09:58Z

demos/form-control/Slider.php

+    public int $max = 10;
+
+    /** @var float|null The slider step. Set to 0 to disable step. */
+    public $step = 0;


Just a question for now - how feasible is histogram below the slider and non-liner steps or even non-numeric values (XS-S-M-L...)?

Yes, it's possible!
According to Fomantic https://fomantic-ui.com/modules/slider.html#custom-interpreted-labels it can be done with:

var labels = ["α", "β", "γ", "δ", "ε", "ζ", "η", "θ", "ι", "κ", "λ", "μ", "ν", "ξ", "ο", "π", "ρ", "σ/ς", "τ", "υ", "φ", "χ", "ψ", "ω"]; $('#interpretedlabel') .slider({ interpretLabel: function(value) { return labels[value]; } }) ;

As a matter of fact, all the options I've implemented, except this one is directly from Fomantic. I just broke out ticked, bottom align and labeled from the class and made those options. If some of them are funky, yes, I know, they can be removed if we deem the don't add anything. I just added it for completness for now.

@mvorisek, I think I need your help on this one. It seems that the function (interpretLabel) need to be existing before semantic.js (Fomantic-UI) is loaded. I've hacked a version of semantic.js to try this and it indeed added the custom labels then. This is not acceptable though as I know very well, it was just done for test.
I do need help though to add the function first on the page before loading Fomantic-UI. Maybe there is another way but I've already spent to much time on this without any workable solution.

It seems that the function (interpretLabel) need to be existing before semantic.js (Fomantic-UI) is loaded.

That seems weird to me. All user JS is evaluated "after page is fully loaded", so the elements are guaranteed to exists. And you can define a JS function before you setup the FUI slider by JS.

I do not understand the issue you are facing here.. If you need to define global JS code - to deduplicate long JS code - you can put the code in /js/*.js. If you need a small JS code per control, you should always use anonymous JS function.

@mvorisek I fixed it... Using JsFunction and JsExpression was the way to go but I had trouble with the array but using slice instead of addressing the item directly solved it.

… implement readOnly and disabled. Fixed so that class-data can be used on the slider from the code.

…o slider_form_controller

mvorisek · 2024-09-12T06:45:54Z

demos/form-control/input2.php

@@ -53,6 +53,61 @@
 $group->addControl('radio_read', [Form\Control\Radio::class, 'readOnly' => true], ['enum' => ['one', 'two', 'three']])->set('two');
 $group->addControl('radio_disb', [Form\Control\Radio::class, 'disabled' => true], ['enum' => ['one', 'two', 'three']])->set('two');

+$group = $form->addGroup('Sliders');


I checkouted this PR and my feelings are the current state is too wild:

because the UX is very different to other controls - for example the vertical space is too large and the control is too wide,

there are too many options - for example labels above the horizontal axis/line, the atk4/ui framework aims to provide unified and robust developer experience, not 1:1 FUI port - think this way, in the future (in a decade or so), the FUI might became obsolete and we should be able to replace FUI and still support all supported options

So for now, please put this complex PR on hold and open another PR with minimal Slider impl. Just Slider class with normal/RO/disabled support and min/max value. This should be presented in demos/form-control/input2.php and min/max options in demos/form-control/slider.php and tested with Behat tests.

Hi everyone, just as food for thought (courtesy of @abbadon1334) a minimal implementation of Fomantic-UI slider sample code:

$slider = $this->add([View::class] )->addClass('ui labeled ticked small slider'); $slider->js(true)->slider([ "min" => 0, "max" => 45, 'showThumbTooltip' => 'true', 'tooltipConfig' => ['position' => 'top center', 'variation' => 'small visible blue'], "onChange" => new \Atk4\Ui\Js\JsFunction(['v'], [ new \Atk4\Ui\Js\JsExpression($field->js()->find('input')->jsRender().".val(v)")]), ]);

So for now, please put this complex PR on hold and open another PR with minimal Slider impl. Just Slider class with normal/RO/disabled support and min/max value. This should be presented in demos/form-control/input2.php and min/max options in demos/form-control/slider.php and tested with Behat tests.

@rickyosser would you like to work on the first minimal implementation?

rickyosser · 2024-11-28T09:45:50Z

Hi, yes, though I've been busy the last months with other work. I hope to have some more time around new years, I've done some changes already which aren't pushed yet, I'll remove the more complex options next, except those I need for my project. Thanks for asking, Rickard

Added Slider Form-control.

26b5b66

mvorisek reviewed Aug 27, 2024

View reviewed changes

demos/form-control/Slider.php Outdated Show resolved Hide resolved

mvorisek reviewed Aug 27, 2024

View reviewed changes

demos/form-control/Slider.php Outdated Show resolved Hide resolved

mvorisek reviewed Aug 27, 2024

View reviewed changes

rickyosser added 16 commits August 27, 2024 17:40

Added demo to input2.php.

523826d

Fixed a bunch of things regarding adding data to the array as well as…

f20ffd5

… implement readOnly and disabled. Fixed so that class-data can be used on the slider from the code.

Added Slider to demo.

1bd2d1f

Code-style fixes.

2c80ee3

Code-style fixes.

9305eed

Code-style fixes.

73ded47

Added embryo of behat-tests.

a0d5fb0

Fixed embryo of behat-tests.

1ce3092

Added custom label function. It's not finished.

02d3e00

Merge branch 'slider_form_controller' of github.com:rickyosser/ui int…

1320399

…o slider_form_controller

Behat changes.

9c54381

Trying to get custom labels to work.

2546f87

Fixed customLabels for slider.

641c54b

Simplification of the code.

62a001b

Coding style fixes in demo.

91eed9e

Coding style fixes in demo.

27c5895

rickyosser added 3 commits September 4, 2024 12:37

Coding style fixes in demo.

07790e8

Coding style fixes in demo.

313f118

Returned to using the array directly with spaces between brackets.

3718627

mvorisek changed the title ~~Added Slider Form-control.~~ Add slider form control Sep 12, 2024

mvorisek marked this pull request as draft September 12, 2024 06:44

mvorisek reviewed Sep 12, 2024

View reviewed changes

mvorisek changed the title ~~Add slider form control~~ WIP/Extended options - Add slider form control Sep 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP/Extended options - Add slider form control #2220

WIP/Extended options - Add slider form control #2220

rickyosser commented Aug 27, 2024

mvorisek Aug 27, 2024

rickyosser Aug 28, 2024

mvorisek Aug 28, 2024

mvorisek Aug 27, 2024

rickyosser Aug 28, 2024

mvorisek Aug 28, 2024

mvorisek Aug 27, 2024

mvorisek Aug 28, 2024

mvorisek Aug 27, 2024

rickyosser Aug 28, 2024

mvorisek Aug 27, 2024

rickyosser Aug 28, 2024

mvorisek Aug 27, 2024

rickyosser Aug 28, 2024

mvorisek Aug 27, 2024

rickyosser Aug 28, 2024 •

edited

Loading

mvorisek Aug 27, 2024

rickyosser Aug 28, 2024

mvorisek Aug 27, 2024

rickyosser Aug 28, 2024

mvorisek Aug 27, 2024

mvorisek Aug 27, 2024

rickyosser Aug 27, 2024

rickyosser Sep 3, 2024

mvorisek Sep 4, 2024

rickyosser Sep 4, 2024

mvorisek Sep 12, 2024

mkrecek234 Sep 12, 2024

mvorisek Nov 28, 2024

rickyosser commented Nov 28, 2024 via email •

edited by mvorisek

Loading


		$this->owner = $this->getOwner();

		$this->slider = View::addTo($this->owner)->addClass('ui slider');

WIP/Extended options - Add slider form control #2220

Are you sure you want to change the base?

WIP/Extended options - Add slider form control #2220

Conversation

rickyosser commented Aug 27, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rickyosser Aug 28, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rickyosser commented Nov 28, 2024 via email • edited by mvorisek Loading

rickyosser Aug 28, 2024 •

edited

Loading

rickyosser commented Nov 28, 2024 via email •

edited by mvorisek

Loading