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) #### 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) #### start (integer)

5
html/index.html
View File

@ -3,7 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <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> <script>
var jsonData = <inline src="config.json" />; var jsonData = <inline src="config.json" />;
</script> </script>

18
lib/map.js
View File

@ -330,25 +330,15 @@ define(['map/clientlayer', 'map/labelslayer',
if (map.getZoom() > map.options.maxZoom) { if (map.getZoom() > map.options.maxZoom) {
map.setZoom(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'); var style = document.querySelector('.css-mode:not([media="not"])');
if (cssMode) { if (style && e.layer.options.mode !== '' && !style.classList.contains(e.layer.options.mode)) {
cssMode.parentNode.removeChild(cssMode); style.media = 'not';
document.querySelector('html').className = '';
labelsLayer.updateLayer(); labelsLayer.updateLayer();
} }
if (e.layer.options.mode) { if (e.layer.options.mode) {
document.querySelector('head').innerHTML += "<link rel='stylesheet' class='css-mode' href='" + e.layer.options.mode + ".css'>"; document.querySelector('.css-mode.' + e.layer.options.mode).media = '';
document.querySelector('html').classList.add(e.layer.options.mode);
var cssInterval = setInterval(function () {
if (typeof document.querySelector('.css-mode').sheet.cssRules !== 'undefined') {
labelsLayer.updateLayer(); labelsLayer.updateLayer();
clearInterval(cssInterval);
}
}, 10);
} }
}); });

2
scss/night.scss
View File

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

29
tasks/build.js
View File

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

2
tasks/clean.js
View File

@ -4,7 +4,7 @@ module.exports = function exports(grunt) {
grunt.config.merge({ grunt.config.merge({
clean: { clean: {
build: ['build/**/*', 'node_modules/grunt-newer/.cache'], 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']
} }
}); });