Freifunk-Troisdorf/meshviewer
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[TASK] Avoid render blocking onload

Browse Source
This commit is contained in:
Xaver Maierhofer 2017-02-08 23:32:17 +01:00 committed by Xaver Maierhofer
parent 7cbc4e75d7
commit 8c4978172b
3 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
lib/map/labelslayer.js
View File

@ -10,8 +10,8 @@ define(['leaflet', 'rbush', 'helper'],
['right', 'top', 5 / 8],
['center', 'ideographic', 2 / 8],
['right', 'ideographic', 3 / 8]];
var bodyStyle = window.getComputedStyle(document.querySelector('body'));
var labelShadow;
var bodyStyle = { fontFamily: 'sans-serif' };
var nodeRadius = 4;
var cFont = document.createElement('canvas').getContext('2d');
@ -101,11 +101,10 @@ define(['leaflet', 'rbush', 'helper'],
// - label (string)
// - color (string)
var labelsOnline = d.online.map(prepareLabel(bodyStyle.color, 11, 8, true));
var labelsOnline = d.online.map(prepareLabel(null, 11, 8, true));
var labelsOffline = d.offline.map(prepareLabel('rgba(212, 62, 42, 0.9)', 9, 5, false));
var labelsNew = d.new.map(prepareLabel('rgba(48, 99, 20, 0.9)', 11, 8, true));
var labelsLost = d.lost.map(prepareLabel('rgba(212, 62, 42, 0.9)', 11, 8, true));
labelShadow = bodyStyle.backgroundColor.replace(/rgb/i, 'rgba').replace(/\)/i, ',0.7)');
var labels = []
.concat(labelsNew)
@ -193,6 +192,8 @@ define(['leaflet', 'rbush', 'helper'],
var tileSize = this.options.tileSize;
var s = tilePoint.multiplyBy(tileSize);
var map = this._map;
bodyStyle = window.getComputedStyle(document.querySelector('body'));
labelShadow = bodyStyle.backgroundColor.replace(/rgb/i, 'rgba').replace(/\)/i, ',0.7)');
function projectNodes(d) {
var p = map.project(d.label.position);
@ -215,7 +216,7 @@ define(['leaflet', 'rbush', 'helper'],
ctx.font = d.label.font;
ctx.textAlign = d.label.anchor[0];
ctx.textBaseline = d.label.anchor[1];
ctx.fillStyle = d.label.fillStyle;
ctx.fillStyle = d.label.fillStyle === null ? bodyStyle.color : d.label.fillStyle;
if (d.label.stroke) {
ctx.strokeText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1]);

12
lib/sidebar.js
View File

@ -4,6 +4,12 @@ define(function () {
return function (el) {
var self = this;
// Needed to avoid render blocking
var gridBreakpoints = {
lg: [992, 446],
xl: [1200, 560]
};
var sidebar = document.createElement('div');
sidebar.classList.add('sidebar');
el.appendChild(sidebar);
@ -21,10 +27,12 @@ define(function () {
sidebar.appendChild(container);
self.getWidth = function getWidth() {
if (sidebar.classList.contains('hidden') || button.offsetHeight === 0) {
if (gridBreakpoints.lg[0] < window.innerWidth) {
return 0;
} else if (gridBreakpoints.xl[0] < window.innerWidth) {
return gridBreakpoints.lg[1];
}
return sidebar.offsetWidth;
return gridBreakpoints.xl[1];
};
self.add = function add(d) {

2
scss/modules/_variables.scss
View File

@ -21,6 +21,7 @@ $button-font-size: 1.6rem !default;
$button-distance: 16px !default;
// Bootstrap breakpoints
// In lib/sidebar to avoid render blocking onload
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
@ -35,6 +36,7 @@ $grid-breakpoints: (
) !default;
// 45% sidebar - based on viewport
// In lib/sidebar to avoid render blocking onload
$sidebar-width: map-get($grid-breakpoints, xl) * .45 !default;
$sidebar-width-small: map-get($grid-breakpoints, lg) * .45 !default;