Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add a spinner, in Service Worker mode, when browsing to another article. #155

Closed
wants to merge 1 commit into from
Closed

Add a spinner, in Service Worker mode, when browsing to another article. #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions www/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,16 @@
color : orange;
}

#centeredspinner{
position: absolute;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}

/* Réduction de la taille des éléments en haut pour les petits écrans */
@media (max-width: 768px) {
/* Pour réduire la taille du menu en haut */
Expand Down
Binary file added www/img/big-spinner.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions www/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,9 @@ <h2>Configuration</h2>
</div>
<div id="geolocationProgress" style="display: none;" class="container">
</div>
<div id="centeredspinner" style="display:none;">
<img src="img/big-spinner.gif" alt="Please wait..."/>
</div>
<iframe id="articleContent" src="A/dummyArticle.html" class="articleIFrame">&nbsp;</iframe>
</article>
<footer>
Expand Down
26 changes: 24 additions & 2 deletions www/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,11 +254,33 @@ define(['jquery', 'abstractBackend', 'util', 'cookies','geometry','osabstraction
$('#searchingForTitles').hide();
return false;
});
$('input:radio[name=contentInjectionMode]').on('change', function(e) {
$('input:radio[name=contentInjectionMode]').on('change', function(event) {
// Do the necessary to enable or disable the Service Worker
setContentInjectionMode(this.value);
checkSelectedArchiveCompatibilityWithInjectionMode();
});
$('#articleContent').on('load',onIFrameLoad);
function onIFrameLoad() {
$('#centeredspinner').hide();
$('#articleContent').contents().on('click', function (event) {
if (contentInjectionMode === 'serviceworker') {
// In Service Worker mode, we want to display a spinner
// when the user clicks on a link
// We only do that when the click is somewhere inside a <a> tag
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is that really a safe way? We could wait for a message from the service worker (that is sent as soon as the service worker starts loading the article).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right : it's not a safe way at all. It was just an easy way to do a first version.
In fact, I would have expected the browser to inform the user by itself that a ServiceWorker is working. Just like it informs the user when some content is downloading.
It seems to be the case on Chromium, Firefox dev edition, but not on Firefox OS.

I should investigate if there is a way to have this built-in feedback on Firefox OS too, instead of trying to do it by hand.

// that has a href attribute
if ($(event.target).is('a[href!=""] *,a[href!=""]')) {
// And we don't want to show the spinner when clicking on an anchor
if ($(event.target).is('a:not([href^="#"]) *,a:not([href^="#"])')) {
$('#articleContent').contents().find('body').fadeTo('fast',0.2);
$('#centeredspinner').show();
}
}
}

});
}
// Add the event for first use
onIFrameLoad();

/**
* Displays of refreshes the API status shown to the user
Expand Down Expand Up @@ -1030,7 +1052,7 @@ define(['jquery', 'abstractBackend', 'util', 'cookies','geometry','osabstraction
}
});

}
}
}

/**
Expand Down