more work on preventing web browser layout trashing on loading
Costa Tsaousis (ktsaou) committed
Jan 5, 2017 at 02:05 UTC
0e9a65816f7a9089659b4eeeb1b83b0859ab8fd2
2 files changed
+31
-37
web/dashboard.js
+30
-36
@@ -1169,7 +1169,7 @@ var NETDATA = window.NETDATA || {};
1169
1170
add: function(callback) {
1171
// console.log('adding...');
1172
- this.callbacks.push(callback);
1172
+ this.callbacks.unshift(callback);
1173
1174
if(this.set === false) {
1175
this.set = true;
@@ -1398,7 +1398,7 @@ var NETDATA = window.NETDATA || {};
1398
that.element.innerHTML = '';
1399
1400
that.element_message = document.createElement('div');
1401
- that.element_message.className = ' netdata-message hidden';
1401
+ that.element_message.className = 'netdata-message icon hidden';
1402
that.element.appendChild(that.element_message);
1403
1404
that.element_chart = document.createElement('div');
@@ -1421,27 +1421,29 @@ var NETDATA = window.NETDATA || {};
1421
}
1422
that.element_legend_childs.series = null;
1423
1424
- if(typeof(that.width) === 'string')
1425
- $(that.element).css('width', that.width);
1426
- else if(typeof(that.width) === 'number')
1427
- $(that.element).css('width', that.width + 'px');
1428
-
1429
- if(typeof(that.library.aspect_ratio) === 'undefined') {
1430
- if(typeof(that.height) === 'string')
1431
- $(that.element).css('height', that.height);
1432
- else if(typeof(that.height) === 'number')
1433
- $(that.element).css('height', that.height + 'px');
1434
- }
1435
- else {
1436
- var w = that.element.offsetWidth;
1437
- if(w === null || w === 0) {
1438
- // the div is hidden
1439
- // this will resize the chart when next viewed
1440
- that.tm.last_resized = 0;
1424
+ NETDATA.noLayoutTrashing.add(function() {
1425
+ if(typeof(that.width) === 'string')
1426
+ $(that.element).css('width', that.width);
1427
+ else if(typeof(that.width) === 'number')
1428
+ $(that.element).css('width', that.width + 'px');
1429
+
1430
+ if(typeof(that.library.aspect_ratio) === 'undefined') {
1431
+ if(typeof(that.height) === 'string')
1432
+ that.element.style.height = that.height;
1433
+ else if(typeof(that.height) === 'number')
1434
+ that.element.style.height = that.height.toString() + 'px';
1435
}
1442
- else
1443
- $(that.element).css('height', (that.element.offsetWidth * that.library.aspect_ratio / 100).toString() + 'px');
1444
- }
1436
+ else {
1437
+ var w = that.element.offsetWidth;
1438
+ if(w === null || w === 0) {
1439
+ // the div is hidden
1440
+ // this will resize the chart when next viewed
1441
+ that.tm.last_resized = 0;
1442
+ }
1443
+ else
1444
+ that.element.style.height = (w * that.library.aspect_ratio / 100).toString() + 'px';
1445
+ }
1446
+ });
1447
1448
if(NETDATA.chartDefaults.min_width !== null)
1449
$(that.element).css('min-width', NETDATA.chartDefaults.min_width);
@@ -1499,7 +1501,7 @@ var NETDATA = window.NETDATA || {};
1501
1502
var maxMessageFontSize = function() {
1503
var screenHeight = screen.height;
1502
- var el = that.element_message;
1504
+ var el = that.element;
1505
1506
// normally we want a font size, as tall as the element
1507
var h = el.clientHeight;
@@ -1527,23 +1529,15 @@ var NETDATA = window.NETDATA || {};
1529
}
1530
1531
// set it
1530
- el.style.fontSize = h.toString() + 'px';
1531
- el.style.paddingTop = paddingTop.toString() + 'px';
1532
- };
1533
-
1534
- var showMessage = function(msg) {
1535
- that.element_message.className = 'netdata-message';
1536
- that.element_message.innerHTML = msg;
1537
- that.element_message.style.fontSize = 'x-small';
1538
- that.element_message.style.paddingTop = '0px';
1539
- that.___messageHidden___ = undefined;
1532
+ that.element_message.style.fontSize = h.toString() + 'px';
1533
+ that.element_message.style.paddingTop = paddingTop.toString() + 'px';
1534
};
1535
1536
var showMessageIcon = function(icon) {
1537
NETDATA.noLayoutTrashing.add(function() {
1538
that.element_message.innerHTML = icon;
1545
- that.element_message.className = 'netdata-message icon';
1539
maxMessageFontSize();
1540
+ $(that.element_message).removeClass('hidden');
1541
that.___messageHidden___ = undefined;
1542
});
1543
};
@@ -1551,7 +1545,7 @@ var NETDATA = window.NETDATA || {};
1545
var hideMessage = function() {
1546
if(typeof that.___messageHidden___ === 'undefined') {
1547
that.___messageHidden___ = true;
1554
- that.element_message.className = 'netdata-message hidden';
1548
+ $(that.element_message).addClass('hidden');
1549
}
1550
};
1551
@@ -1712,7 +1706,7 @@ var NETDATA = window.NETDATA || {};
1706
if(that.element_legend_childs.perfect_scroller !== null)
1707
Ps.update(that.element_legend_childs.perfect_scroller);
1708
1715
- maxMessageFontSize();
1709
+ NETDATA.noLayoutTrashing.add(maxMessageFontSize);
1710
}
1711
1712
that.tm.last_resized = Date.now();
web/index.html
+1
-1
@@ -3257,4 +3257,4 @@
3257
</div>
3258
</body>
3259
</html>
3260
-<script type="text/javascript" src="dashboard.js?v20170104-25"></script>
3260
+<script type="text/javascript" src="dashboard.js?v20170105-1"></script>