Commit e3fef752 authored by Adrien Pavie's avatar Adrien Pavie
Browse files

Color selector with presets

parent 2522c540
......@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
### Changed
- Drawn shapes are now more or less wide according to zoom level
- Color selector has now presets + modal selector
## 0.1.1
......
......@@ -85,8 +85,13 @@ function retrieveBackgroundLayers() {
});
}
setTimeout(retrieveBackgroundLayers, 15000); // Delay first call
setInterval(retrieveBackgroundLayers, 1000*60*60*24); // Once per day
if(!process.env.BG_DL || process.env.BG_DL === 1) {
setTimeout(retrieveBackgroundLayers, 15000); // Delay first call
setInterval(retrieveBackgroundLayers, 1000*60*60*24); // Once per day
}
else {
console.log("Background imagery download disabled");
}
......
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"><defs><linearGradient id="rnb" x1="0" y1="1" x2="1" y2="0"><stop offset="2%" stop-color="red"/><stop offset="18%" stop-color="fuchsia"/><stop offset="34%" stop-color="blue"/><stop offset="50%" stop-color="cyan"/><stop offset="66%" stop-color="lime"/><stop offset="82%" stop-color="yellow"/><stop offset="98%" stop-color="red"/></linearGradient></defs><rect width="100" height="100" fill="url(#rnb)"/></svg>
......@@ -73,17 +73,15 @@
<div id="map" class="map-no-bottom"></div>
<div id="bottom-menu" class="menu-dark d-flex justify-content-around align-items-center pr-2 pl-2">
<div class="d-flex justify-content-between align-items-center">
<i class="fa fa-expand mr-2" title="Brush size"></i> <input id="pensize" type="range" min="1" max="40" style="width: 150px" />
</div>
<div id="bottom-menu" class="menu-dark row m-0">
<div id="color-picker-line" class="col-12 col-md-6 col-lg-4 offset-lg-2 d-flex justify-content-around align-items-center"></div>
<div class="btn-group btn-group-lg" role="group">
<button id="btn-color" class="btn btn-dark" type="button" data-toggle="modal" data-target="#colorModal">
<i class="fa fa-circle" title="Color"></i>
</button>
<div class="col-9 col-md-4 col-lg-3 d-flex justify-content-around align-items-center">
<input id="pensize" type="range" min="1" max="40" style="width: 100%; max-width: 250px" />
</div>
<button id="btn-undo" class="btn btn-dark" type="button" disabled>
<div class="col-3 col-md-2 col-lg-1 d-flex justify-content-around align-items-center">
<button id="btn-undo" class="btn btn-dark btn-lg" type="button" disabled>
<i class="fa fa-undo" title="Undo"></i>
</button>
</div>
......
// Constants
const GEOCODER_URL = "https://nominatim.openstreetmap.org";
const BING_API_KEY = "AhzbK3kqqkO2lKw7imz7ofxWa5K_qPIFaktbhJhL-SmI_zQK2K36RaG1ULrXlmHZ";
const COLORS_BASE = [ "#000000", "#f0240f", "#f6cc00", "#00b953", "#654efa", "#b900f8" ];
const COLORS = [
["white", "#d2d7d3", "#bfbfbf", "#67809f", "rgb(111, 111, 111)", "black"],
["#ffffcc", "#f2d984", "#f0ff00", "#f5e51b", "#f4d03f", "#f7ca18"],
......@@ -17,7 +18,7 @@ let map, sid, shapesLayer, tmpShapeCoordinates,
backgroundLayers, tilesLayer, backgroundLayersPosition,
useBackgroundFromURL;
const drawOpts = {
color: "red",
color: "#f0240f",
penSize: 20,
opacity: 1
};
......@@ -26,10 +27,11 @@ let shapeLayerTmpId = 0;
let selectedBackgroundLayer = "MAPNIK";
const shapesLayersWithoutId = {};
const socket = io();
let domBtnColor;
const domLoader = document.getElementById("loader");
const domInputPenSize = document.getElementById("pensize");
const domColorPicker = document.getElementById("color-picker");
const domBtnColor = document.getElementById("btn-color");
const domColorPickerLine = document.getElementById("color-picker-line");
const domBtnUndo = document.getElementById("btn-undo");
const domSearchAddress = document.getElementById("searchbar");
const domBackgroundPicker = document.getElementById("background-picker");
......@@ -479,7 +481,21 @@ function setPenSize(e) {
*/
function setColor(color) {
drawOpts.color = color;
domBtnColor.style.color = color;
let found = false;
for(let i=0; i < domColorPickerLine.childNodes.length; i++) {
const child = domColorPickerLine.childNodes[i];
if(i === domColorPickerLine.childNodes.length - 1 && !found) {
child.classList.add("btn-color-selected");
}
else if(child.getAttribute("data-color") === color) {
found = true;
child.classList.add("btn-color-selected");
}
else {
child.classList.remove("btn-color-selected");
}
}
}
/**
......@@ -679,6 +695,23 @@ function init() {
});
// Color picker
COLORS_BASE.forEach(color => {
const domBtn = document.createElement("button");
domBtn.classList.add("btn-color");
domBtn.style.backgroundColor = color;
domBtn.title = "Change color";
domBtn.setAttribute("data-color", color);
domBtn.addEventListener("click", () => setColor(color));
domColorPickerLine.appendChild(domBtn);
});
domBtnColor = document.createElement("button");
domBtnColor.id = "btn-color";
domBtnColor.classList.add("btn-color");
domBtnColor.setAttribute("data-toggle", "modal");
domBtnColor.setAttribute("data-target", "#colorModal");
domColorPickerLine.appendChild(domBtnColor);
COLORS.forEach(range => {
const domRange = document.createElement("div");
domRange.classList.add("d-flex", "justify-content-between", "align-items-center", "mt-2", "mb-2");
......@@ -692,6 +725,7 @@ function init() {
});
domColorPicker.appendChild(domRange);
});
setColor(drawOpts.color);
// Map
map = L.map("map", {
......
......@@ -96,7 +96,6 @@
display: none !important;
}
#left-menu nav {
padding: 10px;
position: absolute;
......@@ -144,8 +143,37 @@
bottom: 75px;
}
@media (max-width: 576px) {
#bottom-menu {
height: 100px;
}
.mode-draw #map {
bottom: 100px;
}
#btn-valid {
bottom: 120px;
}
}
/* Color picker */
.btn-color {
border: 1px solid white;
border-radius: 18px;
background: none;
width: 35px;
height: 35px;
cursor: pointer;
}
.btn-color.btn-color-selected {
width: 45px;
height: 45px;
border-radius: 23px;
}
.color-picker-color {
width: 35px;
height: 35px;
......@@ -153,6 +181,11 @@
border: 3px solid black;
}
#btn-color {
background-image: url('img/rainbow.svg');
background-size: contain;
}
/* Background picker */
.modal-xxl {
max-width: 80%;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment