v.2.25
Small fix
This commit is contained in:
106
forUpdate/toDirectives/angular-drag-resize.js
vendored
106
forUpdate/toDirectives/angular-drag-resize.js
vendored
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user