How to Intercept page scroll event

dev
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 ?

2 Likes
5

I had the same error, but managed to fix it by including this in my script definition:

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