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

napište » Zprávičky

dnes 04:33 | IT novinky

Společnost Teufel nedávno představila svůj první open source Bluetooth reproduktor MYND.

Lazarus 4.2

včera 20:00 | Nová verze

Byla vydána verze 4.2 multiplatformního integrovaného vývojového prostředí (IDE) pro rychlý vývoj aplikaci (RAD) ve Free Pascalu Lazarus (Wikipedie). Využíván je Free Pascal Compiler (FPC) 3.2.2.

Ladislav Hagara | Komentářů: 0

Microsoft nemůže garantovat, že data z EU nepředá do USA bez EU souhlasu

včera 19:33 | IT novinky

Anton Carniaux, právní zástupce Microsoft France, pod přísahou: Microsoft nemůže garantovat, že data z EU nepředá do USA bez EU souhlasu, musí dodržovat americké zákony.

Ladislav Hagara | Komentářů: 3

Firefox 141.0

včera 15:33 | Nová verze

Byl vydán Mozilla Firefox 141.0. Přehled novinek v poznámkách k vydání a poznámkách k vydání pro vývojáře. Lokální AI umí uspořádat podobné panely do skupin. Firefox na Linuxu využívá méně paměti. Řešeny jsou rovněž bezpečnostní chyby. Nový Firefox 141 je již k dispozici také na Flathubu a Snapcraftu.

Ladislav Hagara | Komentářů: 0

Kritická zranitelnost v SharePointu

21.7. 22:44 | Bezpečnostní upozornění

NÚKIB upozorňuje na kritickou zranitelnost v SharePointu. Jedná se o kritickou zranitelnost typu RCE (remote code execution) – CVE-2025-53770, která umožňuje neautentizovaný vzdálený přístup a spuštění kódu, což může vést k úplnému převzetí kontroly nad serverem. Zranitelné verze jsou pouze on-premise verze a to konkrétně SharePoint Server 2016, 2019 a Subscription Edition. SharePoint Online (Microsoft 365) není touto zranitelností ohrožen.

Ladislav Hagara | Komentářů: 3

Přísnější pravidla pro obsah distribuovaný ve službě Steam

21.7. 21:00 | IT novinky

Společnost Valve zpřísnila pravidla pro obsah, který je možné distribuovat ve službě Steam. Současně řadu her ze Steamu odstranila. V zásadách a pravidlech přibylo omezení 15: Obsah, který by mohl porušovat pravidla a normy stanovené zpracovateli plateb a souvisejícími sítěmi platebních karet a bankami nebo poskytovateli připojení k internetu. Sem spadají zejména určité druhy obsahu pouze pro dospělé.

Ladislav Hagara | Komentářů: 0

Dle analytics.usa.gov je 6,2 % přístupů z Linuxu

21.7. 13:33 | Komunita

Dle analytics.usa.gov je za posledních 90 dnů 6,2 % přístupů k webových stránkám a aplikacím federální vlády Spojených států z Linuxu.

Ladislav Hagara | Komentářů: 0

Cheat v Chrome: thisisunsafe

20.7. 17:44 | Zajímavý článek

Jak si zobrazit pomocí Chrome a na Chromiu založených webových prohlížečích stránky s neplatným certifikátem? Stačí napsat thisisunsafe.

Ladislav Hagara | Komentářů: 3

V repozitáři AUR (Arch User Repository) nalezeny a odstraněny tři balíčky s malwarem

20.7. 00:33 | Bezpečnostní upozornění

V repozitáři AUR (Arch User Repository) linuxové distribuce Arch Linux byly nalezeny a odstraněny tři balíčky s malwarem. Jedná se o librewolf-fix-bin, firefox-patch-bin a zen-browser-patched-bin.

Ladislav Hagara | Komentářů: 15

Debian 13 Trixie by měl vyjít v sobotu 9. srpna

20.7. 00:22 | Komunita

Dle plánu by Debian 13 s kódovým názvem Trixie měl vyjít v sobotu 9. srpna.

Ladislav Hagara | Komentářů: 1

