View Single Post
Old 11-01-2017, 10:32 AM   #2
Liantefaron
 
Liantefaron's Avatar
 
Join Date: Dec 2005
Location: Giessen/Hessen/Germany
Default Re: (Ab-?)Using GCA files as HTML table reference/shopping list

And here's an example that uses a bilingual XML file and loads list.js and as well as some CSS to pretty up things:

Code:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>

<xsl:template match="/">
	<html>
	<head>
		<STYLE type="text/css"><!--
		body {font-family:sans-serif;}
		table {border-collapse:collapse;}
		th,td {border:1px solid #999; vertical-align:top;}
		th {text-align:center;}
		td.name, td.namede, td.comments {text-align:left;}
		td.basecost, td.baseweight, td.page {text-align:right;}
		td.lc, td.tl {text-align:center;}
		input {
		  border:solid 1px #ccc;
		  border-radius: 5px;
		  padding:7px 14px;
		  margin-bottom:10px
		}
		input:focus {
		  outline:none;
		  border-color:#aaa;
		}
		.sort {
		  padding:8px 30px;
		  border-radius: 6px;
		  border:none;
		  display:inline-block;
		  color:#fff;
		  text-decoration: none;
		  background-color: #28a8e0;
		  height:30px;
		}
		.sort:hover {
		  text-decoration: none;
		  background-color:#1b8aba;
		}
		.sort:focus {
		  outline:none;
		}
		.sort:after {
		  display:inline-block;
		  width: 0;
		  height: 0;
		  border-left: 5px solid transparent;
		  border-right: 5px solid transparent;
		  border-bottom: 5px solid transparent;
		  content:"";
		  position: relative;
		  top:-10px;
		  right:-5px;
		}
		.sort.asc:after {
		  width: 0;
		  height: 0;
		  border-left: 5px solid transparent;
		  border-right: 5px solid transparent;
		  border-top: 5px solid #fff;
		  content:"";
		  position: relative;
		  top:4px;
		  right:-5px;
		}
		.sort.desc:after {
		  width: 0;
		  height: 0;
		  border-left: 5px solid transparent;
		  border-right: 5px solid transparent;
		  border-bottom: 5px solid #fff;
		  content:"";
		  position: relative;
		  top:-4px;
		  right:-5px;
		}
	-->	</STYLE>
	</head>
	<body>
	<h1>GURPS Equipment (XSLT Conversion from GCA Files)</h1>
	<p><a href="index.php">Back to Index</a></p>
	<div id="sorttable">
		<button class="sort" data-sort="name" style="margin-right:10px;">Sort by EN Item Name</button>
		<button class="sort" data-sort="namede" style="margin-right:10px;">Nach DE Name sortieren</button>
		<input class="search" placeholder="Search / Suche"/>
		<table id="G4Equip" border="1" cellspacing="0" cellpadding="2" color="#DDDDDD" style="border:1px solid #ddd;">
			<tbody class="list">
			<tr>
				<th width="15%">Item</th>
				<th width="15%">Deutsch</th>
				<th width="5%">Cost</th>
				<th width="5%">Weight</th>
				<th width="5%">LC</th>
				<th width="5%">TL</th>
				<th width="5%">Page</th>
				<th width="45%">Other Info</th>
			</tr>
			<xsl:apply-templates/>
			</tbody>
		</table>
	</div>
	<script src="list.min.js"></script>
	<script>
		var options = { valueNames: [ 'name', 'namede', 'basecost', 'baseweight', 'lc', 'tl', 'page', 'comments' ] };
		var userList = new List('sorttable', options);
	</script>
	</body>
	</html>
</xsl:template>

<xsl:template match="equipment">
	<xsl:for-each select="*"> <!-- take all descendants of equipment (ID tags) -->
		<tr>
			<!--<td><xsl:value-of select="local-name()"/></td>-->
			<td class="name" width="15%"><xsl:value-of select="./name"/></td>
			<td class="namede" width="15%"><xsl:value-of select="./namede"/></td>
			<td class="basecost" width="5%"><xsl:value-of select="./basecost"/> <xsl:text> $</xsl:text> </td>
			<td class="baseweight" width="5%"><xsl:value-of select="./baseweight"/> <xsl:text> lbs.</xsl:text> </td>
			<td class="lc" width="5%">
				<xsl:choose>
					<xsl:when test="./lc != ''">
						<xsl:value-of select="./lc"/>
					</xsl:when>
					<xsl:otherwise>
						<xsl:text>4</xsl:text>
					</xsl:otherwise>
				</xsl:choose>
			</td>
			<td class="tl" width="5%">
				<xsl:choose>
					<xsl:when test="./tl != ''">
						<xsl:value-of select="./tl"/>
					</xsl:when>
					<xsl:otherwise>
						<xsl:text>3</xsl:text>
					</xsl:otherwise>
				</xsl:choose>
			</td>
			<td class="page" width="5%"><xsl:value-of select="./page"/></td>
			<td class="comments" width="45%" style="font-size:0.8rem">
				<xsl:choose>
					<xsl:when test="./damage != ''">
						<xsl:text>Dam: </xsl:text> <xsl:value-of select="./mode"/>
						<xsl:text> </xsl:text> <xsl:value-of select="./damage"/>
						<xsl:text> </xsl:text> <xsl:value-of select="./damtype"/>
						<xsl:text> / R: </xsl:text> <xsl:value-of select="./reach"/>
						<xsl:text> Parry: </xsl:text> <xsl:value-of select="./parry"/>
						<xsl:text> MinST: </xsl:text> <xsl:value-of select="./minst"/>
						<xsl:text> / Acc: </xsl:text> <xsl:value-of select="./acc"/>
						<xsl:text> D: </xsl:text> <xsl:value-of select="./rangehalfdam"/>
						<xsl:text> Max: </xsl:text> <xsl:value-of select="./rangemax"/>
						<xsl:text> RoF: </xsl:text> <xsl:value-of select="./rof"/>
						<xsl:text> Shots: </xsl:text> <xsl:value-of select="./shots"/>
						<xsl:text> Blk: </xsl:text> <xsl:value-of select="./bulk"/><br/>
					</xsl:when>
				</xsl:choose>

				<xsl:choose>
					<xsl:when test="./dr != ''">
					<xsl:text>DR: </xsl:text> <xsl:value-of select="./dr"/>
					<xsl:text> </xsl:text><xsl:value-of select="./location"/><br/>
					</xsl:when>
				</xsl:choose>

				<xsl:choose>
					<xsl:when test="./skillused != ''">
					<xsl:text>Skill: </xsl:text> <xsl:value-of select="./skillused"/> <xsl:text> / </xsl:text>
					</xsl:when>
				</xsl:choose>
				<xsl:choose>
					<xsl:when test="./notes != ''">
					<xsl:text> Notes: </xsl:text> <xsl:value-of select="./notes"/> <br/>
					</xsl:when>
				</xsl:choose>
				<xsl:choose>
					<xsl:when test="./description != ''">
					<xsl:text> Desc: </xsl:text> <xsl:value-of select="./description"/> <br/>
					</xsl:when>
				</xsl:choose>
				<xsl:text> Cat: </xsl:text> <xsl:value-of select="./cat"/> <br/>
			</td>
		</tr>
	</xsl:for-each>
</xsl:template>

<!-- do nothing for unmatched text or attribute nodes -->
<xsl:template match="text()|@*"/>

</xsl:stylesheet>
Three lines are particularly interesting for changes: line 90 (<th width="15%">Deutsch</th>), where I create a table row header for the second language; line 104 (var options= ...), where I tell list.js which columns it should process; and line 116 (<td class="namede" width="15%"><xsl:value-of select="./namede"/></td>), where the iterating XSL transformation will fill the table's second language column with data. Change/delete these to allow for another second language or to get by without.

So... what do you think?
__________________
Liantefaron - Hunter of Spiders
Woodelven Ranger

Real Name: Christopher.
steinmetze.org (with my GCA-datafiles) has perished in 2012. Try an archive.org version if you need them.

Last edited by Liantefaron; 11-01-2017 at 10:38 AM.
Liantefaron is offline   Reply With Quote