Commit 9a42ba44 authored by Adrien Pavie's avatar Adrien Pavie
Browse files

Improved sharing modal, various layout improvements

parent 1443073a
......@@ -16,6 +16,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- Drawn shapes are now more or less wide according to zoom level
- Color selector has now presets + modal selector
- Brush size selector are now four buttons
- Share button uses native navigator sharing modal if available
### Removed
- Button for SMS link sharing (just doesn't work)
- Button for email sharing only shows on desktop
## 0.1.1
......
......@@ -52,11 +52,14 @@
</div>
<div id="top-menu" class="menu-dark d-flex justify-content-between align-items-center flex-nowrap pr-2 pl-2">
<button id="btn-menu" class="btn btn-dark btn-lg" type="button">
<i class="fa fa-bars" title="Menu"></i>
</button>
<div>
<button id="btn-menu" class="btn btn-dark btn-lg" type="button">
<i class="fa fa-bars" title="Menu"></i>
</button>
<img src="img/logo_white.svg" class="mode-nav-only pl-2 d-none d-md-inline" alt="Gribrouillon" style="height: 50px" />
</div>
<img src="img/logo_white.svg" class="mode-draw-only" alt="Gribrouillon" style="height: 90%" />
<img src="img/logo_white.svg" class="mode-draw-only d-md-none" alt="Gribrouillon" style="height: 90%" />
<div class="input-group ml-2 mr-2 mode-nav-only" style="max-width: 300px">
<div class="input-group-prepend">
......@@ -67,7 +70,7 @@
<input id="searchbar" type="text" class="form-control" placeholder="Search your street, city, country..." aria-describedby="search-bar-icon">
</div>
<button class="btn-permalink btn btn-dark btn-lg" type="button" data-toggle="modal" data-target="#sharingModal">
<button id="btn-partageur" class="btn-permalink btn btn-dark btn-lg" type="button">
<i class="fa fa-send" title="Share your sketch"></i>
</button>
</div>
......@@ -87,7 +90,7 @@
</div>
<div class="col-3 col-sm-2 col-lg-1 d-flex justify-content-between align-items-center">
<button id="btn-undo" class="btn btn-dark btn-lg" type="button" disabled>
<button id="btn-undo" class="btn btn-dark btn-lg" type="button" disabled="true">
<i class="fa fa-undo" title="Undo"></i>
</button>
</div>
......@@ -117,7 +120,7 @@
</div>
<div class="modal fade" id="sharingModal" tabindex="-1" role="dialog" aria-labelledby="sharingModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="sharingModalLabel"><i class="fa fa-send" aria-hidden="true"></i> Share your map</h5>
......@@ -134,20 +137,15 @@
</div>
<input id="share-url" type="text" class="form-control" />
<div class="input-group-append">
<button id="share-url-copy" class="btn btn-secondary" type="button">
<button id="btn-partageur-url" class="btn btn-secondary" type="button">
<i class="fa fa-clipboard" title="Copy"></i>
</button>
</div>
</div>
<div class="d-flex flex-nowrap">
<a id="share-courriel" href="" role="button" class="btn btn-primary flex-grow-1 mr-1">
<i class="fa fa-envelope" aria-hidden="true"></i> By email
</a>
<a id="share-sms" href="" role="button" class="btn btn-primary flex-grow-1 ml-1">
<i class="fa fa-phone" aria-hidden="true"></i> By SMS
</a>
</div>
<a id="share-courriel" href="" role="button" class="btn btn-primary btn-block d-none d-sm-block">
<i class="fa fa-envelope" aria-hidden="true"></i> By email
</a>
</div>
</div>
</div>
......
......@@ -33,11 +33,33 @@ const domBrushSizes = document.getElementById("brush-sizes");
const domColorPicker = document.getElementById("color-picker");
const domColorPickerLine = document.getElementById("color-picker-line");
const domBtnUndo = document.getElementById("btn-undo");
const domBtnShare = document.getElementById("btn-partageur");
const domBtnShareUrl = document.getElementById("btn-partageur-url");
const domSearchAddress = document.getElementById("searchbar");
const domBackgroundPicker = document.getElementById("background-picker");
/***********************************************************************************
* Polyfills
*/
if(!Object.fromEntries) {
Object.fromEntries = entries => {
const obj = {};
if(entries && entries.length > 0) {
entries.forEach(e => {
if(e && e.length > 0) {
obj[e[0]] = e.length > 1 ? e[1] : undefined;
}
});
}
return obj;
};
}
/***********************************************************************************
* Leaflet rendering customization
*/
......@@ -434,7 +456,8 @@ function changeMode(mode, opts) {
if(opts.autoLocate) {
try {
mapLocCtrl.start();
}catch(e) {
}
catch(e) {
console.error(e);
}
}
......@@ -468,7 +491,7 @@ function undoShapeDrawn() {
const fids = Object.keys(shapesLayersById).map(k => parseInt(k)).sort();
if(fids.length <= 1) {
domBtnUndo.setAttribute("disabled", true);
domBtnUndo.setAttribute("disabled", "true");
}
if(fids.length > 0) {
......@@ -518,20 +541,35 @@ function setColor(color) {
}
/**
* Update sharing links
*/
function updateSharingLinks() {
document.getElementById("share-url").value = location.href;
document.getElementById("share-courriel").href = `mailto:?subject=${encodeURIComponent("Sketch map made with Gribrouillon")}&body=${encodeURIComponent("Link : "+location.href)}`;
document.getElementById("share-sms").href = `sms:?&body=${encodeURIComponent("Sketch map made with Gribrouillon : "+location.href)}`;
document.getElementById("share-qrcode").innerHTML = new QRCode({
content: location.href,
width: 200,
height: 200,
padding: 2,
join: true,
pretty: false
}).svg();
* Display modal for sharing map link
*/
function showShareModal() {
// Show native share modal
if(navigator && navigator.share) {
navigator.share({
url: location.href,
title: "Sketch map made with Gribrouillon"
});
}
// Show custom modal
else {
// QR Code
document.getElementById("share-qrcode").innerHTML = new QRCode({
content: location.href,
width: 200,
height: 200,
padding: 2,
join: true,
pretty: false
}).svg();
// Other links
document.getElementById("share-url").value = location.href;
document.getElementById("share-courriel").href = `mailto:?subject=${encodeURIComponent("Sketch map made with Gribrouillon")}&body=${encodeURIComponent("See "+location.href)}`;
// Open modal
$("#sharingModal").modal("show");
}
}
/**
......@@ -660,12 +698,15 @@ function hideLeftMenu() {
* Read all params from URL
*/
function readUrlParameters() {
return ["?", ""].includes(location.search.trim()) ? {} : Object.fromEntries(
location.search
.replace(/^\?/, '')
.split("&")
.map(kv => kv.split("=").map(decodeURIComponent))
);
if(!location.search || location.search.trim() === "" || location.search.trim() === "?") { return {}; }
else {
return Object.fromEntries(
location.search
.replace(/^\?/, '')
.split("&")
.map(kv => kv.split("=").map(decodeURIComponent))
);
}
}
/**
......@@ -701,14 +742,32 @@ function init() {
// Buttons
document.getElementById("btn-valid").addEventListener("click", () => changeMode("nav"));
document.getElementById("btn-edit").addEventListener("click", () => changeMode("draw"));
domBtnShare.addEventListener("click", showShareModal);
domBtnUndo.addEventListener("click", undoShapeDrawn);
$("#sharingModal").on("show.bs.modal", updateSharingLinks);
$("#backgroundModal").on("show.bs.modal", updateBackgroundsList);
document.getElementById("share-url-copy").addEventListener("click", e => {
domBtnShareUrl.addEventListener("click", e => {
// Copy text to clipboard
const txtField = document.getElementById("share-url");
txtField.select();
txtField.setSelectionRange(0, 99999);
document.execCommand("copy");
// Unselect text field
txtField.blur();
if(window.getSelection) {
window.getSelection().removeAllRanges();
}
else if (document.selection) {
document.selection.empty();
}
// Animation for button
domBtnShareUrl.classList.add("btn-success");
domBtnShareUrl.classList.remove("btn-secondary");
setTimeout(() => {
domBtnShareUrl.classList.remove("btn-success");
domBtnShareUrl.classList.add("btn-secondary");
}, 1000);
});
// Brush sizes
......
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