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

HTML in title attribute #6

Closed
iver56 opened this Issue Oct 15, 2014 · 7 comments

Comments

Projects
None yet
4 participants
@iver56
Contributor

iver56 commented Oct 15, 2014

I want to have an icon in a tab, like this:
image

I did it by putting HTML in the config object for my component, like this:

{
  type: 'component',
  componentName: 'template',
  title: '<span class="glyphicon glyphicon-bell"></span> Alarms',
  componentState: { template: 'alarms.html' },
  isClosable: false
}

This will show a tab with icon and text. That's fine. However, there is a problem: The title attribute of the tab is also set to that whole string, with HTML and all, so that we end up with HTML with double quotes inside an attribute. Not good. The grey line in the following screenshot contains the invalid HTML:

image

@WolframHempel

This comment has been minimized.

Show comment
Hide comment
@WolframHempel

WolframHempel Oct 15, 2014

Collaborator

Good point. I think stripping tags and trimming the resulting string before setting the title attribute would be a good idea. Would this solve your usecase?

Collaborator

WolframHempel commented Oct 15, 2014

Good point. I think stripping tags and trimming the resulting string before setting the title attribute would be a good idea. Would this solve your usecase?

@iver56

This comment has been minimized.

Show comment
Hide comment
@iver56

iver56 Oct 15, 2014

Contributor

Yes sir, that would be an acceptable solution.

Here's another suggestion that could be implemented in addition to your suggested solution: Let one specify a "tooltip" variable in the config. If this variable is set to a string, then that string is used for the title attribute of the tab instead of a stripped version of the "title" variable in the config.

Contributor

iver56 commented Oct 15, 2014

Yes sir, that would be an acceptable solution.

Here's another suggestion that could be implemented in addition to your suggested solution: Let one specify a "tooltip" variable in the config. If this variable is set to a string, then that string is used for the title attribute of the tab instead of a stripped version of the "title" variable in the config.

@WolframHempel

This comment has been minimized.

Show comment
Hide comment
@WolframHempel

WolframHempel Oct 16, 2014

Collaborator

That's definitely a good idea, but here's the tricky bit: GoldenLayout will hopefully be useful to a lot of people, so I think the right approach is to keep the API simple and let it cater to 80% of all usecases.

At the same time though, it's crucial to make GL open and extensible enough to cater for the remaining 20%.

The current version already has a 'tab' event on a per component level, v 1.0.4 will also expose a tabCreated event on the layout level. This would allow you to implement exactly what your suggesting in just two lines, e.g.

//config
{
  type:'component',
  componentName: 'example',
  title: 'Sheep',
  tooltip: 'White and fluffy'
}

//Listen for tabCreated event
myLayout.on( 'tabCreated', function( tab ){
  tab.element.attr('title', tab.contentItem.config.tooltip);
});

Here's a codepen to see it in action

Collaborator

WolframHempel commented Oct 16, 2014

That's definitely a good idea, but here's the tricky bit: GoldenLayout will hopefully be useful to a lot of people, so I think the right approach is to keep the API simple and let it cater to 80% of all usecases.

At the same time though, it's crucial to make GL open and extensible enough to cater for the remaining 20%.

The current version already has a 'tab' event on a per component level, v 1.0.4 will also expose a tabCreated event on the layout level. This would allow you to implement exactly what your suggesting in just two lines, e.g.

//config
{
  type:'component',
  componentName: 'example',
  title: 'Sheep',
  tooltip: 'White and fluffy'
}

//Listen for tabCreated event
myLayout.on( 'tabCreated', function( tab ){
  tab.element.attr('title', tab.contentItem.config.tooltip);
});

Here's a codepen to see it in action

@iver56

This comment has been minimized.

Show comment
Hide comment
@iver56

iver56 Oct 16, 2014

Contributor

Thanks, that would work for me.

By the way, here's another related issue: When I start dragging a tab that has HTML in it (such as a span for an icon), the drag proxy tab shows the title HTML as if it was clear text, i.e. the HTML is not rendered in that tab. Ultimately, I'd like to see the rendered icon instead of the HTML string in that tab.

Contributor

iver56 commented Oct 16, 2014

Thanks, that would work for me.

By the way, here's another related issue: When I start dragging a tab that has HTML in it (such as a span for an icon), the drag proxy tab shows the title HTML as if it was clear text, i.e. the HTML is not rendered in that tab. Ultimately, I'd like to see the rendered icon instead of the HTML string in that tab.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Oct 17, 2014

Contributor

Yup, good point. I think the overall theme for version 1.0.4 (to be released this weekend) will be "properly support html in tabs".

I'll update this issue once it's released

Contributor

ghost commented Oct 17, 2014

Yup, good point. I think the overall theme for version 1.0.4 (to be released this weekend) will be "properly support html in tabs".

I'll update this issue once it's released

@franck34

This comment has been minimized.

Show comment
Hide comment
@franck34

franck34 Oct 18, 2014

Cool ! Waiting for the release ;)

franck34 commented Oct 18, 2014

Cool ! Waiting for the release ;)

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Oct 18, 2014

Contributor

v1.0.4 (released 18.10.2014) supports html in tabs, strips tags for tooltips, supports html on the DragProxy's tab and applies some basic XSS filtering before applying the html values.

Please re-open this issue if there are outstanding requirements. Many thanks again for pointing it out.

Contributor

ghost commented Oct 18, 2014

v1.0.4 (released 18.10.2014) supports html in tabs, strips tags for tooltips, supports html on the DragProxy's tab and applies some basic XSS filtering before applying the html values.

Please re-open this issue if there are outstanding requirements. Many thanks again for pointing it out.

malled pushed a commit to malled/golden-layout that referenced this issue May 14, 2018

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