RUMI

by Felipe Alfaro

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<hr ng-init="c1 = c4 = 1; c2 = c3 = 2; p1 = p2 = 2; p3 = p4 = 1;">

<label>Content 1
  <input type="number" ng-model="c1">
  <input type="number" ng-model="p1"></label><br>
<label>Content 2
  <input type="number" ng-model="c2">
  <input type="number" ng-model="p2"></label><br>
<label>Content 3
  <input type="number" ng-model="c3">
  <input type="number" ng-model="p3"></label><br>
<label>Content 4
  <input type="number" ng-model="c4">
  <input type="number" ng-model="p4"></label><br>

<rp-panels columns="2">
  
  <rp-panel column="c1" position="p1">Content 1</rp-panel>
  <rp-panel column="c2" position="p2">Content 2</rp-panel>
  <rp-panel column="c3" position="p3">Content 3</rp-panel>
  <rp-panel column="c4" position="p4">Content 4</rp-panel>
  
</rp-panels>

SCSS

html, body { height: 100%; }
html, body { margin: 0; padding: 0; }

rp-panels
{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 100%;
  border: solid 1px gray;
  box-sizing: border-box;
  
  div.rp-panels-col
  {
    flex-grow: 1;
    flex-shrink: 1; 
    
    > rp-panel
    {
      display: block;
      border: solid 1px gainsboro;
      padding: 15px;
    }
  }
  
  > ng-transclude
  {
    display: none;
  }
}

JavaScript

const Rumi = angular.module('Rumi', []);

Rumi.controller('Main', MainController);

MainController.$inject = [];
function MainController() {
	const self = this;
}

Rumi.directive({
	'rpPanels': rpPanelsDirective,
  'rpPanel': rpPanelDirective
});

rpPanelsDirective.$inject = [];
function rpPanelsDirective() {

	RpPanelsController.$inject = ['$element', '$attrs'];
  function RpPanelsController($element, $attrs) {
  	const self = this;
    
    var columnsData = getColumnsData(),
    		columnsCollection = columnsData.collection,
    		columnsRegisters = columnsData.registers;
        
    function getColumnsData() {
    	var nodes = $element[0].querySelectorAll('div.rp-panels-col'),
      		collection = [],
          registers =  [];
          
      Array.prototype.forEach.call(nodes, function (node) {
      	collection.push(angular.element(node));
        registers.push([]);
      });
          
      return {
      	collection: collection,
        registers: registers
      }
    }
    
    function appendPanel($panelElement, column, position) {
    	var columnIndex = column - 1,
   				registerIndex = position - 1,
      		$column = columnsCollection[columnIndex],
          register = columnsRegisters[columnIndex],
      		panels = [],
          panelsCount = 0;
      
      if ($column && registerIndex >= 0) {
      	console.log(register);
      	if (register[registerIndex])
          register.splice(
          	registerIndex, 0, $panelElement
          );
        else 
          register[registerIndex] = $panelElement;
        
        var childNodes = $column[0].childNodes;
        register.forEach(function ($panel) {
        	if ($panel) {
          
          	
          
          	$column.append($panel);
          }
        });
        
        

      }
      else
      	console.error('Column "' + column + '" does not exist.');
    }
    
    self.$appendPanel = appendPanel;
  }

	function template($templateElement, $attrs) {
  	var cols =...