LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

    
        Standard/
        Flexbox
            
    

angularResizableEnd exports:

ID: {{ size.id }}

Width:

Height:

events:

  • {{ event.name }}

{{ msg }}

Testing out events on angular-resizable.

{{ msg }}

Testing out events on angular-resizable.

CSS
body {
  color: #343e3d;
  font-family: 'Varela Round', 'Helvetica', sans-serif;
  background: url(https://subtlepatterns.com/images/transp_bg.png);
  overflow: hidden;
}

a {
  color: #19b785;
}
a:hover {
  color: #343e3d;
}

.subtle {
  color: #ccc;
}

.container1, .container2 {
  transition: all .3s ease-in-out;
  width: 100%;
  height: 100%;
  position: absolute;
}

.container1 {
  left: -100%;
}
.container1.active {
  left: 0;
}
.container1 .resizable {
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 15%;
}

.container2 {
  display: flex;
  align-items: center;
  justify-content: center;
  left: 100%;
}
.container2.active {
  left: 0;
}
.container2 .resizable {
  position: relative;
  margin-top: -10%;
}

.resizable {
  text-align: center;
  box-sizing: border-box;
  width: 300px;
  height: 250px;
  background-color: #38e4ae;
  border-radius: 10px;
}

.inner {
  box-sizing: border-box;
  overflow: hidden;
  padding: 1em;
  height: 100%;
  width: 100%;
}

.toggle {
  position: absolute;
  z-index: 1;
  top: 1em;
  right: 1em;
  color: #aaa;
  text-decoration: none;
}
.toggle:hover {
  color: #aaa;
}
.toggle .active {
  color: #19b785;
}

.info1 {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  padding: 1em 2em;
}

.info2 {
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0;
  padding: 1em 2em;
}
.info2 ul {
  height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.resizable {
  position: absolute;
}
.resizable.no-transition {
  transition: none !important;
  background-color: #7bd389;
}

.rg-right, .rg-left, .rg-top, .rg-bottom {
  display: block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  position: absolute;
  z-index: 1;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  background: transparent;
}
.rg-right span, .rg-left span, .rg-top span, .rg-bottom span {
  position: absolute;
  box-sizing: border-box;
  display: block;
  border: 1px solid #ccc;
}

.rg-right span, .rg-left span {
  border-width: 0 1px;
  top: 50%;
  margin-top: -10px;
  margin: -10px 0 0 3.5px;
  height: 20px;
  width: 7px;
}

.rg-top span, .rg-bottom span {
  border-width: 1px 0;
  left: 50%;
  margin: 3.5px 0 0 -10px;
  width: 20px;
  height: 7px;
}

.rg-top {
  cursor: row-resize;
  width: 100%;
  top: 0;
  left: 0;
  margin-top: -14px;
}

.rg-right {
  cursor: col-resize;
  height: 100%;
  right: 0;
  top: 0;
  margin-right: -14px;
}

.rg-bottom {
  cursor: row-resize;
  width: 100%;
  bottom: 0;
  left: 0;
  margin-bottom: -14px;
}

.rg-left {
  cursor: col-resize;
  height: 100%;
  left: 0;
  top: 0;
  margin-left: -14px;
}
JS
angular.module('angularResizable', [])
	.controller('TestController', function($scope) {
    
    	$scope.dynamicSize = {
            'width' : 350,
            'height' : 250
        }
    	
    	$scope.flexbox = true;
    	$scope.size = {};
        $scope.msg = 'Resize me.';
    
    	$scope.events = [];
    	$scope.$on("angular-resizable.resizeEnd", function (event, args) {
			$scope.msg = 'Resize me again.';
			$scope.events.unshift(event);
			$scope.size = args;
			if(args.width)
				$scope.dynamicSize.width = args.width;
			if(args.height)
				$scope.dynamicSize.height = args.height;
        });
    	$scope.$on("angular-resizable.resizeStart", function (event, args) {
			$scope.msg = 'Woooohoooo!';
			$scope.events.unshift(event);
        });
	})
    .directive('resizable', function() {
        return {
            restrict: 'AE',
            scope: {
                rDirections: "=",
                rCenteredX: "=",
                rCenteredY: "=",
                rWidth: "=",
                rHeight: "=",
                rFlex: "="
            },
            link: function(scope, element, attr) {
                
                // register watchers on width and height attributes if they are set
                scope.$watch('rWidth', function(value){
                    element[0].style.width = scope.rWidth + 'px';
                });
                scope.$watch('rHeight', function(value){
                    element[0].style.height = scope.rHeight + 'px';
                });

                element.addClass('resizable');

                var style = window.getComputedStyle(element[0], null),
                    w,
                    h,
                    dir = scope.rDirections,
                    vx = scope.rCenteredX ? 2 : 1, // if centered double velocity
                    vy = scope.rCenteredY ? 2 : 1, // if centered double velocity
                    start,
                    dragDir,
                    axis,
                    info = {};
				
				var updateInfo = function() {
					info.width = false; info.height = false;
                    if(axis == 'x')
                    	info.width = scope.rFlex ? parseInt(element[0].style.flexBasis) : parseInt(element[0].style.width);
                    else
                    	info.height = scope.rFlex ? parseInt(element[0].style.flexBasis) : parseInt(element[0].style.height);
                    info.id = element[0].id;
				}

                var dragging = function(e) {
                    var offset = axis == 'x' ? start - e.clientX : start - e.clientY;
                    switch(dragDir) {
                        case 'top':
                            if(scope.rFlex) { element[0].style.flexBasis = h + (offset * vy) + 'px'; }
                            else {            element[0].style.height = h + (offset * vy) + 'px'; }          
                            break;
                        case 'right':
                            if(scope.rFlex) { element[0].style.flexBasis = w - (offset * vx) + 'px'; }
                            else {            element[0].style.width = w - (offset * vx) + 'px'; }
                            break;
                        case 'bottom':
                            if(scope.rFlex) { element[0].style.flexBasis = h - (offset * vy) + 'px'; }
                            else {            element[0].style.height = h - (offset * vy) + 'px'; }
                            break;
                        case 'left':
                            if(scope.rFlex) { element[0].style.flexBasis = w + (offset * vx) + 'px'; }
                            else {            element[0].style.width = w + (offset * vx) + 'px'; }
                            break;
                    }
                };
                var dragEnd = function(e) {
                    updateInfo();
                    scope.$emit("angular-resizable.resizeEnd", info);
					scope.$apply();
                    document.removeEventListener('mouseup', dragEnd, false);
                    document.removeEventListener('mousemove', dragging, false);
                    element.removeClass('no-transition');
                }
                var dragStart = function(e, direction) {
                    dragDir = direction;
                    axis = dragDir == 'left' || dragDir == 'right' ? 'x' : 'y';
                    start = axis == 'x' ? e.clientX : e.clientY;
                    w = parseInt(style.getPropertyValue("width"));
                    h = parseInt(style.getPropertyValue("height"));
                    
                    //prevent transition while dragging
                    element.addClass('no-transition');

                    document.addEventListener('mouseup', dragEnd, false);
                    document.addEventListener('mousemove', dragging, false);
                    
                    // Disable highlighting while dragging
                    if(e.stopPropagation) e.stopPropagation();
                    if(e.preventDefault) e.preventDefault();
                    e.cancelBubble = true;
                    e.returnValue = false;
					
                    updateInfo();
                    scope.$emit("angular-resizable.resizeStart", info);
					scope.$apply();
                };

                for(var i=0;i
Host Instantly Drag and Drop Website Builder

 

Description

Working on issue #4 of angular-resizable directive which entails start and end events and width/height binding.
Term
Mon, 11/27/2017 - 21:56

Related Codes

Pen ID
Pen ID
Pen ID