angular-autolayout

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


function AutoLayoutManagerController() {
	this.layouts = [];
	this.fluentBuilder = new AutoLayoutBuilder();
}

AutoLayoutManagerController.prototype = {
	register: function (layout) {
		this.layouts.push(layout);
	},
	builder: function () {
		console.log('builder', this.layouts);
	  return this.fluentBuilder;
	},
	redraw: function () {
		console.log('redraw', this.layouts);
	}
};



function AutoLayoutBuilder() {
	this.constraints = [];
}

AutoLayoutBuilder.prototype = {
	addRule: function (expressionFn) {
	  var rule = new RuleBuilder();
	  expressionFn(rule);
	  this.constraints.push(rule);
		console.log('rule added: ', rule.toString());
	}
};

function RuleBuilder() {
}



app.controller('IndexPageController', ['$scope', '$timeout', function (scope,
    $timeout) {

		var me = this;
		scope.$watch(function() { return me.autoLayoutManager1; },
		  function(newValue) {
  			if (newValue != null) {
  				// initialize constraints
  				me.autoLayoutManager1.builder()
  					.addRule(function(ruleBuilder) {
  						// ruleBuilder.
  					});
  			}
  		});

    $timeout(function(){
      if(me.autoLayoutManager2){
        me.autoLayoutManager2.redraw();
      }
    }, 5000);

	}])
	.directive('autoLayoutManager', ['$parse', function ($parse) {
		return {
			restrict: 'A',
			require: ['autoLayoutManager'],
			controller: [AutoLayoutManagerController],
			scope: true,
			link: function (scope, element, attr, ctrls) {
				var manager = ctrls[0];
				attr.$observe('autoLayoutManager', function () {
					$parse(attr.autoLayoutManager)
						.assign(scope.$parent, manager);
				});
			}
		};
	}])
	.directive('autoLayout', [function () {
		return {
			restrict: 'A',
			require: ['autoLayout', '^autoLayoutManager'],
			controller: [function () {
				var me = this;
			}],
			controllerAs: 'ctrl',
			scope: {
				name: '@'
			},
			bindToController: true,
			link: function (scope, element, attr, ctrls) {
				var layout = ctrls[0];
				var manager = ctrls[1];

				manager.register(layout);
			}
		};
	}]);

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js" data-require="angular.js@1.3.x"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="IndexPageController as ctrl">
  	<div auto-layout-manager="ctrl.autoLayoutManager1">
  		<div auto-layout name="top" style="background-color:aqua"> top </div>
  		<div auto-layout name="left" style="background-color:chartreuse"> left </div>
  		<div auto-layout name="center" style="background-color:cornflowerblue"> center </div>
  		<div auto-layout name="footer" style="background-color:darksalmon"> footer </div>
  	</div>
  	
  	<div auto-layout-manager="ctrl.autoLayoutManager2">
  		<div auto-layout name="top2" style="background-color:aqua"> top </div>
  		<div auto-layout name="left2" style="background-color:chartreuse"> left </div>
  		<div auto-layout name="center2" style="background-color:cornflowerblue"> center </div>
  		<div auto-layout name="footer2" style="background-color:darksalmon"> footer </div>
  	</div>
  </body>
</html>

/* Put your css in here */