Modifying style attribute dynamically on Topic List Item

Dev
1

Disclaimer: very happy with the direction here and thanks for all the work so far as there’s a lot of power in the new system. Just need to make sure we keep some equivalent capabilities? …

In my Component, TLP, I’m currently setting the style attribute of the Topic List Item outer tag dynamically:

  • setting the background: colour to a unique RGB value to match the dominant colour of the image. This should ideally be done in Ember loop.

I’m also setting setting grid-row-end to very quickly determine the size of the masonry element. This is very fast and efficient and avoids a lot of Javascript. However, for this I’m using Javascript as depends on the final sizes in the DOM.

Currently these co-exist happily.

image

<tr style="background: rgb(56, 10, 58); grid-row-end: span 48;" data-topic-id="23321" id="ember168" class="topic-list-item category-uncategorized tag-inforunners visited white-text has-thumbnail tiles-grid-item ember-view" data-is-last-viewed-topic="true">

These are both critical customisations to the Theme Component and without them, it would not be supportable.

This first amendment to style is currently achieved with a direct style attribute binding with modifyClass, which I understand is a deprecated method.

Would it be possible to have an API in the new world for this please?

Or perhaps I’ve missed an existing way to swing this?

However this is not something I believe can be achieved with classes.

3 Likes
2

Is it? :confused: It’s not just require to update to the native class syntax?

3

I’m going by this

1 Like
4

Oh, I see. I thought that meant this upgrade.

1 Like
5

It would be good to get clarity.

  • So is modifyClass still valid? (Just updated syntax - might be good if so to reference that guide)
  • Can I still use that to access the style attribute of the enclosing tag?

Classic Components are different in that they historically provided access to enclosing tag level attributes outside of the template so they were straightforward to modify dynamically in code.

1 Like
6

Ah, you’re right. There is a deprecated notice in console.

Deprecation notice: Modifying ‘component:topic-list-item’ with ‘modifyClass’ is deprecated. Use the value transformer ‘topic-list-columns’ and other new topic-list plugin APIs instead.

1 Like
7

modifyClass itself is not deprecated. It’s a risky customization method, and you should take precautions when using it (as described in the doc @don linked), but we don’t have any imminent plans to remove it.

The reason we’re printing a deprecation message for component:topic-list and component:topic-list-items is that those components are the legacy implementation of the topic list, and are not used when the glimmer topic list is enabled. Now, we have a set of glimmer components like components/topic-list/item.

So, technically, you could use modifyClass on those new components. But, because they’re glimmer components, you won’t be able to modify the style tag via the JS class, so it won’t help with the problem in the OP.

We have a similar ‘masonry’ mode in the official d-topic-thumbnails theme component, so it’s worth looking at how that’s implemented. We add a unique class to each ‘row’ of the topic list:

Then we render a dynamic <style> tag in a separate plugin-outlet, which targets those class names:

That said… it is a little convoluted, so perhaps we should look at adding a specific valueTransformer to allow changing the style= attribute. It’s a little tricky because of Ember’s xss/htmlSafe protections on that attribute… but I’m sure we could get something working.

3 Likes