Multiple quicksettings

[tommypreger]

Thanks for a cool library! I've been using it for small experiments for a while, and now I'm working on a slightly bigger project. Unfortunately I'm experiencing problems when trying to have multiple instances of QuickSettings.

My different instances of QuickSettings have identical layout which is probably what's causing the problems. For instance: when changing a Color value (named 'Color') on one instance of QuickSettings, the value will change on the other instance. I also have problems with callbacks overriding eachother.

I guess it was never meant to be used this way, but that should probably be stated in the description...

My use case: I have several textfields that can be edited through QuickSettings. Whenever a textfield is selected that textfield's settings will be shown and all other settings are hidden.

I tried to solve it by having a single instance of QuickSettings instead set its values to mirror the selected textfield. The problem is that this will fire off all the change-events whenever a new textfield is selected and I have to handle that somehow.

Am I missing something obvious here? Is there a way of achieving what I want using QuickSettings?

[tommypreger]

For now I solved it by naming all controls uniquely by prefixing them with the textfield id (e.g. header_fontSize instead of just fontSize), adding them all to a single QuickSettings and then hiding and showing the appropriate set of controls depending on which textfield currently is selected.

It works fine, except the labels look quite messy with all those prefixes. It would have been cool if the label and control id could have been separate strings... This would be useful when using the bind functions as well since you may not necessarily want the hard-to-read camelCased property names as labels.

[bit101]

I'd have to see what you are doing in your code. From what you are describing, it doesn't seem right. Each panel keeps track of its own values. See this example:

http://jsbin.com/janekomalu/edit?js,output

The first two values have identical layouts. They are independent. The third panel slider sets the value in the first panel, but leaves the second one unchanged.

[tommypreger]

It seems like it works for some types of values but not others. Ranges and Numbers work fine, but not Colors or Booleans. I edited the link to use colors instead: http://jsbin.com/kobuxerase/1/edit?js,output Edit: fixed link

[bit101]

OK, I see it now for colors. Definitely a bug. I'll take a look tonight.

[bit101]

OK, I kind of see what's happening and kind of have an idea of how to fix it. Give me a day or two.

[tommypreger]

Cool! 👍

[bit101]

Fixed in 3.0.3. Thanks for bringing it to my attention.