Centrum | Napsat | Starší

navrhněte » Anketa

Kolik tabů máte standardně otevřeno ve web prohlížeči?

1-4 (26%)

5-15 (25%)

16-30 (4%)

31-50 (6%)

51-70 (5%)

71-100 (3%)

101-130 (4%)

>131 (28%)

Celkem 80 hlasů

Komentářů: 11, poslední včera 20:35

Rozcestník

AbcLinuxu

HDmag.cz

AbcLinuxu:/ Blogy / Tomik / Linux / Užitečné skripty 3: automaticky generovaný obsah v HTML

Štítky: HTML, web, Windows

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

11.3.2007 21:49 | Přečteno: 2334× | Linux

Dnešní téma nebude úplně linuxové, i když zkušený demagog by jistě zdůvodnil, že do linuxu patří. Podíváme se, jak udělat v HTML souboru obsah (table of content, abych předešel nedorozumnění), který se generuje úplně sám. Samozřejmě s pomocí Javascriptu.

Abstrakt

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

Skript jsem nevymyslel sám, většinu jsem přebral z [2], ale poskládal jsem ho celý do stavu, ve kterém se dá hned použít. Zde je tedy prázdný dokument, který se bude sám udržovat obsah (TOC), stačí do něj jenom doplnit vlastní text.



<!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>

Lehké vysvětlení:

řádky 8--31: funkce getElementsByTagNames. Všimněte si plurálu. Dělá to stejné, co getElementsByTagName, ale můžete zadat víc tagů (jmen). Podrobněji viz [1].
řádky 33--54: vlastní tvoření obsahu. Popíšeme si důležitá místa
řádky 34--35: připraví se DIV, do kterého se celý obsah nacpe
řádky 36--39: přepínač na skrývání obsahu
řádek 41: získá se seznam všech nadpisů od úrovně 2. H1 bývá hlavní nadpis a do obsahu se nedává.
řádky 49--51: každý nadpis dostane Id, pokud už ho nemá a stejné Id se použije jako cíl odkazu z obsahu. Obsah je složen jednoduše ze samých odkazů bez dalšího formátování
řádky 58--65: pomocná funkce na skrývání a zobrazování obsahu
řádky 67--75: styl, která zajistí, že se obsah zobrazí v přehledné podobě (v rámci možností). Všimněte si zejména vlastnosti display na řádku 68.
řádek 78: po načtení stránky se to celé spustí
řádek 80: DIV, kam bude obsah umístěn

Skript jsem testoval ve Firefoxu (Linux i Windows) a IE6. V obojím funguje.

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

http://www.quirksmode.org/dom/getElementsByTagNames.html
http://www.quirksmode.org/dom/toc.html

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

Odkazy v obsahu mají nepříjemnou vlastnost--aktivní je celý řádek, ne jenom text. Dá se to nějak snadno zlepšit?
Uměl by někdo přidat automatické číslování?
Nadpisy v HTML se dost špatně opticky odlišují. Šlo by zařídit, aby i text dokumentu byl odražený od levého kraje podobně jako položky obsahu?

Hodnocení: 100 %

špatné • dobré

Anketa

Tiskni Sdílej:

Komentáře

Nástroje: Začni sledovat (0) ? , Tisk

Vložit další komentář

11.3.2007 22:49 anicka | blog: ze_zivota
Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML

Odpovědět | Sbalit | Link | Blokovat | Admin

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.

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

Odpovědět | Sbalit | Link | Blokovat | Admin

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ů.

12.3.2007 08:09 Zdeněk Burda | skóre: 61 | blog: Zdendův blog | Praha
Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML

Odpovědět | Sbalit | Link | Blokovat | Admin

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.

26.1.2012 18:45 Josef Kufner | skóre: 70
Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML

Odpovědět | Sbalit | Link | Blokovat | Admin

http://duramecho.com/ComputerPrograms/HtmlHeadingsToTableOfContents/index.html

Hello world ! Segmentation fault (core dumped)

Založit nové vlákno • Nahoru