Small fix
This commit is contained in:
miroman-afk
2022-12-22 12:52:42 +03:00
parent d24bba305f
commit 723e9a8768
15 changed files with 213 additions and 117 deletions

View File

@@ -4,7 +4,7 @@
.provider('adrConfig', function adrConfigProvider() {
//defaults
var defaultConfig = {
iconPosition: [0, 0],
iconPosition: [-1, 10],
mode: 'all',
modes: ['all', 'horizontal', 'vertical']
};
@@ -28,15 +28,18 @@
var doc = {};
var el = {};
//create button for resizing
var btn = document.createElement("span");
btn.style.width = '15px';
btn.style.height = '15px';
btn.innerHTML =
"<i class='fa fa-expand fa-rotate-90'></i>"
;
btn.style.bottom = iconPosition[0] + 6 + 'px';
btn.style.right = iconPosition[1] + 5 + 'px';
btn.style.position = 'absolute';
//var btn = document.createElement("span");
var btn = document.createElement("i");
btn.classList.add('fa');
btn.classList.add('fa-expand');
btn.classList.add('fa-rotate-90');
btn.style.border = '25px solid transparent';
/* btn.innerHTML =
"<i class='fa fa-expand fa-rotate-90' style='width: 25px;height: 25px; bottom: 10%; position: absolute;'></i>"
;*/
btn.style.position = 'fixed';
btn.style.visibility = 'hidden';
if (mode == 'horizontal') {
btn.style.cursor = 'ew-resize';
@@ -50,22 +53,21 @@
switch ($event.which) {
case 1:
$event.stopImmediatePropagation();
/* console.log(element.offsetParent().prevObject[0].parentNode.parentNode.getBoundingClientRect().bottom);
console.log(element[0].parentNode);
console.log(element[0].parentNode.parentNode);
console.log(element[0].parentNode.parentNode.parentNode);*/
doc.left = element[0].parentNode.parentNode.getBoundingClientRect().left;
doc.top = element[0].parentNode.parentNode.getBoundingClientRect().top;
doc.bottom = element[0].parentNode.parentNode.getBoundingClientRect().bottom;
doc.right = element[0].parentNode.parentNode.getBoundingClientRect().right;
el.width = element[0].getBoundingClientRect().width;
el.height = element[0].getBoundingClientRect().height;
console.log('doc.left: ' + doc.left);
console.log('doc.top: ' + doc.top);
console.log('doc.bottom: ' + doc.bottom);
console.log('doc.right: ' + doc.right);
position.x = $event.clientX;
position.y = $event.clientY;
dimension.width = element.prop('offsetWidth');
dimension.height = element.prop('offsetHeight');
console.log('dimension.width: ' + dimension.width);
console.log('dimension.height: ' + dimension.height);
btn.style.visibility = 'hidden';
$document.bind('mousemove', mousemove);
$document.bind('mouseup', mouseup);
return false;
@@ -77,18 +79,24 @@
switch ($event.which) {
case 1:
if ($event.clientX < doc.right && $event.clientY < doc.bottom) {
if ($event.clientX < doc.right) {
var deltaWidth = dimension.width - (position.x - $event.clientX);
var deltaHeight = dimension.height - (position.y - $event.clientY);
} else {
var deltaWidth = el.width;
var deltaHeight = el.height;
if (deltaWidth < 100) {
deltaWidth = 100;
}
}
if ($event.clientY < doc.bottom) {
var deltaHeight = dimension.height - (position.y - $event.clientY);
if (deltaHeight < 100) {
deltaHeight = 100;
}
}
if ($event.clientX > doc.right) {
deltaWidth = element[0].getBoundingClientRect().width;
}
if ($event.clientY > doc.bottom ) {
deltaHeight = element[0].getBoundingClientRect().height;
}
/* console.log('deltaWidth: ' + deltaWidth);
console.log('deltaHeight: ' + deltaHeight);
console.log('position.x: ' + position.x);
console.log('position.y: ' + position.y);*/
var newDimensions = {};
if (mode == 'horizontal') {
newDimensions = {
@@ -105,6 +113,9 @@
};
}
element.css(newDimensions);
element[0].children[0].style.setProperty('width', deltaWidth + 'px');
element[0].children[0].style.setProperty('height', deltaHeight + 'px');
//console.log(element[0].children[0]);
return false;
break;
}
@@ -113,14 +124,20 @@
function mouseup() {
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
btn.style.visibility = 'hidden';
}
element.append(btn);
//show button on hover
element.bind('mouseover', function () {
/*console.log(element[0].children[1].children[0]);*/
btn.style.top = element[0].getBoundingClientRect().top + element[0].getBoundingClientRect().height - 50 + 'px';
btn.style.left = element[0].getBoundingClientRect().left + element[0].getBoundingClientRect().width - 50 + 'px';
btn.style.visibility = 'visible';
});
element.bind('mouseout', function () {
/* console.log(element);*/
btn.style.visibility = 'hidden';
});
}
@@ -160,17 +177,34 @@
var posdy = position.y + dy;
var posdx = position.x + dx;
if (posdy > doc.top && posdx > doc.left && (posdx + element[0].getBoundingClientRect().width) < doc.right && (posdy + element[0].getBoundingClientRect().height) < doc.bottom) {
element.css({
top: posdy + 'px',
left: posdx + 'px'
});
} else {
element.css({
top: position.y + 'px',
left: position.x + 'px'
});
if (posdy > doc.top) {
var top = posdy;
}
if (posdx > doc.left){
var left = posdx;
}
if ((posdx + element[0].getBoundingClientRect().width) < doc.right) {
left = posdx;
}
if ((posdy + element[0].getBoundingClientRect().height) < doc.bottom){
top = posdy;
}
if (posdy < doc.top) {
top = doc.top;
}
if (posdx < doc.left) {
left = doc.left;
}
if ((posdx + element[0].getBoundingClientRect().width) > doc.right) {
left = doc.right - element[0].getBoundingClientRect().width;
}
if ((posdy + element[0].getBoundingClientRect().height) > doc.bottom) {
top = doc.bottom - element[0].getBoundingClientRect().height;
}
element.css({
top: top + 'px',
left: left + 'px'
});
return false;
break;