@dgrammatiko also same changes should apply to ATUM, and for both the template.rtl.scss file.

Also please look for all node_modules references and copy/move them to the appropriate media/vendor folder.

Also 2: do we need jQuery for that pesky little minicolors? I can develop an es6 native script in no time.

Also please look for all node_modules references and copy/move them to the appropriate media/vendor folder.

I missed those in the issue, should be ok now

Also 2: do we need jQuery for that pesky little minicolors? I can develop an es6 native script in no time.

No, please do so but make it a custom element (the reason is that all fields could be used in the subform [repeated fields] and in that case custom elements are extremely nice as they don't need anything extra to initialise their interactive parts)

This is the one I use since I don't remember colorPicker, it's one of the best, plus you can enlarge it for more accurate color picking. It doesn't require any CSS, but also doesn't automatically move up/down the input field if the popup isn't in the viewport.

I will try and deliver an es6 color picker version of that minipicker as soon as I can. Stay tuned :D

@thednp I started some work on that (maybe you find something interesting there): https://codepen.io/dgrammatiko/pen/zLvXwR

@dgrammatiko that's probably better, I think I should look into it right away. It might need some work with position of the popup.

@thednp small tip here: Joomla colour field has 3 modes: hex, rgb, hsl (last 2 can have alpha, but you can make the hex with alpha as well, yes I'm not trolling this is a thing) and also the values none and transparent should be available (though buttons I guess)

Values none and transparent need to be processed as #000000 or rgb(0,0,0) and rgba(0,0,0,0), while the last two only for rgb mode, there's no other way.

In another note I see your code for custom element color-picker, it needs some work with mousemove and other tweaks. I will take it from there.

Values none and transparent need to be processed as #000000 and rgba(0,0,0,0) there's no other way.

Nope, the value none is an acceptable CCS value for color related properties so it needs to be explicitly set. For the transparent the rgba or hsla or a hex #00FFFFFF is fine

That's a bit troublesome, I believe our SCSS compilers gonna crash.

That's a bit troublesome, I believe our SCSS compilers gonna crash.

Are you referring to the colour field or this PR? Can you elaborate?

I'm not sure SCSS compilers like color values like #00FFFFFF.

@thednp they should I mean it's supported almost everywhere https://caniuse.com/css-rrggbbaa
I have no clue if the PHP scss compiler supports it but that's not a problem because nobody should use that piece of uggliness

I understand your position but looking at RocketTheme and JoomlArt, probably all, are still using it in 2021, and after almost a week of trial and error with the sass.js myself, i find myself in this situation where I simply have no choice.

Nobody in Joomla have any better solution for template developers.

I understand your position but looking at RocketTheme and JoomlArt, probably all,

It's a bit worrying that people actually use in production a piece of software that has 16 open issues on spec compliance: https://github.com/scssphp/scssphp/issues?q=is%3Aissue+is%3Aopen+label%3A%22spec+compliance%22

Nobody in Joomla have any better solution for template developers.

Well, I have one and it's open-source fork it and profit for free

If you're talking about your wasm repository, it's unusable in the real world.

sass.js needs an importer able to manage a more complex folder structure plus it's super slow in terms of browser side execution, but then, even if you make one, and users can accept the slow result, you can't write files with JavaScript, it's impossible outside Node.js ENV.

If you have a better one, please enlighten me.

If you're talking about your wasm repository, it's unusable in the real world.

Did you actually read the code? Especially this part: https://github.com/dgrammatiko/scss-wasm-compile/blob/96e3e44a656dc9f5d5b34ec1847c0fab84fc483f/js.js#L27-L31 I did this as a POC.
Also as a reminder, I don't use SCSS so I don't have a need for such a compiler...

Which is why I said it's unusable. An end user will want to add his own custom style and or variables included in the compiled css, or add additional sources. scss.js doesn't even import files properly.

Which is why I said it's unusable. An end user will want to add his own custom style and or variables included in the compiled css, or add additional sources. scss.js doesn't even import files properly.

You don't get it. The client-side should NOT try to get the files automatically, the resolving has to happen on the server-side (both for performance and also for security issues). So this piece of crap that I wrote was a proof of how it could be done and not a polished product that you install. Also, this thing is abandoned for over 2 years, so it's pure luck that it still works

Yes, I would really like to see a glimpse on what it can do on the server side. Behind Joomla MVC.

Yes, I would really like to see a glimpse on what it can do on the server side. Behind Joomla MVC

• Read my comment on the code https://github.com/dgrammatiko/scss-wasm-compile/blob/96e3e44a656dc9f5d5b34ec1847c0fab84fc483f/js.js#L27-L31
• Implement this missing part on the PHP (regex @import...)
• implement a simple UI for your user to select a file on the client side
• for the selected file fetch GET from the PHP the needed SCSS content
• compile
• ask the user where to write the compiled css
• fetch POST the contents and write (overwrite) the file

That's ALL

Can that be done with a plugin or directly into a custom field of the template?

Can that be done with a plugin or directly into a custom field of the template?

Personally, I would do that as a field but a plugin adding a field is also acceptable

Keep that in mind, I will ask you more about later, I probably need a stupid simple file structure, but I'm going to deal with the color picker first.

@dgrammatiko can I use Bootstrap markup for the colorpicker? I'm always looking to re-use something usable that's already given.

I'm thinking of a black tooltip with top/bottom positioning, separate from BS tooltip.

can I use Bootstrap markup for the colorpicker? I'm always looking to re-use something usable that's already given.

You can but since the colorpicker is a Web Component you don't have Bootstrap in there (due to encapsulation). For interoperability, it is a good thing to not tightly connect the very primitive elements to one specific CSS Framework. For Eg I don't use Bootstrap, so asking me to load Bootstrap in order to use a colorpicker is way too much. In short, keep it vanilla js and css for inclusivity

Merging on review

Thanks

@dgrammatiko check out this thing, lemme know of anything:
color-picker-component.zip

Also anyone is welcome to comment :)

I like it couple, of things:

• you need a polyfill for mouseevent path : https://stackoverflow.com/questions/36845515/mouseevent-path-equivalent-in-firefox-safari
• leave the id and value we will do another trick in the PHP world
• the inputs template needs 3 states: hex, rgb and hsl (or 6 if you count also the alpha part but that is already conditional)

Bring it on ?

@dgrammatiko my thoughts:

• I don't like how you handle events with the binding of this, there's a ton of solutions, I will look around;
• about events, what do you think about how I toggle event listeners? I think it's important we leave global objects free of listeners just for a bunch of fancy dancy, I consider memory efficiency top priority;
• also notice all essential events for this functionality are implemented: keyup, change, mousemove;
• I've changed a lot in the markup structure for easier handling of events, labels need to be labels and not wrappers (what's actually fixed in BS5), the main <input> is also the preview, it also accepts
• what do you think about possible automatic positioning of the color-dropdown on show / scroll?
• I didn't know Event.prototype.path wasn't supporter in FF, Safari; I will probably need your help to implement that;
• probably need a dedicated method to update the color controls;
• some methods should be "private"; EG: this._changeColor(e);
• need to know how to keep the color shade after changing the hue,
• also we have to find out how to set an initial position for color controls,
• how can we make the cursor: NONE instead of crosshair when you mousedown the controls?
• I already changed alot of methods, I'm considering changing even more methods to be more understandable: EG: colorBlock => colorShade;
• in my above notes, which ones are the most critical to get this into the Joomla core, or does this stand any chance?

