[WIP] i18n

index.html

@@ -33,52 +33,58 @@
         name="toggle-menu-visible"
         id="toggle-menu-visible"
         class="toggle-menu-visible"
-        title="Toggle menu">
-      <label for="toggle-menu-visible" title="Toggle menu"></label>
+        data-hfg-i18n-attrs="title:menu.toggle_btn.title">
+      <label for="toggle-menu-visible" data-hfg-i18n-attrs="title:menu.toggle_btn.title"></label>
       <div class="menu-content">
         <div class="menu-content-inner">
-          <h1>Particles</h1>
+          <h1 data-hfg-i18n-id="page.title">Particles Playground</h1>
           <fieldset id="menu-general-controls">
-            <legend>General</legend>
+            <legend data-hfg-i18n-id="menu.general_settings.heading">General</legend>
+            <label id="menu-locale-control">
+              <span data-hfg-i18n-id="menu.locale_switch.desc">Language:</span>
+              <select>
+                <!-- to be filled by LocalePicker -->
+              </select>
+            </label><br/>
             <label id="menu-bg-color-control">
-              Background color:
+              <span data-hfg-i18n-id="menu.bg_color_control.desc">Background color:</span>
               <input type="color" value="#000000" />
             </label><br/>
             <fieldset>
-              <legend>Number of particles</legend>
+              <legend data-hfg-i18n-id="menu.particles.count.desc">Number of particles</legend>
               <label>
-                Horizontal (x):
+                <span data-hfg-i18n-id="menu.particles.count.horizontal">Horizontal (x):</span>
                 <input type="number" min="1" step="1" id="menu-particles-x"/>
               </label><br/>
               <label>
-                Vertical (y):
+                <span data-hfg-i18n-id="menu.particles.count.vertical">Vertical (y):</span>
                 <input type="number" min="1" step="1" id="menu-particles-y"/>
               </label>
             </fieldset>
             <label id="menu-particle-size-control">
-              Particle size:
+              <span data-hfg-i18n-id="menu.particles.size.desc">Particle size:</span>
               <input type="number" value="100" />%
             </label><br/>
             <label id="menu-particle-shape-control">
-              Particle shape:
+              <span data-hfg-i18n-id="menu.particles.shape.desc">Particle shape:</span>
               <select>
-                <option value="circle" selected>circle</option>
-                <option value="square">square</option>
-                <option value="triangle">triangle</option>
+                <option value="circle" data-hfg-i18n-id="menu.particles.shape.circle" selected>circle</option>
+                <option value="square" data-hfg-i18n-id="menu.particles.shape.square">square</option>
+                <option value="triangle" data-hfg-i18n-id="menu.particles.shape.triangle">triangle</option>
               </select>
             </label><br/>
             <label id="menu-particle-edge-fade-control">
-              Particle edge fading:
+              <span data-hfg-i18n-id="menu.particles.fading.desc">Particle edge fading:</span>
               <select>
-                <option value="none" selected>none</option>
-                <option value="fade-out">fade out</option>
+                <option value="none" data-hfg-i18n-id="menu.particles.fading.none" selected>none</option>
+                <option value="fade-out" data-hfg-i18n-id="menu.particles.fading.fade_out">fade out</option>
               </select>
             </label><br/>
             <label id="menu-particle-overlap-control">
-              Particle overlap:
+              <span data-hfg-i18n-id="menu.particles.overlap.desc">Particle overlap:</span>
               <select>
-                <option value="add">glow</option>
-                <option value="alpha blend" selected>blend</option>
+                <option value="add" data-hfg-i18n-id="menu.particles.overlap.glow">glow</option>
+                <option value="alpha blend" data-hfg-i18n-id="menu.particles.overlap.blend" selected>blend</option>
               </select>
             </label>
           </fieldset>
@@ -88,38 +94,39 @@ <h1>Particles</h1>
           -->
           <div class="menu-state-ctrl-buttons">
             <label id="menu-btn-importstate" class="menu-btn-importstate">
-              Load
+              <span data-hfg-i18n-id="menu.state.load">Load</span>
               <input type="file" accept=".json,application/json"/>
             </label>
-            <button type="button" id="menu-btn-exportstate" class="menu-btn-exportstate">Save</button>
-            <button type="button" id="menu-btn-resetstate" class="menu-btn-resetstate">Reset</button>
+            <button type="button" id="menu-btn-exportstate" class="menu-btn-exportstate" data-hfg-i18n-id="menu.state.save">Save</button>
+            <button type="button" id="menu-btn-resetstate" class="menu-btn-resetstate" data-hfg-i18n-id="menu.state.reset">Reset</button>
           </div>
           <label class="menu-select-preset-control">
             <select>
-              <option value="" disabled selected>Load a preset configuration</option>
+              <option value="" disabled selected data-hfg-i18n-id="menu.state.load_preset.prompt">Load a preset configuration</option>
             </select>
           </label><br />
           <ul class="menu-effect-list">
             <!-- Effects will be listed here -->
           </ul>
           <div class="menu-weblinks-container">
