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.

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

For those still wanting to use this #287

Open
synapt opened this issue Mar 2, 2020 · 0 comments
Open

For those still wanting to use this #287

synapt opened this issue Mar 2, 2020 · 0 comments

Comments

@synapt
Copy link

@synapt synapt commented Mar 2, 2020

If you like the general appearance/theme of the options this script give you but don't feel like dealing with the oddities in trying to use it since it's abandonment, there's a bit of a generic work around using modern browser events and not needing to use offline.js as a script.

Take the theme file of the notification style you'd like and make sure it's included in some form or another (whether pasted into a master .css or link'd in, etc), and then in your header file/page you want this feature on/etc, paste the following;

<div id="connection_status" class="offline-ui offline-ui-up offline-ui-waiting"><div class="offline-ui-content"></div></div>

Obviously the element ID can be whatever you want it to be, just adjust it into the code below.

And then wherever it most fits in your javascript lineup include something like this;

	window.addEventListener('online', function(e) {
		$("#connection_status").removeClass();
		$("#connection_status").addClass('offline-ui offline-ui-up offline-ui-up-2s offline-ui-up-5s');
	}, false);
	window.addEventListener('offline', function(e) {
		$("#connection_status").removeClass();
		$("#connection_status").addClass('offline-ui offline-ui-down offline-ui-waiting');
	}, false);

These are native events that should work in just about anything supporting HTML5 both mobile and desktop as far as testing the major and semi-major browsers I did, which obviously means in this modern age the vast majority if not all of your likely users.

This of course is also using jQuery (which anyone looking for a model like this is probably already using). If you would like a 'pure' Javascript format, this SHOULD work I believe in just about everything (except maybe under IE11 or IE10, which if aiming for decent HTML5 support probably isn't a concern for IE <= 10) and if anything might be a bit smoother looking even than the jQuery implementation;

	var connStatus = document.getElementById("connection_status");
	window.addEventListener('online', function(e) {
		connStatus.className = 'offline-ui offline-ui-up offline-ui-up-2s offline-ui-up-5s';
	}, false);
	window.addEventListener('offline', function(e) {
		connStatus.className = 'offline-ui offline-ui-down offline-ui-waiting';
	}, false);

This can also be considered somewhat relative to issue #135 and an up to date consideration to it.

Notable caveat; This obviously does not include offline.js's capacity for event capturing and retrying during downtime.

It also removes the manual "reconnect" button, though this isn't perhaps a caveat since the native offline/online event listening polls are almost immediate and in effect obsolete the reconnect check button anyways.

This obviously also gives you a basis for modifying the available CSS themes into your own design.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
1 participant
You can’t perform that action at this time.