fixed synchBlock function, now working for regular liks and for map points

This commit is contained in:
2018-09-30 19:46:37 +02:00
parent 6ff919b354
commit e9f3d7b798
+98 -163
View File
@@ -20,94 +20,22 @@ function map() {
var markers = {}; var markers = {};
var greenIcon = new LeafIcon({iconUrl: 'user/themes/r2c/images/pointeur2.svg'}) var greenIcon = new LeafIcon({iconUrl: 'user/themes/r2c/images/pointeur2.svg'})
var id, targets;
for (var i = 0; i < dyn_data.mappoints.length; i++) { for (var i = 0; i < dyn_data.mappoints.length; i++) {
var id = dyn_data.mappoints[i].id; id = dyn_data.mappoints[i].id;
markers[id] = L.marker([dyn_data.mappoints[i].lat, dyn_data.mappoints[i].long], {icon: greenIcon, alt:dyn_data.mappoints[i].target}) targets = typeof dyn_data.mappoints[i].target != 'undefined' ? dyn_data.mappoints[i].target.split(',') : [];
markers[id] = L.marker([dyn_data.mappoints[i].lat, dyn_data.mappoints[i].long], {
icon: greenIcon,
targets:targets
})
.on("click", function(e){ .on("click", function(e){
// e c'est l'evenement click html normal // e c'est l'evenement click html normal
// this c'est le marker // this c'est le marker
// console.log('marker click', e, this); // console.log('marker click', e, this);
$(document).on("click","#streetmap img",function(e){
console.log(this);
e.preventDefault();
var hrefs = $(this).attr("alt").split(',');
// console.log('hrefs', hrefs);
var h, h_parts;
for (var i = 0; i < hrefs.length; i++) {
h = hrefs[i];
h_parts = h.match(/^#(([^_]+)_(.+)$)/);
// console.log('h_parts', h_parts);
function scrollTo() {
var href = target.find(h_parts[0]);
e.preventDefault();
target.mCustomScrollbar("scrollTo",href,{
scrollInertia:1000,
});
}
switch (h_parts[2]) {
case 'rct':
var target = $('#recits.mCustomScrollbar');
scrollTo();
break;
case 'int':
var target = $('#interviews.mCustomScrollbar');
scrollTo();
break;
case 'img':
var target = $('#images.mCustomScrollbar');
scrollTo();
break;
case 'mp':
var target = $('#streetmap.mCustomScrollbar');
scrollTo();
break;
case 'lk':
var target = $('#links.mCustomScrollbar');
scrollTo();
var href = target.find(h_parts[0]);
var text = $('.nodes text.group1');
var text2 = $('.nodes text.group2');
var text3 = $('.nodes text.group3');
console.log('cc');
text.css({
'font-size':'inherit',
'fill':'black',
});
text2.css({
'font-size':'inherit',
'fill':'grey',
});
text3.css({
'font-size':'inherit',
'fill':'lightgrey',
});
if (href) {
href.css({
'font-size':'1.2rem',
'fill':'blue',
});
}
break;
// case 'rs':
// var target = $('#reseaux-sociaux.mCustomScrollbar');
// scrollTo();
// break;
// case '':
// etc
// break;
default:
}
}
});
console.log("marker targets", this.options.targets); console.log("marker targets", this.options.targets);
synchBloks(this.options.targets);
}) })
.bindPopup(dyn_data.mappoints[i].title) .bindPopup(dyn_data.mappoints[i].title)
.addTo(mymap); .addTo(mymap);
@@ -118,40 +46,42 @@ function map() {
var cible = dyn_data.mappoints[i].target; var cible = dyn_data.mappoints[i].target;
} }
function markerFunction(id){ // function markerFunction(id){
// console.log('id', hash); // // console.log('id', hash);
//
// var hrefs = $(this).attr("alt").split(','); // // var hrefs = $(this).attr("alt").split(',');
// // console.log('hrefs', hrefs); // // // console.log('hrefs', hrefs);
// var h, h_parts; // // var h, h_parts;
// for (var i = 0; i < hrefs.length; i++) { // // for (var i = 0; i < hrefs.length; i++) {
// h = hrefs[i]; // // h = hrefs[i];
// h_parts = h.match(/^#(([^_]+)_(.+)$)/); // // h_parts = h.match(/^#(([^_]+)_(.+)$)/);
// // console.log('h_parts', h_parts); // // // console.log('h_parts', h_parts);
//
//
// for (var i in markers){
// var markerID = markers[i]._icon.id;
// // console.log('markerID',markers[i]);
// var hrefsMarker = markerID.split(',');
// var hM, h_partsM;
//
// for (var i = 0; i < hrefsMarker.length; i++) {
// hM = hrefsMarker[i];
// h_partsM = hM.match(/^#(([^_]+)_(.+)$)/);
// console.log('h_partsM', hM);
// }
//
// if (hM == id){
// markers[i].openPopup();
// };
// }
// }
for (var i in markers){ // TODO a quoi ça sert ça ? sur TOUS les liens ? vraiment ?
var markerID = markers[i]._icon.id; // $("a").click(function(){
// console.log('markerID',markers[i]); // markerFunction($(this)[0].hash);
var hrefsMarker = markerID.split(','); // console.log('$(this)[0]',$(this)[0].hash);
var hM, h_partsM; // });
for (var i = 0; i < hrefsMarker.length; i++) {
hM = hrefsMarker[i];
h_partsM = hM.match(/^#(([^_]+)_(.+)$)/);
console.log('h_partsM', hM);
}
if (hM == id){
markers[i].openPopup();
};
}
}
$("a").click(function(){
markerFunction($(this)[0].hash);
console.log('$(this)[0]',$(this)[0].hash);
});
}; };
// change mouse_event // change mouse_event
@@ -400,78 +330,82 @@ function mCustomScrollbar() {
scrollInertia: 1000, scrollInertia: 1000,
}); });
function synchronize() {
}
$(document).on("click","a[href^='#'],#links .nodes text[href^='#'],#streetmap img[href^='#']",function(e){ $(document).on("click","a[href^='#'],#links .nodes text[href^='#'],#streetmap img[href^='#']",function(e){
e.preventDefault(); e.preventDefault();
var hrefs = $(this).attr("href").split(','); var targets = $(this).attr("href").split(',');
// console.log('hrefs', hrefs); // console.log('hrefs', hrefs);
var h, h_parts; synchBloks(targets);
for (var i = 0; i < hrefs.length; i++) { });
h = hrefs[i]; }
h_parts = h.match(/^#(([^_]+)_(.+)$)/);
// console.log('h_parts', h_parts);
function scrollTo() {
var href = target.find(h_parts[0]); function scrollBlockTo($block, href){
e.preventDefault(); $block.mCustomScrollbar("scrollTo",href,{
target.mCustomScrollbar("scrollTo",href,{
scrollInertia:1000, scrollInertia:1000,
}); });
} }
function synchBloks(targets) {
// stop function if targets is not an array or an empty one
// console.log("typeof targets", typeof targets);
// if(typeof targets != "array" || !targets.length)
// return
console.log('synchBloks : targets', targets);
var h, h_parts;
for (var i = 0; i < targets.length; i++) {
h = targets[i];
h_parts = h.match(/^#(([^_]+)_(.+)$)/);
// console.log('h_parts', h_parts);
switch (h_parts[2]) { switch (h_parts[2]) {
case 'rct': case 'rct':
var target = $('#recits.mCustomScrollbar'); scrollBlockTo($('#recits.mCustomScrollbar'), h);
scrollTo();
break; break;
case 'int': case 'int':
var target = $('#interviews.mCustomScrollbar'); scrollBlockTo($('#interviews.mCustomScrollbar'), h);
scrollTo();
break; break;
case 'img': case 'img':
var target = $('#images.mCustomScrollbar'); scrollBlockTo($('#images.mCustomScrollbar'),h);
scrollTo();
break; break;
case 'mp': case 'mp':
var target = $('#streetmap.mCustomScrollbar'); scrollBlockTo($('#streetmap.mCustomScrollbar'), h);
scrollTo();
break; break;
case 'lk': case 'lk':
var target = $('#links.mCustomScrollbar'); scrollBlockTo($('#links.mCustomScrollbar'), h);
scrollTo();
var href = target.find(h_parts[0]);
var text = $('.nodes text.group1');
var text2 = $('.nodes text.group2');
var text3 = $('.nodes text.group3');
console.log('cc');
text.css({ // ICI IL FAUT FAIRE UNE AUTRE FUNCTION COMME CE N4EST PAS UN SCROLL QUI SE PASSE
'font-size':'inherit', // var href = target.find(h_parts[0]);
'fill':'black', // var text = $('.nodes text.group1');
}); // var text2 = $('.nodes text.group2');
text2.css({ // var text3 = $('.nodes text.group3');
'font-size':'inherit', // console.log('cc');
'fill':'grey',
});
text3.css({
'font-size':'inherit',
'fill':'lightgrey',
});
if (href) { // text.css({
href.css({ // 'font-size':'inherit',
'font-size':'1.2rem', // 'fill':'black',
'fill':'blue', // });
}); // text2.css({
} // 'font-size':'inherit',
// 'fill':'grey',
// });
// text3.css({
// 'font-size':'inherit',
// 'fill':'lightgrey',
// });
//
// if (href) {
// href.css({
// 'font-size':'1.2rem',
// 'fill':'blue',
// });
// }
break; break;
// case 'rs': // case 'rs':
// var target = $('#reseaux-sociaux.mCustomScrollbar'); // var target = $('#reseaux-sociaux.mCustomScrollbar');
// scrollTo(); // scrollBlockTo();
// break; // break;
// case '': // case '':
// etc // etc
@@ -479,9 +413,10 @@ function mCustomScrollbar() {
default: default:
} }
} }
});
} }
function clicklinkmap() { function clicklinkmap() {
$("text#lk_martine").on("click", function(){ $("text#lk_martine").on("click", function(){