Getting started

Flexy Layout is a new module for Angular to help you to set up dynamic layout. It is made from standard blocks and splitter blocks. To get started, include the module file flexy-layout.min.js into your application and add a reference to flexy-layout module in you application module

It is strongly recommended to add the css file as a minimum set of rules to make it works. It is also recommended to set the container length properties. Otherwise the flexy layout directive will not know what space is available

<flexy-layout>
    <block-container init="300">content block 1</block-container>
    <block-container>content block 2</block-container>
    <block-container>content block 3</block-container>
</flexy-layout>

Add this markup to define your standard blocks. the content of a block container is transcluded so that its scope is shared with the outside world. You can set the attribute init to initialize the length of the block (value in px). The blcok will returns to this value every time its container size changes. Otherwise all the blocks will occupy the container element evenly

Standard Block

The standard block

<block-container></block-container>

can change its length. Any change in its length will make other standards blocks to adapt their length evenly inside the flexy layout. However you can lock a standard block; this will prevent the block to perform any change in the block length even if the others blocks trigger some length changes.

The module controller provides an API so you can perform operations on standard blocks. Any directive inside a flexy-layout can request a reference to the controller as usually done with angular

app.directive('myDirective',function(){
return {
    require:'^flexyLayout',
    link:function(scope,element,attrs,ctr){
        //use ctrl to call controller API
    }
};})

The available methods are the following

moveBlockLength(block,length): where block is either a reference to a block or the index of the block inside the flexy-lyout. Length is an integer, if its is positive, the block will increase its length (px) by the value passed as argument and if it is negative it will decrease it. The module is smart enough to find out maximum amplitude so that if you specify 1000000 for example, the block will increase until it occupies the whole space and will not go further.
toggleLockBlock(block, lockState): where block is again a reference to a block or its index within the block collection. lockState defines whether you want the block to be locked (true) or not (false)

Use the command above to lock a block or change its length so you will understand the standard block behavior

change me

The code for the above command directive is the following

.directive('blockCommand', function () {
return {
    restrict: 'C',
    require: '^flexyLayout',
    template: '<div><input type="number" ng-model="newLength"/><input type="checkbox" ng-model="isLocked"/></div>',
    replace: true,
    scope: {},
    link: function (scope, element, attrs, ctrl) {
        var
                index = parseInt(attrs.index,10),
                input=angular.element(element.children()[0]);

        scope.isLocked=false;

        input.bind('blur', function () {
            scope.$apply(function () {
                ctrl.moveBlockLength(index,scope.newLength);
            });
        });

        scope.$watch('isLocked', function (newValue, oldValue) {
            if (newValue !== oldValue) {
                ctrl.toggleLockBlock(index, newValue);
            }
        });
    }};
});

Splitter Block

A splitter block is a block that splits a set of blocks into two parts. You can add the following markup

<block-splitter>

When you move a splitter block, all the blocks to the next splitter and all the blocks to the previous splitter(or the edges of the flexy layout if there is no other splitter) will behave as explained in the previous section regarding if they are locked, etc.

Note that a block splitter is taken into account when you want to calculate a block index

Drag the splitters in orange to see how the composite blocks behave

change me


    
        block content
    
    
    
        block content
    
    
        block content
    
    
    
        block content

Orientation

You can change the orientation of the flexy layout by setting the attribute orientation to horizontal either vertical. The default value is horizontal

<flexy-layout orientation="vertical">
    <block-container>content block 1</block-container>
    <block-container>content block 2</block-container>
    <block-container>content block 3</block-container>
</flexy-layout>

Another block

Nested layout

You can of course put a flexy layout inside a block container. Combined with the orientation property you'll be able to build complex layout. This website is a good example

change me