resize directive

by Ryan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<div class="container" ng-app="app" ng-controller="MainController" >
    <div class="outer1" x-resizable x-h-offset="0" x-w-offset="50" x-w-min="250" x-h-min="500">
            <div class="inner left">Left</div>
            <div class="inner right">Right</div>
    </div>
    <div class="outer2" style="width: 50px; height: 100px;">
            <div class="inner left">Left 2</div>
            <div class="inner right">Right 2</div>
    </div>
</div>

CSS

body { font: 12px sans-serif; color: white; }

div.container { 
    position: absolute; 
    top: 0px; 
    bottom: 0px;
    right: 0px;
    left: 0px;
    background-color: #449; 
}

div.outer1 { 
    float: left;
    background-color: #944; 
}
div.outer2 { 
    float: right;
    background-color: #494; 
}

div.inner { background-color: #888; }
div.left { float: left;}
div.right {float: right;}

JavaScript

var app = angular.module('app', []);

function MainController($scope) {
}

angular.module('app').directive('resizable', function($window) {
	return {
		restrict: 'A',
		scope: {
            hMin: '@',
            wMin: '@',
            hOffset: '@',
            wOffset: '@',
        },
		link: function(scope, element, attrs){
            // Grab the window element
            var window = angular.element($window);
            
            // Resize function that will calculate and apply the resize
            var resize = function(){
                var ho = (attrs.hOffset)? attrs.hOffset : 0;
                var wo = (attrs.wOffset)? attrs.wOffset : 0;
                var hm = (attrs.hMin)? attrs.hMin : 0;
                var wm = (attrs.wMin)? attrs.wMin : 0;

                var parent = element.parent();
                
                // Calculate the new height and width
                var height = parent.height() - ho;
                var width = parent.width() - wo;

                // Clamp the height and width to the minimum values
                width = Math.max(width, wm);
                height = Math.max(height, hm);

                //apply the resize
                if(attrs.wOffset !== undefined){
                    element.css("width", width + "px");
                }
                if(attrs.hOffset !== undefined){
                    element.css("height", height + "px");
                }
            };

            // Bind the resize event on the window to the resize function
            window.bind('resize', resize);
            
            resize();
		}
	}
});