168 lines
4.3 KiB
JavaScript
168 lines
4.3 KiB
JavaScript
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 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({
|
|
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
|
|
$recits.css({
|
|
"width": xPos,
|
|
"height": yPos - 5,
|
|
});
|
|
$itw.css({
|
|
"width": Bw2,
|
|
"height": yPos - 5,
|
|
});
|
|
$img.css({
|
|
"width": '33%',
|
|
"height": yPos - 5,
|
|
});
|
|
$bottom.css({
|
|
"top": yPos2 + 5,
|
|
})
|
|
$links.css({
|
|
"width": xPos,
|
|
"top": yPos2 + 5,
|
|
})
|
|
$rs.css({
|
|
"width": Bw2,
|
|
});
|
|
$stmp.css({
|
|
"width": '33%',
|
|
});
|
|
}
|
|
});
|
|
|
|
$hand2.draggable({
|
|
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 xPos3 = Dw0 - xPos;
|
|
// var Bw1 = (Dw0 - (Dw2 + Dw3));
|
|
var Bw2 = (Dw0 - (Dw1 + Dw3));
|
|
var Bw3 = (Dw0 - (Dw1 + Dw2));
|
|
var Bl3 = Dw1 + Dw2;
|
|
// app dimension
|
|
$recits.css({
|
|
// "width": xPos,
|
|
"height": yPos - 5,
|
|
});
|
|
$itw.css({
|
|
"width": Bw2,
|
|
"height": yPos - 5,
|
|
});
|
|
$img.css({
|
|
"width": xPos3,
|
|
"height": yPos - 5,
|
|
});
|
|
$bottom.css({
|
|
"top": yPos2 + 5,
|
|
})
|
|
// $links.css({
|
|
// "width": xPos,
|
|
// "top": yPos2 + 5,
|
|
// })
|
|
$rs.css({
|
|
"width": Bw2,
|
|
});
|
|
$stmp.css({
|
|
"width": xPos3,
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
$(document).ready(function() {
|
|
wrap();
|
|
clickhand();
|
|
drag();
|
|
});
|