-            Weblinks:
+            <span data-hfg-i18n-id="menu.weblinks.desc">Weblinks:</span>
             <ul>
               <li><a href="https://github.com/suluke/hfg-particles/tree/master/manual/MANUAL.md">
-                <span class="fa fa-book" /> Manual
+                <span class="fa fa-book" /> <span data-hfg-i18n-id="menu.weblinks.manual">Manual</span>
               </a></li>
               <li><a href="https://github.com/suluke/hfg-particles">
-                <span class="fa fa-github" /> Source Code (Github, MIT License)
+                <span class="fa fa-github" /> <span data-hfg-i18n-id="menu.weblinks.source_code">Source Code (Github, MIT License)</span>
               </a></li>
               <li><a href="https://commons.wikimedia.org/wiki/File:Edgar_Germain_Hilaire_Degas_071.jpg">
-                <span class="fa fa-image" /> Default image by Edgar Degas (Wikimedia Commons)
+                <span class="fa fa-image" /> <span data-hfg-i18n-id="menu.weblinks.default_image">Default image by Edgar Degas (Wikimedia Commons)</span>
               </a></li>
             </ul>
           </div>
         </div>
         <button type="button"
           id="menu-btn-apply"
           class="menu-btn-apply"
+          data-hfg-i18n-id="menu.apply_btn.label"
           disabled
         >Apply</button>
       </div>
@@ -154,15 +161,15 @@ <h1>Particles</h1>
 
     <p class="file-drag-indicator">
       <span class="file-drag-icon"></span>
-      Drop image file to load
+      <span data-hfg-i18n-id="page.dropzone.desc">Drop image file to load</span>
     </p>
     <input type="file"
       name="btn-file-select"
       id="btn-file-select"
       class="btn-file-select"
-      title="Select image"
+      data-hfg-i18n-attrs="title:page.upload_btn.title"
       accept="image/*">
-    <label for="btn-file-select" title="Select image"></label>
+    <label for="btn-file-select" data-hfg-i18n-attrs="title:page.upload_btn.title"></label>
 
     <div id="modal-container"></div>
 

js/effects/change-image.js

@@ -3,7 +3,6 @@ import { parseHtml, imageScalingMarkup } from '../ui/util';
 import { NonFatalError } from '../error-manager';
 
 const EffectName = 'Change Image';
-const EffectDescription = 'Changes the particle data to a configurable image (file or url)';
 
 const States = {
   INVALID: 0,
@@ -172,12 +171,8 @@ export default class ChangeImageEffect extends Effect {
     });
   }
 
