How to Intercept page scroll event

Development

AI-generated summary

A user, itkin, is seeking to intercept the page scroll event in Discourse to trigger a function when the header logo changes. After investigating, itkin finds the relevant code in views/topic.js.es6 and eventually discovers a solution by adding a custom script to the body via the admin interface (itkin).

However, simevo reports an error when trying to implement this solution on Discourse v1.8.0.beta9 +21. The error is due to application.registrations['app-events:main'] being undefined.

loginerror suggests a fix by including the script definition <script type="text/discourse-plugin" version="0.10.2"> in the custom script.

1

Hello,

I’d like to add a little script to trigger a function when the header logo changes (when the window is scrolled down).

Well i’m pretty lost at it, being a total newbie to ember and its ecosystem…

Do you which file handle i have to look at, or (what would be so cool) how to do such a thing in “the discourse way” ?

Many Thanks !!

2

seems to be in views/topic.js.es6
if (showTopic) { this.appEvents.trigger('header:show-topic', topic); } else { this.appEvents.trigger('header:hide-topic'); }
Anybody knows how to intercept such event ?

3

Got it, for anyone in the same case you need to add the following script into the body (via the admin interface)

<script type="text/javascript">
    Discourse.initializer({
      name: 'custom-header',

      initialize: function(application) {
        
        application.registrations['app-events:main']
            .on('header:show-topic', function(e){ 
                $('#top-navbar').css('zIndex',0) 
            })
            .on('header:hide-topic', function(e){ 
                $('#top-navbar').css('zIndex',1001) 
            })
      }
   });
</script>
4

Does not work here on v1.8.0.beta9 +21, on this line:

I get this:

TypeError: Cannot read property 'app-events:main' of undefined
    at Object.initialize ((index):482)
    at _ember_jquery-b018f0a….js:14340
    at e.each (_ember_jquery-b018f0a….js:12426)
    at e.topsort (_ember_jquery-b018f0a….js:12393)
    at e.topsort (_ember_jquery-b018f0a….js:12338)
    at i._runInitializer (_ember_jquery-b018f0a….js:14367)
    at i.runInitializers (_ember_jquery-b018f0a….js:14335)
    at i._bootSync (_ember_jquery-b018f0a….js:13550)
    at i.domReady (_ember_jquery-b018f0a….js:13454)
    at p.run (_ember_jquery-b018f0a….js:10544)

any idea ?

5

Tuve el mismo error, pero logré solucionarlo incluyendo esto en la definición de mi script:

<script type="text/discourse-plugin" version="0.10.2">