add 3Djs leaflet paperjs
This commit is contained in:
@@ -0,0 +1,239 @@
|
||||
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,
|
||||
});
|
||||
|
||||
$links.css({
|
||||
"width": xPos,
|
||||
"top": yPos2 + 2,
|
||||
});
|
||||
|
||||
$rs.css({
|
||||
"width": Bw2,
|
||||
});
|
||||
|
||||
$stmp.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,
|
||||
});
|
||||
$stmp.css({
|
||||
"width": xPos3,
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
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);
|
||||
|
||||
L.marker([51.5, -0.09]).addTo(mymap)
|
||||
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
|
||||
|
||||
L.circle([51.508, -0.11], 500, {
|
||||
color: 'red',
|
||||
fillColor: '#f03',
|
||||
fillOpacity: 0.5
|
||||
}).addTo(mymap).bindPopup("I am a circle.");
|
||||
|
||||
L.polygon([
|
||||
[51.509, -0.08],
|
||||
[51.503, -0.06],
|
||||
[51.51, -0.047]
|
||||
]).addTo(mymap).bindPopup("I am a polygon.");
|
||||
|
||||
|
||||
var popup = L.popup();
|
||||
|
||||
function onMapClick(e) {
|
||||
popup
|
||||
.setLatLng(e.latlng)
|
||||
.setContent("You clicked the map at " + e.latlng.toString())
|
||||
.openOn(mymap);
|
||||
}
|
||||
|
||||
mymap.on('click', onMapClick);
|
||||
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
wrap();
|
||||
map();
|
||||
// scrollbar();
|
||||
clickhand();
|
||||
drag();
|
||||
});
|
||||
Reference in New Issue
Block a user