add hint to translation tool for users with unsupported language

scripts/glitcher.js

@@ -72,8 +72,8 @@ require( [
 	var storageModel = StorageModel();
 	var controlsModel = ControlsModel( config.defaultControlParams );
 	var networkModel = NetworkModel();
-	var settingsModel = SettingsModel();
 	var localisationModel = LocalisationModel.sharedInstance;
+	var settingsModel = SettingsModel();
 
 	var appView = AppView( document.body );
 	var navView = NavView( appView.el );
@@ -198,6 +198,7 @@ require( [
 			.on( 'loaditem', loadEntry )
 			.on( 'statusmessage', indicatorView.showMessage )
 			.on( 'error', indicatorView.showError )
+			.on( 'visits', welcomeView.updateVisits )
 			.on( 'firstvisit', welcomeView.show );
 
 		networkModel
@@ -216,6 +217,7 @@ require( [
 		localisationModel
 			.on( 'error', indicatorView.showError )
 			.on( 'error', hideAppLoader )
+			.on( 'newlanguage', welcomeView.showLanguageHint )
 			.on( 'update', hideAppLoader );
 	}
 
@@ -230,8 +232,8 @@ require( [
 			localforage.config( config.localForage );
 
 			var driver = [
-				localforage.WEBSQL,
 				localforage.INDEXEDDB,
+				localforage.WEBSQL,
 				localforage.LOCALSTORAGE
 			];
 

scripts/models/localisationmodel.js

@@ -9,7 +9,7 @@ define(
 
 			var self = this;
 
-			var publishers = addPublishers( self, 'update', 'error' );
+			var publishers = addPublishers( self, 'update', 'newlanguage', 'error' );
 			
 			var textElData = [ ];
 			var texts = '';
@@ -20,6 +20,30 @@ define(
 			
 			var linkOptions = { links: { newTab: true } };
 
+			var userLanguage = ( navigator.language || navigator.userLanguage || '' ).toLowerCase();
+
+			// detect user language
+			if ( userLanguage !== '' ) {
+				var matchingLanguageWasFound = false;
+
+				if ( config.settings.language.options.indexOf( userLanguage ) > -1 ) {
+					config.settings.language.value = userLanguage;
+					matchingLanguageWasFound = true;
+				} else {
+					// en-au -> en-us
+					config.settings.language.options.forEach( function ( languageOption ) {
+						if ( userLanguage.substr( 0, 2 ) === languageOption.substr( 0, 2 ) ) {
+							config.settings.language.value = languageOption;
+							matchingLanguageWasFound = true;
+						}
+					} );
+				}
+
+				if ( ! matchingLanguageWasFound ) {
+					setTimeout( publishers.newlanguage.dispatch, 100, userLanguage );
+				}
+			}
+
 			loadLanguageFromStorage();
 
 			// receive message from the translation tool and

scripts/models/settingsmodel.js

@@ -14,21 +14,7 @@ define(
 			var worker;
 			var defaultSettings = config.settings;
 			var userLanguage = ( navigator.language || navigator.userLanguage || '' ).toLowerCase();
-
-			// set initial user language
-			if ( userLanguage !== '' ) {
-				if ( defaultSettings.language.options.indexOf( userLanguage ) > -1 ) {
-					defaultSettings.language.value = userLanguage;
-				} else {
-					// en-au -> en-us
-					defaultSettings.language.options.forEach( function ( languageOption ) {
-						if ( userLanguage.substr( 0, 2 ) === languageOption.substr( 0, 2 ) ) {
-							defaultSettings.language.value = languageOption;
-						}
-					} );
-				}
-			}
-
+			
 			var settings = { };
 
 			if ( useLocalForage && browser.test( 'webworker' ) && browser.test( 'browserdb' ) && ! browser.test( 'safari' ) ) {

scripts/models/storagemodel.js

@@ -16,6 +16,7 @@ define(
 
 			var self = this;
 			var isFirstVisit = false;
+			var visitCount = 0;
 			var entries = { };
 			var useLocalForage = browser.test( 'localforage' ) && localforage;
 			var worker;
@@ -23,7 +24,7 @@ define(
 			var publisherNames = [
 				'update', 'save', 'loaditem',
 				'removeall', 'removelocaldata', 'removeimgurdata',
-				'firstvisit', 'error', 'statusmessage'
+				'visits', 'firstvisit', 'error', 'statusmessage'
 			];
 
 			var publishers = addPublishers( self, publisherNames );
@@ -164,11 +165,17 @@ define(
 								entries = loadedData && loadedData.entries ? loadedData.entries : { };
 								publishers.update.dispatch( entries );
 
+								visitCount = ( loadedData && loadedData.visitCount ) ? loadedData.visitCount : 1;
 								isFirstVisit = ( loadedData && loadedData.lastVisit ) ? false : true;
 								
 								if ( isFirstVisit ) {
 									publishers.firstvisit.dispatch();
-									save();
+								}
+								
+								save();
+
+								if ( visitCount ) {
+									publishers.visitCount.dispatch( visitCount );
 								}
 
 								if ( typeof callback === 'function' ) {
@@ -187,7 +194,7 @@ define(
 					if ( worker ) {
 						sendMessageToWorker( 'save' );
 					} else {
-						localforage.setItem( storageKey, { entries: entries, lastVisit: Date.now() }, function ( err, savedData ) {
+						localforage.setItem( storageKey, { entries: entries, lastVisit: Date.now(), visitCount: visitCount + 1 }, function ( err, savedData ) {
 							if ( err ) {
 								publishers.error.dispatch( 'file.error.save' );
 								console && console.log( 'localforage error', err );

scripts/views/indicatorview.js

@@ -49,8 +49,12 @@ define(
 			function addNotification ( type, params ) {
 				var notificationEl = elHelper.createEl( 'div', 'notification notification-' + type, notificationsEl );
 				
-				if ( params.data && params.data.innerHTML && params.data.args && params.data.args.length ) {
-					loc.apply( null, [ notificationEl, 'innerHTML', params.message ].concat( params.data.args ) );
+				if ( params.data && params.data.innerHTML ) {
+					if ( params.data.args && params.data.args.length ) {
+						loc.apply( null, [ notificationEl, 'innerHTML', params.message ].concat( params.data.args ) );
+					} else {
+						loc.apply( null, [ notificationEl, 'innerHTML', params.message ] );
+					}
 				} else {
 					loc( notificationEl, 'textContent', params.message );
 				}

scripts/views/welcomeview.js

@@ -13,6 +13,8 @@ define(
 			var self = this;
 
 			var publishers = addPublishers( self, 'message' );
+			var visitCount = 0;
+			var isOnline = false;
 
 			function show () {
 				var messages = [
@@ -28,7 +30,29 @@ define(
 				} );
 			}
 
+			function showLanguageHint ( languageName ) {
+				if ( visitCount % 4 === 1 ) {
+					var messages = [
+						'welcome.newlanguage.0',
+						'welcome.newlanguage.1',
+						'welcome.newlanguage.2'
+					];
+					
+					messages.forEach( function ( message, index ) {
+						setTimeout( function () {
+							publishers.message.dispatch( message, { innerHTML: true }, index < 2 ? 4000 : 6000 );
+						}, index * 2600 );
+					} );
+				}
+			}
+
+			function updateVisits ( newVisitCount ) {
+				visitCount = newVisitCount;
+			}
+
 			self.show = show;
+			self.updateVisits = updateVisits;
+			self.showLanguageHint = showLanguageHint;
 		}
 
 		return WelcomeView;

scripts/workers/storageworker.js

@@ -3,6 +3,7 @@ importScripts( '../lib/md5.js' );
 
 var storageKey = 'items';
 var entries = { };
+var visitCount = 0;
 
 self.addEventListener( 'message', receivedMessageEvent, false );
 
@@ -161,11 +162,17 @@ function load ( callback ) {
 			entries = loadedData && loadedData.entries ? loadedData.entries : { };
 			sendMessage( 'update', entries );
 			
+			visitCount = ( loadedData && loadedData.visitCount ) ? loadedData.visitCount : 1;
 			isFirstVisit = ( loadedData && loadedData.lastVisit ) ? false : true;
-			
+						
 			if ( isFirstVisit ) {
 				sendMessage( 'firstvisit' );
-				save();
+			}
+			
+			save();
+
+			if ( visitCount ) {
+				sendMessage( 'visits', visitCount );
 			}
 
 			if ( typeof callback === 'function' ) {
@@ -176,7 +183,7 @@ function load ( callback ) {
 }
 
 function save ( callback ) {
-	localforage.setItem( storageKey, { entries: entries, lastVisit: Date.now() }, function ( err, savedData ) {
+	localforage.setItem( storageKey, { entries: entries, lastVisit: Date.now(), visitCount: visitCount + 1 }, function ( err, savedData ) {
 		if ( err ) {
 			sendError( 'file.error.save' );
 			console && console.log( 'localforage error', err );