admin-php-module/forUpdate/toDirectives/angular-drag-resize.js

(function () {
    'use strict';
    angular.module('angular.drag.resize', [])
        .provider('adrConfig', function adrConfigProvider() {
            //defaults
            var defaultConfig = {
                iconPosition: [0, 0],
                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");
                    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';
                    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();
                                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);
                                $document.bind('mousemove', mousemove);
                                $document.bind('mouseup', mouseup);
                                return false;
                                break;
                        }
                    };

                    function mousemove($event) {
                        switch ($event.which) {
                            case 1:


                                if ($event.clientX < doc.right && $event.clientY < doc.bottom) {
                                    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;
                                }
/*                                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 = {
                                        width: deltaWidth + 'px'
                                    };
                                } else if (mode == 'vertical') {
                                    newDimensions = {
                                        height: deltaHeight + 'px'
                                    };
                                } else {
                                    newDimensions = {
                                        width: deltaWidth + 'px',
                                        height: deltaHeight + 'px'
                                    };
                                }
                                element.css(newDimensions);
                                return false;
                                break;
                        }
                    }

                    function mouseup() {
                        $document.unbind('mousemove', mousemove);
                        $document.unbind('mouseup', mouseup);
                    }

                    element.append(btn);
                    //show button on hover
                    element.bind('mouseover', function () {
                        btn.style.visibility = 'visible';
                    });
                    element.bind('mouseout', function () {
                        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 && 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'
                                    });
                                }

                                return false;
                                break;
                        }
                    }

                    function mouseup() {
                        $document.unbind('mousemove', mousemove);
                        $document.unbind('mouseup', mouseup);
                    }
                }
            };
        }]);
})();