-  static getDisplayName() {
-    return EffectName;
-  }
-
-  static getDescription() {
-    return EffectDescription;
+  static getTranslationId() {
+    return 'change_image';
   }
 
   static getConfigUI() {

js/effects/converge-circle.js

@@ -2,7 +2,6 @@ import Effect, { ConfigUI, fract } from './effect';
 import { parseHtml } from '../ui/util';
 
 const EffectName = 'Converge to circle';
-const EffectDescription = 'Particles are attracted towards their position on an HSV color wheel centered around the center of the screen';
 
 class ConvergeCircleConfigUI extends ConfigUI {
   constructor() {
@@ -77,12 +76,8 @@ export default class ConvergeCircleEffect extends Effect {
     `;
   }
 
-  static getDisplayName() {
-    return EffectName;
-  }
-
-  static getDescription() {
-    return EffectDescription;
+  static getTranslationId() {
+    return 'converge_circle';
   }
 
   static getConfigUI() {

js/effects/converge-point.js

@@ -2,7 +2,6 @@ import Effect, { ConfigUI, fract } from './effect';
 import { parseHtml } from '../ui/util';
 
 const EffectName = 'Converge to point';
-const EffectDescription = 'Particles are attracted towards the center of the screen';
 
 class ConvergePointConfigUI extends ConfigUI {
   constructor() {
@@ -64,12 +63,8 @@ export default class ConvergePointEffect extends Effect {
     `;
   }
 
-  static getDisplayName() {
-    return EffectName;
-  }
-
-  static getDescription() {
-    return EffectDescription;
+  static getTranslationId() {
+    return 'converge_point';
   }
 
   static getConfigUI() {

js/effects/dummy.js

@@ -2,7 +2,6 @@ import Effect, { ConfigUI, fract } from './effect';
 import { parseHtml } from '../ui/util';
 
 const EffectName = 'Dummy';
-const EffectDescription = 'An effect that has no effect - useful to extend the timeline length without having anything happen';
 
 class DummyConfigUI extends ConfigUI {
   constructor() {
@@ -33,12 +32,8 @@ export default class DummyEffect extends Effect {
   static register(instance, props, uniforms, vertexShader) {
   }
 
-  static getDisplayName() {
-    return EffectName;
-  }
-
-  static getDescription() {
-    return EffectDescription;
+  static getTranslationId() {
+    return 'dummy';
   }
 
   static getConfigUI() {

js/effects/effect.js

@@ -16,7 +16,7 @@ export default class Effect {
     return this.name;
   }
 
-  static getDisplayName() {
+  static getTranslationId() {
     throw new Error('Method not implemented');
   }
 
@@ -32,10 +32,6 @@ export default class Effect {
     throw new Error('Method not implemented');
   }
 
-  static getDescription() {
-    throw new Error('Method not implemented');
-  }
-
   static supportsRepetition() {
     return true;
   }

js/effects/flickr-image.js

@@ -3,7 +3,6 @@ import { parseHtml, imageScalingMarkup } from '../ui/util';
 import Flickr, { ApiKey } from '../polyfills/flickr';
 
 const EffectName = 'Flickr Image';
-const EffectDescription = 'Changes the underlying image to one loaded from Flickr\'s recent images feed';
 const Attribution = 'This product uses the Flickr API but is not endorsed or certified by Flickr.';
 
 class FlickrImageConfigUI extends ConfigUI {
@@ -309,12 +308,8 @@ export default class FlickrImageEffect extends Effect {
     });
   }
 
-  static getDisplayName() {
-    return EffectName;
-  }
-
-  static getDescription() {
-    return EffectDescription;
+  static getTranslationId() {
+    return 'flickr_image';
   }
 
   static getConfigUI() {

js/effects/hue-displace.js

@@ -2,7 +2,6 @@ import Effect, { ConfigUI, fract } from './effect';
 import { parseHtml } from '../ui/util';
 
 const EffectName = 'Displace by hue';
-const EffectDescription = 'Particles move into different directions depending on their hue';
 
 class HueDisplaceConfigUI extends ConfigUI {
   constructor() {
@@ -99,12 +98,8 @@ export default class HueDisplaceEffect extends Effect {
     }
   }
 
-  static getDisplayName() {
-    return EffectName;
-  }
-
-  static getDescription() {
-    return EffectDescription;
+  static getTranslationId() {
+    return 'hue_displace';
   }
 
   static getConfigUI() {

js/effects/particle-displace.js

@@ -3,7 +3,6 @@ import { parseHtml } from '../ui/util';
 import Ease from './ease-mixins';
 
 const EffectName = 'Displace Particles';
-const EffectDescription = 'Displaces all particles into a certain direction by the same distance';
 
 class ParticleDisplaceConfigUI extends ConfigUI {
   constructor() {
@@ -84,12 +83,8 @@ export default class ParticleDisplaceEffect extends Effect {
     `;
   }
 
-  static getDisplayName() {
-    return EffectName;
-  }
-
-  static getDescription() {
-    return EffectDescription;
+  static getTranslationId() {
+    return 'particle_displace';
   }
 
   static getConfigUI() {

js/effects/particle-size-by-hue.js

@@ -3,7 +3,6 @@ import { parseHtml } from '../ui/util';
 import Ease from './ease-mixins';
 
 const EffectName = 'Particle size by hue';
-const EffectDescription = 'Particles will have different sizes depending on their color';
 
 class ParticleSizeByHueConfigUI extends ConfigUI {
   constructor() {
@@ -87,12 +86,8 @@ export default class ParticleSizeByHueEffect extends Effect {
     `;
   }
 
-  static getDisplayName() {
-    return EffectName;
-  }
-
-  static getDescription() {
-    return EffectDescription;
+  static getTranslationId() {
+    return 'particle_size_by_hue';
   }
 
   static getConfigUI() {

js/effects/particle-spacing.js

@@ -3,7 +3,6 @@ import { parseHtml } from '../ui/util';
 import Easing from './ease-mixins';
 
 const EffectName = 'Particle spacing';
-const EffectDescription = 'Adds or removes space between particles';
 
 class ParticleSpacingConfigUI extends ConfigUI {
   constructor() {
@@ -87,12 +86,8 @@ export default class ParticleSpacingEffect extends Effect {
     `;
   }
 
-  static getDisplayName() {
-    return EffectName;
-  }
-
-  static getDescription() {
-    return EffectDescription;
+  static getTranslationId() {
+    return 'particle_spacing';
   }
 
   static getConfigUI() {

js/effects/particles-reduce.js

@@ -3,7 +3,6 @@ import { parseHtml } from '../ui/util';
 import Ease from './ease-mixins';
 
 const EffectName = 'Reduce Particle Count';
-const EffectDescription = 'Drops the given amount of particles';
 
 class ParticlesReduceConfigUI extends ConfigUI {
   constructor() {
@@ -116,12 +115,8 @@ export default class ParticlesReduceEffect extends Effect {
     } 
   }
 
-  static getDisplayName() {
-    return EffectName;
-  }
-
-  static getDescription() {
-    return EffectDescription;
+  static getTranslationId() {
+    return 'particles_reduce';
   }
 
   static getConfigUI() {