Apppresser Offline

appp-custom.js

var is_offline = false;
var enableOfflineScreen = true;

//When device is offline
function goOffline() {
	is_offline = true;
	var appBody = document.getElementsByTagName( 'body' )[0];

	//Set body class
	appBody.classList.add( "app-offline" );

	//Change the toolbar title
	var toolbar = document.querySelectorAll( 'ion-nav .toolbar-title' );
	if ( toolbar.length > 0 ) {
		toolbar[0].textContent = 'Offline';
	}

	if ( enableOfflineScreen ) {
		//Disable menu toggle
		var menutoggle = document.getElementsByClassName( 'bar-button-menutoggle' );
		if ( menutoggle.length > 0 ) {
			menutoggle[0].disabled = true;
		}
	}
}

//When device is online
function goOnline() {
	//Reload the page when it goes back online. this ensure that the page is perfectly loaded, including iframes
	if ( is_offline ) {
		location.reload();
	}
}

function isOffline() {
	if ( typeof ( cordova ) !== 'undefined' && typeof ( navigator.connection ) !== 'undefined' ) {
		var networkState = navigator.connection.type;
		if ( networkState == Connection.NONE ) {
			//Connection type detected; device is offline
			return true;
		} else {
			//Connection type detected; device is online
			return false;
		}
	} else {
		//Connection type could not be detected
		return false;
	}
}

function appendOfflineScreen() {
	var dcDiv = document.createElement( 'div' );
	dcDiv.id = 'offline-screen';

	var dcDivImg = document.createElement( 'img' );
	dcDivImg.src = "assets/images/offline.png";
	dcDiv.appendChild( dcDivImg );

	var dcDivTitle = document.createElement( 'h1' );
	dcDivTitle.textContent = "You appear to be currently offline. \r\nTo enjoy the app features, please re-connect.";
	dcDiv.appendChild( dcDivTitle );

	var appBody = document.getElementsByTagName( 'body' )[0];
	appBody.appendChild( dcDiv );
}

//Styling of the offline screen
function appendOfflineStyle() {
	var css = document.createElement( 'style' );
	css.type = 'text/css';
	var styles = '#offline-screen {top: 56px; left: 0px; width: 100%; height: calc(100vh - 56px); position: fixed; background-color: #fff; z-index: 1000; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; flex-flow: column; justify-content: center; display: none;} ';
	styles += '#offline-screen h1 {color: #333; font-size: 14px; white-space: pre; text-align: center;} ';
	styles += '#offline-screen img {width: 128px;} ';
	styles += '.app-offline .toolbar-background {background: #424242;} ';
	styles += '.app-offline #offline-screen {display: flex;} ';
	styles += '.app-offline .online {display: none;} ';
	styles += '.app-offline .offline {display: block;} ';

	if ( css.styleSheet ) {
		css.styleSheet.cssText = styles;
	} else {
		css.appendChild( document.createTextNode( styles ) );
	}

	document.getElementsByTagName( "head" )[0].appendChild( css );
}

//Check connectivity on device ready
function offlineMonitor() {
	if ( enableOfflineScreen ) {
		appendOfflineStyle()
		appendOfflineScreen();
	}

	document.addEventListener( 'offline', goOffline, false );
	document.addEventListener( 'online', goOnline, false );

	if ( isOffline() ) {
		goOffline();
	} else {
		goOnline();
	}
}

( function () {
	/*
	 app-offline css class will be added to the body. Elements can use it for styling, example: .app-offline .toolbar-background {background: #424242;}
	 The optional Offline Screen will take the entire screen and lock the menu.
	 assets/images/offline.png is required for the screen
	 The css class .offline and .online can be used anywhere.
	 .offline will display the content when the device is offline, example .toolbar-background.offline {background: #424242;}
	 .online will display the content when the device is online, example .toolbar-background.offline {background: #1976d2}
	 */
//	enableOfflineScreen = false;
	document.addEventListener( 'deviceready', offlineMonitor, false );
} )();