cluedin-widget/core/layout/layout.jsx

This is the project for creating and managing widgets in CluedIn.

var Row = function( w ) {
    this.widgets = [];

    if ( w ) {
        this.widgets.push( w );
    }
};

Row.prototype.calculate = function() {
    var total = 0;

    this.widgets.forEach( function( w ) {
        total += w.size;
    }, this );

    return total;
};

Row.prototype.placeLeft = function() {
    return 12 - this.calculate();
};

Row.prototype.addWidget = function( w ) {
    this.widgets.push( w );
};

Row.prototype.hasSpace = function( w ) {
    return (this.placeLeft() >= w.size);
};

var Column = function( parameter ) {
    this.id      = parameter.id;
    this.widgets = [];
};

Column.prototype.addWidget = function( w ) {
    this.widgets.push( w );
};

var Layout = function( widgets ) {
    this.widgets         = widgets;
    this.rows            = [ new Row() ];
    this.Column1         = new Column();
    this.Column2         = new Column();
    this.Column3         = new Column();
    this.currentRowIndex = -1;
};

Layout.prototype.generate = function() {
    this.widgets.forEach( this.placeWidget, this );
    this.rows.forEach( this.buildColumns, this );
};

Layout.prototype.buildColumns = function( r ) {
    this.Column1.push( r.widgets[ 0 ] );

    this.Column2.push( r.widgets[ 1 ] || { size: 0 } );

    if ( r.widgets[ 2 ] ) {
        this.Column3.push( r.widgets[ 2 ] || { size: 0 } );
    }
};

Layout.prototype.findIndexWhereToCreateNewRow = function() {
    var content;
    var foundInColumn1 = false;
    var foundInColumn2 = false;
    var foundInColumn3 = false;
    var indexInColumn1;
    var indexInColumn2;
    var indexInColumn3;

    //find the index where to put the row.

    this.Column1.widgets.forEach( function( w, index ) {
        if ( !foundInColumn1 && w.size > 4 ) {
            foundInColumn1 = true;
            indexInColumn1 = index;
        }
    } );

    this.Column2.widgets.forEach( function( w, index ) {
        if ( !foundInColumn2 && w.size > 4 ) {
            foundInColumn2 = true;
            indexInColumn2 = index;
        }
    } );

    this.Column3.widgets.forEach( function( w, index ) {
        if ( !foundInColumn3 && w.size > 4 ) {
            foundInColumn3 = true;
            indexInColumn3 = index;
        }
    } );

    var minValues = [ indexInColumn1, indexInColumn2, indexInColumn3 ];

    var minBiggestWidget = Math.min.apply( Math, minValues );

    this.currentRowIndex = minBiggestWidget;
};

Layout.prototype.renderColumns = function() {
    let specialRowHtml;
    let col1Html;
    let col2Html;
    let col3Html;
    let normalRowHtml;

    this.findIndexWhereToCreateNewRow();

    if ( this.currentRowIndex > 0 || this.currentRowIndex === -1 ) {
        col1Html = this.renderColumn( this.Column1 );
        col2Html = this.renderColumn( this.Column2 );
        col3Html = this.renderColumn( this.Column3 );
    }

    if ( this.currentRowIndex > -1 ) {
        specialRowHtml = this.renderSpecial();
    }

    if ( col1Html && col2Html && col3Html ) {
        normalRowHtml = <div className="cluedIn_row">
            {col1Html}
            {col2Html}
            {col3Html}
        </div>
    }

    return (<div>
        {normalRowHtml}
        {specialRowHtml}
    </div>);
};

Layout.prototype.renderColumn = function( column ) {
    //generate HTML until the first INDEX where we have a biggest than 4 widgets
    let widgetContent;

    if ( this.currentRowIndex ) {
        for( var i = 0; i < this.currentRowIndex; i++ ) {
            var w = column.widgets.pop();
            if ( w ) {
                widgetContent = (<div>{w.size}</div>);
            }
        }
    }

    if ( !widgetContent ) {
        return;
    }

    return (<div className="cluedIn_col s4">
        widgetContent
    </div>);

};

Layout.prototype.renderSpecial = function() {
    let w1 = this.Column1.widgets.pop();
    let w2 = this.Column2.widgets.pop();
    let w3 = this.Column3.widgets.pop();
    let w1Html;
    let w2Html;
    let w3Html;

    if ( w1 && w1.size > 0 ) {
        var widget1ClassName = "cluedIn_col s" + w1.size;

        w1Html = (<div className={widget1ClassName}>{w1.size}</div>)
    }

    if ( w2 && w2.size > 0 ) {
        var widget2ClassName = "cluedIn_col s" + w2.size;

        w2Html = (<div className={widget2ClassName}>{w2.size}</div>)
    }

    if ( w3 && w3.size > 0 ) {
        var widget3ClassName = "cluedIn_col s" + w3.size;

        w3Html = (<div className={widget3ClassName}>{w3.size}</div>)
    }

    return (<div className="cluedIn_row">
        {w1Html}
        {w2Html}
        {w3Html}
    </div>);
};

Layout.prototype.render = function() {
    var content = [];

    this.generate();

    while( this.Column1.widgets.length > 0 || this.Column2.widgets.length > 0 || this.Column3.widgets.length > 0 ) {
        content.push( this.renderColumns() );
    }

    return content;
};

Layout.prototype.placeWidget = function( w ) {
    var isPlaced = false;
    this.rows.forEach( function( r ) {
        if ( !isPlaced ) {
            if ( r.hasSpace( w ) ) {
                r.addWidget( w );
                isPlaced = true;
            }
        }
    } );

    if ( !isPlaced ) {
        this.rows.push( new Row( w ) );
    }
};

module.exports = Layout;