wait for the custom fonts to load #892

jcubic · Jul 29, 2023 · 42a081e · 42a081e
1 parent aa14469
commit 42a081e
Show file tree

Hide file tree

Showing 13 changed files with 88 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## 2.37.0
 ### Features
 * add `rpc` interceptor [#883](https://github.com/jcubic/jquery.terminal/issues/883)
+* wait for the custom fonts to load [#892](https://github.com/jcubic/jquery.terminal/issues/892)
 ### Bugfix
 * fix CMD wrapping when prompt is empty [#882](https://github.com/jcubic/jquery.terminal/issues/882)
 * fix paused terminal when using array as interpreter and RPC without system describe

diff --git a/css/jquery.terminal-2.36.0.css b/css/jquery.terminal-2.36.0.css
@@ -12,7 +12,7 @@
  * Copyright (c) 2011-2023 Jakub T. Jankiewicz <https://jcubic.pl/me>
  * Released under the MIT license
  *
- * Date: Sat, 29 Jul 2023 12:03:58 +0000
+ * Date: Sat, 29 Jul 2023 13:03:03 +0000
  */
 .terminal .terminal-output .format, .cmd .format,
 .cmd-prompt, .cmd-prompt div {
@@ -267,6 +267,7 @@ body.full-screen-terminal .terminal {
 .terminal-output > :not(.raw) span:not(.fas):not(.far):not(.fa),
 .terminal-output > :not(.raw) a,
 .cmd,
+.terminal-font-forcer,
 .cmd span:not(.fas):not(.far):not(.fa) {
     font-family: monospace;
     font-family: var(--font, monospace);
@@ -1141,6 +1142,18 @@ terminal .terminal-output > div {
     scrollbar-color: var(--color, #aaa) var(--background, #000);
     scrollbar-width: thin;
 }
+/* visially hidden */
+.terminal-hidden {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0,0,0,0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}
 /*
  * Allow to change scrollbar color
  */

diff --git a/css/jquery.terminal-2.36.0.min.css b/css/jquery.terminal-2.36.0.min.css
diff --git a/css/jquery.terminal-src.css b/css/jquery.terminal-src.css
@@ -267,6 +267,7 @@ body.full-screen-terminal .terminal {
 .terminal-output > :not(.raw) span:not(.fas):not(.far):not(.fa),
 .terminal-output > :not(.raw) a,
 .cmd,
+.terminal-font-forcer,
 .cmd span:not(.fas):not(.far):not(.fa) {
     font-family: monospace;
     font-family: var(--font, monospace);
@@ -1141,6 +1142,18 @@ terminal .terminal-output > div {
     scrollbar-color: var(--color, #aaa) var(--background, #000);
     scrollbar-width: thin;
 }
+/* visially hidden */
+.terminal-hidden {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0,0,0,0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}
 /*
  * Allow to change scrollbar color
  */

diff --git a/css/jquery.terminal.css b/css/jquery.terminal.css
@@ -12,7 +12,7 @@
  * Copyright (c) 2011-2023 Jakub T. Jankiewicz <https://jcubic.pl/me>
  * Released under the MIT license
  *
- * Date: Sat, 29 Jul 2023 12:03:58 +0000
+ * Date: Sat, 29 Jul 2023 13:03:03 +0000
  */
 .terminal .terminal-output .format, .cmd .format,
 .cmd-prompt, .cmd-prompt div {
@@ -267,6 +267,7 @@ body.full-screen-terminal .terminal {
 .terminal-output > :not(.raw) span:not(.fas):not(.far):not(.fa),
 .terminal-output > :not(.raw) a,
 .cmd,
+.terminal-font-forcer,
 .cmd span:not(.fas):not(.far):not(.fa) {
     font-family: monospace;
     font-family: var(--font, monospace);
@@ -1141,6 +1142,18 @@ terminal .terminal-output > div {
     scrollbar-color: var(--color, #aaa) var(--background, #000);
     scrollbar-width: thin;
 }
+/* visially hidden */
+.terminal-hidden {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0,0,0,0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}
 /*
  * Allow to change scrollbar color
  */

diff --git a/css/jquery.terminal.min.css b/css/jquery.terminal.min.css
diff --git a/css/jquery.terminal.min.css.map b/css/jquery.terminal.min.css.map
diff --git a/js/jquery.terminal-2.36.0.js b/js/jquery.terminal-2.36.0.js
@@ -41,7 +41,7 @@
  *
  * broken image by Sophia Bai from the Noun Project (CC-BY)
  *
- * Date: Sat, 29 Jul 2023 11:57:12 +0000
+ * Date: Sat, 29 Jul 2023 13:06:55 +0000
  */
 /* global define, Map */
 /* eslint-disable */
@@ -246,9 +246,10 @@
     function DelayQueue() {
         var callbacks = $.Callbacks();
         var resolved = false;
+        var self = this;
         this.resolve = function() {
             callbacks.fire();
-            resolved = true;
+            self.resolved = resolved = true;
         };
         this.add = function(fn) {
             if (resolved) {
@@ -5277,7 +5278,7 @@
     // -------------------------------------------------------------------------
     $.terminal = {
         version: 'DEV',
-        date: 'Sat, 29 Jul 2023 11:57:12 +0000',
+        date: 'Sat, 29 Jul 2023 13:06:55 +0000',
         // colors from https://www.w3.org/wiki/CSS/Properties/color/keywords
         color_names: [
             'transparent', 'currentcolor', 'black', 'silver', 'gray', 'white',
@@ -11374,7 +11375,7 @@
                     }
                     $(window).off('blur', blur_terminal).
                         off('focus', focus_terminal);
-                    self.find('.terminal-fill, .terminal-font')
+                    self.find('.terminal-fill, .terminal-font, .terminal-font-forcer')
                         .remove();
                     self.stopTime();
                     terminals.remove(terminal_id);
@@ -11623,6 +11624,7 @@
             requests.push(xhr);
         });
         var scroller = $('<div class="terminal-scroller"/>').appendTo(self);
+        $('<div class="terminal-font-forcer terminal-hidden">x<div>').appendTo(self);
         var wrapper = $('<div class="terminal-wrapper"/>').appendTo(scroller);
         $(broken_image).hide().appendTo(wrapper);
         var font_resizer = $('<div class="terminal-font">&nbsp;</div>').appendTo(self);
@@ -12273,7 +12275,12 @@
                 // don't make sense
                 observe_visibility();
             }
-            command_queue.resolve();
+            // wait for custom font to load #892
+            if (document.fonts && document.fonts.ready) {
+                 document.fonts.ready.then(command_queue.resolve);
+            } else {
+                command_queue.resolve();
+            }
             // touch devices need touch event to get virtual keyboard
             if (enabled && self.is(':visible') && !is_mobile) {
                 self.focus(undefined, true);

diff --git a/js/jquery.terminal-2.36.0.min.js b/js/jquery.terminal-2.36.0.min.js
diff --git a/js/jquery.terminal-src.js b/js/jquery.terminal-src.js
@@ -246,9 +246,10 @@
     function DelayQueue() {
         var callbacks = $.Callbacks();
         var resolved = false;
+        var self = this;
         this.resolve = function() {
             callbacks.fire();
-            resolved = true;
+            self.resolved = resolved = true;
         };
         this.add = function(fn) {
             if (resolved) {
@@ -11374,7 +11375,7 @@
                     }
                     $(window).off('blur', blur_terminal).
                         off('focus', focus_terminal);
-                    self.find('.terminal-fill, .terminal-font')
+                    self.find('.terminal-fill, .terminal-font, .terminal-font-forcer')
                         .remove();
                     self.stopTime();
                     terminals.remove(terminal_id);
@@ -11623,6 +11624,7 @@
             requests.push(xhr);
         });
         var scroller = $('<div class="terminal-scroller"/>').appendTo(self);
+        $('<div class="terminal-font-forcer terminal-hidden">x<div>').appendTo(self);
         var wrapper = $('<div class="terminal-wrapper"/>').appendTo(scroller);
         $(broken_image).hide().appendTo(wrapper);
         var font_resizer = $('<div class="terminal-font">&nbsp;</div>').appendTo(self);
@@ -12273,7 +12275,12 @@
                 // don't make sense
                 observe_visibility();
             }
-            command_queue.resolve();
+            // wait for custom font to load #892
+            if (document.fonts && document.fonts.ready) {
+                 document.fonts.ready.then(command_queue.resolve);
+            } else {
+                command_queue.resolve();
+            }
             // touch devices need touch event to get virtual keyboard
             if (enabled && self.is(':visible') && !is_mobile) {
                 self.focus(undefined, true);

diff --git a/js/jquery.terminal.js b/js/jquery.terminal.js
@@ -41,7 +41,7 @@
  *
  * broken image by Sophia Bai from the Noun Project (CC-BY)
  *
- * Date: Sat, 29 Jul 2023 11:57:12 +0000
+ * Date: Sat, 29 Jul 2023 13:06:55 +0000
  */
 /* global define, Map */
 /* eslint-disable */
@@ -246,9 +246,10 @@
     function DelayQueue() {
         var callbacks = $.Callbacks();
         var resolved = false;
+        var self = this;
         this.resolve = function() {
             callbacks.fire();
-            resolved = true;
+            self.resolved = resolved = true;
         };
         this.add = function(fn) {
             if (resolved) {
@@ -5277,7 +5278,7 @@
     // -------------------------------------------------------------------------
     $.terminal = {
         version: 'DEV',
-        date: 'Sat, 29 Jul 2023 11:57:12 +0000',
+        date: 'Sat, 29 Jul 2023 13:06:55 +0000',
         // colors from https://www.w3.org/wiki/CSS/Properties/color/keywords
         color_names: [
             'transparent', 'currentcolor', 'black', 'silver', 'gray', 'white',
@@ -11374,7 +11375,7 @@
                     }
                     $(window).off('blur', blur_terminal).
                         off('focus', focus_terminal);
-                    self.find('.terminal-fill, .terminal-font')
+                    self.find('.terminal-fill, .terminal-font, .terminal-font-forcer')
                         .remove();
                     self.stopTime();
                     terminals.remove(terminal_id);
@@ -11623,6 +11624,7 @@
             requests.push(xhr);
         });
         var scroller = $('<div class="terminal-scroller"/>').appendTo(self);
+        $('<div class="terminal-font-forcer terminal-hidden">x<div>').appendTo(self);
         var wrapper = $('<div class="terminal-wrapper"/>').appendTo(scroller);
         $(broken_image).hide().appendTo(wrapper);
         var font_resizer = $('<div class="terminal-font">&nbsp;</div>').appendTo(self);
@@ -12273,7 +12275,12 @@
                 // don't make sense
                 observe_visibility();
             }
-            command_queue.resolve();
+            // wait for custom font to load #892
+            if (document.fonts && document.fonts.ready) {
+                 document.fonts.ready.then(command_queue.resolve);
+            } else {
+                command_queue.resolve();
+            }
             // touch devices need touch event to get virtual keyboard
             if (enabled && self.is(':visible') && !is_mobile) {
                 self.focus(undefined, true);

diff --git a/js/jquery.terminal.min.js b/js/jquery.terminal.min.js
diff --git a/js/jquery.terminal.min.js.map b/js/jquery.terminal.min.js.map