Yaowenjie / travis-github-chrome-extension

This is chrome extension for github page showing travis-ci pipeline status
https://yaowenjie.github.io/%E7%BC%96%E7%A8%8B%E7%9B%B8%E5%85%B3/travis-github-chrome-extension
26 stars 5 forks source link

Status Badges don't display when switching between tabs #13

Closed Yaowenjie closed 7 years ago

Yaowenjie commented 7 years ago

As title said.

oneezy commented 7 years ago

I've seen this happen in a few extensions and even some of my own personal extensions (I'm not 100% sure why).

I haven't looked in your code base yet, but a few work-arounds that I've used before are the setTimeout function along w/ the mouseup and keyup events. It feels a little hacky but it gets the job done. You can see an example of how I did it, I've also included some sample code below,

Make the function

function showBadge(){

      // code code code

}

Run the function a few different ways (the fix)

$(document).ready(function() {

    // When user clicks anywhere, show the Travis Badge!
    $('body').mouseup(function() {
        setTimeout(function() {
            showBadge();
        }, 20);

    // When user types anywhere, show the Travis Badge!
    $('body').keyup(function() {
        setTimeout(function() {
            showBadge();
        }, 20);

    // When user goes anywhere, wait 1/4 of a second and show the Travis Badge!
    $(document).ready(function() {
        setTimeout(function() {
            showBadge();
        }, 250);

});
Yaowenjie commented 7 years ago

Hi @oneezy, Sorry for replying you on this so late (totally several months :( ). Recently I got time to refactor the whole code, I have added some small features as #16 #18 #20 etc, and of course, I try to fix this issue obviously as well if you noticed the commit message. Your suggestion is pretty cool, it works greatly, however, there is still some small issue when network is slow if do in this way. So I change it to something like this, and glad to share with you:

 const detectPageChanged = (callback) => {
  let oldPathname = window.location.pathname;
  let oldSearch = window.location.search;
  const DETECT_INTERVAL = 200;

  setInterval(() => {
    if(oldPathname != window.location.pathname || oldSearch != window.location.search) {
      oldPathname = window.location.pathname;
      oldSearch = window.location.search;
      callback();  //  display badge or chart in callback
    }
  }, DETECT_INTERVAL);
};

BTW, I just released the latest one (2.1.0), and if you are interesting in ES6 or Gulp, you would be happy to see the code change for this repo. :)

Thanks for your help!

Cheers

oneezy commented 7 years ago

Awesome! Can't wait to check it out. :D

And no worries, I know how it can be. I've been super busy as well.