Skip to content
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.

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

Let color functions accept Anonymous and Quoted types #1215

Closed
timkindberg opened this issue Mar 8, 2013 · 2 comments
Closed

Let color functions accept Anonymous and Quoted types #1215

timkindberg opened this issue Mar 8, 2013 · 2 comments

Comments

@timkindberg
Copy link

I am working an a medium scale web app that will allow the admin to customize the interface colors by setting 4 core theme colors. Those 4 colors map to variables which in turn control every color on the site. I ran into a very large issue where hsla() did not clamp "out of range" values and eventually I said something about it over here: #821 (comment)

However, while trying to figure it out on my own for quite a while I tried so many things. The one idea I had was to clamp the values myself via javascript like this:

@h: 380;
@s: 150%;
@l: -40%;
@a: 1.75;
@hx:`(function(){ var h=@{h}; return h>360?h-360:h<0?360+h:h })().toString()`;
@sx:`(function(){ var a=parseInt("@{s}"); return Math.max(Math.min(a,100),0)+"%" })()`;
@lx:`(function(){ var a=parseInt("@{l}"); return Math.max(Math.min(a,100),0)+"%" })()`;
@ax:`(function(){ var a=@{a}; return Math.max(Math.min(a,1),0) })().toString()`;

But I found that when I passed my 'x' variables to hsla() it told me that it only accepted numbers! Bummer. Well I spent the next 4-8 hours trying to figure out how to convert a damn string to a number. There is no way to do it!!! That's another issue entirely which I'll write up.

So I propose that the number function should be modified to something like this:

function number(n) {
    if (n instanceof tree.Dimension) {
        return parseFloat(n.unit == '%' ? n.value / 100 : n.value);
    } else if (typeof(n) === 'number') {
        return n;
    } else if (n instanceof tree.Anonymous || n instanceof tree.Quoted) {
        if(n.value.indexOf("%")>-1) return number(new tree.Dimension(parseFloat(n.value), "%"));
        else return number(new tree.Dimension(parseFloat(n.value)));
    } else {
        throw {
            error: "RuntimeError",
            message: "color functions parameters not valid type (accepts numbers and strings)"
        };
    }
}

This only makes sense too, because the more developers use javascript within less the more likely they will have to pass the result of the javascript through another function which doesn't accept strings or anonymous.

@lukeapage
Copy link
Member

related to #387

@lukeapage
Copy link
Member

There is a color() function that converts to a color. For numbers see the above. We do not recommend using js, we prefer you to inject javascript functions that are then used or to request a new one if it is generic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants