AngularJS - Details with Directives

Update 41: - Fixed display of layouts, panels, subpanels and tabpanels to match the XML syntax Update 34->40: - Bugs fixed in the designPanel function, mostly in the jQuery selectors and code transportation Update 33: - Started import of designPanel function Update 32: - Added screen size support on hpLayout Update 31: - Added source and showfield attributes on hpTextfield - Added a spartan support of valuelist attribute Update 30: -Started showformat work on Label -Added support for rowlabel classes -Convert function called for the rowlabel text Update 29: -Fixed label mistype -Added align support to textfields (Only works with ONE item aligned to the right) -Added class support for labels -Added relative positioning to hpRow (so that content can be positioned absolutely) Update 28: -Added case support -Added hpLink support -Added a filler element at the end of each hp:Row so that it fills the remaining width. This to prevent the last element of the row to fill all the width even if a certain width is specified (because of the table-cell display). -Improved condition and visibility function to evaluate conditions -Improved container width function to set elements without a specified width to a default one Update 27: -Added width support for hpLabels -Fixed rowlabels -Improved the container width function

by Luca De Nardi

HTML

<script src="http://code.angularjs.org/1.2.13/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<hp:layout foundset="@fs_Doc" ref="Main" title="Documento" minwidth="250" minheight="200"> 
		<hp:panel role="panel" ref="Menu" dock="top" value="30" form="Menu" marginbottom="10" ></hp:panel>
		<hp:panel role="panel" condition="@var_heightscreen &gt; 800" ref="State" dock="bottom" visible="! @var_OnPreview" value="26" form="State" ></hp:panel>

		<hp:subpanel role="subpanel" ref="HeadPanel" dock="top" value="= (@var_heightscreen &gt; 800) ? 400 : 300"> 
			<hp:panel role="panel" ref="Main" dock="left" value="550" form="Doc" />
			<hp:panel role="panel" ref="Selector" visible="@var_OnEdit OR @var_OnNew" dock="left" value="270"></hp:panel>
			<hp:panel role="panel" ref="Info" dock="left" value="270" visible="! @var_OnPreview" form="DocInfo" ></hp:panel>
			<hp:panel role="panel" ref="rapidCommand" dock="fill" visible="! @var_OnPreview" form="DocCommand"></hp:panel>
		</hp:subpanel>

		<hp:tabpanel role="tabpanel" ref="TabRowTableParent" dock="fill" showtabs="true" allowreduce="false" reduced="false"> 
			<hp:panel role="panel" ref="RowTableParent1" dock="fill" title="Tabella" form="DocRowTable" autoaddingenabled="true" relation="Doc_to_DocRow_IsViewing"></hp:panel>
			<hp:subpanel role="subpanel" ref="subpanel1" title="Dettagli" dock="fill">	
				<hp:panel role="panel" ref="RowTableDetail" dock="right" value="260" form="DocRowInfo" relation="Doc_to_DocRow_IsViewing"></hp:panel>
				<hp:panel role="panel" ref="RowTableParent1" dock="fill" form="DocRowTable" autoaddingenabled="true" relation="Doc_to_DocRow_IsViewing"></hp:panel>
			</hp:subpanel>
			<hp:subpanel role="subpanel" ref="subpanel2" title="Maggiori Dettagli" dock="fill">
				<hp:panel role="panel" ref="RowDetail" dock="right" value="520" form="DocRowDetail"...

CSS

.test:before{content: '-CUSTOM CLASS-'; font-size: 8px;}

JavaScript

//Print node error -> alert(elem[0].outerHTML);
var defaultHeight = 20;
var defaultWidth = 400;
var nextColumnWidth = -1;
$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
});
$(document).ready(function(){
    var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = w.innerWidth || e.clientWidth || g.clientWidth, y = w.innerHeight|| e.clientHeight|| g.clientHeight;
    designPanels('Main', 0, y, 0, x, x, y);
});
/* DESIGN PANELS */
function designPanels(_parLayoutID, _MarginTopScreen, _MarginBottomScreen, _MarginLeftScreen, _MarginRightScreen, _WidthScreen, _HeightScreen) {		
	/** @type {XML} */
	var _currentPanel;
	var searchIn = '#' + _parLayoutID + ' > div[role*="panel"]';
	for(var i = 0; i < $(searchIn).length;i++){
        _currentPanel = $($(searchIn)[i]);
        console.log(_currentPanel);
		var _x, _y, _WidthNewArea, _HeightNewArea, _FinalMarginTopScreen=0, _FinalMarginBottomScreen=0, _FinalMarginRightScreen=0, _FinalMarginLeftScreen=0, _tabsWidth=0, _marginLeft, _marginRight, _marginTop, _marginBottom;
		var _panelID, _dock, _value, _title, _showTabs, _allowReduce, _enabled, _reduced;
		_panelID = _currentPanel.attr('id');
		_title =  _currentPanel.attr('title');
		_showTabs = _currentPanel.attr('showtabs');
		_allowReduce = _currentPanel.attr('allowreduce');
		_reduced = _currentPanel.attr('reduced');
		var ifCondition = '#' + _parLayoutID + ' > div#' + _panelID + '_title';
		if($(ifCondition)) { _designHeaderPanel = true }
		else { _designHeaderPanel = false }
		
		_dock = _currentPanel.attr('dock');
		try {
			_value =  convert(_parEntityKEY,null,_currentPanel.attr('value'),null,true).toString();					
			_marginTop = parseInt(_currentPanel.attr('margintop'));
			_marginBottom = parseInt(_currentPanel.attr('marginbottom'));
			_marginLeft = parseInt(_currentPanel.attr('marginleft'));
			_marginRight = parseInt(_currentPanel.attr('marginright'));
			switch(_dock) {
				case...