Skip to content

WIP/Extended options - Add slider form control #2220

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

Draft
wants to merge 34 commits into
base: develop
Choose a base branch
from
Draft

WIP/Extended options - Add slider form control #2220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
26b5b66
Added Slider Form-control.
rickyosser Aug 27, 2024
523826d
Added demo to input2.php.
rickyosser Aug 27, 2024
f20ffd5
Fixed a bunch of things regarding adding data to the array as well a…
rickyosser Aug 28, 2024
1bd2d1f
Added Slider to demo.
rickyosser Aug 28, 2024
2c80ee3
Code-style fixes.
rickyosser Aug 28, 2024
9305eed
Code-style fixes.
rickyosser Aug 28, 2024
73ded47
Code-style fixes.
rickyosser Aug 28, 2024
a0d5fb0
Added embryo of behat-tests.
rickyosser Aug 28, 2024
1ce3092
Fixed embryo of behat-tests.
rickyosser Aug 28, 2024
02d3e00
Added custom label function. It's not finished.
rickyosser Sep 1, 2024
1320399
Merge branch 'slider_form_controller' of github.com:rickyosser/ui int…
rickyosser Sep 1, 2024
9c54381
Behat changes.
rickyosser Sep 1, 2024
2546f87
Trying to get custom labels to work.
rickyosser Sep 2, 2024
641c54b
Fixed customLabels for slider.
rickyosser Sep 4, 2024
62a001b
Simplification of the code.
rickyosser Sep 4, 2024
91eed9e
Coding style fixes in demo.
rickyosser Sep 4, 2024
27c5895
Coding style fixes in demo.
rickyosser Sep 4, 2024
07790e8
Coding style fixes in demo.
rickyosser Sep 4, 2024
313f118
Coding style fixes in demo.
rickyosser Sep 4, 2024
3718627
Returned to using the array directly with spaces between brackets.
rickyosser Sep 6, 2024
946f736
Merge branch 'atk4:develop' into slider_form_controller
rickyosser Apr 20, 2025
c51fe87
Fixed vertical slider for complex version.
rickyosser Apr 20, 2025
fe4ce8d
Merge branch 'atk4:develop' into slider_form_controller
rickyosser Apr 21, 2025
03dfb2a
Added new layout for Vertical sliders. Fixed demo. Behat still needed…
rickyosser Apr 21, 2025
0c0a7db
Merge branch 'slider_form_controller' of github.com:rickyosser/ui int…
rickyosser Apr 21, 2025
7f5ae5a
Fixed coding-style.
rickyosser Apr 22, 2025
817ddf2
Fixed coding-style.
rickyosser Apr 22, 2025
7f40ad0
Fixed error in demo, checking styles.
rickyosser Apr 22, 2025
99b314e
Fixed coding style, checking coding style.
rickyosser Apr 22, 2025
e853926
Fixed coding style, checking coding style.
rickyosser Apr 22, 2025
5b68c47
Test of define.
rickyosser Apr 22, 2025
48aa458
Test of define.
rickyosser Apr 22, 2025
faa508f
Fixes for StaticAnalysis.
rickyosser Apr 22, 2025
a3d8366
Fixes for StaticAnalysis.
rickyosser Apr 22, 2025
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
56 changes: 56 additions & 0 deletions demos/form-control/input2.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,62 @@
$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');
Copy link
Member

@mvorisek mvorisek Sep 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

@mkrecek234 mkrecek234 Sep 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)")]),
                ]);

Copy link
Member

@mvorisek mvorisek Nov 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Contributor Author

@rickyosser rickyosser Apr 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I've resumed work on this control again, I will do a less complex version but, ranged has to be in there as that is used in my application to be able to select an interval.

There are a few other options which might be interesting to add as well but that can be done after doing the simple-slider.
I will continue to maintain the more complex version as I know a few cases where this might be interesting to use. Especially with vertical sliders for building day-based rules and stuff.

Copy link
Contributor Author

@rickyosser rickyosser Apr 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I'm going through the options and I have some questions on what you @mvorisek want as the default (only) behaviour?

Take these examples:
Lables (Only below or above?)
Ticks or no ticks?
Custom labels (If no there is no way of setting the labels excepft for numbers).
Should the control handle setting up the classes as some need to have specific order to work?

I'll start with removing vertical slider as I'm not using it at the moment.
The reason for asking is that Slider in itself is a very potent tool to simplify and visualize an input where we have pre-defined inputs or a need to get a range within pre-defined limits. Other controls don't have that impact at all and using ie regular input controls would add a plethora of complexities to make those limits or pre-defined selections legal. Well, a simple slider replaces a dropdown in certain cases but with a more visual approach. A ranged slider could be replaced with 2 dropdowns but would not give the user a visual representation of the limits of the form. Programming those dropdowns would also be of a more complex nature than having a complex slider...

Just a couple of thoughts... :)


$form->addControl(
'slider_norm',
[
Form\Control\Slider::class,
'labeled' => true,
'ticked' => true,
'bottom' => true,
'min' => 0,
'max' => 1,
'step' => 0.1,
'start' => 0.5,
'smooth' => true,
'color' => 'green',
'caption' => 'Normal Slider',
]
);

