123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450 |
- // addClass
- function Cmaplink() {
- }
- // Streetmap
- function map() {
- var mymap = L.map('mapid').setView([48.9367935,2.3569287], 17);
- setTimeout(mymap.invalidateSize.bind(map));
- L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
- maxZoom: 18,
- id: 'mapbox.streets'
- }).addTo(mymap);
- var LeafIcon = L.Icon.extend({
- options: {
- iconSize: [15, 49],
- iconAnchor: [7.5, 5],
- }
- });
- var markers = {};
- var greenIcon = new LeafIcon({iconUrl: 'user/themes/r2c/images/pointeur2.svg'})
- for (var i = 0; i < dyn_data.mappoints.length; i++) {
- var id = dyn_data.mappoints[i].id;
- markers[id] = L.marker([dyn_data.mappoints[i].lat, dyn_data.mappoints[i].long], {icon: greenIcon}).bindPopup(dyn_data.mappoints[i].title).addTo(mymap);
- // console.log("dyn_datad2", dyn_data.mappoints[i].title);
- markers[id]._icon.id = id;
- }
- var mappoints = $('#streetmap img');
- for (var i = 0; i < dyn_data.mappoints.length; i++) {
- var target = dyn_data.mappoints[i].target;
- console.log('target',target);
- mappoints.attr('href', target );
- }
- };
- // change mouse_event
- function clickhand(){
- $(".handler").on("mousedown", function (e) {
- e.preventDefault();
- $(this).addClass("mouseDown");
- }).on("mouseup", function () {
- $(this).removeClass("mouseDown");
- });
- };
- function drag() {
- var $hand = $( ".handler" );
- var $hand1 = $( ".hand1" );
- var $hand2 = $( ".hand2" );
- var p = 100;
- //marge
- var mrg = 1;
- // Blocs
- // find
- var $recits = $hand.parents('#page').find('#recits');
- var $itw = $hand.parents('#page').find("#interviews");
- var $img = $hand.parents('#page').find("#images");
- var $stmp = $hand.parents('#page').find("#streetmap");
- var $rs = $hand.parents('#page').find("#reseaux-sociaux");
- var $links = $hand.parents('#page').find("#links");
- // handler
- // dimension
- var $Whand = parseFloat($hand.outerWidth(true));
- var $Hhand = parseFloat($hand.outerHeight(true));
- $hand1.draggable({
- containment: "#start",
- scroll: false,
- drag: function(event, ui){
- var oW = parseFloat($("#start").outerWidth(true));
- var oH = parseFloat($("#start").outerHeight(true));
- var ajustH = (100 * ( 25/ oH )) + "%";
- var stophand = (0.8 * oW) - 130;
- ui.position.left = Math.max( 200, ui.position.left );
- ui.position.left = Math.min( stophand, ui.position.left );
- // handler
- // position
- var pos = $hand1.position();
- var pos1 = $hand2.position();
- var pos11 = parseFloat(pos1.left) + 25;
- // center handler
- var ajustW = $Whand / 2;
- var ajustH = $Hhand / 2;
- // position XY
- var xPos = ( p * parseFloat( ((ui.position.left)) / oW) ) + "%" ;
- var yPos = ( p * parseFloat( ((ui.position.top)) / oH ) ) + "%" ;
- var xPos2 = ( p * parseFloat( ((ui.position.left ) ) / oW) ) + "%";
- var yPos2 = ( p * parseFloat( ((ui.position.top ) ) / oH) ) + "%" ;
- var xPos3 = ( p * parseFloat( (pos1.left + ajustW) / oW) ) + "%";
- var yPos3 = ( p * parseFloat( (ui.position.top ) / oH) ) + "%" ;
- //handler2
- var $handler2 = $(this).parent().find('.hand2');
- var PosHand = ( parseFloat(p * parseFloat((pos11 - 25) / oW)) - parseFloat(p * parseFloat( (ui.position.left) / oW)) ) + "%";
- // application dimension
- $hand2.css({
- 'top': yPos3,
- })
- $recits.css({
- "width": xPos,
- "height": yPos,
- "left": "-2px",
- })
- $itw.css({
- "left":xPos2,
- "width": PosHand,
- "height": yPos,
- "min-width": "200px"
- })
- $img.css({
- "height": yPos,
- "min-width": "200px",
- })
- $stmp.css({
- "width":xPos,
- "top": yPos2,
- "bottom":"1px",
- "height": 'auto',
- })
- $links.css({
- "top": yPos2,
- "left":xPos2,
- "width":PosHand,
- "bottom":"1px",
- "height": 'auto',
- })
- $rs.css({
- "top": yPos2,
- "bottom":0,
- "height": 'auto',
- })
- // if itw < 200
- var testPourcent = parseFloat( p * parseFloat(ui.position.left + 238) / oW ) + "%";
- var img200 = parseFloat( p * parseFloat( (oW - (pos11 - 25 )) / oW) ) + "%" ;
- if ( $itw.width() < 200) {
- $img.css({
- "width": img200,
- })
- $rs.css({
- "width": img200,
- })
- $hand2.css({
- 'left':testPourcent,
- })
- } else {}
- },
- stop: function( event, ui ) {
- var parent = $(this).parents('#start');
- $(this).css({
- left:parseInt($(this).css('left'))/parent.width()*100+"%",
- top: parseInt($(this).css('top'))/parent.height()*100+"%",
- });
- },
- });
- $hand2.draggable({
- containment: "#start",
- scroll: false,
- drag: function(event, ui){
- var oW = parseFloat($("#start").outerWidth(true));
- var oH = parseFloat($("#start").outerHeight(true));
- var stophand = (oW - 200) - 50;
- console.log(stophand)
- ui.position.left = Math.max( 400, ui.position.left );
- ui.position.left = Math.min( stophand, ui.position.left );
- // handler
- // position
- var pos = $hand1.position();
- var pos1 = $hand2.position();
- var pos11 = parseFloat(pos.left) + 25;
- // center
- var ajustW = $Whand / 2 - 1;
- var ajustH = $Hhand / 2 + 1;
- var ajustW200 = $Whand / 2 + 6;
- var ajustW2 = $Whand / 2 + 1;
- var ajustH2 = $Hhand / 2 + 1;
- var ajustW3 = $Whand / 2 + 3;
- var ajustH3 = $Hhand / 2 + 1;
- // position XY
- var xPos = ( p * parseFloat( ( oW - (ui.position.left) ) / oW) + "%" );
- var yPos = ( p * parseFloat( (ui.position.top ) / oH ) ) + "%" ;
- var xPos2 = ( p * parseFloat( ( oW - (ui.position.left) ) / oW ) ) + "%";
- var yPos2 = ( p * parseFloat( (ui.position.top ) / oH ) ) + "%" ;
- // var xPos3 = ( p * parseFloat( (oW - (pos.left)) / oW ) ) + "%";
- var xPos3 = ( p * parseFloat( (pos1.left + ajustW) / oW) ) + "%";
- var yPos3 = ( p * parseFloat( (ui.position.top ) / oH ) ) + "%" ;
- //handler2
- var $handler2 = $(this).parent().find('.hand2');
- var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%";
- var PosHand1 = ( parseFloat(p * parseFloat( (ui.position.left) / oW)) - parseFloat(p * parseFloat((pos11 - 25) / oW))) + "%";
- // application dimension
- $hand1.css({
- 'top': yPos3,
- })
- $recits.css({
- "height": yPos,
- })
- $itw.css({
- "width": PosHand1,
- "height": yPos,
- })
- $img.css({
- "width": xPos,
- "height": yPos,
- })
- $stmp.css({
- "top": yPos2,
- "bottom":"1px",
- "height": 'auto',
- })
- $rs.css({
- "width":xPos,
- "top": yPos2,
- "bottom":0,
- "height": 'auto',
- })
- $links.css({
- "top": yPos2,
- "width":PosHand1,
- "bottom":"1px",
- "height": 'auto',
- })
- // if itw < 200
- var test = ui.position.left - 225;
- var testPourcent = ( p * parseFloat(test) / oW ) + "%";
- var img200 = ( p * parseFloat( ((pos.left) ) / oW) + "%" );
- if ( $itw.width() < 200) {
- $recits.css({
- "width": img200,
- })
- $stmp.css({
- "width": img200,
- })
- $itw.css({
- "left": img200,
- })
- $links.css({
- "left": img200,
- })
- $hand1.css({
- 'left':test,
- })
- }else {}
- },
- stop: function( event, ui ) {
- var parent = $(this).parents("#start");
- $(this).css({
- left:parseInt($(this).css('left'))/parent.width()*100+"%",
- top: parseInt($(this).css('top'))/parent.height()*100+"%",
- });
- },
- });
- };
- // draggable
- function dragcanvas() {
- var $reseau = $('#reseaux-sociaux canvas');
- var $links = $('#links svg')
- $links.draggable({
- scroll: false
- });
- $reseau.draggable({
- scroll: false
- });
- }
- // hidden scroll + synchro
- function mCustomScrollbar() {
- $('.blocs').mCustomScrollbar({
- mouseWheel:{
- deltaFactor: 5
- },
- scrollInertia: 1000,
- });
- $(document).on("click","a[href^='#'],#links .nodes text[href^='#'],#streetmap img[href^='#']",function(e){
- e.preventDefault();
- var hrefs = $(this).attr("href").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:
- }
- }
- });
- }
- function clicklinkmap() {
- $("text#lk_martine").on("click", function(){
- // var href = target.find(h_parts[0]);
- // var text = $('.nodes text.group1');
- // var text2 = $('.nodes text.group2');
- // var text3 = $('.nodes text.group3');
- // 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',
- // });
- // }
- // $("svg .nodes text").css({
- // 'font-size':'1.2rem',
- // 'z-index': '999',
- // 'fill':'blue',
- // })
- });
- }
- function paperjs() {
- window.onload = function() {
- // Get a reference to the canvas object
- var canvas = document.getElementById('canvas');
- // Create an empty project and a view for the canvas:
- paper.setup(canvas);
- // Create a Paper.js Path to draw a line into it:
- for (var a = 0; a < dyn_data.reseauxsociaux.length; a++) {
- var path = new paper.Path();
- // Give the stroke a color
- path.strokeColor = 'black';
- path.fillColor = 'grey';
- path.fullySelected = true;
- var x = Math.floor((Math.random() * (100 + 200)));
- var y= Math.floor((Math.random() * (100 + 500)));
- var start = new paper.Point(x, y);
- // Move to start and draw a line from there
- path.moveTo(start);
- for (var b = 0; b < 2; b++) {
- // origine
- var x1 = Math.floor((Math.random() * (200 + 300)));
- var y1= Math.floor((Math.random() * (200 + 300)) );
- path.lineTo(start.add([ x1, y1 ]));
- path.smooth();
- path.closed = true;
- }
- // Draw the view now:
- paper.view.draw();
- }
- // var pulse = 0.7;
- // var sinus = Math.sin(event.time * pulse + i);
- // var cos = Math.cos(event.time * pulse + i);
- // var destination = paper.Point.random(x, y) * paper.view.size;
- }
- }
- $(document).ready(function() {
- clicklinkmap();
- mCustomScrollbar();
- clickhand();
- drag();
- dragcanvas();
- map();
- clicklinkmap();
- paperjs();
- // D3js();
- });
|