From a54a42950e49361b7a585e030029db530afa1acb Mon Sep 17 00:00:00 2001 From: Georg Fischer Date: Wed, 30 Dec 2015 10:43:58 +0100 Subject: [PATCH 1/8] hide loader after language was updated --- .gitignore | 4 +++- scripts/glitcher.js | 25 ++++++++++++++++++------- scripts/models/localisationmodel.js | 8 ++++---- 3 files changed, 25 insertions(+), 12 deletions(-) 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/scripts/glitcher.js b/scripts/glitcher.js index 05b1442..3906cc5 100644 --- a/scripts/glitcher.js +++ b/scripts/glitcher.js @@ -64,6 +64,8 @@ require( [ LocalisationModel, localforage ) { + var wasAppLoadComplete = 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 ( ! wasAppLoadComplete ) { + requestAnimationFrame ( function () { + wasAppLoadComplete = 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..502ba48 100644 --- a/scripts/models/localisationmodel.js +++ b/scripts/models/localisationmodel.js @@ -9,7 +9,7 @@ define( var self = this; - var publishers = addPublishers( self, 'error' ); + var publishers = addPublishers( self, 'update', 'error' ); var textElData = [ ]; var texts = ''; @@ -37,7 +37,6 @@ 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 ); @@ -74,11 +73,12 @@ define( item.wasUpdated = true; } - } - else { + } else { textElData.splice( i, 1 ); } } + + publishers.update.dispatch(); } ); } } From dbef3acce655b3f0c5d66be2b4af0b82c663ace7 Mon Sep 17 00:00:00 2001 From: Georg Fischer Date: Wed, 30 Dec 2015 10:44:14 +0100 Subject: [PATCH 2/8] rename var --- scripts/glitcher.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scripts/glitcher.js b/scripts/glitcher.js index 3906cc5..4333b8f 100644 --- a/scripts/glitcher.js +++ b/scripts/glitcher.js @@ -64,7 +64,7 @@ require( [ LocalisationModel, localforage ) { - var wasAppLoadComplete = false; + var wasAppLoadCompleted = false; var imageModel = ImageModel(); var glitchModel = GlitchModel(); @@ -326,9 +326,9 @@ require( [ } function hideAppLoader () { - if ( ! wasAppLoadComplete ) { + if ( ! wasAppLoadCompleted ) { requestAnimationFrame ( function () { - wasAppLoadComplete = true; + wasAppLoadCompleted = true; document.documentElement.classList.add( 'is-loaded' ); setTimeout( function () { From dc6a29e64e51fc3eea74650f25cfc8df978c841f Mon Sep 17 00:00:00 2001 From: Georg Fischer Date: Wed, 30 Dec 2015 13:38:34 +0100 Subject: [PATCH 3/8] remove debug code --- scripts/models/localisationmodel.js | 1 - 1 file changed, 1 deletion(-) diff --git a/scripts/models/localisationmodel.js b/scripts/models/localisationmodel.js index 502ba48..2bb1cd4 100644 --- a/scripts/models/localisationmodel.js +++ b/scripts/models/localisationmodel.js @@ -149,7 +149,6 @@ define( self.setLanguage = setLanguage; self.localizeText = localizeText; self.settingUpdated = settingUpdated; - self.randomNumber = ~~( Math.random() * 1000 ); } LocalisationModel.sharedInstance = LocalisationModel(); From f87c8681356760dceeac596bac4138e18849eb33 Mon Sep 17 00:00:00 2001 From: Georg Fischer Date: Wed, 30 Dec 2015 13:38:59 +0100 Subject: [PATCH 4/8] move functions --- scripts/models/localisationmodel.js | 36 ++++++++++++++--------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/scripts/models/localisationmodel.js b/scripts/models/localisationmodel.js index 2bb1cd4..ffe64aa 100644 --- a/scripts/models/localisationmodel.js +++ b/scripts/models/localisationmodel.js @@ -26,6 +26,24 @@ define( } } + 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(); + } + function loadLanguage ( languageName ) { languageWasLoaded = false; @@ -128,24 +146,6 @@ 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; From 2b1229227eda422f06a248ab041a1938ae2e8186 Mon Sep 17 00:00:00 2001 From: Georg Fischer Date: Wed, 30 Dec 2015 15:18:48 +0100 Subject: [PATCH 5/8] fix language name in de-de --- lang/de-de.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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/)." From 14ec6fbd1c051161f3c59cda1df78916caffbb6f Mon Sep 17 00:00:00 2001 From: Georg Fischer Date: Wed, 30 Dec 2015 15:19:23 +0100 Subject: [PATCH 6/8] add localforage keys to config --- scripts/config.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 }, From 39a4d99aad4a6d1d675dbf2c9ec4cbb45232598b Mon Sep 17 00:00:00 2001 From: Georg Fischer Date: Wed, 30 Dec 2015 15:20:01 +0100 Subject: [PATCH 7/8] load localforage key from config instead of passing it as an argument --- scripts/models/settingsmodel.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) 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 ); From 170951164b908e2c9d2dbef85a470221a648ff86 Mon Sep 17 00:00:00 2001 From: Georg Fischer Date: Wed, 30 Dec 2015 15:20:38 +0100 Subject: [PATCH 8/8] save and load language data to/from localstorage for faster load time the second time around. --- scripts/models/localisationmodel.js | 37 +++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/scripts/models/localisationmodel.js b/scripts/models/localisationmodel.js index ffe64aa..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(); @@ -20,15 +20,17 @@ 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 settingUpdated ( name, value ) { if ( name === 'language' && value !== currentLanguage ) { - loadLanguage( value ); + setLanguage( value ); } } @@ -44,7 +46,7 @@ define( updateAllTexts(); } - function loadLanguage ( languageName ) { + function loadLanguageFile ( languageName ) { languageWasLoaded = false; reqwest( { @@ -57,19 +59,34 @@ define( 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 );