You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

83 lines
2.5 KiB
JavaScript

class DragResizeClose {
constructor() {
this.drag();
this.setDraggables();
this.setZindex();
this.handleCursor();
this.closeBtn();
}
drag() {
$('.draggable').draggable({ containment: "window" });
}
setDraggables() {
const w = window.innerWidth;
const h = window.innerHeight;
const randomCorrectedWidth = (sizeWindow, sizeBox) => {
const corrected = sizeWindow - parseInt(sizeBox);
return Math.floor(Math.random() * corrected)
}
const randomCorrectedHeight = (sizeWindow, sizeBox) => {
const corrected = sizeWindow - parseInt(sizeBox);
return getRndInteger(105, corrected-150)
}
const getRndInteger = (min, max) => Math.floor(Math.random() * (max - min + 1) ) + min;
$( ".draggable" ).each(function() {
const rw = getRndInteger(w/2-500, w/2)
//setDimension
$(this).css("width",rw);
$(this).css("height", 'auto');
//setPosition
if (this.id != 'program'){
const wBox = $(this).css('width');
const hBox = $(this).css('height');
const rX = randomCorrectedHeight(h, hBox);
const rY = randomCorrectedWidth(w, wBox);
$(this).css("top", rX);
$(this).css("left", rY);
} else {
$(this).css("top", '20px');
$(this).css("right", '20px');
}
});
}
setZindex() {
$('#dragZone div').mousedown(function() { // Setup z-index handler
$(this).addClass('top').removeClass('bottom');
$(this).siblings().removeClass('top').addClass('bottom');
$(this).css("z-index", zIndex++);
return zIndex++
});
}
handleCursor() {
$('.draggable')
.on("mousedown", () => $('.draggable').css('cursor', 'grabbing'))
.on("mouseup mouseleave", () => $('.draggable').css('cursor', 'grab'));
}
resize() {
$(".resizable").resizable({ aspectRatio: true, maxHeight: 900, minHeight: 10 });
$(".resizableOriz").resizable({ aspectRatio: true, maxHeight: 500, minHeight: 10 });
}
closeBtn() {
$(".closable").click(function() {
$(this).parent().fadeOut();
})
.hover(
function() { $( this ).addClass( "hover" ); },
function() { $( this ).removeClass( "hover");}
);
}
}