resize

by Ryan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<div ng-app="app" ng-controller="MainController">
    <div class="resizable" 
         x-resizable
         x-width-offset="200" x-height-offset="250"
         x-min-width="{{minWidth}}" x-min-height="100">
             Content
    </div>
</div>

CSS

div.resizable { border:1px solid red; }

JavaScript

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

function MainController($scope) {
    $scope.minWidth = 200;
}

angular.module('app').directive('resizable', function($window) {
	return {
		restrict: 'A',
		scope: {
            minWidth: '@',
            minHeight: '@',
            widthOffset: '@',
            heightOffset: '@'
		},
		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(){
                // Calculate the new height and width
                var height = $window.innerHeight - ((scope.heightOffset !== undefined)? scope.heightOffset : 0);
                var width = $window.innerWidth - ((scope.widthOffset !== undefined)? scope.widthOffset : 0);

                // Clamp the height and width to the minimum values
                if(scope.minWidth !== undefined){
                    width = Math.max(scope.minWidth, width);
                }
                if(scope.minHeight !== undefined){
                    height = Math.max(scope.minHeight, height);
                }

                //apply the resize
                $(element[0]).css("width", width + "px");
                $(element[0]).css("height", height + "px");
            };

            // Bind the resize event on the window to the resize function
            window.bind('resize', resize);
            
            // If the attribute values are missing or interpolated, observe them so we can pick up changes
            if(attrs.minWidth === undefined){
                attrs.$observe('minWidth', function(val) {
                    resize();
                });
            }
            if(attrs.minHeight === undefined){
                attrs.$observe('minHeight', function(val) {
                    resize();
                });
            }
            if(attrs.widthOffset === undefined){
               ...