$form->addControl(
'slider_read',
[
Form\Control\Slider::class,
'readOnly' => true,
'labeled' => true,
'ticked' => true,
'bottom' => false,
'min' => 1,
'max' => 5,
'step' => 1,
'start' => 2,
'smooth' => true,
'color' => 'yellow',
'caption' => 'Read Only Slider',
]
);

$disabledSlider = $form->addControl(
'slider_disb',
[
Form\Control\Slider::class,
'disabled' => true,
'labeled' => true,
'ticked' => true,
'bottom' => false,
'min' => 1,
'max' => 10,
'step' => 1,
'start' => 5,
'smooth' => true,
'caption' => 'Disabled Slider',
]
);
// We can add classes to a slider by doing:
$disabledSlider->input->addClass('red'); // @phpstan-ignore property.notFound

$group = $form->addGroup('File upload');

$onDelete = static function () {};
Expand Down
172 changes: 172 additions & 0 deletions demos/form-control/slider.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
<?php

declare(strict_types=1);

namespace Atk4\Ui\Demos;

use Atk4\Ui\App;
use Atk4\Ui\Form;
use Atk4\Ui\Header;

/** @var App $app */
require_once __DIR__ . '/../init-app.php';

Header::addTo($app, ['Sliders', 'size' => 2]);

$form = Form::addTo($app);

$form->addControl(
'slider_simple1',
[
Form\Control\Slider::class,
'min' => 0,
'max' => 10,
'step' => 1,
'start' => 5,
'caption' => 'Simple Slider',
]
);

$slider2 = $form->addControl(
'slider_simple2',
[
Form\Control\Slider::class,
'labeled' => true,
'ticked' => true,
'min' => 0,
'max' => 10,
'step' => 1,
'start' => 5,
'caption' => 'Blue ticked and labeled simple slider',
]
);
$slider2->input->addClass('blue'); // @phpstan-ignore property.notFound

$form->addControl(
'slider_simple3',
[
Form\Control\Slider::class,
'labeled' => true,
'ticked' => true,
'min' => 0,
'max' => 10,
'step' => 1,
'start' => 5,
'smooth' => true,
'caption' => 'Smooth Blue ticked and labeled simple slider',
]
);

$form->addControl(
'slider_ranged',
[
Form\Control\Slider::class,
'labeled' => true,
'ticked' => true,
'min' => 0,
'max' => 10,
'step' => 1,
'start' => 3,
'end' => 6,
'smooth' => true,
'showThumbTooltip' => true,
'tooltipConfig' => ['position' => 'top center', 'variation' => 'big blue'],
'color' => 'blue',
'caption' => 'Smooth Blue, ticked and labeled with tool-tips Ranged slider',
]
);

$form->addControl(
'slider_custom',
[
Form\Control\Slider::class,
'labeled' => true,
'ticked' => true,
'min' => 0,
'max' => 6,
'step' => 1,
'start' => 2,
'smooth' => true,
'color' => 'green',
'customLabels' => [
'XS', 'S', 'M', 'L', 'XL', '2XL', '3XL',
],
'caption' => 'Smooth Green, ticked and custom labeled slider',
]
);

$group = $form->addGroup(
[
'inline' => false,
// 'width' => 'six',
],
);

$h1 = Header::addTo($group, ['Vertical Sliders', 'size' => 3]);

$group->addControl(
'slider_vertical',
[
Form\Control\Slider::class,
'labeled' => true,
'ticked' => true,
'min' => 0,
'max' => 6,
'step' => 1,
'start' => 2,
'smooth' => true,
'color' => 'red',
'vertical' => true,
'reversed' => true,
'size' => 'small',
'caption' => 'Smooth Red, ticked and vertical slider',
'width' => 'two',
]
);

$group->addControl(
'slider_vertical_right',
[
Form\Control\Slider::class,
'labeled' => true,
'ticked' => true,
'min' => 0,
'max' => 6,
'step' => 1,
'start' => 3,
'smooth' => true,
'color' => 'yellow',
'vertical' => true,
'reversed' => true,
'verticalHeight' => 300,
'caption' => 'Smooth yellow, ticked, sized, custom height, vertical slider',
'width' => 'two',
]
);

$group->addControl(
'slider_vertical_right_ranged',
[
Form\Control\Slider::class,
'labeled' => true,
'ticked' => true,
'min' => 0,
'max' => 6,
'step' => 1,
'start' => 2,
'end' => 6,
'smooth' => true,
'color' => 'green',
'vertical' => true,
'reversed' => true,
'verticalHeight' => 400,
'verticalRightAligned' => false,
'size' => 'large',
'caption' => 'Smooth green, ticked, large, custom heigth, vertical not right aligned slider',
'width' => 'two',
]
);

$form->onSubmit(static function (Form $form) {
print_r($form->entity->get());
});
1 change: 1 addition & 0 deletions demos/init-app.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,7 @@ public static function get_class(\Closure $createAnonymousClassFx): string
$layout->addMenuItem(['Multi Line'], [$path . 'multiline'], $menu);
$layout->addMenuItem(['Tree Selector'], [$path . 'tree-item-selector'], $menu);
$layout->addMenuItem(['Scope Builder'], [$path . 'scope-builder'], $menu);
$layout->addMenuItem(['Slider'], [$path . 'slider'], $menu);

$path = $demosUrl . 'collection/';
$menu = $layout->addMenuGroup(['Data Collection', 'icon' => 'table']);
Expand Down
Loading
Loading