ComplementosGuiaNodos

by Edgar Martinez

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="robots" content="index,follow" />
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
	
	
	<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
  
	<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js'></script>
	<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
	<script src='script.js?20220102-5'></script>
</head>

<body>
<div id="contenedor" class="container-fluid" >

		<div class="row">
			<div class="col-sm bg-primary titulo justify-content-center">
			<center><h1>COMPLEMENTOS CFDI</h1></center>
			</div>
		</div>

		<div class="row">
			<div class="col-sm-12 bg-info webContainer">
			<ul id="XML">
				
			</ul>
			</div>
		</div>

</div>


<template id="tNodo">
<div class="card"  style="width: 100%">
	  <div class="card-header bg-warning">
		<div class="row">
			<div class="col-4">
			  {NOMBRE} {VERSION} 
			  <font><span id="btn_{IDBODY}" style='vertical-align: bottom;cursor:pointer' class="minus icon ctrl"></span></font>
			</div>

			<div class="col-8">
			   Atributos:...

CSS

@import url('https://fonts.googleapis.com/css2?family=Comforter&display=swap');

.titulo{
	padding: 10px;
	padding-bottom: 1px;
	border-top-left-radius: 9px;
	border-top-right-radius: 9px;
	margin: 9px;
	margin-bottom: 5px;
	font-family: 'Comforter', cursive;
}
.webContainer{
	padding:10px;
}


/* ICONS */
.icon:before{font:16px/1 'HeydingsCommonIconsRegular';height:16px;width:16px;margin:2px 15px 2px...

JavaScript

////////////////////CONFIGURACION
	 var allOpen=false;
	 
	 ///////////////////TEMPLATES/////////////////////////
	 
	 var nodoTemplate={
		 makeNodo:function(nodo, i){
			 
		

				 var template=$("#tNodo").html();
				 var templateAttr=$("#atributos").html();
			 
				 var htmlTemplate=template.replace("{NOMBRE}",nodo.NOMBRE);
				 var version="";
				 if(nodo.hasOwnProperty("VERSION")){
				   version=nodo.VERSION+"v";
				 }
				  htmlTemplate=htmlTemplate.replace("{IDBODY}",nodo.NOMBRE.trim().replace(/ /g,'')+"_"+i);
				  htmlTemplate=htmlTemplate.replace("{IDBODY2}",nodo.NOMBRE.trim().replace(/ /g,'')+"_"+i);

				  htmlTemplate=htmlTemplate.replace("{VERSION}",version);
				  htmlTemplate=htmlTemplate.replace("{DESCRIPCION}",nodo.DESCRIPCION);
				  
		////////////// ATRIBUTOS DEL COMPLEMENTO
					var listaAtributos="";
					if(nodo.hasOwnProperty("ATRIBUTOS")){
					  if(nodo.ATRIBUTOS.length>0){
							 var atributos=nodo.ATRIBUTOS;
								for(var x in atributos){
									var atributo=atributos[x];
									var valoresRemplazables=["{NOMBRE}",
															 "{NOMBRE}",
															 "{NODO}",
															 "{ATTRIBUTO}",
															 "{NODO}",
															 "{ATTRIBUTO}"];
									  var valoresReales=[atributo.NOMBRE,
														 atributo.NOMBRE,
														 nodo.NOMBRE.trim().replace(/ /g,''),
														 atributo.NOMBRE.trim().replace(/ /g,''),
														 nodo.NOMBRE.trim().replace(/ /g,''),
														 atributo.NOMBRE.trim().replace(/ /g,'')];

								 var indicaciones=atributo.INDICACIONES;
								 var indicaciones_completas=$("<div/>");
								 var table_indicaciones=$("<table/>");
								 table_indicaciones.addClass("table");

									var tr=$("<tr/>");
									var tdNombre=$("<td/>");
										tdNombre.addClass("bg-secondary");
										tdNombre.css("color","white");
										tdNombre.html("DESCRIPCION");
									var...