Parsing existing gradient-strings

[varunsridharan]

I am trying to set a gradient color via javascript function using below gradient css

radial-gradient(circle at bottom right, rgba(66, 68, 90, 1) 0%,rgba(66, 68, 90, 1) 0%,rgba(255, 168, 125, 1) 0%,rgba(255, 69, 69, 1) 100%)

And JS is

gpickr.setGradient('radial-gradient(circle at bottom right, rgba(66, 68, 90, 1) 0%,rgba(66, 68, 90, 1) 0%,rgba(255, 168, 125, 1) 0%,rgba(255, 69, 69, 1) 100%)')

when the above code used the output should look like below

Instead the output looks like

You can run the above JS in your demo via browser console and try

[simonwep]

As I already said, I just implemented this to test stuff, see how It could be done. I never really tested it or wrote a "good" parser for it which would consume quite some time :)

[varunsridharan]

@Simonwep thanks got it And a quick question

1. Do you plan to update this?

I am asking this because WPOnion is on hold due to this. if you don't have plans / can't do it now then I can put this feature on hold and release the reset and decided later on what can be done.

[simonwep]

Yes, but later this month or soonest next weekend. But nothing is for sure, I'm currently trying to keep current OS Projects up-to-date. Sorry :/

[varunsridharan]

@Simonwep i can understand. i am doing the same here :-) i decided to wait this GPicker project until WPOnion will be released without GPIcker

[simonwep]

I dropped that feature for now (and consider it as feature), it's too complicate to parse a CSS Gradient properly. If I find any parser which holds strongly on the current specs I'll use that. The next would be to add conic-gradients (if the browser supports it)

[varunsridharan]

@Simonwep wow man. I am sure it's worth waiting. I don't know what else to say. but I will say this. Pickr & GPick are the best color & gradient picker I have ever used. these to library has made a big contribution towards WPOnion. only 1 feature is need to add GPicker in WPOnion

Option to setGradient thats all i need :-) i will also check if i can help you in a any way.

[varunsridharan]

@Simonwep maybe this can help you ??

https://github.com/artf/grapick/blob/master/src/Grapick.js#L163-L199

I dont know if you saw this already or not. but just share it.

[simonwep]

@varunsridharan It will fail at double-position like linear-gradient(to bottom right, #fff, rgb(10, 23, 5) 5px 10px, orange, blue)) and It's way too unsafe written, dosn't follows the specs. Already searched for ones, maybe I'll try to write my own but with restricted rules so it's just enough for gpickr.

[varunsridharan]

@Simonwep great :-) I just shared on what I saw. I will try to check for others to. again man you really did a great job.

[varunsridharan]

Update On your new gradient parser

i was testing with some gradient strings and found below issues

String : radial-gradient(circle at bottom center, rgba(255, 165, 148, 1) 0%,rgba(252, 96, 96, 1) 70.5%,rgba(255, 63, 63, 1) 100%)

Output :

[simonwep]

Positions get currently not parsed, it's still in development and shouldn't be used at all. There's even a commen in the source 😄

[varunsridharan]

@Simonwep ok got it. i haven't checked the source yet. saw some commits and checked the demo 😄

[simonwep]

@varunsridharan Modifiers are now gonna parsed, but it's kinda unsable and not any possible combinations are supported. conic gradients are currently without any modifiers like position etc. For radial-gradient you can use any circle at <position-keyword> and for linear-gradient n<deg|rad|grad|turn> or to <bottom|right|left|top> :)

Maybe I'll publish a beta version in the next days on npm!

[varunsridharan]

@Simonwep its a great work man. awesome

[ghost]

@Simonwep check this library https://github.com/rafaelcaricio/gradient-parser