[#25162] - [4.0] Colorpicker
- Closed
- 1 Aug 2020
- Medium
- Build: 4.0-dev
- # 25162
- Diff
- brianteeman:4color
- Pending Hound Hound is busy sniffing around... Details
User tests: Successful: Unsuccessful:
With the dropping of support for IE11 we can now finally start to use more browser native functionality. This PR completely drops the existing javascript solutions for a colour picker and replaces them all with a pure native html 5 colour picker. Unlike the current (broken) colourpickers this requires almost zero support or technical skills to maintain.
Javascript (ES5, ES6, jQuery)
No javascript is used!!
Accessibility
The colourpicker is completely accessible across all devices and browsers and when using any assistive technology. We don't need to do anything to maintain this accessibility as the browsers do it for us.
Translation
The colourpicker is completely localised across all devices and browsers. We don't need to do anything to maintain the translations as the browsers do it for us.
Colourpicker display
No code - it's all from the browser. This ensures a familiar ui. As more software drops IE support it will become even more familiar as everyone stops using external scripts
Field Display
As well as adding some styling to the button to make it visibly consistent I have added a text representation of the color - see ToDo for further improvement suggestions
Breaking change
Only supports RGB and HSL colours. RGBA is not supported but it has been broken for a long time with no sign of any interest in fixing it
Advantages
- almost zero maintenance
- removes a jquery dependency
- removes a 3pd script
- removes (unmaintainable) code
- familiar ui
- completely accessible
- responsive
- great on mobile
- zero translation
Disadvantages
- Does not support transparency or opacity
- UI is not consistent across devices
ToDo - (help would be awesome)
[ ] The code blocks in the color field plugin need updating
[ ] Text representation of the selected colour only updates on save not change/selection
[ ] It would be a bonus if the text representation of the colour was a text input so users could enter the value directly
Testing instructions
- Apply this PR
- Composer install
- npm install
- Add the following to any form xml (I used administrator\templates\atum\templateDetails.xml )
<field name="color" type="color" label="Color test field" default="#000000" filter="color" /> - OR create a custom colour field
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Administration Templates (admin) Repository JavaScript NPM Change Layout Libraries Front End Templates (site) |
| Labels |
Added:
NPM Resource Changed
?
|
||
| Category | Administration Templates (admin) Repository JavaScript NPM Change Layout Libraries Front End Templates (site) | ⇒ | Administration Templates (admin) Repository JavaScript NPM Change Layout Front End Templates (site) |
| Category | Administration Templates (admin) Repository JavaScript NPM Change Layout Front End Templates (site) | ⇒ | Administration Templates (admin) Repository JavaScript NPM Change Layout Libraries Front End Templates (site) |
| Title |
|
||||||
There are multiple open issues for it
I not against this change, but bare in mind that on Android browsers (Chrome, Edge and Opera), it does work, however you cannot input your own HLS or RGB values, nor does it provide you the value. I don't have an iPhone, so can't test on there but assume it would be the same case.
Because of this, I'd strongly suggest having a separate text input next to the colour picker button showing the value of the selected colour, which would only require a few lines of JS
As for the opacity, there are already talks about it: w3c/html#1422
A separate input range can be added in the same layout to support the opacity if need be.
Just something to think about.
however you cannot input your own HLS or RGB values
You can but only from the sliders
I'd strongly suggest having a separate text input next to the colour picker button showing the value of the selected colour, which would only require a few lines of JS
I agree and it would be useful on all devices thats why I put it on the TODO list
ToDo - (help would be awesome)
[ ] The code blocks in the color field plugin need updating
[ ] Text representation of the selected colour only updates on save not change/selection
[ ] It would be a bonus if the text representation of the colour was a text input so users could enter the value directly
@brianteeman according to the n-2 I think you have to hold this pr for at least a year. Safari introduced color picker in this major release...
I think the browser native color picker is not enough. Too limited functionality (for now) ...
How about replacing an existing jQuery MiniColors with Pickr? Flat, simple, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!
@viocassel Pickr looks good and seems to be a currently maintained repo. But regarding people it seems to be a one man show. Can we be sure it will be maintained also in future?
Unfortunately pickr is not accessible at all and its not translatable
Currently the color field support 2 mode: simple and hue.
What if introduce another mode (eg native) and use it by default? basically it just a layout switching.
And who have used a simple mode will continue to use it without problem.
@viocassel please mail me at wohlkoenig.franz@gmail.com
closing due to lack of interest
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2019-09-12 20:32:05 |
| Closed_By | ⇒ | brianteeman |
@brianteeman i18n support is in progress (Different branch, based on kw-pairs) but currently not implemented in any release. I may not add completely new features in the future but I'll work on bugs and keep it up-to-date as good as possible.
Stumbled across this PR while writing this comment regarding #27538.
| Status | Closed | ⇒ | New |
| Closed_Date | 2019-09-12 20:32:05 | ⇒ | |
| Closed_By | brianteeman | ⇒ |
| Status | New | ⇒ | Pending |
I noticed that the Color field type in Article Fields does not work. Not complaining - I don't want to use it - just noting the fact.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/25162.
@brianteeman Any interest in fixing the conflicts and picking this up or should the PR be closed?
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2020-08-01 18:20:08 |
| Closed_By | ⇒ | brianteeman | |
| Labels |
Added:
Conflicting Files
|
||
How is it broken? Personally I use the format="rgba" attribute on the J3 picker quite extensively and have had no reported issues.