improved logo validation output, improved localization handling and bugfix

src/css/tabs/osd.css

@@ -358,15 +358,23 @@
 }
 
 #font-logo-info ul li:before {
-  content: '• ';
+  content: '\2022\20';
+}
+
+#font-logo-info ul li.valid {
+  color: #00a011;
 }
 
 #font-logo-info ul li.valid:before {
-  content: '✔ ';
+  content: '\2714\20';
+}
+
+#font-logo-info ul li.invalid {
+  color: #a01100;
 }
 
 #font-logo-info ul li.invalid:before {
-  content: '🞨 ';
+  content: '\2715\20';
 }
 
 #font-logo-info #font-logo-info-upload-hint {

src/js/localization.js

@@ -126,3 +126,10 @@ function getValidLocale(userLocale) {
     } 
     return userLocale;
 }
+
+i18n.addResources = function(bundle) {
+    var takeFirst = obj => obj.hasOwnProperty("length") && 0 < obj.length ? obj[0] : obj;
+    var lang = takeFirst(i18next.options.fallbackLng),
+        ns = takeFirst(i18next.options.defaultNS);
+    i18next.addResourceBundle(lang, ns, bundle, true, true);
+};

src/js/tabs/osd.js

@@ -225,8 +225,8 @@ FONT.replaceLogoFromImage = function(img) {
 var LogoManager = LogoManager || {
     // DOM elements to cache
     elements: {
-        $preview: "#font-logo-preview",
+        preview: "#font-logo-preview",
-        $uploadHint: "#font-logo-info-upload-hint",
+        uploadHint: "#font-logo-info-upload-hint",
     },
     constants: {
         TILES_NUM_HORIZ: 24,
@@ -252,7 +252,7 @@ var LogoManager = LogoManager || {
 LogoManager.constraints = {
     // test for image size
     imageSize: {
-        $el: "#font-logo-info-size",
+        el: "#font-logo-info-size",
         // calculate logo image size at runtime as it may change conditionally in the future
         expectedWidth: FONT.constants.SIZES.CHAR_WIDTH
             * LogoManager.constants.TILES_NUM_HORIZ,
@@ -276,7 +276,7 @@ LogoManager.constraints = {
     },
     // test for pixel colors
     colorMap: {
-        $el: "#font-logo-info-colors",
+        el: "#font-logo-info-colors",
         /**
          * @param {HTMLImageElement} img
          */
@@ -301,24 +301,43 @@ LogoManager.constraints = {
     },
 };
 
+/**
+ * Initialize Logo Manager UI.
+ */
+LogoManager.init = function() {
+  // inject logo size variables for dynamic translation strings
+  i18n.addResources({
+      logoWidthPx: "" + LogoManager.constraints.imageSize.expectedWidth,
+      logoHeightPx: "" + LogoManager.constraints.imageSize.expectedHeight,
+  });
+  // find/cache DOM elements
+  Object.keys(LogoManager.elements).forEach(function(key) {
+    LogoManager.elements["$" + key] = $(LogoManager.elements[key]);
+  });
+  Object.keys(LogoManager.constraints).forEach(function(key) {
+      LogoManager.constraints[key].$el = $(LogoManager.constraints[key].el);
+  });
+  // resize logo preview area to match tile size
+  LogoManager.elements.$preview
+      .width(LogoManager.constraints.imageSize.expectedWidth)
+      .height(LogoManager.constraints.imageSize.expectedHeight);
+  LogoManager.resetImageInfo();
+};
+
 LogoManager.resetImageInfo = function() {
     LogoManager.hideUploadHint();
     Object.values(LogoManager.constraints).forEach(function(constraint) {
         var $el = constraint.$el;
-        $el.toggleClass("message-negative", false);
         $el.toggleClass("invalid", false);
-        $el.toggleClass("message-positive", false);
         $el.toggleClass("valid", false);
     });
 };
 
 LogoManager.showConstraintNotSatisfied = function(constraint) {
-    constraint.$el.toggleClass("message-negative", true);
     constraint.$el.toggleClass("invalid", true);
 };
 
 LogoManager.showConstraintSatisfied = function(constraint) {
-    constraint.$el.toggleClass("message-positive", true);
     constraint.$el.toggleClass("valid", true);
 };
 
@@ -395,47 +414,13 @@ LogoManager.openImage = function() {
  * Draw the logo using the loaded font data.
  */
 LogoManager.drawPreview = function() {
-    var $el = LogoManager.elements.$preview;
+    var $el = LogoManager.elements.$preview.empty();
-    $el.empty();
     for (var i = SYM.LOGO, I = FONT.constants.MAX_CHAR_COUNT; i < I; i++) {
         var url = FONT.data.character_image_urls[i];
         $el.append('<img src="' + url + '" title="0x' + i.toString(16) + '"></img>');
     }
 };
 
-/**
- * Initialize Logo Manager UI.
- */
-LogoManager.init = function() {
-    // cache DOM elements
-    Object.keys(LogoManager.elements).forEach(function(key) {
-        LogoManager.elements[key] = $(LogoManager.elements[key]);
-    });
-    Object.keys(LogoManager.constraints).forEach(function(key) {
-        LogoManager.constraints[key].$el = $(LogoManager.constraints[key].$el);
-    });
-    // resize logo preview area to match tile size
-    var logoWidthPx = LogoManager.constraints.imageSize.expectedWidth,
-        logoHeightPx = LogoManager.constraints.imageSize.expectedHeight;
-    LogoManager.elements.$preview
-        .width(logoWidthPx)
-        .height(logoHeightPx);
-    // inject logo size variables for dynamic translation strings
-    var takeFirst = obj => {
-        if (obj.hasOwnProperty("length") && 0 < obj.length) {
-            return obj[0];
-        } else {
-            return obj;
-        }
-    };
-    var lang = takeFirst(i18next.options.fallbackLng),
-        ns = takeFirst(i18next.options.defaultNS);
-    i18next.addResourceBundle(lang, ns, {
-        logoWidthPx: logoWidthPx,
-        logoHeightPx: logoHeightPx,
-    }, true, true);
-};
-
 /**
  * returns a canvas image with the character on it
  */
@@ -1528,9 +1513,6 @@ TABS.osd.initialize = function (callback) {
             attach: $('#fontmanager'),
             title: 'OSD Font Manager',
             content: $('#fontmanagercontent'),
-            onOpen: function() {
-                LogoManager.resetImageInfo();
-            },
         });
 
         $('.elements-container div.cf_tip').attr('title', i18n.getMessage('osdSectionHelpElements'));