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

HTML in title attribute #6

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

HTML in title attribute #6

iver56 opened this issue Oct 15, 2014 · 7 comments

Comments

@iver56
Copy link
Contributor

@iver56 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
Copy link
Collaborator

@WolframHempel 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
Copy link
Contributor Author

@iver56 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
Copy link
Collaborator

@WolframHempel 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
Copy link
Contributor Author

@iver56 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
Copy link
Contributor

@ghost 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
Copy link

@franck34 franck34 commented Oct 18, 2014

Cool ! Waiting for the release ;)

@ghost
Copy link
Contributor

@ghost 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
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants