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

[TASK] Load mode style inline

Browse Source
This commit is contained in:
Xaver Maierhofer 2017-01-31 04:45:27 +01:00
parent 63fbd7f23c
commit 72d2b63782
No known key found for this signature in database
GPG Key ID: 7FDCE23FD2EC9FE8
6 changed files with 48 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
README.md
View File

@ -118,7 +118,22 @@ A list of objects describing map layers. Each object has at least `name`, `url`
#### mode (string)
Allows to load a additional style for a night mode or similar use case. Style is attached to the mapLayer.
Allows to load a additional style for a night mode or similar use case. Possible are inline style or link.
Inline avoids re-rendering and maybe issues with label-layer update. Important are class "css-mode mode-name" and media "not".
_Default is night.css inline in index.html_
```html
<link rel="stylesheet" class="css-mode mode-name" media="not" href="mode-name.css">
```
or
```html
<style class="css-mode mode-name" media="not">
<inline src="mode-name.css" />
</style>
```
#### start (integer)

5
html/index.html
View File

@ -3,7 +3,10 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="style.css?__build=true">
<link rel="stylesheet" href="main.css?__build=true">
<style class="css-mode night" media="not">
<inline src="night.css" />
</style>
<script>
var jsonData = <inline src="config.json" />;
</script>

18
lib/map.js
View File

@ -330,25 +330,15 @@ define(['map/clientlayer', 'map/labelslayer',
if (map.getZoom() > map.options.maxZoom) {
map.setZoom(map.options.maxZoom);
}
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 = '';
var style = document.querySelector('.css-mode:not([media="not"])');
if (style && e.layer.options.mode !== '' && !style.classList.contains(e.layer.options.mode)) {
style.media = 'not';
labelsLayer.updateLayer();
}
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 (typeof document.querySelector('.css-mode').sheet.cssRules !== 'undefined') {
document.querySelector('.css-mode.' + e.layer.options.mode).media = '';
labelsLayer.updateLayer();
clearInterval(cssInterval);
}
}, 10);
}
});

2
scss/night.scss
View File

@ -5,7 +5,7 @@
$color-white: #111;
$color-black: #fefefe;
.night {
html {
//@import 'modules/base';
body {
background: $color-white;

29
tasks/build.js
View File

@ -42,24 +42,37 @@ module.exports = function exports(grunt) {
}
},
sass: {
files: [{
expand: true,
cwd: 'scss/',
src: '*.scss',
dest: 'build/',
ext: '.css'
}],
dev: {
options: {
sourceMap: true,
outputStyle: 'expanded'
},
files: {
'build/style.css': 'scss/main.scss',
'build/night.css': 'scss/night.scss'
}
files: [{
expand: true,
cwd: 'scss/',
src: '*.scss',
dest: 'build/',
ext: '.css'
}]
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'build/style.css': 'scss/main.scss',
'build/night.css': 'scss/night.scss'
}
files: [{
expand: true,
cwd: 'scss/',
src: '*.scss',
dest: 'build/',
ext: '.css'
}]
}
},
postcss: {

2
tasks/clean.js
View File

@ -4,7 +4,7 @@ module.exports = function exports(grunt) {
grunt.config.merge({
clean: {
build: ['build/**/*', 'node_modules/grunt-newer/.cache'],
release: ['build/vendor', 'build/*.map', 'build/config.json', 'build/style.css']
release: ['build/vendor', 'build/*.map', 'build/config.json', 'build/main.css']
}
});