Modifying style attribute dynamically on Topic List Item

merefield · January 30, 2025, 1:38pm

David, I have another one, would it be possible to hook into Glimmer events such as didInsert, didUpdate, willDestroy via the new API?

I want to run some additional javascript on didInsert, for example, which is currently handled by @on and modifyClass.

github.com/merefield/discourse-tc-topic-list-previews

javascripts/discourse/initializers/preview-edits.js.es6

2e7dadadc


      
          hasActions: readOnly("topicListPreviewsService.displayActions"),
          listChanged: false,
          wideFormat: false,
          listAreaSizeObserver: null,
          
          @discourseComputed("listChanged")
          wideFormat() {
            return settings.topic_list_tiles_wide_format
          },
          
          @on("init")
          setup() {
            let listAreaSizeObserver;
            let listArea = document.querySelector("#list-area");
            if (listArea) {
              listAreaSizeObserver = new ResizeObserver(resizeAllGridItems).observe(listArea);
            }
            this.set("listAreaSizeObserver", listAreaSizeObserver);
            const suggestedList = this.get("suggestedList");
            if (suggestedList) {
              const category = this.get(

(happy to make this a new Topic btw)

I’ll try your technique here for now:

github.com/discourse/discourse-topic-thumbnails

javascripts/discourse/connectors/before-topic-list-body/topic-list-masonry-styles.gjs

4e4fc54ac


      
          import Component from "@glimmer/component";
          import { service } from "@ember/service";
          import { modifier } from "ember-modifier";
          import MasonryCalculator from "../../lib/masonry-calculator";
          
          export default class TopicListMasonryStyles extends Component {
            @service topicThumbnails;
          
            attachResizeObserver = modifier((element) => {
              const topicList = element.closest(".topic-list");
          
              if (!topicList) {
                // eslint-disable-next-line no-console
                console.error(
                  "topic-list-thumbnails resize-observer must be inside a topic-list"
                );

Topic		Replies	Views
Using modifyClass to change core behavior Developer Guides	6	2780	March 4, 2026
Upcoming topic-list changes - how to prepare themes and plugins Development dev-news	35	2711	April 14, 2025
Modernizing our Topic List HTML - preparing themes, components and plugins Announcements new-feature	8	1849	January 17, 2023
Modify Ember model class using Theme Component Development	1	790	October 28, 2020
Following on from Adding Unique Class Names Feature	19	4936	January 15, 2016

Modifying style attribute dynamically on Topic List Item

Related topics