Užitečné skripty 3: automaticky generovaný obsah v HTML

Určitě jste už někdy potřebovali napsat kratší návod nebo krátký technický dokument. Technická dokumentace by měla mít na začátku obsah (TOC). Musíme tedy najít takový formát, který umí obsah (TOC) vygenerovat sám, protože udržovat dokument i s obsahem (TOC) je mírně řečeno nešikovné.

Popíšeme si tedy kousek Javascriptu, který umí vygenerovat a zobrazit klikací obsah v HTML. Někdy je totiž použití TeXu nevhodné (čtenář neocení krásné slitky fi, fl, ffi, ffl, vyrovnané mezery ve slově PLAVAT atd. Nehledě k tomu, že na Windows je GSView vzácnost. Stručně řečeno házíme perly sviním). Word nebo Swriter je je trošku jiná kategorie, hodně lidí s nimi nechce mít nic společného a navíc se moc nedá čekat, že příjemce uvidí dokument stejně jako my. (U HTML se to už vůbec nedá čekat, ale s tím se tak nějak počítá).

Samotný skript



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
   <META NAME="AUTHOR" CONTENT="Tomas Penicka">
<!-- Based on http://www.quirksmode.org/dom/toc.html, but some changes were made-->
<script type="text/javascript">

function getElementsByTagNames(list,obj) {
	if (!obj) var obj = document;
	var tagNames = list.split(',');
	var resultArray = new Array();
	for (var i=0;i<tagNames.length;i++) {
		var tags = obj.getElementsByTagName(tagNames[i]);

		for (var j=0;j<tags.length;j++) {
			resultArray.push(tags[j]);
		}
	}
	var testNode = resultArray[0];
	if (!testNode) return [];

	if (testNode.sourceIndex) {
		resultArray.sort(function (a,b) {
				return a.sourceIndex - b.sourceIndex;
		});
	}
	else if (testNode.compareDocumentPosition) {

		resultArray.sort(function (a,b) {
				return 3 - (a.compareDocumentPosition(b) & 6);
		});
	}
	return resultArray;
}


function createTOC() {
	var y = document.createElement('div');
	y.id = 'innertoc';
	var a = y.appendChild(document.createElement('span'));
	a.onclick = showhideTOC;
	a.id = 'contentheader';

	a.innerHTML = 'hide page contents';
	var z = y.appendChild(document.createElement('div'));
	var toBeTOCced = getElementsByTagNames('h2,h3,h4,h5,h6');
	if (toBeTOCced.length < 2) return false;

	for (var i=0;i<toBeTOCced.length;i++) {

		var tmp = document.createElement('a');
		tmp.innerHTML = toBeTOCced[i].innerHTML;
		z.appendChild(tmp);
        tmp.className = 'indent' + toBeTOCced[i].nodeName.substring(1);
		var headerId = toBeTOCced[i].id || 'link' + i;
		tmp.href = '#' + headerId;

		toBeTOCced[i].id = headerId;
	}
	return y;
}

var TOCstate = 'block';

function showhideTOC() {

	TOCstate = (TOCstate == 'none') ? 'block' : 'none';
	var newText = (TOCstate == 'none') ? 'show page contents' : 'hide page contents';
	document.getElementById('contentheader').innerHTML = newText;
	document.getElementById('contentheader').onclick = showhideTOC;
	document.getElementById('innertoc').lastChild.style.display = TOCstate;
    alert();

}
</script>
<style type="text/css">
	#toc a   {display: block; margin-top: 2pt; background-color: #EEEEEE;}
	#toc a:hover   {background-color: #CCCCFF;}
	.indent2    {margin-left: 0em;}
	.indent3    {margin-left: 2em;}

	.indent4    {margin-left: 4em;}
	.indent5    {margin-left: 6em;}
	.indent6    {margin-left: 8em;}
</style>
    <title></title>
  </head>

<body onLoad="document.getElementById('toc').appendChild(createTOC());">
<!-- The following DIV is exactly the place, where to TOC will be located, don't remove this -->
<div id="toc"></div>

</body>
</html>

Chtěl jsem ještě přidat odkaz na příklad, ale zápisek už jsem uložil. (To byl vtip, ve skutečnosti jsem chtěl přidat k zápisku přílohu dostal jsem chybovou hlášku "přístup odmítnout")

Odkazy

Místa k vylepšení, otázky

Anketa

Komentáře

Pokud jde o TeX, Windows a perly svinim: cspdftex mi vzdycky chodil docela pekne a psat v TeXu da IMHO min prace nez psat v cemkoliv jinem. Ale proti gustu... :-)

12.3.2007 09:40 botanicus | blog: Botanicusovi povzdechy | Prachatice
Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML

... mam chut na jablicka ;)

12.3.2007 11:55 Käyttäjä 11133 | skóre: 58 | blog: Ajattelee menneisyyttä
Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML

Spát v plaintextu je ještě méně práce, jinak taky LaTeX. :-)

12.3.2007 13:22 Tomáš | skóre: 31 | blog: Tomik
Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML

Spát rozhodně. :-)

TeX samozřejmě používám raději, mám plno svých maker pro plain (LaTeX moc nemusím). Někdy je ale lepší sáhnout po tom, co umí i kolegové, aby mohli opravovat chyby apod.

Používat innerHTML je poněkud nečisté, co takhle zkusit metody cloneNode a replaceData?

Ideální řešení by stavělo na DOM objektu NodeIterator. Bohužel jeho implementace v prohlížečích je problematická.

Odpovědi na otázky

Protože jste element a učinil blokovým elementem. Čisté řešení je použití zanořených seznamů a element a ponechat řádkovým.
Elegantní řešení je obsaženo v předešlé odpovědi.
Řešení spočívá v přiřazení záporného levého okraje nadpisům a kladného levého okraje předku všech textů.

12.3.2007 08:56 Tomáš | skóre: 31 | blog: Tomik
Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML

Díky za odpovědi, ještě mám pár komentářů.

Jak moc by to zkomplikovalo kód? Přeci jenom jsem se snažil o co nejjednodušší řešení
A co číslování v textu?
To je dobý hack. Až budu mít čas, tak si to přepíšu.

12.3.2007 09:40 Ritchie | skóre: 27 | blog: Ritchie's | Berlin
Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML

Záleží, jak elegantně byste to napsal. Lze to napsat jako cyklus odhadem s 15–20 řádky kódu.
Ideálně CSS 2.1 kapitola 12.4, v prohlížečích bohužel příliš nepodporováno. Jinak javascript na 10 řádků.

Nemám rád zbytečný javascript. Ah, to není pravda, nenávidím ho! Proč při psaní dokumentu prostě nezvolit vhodný způsob, který ho vygeneruje automaticky? Používám Docbook, generuje číslování, toc a vše co potřebuju. Proti javascriptu má tu velkou výhodu, že funguje i v lynxu.

-- Nezdar není hanbou, hanbou je strach z pokusu.

12.3.2007 08:51 Tomáš | skóre: 31 | blog: Tomik
Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML

Plně souhlasím s námitkou (javascript taky moc nemusím), ale někdy prostě nemůžu použít pořádné řešení. První důvod je ten, že Docbook nemumím používat. Druhý důvod je, že dokument musí být univerzálně přenositelný a musí jít opravit odkudkoliv (ne všechny počítače mají nainstalovaný patřičný software). Třetí důvod je, si nemůžu vybírat programové prostředí. Prostě si na počítač nesmím instalovat všechno, na co si vzpomenu.