Skip to content

Commit 541da3a

Browse files
jcubicjcubic
committed
fix when CSS is loaded after creation of the terminal
When CSS was loaded after the init of the terminal, The pixel density css property was overwritten with the old value. The value of that property was width of the terminal. This make the content of the terminal disappear.
1 parent 67dd723 commit 541da3a

12 files changed

+52
-43
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
## 2.39.1
22
### Bugfix
33
* fix visible CMD textarea when page use box-shadow
4+
* fix when CSS is loaded after creation of the terminal
45

56
## 2.39.0
67
### Features

‎css/jquery.terminal-2.39.0.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
* Copyright (c) 2011-2023 Jakub T. Jankiewicz <https://jcubic.pl/me>
1313
* Released under the MIT license
1414
*
15-
* Date: Wed, 13 Mar 2024 13:11:10 +0000
15+
* Date: Tue, 19 Mar 2024 18:45:14 +0000
1616
*/
1717
.terminal .terminal-output .format, .cmd .format,
1818
.cmd-prompt, .cmd-prompt div {
@@ -1120,11 +1120,11 @@ terminal .terminal-output > div {
11201120
display: inline-block;
11211121
}
11221122
.cmd-editable {
1123-
position: fixed;
1124-
top: 0;
1123+
position: absolute;
1124+
top: calc(var(--cmd-top) * 1px);
1125+
bottom: 0;
11251126
right: 0;
11261127
left: 0;
1127-
bottom: 0;
11281128
z-index: 500;
11291129
color: transparent;
11301130
background: transparent;

‎css/jquery.terminal-2.39.0.min.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/jquery.terminal.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
* Copyright (c) 2011-2023 Jakub T. Jankiewicz <https://jcubic.pl/me>
1313
* Released under the MIT license
1414
*
15-
* Date: Wed, 13 Mar 2024 13:11:10 +0000
15+
* Date: Tue, 19 Mar 2024 18:45:14 +0000
1616
*/
1717
.terminal .terminal-output .format, .cmd .format,
1818
.cmd-prompt, .cmd-prompt div {
@@ -1120,11 +1120,11 @@ terminal .terminal-output > div {
11201120
display: inline-block;
11211121
}
11221122
.cmd-editable {
1123-
position: fixed;
1124-
top: 0;
1123+
position: absolute;
1124+
top: calc(var(--cmd-top) * 1px);
1125+
bottom: 0;
11251126
right: 0;
11261127
left: 0;
1127-
bottom: 0;
11281128
z-index: 500;
11291129
color: transparent;
11301130
background: transparent;

‎css/jquery.terminal.min.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/jquery.terminal.min.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/jquery.terminal-2.39.0.js

+14-10
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
*
4242
* broken image by Sophia Bai from the Noun Project (CC-BY)
4343
*
44-
* Date: Wed, 13 Mar 2024 13:11:10 +0000
44+
* Date: Tue, 19 Mar 2024 18:45:14 +0000
4545
*/
4646
/* global define, Map, BigInt */
4747
/* eslint-disable */
@@ -1260,7 +1260,7 @@
12601260
})();
12611261
// -------------------------------------------------------------------------
12621262
var is_css_variables_supported = root.CSS && root.CSS.supports &&
1263-
root.CSS.supports('--fake-var', 0);
1263+
root.CSS.supports('(--fake-var: 0)');
12641264
// -------------------------------------------------------------------------
12651265
var is_android = navigator.userAgent.toLowerCase().indexOf('android') !== -1;
12661266
// -------------------------------------------------------------------------
@@ -5305,7 +5305,7 @@
53055305
// -------------------------------------------------------------------------
53065306
$.terminal = {
53075307
version: 'DEV',
5308-
date: 'Wed, 13 Mar 2024 13:11:10 +0000',
5308+
date: 'Tue, 19 Mar 2024 18:45:14 +0000',
53095309
// colors from https://www.w3.org/wiki/CSS/Properties/color/keywords
53105310
color_names: [
53115311
'transparent', 'currentcolor', 'black', 'silver', 'gray', 'white',
@@ -10644,12 +10644,16 @@
1064410644
var cmd_cursor = self.find('.cmd-cursor');
1064510645
var offset = self.find('.cmd').offset();
1064610646
var self_offset = self.offset();
10647-
self.stopTime('flush').oneTime(1, 'flush', function() {
10647+
self.stopTime('flush').oneTime(10, 'flush', function() {
10648+
var top = output.height();
10649+
var height = command_line.height();
1064810650
css(self[0], {
1064910651
'--terminal-height': self.height(),
1065010652
'--terminal-x': offset.left - self_offset.left,
1065110653
'--terminal-y': offset.top - self_offset.top,
10652-
'--terminal-scroll': scroller.prop('scrollTop')
10654+
'--terminal-scroll': scroller.prop('scrollTop'),
10655+
'--cmd-top': top,
10656+
'--cmd-height': height
1065310657
});
1065410658
if (enabled && !is_mobile) {
1065510659
// Firefox won't reflow the cursor automatically, so
@@ -11666,7 +11670,7 @@
1166611670
var in_login = false;// some Methods should not be called when login
1166711671
// TODO: Try to use mutex like counter for pause/resume
1166811672
var onPause = $.noop;// used to indicate that user call pause onInit
11669-
var old_width, old_height;
11673+
var old_width, old_height, old_pixel_density;
1167011674
var delayed_commands = []; // used when exec commands while paused
1167111675
var settings = $.extend(
1167211676
{},
@@ -12261,9 +12265,9 @@
1226112265
if (self.is(':visible')) {
1226212266
var width = scroller.width();
1226312267
var height = filler.height();
12264-
var new_pixel_density = get_pixel_size();
12268+
pixel_density = get_pixel_size();
1226512269
css(self[0], {
12266-
'--pixel-density': new_pixel_density
12270+
'--pixel-density': pixel_density
1226712271
});
1226812272
if (need_char_size_recalculate) {
1226912273
need_char_size_recalculate = !terminal_ready(self);
@@ -12275,12 +12279,12 @@
1227512279
// prevent too many calculations in IE
1227612280
if (old_height !== height ||
1227712281
old_width !== width ||
12278-
pixel_density !== new_pixel_density) {
12282+
pixel_density !== old_pixel_density) {
1227912283
self.resize();
1228012284
}
1228112285
old_height = height;
1228212286
old_width = width;
12283-
pixel_density = new_pixel_density;
12287+
old_pixel_density = pixel_density;
1228412288
}
1228512289
}
1228612290
function create_resizers() {

‎js/jquery.terminal-2.39.0.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/jquery.terminal-src.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -11670,7 +11670,7 @@
1167011670
var in_login = false;// some Methods should not be called when login
1167111671
// TODO: Try to use mutex like counter for pause/resume
1167211672
var onPause = $.noop;// used to indicate that user call pause onInit
11673-
var old_width, old_height;
11673+
var old_width, old_height, old_pixel_density;
1167411674
var delayed_commands = []; // used when exec commands while paused
1167511675
var settings = $.extend(
1167611676
{},
@@ -12265,9 +12265,9 @@
1226512265
if (self.is(':visible')) {
1226612266
var width = scroller.width();
1226712267
var height = filler.height();
12268-
var new_pixel_density = get_pixel_size();
12268+
pixel_density = get_pixel_size();
1226912269
css(self[0], {
12270-
'--pixel-density': new_pixel_density
12270+
'--pixel-density': pixel_density
1227112271
});
1227212272
if (need_char_size_recalculate) {
1227312273
need_char_size_recalculate = !terminal_ready(self);
@@ -12279,12 +12279,12 @@
1227912279
// prevent too many calculations in IE
1228012280
if (old_height !== height ||
1228112281
old_width !== width ||
12282-
pixel_density !== new_pixel_density) {
12282+
pixel_density !== old_pixel_density) {
1228312283
self.resize();
1228412284
}
1228512285
old_height = height;
1228612286
old_width = width;
12287-
pixel_density = new_pixel_density;
12287+
old_pixel_density = pixel_density;
1228812288
}
1228912289
}
1229012290
function create_resizers() {

‎js/jquery.terminal.js

+14-10
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
*
4242
* broken image by Sophia Bai from the Noun Project (CC-BY)
4343
*
44-
* Date: Wed, 13 Mar 2024 13:11:10 +0000
44+
* Date: Tue, 19 Mar 2024 18:45:14 +0000
4545
*/
4646
/* global define, Map, BigInt */
4747
/* eslint-disable */
@@ -1260,7 +1260,7 @@
12601260
})();
12611261
// -------------------------------------------------------------------------
12621262
var is_css_variables_supported = root.CSS && root.CSS.supports &&
1263-
root.CSS.supports('--fake-var', 0);
1263+
root.CSS.supports('(--fake-var: 0)');
12641264
// -------------------------------------------------------------------------
12651265
var is_android = navigator.userAgent.toLowerCase().indexOf('android') !== -1;
12661266
// -------------------------------------------------------------------------
@@ -5305,7 +5305,7 @@
53055305
// -------------------------------------------------------------------------
53065306
$.terminal = {
53075307
version: 'DEV',
5308-
date: 'Wed, 13 Mar 2024 13:11:10 +0000',
5308+
date: 'Tue, 19 Mar 2024 18:45:14 +0000',
53095309
// colors from https://www.w3.org/wiki/CSS/Properties/color/keywords
53105310
color_names: [
53115311
'transparent', 'currentcolor', 'black', 'silver', 'gray', 'white',
@@ -10644,12 +10644,16 @@
1064410644
var cmd_cursor = self.find('.cmd-cursor');
1064510645
var offset = self.find('.cmd').offset();
1064610646
var self_offset = self.offset();
10647-
self.stopTime('flush').oneTime(1, 'flush', function() {
10647+
self.stopTime('flush').oneTime(10, 'flush', function() {
10648+
var top = output.height();
10649+
var height = command_line.height();
1064810650
css(self[0], {
1064910651
'--terminal-height': self.height(),
1065010652
'--terminal-x': offset.left - self_offset.left,
1065110653
'--terminal-y': offset.top - self_offset.top,
10652-
'--terminal-scroll': scroller.prop('scrollTop')
10654+
'--terminal-scroll': scroller.prop('scrollTop'),
10655+
'--cmd-top': top,
10656+
'--cmd-height': height
1065310657
});
1065410658
if (enabled && !is_mobile) {
1065510659
// Firefox won't reflow the cursor automatically, so
@@ -11666,7 +11670,7 @@
1166611670
var in_login = false;// some Methods should not be called when login
1166711671
// TODO: Try to use mutex like counter for pause/resume
1166811672
var onPause = $.noop;// used to indicate that user call pause onInit
11669-
var old_width, old_height;
11673+
var old_width, old_height, old_pixel_density;
1167011674
var delayed_commands = []; // used when exec commands while paused
1167111675
var settings = $.extend(
1167211676
{},
@@ -12261,9 +12265,9 @@
1226112265
if (self.is(':visible')) {
1226212266
var width = scroller.width();
1226312267
var height = filler.height();
12264-
var new_pixel_density = get_pixel_size();
12268+
pixel_density = get_pixel_size();
1226512269
css(self[0], {
12266-
'--pixel-density': new_pixel_density
12270+
'--pixel-density': pixel_density
1226712271
});
1226812272
if (need_char_size_recalculate) {
1226912273
need_char_size_recalculate = !terminal_ready(self);
@@ -12275,12 +12279,12 @@
1227512279
// prevent too many calculations in IE
1227612280
if (old_height !== height ||
1227712281
old_width !== width ||
12278-
pixel_density !== new_pixel_density) {
12282+
pixel_density !== old_pixel_density) {
1227912283
self.resize();
1228012284
}
1228112285
old_height = height;
1228212286
old_width = width;
12283-
pixel_density = new_pixel_density;
12287+
old_pixel_density = pixel_density;
1228412288
}
1228512289
}
1228612290
function create_resizers() {

‎js/jquery.terminal.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/jquery.terminal.min.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)