Bump version to 0.5.0 (#19)

nagix · Feb 10, 2022 · edb5fe9 · edb5fe9
1 parent 0cd0e86
commit edb5fe9
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ See a [Live Demo](https://nagix.github.io/mapbox-gl-rain-layer).
 
 The rain animation is up to date according to the current radar data from data sources. In addition to the density of raindrops, the colors of semi-transparent boxes indicate the intensity of rainfall.
 
-Version 0.4 requires Mapbox GL JS 0.54.0 or later. This component works on [browsers that support ES6](https://caniuse.com/es6).
+Version 0.5 requires Mapbox GL JS 0.54.0 or later. This component works on [browsers that support ES6](https://caniuse.com/es6).
 
 ## Installation
 

diff --git a/docs/index.html b/docs/index.html
@@ -21,11 +21,11 @@
     <meta property="og:image" content="https://nagix.github.io/mapbox-gl-rain-layer/screenshot1.jpg" />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="@nagix" />
-    <link href="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css" rel="stylesheet">
+    <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
     <link href="rain-layer.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css" rel="stylesheet">
-    <script src="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/mapbox-gl-rain-layer@0.4.0/dist/mapbox-gl-rain-layer.min.js"></script>
+    <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mapbox-gl-rain-layer@0.5.0/dist/mapbox-gl-rain-layer.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/suncalc.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
 </head>
@@ -49,8 +49,16 @@
         </div>
         <div id="rain-bg">
             <div id="rain">
-                <div>Rain Color</div>
-                <div id="picker"></div>
+                <div id="color-select">
+                    <div id="rain-color-button" class="active">Rain Color</div>
+                    <div id="snow-color-button">Snow Color</div>
+                </div>
+                <div id="rain-color-picker" class="active">
+                    <div id="rain-color-picker-inner" ></div>
+                </div>
+                <div id="snow-color-picker">
+                    <div id="snow-color-picker-inner"></div>
+                </div>
                 <hr>
                 <div>Mesh Opacity: <span id="mesh-opacity">0.1</span></div>
                 <div>
@@ -131,6 +139,10 @@ <h3>About Mapbox GL JS Rain Layer</h3>
         const mapStyleBg = document.getElementById('map-styles-bg');
         const rainBg = document.getElementById('rain-bg');
         const rain = document.getElementById('rain');
+        const rainColorButton = document.getElementById('rain-color-button');
+        const snowColorButton = document.getElementById('snow-color-button');
+        const rainColorPicker = document.getElementById('rain-color-picker');
+        const snowColorPicker = document.getElementById('snow-color-picker');
         const slider = document.getElementById('slider');
         const infoBg = document.getElementById('info-bg');
         const info = document.getElementById('info');
@@ -172,7 +184,7 @@ <h3>About Mapbox GL JS Rain Layer</h3>
         for (const style of ['terrain', 'streets-v11', 'outdoors-v11', 'light-v10', 'dark-v10', 'satellite-v9', 'satellite-streets-v11']) {
             const e = document.getElementById(style);
             e.addEventListener('click', function (e) {
-                document.querySelector('.active').classList.remove('active');
+                document.querySelector('#map-styles .active').classList.remove('active');
                 e.target.classList.add('active');
                 mapStyleBg.style.display = 'none';
                 map.removeLayer('rain');
@@ -187,16 +199,29 @@ <h3>About Mapbox GL JS Rain Layer</h3>
         }
 
         rainBg.addEventListener('click', () => {
-            pickr.applyColor();
+            rainPickr.applyColor();
+            snowPickr.applyColor();
             rainBg.style.display = 'none';
         });
         rain.addEventListener('click', e => {
             e.stopPropagation();
         });
-        const pickr = Pickr.create({
-            el: '#picker',
+        rainColorButton.addEventListener('click', e => {
+            rainColorButton.classList.add('active');
+            snowColorButton.classList.remove('active');
+            rainColorPicker.classList.add('active');
+            snowColorPicker.classList.remove('active');
+        });
+        snowColorButton.addEventListener('click', e => {
+            snowColorButton.classList.add('active');
+            rainColorButton.classList.remove('active');
+            snowColorPicker.classList.add('active');
+            rainColorPicker.classList.remove('active');
+        });
+        const rainPickr = Pickr.create({
+            el: '#rain-color-picker-inner',
             theme: 'monolith',
-            default: '#fff',
+            default: '#ccf',
             useAsButton: true,
             inline: true,
             showAlways: true,
@@ -210,9 +235,29 @@ <h3>About Mapbox GL JS Rain Layer</h3>
                 }
             }
         });
-        pickr.on('change', color => {
+        rainPickr.on('change', color => {
             rainLayer.setRainColor(color.toRGBA().toString(0));
          });
+        const snowPickr = Pickr.create({
+            el: '#snow-color-picker-inner',
+            theme: 'monolith',
+            default: '#fff',
+            useAsButton: true,
+            inline: true,
+            showAlways: true,
+            defaultRepresentation: 'RGBA',
+            components: {
+                preview: true,
+                opacity: true,
+                hue: true,
+                interaction: {
+                    input: true
+                }
+            }
+        });
+        snowPickr.on('change', color => {
+            rainLayer.setSnowColor(color.toRGBA().toString(0));
+         });
         slider.addEventListener('input', e => {
             const value = e.target.value;
             document.getElementById('mesh-opacity').textContent = value;

diff --git a/docs/rain-layer.css b/docs/rain-layer.css
@@ -96,6 +96,29 @@ html, body {
 #rain hr {
     margin: 10px 0;
 }
+#color-select {
+    display: table;
+    width: 100%;
+    height: 30px;
+    box-shadow: 0 0 0 1px #ccc;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
+#color-select>div {
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;;
+}
+#color-select>div.active {
+    background-color: #ddd;
+}
+#rain-color-picker, #snow-color-picker {
+    display: none;
+}
+#rain-color-picker.active, #snow-color-picker.active {
+    display: block;
+}
 #slider {
     width: 100%;
     cursor: grab;

diff --git a/package.json b/package.json
@@ -1,23 +1,23 @@
 {
   "name": "mapbox-gl-rain-layer",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Mapbox GL Rain Layer",
   "main": "dist/mapbox-gl-rain-layer.js",
   "module": "dist/mapbox-gl-rain-layer.esm.js",
   "dependencies": {
-    "three": "^0.132.2"
+    "three": "^0.137.5"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-strip": "^2.1.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.8.0",
     "eslint-config-mourner": "^3.0.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jsdoc": "^36.1.0",
-    "mapbox-gl": "^2.4.1",
-    "rollup": "^2.56.3",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsdoc": "^37.8.2",
+    "mapbox-gl": "^2.7.0",
+    "rollup": "^2.67.1",
     "rollup-plugin-terser": "^7.0.2"
   },
   "peerDependencies": {