123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233 |
- function wrap(){
- $('#start > div:nth-child(-n+3)').wrapAll('<div class="top"></div> ')
- $('#start > div:nth-child(n+2)').wrapAll('<div class="bottom"></div> ')
- };
- function scrollbar(){
- $(window).on("load",function(){
- $("#start > div > div").mCustomScrollbar({
- axis:"y",
- setTop: 0,
- });
- });
- }
- function clickhand(){
- $(".handler").on("mousedown", function (e) {
- e.preventDefault();
- $(this).addClass("mouseDown");
- }).on("mouseup", function () {
- $(this).removeClass("mouseDown");
- });
- };
- function drag() {
- var $hand1 = $( ".hand1" );
- var $hand2 = $( ".hand2" );
- $hand1.draggable({
- containment: "#start",
- scroll: false,
- // grid: [ 5, 5 ],
- drag: function(){
- // handler
- // dimension handler
- var $Hhand = $(this).outerHeight();
- var $Whand = $(this).outerWidth();
- // ajust handler
- var ajustH = $Hhand / 2;
- var ajustW = $Whand / 2;
- // position handler
- var offset = $(this).offset();
- var xPos = offset.left + ajustW;
- var yPos = offset.top - ajustH;
- var xPos2 = xPos + (ajustW * 2);
- var yPos2 = yPos + (ajustH * 2);
- // Blocs
- // top
- var $recits = $(this).parent('#page').find('#recits');
- var $itw = $(this).parent('#page').find("#interviews");
- var $img = $(this).parent('#page').find("#images");
- // bottom
- var $bottom = $(this).parent('#page').find(".bottom");
- var $links = $(this).parent('#page').find("#links");
- var $rs = $(this).parent('#page').find("#reseaux-sociaux");
- var $stmp = $(this).parent('#page').find("#streetmap");
- // dimension blocs
- var Dw0 = $(window).outerWidth(true);
- var Dw1 = $recits.outerWidth(true);
- var Dw2 = $itw.outerWidth(true);
- var Dw3 = $img.outerWidth(true);
- // var Bw1 = (Dw0 - (Dw2 + Dw3));
- var Bw2 = (Dw0 - (Dw1 + Dw3));
- var Bw3 = (Dw0 - (Dw1 + Dw2));
- var Bl3 = Dw1 + Dw2;
- // app dimension
- var $handler2 = $(this).parent().find('.hand2');
- $handler2.css({
- "top": yPos + 25,
- "left": xPos + Bw2 - 25,
- });
- $recits.css({
- "width": xPos,
- "height": yPos - 2,
- });
- $itw.css({
- "width": Bw2,
- "height": yPos - 2,
- });
- $img.css({
- "width": Dw3,
- "height": yPos - 2,
- });
- $bottom.css({
- "top": yPos2 + 2,
- });
- $stmp.css({
- "width": xPos,
- "top": yPos2 + 2,
- });
- $rs.css({
- "width": Bw2,
- });
- $links.css({
- "width": Dw3,
- });
- }
- });
- $hand2.draggable({
- containment: "#start",
- scroll: false,
- drag: function(){
- // handler
- // dimension handler
- var $Hhand = $(this).outerHeight(true);
- var $Whand = $(this).outerWidth(true);
- // ajust handler
- var ajustH = $Hhand / 2;
- var ajustW = $Whand / 2;
- // position handler
- var offset = $(this).offset();
- var xPos = offset.left + ajustW;
- var yPos = offset.top - ajustH;
- var xPos2 = xPos + (ajustW * 2);
- var yPos2 = yPos + (ajustH * 2);
- // Blocs
- // top
- var $recits = $(this).parent('#page').find('#recits');
- var $itw = $(this).parent('#page').find("#interviews");
- var $img = $(this).parent('#page').find("#images");
- // bottom
- var $bottom = $(this).parent('#page').find(".bottom");
- var $links = $(this).parent('#page').find("#links");
- var $rs = $(this).parent('#page').find("#reseaux-sociaux");
- var $stmp = $(this).parent('#page').find("#streetmap");
- // dimension blocs
- var Dw0 = $(window).outerWidth(true);
- var Dw1 = $recits.outerWidth(true);
- var Dw2 = $itw.outerWidth(true);
- var Dw3 = $img.outerWidth(true);
- var xPos3 = Dw0 - xPos;
- // var Bw1 = (Dw0 - (Dw2 + Dw3));
- var Bw2 = (Dw0 - (Dw1 + Dw3));
- var Bw3 = (Dw0 - (Dw1 + Dw2));
- var Bl3 = Dw1 + Dw2;
- // app dimension
- var $handler1 = $(this).parent().find('.hand1');
- $handler1.css({
- "top": yPos + 25,
- "left": xPos - Bw2 - 25,
- });
- $recits.css({
- // "width": xPos,
- "height": yPos - 2,
- });
- $itw.css({
- "width": Bw2,
- "height": yPos - 2,
- });
- $img.css({
- "width": xPos3,
- "height": yPos - 2,
- });
- $bottom.css({
- "top": yPos2 + 2,
- });
- $rs.css({
- "width": Bw2,
- });
- $links.css({
- "width": xPos3,
- });
- }
- });
- };
- function dragcanvas() {
- var $links = $('#links canvas');
- var $reseau = $('#reseaux-sociaux svg')
- $links.draggable({
- // containment:".bottom",
- scroll: false
- });
- $reseau.draggable({
- // containment:".bottom",
- scroll: false
- });
- }
- function map() {
- var mymap = L.map('mapid').setView([51.505, -0.09], 13);
- L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
- maxZoom: 18,
- attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
- '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
- 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
- id: 'mapbox.streets'
- }).addTo(mymap);
- }
- $(document).ready(function() {
- wrap();
- map();
- dragcanvas();
- clickhand();
- drag();
- // scrollbar();
- });
|