Cheers ;)

Please create a dedicated issue for this instead of polluting this unrelated issue. No one will ever find the history otherwise

in my above notes, which ones are the most critical to get this into the Joomla core?

So in reverse order, or so:

• use this https://github.com/joomla-projects/custom-elements/blob/0272fa0b5aca56873fdc6f0c7a1d33bad92f62af/src/js/alert/alert.js#L114-L120 and fire a change event every time the value changes

how can we make the cursor: NONE instead of crosshair when you mousedown the controls?

Css concern, don't force it in js

also we have to find out how to set an initial position for color controls,
need to know how to keep the color shade after changing the hue,

So you need some kind of state, eg in the contractor:

this.state = {
  red: 0,
  green: 0,
  blue: 0,
  alpha: 0,
};

then in the connectedCallback read the attribute value, pass it to tinycolor and set the this.state.red etc. On every change update the state and then redraw

some methods should be "private"; EG: this._changeColor(e);

Meh, it's js there's not private

probably need a dedicated method to update the color controls;

yes, better

I didn't know Event.prototype.path wasn't supporter in FF, Safari; I will probably need your help to implement that;

use the link, it has the polyfill there, 5lines or so

I don't like how you handle events with the binding of this, there's a ton of solutions, I will look around;

You probably don't need most of them, maybe only the ones for the eventListeners

Sorry for polluting this

@thednp please create a gist with the code so I could also provide feedback there