221 lines
11 KiB
JavaScript
221 lines
11 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
angular.module('angular.drag.resize', [])
|
|
.provider('adrConfig', function adrConfigProvider() {
|
|
//defaults
|
|
var defaultConfig = {
|
|
iconPosition: [-1, 10],
|
|
mode: 'all',
|
|
modes: ['all', 'horizontal', 'vertical']
|
|
};
|
|
var config = angular.extend({}, defaultConfig);
|
|
this.$get = [function () {
|
|
return {
|
|
iconPosition: config.iconPosition,
|
|
mode: config.mode,
|
|
modes: config.modes
|
|
};
|
|
}];
|
|
})
|
|
.directive('resize', ['adrConfig', '$document', function (adrConfig, $document) {
|
|
return {
|
|
restrict: 'A',
|
|
link: function (scope, element, attr) {
|
|
var dimension = {};
|
|
var iconPosition = adrConfig.iconPosition;
|
|
var mode = attr.resize && adrConfig.modes.indexOf(attr.resize) > -1 ? attr.resize : adrConfig.mode;
|
|
var position = {};
|
|
var doc = {};
|
|
var el = {};
|
|
//create button for resizing
|
|
//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';
|
|
} else if (mode == 'vertical') {
|
|
btn.style.cursor = 'ns-resize';
|
|
} else {
|
|
btn.style.cursor = 'nwse-resize';
|
|
}
|
|
//bind resize function to button;
|
|
btn.onmousedown = function ($event) {
|
|
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;
|
|
position.x = $event.clientX;
|
|
position.y = $event.clientY;
|
|
dimension.width = element.prop('offsetWidth');
|
|
dimension.height = element.prop('offsetHeight');
|
|
btn.style.visibility = 'hidden';
|
|
$document.bind('mousemove', mousemove);
|
|
$document.bind('mouseup', mouseup);
|
|
return false;
|
|
break;
|
|
}
|
|
};
|
|
|
|
function mousemove($event) {
|
|
switch ($event.which) {
|
|
case 1:
|
|
|
|
if ($event.clientX < doc.right) {
|
|
var deltaWidth = dimension.width - (position.x - $event.clientX);
|
|
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;
|
|
}
|
|
var newDimensions = {};
|
|
if (mode == 'horizontal') {
|
|
newDimensions = {
|
|
width: deltaWidth + 'px'
|
|
};
|
|
} else if (mode == 'vertical') {
|
|
newDimensions = {
|
|
height: deltaHeight + 'px'
|
|
};
|
|
} else {
|
|
newDimensions = {
|
|
width: deltaWidth + 'px',
|
|
height: deltaHeight + 'px'
|
|
};
|
|
}
|
|
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;
|
|
}
|
|
}
|
|
|
|
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';
|
|
});
|
|
}
|
|
};
|
|
}])
|
|
.directive('draggable', ['$document', function ($document) {
|
|
return {
|
|
restrict: 'A',
|
|
link: function (scope, element) {
|
|
var position = {};
|
|
var doc = {};
|
|
|
|
element.bind('mousedown', function ($event) {
|
|
switch ($event.which) {
|
|
case 1:
|
|
element.css({position: 'fixed'});
|
|
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;
|
|
position.x = element[0].getBoundingClientRect().left;
|
|
position.y = element[0].getBoundingClientRect().top;
|
|
position.initialMouseX = $event.clientX;
|
|
position.initialMouseY = $event.clientY;
|
|
$document.bind('mousemove', mousemove);
|
|
$document.bind('mouseup', mouseup);
|
|
return false;
|
|
break;
|
|
}
|
|
});
|
|
|
|
function mousemove($event) {
|
|
switch ($event.which) {
|
|
case 1:
|
|
var dx = $event.clientX - position.initialMouseX;
|
|
var dy = $event.clientY - position.initialMouseY;
|
|
var posdy = position.y + dy;
|
|
var posdx = position.x + dx;
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
function mouseup() {
|
|
$document.unbind('mousemove', mousemove);
|
|
$document.unbind('mouseup', mouseup);
|
|
}
|
|
}
|
|
};
|
|
}]);
|
|
})(); |