diff --git a/.gitignore b/.gitignore index 2f0104d..a8f2b7c 100644 --- a/.gitignore +++ b/.gitignore @@ -27,4 +27,6 @@ $RECYCLE.BIN/ node_modules/ # production folder -production/ \ No newline at end of file +production/ + +todo.md \ No newline at end of file diff --git a/lang/de-de.json b/lang/de-de.json index 7685117..68d716e 100644 --- a/lang/de-de.json +++ b/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/)." diff --git a/scripts/config.js b/scripts/config.js index a6678b5..1f452ea 100644 --- a/scripts/config.js +++ b/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 }, diff --git a/scripts/glitcher.js b/scripts/glitcher.js index 05b1442..4333b8f 100644 --- a/scripts/glitcher.js +++ b/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(); } ); \ No newline at end of file diff --git a/scripts/models/localisationmodel.js b/scripts/models/localisationmodel.js index e50065a..315b0fd 100644 --- a/scripts/models/localisationmodel.js +++ b/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(); diff --git a/scripts/models/settingsmodel.js b/scripts/models/settingsmodel.js index 0d7469f..d65a395 100644 --- a/scripts/models/settingsmodel.js +++ b/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 );