Merge branch 'loading'

.gitignore

@@ -27,4 +27,6 @@ $RECYCLE.BIN/
 node_modules/
 
 # production folder
-production/
+production/
+
+todo.md

lang/de-de.json

@@ -1,5 +1,5 @@
 {
-	"lang": "en-us",
+	"lang": "de-de",
 	"index": {
 		"title": "Image Glitch Werkzeug",
 		"description": "Mit diesem Programm kannst du ein Bild so bearbeiten, dass es kaputt aussieht. Ziehe ein Bild in das Browserfenster um loszulegen.\n\nDas Programm verändert einige Bytes in der Bilddatei. Aufgrund der Art und Weise wie der [JPEG Logarithmus](https://de.wikipedia.org/wiki/JPEG) funktioniert, wird trotz eigenlich unlesbarer Rohdaten weiterhin ein Bild erzeugt. Dieses Programm ist angelehnt an ein ähnliches Experiment von [experiment](http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator) von [soulwire](http://github.com/soulwire) in Flash.\n\nDieses Programm wurde von [Georg](http://snorpey.com/) entwickelt. Er freut sich übrigens immer, von den Nutzern seiner Programme zu hören wie sie die Programme einsetzen. Du kannst Georg bei [Twitter](https://twitter.com/snorpey) folgen oder dir den Quellcode dieses Programms bei [GitHub](https://github.com/snorpey/jpg-glitch) ansehen.\n\nFalls dir dieses Programm gefallen hat, gefallen dir vielleicht auch Georgs andere [Experimente](http://snorpey.github.io/experiments/)."

scripts/config.js

@@ -8,7 +8,10 @@ define(
 				// https://api.imgur.com/oauth2/addclient
 				// thank you.
 				imgur:   'a4c24380d884932',
-				storage: 'glitch-items'
+				
+				storage: 'glitch-items',
+				settings: 'settings',
+				language: 'language'
 			},
 			defaultControlParams: {
 				amount: {     min: 0, max: 99,  value: 24 },

scripts/glitcher.js

@@ -64,6 +64,8 @@ require( [
 	LocalisationModel,
 	localforage
 ) {
+	var wasAppLoadCompleted = false;
+
 	var imageModel = ImageModel();
 	var glitchModel = GlitchModel();
 	var shareModel = ShareModel();
@@ -107,12 +109,6 @@ require( [
 			controlsView.loadInitialValues();
 			loadInitialItem();
 		}
-
-		document.documentElement.classList.add( 'is-loaded' );
-		
-		setTimeout( function () {
-			document.documentElement.classList.remove( 'is-loading' );
-		}, 10 );
 	}
 
 	// hooks up all messaging between items
@@ -218,7 +214,9 @@ require( [
 			.on( 'error', indicatorView.showError );
 
 		localisationModel
-			.on( 'error', indicatorView.showError );
+			.on( 'error', indicatorView.showError )
+			.on( 'error', hideAppLoader )
+			.on( 'update', hideAppLoader );
 	}
 
 	function addCSSClasses () {
@@ -327,5 +325,18 @@ require( [
 		}
 	}
 
+	function hideAppLoader () {
+		if ( ! wasAppLoadCompleted ) {
+			requestAnimationFrame ( function () {
+				wasAppLoadCompleted = true;
+				document.documentElement.classList.add( 'is-loaded' );
+				
+				setTimeout( function () {
+					document.documentElement.classList.remove( 'is-loading' );
+				}, 10 );
+			} );
+		}
+	}
+
 	init();
 } );

scripts/models/localisationmodel.js

@@ -1,7 +1,7 @@
 /*global define*/
 define(
-	[ 'config', 'util/dom', 'util/object', 'util/string', 'util/addpublishers', 'lib/reqwest' ],
-	function ( config, domHelper, objectHelper, stringHelper, addPublishers, reqwest ) {
+	[ 'config', 'util/dom', 'util/object', 'util/string', 'util/addpublishers', 'lib/reqwest', 'lib/localforage.nopromises' ],
+	function ( config, domHelper, objectHelper, stringHelper, addPublishers, reqwest, localforage ) {
 		function LocalisationModel () {
 			if ( ! ( this instanceof LocalisationModel ) ) {
 				return new LocalisationModel();
@@ -9,7 +9,7 @@ define(
 
 			var self = this;
 
-			var publishers = addPublishers( self, 'error' );
+			var publishers = addPublishers( self, 'update', 'error' );
 			
 			var textElData = [ ];
 			var texts = '';
@@ -20,13 +20,33 @@ define(
 			
 			var linkOptions = { links: { newTab: true } };
 
-			function setLanguage ( newLanguage ) {
-				if ( newLanguage !== currentLanguage && newLanguage in config.availableLanguages ) {
-					loadLanguage( newLanguage );
+			loadLanguageFromStorage();
+
+			function setLanguage ( newLanguageName ) {
+				if ( newLanguageName !== currentLanguage && config.settings.language.options.indexOf( newLanguageName ) !== -1 ) {
+					loadLanguageFile( newLanguageName );
 				}
 			}
 
-			function loadLanguage ( languageName ) {
+			function settingUpdated ( name, value ) {
+				if ( name === 'language' && value !== currentLanguage ) {
+					setLanguage( value );
+				}
+			}
+
+			function localizeText ( el, attribute, key ) {
+				if ( el && attribute && key ) {
+					textElData.push( { el: el, attribute: attribute, key: key, wasUpdated: false, args: getArgs( arguments ) } );
+				} else {
+					if ( typeof el === 'string' ) {
+						return getTextForKey( el, getArgs( arguments, 1 ) );
+					}
+				}
+
+				updateAllTexts();
+			}
+
+			function loadLanguageFile ( languageName ) {
 				languageWasLoaded = false;
 
 				reqwest( {
@@ -37,22 +57,36 @@ define(
 						// if this is the first language to load, that's really bad.
 						languageWasLoaded = true;
 						publishers.error.dispatch( 'I\'m really sorry. I failed to load the language file for ' + languageName + '. This is a serious error that makes the app very hard to use. Maybe you can try reloading?' );
-
 					},
 					success: function ( res ) {
-						languageLoaded( languageName, res );
+						languageLoaded( res.lang, res );
 					}
 				} );
 			}
 
-			function languageLoaded ( newLanguageName, newTexts ) {
+			function loadLanguageFromStorage () {
+				localforage.getItem( config.keys.language, function ( err, loadedLanguage ) {
+					if ( ! err ) {
+						if ( loadedLanguage && loadedLanguage.lang ) {
+							languageLoaded( loadedLanguage.lang, loadedLanguage );
+						}
+					}
+				} )
+			}
+
+			function languageLoaded ( newLanguageName, newLanguage ) {
 				currentLanguage = newLanguageName;
 				languageWasLoaded = true;
-				texts = newTexts;
+				texts = newLanguage;
+				saveLanguage( newLanguage );
 				resetAllTexts();
 				updateAllTexts();
 			}
 
+			function saveLanguage ( newLanguage ) {
+				localforage.setItem( config.keys.language, newLanguage );
+			}
+
 			function updateAllTexts () {
 				if ( languageWasLoaded ) {
 					cancelAnimationFrame( animationFrameId );
@@ -74,11 +108,12 @@ define(
 									
 									item.wasUpdated = true;
 								}
-							}
-							else {
+							} else {
 								textElData.splice( i, 1 );
 							}
 						}
+
+						publishers.update.dispatch();
 					} );
 				}
 			}
@@ -128,28 +163,9 @@ define(
 				return result;
 			}
 
-			function settingUpdated ( name, value ) {
-				if ( name === 'language' && value !== currentLanguage ) {
-					loadLanguage( value );
-				}
-			}
-
-			function localizeText ( el, attribute, key ) {
-				if ( el && attribute && key ) {
-					textElData.push( { el: el, attribute: attribute, key: key, wasUpdated: false, args: getArgs( arguments ) } );
-				} else {
-					if ( typeof el === 'string' ) {
-						return getTextForKey( el, getArgs( arguments, 1 ) );
-					}
-				}
-
-				updateAllTexts();
-			}
-
 			self.setLanguage = setLanguage;
 			self.localizeText = localizeText;
 			self.settingUpdated = settingUpdated;
-			self.randomNumber = ~~( Math.random() * 1000 );
 		}
 
 		LocalisationModel.sharedInstance = LocalisationModel();

scripts/models/settingsmodel.js

@@ -2,9 +2,9 @@
 define(
 	[ 'config', 'util/browser', 'util/object', 'util/addpublishers', 'lib/localforage.nopromises' ],
 	function ( config, browser, objectHelper, addPublishers, localforage ) {
-		function SettingsModel ( storageKey ) {
+		function SettingsModel () {
 			if ( ! ( this instanceof SettingsModel ) ) {
-				return new SettingsModel( storageKey );
+				return new SettingsModel();
 			}
 
 			var self = this;
@@ -21,12 +21,10 @@ define(
 
 			var settings = { };
 
-			storageKey = storageKey || 'settings';
-
 			if ( useLocalForage && browser.test( 'webworker' ) && browser.test( 'browserdb' ) && ! browser.test( 'safari' ) ) {
 				worker = new Worker( config.workers.settings );
 				worker.addEventListener( 'message', workerResponded, false );
-				sendMessageToWorker( 'setStorageKey', storageKey );
+				sendMessageToWorker( 'setStorageKey', config.keys.settings );
 				sendMessageToWorker( 'setDefaultSettings', defaultSettings );
 			} else {
 				settingsUpdated( defaultSettings );
@@ -79,7 +77,7 @@ define(
 					if ( worker ) {
 						sendMessageToWorker( 'save', newSettings );
 					} else {
-						localforage.setItem( storageKey, newSettings, function ( err, savedSettings ) {
+						localforage.setItem( config.keys.settings, newSettings, function ( err, savedSettings ) {
 							if ( err ) {
 								sendError( 'settings.error.save' );
 								console && console.log( 'localforage error', err );
@@ -100,7 +98,7 @@ define(
 					if ( worker ) {
 						sendMessageToWorker( 'load' );
 					} else {
-						localforage.getItem( storageKey, function ( err, loadedSettings ) {
+						localforage.getItem( config.keys.settings, function ( err, loadedSettings ) {
 							if ( err ) {
 								sendError( 'settings.error.load' );
 								console && console.log( 'localforage error', err );