[ion/simulator/web] Clean the htmlpack API

build/targets.simulator.web.mak

@@ -3,4 +3,4 @@ $(BUILD_DIR)/test.js: EMSCRIPTEN_MODULARIZE = 0
 HANDY_TARGETS += htmlpack
 HANDY_TARGETS_EXTENSIONS += zip
 
-$(BUILD_DIR)/htmlpack.zip: $(addprefix $(BUILD_DIR)/ion/src/simulator/web/,calculator.html calculator.css) $(BUILD_DIR)/epsilon.js ion/src/simulator/web/simulator-setup.js
+$(BUILD_DIR)/htmlpack.zip: $(addprefix $(BUILD_DIR)/ion/src/simulator/web/,calculator.html calculator.css) $(BUILD_DIR)/epsilon.js ion/src/simulator/web/calculator.js

ion/src/simulator/web/Makefile

@@ -36,7 +36,7 @@ endif
 
 DEFAULT = epsilon.zip
 
-$(addprefix $(BUILD_DIR)/ion/src/simulator/web/,calculator.html calculator.css): ion/src/simulator/shared/layout.json ion/src/simulator/web/layout.py
+$(addprefix $(BUILD_DIR)/ion/src/simulator/web/,calculator.html calculator.css): ion/src/simulator/shared/layout.json ion/src/simulator/web/layout.py | $$(@D)/.
 	$(call rule_label,LAYOUT)
 	$(Q) $(PYTHON) ion/src/simulator/web/layout.py --html $(BUILD_DIR)/ion/src/simulator/web/calculator.html --css $(BUILD_DIR)/ion/src/simulator/web/calculator.css $<
 

ion/src/simulator/web/calculator.js

@@ -1,16 +1,16 @@
-function EpsilonSetup(emModule) {
+function Calculator(emModule) {
   /* emModule is an optional parameter.
    * In addition to the ones supported by Emscripten, here are the values that
    * this object can have:
-   *  - calculator: a DOM element containing a copy of 'calculator.html' as
+   *  - element: a DOM element containing a copy of 'calculator.html' as
    *    generated by 'layout.py'
    *  - mirrorCanvas: a DOM element where the main canvas will be mirrored
    */
 
   // Configure emModule
   var emModule = (typeof emModule === 'undefined') ? {} : emModule;
-  var calculator = emModule.calculator || document.querySelector('.calculator');
-  var mainCanvas = calculator.querySelector("canvas");
+  var calculatorElement = emModule.element || document.querySelector('.calculator');
+  var mainCanvas = calculatorElement.querySelector("canvas");
   if (typeof emModule.mirrorCanvas === 'undefined') {
     /* If emModule.mirrorCanvas is defined as null, don't do anything */
     emModule.mirrorCanvas = document.querySelector('.calculator-mirror canvas');
@@ -22,6 +22,9 @@ function EpsilonSetup(emModule) {
       '--language',
       document.documentElement.lang || window.navigator.language.split('-')[0]
     ],
+    onEpsilonIdle: function() {
+      calculatorElement.classList.remove('loading');
+    },
     downloadScreenshot: function() {
       // toDataURL needs the canvas to be refreshed
       this._IonDisplayForceRefresh();
@@ -69,7 +72,7 @@ function EpsilonSetup(emModule) {
   var downHandler = eventHandler(emModule._IonSimulatorKeyboardKeyDown);
   var upHandler = eventHandler(emModule._IonSimulatorKeyboardKeyUp);
 
-  calculator.querySelectorAll('span').forEach(function(span){
+  calculatorElement.querySelectorAll('span').forEach(function(span){
     /* We decide to hook both to touch and mouse events
      * On most mobile browsers, mouse events are generated if addition to touch
      * events, so this could seem pointless. But those mouse events are not
@@ -86,5 +89,5 @@ function EpsilonSetup(emModule) {
 }
 
 if (typeof exports === 'object' && typeof module === 'object') {
-  module.exports = EpsilonSetup;
+  module.exports = Calculator;
 }

ion/src/simulator/web/layout.py

@@ -109,7 +109,7 @@ def html(layout):
   screen = layout["screen"]
   background = layout["background"]
   html = ''
-  html += '<div class="calculator">\n'
+  html += '<div class="calculator loading">\n'
   html += '  <div class="loader"><span></span></div>\n'
   html += '  <canvas tabindex="1"></canvas>\n'
   for key in layout["keys"]:

ion/src/simulator/web/simulator.html.inc

@@ -32,9 +32,9 @@
     </div>
     <script src="epsilon.js"></script>
     <script>
-#include "simulator-setup.js"
+#include "calculator.js"
 var Module = {};
-EpsilonSetup(Module);
+Calculator(Module);
     </script>
     <script>
 document.getElementById("action-fullscreen").addEventListener("click", function(e){