Having some issues with inserting iframes using Discourse's Ember API

Dev
,
8

Here are a few pointers:

  • The site settings have been moved to a service:

    const siteSettings = container.lookup('service:site-settings');
if (!siteSettings.docuss_enabled) {
  return;
}

  • location:discourse-location → location:history

  • afterRender().then(() => onAfterRender(container));
    afterRender is a decorator you put above a method in a component class; you are not supposed to use it directly as a function.
    I think you want (it doesn’t seem to be needed), possibly:

    import { schedule } from '@ember/runloop';
schedule("afterRender", () => onAfterRender(container))

  • You have a large piece of code out of the composeStateChanged function, it seems.
    Also, you can use the router service here: container.lookup('router:main').transitionTo(path); → this.router.transitionTo(path);

  • The header has been modernized. Customization in home-logo widget is deprecated in your context. More information here: Upcoming Header Changes - Preparing Themes and Plugins.
    In your case, you will need glimmer header mode setting to auto or enabled. Then, you can use a plugin outlet to replace the content:

    api.renderInOutlet("home-logo-contents", <template>
  <HomeLogoContents
    @logoSmallUrl={{container.dcsHeaderLogo._smallLogoUrl}}
    @logoUrl={{container.dcsHeaderLogo._logoUrl}}
    @minimized={{@outletArgs.minimized}}
    @mobileLogoUrl={{container.dcsHeaderLogo._mobileLogoUrl}}
    @showMobileLogo={{@outletArgs.showMobileLogo}}
    @title={{@outletArgs.title}}
  />
</template>);

    Note: to use the glimmer <template> syntax, make sure you rename the file extension to .gjs.
    You can also use this way:

     api.registerValueTransformer("home-logo-image-url", (transformer) => {
    let url = transformer.value;
    if (transformer.context.name === 'logo') {
      url = container.dcsHeaderLogo._logoUrl;
    } else if (transformer.context.name === 'logo_small') {
      url = container.dcsHeaderLogo._smallLogoUrl;
    } else if (transformer.context.name === 'logo_mobile') {
      url = container.dcsHeaderLogo._mobileLogoUrl;
    }
    return url;
  });

    To change the URL:

    api.registerValueTransformer("home-logo-href", () => container.dcsHeaderLogo._href);

    Note: I believe the code to re-render in setLogo won’t work on a glimmer component.

    Note after testing: However, neither solution will work because the header is rendered before you can get the logos from the JSON. I don’t have a ready solution for that. I’m not sure if there is a better way: I would move the JSON loading to a service and track the result. Then, use the plugin outlet above with a glimmer component. This way, based on a tracking variable, you can automatically trigger an update on the component.

With that, it kind of works somehow. There are still no working pieces like the composer. I did not look too deeply into this. At the very least, there is no more blocking error. :slightly_smiling_face:

I hope that helps.

3 Likes