Modification de la norme SVG et des fichier les traitant. Manque de plus de tests.

This commit is contained in:
Mysaa 2021-10-27 15:38:10 +02:00
parent 95b3fea2ef
commit 8852e70c7e
Signed by: Mysaa
GPG Key ID: DBA23608F23F5A10
4 changed files with 385 additions and 1225 deletions

View File

@ -148,7 +148,7 @@
</div> </div>
<div class="container"> <div class="container">
<object type="image/svg+xml" data="maps/M-MGN1-3.svg" id="plan" onload="initSvgSupport()"></object> <object type="image/svg+xml" data="maps/M-MGN1-4.svg" id="plan"></object>
<div class="card"> <div class="card">
<h4 class="card-header">Salle actuelle</h4> <h4 class="card-header">Salle actuelle</h4>

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 788 KiB

After

Width:  |  Height:  |  Size: 56 KiB

View File

@ -46,16 +46,16 @@ function selectRoom(roomId) {
selectedRooms[i].classList.remove('current-room'); selectedRooms[i].classList.remove('current-room');
} }
var room = svg.contentDocument.getElementById('path-salle-' + roomId); var room = svg.contentDocument.getElementById('salle-' + roomId);
if (room == null) { if (room == null) {
console.log('Error: the room does not exist'); console.log('Error: the room salle-'+roomId+' does not exist');
return; return;
} }
room.classList.add('current-room'); room.classList.add('current-room');
httpGetAsync("api/request.php?salle="+room.id.substring("path-salle-".length), function (s,errcode){ httpGetAsync("api/request.php?salle="+room.id.substring("salle-".length), function (s,errcode){
window.clearTimeout(document.wnsTimeout); window.clearTimeout(document.wnsTimeout);
if (s == "404") { if (s == "404") {
@ -66,7 +66,7 @@ function selectRoom(roomId) {
} }
salle = JSON.parse(s) salle = JSON.parse(s)
if (room.id == "path-salle-" + salle["id"]) { if (room.id == "salle-" + salle["id"]) {
if (errcode == 200) { if (errcode == 200) {
titres = ((salle.aliaz.length!=0)?(salle.aliaz.join(' ou ')):"Aucun alias connu."); titres = ((salle.aliaz.length!=0)?(salle.aliaz.join(' ou ')):"Aucun alias connu.");
document.getElementById('room-name').innerText = titres; document.getElementById('room-name').innerText = titres;
@ -106,11 +106,11 @@ function initSvgSupport()
svgPanZoom(plan, {zoomEnabled: true, controlIconsEnabled: true}); svgPanZoom(plan, {zoomEnabled: true, controlIconsEnabled: true});
var salles = plan.contentDocument.getElementsByClassName('svg-salle'); var salles = plan.contentDocument.querySelectorAll('#salles-group path');
for (var i = 0; i < salles.length; i++) { for (var i = 0; i < salles.length; i++) {
salles[i].addEventListener('click', function(e) { salles[i].addEventListener('click', function(e) {
var id = e.target.id.substring('path-salle-'.length); // Remove prefix var id = e.target.id.substring('salle-'.length); // Remove prefix
selectRoom(id); selectRoom(id);
}); });
} }

View File

@ -1,7 +1,7 @@
.svg-salle { #salles-group path {
transition: fill .3s; transition: fill .3s;
fill: #bbb; fill: #9d9;
stroke: none; stroke: none;
stroke-width: 1px; stroke-width: 1px;
stroke-linecap: butt; stroke-linecap: butt;
@ -9,10 +9,32 @@
stroke-opacity: 1; stroke-opacity: 1;
} }
.svg-salle:hover { #salles-group path:hover {
fill: #fe5400aa; fill: #fe5400aa;
} }
.current-room { #wall-group path {
fill:#611010;
fill-opacity:1;
stroke:none;
stroke-width:1px;
stroke-linecap:butt;
stroke-linejoin:miter;
stroke-opacity:1
}
#glass-group path {
fill:#c0c0c0;
fill-opacity:1;
stroke:#5b5b5b;
stroke-width:1.60000002;
stroke-linecap:round;
stroke-linejoin:bevel;
stroke-miterlimit:4;
stroke-dasharray:none;
stroke-opacity:1
}
#salles-group path.current-room {
fill: #fe5400; fill: #fe5400;
} }