[TASK] Add layer modes and night example

README.md

@@ -3,8 +3,9 @@
 ### Main differences to https://github.com/ffnord/meshviewer
 #### Some features are maybe merged
 
+- Add modes - For example add a night layer and style
 - Updates selected node or list (incl. image stats cache-breaker) - not only overview tables
-- Zoom level for nodes (`nodeZoom`)
+- Zoom level if you click a node (`nodeZoom`) - Zoom level 22 available, bit it is to close for a click
 - Formatted Code
 - Grunt inline for some css and js - less requests
 - Icon font with only needed icons
@@ -20,6 +21,10 @@
 - Leaflet with patch to avoid IE/Edge crashes
 - [A lot more in commit history](https://github.com/ffrgb/meshviewer/commits/develop)
 
+# Demo (embedded):
+
+https://regensburg.freifunk.net/netz/karte/
+
 # Screenshots
 
 > TODO new uptodate images

lib/map.js

@@ -284,6 +284,23 @@ define(["map/clientlayer", "map/labelslayer",
         if (helper.localStorageTest()) {
           localStorage.setItem("map/selectedLayer", JSON.stringify({name: e.name}));
         }
+
+        var cssMode = document.querySelector(".css-mode");
+        if (cssMode) {
+          cssMode.parentNode.removeChild(cssMode);
+          document.querySelector("html").className = '';
+          labelsLayer.updateColor();
+        }
+        if (e.layer.options.mode) {
+          document.querySelector("head").innerHTML += "<link rel='stylesheet' class='css-mode' href='" + e.layer.options.mode + ".css'>";
+          document.querySelector("html").classList.add(e.layer.options.mode);
+          var cssInterval = setInterval(function() {
+            if(document.querySelector(".css-mode").sheet) {
+              labelsLayer.updateColor();
+              clearInterval(cssInterval);
+            }
+          }, 10);
+        }
       });
 
       var nodeDict = {};

lib/map/labelslayer.js

@@ -10,8 +10,8 @@ define(["leaflet", "rbush"],
       ["right", "top", 5 / 8],
       ["center", "ideographic", 2 / 8],
       ["right", "ideographic", 3 / 8]];
-
-    var fontFamily = window.getComputedStyle(document.querySelector('body')).fontFamily;
+    var bodyStyle = window.getComputedStyle(document.querySelector('body'));
+    var labelShadow;
     var nodeRadius = 4;
 
     var ctx = document.createElement("canvas").getContext("2d");
@@ -31,7 +31,7 @@ define(["leaflet", "rbush"],
 
     function prepareLabel(fillStyle, fontSize, offset, stroke, minZoom) {
       return function (d) {
-        var font = fontSize + "px " + fontFamily;
+        var font = fontSize + "px " + bodyStyle.fontFamily;
         return {
           position: L.latLng(d.nodeinfo.location.latitude, d.nodeinfo.location.longitude),
           label: d.nodeinfo.hostname,
@@ -88,6 +88,11 @@ define(["leaflet", "rbush"],
           this.prepareLabels();
         }
       },
+      updateColor: function() {
+        if(this._map) {
+          this.prepareLabels();
+        }
+      },
       prepareLabels: function () {
         var d = this.data;
 
@@ -99,10 +104,11 @@ define(["leaflet", "rbush"],
         // - label (string)
         // - color (string)
 
-        var labelsOnline = d.online.map(prepareLabel("rgba(0, 0, 0, 0.9)", 11, 8, true, 13));
+        var labelsOnline = d.online.map(prepareLabel(bodyStyle.color, 11, 8, true, 13));
         var labelsOffline = d.offline.map(prepareLabel("rgba(212, 62, 42, 0.9)", 9, 5, false, 16));
         var labelsNew = d.new.map(prepareLabel("rgba(48, 99, 20, 0.9)", 11, 8, true, 0));
         var labelsLost = d.lost.map(prepareLabel("rgba(212, 62, 42, 0.9)", 11, 8, true, 0));
+        labelShadow = bodyStyle.backgroundColor.replace(/rgb/i, "rgba").replace(/\)/i,',0.7)');
 
         var labels = []
           .concat(labelsNew)
@@ -216,7 +222,7 @@ define(["leaflet", "rbush"],
         var ctx = canvas.getContext("2d");
 
         ctx.lineWidth = 5;
-        ctx.strokeStyle = "rgba(255, 255, 255, 0.7)";
+        ctx.strokeStyle = labelShadow;
         ctx.miterLimit = 2;
 
         function drawLabel(d) {

scss/modules/_base.scss

@@ -1,5 +1,6 @@
 body {
   -webkit-tap-highlight-color: transparent;
+  background: $color-white;
   color: $color-black;
   font-family: $font-family;
   font-size: $font-size;

scss/night.scss

@@ -0,0 +1,101 @@
+// Overwrite normal style (colors) - shadows are ignored
+@import 'modules/variables';
+@import 'custom/variables';
+
+$color-white: #111;
+$color-black: #fefefe;
+
+.night {
+  //@import 'modules/base';
+  body {
+    background: $color-white;
+    color: lighten($color-black, 100);
+  }
+
+  header {
+    background: transparentize($color-black, .98);
+  }
+
+  //@import 'leaflet';
+  .leaflet-container {
+    background: adjust-color($color-white, $blue: 10);
+  }
+
+  //@import 'modules/leaflet';
+  .leaflet-label {
+    &.leaflet-label-right {
+      background-color: $color-white;
+    }
+  }
+
+  //@import 'modules/leaflet-layer';
+  .leaflet-control-layers {
+    &.leaflet-control {
+      opacity: .9;
+    }
+  }
+
+  //@import 'modules/sidebar';
+  .sidebar {
+    .infobox, .container {
+      background: transparentize($color-white, .03);
+      border-right: 1px solid darken($color-white, 10%);
+    }
+
+    img {
+      filter: invert(100%);
+    }
+
+    @media screen and (max-width: map-get($grid-breakpoints, xl) - 1) {
+      background: $color-white;
+    }
+  }
+
+  //@import 'modules/proportion';
+  .proportion {
+    span {
+      filter: invert(100%);
+    }
+  }
+
+  //@import 'modules/tabs';
+  .tabs {
+    background: transparentize($color-black, .98);
+    border-color: lighten($color-white, 10%);
+
+    li {
+      color: transparentize($color-black, .5);
+
+      &:hover {
+        color: $color-black;
+      }
+    }
+  }
+
+  //@import 'modules/node';
+  .bar {
+    background: mix($color-new, $color-white, 60);
+
+    &.warning {
+      background: mix($color-offline, $color-white, 60);
+    }
+
+    label {
+      color: $color-white;
+    }
+  }
+
+  //@import 'modules/button';
+  button {
+    background: lighten($color-white, 10);
+    color: $color-black;
+
+    &:hover {
+      background: $color-white;
+    }
+
+    &.close {
+      color: transparentize($color-black, .5);
+    }
+  }
+}

tasks/build.js

@@ -43,7 +43,8 @@ module.exports = function (grunt) {
           outputStyle: "expanded"
         },
         files: {
-          "build/style.css": "scss/main.scss"
+          "build/style.css": "scss/main.scss",
+          "build/night.css": "scss/night.scss"
         }
       },
       dist: {
@@ -51,13 +52,14 @@ module.exports = function (grunt) {
           outputStyle: "compressed"
         },
         files: {
-          "build/style.css": "scss/main.scss"
+          "build/style.css": "scss/main.scss",
+          "build/night.css": "scss/night.scss"
         }
       }
     },
     postcss: {
       options: {
-        map: true,
+        map: false,
         processors: [
           require("autoprefixer")({
             browsers: ["> 1% in DE"]
@@ -65,7 +67,7 @@ module.exports = function (grunt) {
         ]
       },
       dist: {
-        src: "build/style.css"
+        src: "build/*.css"
       }
     },
     inline: {

tasks/linting.js

@@ -17,7 +17,7 @@ module.exports = function (grunt) {
       options: {
         configFile: ".sass-lint.yml"
       },
-      target: ['scss/main.scss', 'scss/*/*.scss']
+      target: ['scss/main.scss', 'scss/night.scss', 'scss/*/*.scss']
     },
     eslint: {
       sources: {