Changing the way to set label to increase customizability

[Liooo]

Problem

The library doesn't have capability to customize label using angular directive.

Solution

Exposing variables that store label strings on the template's scope, rather than setting with $.html()
Here's the quick simple code change.

and here's the jsfiddle.

i roughly looked through the code, and noticed i still need to fix the following things, in addition to the change above.

1. the logic to recalcute the dimension
2. use css display:hide rather than opacity:0 to hide combo label or model/high label as they switch, in case for example there's ng-click attached on either of the element (written here)
3. leaving the backward compatibility (but probably we don't need translate option in the future if we're doing this)

Question

what do you guys think of this idea and the solution?

[ValentinH]

I like the idea because this is closer to the angular logic.

The main issue that I can see though is that today you can display html strings from the translate function and this won't work with your solution: https://jsfiddle.net/meu7ap6n/

About your 3 points:

1. the logic may not be to be changed, since we directly compute the size of the label
2. simply using a comboLabel bound on the scope should make the trick
3. how would you replace the translate function then?

[Liooo]

@ValentinH Thanks for the quick reply.

The main issue that I can see though is that today you can display html strings from the translate function and this won't work with your solution

Actually that's what I tried first in order to achieve something like 2nd example in fiddle. One simple solution is using ng-bind-html in templates instead of {{..}}, probably with $compile if we allow angular directive to be passed. And supposing everything that can be done in translation option can easily done with rz-slider-tpl-url 's template with the selected values attached on the scope, it's better to let users specify only one of translation option or rz-slider-tpl-url option.

the logic may not be to be changed, since we directly compute the size of the label

That's good to hear :)

simply using a comboLabel bound on the scope should make the trick

Sorry didn't understand this. The problem I wanted to say here was that I can still click the opacity: 0-ed element even though it's invisible. Like this in the fiddle example:

how would you replace the translate function then?

Actually after some consideration, I think we better have translate option either way. If a user just need a slight change on label text, it'd be too much to force them to make whole another template file.

[ValentinH]

Actually after some consideration, I think we better have translate option either way. If a user just need a slight change on label text, it'd be too much to force them to make whole another template file.

This is exactly what I was going to say.

Sorry didn't understand this. The problem I wanted to say here was that I can still click the opacity: 0-ed element even though it's invisible. Like this in the fiddle example:

Oh ok, didn't understand then. Maybe adding a ng-show could do the job.

What I was thinking for my first answer was a slider that uses the mergeRangeLabelsIfSame option, then this line won't work. This is why I was talking about a comboLabel solution.

Anyway, could you submit a PR with what you have so far so we can discuss on the way to implement it? ;)

[Liooo]

What I was thinking for my first answer was a slider that uses the mergeRangeLabelsIfSame option, then this line won't work. This is why I was talking about a comboLabel solution.

Ah okay I'll take care of that as well.

Anyway, could you submit a PR with what you have so far so we can discuss on the way to implement it? ;)

Yes I'll send it, just wanted to make sure before actually going deeper. Thank you :D

[Liooo]

@ValentinH
Hey I need some help. Now using ng-html-bind and html strings in translation work well, but Combo label's position is broken. I read the logic for position calculation but wasn't that easy to grasp.

Here's the fiddle

and code change

[ValentinH]

About the position, it's weird and I don't understand why it doesn't work for now.

About using ng-html-bind, I don't really like it because it requires an extra dependency on ng-sanitize... Like discuss in #277

[Liooo]

About the position, it's weird and I don't understand why it doesn't work for now.

It was because the changes on scope variable doesn't immediately reflect on DOM but after the $digest loop. $watching the text length and recalculating the dimension fixed the problem. There might be a more efficient solution, but so far this is working fine without noticable performance load. Here's updated fiddle.

About using ng-html-bind, I don't really like it

Here's the alternative, added inject-label class to the elements wanting the contents to be replaced.

If it's looking good, I'll update README and send a pull request.

[ValentinH]

About the watching, it looks heavy in my opinion. Maybe adding a $timeout call before computing the dimension/position can do the job.

However, my main concern is not to slow down the current version of this library so I want to be sure that we get the same performance as before.

About the inject-label class, I don't really understand how it solves the issue.

Anyway, could you still submit the PR so I can checkout the code on my computer and really understand what are the consequences of such a change?

[Liooo]

Maybe adding a $timeout call before computing the dimension/position can do the job.

I actually tied this first, but it broke the labels as I drag handle. Could you see if it works?

About the inject-label class, I don't really understand how it solves the issue.

By this change, now we don't have ng-sanitize dependency, while user can

• put html tag in translate's return value
• use custom template and do things like in fiddle

[ValentinH]

I got the idea behind inject-label, I think it's a viable solution. However, I prefer to reason in the opposite way: by default, we don't bind the scope, and if there is a special class (like no-auto-label), then we don't call the html() method.

I'll try to have a look to find a way to replace the $watch logic later today ;)

[mm-wang]

Hello there,

I have a custom directive that modifies my labels for each pointer using xeditable, and it seems that this is attempting to put different labels. I would LOVE for a solution to be posted so that we can target specific labels. Alternately, would you be able to modify the rz-bubble spans above the pointers so that the left and right spans can be targeted more closely?

Thanks!

[ValentinH]

When you say, targeted for the bubbles, do you mean by CSS ?

[mm-wang]

I would like to replace the value in the slider with another directive, in this case x-editable, which can manually overwrite the value. Is that possible?