add hint to translation tool for users with unsupported language

lang/en-us.json

@@ -131,6 +131,11 @@
 			"Welcome! Looks like this is your first time here.",
 			"To get started, you can drag the sliders below and glitch an image.",
 			"You can also import an image from your device. Just click on the OPEN button in the menu."
+		],
+		"newlanguage": [
+			"Welcome back! I hope you like the image glitcher.\n\nIt looks like you speak another language next to English.",
+			"Do you think you could help other users of this app and translate some text into another language?",
+			"Please have a look at the [Translation Tool](translation.html) if you’re interested. Thank you!"
 		]
 	}
 }

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 );