03_WebAppDoc (output) of HitpLago
description::
· a-HitpLago-WebAppDoc is A-DOCUMENT which maps|represents|denotes|models an-archo-title-content-tree-doc.
· it is structured for humans and machines.
· it contains and extra information apart of the archo-doc representation, such as meta-info, audio, video, webapps.
· it is-written in 3 computer-languages, and it is a-web-application:
• Html: for the-structure of the-information,
• Css: for its presentation,
• Browser-javascript (Jsbr): for its processing.
· the-Html-doc is the most whole container which includes the-Css-code and the-JavaScriptBr-code.
[HmnSgm.2017-09-23]
name::
* McsEngl.HitpApp!⇒HitpDoc,
* McsEngl.HitpDoc!=the-output-of-HitpLago,
* McsEngl.HitpLago'03_WebApp!⇒HitpDoc,
* McsEngl.HitpLago'WebApp!⇒HitpDoc, {2019-02-21},
* McsEngl.HitpLago'output!⇒HitpDoc,
* McsEngl.HitpLago'page!⇒HitpDoc, {2019-02-23},
* McsEngl.HitpLago-code!⇒HitpDoc,
* McsEngl.HitpLago-doc!⇒HitpDoc,
* McsEngl.HitpLago-model!⇒HitpDoc,
* McsEngl.HitpLago-webpage!⇒HitpDoc, {2019-06-15},
* McsEngl.HitpPage!⇒HitpDoc,
* McsEngl.HitpWebAppDoc!⇒HitpDoc,
* McsEngl.HitpWebPage!⇒HitpDoc,
* McsEngl.WebApp.HitpLago!⇒HitpDoc,
browser-compatibility of HitpDoc
description::
· HitpDocs are-tested on modern {2016} browsers on win10: Chrome, Firefox, Safari, Edge, IE11.
name::
* McsEngl.HitpDoc'browser-compatibility,
* McsEngl.HitpLago'browser-compatibility,
* McsEngl.HitpLago'browser-support,
download of HitpDoc
GitHub-site:
· since version.10.2014-08-05.valuenames I published the-code on GitHub.
• https://github.com/synagonism/hitp/.
Synagonism-site:
• hitp.20.2025-05-29.separated,
• hitp.20.2025-05-25.separated,
• hitp.19.2025-05-25.misc,
• hitp.18.2021-05-25.module,
• hitp.17.2018-09-15.search-scalability,
• hitp.16.2017-06-05.Searching,
• hitp.15.2016-10-27.any-machine,
• hitp.14.2016-06-09.title-content-tree,
• hitp.12.2016-01-24.Toc-icons,
• hitp.11.2015-10-26.preferences,
• hitp.10.2014-08-05.valuenames,
• hitp.08.2014-01-09.Toc,
• hitp.07.2013-11-06.tabs,
• hitp.05.2013-07-15.Toc-algo,
• hitp.04.2013-06-27.html5.id.toc.preview,
• hitp.03.2013-04-14.preview,
• hitp.02.2013-04-01.Toc,
• hitp.01.2011-02-17.html5.id,
name::
* McsEngl.HitpLago'download,
* McsEngl.HitpDoc'download,
file of HitpDoc
· every HitpDoc is comprised of:
* one Html-file the main container,
* one Css-file,
* one JavaScript-file,
* one optional directory with all other needed files such as pictures, audio, video, Css, etc. The-name of the-directory is the-same with the-name of the-html-file plus the '.files' extension.
* dirSubject/HitpDirNnn.last.html,
* dirSubject/HitpDirNnn.files, optional,
* dirManager/HitpM.css,
* dirManager/HitpM.js,
* dirManager/HitpFileFntUbuntuMonoRegular.ttf, (Css code)
* dirManager/HitpFileIcnFa463.woff2, (Css code)
* dirRoot/HitpConfig.json,
* HitpIndexFiles:
- dirNamidx/namidx.lagRoot.json,
- dirNamidx/dirLagLlll/namidx.lagLlll00.json,
- dirNamidx/dirLagLlll/namidx.lagLlll01.json, ..,
name::
* McsEngl.HitpDoc'file!⇒HitpDocFile,
* McsEngl.HitpDocFile,
directory of HitpDoc
description::
· optionally, the-HitpDoc has a-directory with all extra files needed such as images, specific Css or Jsbr code, anything.
· its name is the-name of the-HitpLago-Html-file plus '.files'.
Html-code of HitpDoc
description::
· the-Html-language models the-structure of a-HitpLago-WebApp and stores the-content of the-archo-doc.
· the-Html-doc is the most whole CONTAINER of the-WebApp.
· it contains the-Css-code and the-JavaScript-code.
name::
* McsEngl.HitpLago'Html!⇒HitpHtml, {2019-02-21},
* McsEngl.Hitphml!⇒HitpHtml, {2020-05-08},
* McsEngl.HitpHtml!=Html-code-of-HitpLago,
* McsEngl.HitpHtml-doc!⇒HitpHtml,
* McsEngl.HitpHtml-code!⇒HitpHtml,
* McsEngl.HitpDoc'Html-code!⇒HitpHtml,
* McsEngl.Html-code--of-HitpLago!⇒HitpHtml,
* McsEngl.HitpLago-Html!⇒HitpHtml,
HitpHtml'Html5
description::
· we use the-Html5-elements section, header, footer to create the-parts of a-HitpDoc that maps a-title-content-tree-doc.
name::
* McsEngl.HitpHtml'Html5,
* McsEngl.HitpHtml5,
* McsEngl.HitpLago-Html5,
HitpHtml'title-content-tree--document
description::
· a-HitpLago--title-content-tree-document maps an-archo-title-content-tree--document.
· we use the section, header, footer and p Html-elements to create HitpDocs.
name::
* McsEngl.HitpLago'title-content-tree--document!⇒HitpTcdDoc,
* McsEngl.HitpHtml'title-content-tree--document!⇒HitpTcdDoc,
* McsEngl.HitpTcdDoc,
part::
• title-of-HitpLago-tree,
• content-of-HitpLago-tree,
• doc-unit-of-HitpLago-tree,
specific::
• footer-tree,
• header-tree,
• meta-tree,
• p-tree,
• root-tree,
• section-tree,
HitpTcdDoc.ROOT (header)
description::
· a-HitpLago-root-tree (a-HitpDoc) maps|represents an-archo-root-tree (a-title-content-tree-doc).
· we use a-header and an-h1 elements to create the-title, and an-ordered-set of h1-trees with last a-footer-tree to create the-content of the-root-tree.
· the-header-element is the first child of the-body-element.
<header id="idHeader">
<h1 id="idHeaderH1">Title
</h1>
</header>
<section id="idName">
<h1 id="idNameH1">Title
</h1>
content
</section>
<footer id="idFooter">
<p id="idFooterP1">Title:
doc-units
</p>
</footer>
name::
* McsEngl.HitpTcdDoc.header,
* McsEngl.HitpLago-header-tree,
* McsEngl.HitpTcdDoc.root,
* McsEngl.HitpLago-root-tree,
* McsEngl.HitpLago-document.root,
* McsEngl.HitpDoc.root,
Depth:
· the biggest depth of a-HitpDoc is 6+1.
· this is because the-heading-elements h1 ... h6 are 6 and thus a-section-tree can have only 5 subtrees.
· the extra depth we get from p-trees.
PROPOSAL: Because many documents use deeper depth than 7 (even-though I do-not-think it is a good practice) I proposed on {2010.10.24} in public-html-comments@w3.org list to use all the single-digit numbers 0-9 as html-headings.
HitpTcdDoc.SECTION
description::
· a-section-tree is a-tree in which we use the-section-element as a-container, a-heading-element for its title and for its content, doc-units or other section-trees.
· the-subtrees of a-section-tree have ordered titles in the form h1, h2, h3, h4, h5, and h6.
<section id="idName2">
<h2 id="idName2H2">Title2
</h2>
<p>Sentence1.
Sentence2.
</p>
<section id="idName3">
<h3 id="idName3H3">Title3
</h3>
<p>Sentence1.
Sentence2.
</p>
</section>
</section>
name::
* McsEngl.HitpTcdDoc.section,
* McsEngl.HitpLago-section-tree,
specific::
• h1-section-tree (has h1-element as title),
• h2-section-tree (has h2-element as title),
• h3-section-tree (has h3-element as title),
• h4-section-tree (has h4-element as title),
• h5-section-tree (has h5-element as title),
• h6-section-tree (has h6-element as title),
HitpTcdDoc.FOOTER
description::
· a-HitpLago-footer-tree is an optional special tree, last child of the-root-tree.
· it is-created with the-footer-element, with no title, and content document-units with text that ends the-text of the-doc.
<footer id="idFooter">
<p id="idFooterP1">Title:
doc-units
</p>
</footer>
name::
* McsEngl.HitpTcdDoc.footer,
* McsEngl.HitpLago-footer-tree,
HitpTcdDoc.P
description::
· a-HitpLago-p-tree is always a-leaf-tree we create with the-p-element.
Its-title is the first line which ends with ':'.
Its-content contains only doc-units.
<p id="idName">Title:
sentences or subparagraphs
</p>
//or
<div id="idName">
<p>Title:
Sentence1.
Sentence2.
</p>
<table>
...
</table>
</div>
HitpTcdDoc.Meta
description::
· a-WebApp-meta-tree is a special section-tree, which is NOT PART of the-root-tree.
· it contains meta-info about the-doc such as versions, comments, support etc.
<section id="idMeta">
<h1 id="idMetaH1">Meta-Info
</h1>
content.meta
<p id="idMetaWebpage_path"><span class="clsB clsColorGreen">page-wholepath</span>:
HitpLago-WebApp
∈ synagonism.net
</p>
</section>
name::
* McsEngl.HitpTcdDoc.meta,
* McsEngl.HitpLago-meta-tree,
HitpHtml'title
description::
· a-HitpLago-title maps an-archo-title\1\.
· we use the-heading-elements (h1, h2, ... h6) to implement it\1\:
<h1 id="idName">title</h1>
or the first line of a-p-element ending with '::'
<p id="idName">title::
doc-unit
</p>
name::
* McsEngl.HitpLago'title,
* McsEngl.HitpLago'WebApp-title,
* McsEngl.HitpHtml'title,
HitpHtml'content
description::
· a-HitpLago-content maps an-archo-content.
· it contains HitpDoc-units and other HitpLago-trees.
name::
* McsEngl.HitpLago'content,
* McsEngl.HitpLago'WebApp-content,
* McsEngl.HitpHtml'content,
HitpHtml'content-unit
description::
· a-HitpDoc-unit maps an-archo-doc-unit.
· it is-created with p-elements and inline elements, or we use a-div-element as a-container if and extra block elements like ol, ul, table create the-doc-unit.
name::
* McsEngl.HitpHtml'doc-unit!⇒HitpHtmlCunit,
* McsEngl.HitpHtml'document-unit!⇒HitpHtmlCunit,
* McsEngl.HitpHtml'unit!⇒HitpHtmlCunit,
* McsEngl.HitpHtmlCunit,
* McsEngl.HitpLago-Html-unit!⇒HitpHtmlCunit,
specific::
• paragraph-with-sentences-doc-unit,
• paragraph-with-subparagraphs-doc-unit,
• non-sentences-doc-unit,
line-through in HitpHtmlCunit
description::
· with the-Html-element <del>.
name::
* McsEngl.HitpHtmlCunit'line-through,
* McsEngl.HitpTextStyle.line-through,
HitpHtmlCunit.Paragraph-with-sentences
description::
· for readability, we put every sentence in a new line.
<p id="idName">Sentence1.
Sentence2.
SentenceLast.
</p>
name::
* McsEngl.HitpHtmlCunit.paragraph-with-sentences,
* McsEngl.HitpHtmlCunit.sentences,
* McsEngl.HitpLago'sentences-Html-doc-unit,
HitpHtmlCunit.Paragraph-with-subparagraphs
description::
<p id="idName">Sentence1.
Sentence2.
Sentence3.
SentenceLast.
</p>
name::
* McsEngl.HitpHtmlCunit.paragraph-with-subparagraphs,
HitpHtmlCunit.non-sentences
description::
<div id="idName">
<p>Sentence1.
Sentence2.
</p>
<table>
...
</table>
<a class="clsHide" href="#idName"></a></div>
name::
* McsEngl.HitpHtmlCunit.non-sentences,
* McsEngl.HitpLago'non-sentences-Html-doc-unit,
HitpHtml'file
description::
· the-html-file is the main file of the-HitpDoc.
· it is the most whole CONTAINER of all files of the-WebApp.
· the-HitpHtml-code is this file.
· see the-example-file.
· naming:
- HitpDirnnn.last.html,
- HitpDirnnn.version.date.html, previous versions,
name::
* McsEngl.Html-file--of-HitpLago,
* McsEngl.HitpDocHtmlFile,
* McsEngl.HitpLago'file.Html,
* McsEngl.HitpHtml'file,
HitpHtml'IDs
description::
· the core concept (and first motive) of our-proposal is the-addition of ID-attributes on all HtmlElements of a-HitpDoc.
· for example:
<h1 id="idXxxx">...
<p id="idYyyy">...
· now we can-refer to any part of the-document!!!
name::
* McsEngl.HitpId, {2025-05-26}
* McsEngl.HitpLago'id!⇒HitpId, {2019-02-24},
* McsEngl.HitpHtml'id!⇒HitpId,
* McsEngl.HitpLago-id!⇒HitpId,
The-IDs must-be unique:
· you can-use as ID whatever you want.
· we sugest to begin with "id" in-order to be-distinguished from other words in the-text and do-not-contain spaces.
· for example:
id, idHeader, idLagHitpidx-income, ...
ID-Patterns:
· if the-author of a-doc uses patterns to write the-IDs of a-text-file, it helps the-reader to quickly identify the-parts of the-file.
· examples:
- idA4 (article)
- idA4P2 (paragraph)
- idP2 (Part)
- idP2C2 (Chapter)
NOTATION::
· the-ID of a-heading-element is the-ID of its section-element plus H1, H2, etc.
· this way we can-link and preview the-part of the-doc with this heading.
address-link-icon of HitpLago
description::
· the-IDs must-be visible to the-reader:
· the-reader, in-order to REFER to any part of the-document, must-know the-ID of this part of the-file.
· this can-be-done by adding a hidden element in this part of the-file that will-be-visible when we want to see it and not disturbing our text.
· but if this hidden-element is and a-link-element, then the-reader could-copy the-address of this part of the-file from the-address-bar of his browser.
· here is an-example of the simple code we have to add to reach our goal.
<p id="idYyyy">...
<a class="clsHide" href="#idYyyy"></a></p>
· with this code, when the-reader clicks|taps on content, at the-end of the clicked doc-unit appears the-ADDRESS-LINK-ICON.
· clicking on this icon, s|he can-see the-ID of this text and s|he can-copy from the-address-bar the-address of this particular part of the-text.
· the-paragraph you are-reading now has the-feature we are-talking about and you can-experiment with it.
· we can-set IDs, if we need them, on every SENTENCE in a-paragraph.
name::
* McsEngl.HitpLago'address-link-icon,
* McsEngl.HitpId'address-link-icon,
HitpHtml'links
description::
· by setting IDs in all elements of a-text, we can-refer to any part of a-document.
· then we can-use links in all places in a-text we refer to another place inside a-document or outside of it.
· law-texts are full of references.
· find the-references it is difficult and sometimes impossible.
· if the-references are "one click away", then reading law will become easier.
name::
* McsEngl.HitpLago'link,
* McsEngl.HitpHtml'link,
* McsEngl.HitpLago-link,
HitpHtml'math-formulas
description::
· using MathJax we can-have "beautiful math in all browsers".
· for example (MathML code):
,
HOW:
1. we need to add the following code:
· using MathJax version 3:
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
- no need for MathJax versions, works on both TeX and MathML input.
- example TeX: When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
another inline expression \(\sum_{n=1}^{\infty} 2^{-n} = 1\)
· old version:
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML" async></script> and
2. create TeX | mathML-code (I prefer TeX for compactness).
An easy method is to copy it from online sites like:
* http://www.wiris.com/editor/demo/en/developers#mathml-latex,
* http://www.wiris.com/editor/demo/en/chemtype,
name::
* McsEngl.HitpMath!=math-formulas-in-HitpLago,
* McsEngl.Mathnotation.synagonism.net,
* McsEngl.MathJax-Webapp,
* McsEngl.Mcshmath,
* McsEngl.Mcshmath!=Mcsh-math,
* McsEngl.Webapp.MathJax,
* McsEngl.HitpLago'math,
* McsEngl.HitpLago-math,
* McsEngl.math-in-HitpLago,
Css-code of HitpDoc
description::
· the-Css-language models the-presentation of the-archo-doc.
· we use a-Css-file\1\ for harmonization in the-appearance of documents and for the-Toc creation.
· you need the following code, inside the-Html-doc, to use it\1\:
<link rel="stylesheet" href="../dirManager/HitpM.css">
· also you can modify the-appearance of the-document by using AND your own Css-code.
name::
* McsEngl.HitpCss!=HitpLago-Css-code,
* McsEngl.HitpCss-code!⇒HitpCss,
* McsEngl.HitpLago'Css!⇒HitpCss, {2019-02-21},
* McsEngl.HitpDoc'Css-code!⇒HitpCss,
* McsEngl.HitpLago-Css!⇒HitpCss,
HitpCss'class
description::
· like the-IDs, the-names of all Css-classes begin with 'cls'.
name::
* McsEngl.clsHitp!⇒HitpCssCls, {2022-12-14},
* McsEngl.HitpLago'class-of-Css!⇒HitpCssCls,
* McsEngl.HitpLago'cls!⇒HitpCssCls, {2019-02-28},
* McsEngl.HitpCss'class!⇒HitpCssCls,
* McsEngl.HitpLago-cls!⇒HitpCssCls,
HitpCssCls.hide
description::
· this class is-used to display the-link-icon
\a\ of an-Html-element\b\ that\a\ contain the-address of this element when the-reader clicks on it\b\.
name::
* McsEngl.HitpCssCls.clsHide,
* McsEngl.HitpLago'clsHide,
* McsEngl.clsHide-of-HitpLago,
HitpCssCls.preview
description::
· links with this class, display a-preview of their info and with a second click go to that location.
name::
* McsEngl.HitpCssCls.clsPreview,
* McsEngl.HitpLago'clsPreview,
* McsEngl.clsPreview-of-HitpLago,
HitpCssCls.clicked
description::
· this class is-added on the-Html-elements clicked by the-user and adds misc functionality:
- display the-address-link-icons.
- add color on the-links in the clicked element.
name::
* McsEngl.HitpCssCls.clsClicked,
* McsEngl.HitpLago'clsClicked,
* McsEngl.clsClicked-of-HitpLago,
HitpCssCls.TocExpand
description::
· if this class is-present on idMetaWebpage_path paragraph, then when the-page is-opened the-Toc is-expanded.
name::
* McsEngl.HitpCssCls.clsTocExpand,
* McsEngl.HitpLago'clsTocExpand,
* McsEngl.clsTocExpand-of-HitpLago,
HitpCssCls.paperbook-page
description::
· it is-used on span-elements to display the-number of a-page of a-paper-book in HitpLago-format.
name::
* McsEngl.HitpCssCls.paperbook-page,
* McsEngl.HitpLago'clsPagePb,
* McsEngl.clsPagePb-of-HitpLago,
HitpLago'clsPagePb {
display: block;
text-align: right;
color: green;
}
HitpCssCls.center
description::
· classes to center text, and block or inline HtmlElements.
HitpLago'clsCenter {
text-align: center;
}
HitpLago'clsCenterBlock {
display: block;
margin-left: auto;
margin-right: auto;
}
HitpLago'clsCenterInline {
display: block;
text-align: center;
}
name::
* McsEngl.HitpLago'center-text,
* McsEngl.HitpCssCls.center,
* McsEngl.HitpLago'clsCenter,
* McsEngl.clsCenter-of-HitpLago,
HitpCssCls.button
description::
· classes on HtmlButtons.
HitpLago'clsBtn {
border-radius: 5px;
font-size: 12px;
margin: 2px 0 5px 12px;
}
HitpLago'clsBtn:hover {
background: #e0f2f7;
color: red;
}
name::
* McsEngl.HitpLago'button-class,
* McsEngl.HitpCssCls.button,
* McsEngl.HitpLago'clsBtn,
* McsEngl.clsBtn-of-HitpLago,
HitpCssCls.color
description::
· classes to set color on HtmlElements.
HitpLago'clsColorBlue {
color: #0000ff;
}
HitpLago'clsColorGreen {
color: #008000;
}
HitpLago'clsColorGreenBg {
background-color: #008000;
}
HitpLago'clsColorRed {
color: #ff0000;
}
HitpLago'clsColorYellow {
color: #FFFF00;
}
HitpLago'clsColorYellowBg {
background-color: #FFFF00;
}
name::
* McsEngl.HitpLago'color-classes,
* McsEngl.HitpCssCls.color,
* McsEngl.HitpLago'clsColor,
* McsEngl.clsColor-of-HitpLago,
HitpCssCls.font
description::
· classes that add fonts on HtmlElements.
HitpLago'clsFontGrExt {
font-family: "Palatino Linotype";
}
HitpLago'clsFontGrMg {
font-family: MgPolNewTimes;
font-size: 16px;
}
HitpLago'clsFontSerif {
font-family: Serif, "Times New Roman", Georgia;
}
HitpLago'clsFontSansserif {
font-family: SansSerif, "Microsoft Sans Serif", Arial, Dialog, Tahoma;
}
HitpLago'clsFontMonospaced {
font-family: Monospaced, "Courier New", Courier;
}
HitpLago'clsFontScript {
font-family: Script "Monotype Corsiva";
}
HitpLago'clsFontDecorative {
font-family: Wingdings;
}
name::
* McsEngl.HitpLago'font-classes,
* McsEngl.HitpCssCls.font,
* McsEngl.HitpLago'clsFont,
* McsEngl.clsFont-of-HitpLago,
HitpCssCls.size
description::
· classes to add font-sizes on HtmlElements.
HitpLago'clsSizeSmall {
font-size: small;
}
HitpLago'clsSizeSmallX {
font-size: x-small;
}
HitpLago'clsSizeMedium {
font-size: large;
}
HitpLago'clsSizeLarge {
font-size: large;
font-weight: bold;
}
HitpLago'clsSizeLargeX {
font-size: x-large;
font-weight: bold;
}
name::
* McsEngl.HitpLago'size-of-font,
* McsEngl.HitpCssCls.size,
* McsEngl.HitpLago'clsSize,
* McsEngl.clsSize-of-HitpLago,
HitpCssCls.BIU
description::
· classes to add font-weight on HtmlElements.
HitpLago'clsB {
/* use strong element, not this */
font-weight: bold;
}
===
· also use the-Html-element <strong>.
HitpLago'clsBU {
font-weight: bold;
text-decoration: underline;
}
HitpLago'clsI {
font-style: italic;
}
===
· also use the-Html-element <em>.
HitpLago'clsU {
text-decoration: underline;
}
name::
* McsEngl.HitpLago'bold-class,
* McsEngl.HitpLago'italic-class,
* McsEngl.HitpLago'underline-class,
* McsEngl.HitpCssCls.bold,
* McsEngl.HitpCssCls.italic,
* McsEngl.HitpCssCls.underline,
* McsEngl.HitpLago'clsB,
* McsEngl.HitpLago'clsBU,
* McsEngl.HitpLago'clsI,
* McsEngl.HitpLago'clsU,
* McsEngl.clsBIU-of-HitpLago,
HitpCss'file
description::
· the-Css-code has 3 files in dirManager.
· the-HitpM.css, main file, and 2 font files, HitpFilFntUbuntuMonoRegular.ttf and HitpFilIcnFa463.woff2 (Icons Font Awesome 4.6.3)
· you can-download them from github-(https://github.com/synagonism/hitp/) or from my-Hitp-example-site-(https://synagonism.net/dirHitp/) here:
- HitpM.css,
- HitpFilFntUbuntuMonoRegular.ttf,
- HitpFilIcnFa463.woff2,
name::
* McsEngl.HitpCss'file,
* McsEngl.HitpDocFile.Css,
* McsEngl.HitpFilFntUbuntuMonoRegular.ttf,
* McsEngl.HitpFilIcnFa463.woff2,
* McsEngl.HitpM.css,
JavaScript-code of HitpDoc
description::
Browser-JavaScript-language models the-information processing on the-HitpDoc.
- creates the-Toc and inserts it into the-page.
- makes the-width of Toc-container dynamic.
- adds preferences on the-page.
- adds the-site-structure.
- adds the-page-path.
- ...
name::
* McsEngl.HitpLago'browser-JavaScript-code!⇒HitpJsb,
* McsEngl.HitpLago'JavaScript-code!⇒HitpJsb,
* McsEngl.HitpLago'JS-code!⇒HitpJsb,
* McsEngl.HitpJsb!=HitpLago-JavaScript-browser-code,
* McsEngl.HitpJsb-code!⇒HitpJsb,
* McsEngl.HitpDoc'browser-JavaScript-code!⇒HitpJsb,
* McsEngl.HitpDoc'JavaScript-code!⇒HitpJsb,
* McsEngl.HitpDoc'JS-code!⇒HitpJsb,
* McsEngl.HitpDoc'Jsbr-code!⇒HitpJsb,
* McsEngl.HitpLago'Jsbr!⇒HitpJsb, {2019-02-21},
* McsEngl.HitpLago-Jsbr!⇒HitpJsb,
* McsEngl.HitpLago--Jsbr-code!⇒HitpJsb,
* McsEngl.JavaScript-code--of-HitpLago!⇒HitpJsb,
* McsEngl.JavaScript-code--of-HitpLago!⇒HitpJsb,
* McsEngl.Jsbr-code--of-HitpLago!⇒HitpJsb,
HitpJsb'file
description::
HitpM.js is the-JavaScript-code you need to create a-HitpWebAppDoc.
· it is part of the-Html-doc.
· it is-included using the-script-element at the-end of the-body-element:
<script type="module">
import * as oHitp from '../dirManager/HitpM.js'
</script>
· so, HitpMisc000.last.html, HitpM.css and HitpM.js is the-main code needed to create HitpDocs, and it is free (MIT license).
name::
* McsEngl.HitpDocFile.JavaScript,
* McsEngl.HitpLago'JavaScript-file,
* McsEngl.HitpJsb'file,
* McsEngl.HitpM.js,
HitpJsb'API
description::
· a-HitpLago-Jsbr-document has an-API, like any programing-language document, with oHitp the-most-whole-object.
name::
* McsEngl.API.HitpLago,
* McsEngl.HitpAPI,
* McsEngl.HitpLago'API,
* McsEngl.HitpJsb'API,
repository::
* https://github.com/synagonism/hitp,
oHitp of HitpAPI
description::
oHitp is the-most-whole-object of the-HitpLago-JavaScript-document.
name::
* McsEngl.HitpLago'API'oHitp!⇒oHitp,
* McsEngl.HitpLago'oHitp!⇒oHitp,
* McsEngl.oHitp, {2019-02-24},
member::
// 20-0-1.2025-05-25 console.log(Object.getOwnPropertyNames(oHitp).sort().join(', '))
[aSuggestions, aVersion, aaNamidxfileRoot, bEdge, bFirefox, fContainersInsert, fEvtPreview, fSearchname, fTocTriCreate, fTocTriHighlightNode, nCfgPageinfoWidth, oEltCnrPreviewDiv, oTriUl, sCfgHomeLocal, sPathHitp]
// 17-7-7.2021-04-28 Object.getOwnPropertyNames(oHitp).sort().join(', ')
[aNamidxRoot, aSuggestions, aVersion, bEdge, bFirefox, fContainersInsert, fObjvalRKey, fTocTriCreate, fTocTriHighlightNode, nCfgPageinfoWidth, oEltClicked, oEltSitemenuUl, oTriUl, sCfgHomeLocal, sNamidx, sPathHitp, sPathHitpmenu, sQrslrAClk, sQrslrAClkLast, sSrchCrnt, sSrchNext]
// 16-5-0.2017-11-09 Object.getOwnPropertyNames(oHitp).sort().join(', ')
[bEdge, bFirefox, bSite, fContainersInsert, fObjvalRKey, fTocTriCreate, fTocTriHighlightNode, nCfgPageinfoWidth, oEltClicked, oTriUl, sCfgHomeLocal, sQrAClk, sQrAClkLast, sVersion]
// Object.getOwnPropertyNames(oHitp.__proto__).sort().join(', ')
[__defineGetter__, __defineSetter__, __lookupGetter__, __lookupSetter__, __proto__, constructor, hasOwnProperty, isPrototypeOf, propertyIsEnumerable, toLocaleString, toString, valueOf]
aSuggestions of oHitp
description::
· aSuggestions is a-JavaScript-array-object that contains the-arrays 'HitpName-IndexFile' we are-reading each time we search for a-name.
name::
* McsEngl.aSuggestions//oHitp,
* McsEngl.oHitp/aSuggestions,
aVersion of oHitp
description::
· contains the-versions of HitpM.js.
[
'hitp.js.17-7-7.2021-04-28: dirMcs',
'hitp.js.17-7-6.2021-04-02: dirMcs',
'hitp.js.17-7-5.2021-04-02: lagLang',
'hitp.js.17-7-4.2021-04-01: langoSinago-path',
'hitp.js.17-7-3.2021-01-04: langoSinago',
'hitp.js.17-7-2.2020-05-24: Greek search accents',
'hitp.js.17-7-1.2020-05-05: F2, ctrl+F2',
'hitp.js.17-6-2.2019-12-14: site-search',
'hitp.js.17-6-1.2019-09-09: search-info',
'hitp.js.17-6-0.2019-09-08: langoKomo-sensorial-concept',
'hitp.js.17-5-0.2019-09-01: langoKamo',
'hitp.js.17-4-0.2019-08-28: scrollTop',
'hitp.js.17-3-0.2019-02-19.2019-03-05: main-name-searching',
'hitp.js.17-2-1.2018-10-08: filMcs.last.html',
'hitp.js.17-2-0.2018-09-21: name-notation',
'hitp.js.17-1-0.2018-09-16: location.hash',
'hitp.js.17-0-1.2018-09-15: home-icon',
'hitp.js.17-0-0.2018-09-15: search-scalability',
'hitp.js.16-5-2.2018-01-23',
'hitp.js.16-5-1.2018-01-06: Ächain-network',
'hitp.js.16-5-0.2017-11-10: arrow keys in search',
'hitp.js.16-4-2.2017-10-17: no type-ahead in search',
'hitp.js.16-4-1.2017-06-23: greek search',
'hitp.js.16-3-5.2017-06-18: type after type-ahead, title-help, cnrInf-width',
'hitp.js.16-2-0.2017-06-07: search-toc-show-easy',
'hitp.js.16-1-2.2017-06-07: search-icon',
'hitp.js.16.2017-06-05.search (15-6): hitp.16.2017-06-05.js',
'hitp.js.15.2016-10-27.any-machine (14-9): hitp.15.2016-10-27.js',
'hitp.js.14.2016-06-09.table-content-tree (13): hitp.14.2016-06-09.js',
'hitp.js.13.2016-06-07.preview (12-11): hitp.13.2016-06-07.js',
'hitp.js.12.2016-01-24.toc-icn-img (11.9): hitp.2016.01.24.12.js',
'hitp.js.11.2015-10-26.preferences: hitp.2015.10.26.11.js',
'hitp.js.10.2014-08-05.valuenames: hitp.2014.08.05.10.js',
'hitp.js.9.2014-08-02.no-jQuery: hitp.2014.08.02.9.js',
'hitp.js.8.2014-01-09.toc-on-hovering: hitp.2014.01.09.8.js',
'hitp.js.7.2013-11-06.tabs: hitp.2013.11.06.7.js',
'hitp.js.6.2013-08-21.site-structure: hitp.2013.08.21.6.js',
'hitp.js.previous: hitp.2013.07.15.js (toc-ul-specific, hitp-obj)',
'hitp.js.previous: /hitp/hitp.2013.06.29.js (hitp-dir)',
'hitp.js.previous: toc.2013.05.30.js (section id)',
'hitp.js.previous: toc.2013.04.19.js (JSLint ok)',
'hitp.js.previous: toc.2013.04.14.js (preview links)',
'hitp.js.previous: toc.2013.04.07.js (button expand|collapse)',
'hitp.js.previous: toc.2013.04.05.js (toc scrolls to highlited)',
'hitp.js.previous: toc.2013.04.04.js (goes click location)',
'hitp.js.previous: toc.2013.04.01.js (toc on any browser)',
'hitp.js.previous: 2010.12.06 (toc on chrome)'
]
aaNamidxfileRoot of oHitp
description::
· aaNamidxfileRoot is a-JavaScript-array that contains the-namidx.lagRoot.json if exists.
name::
* McsEngl.aaNamidxfileRoot//oHitp,
* McsEngl.oHitp/aaNamidxfileRoot,
bEdge of oHitp
bFirefox of oHitp
description::
· boolean if the-runtime is the-Firefox-browser.
fContainersInsert of oHitp
description::
· creates new containers and inserts them in the-body-element:
- Top-cnr for title and menus.
- Main-cnr for page-info and page-content.
- Width-cnr for managing the-width of page-info.
- Site-cnr for containing the-site-icon.
- Preview-cnr to display link-previews.
name::
* McsEngl.fContainersInsert//oHitp,
* McsEngl.oHitp/fContainersInsert,
fEvtClickContent of fContainersInsert
description::
· fEvtClickContent is a-click-event added to all content-Html-elements.
· highlights click position on table-of-contents.
· highlights links on click element.
· removes popup,
· removes previous highlighted links.
name::
* McsEngl.fEvtClickContent//fContainersInsert//oHitp,
* McsEngl.oHitp'fContainersInsert/fEvtClickContent,
fEvtMouseoverContent of fContainersInsert
description::
· fEvtMouseoverContent is a-mouseover-event added to all content-Html-elements.
· highlights mouseover position on table-of-contents.
name::
* McsEngl.fEvtMouseoverContent//fContainersInsert//oHitp,
* McsEngl.oHitp'fContainersInsert/fEvtMouseoverContent,
fEvtLink of fContainersInsert
description::
· fEvtLink adds custom click-events on the-links inside the Html-elemens we click.
name::
* McsEngl.fEvtLink//fContainersInsert//oHitp,
* McsEngl.oHitp'fContainersInsert/fEvtLink,
fSearchSuggest of fContainersInsert
description::
· doing: suggests names of structured-concepts, that BEGIN with a-search-name.
· input: nothing or string of namidx to search: lagEng03si_2_0, root, ...
name::
* McsEngl.fSearchSuggest//fContainersInsert//oHitp,
* McsEngl.oHitp'fContainersInsert/fSearchSuggest,
fSSNamidxDisplay of fSearchSuggest
description::
· doing: display names of a-namidx.
· input: sNamidxIn: lagEll01alfa, lagEng02bi, lagEng03si_0.
name::
* McsEngl.HitpLago'fSSNamidxDisplay,
* McsEngl.oHitp'fSSNamidxDisplay,
fSSNamidxRefManage of fSearchSuggest
description::
· doing: decides what to do with a-reference-namidx.
· input: lagEng03si_0, lagEng03si_2_0.
name::
* McsEngl.HitpLago'fSSNamidxRefManage,
* McsEngl.oHitp'fSSNamidxRefManage,
fSSNamidxRefDisplay of fSearchSuggest
description::
· doing: display names of a-reference-namidx, make them clickable, highligts first.
· input: sNamidxRefIn: lagEng03si_0, ..
name::
* McsEngl.HitpLago'fSSNamidxRefDisplay,
* McsEngl.oHitp'fSSNamidxRefDisplay,
fSSNamidx_pathFind of fSearchSuggest
description::
· input: lagEng01ei, lagEll01alfa.
· output: site/dirMcs/dirNamidx/dirLagEng/namidx.lagEng01ei.json.
name::
* McsEngl.HitpLago'fSSNamidx_pathFind,
* McsEngl.oHitp'fSSNamidx_pathFind,
fSSEvtPreview of fSearchSuggest
description::
· doing: adds preview-event on links in search-sugestions and adds its text on search-input.
name::
* McsEngl.HitpLago'fSSEvtPreview,
* McsEngl.oHitp'fSSEvtPreview,
fSSEscapeRs of fSearchSuggest
description::
· input: a-search-name string.
· output: the same string escaped (for '+' '.' '|' '(' '*') to use it as a-regexp without special chars.
name::
* McsEngl.HitpLago'fSSEscapeRs,
* McsEngl.oHitp'fSSEscapeRs,
oEltBody of fContainersInsert
description::
· oEltBody-(body-container) is the-document.body-JavaScript-object representing the-Html-body-element of the-WebApp.
name::
* McsEngl.HitpLago'body-container, {2019-02-24},
* McsEngl.oEltBody//fContainersInsert//oHitp,
* McsEngl.oHitp'fContainersInsert/oEltBody,
part::
* top-container,
* main-container,
* site-container,
* width-container,
* preview-container,
oEltCnrTopDiv of fContainersInsert
description::
· oEltCnrTopDiv-(top-container) is a-JavaScript-Html-div-object that contains the-title of the-page plus the-icons of site, home, search and width.
name::
* McsEngl.containerHitp.top//oEltBody//HitpLago,
* McsEngl.HitpLago'body-container'top-container,
* McsEngl.HitpLago'container.top,
* McsEngl.HitpLago'container.oEltCnrTopDiv,
* McsEngl.HitpLago'page-title--bar,
* McsEngl.HitpLago'title-bar,
* McsEngl.HitpLago'title-container,
* McsEngl.HitpLago'top-container, {2019-02-24},
* McsEngl.HitpLago'oEltCnrTopDiv.fContainersInsert,
* McsEngl.oEltCnrTopDiv//fContainersInsert//oHitp,
* McsEngl.oHitp'fContainersInsert/oEltCnrTopDiv,
* McsEngl.top-container//oEltBody//HitpLago,
whole-chain::
* oEltBody,
oEltCnrMainDiv of fContainersInsert
description::
· oEltCnrMainDiv-(main-container) is a-JavaScript-Html-div-object that contains the-content of the-page and info about it.
name::
* McsEngl.containerHitp.main//oEltBody//HitpLago,
* McsEngl.HitpLago'body-container'main-container,
* McsEngl.HitpLago'container.main,
* McsEngl.HitpLago'container.oEltCnrMainDiv,
* McsEngl.HitpLago'main-container, {2019-02-24},
* McsEngl.HitpLago'oEltCnrMainDiv.fContainersInsert,
* McsEngl.main-container//oEltBody//HitpLago,
* McsEngl.oEltCnrMainDiv//fContainersInsert//oHitp,
* McsEngl.oHitp'fContainersInsert/oEltCnrMainDiv,
part::
* oEltCnrMainContentDiv,
* oEltCnrMainInfoDiv,
whole-chain::
* oEltBody,
oEltCnrMainContentDiv of fContainersInsert
description::
· oEltCnrMainContentDiv is a-JavaScript-Html-div-object that contains the-content of the-page.
name::
* McsEngl.containerHitp.content//oEltCnrMainDiv//HitpLago,
* McsEngl.content-container//oEltCnrMainDiv//HitpLago,
* McsEngl.HitpLago'container.content,
* McsEngl.HitpLago'container.oEltCnrMainContentDiv,
* McsEngl.HitpLago'content-container, {2019-02-24},
* McsEngl.HitpLago'main-container'content,
* McsEngl.HitpLago'oEltCnrMainContentDiv.fContainersInsert,
* McsEngl.oEltCnrMainContentDiv//fContainersInsert//oHitp,
* McsEngl.oHitp'fContainersInsert/oEltCnrMainContentDiv,
whole-tree-of-HitpLago'content-container::
* HitpLago'main-container,
oEltCnrMainInfoDiv of fContainersInsert
description::
· oEltCnrMainInfoDiv-(the-info-container) is a-JavaScript-Html-div-object that contains information about the-page such as table-of-contents and search tabs.
name::
* McsEngl.containerHitp.info//oEltCnrMainDiv//HitpLago,
* McsEngl.info-container//oEltCnrMainDiv//HitpLago,
* McsEngl.HitpLago'container.page-info,
* McsEngl.HitpLago'container.oEltCnrMainInfoDiv,
* McsEngl.HitpLago'info-container, {2019-02-23},
* McsEngl.HitpLago'main-container'info,
* McsEngl.HitpLago'page-info-container,
* McsEngl.HitpLago'oEltCnrMainInfoDiv.fContainersInsert,
* McsEngl.oEltCnrMainInfoDiv//fContainersInsert//oHitp,
* McsEngl.oHitp'fContainersInsert/oEltCnrMainInfoDiv,
whole-chain::
* HitpLago'main-container,
whole-path-container of info-container
description::
· oEltPginfPathP is a-JavaScript-Html-p-object that contains the-whole-path of the-page, ie the-path of the-directories that contain this page.
· contains the-innerHTML of the-element with id=idMetaWebpage_path.
name::
* McsEngl.HitpLago'info-container'page-whole-path,
* McsEngl.HitpLago'page-whole-path--of--info-container,
* McsEngl.HitpLago'whole-path--of--info-container,
* McsEngl.HitpLago'oEltPginfPathP-of-fContainersInsert,
* McsEngl.oEltPginfPathP//fContainersInsert//oHitp,
* McsEngl.oHitp'fContainersInsert/oEltPginfPathP,
whole-chain::
* oEltCnrMainInfoDiv,
tabs of info-container
description::
· page-info-(oEltCnrMainInfoDiv) contains tabs with misc information.
· ALL HitpLago-pages display the-table-of-contents-tab.
· anyone can-add his own tab.
· HitpLago-Mcs contain and the-search-tab.
· to add a-tab you need to add code in 2 containers:
a) in tabs-headers (oEltPginfTabHeadersUl) you have to add the-title of the-tab as a-list-item-li.
b) in tabs-content (oEltPginfTabCntDiv) you have to add a-div-container with tab's information.
name::
* McsEngl.HitpLago'info-container'tabs,
* McsEngl.HitpLago'page-info'tabs,
* McsEngl.HitpLago'tabs-of-fContainersInsert,
* McsEngl.HitpLago'fContainersInsert'tabs,
* McsEngl.oHitp'fContainersInsert'tabs,
* McsEngl.oHitp'tabs-container--of-fContainersInsert,
whole-chain::
* oEltCnrMainInfoDiv,
description::
· oEltPginfTabHeadersUl is a-JavaScript-Html-ul-object that contains the-headers of the-tabs we have inside the-page-info-container.
=== code
oEltPginfTabHeadersUl.innerHTML =
'<li class="clsTabActive"><a href="#idTabCntTocDiv">page-Toc</a></li>' +
'<li><a href="#idTabCntSrchDiv">search</a></li>'
name::
* McsEngl.HitpLago'fContainersInsert'oEltPginfTabHeadersUl,
* McsEngl.HitpLago'oEltPginfTabHeadersUl-of-fContainersInsert,
* McsEngl.HitpLago'tab-headers-container,
* McsEngl.oEltPginfTabHeadersUl//fContainersInsert//oHitp,
* McsEngl.oHitp'fContainersInsert/oEltPginfTabHeadersUl,
whole-chain::
* tabs-container,
description::
· oEltPginfTabCntDiv is a-JavaScript-Html-div-object that contain the-contents of the-tabs of the-page-info-container.
name::
* McsEngl.HitpLago'tab-content-container,
* McsEngl.HitpLago'oEltPginfTabCntDiv-of-fContainersInsert,
* McsEngl.oHitp'oEltPginfTabCntDiv-of-fContainersInsert,
* McsEngl.HitpLago'fContainersInsert'oEltPginfTabCntDiv,
* McsEngl.oHitp'fContainersInsert'oEltPginfTabCntDiv,
Toc-tab of info-container
description::
· ALL HitpLago-pages contain a-table-of-contents-tab which displays the-table-of-contents of the-page, font preferences and notes on how to work with the-page.
name::
* McsEngl.HitpLago'info-container'Toc-tab,
* McsEngl.HitpLago'tab.Toc,
* McsEngl.HitpLago'Toc-tab,
part::
* oEltPginfTabHeadersUl,
* tabs-content-container,
* oEltTabCntTocDiv,
* oEltTabCntTocExpBtn,
* oEltTabCntTocCpsBtn,
* table-of-contents-tree,
* oEltTabCntTocPrfDiv,
* oEltTabCntTocNotP,
whole-chain::
* oEltCnrMainInfoDiv,
description::
· oEltTabCntTocDiv is a-JavaScript-Html-div-object that contains the-content of the-Toc-tab.
name::
* McsEngl.HitpLago'Toc-content-container,
* McsEngl.HitpLago'oEltTabCntTocDiv-of-fContainersInsert,
* McsEngl.oHitp'oEltTabCntTocDiv-of-fContainersInsert,
* McsEngl.HitpLago'fContainersInsert'oEltTabCntTocDiv,
* McsEngl.oHitp'fContainersInsert'oEltTabCntTocDiv,
whole-chain::
* tabs-content-container,
description::
· oEltTabCntTocExpBtn is a-JavaScript-Html-input-object that represents the-expand-all-button which holds the-click-event that expands all nodes of the-table-of-contents tree.
name::
* McsEngl.HitpLago'Toc-expand-all-button,
* McsEngl.HitpLago'oEltTabCntTocExpBtn-of-fContainersInsert,
* McsEngl.oHitp'oEltTabCntTocExpBtn-of-fContainersInsert,
* McsEngl.HitpLago'fContainersInsert'oEltTabCntTocExpBtn,
* McsEngl.oHitp'fContainersInsert'oEltTabCntTocExpBtn,
description::
· oEltTabCntTocCpsBtn is a-JavaScript-Html-input-object that represents the-collapse-all-button which holds the-click-event that collaps all nodes of the-table-of-contents tree.
name::
* McsEngl.HitpLago'Toc-collapse-all-button,
* McsEngl.HitpLago'oEltTabCntTocCpsBtn-of-fContainersInsert,
* McsEngl.oHitp'oEltTabCntTocCpsBtn-of-fContainersInsert,
* McsEngl.HitpLago'fContainersInsert'oEltTabCntTocCpsBtn,
* McsEngl.oHitp'fContainersInsert'oEltTabCntTocCpsBtn,
description::
· preferences-oEltTabCntTocPrfDiv is a-JavaScript-Html-div-object that contains a-fieldset-element with radio-buttons for a-user to choose the type of font s|he preferes to read the-page.
name::
* McsEngl.HitpLago'preferences,
* McsEngl.HitpLago'oEltTabCntTocPrfDiv-of-fContainersInsert,
* McsEngl.oHitp'oEltTabCntTocPrfDiv-of-fContainersInsert,
* McsEngl.HitpLago'fContainersInsert'oEltTabCntTocPrfDiv,
* McsEngl.oHitp'fContainersInsert'oEltTabCntTocPrfDiv,
description::
· oEltTabCntTocNotP is a-JavaScript-Html-p-object with notes on how to read the-page.
name::
* McsEngl.HitpLago'oEltTabCntTocNotP-of-fContainersInsert,
* McsEngl.oHitp'oEltTabCntTocNotP-of-fContainersInsert,
* McsEngl.HitpLago'fContainersInsert'oEltTabCntTocNotP,
* McsEngl.oHitp'fContainersInsert'oEltTabCntTocNotP,
search-tab of info-container
description::
· HitpLago-Mcs-pages contain and a-search-tab with an-input-field to write names of structured-concepts-Mcs we want to find and a-ol-Html-element to hold found names of concepts.
name::
* McsEngl.HitpLago'info-container'search-tab,
* McsEngl.HitpLago'tab.search,
* McsEngl.HitpLago'search-tab,
whole-chain::
* oEltCnrMainInfoDiv,
description::
· oEltTabCntSrchDiv-(content-container) is a-JavaScript-Html-div-object that contains the-content of the-search-tab.
name::
* McsEngl.HitpLago'fContainersInsert'oEltTabCntSrchDiv,
* McsEngl.HitpLago'oEltTabCntSrchDiv-of-fContainersInsert,
* McsEngl.HitpLago'search-tab'content-container,
* McsEngl.oHitp'fContainersInsert'oEltTabCntSrchDiv,
* McsEngl.oHitp'oEltTabCntSrchDiv-of-fContainersInsert,
whole-chain::
* tabs-content-container,
description::
· oEltTabCntSrchLbl-(language-label) is a-JavaScript-Html-label-object that contains the-'language:' label for the-language-list.
description::
· oEltTabCntSrchSlt-(language-selection-list) is a-JavaScript-Html-select-object that contains the-languages on which we want to search for a-name.
name::
* McsEngl.HitpLago'search-tab'language-selection-list,
description::
· oEltTabCntSrchP-(number-of-suggestions-found) is a-JavaScript-Html-p-element that contains the-number of names found.
· example content: 10 / 335 N..O / 178,215 English / 179,888 total NAMES
name::
* McsEngl.HitpLago'fContainersInsert'oEltTabCntSrchP,
* McsEngl.HitpLago'oEltTabCntSrchP-of-fContainersInsert,
* McsEngl.HitpLago'search-tab'number-of-suggestions-found-container,
* McsEngl.oHitp'fContainersInsert'oEltTabCntSrchP,
* McsEngl.oHitp'oEltTabCntSrchP-of-fContainersInsert,
description::
· oEltTabCntSrchLblChk-(checkbox) is a-JavaScript-Html-label-object that contains a-checkbox with the-'show All, not 999 (slow)' label
description::
· oEltTabCntSrchIpt-(input-text-box) is a-JavaScript-Html-input-object where a-user writes the-name of the-structured-concept-Mcs s|he wants to find.
· it has 2 event-listeners:
a) on keyup search for names begining with what is-written and
b) an-enter-event to go on highlighted name.
name::
* McsEngl.HitpLago'fContainersInsert'oEltTabCntSrchIpt,
* McsEngl.HitpLago'oEltTabCntSrchIpt-of-fContainersInsert,
* McsEngl.HitpLago'search-tab'input-text-box,
* McsEngl.HitpLago'search-text-box,
* McsEngl.oHitp'fContainersInsert'oEltTabCntSrchIpt,
* McsEngl.oHitp'oEltTabCntSrchIpt-of-fContainersInsert,
description::
· search-name is the-name we write into the-search-text-box to find its concept.
name::
* McsEngl.HitpLago'search-name,
* McsEngl.HitpLago'search-tab'input-text-string,
description::
· oEltTabCntSrchOl-(suggestions-ordered-list) is a-JavaScript-Html-ol-object that contains search-suggestions.
· on arrow-down and arrow-up highlights next suggestions.
name::
* McsEngl.HitpLago'fContainersInsert'oEltTabCntSrchOl,
* McsEngl.HitpLago'oEltTabCntSrchOl-of-fContainersInsert,
* McsEngl.HitpLago'search-tab'suggestions-ordered-list,
* McsEngl.oHitp'fContainersInsert'oEltTabCntSrchOl,
* McsEngl.oHitp'oEltTabCntSrchOl-of-fContainersInsert,
whole-chain::
* tab-search-content-container,
oEltCnrWidthDiv of fContainersInsert
description::
· page-info-width-container-(oEltCnrWidthDiv) is a-JavaScript-Html-div-object that contains the-settings for the-width of the-page-info-container.
name::
* McsEngl.containerHitp.width//oEltBody//HitpLago,
* McsEngl.HitpLago'container.page-info-width,
* McsEngl.HitpLago'container.width,
* McsEngl.HitpLago'container.oEltCnrWidthDiv,
* McsEngl.HitpLago'fContainersInsert'oEltCnrWidthDiv,
* McsEngl.HitpLago'oEltCnrWidthDiv-of-fContainersInsert,
* McsEngl.HitpLago'width-container,
* McsEngl.oHitp'fContainersInsert'oEltCnrWidthDiv,
* McsEngl.oHitp'oEltCnrWidthDiv-of-fContainersInsert,
* McsEngl.width-container//oEltBody//HitpLago,
whole-chain::
* oEltBody,
oEltCnrSiteDiv of fContainersInsert
description::
· site-structure-container-(oEltCnrSiteDiv) is a-JavaScript-Html-div-object that contains the-site-structure-list.
name::
* McsEngl.containerHitp.site//oEltBody//HitpLago,
* McsEngl.HitpLago'container.site-structure,
* McsEngl.HitpLago'container.oEltCnrSiteDiv,
* McsEngl.HitpLago'fContainersInsert'oEltCnrSiteDiv,
* McsEngl.HitpLago'oEltCnrSiteDiv-of-fContainersInsert,
* McsEngl.HitpLago'site-structure--container,
* McsEngl.oHitp'fContainersInsert'oEltCnrSiteDiv,
* McsEngl.oHitp'oEltCnrSiteDiv-of-fContainersInsert,
* McsEngl.site-container//oEltBody//HitpLago,
whole-chain::
* oEltBody,
fEvtPreview of oHitp
description::
· fEvtPreview is an-event-listener we add on clsPreview-links to show a-preview.
name::
* McsEngl.fEvtPreview//oHitp,
* McsEngl.oHitp/fEvtPreview,
fSearchname of oHitp
description::
· fSearchname searches for a-name of a-language.
name::
* McsEngl.fSearchname//oHitp,
* McsEngl.oHitp/fSearchname,
fTocTriCreate of oHitp
description::
Returns a string html-ul-element that holds the-Toc-tree with the-headings of the-page.
<ul id="idTocTri" class="clsTreeUl">
<li><a class="clsPreview" href="#idHeader">SynAgonism</a>
<ul>
<li><a href="#heading">heading</a><li>
<li><a href="#heading">heading</a><li>
</ul>
<li>
</ul>
name::
* McsEngl.fTocTriCreate//oHitp,
* McsEngl.oHitp/fTocTriCreate,
fTocTriHighlightNode of oHitp
description::
· Highlights ONE item in Toc-list
name::
* McsEngl.fTocTriHighlightNode//oHitp,
* McsEngl.oHitp/fTocTriHighlightNode,
nCfgPageinfoWidth of oHitp
description::
· config-variable which contains the-number of the-width of page-info-container.
· default 30.
name::
* McsEngl.nCfgPageinfoWidth//oHitp,
* McsEngl.oHitp/nCfgPageinfoWidth,
oEltCnrPreviewDiv of oHitp
description::
· oEltCnrPreviewDiv is a-JavaScript-Html-div-object that contains previews of links.
name::
* McsEngl.HitpLago'container.preview,
* McsEngl.HitpLago'container.oEltCnrPreviewDiv,
* McsEngl.HitpLago'fContainersInsert'oEltCnrPreviewDiv,
* McsEngl.HitpLago'oEltCnrPreviewDiv-of-fContainersInsert,
* McsEngl.HitpLago'preview-container,
* McsEngl.oEltCnrPreviewDiv//oHitp,
* McsEngl.oHitp/oEltCnrPreviewDiv,
* McsEngl.oHitp'oEltCnrPreviewDiv-of-fContainersInsert,
* McsEngl.preview-container//oEltBody//HitpLago,
whole-chain::
* oEltBody,
oTriUl of oHitp
description::
· contains functionality to manage collapsible-trees, from unordered-lists with clsTreeUl.
name::
* McsEngl.oHitp/oTriUl,
* McsEngl.oTriUl//oHitp,
part::
* fTriUlCreate,
* fTriUlToggleLi,
* fTriUlCollapseAll,
* fTriUlExpandAll,
* fTriUlExpandLevel1,
oTriUl.fTriUlCreate
description::
· creates collapsible-trees the-Html-unorderd-lists with clsTreeUl.
· if input is a-JavaScript-object of an-Html-unorderd-list, then it creates one tree, the-input.
· if input is none, it creates all these lists to trees.
name::
* McsEngl.fTriUlCreate//oTriUl//oHitp,
* McsEngl.oHitp'oTriUl/fTriUlCreate,
oTriUl.fTriUlToggleLi
description::
· expands or collapses an input list-item.
name::
* McsEngl.fTriUlToggleLi//oTriUl//oHitp,
* McsEngl.oHitp'oTriUl/fTriUlToggleLi,
oTriUl.fTriUlCollapseAll
description::
· collapses all list-items of tree with given id.
name::
* McsEngl.fTriUlCollapseAll//oTriUl//oHitp,
* McsEngl.oHitp'oTriUl/fTriUlCollapseAll,
oTriUl.fTriUlExpandAll
description::
· expands all list-items of tree with given id.
name::
* McsEngl.fTriUlExpandAll//oTriUl//oHitp,
* McsEngl.oHitp'oTriUl/fTriUlExpandAll,
oTriUl.fTriUlExpandLevel1
description::
· expands the-first Level of ul-tree with given id.
name::
* McsEngl.fTriUlExpandLevel1//oTriUl//oHitp,
* McsEngl.oHitp'oTriUl/fTriUlExpandLevel1,
sCfgHomeLocal of oHitp
description::
· config-variable, contains the-string of the-local-directory of the-site.
· example: /dirWstSgm/dirHitp/
name::
* McsEngl.oHitp/sCfgHomeLocal,
* McsEngl.sCfgHomeLocal//oHitp,
sPathHitp of oHitp
description::
· sPathHitp contains the-path of a-HitpLago-site:
- no-server: ''
- server.local: location.origin + oHitp.sCfgHomeLocal
- server.online: location.origin + '/'
name::
* McsEngl.oHitp/sPathHitp,
* McsEngl.sPathHitp//oHitp,
old-code of oHitp
oEltClicked of oHitp
description::
· holds the-object of the-Html-element a-user clicks on.
name::
* McsEngl.oEltClicked/oHitp,
* McsEngl.oHitp/oEltClicked,
sNamidx of oHitp
description::
· sNamidx contains the-string of the-name-index-file we want to search for names.
· only the middle part eg 'lagRoot' for 'namidx.lagRoot.json' or 'lagEng02bi' for 'namidx.lagEng02bi.json'.
sSrchCrnt of oHitp
description::
· contains the-index we are-searching now, eg A, char.A, G, ...
· we display it at suggestions-found-container.
name::
* McsEngl.oHitp/sSrchCrnt,
* McsEngl.sSrchCrnt//oHitp,
sSrchNext of oHitp
description::
· contains the NEXT index from which we are-searching now, eg B, char.A, G, ...
· we display it at suggestions-found-container.
name::
* McsEngl.oHitp/sSrchNext,
* McsEngl.sSrchNext//oHitp,
sQrslrAClk of oHitp
description::
· selector for a-elements with clsClickCnt
name::
* McsEngl.oHitp/sQrslrAClk,
* McsEngl.sQrslrAClk//oHitp,
sQrslrAClkLast of oHitp
description::
· last selector for a-elements with clsClickCnt.
name::
* McsEngl.oHitp/sQrslrAClkLast,
* McsEngl.sQrslrAClk//oHitp,
HitpJsb'table-of-contents
description::
· when you are-reading text on a-computer-screen you are-losing your reading-position.
· HitpDocs automatically create the-table-of-contents-tree (Toc) of the-doc of the-page and show your reading-position.
· the-attributes of HitpLago-Toc are:
* It is expandable,
* There is two-way communication between the-Toc and the-content,
- By clicking on the-Toc, goes to that heading in the-content.
- By clicking|hovering on content, this content position is highlited in the-Toc and its parents are only expanded, giving to the-reader the big picture of the-position s|he is-reading.
· thus the-Toc improves the-readability of big documents.
* the-width of Toc changes from the-top right icon.
· my previous approach was the-creation of a-Chrome-extension, my Table-of-contents-crx which creates a-Toc on any page with headings only in Chrome.
name::
* McsEngl.HitpJsb'table-of-contents,
* McsEngl.HitpLago'table-of-contents,
* McsEngl.HitpLago'Toc,
* McsEngl.HitpLago'Toc-tree,
whole-chain::
* oEltTabCntTocDiv,
HitpJsb'link-preview
description::
· another functionality that facilitates reading is the-addition of previews (pop-ups) on internal (same-origin) links with destination relatively small chunks of text.
· this is especially useful for footnotes, abbreviations, definitions, index items, paragraphs etc.
HOW: you only have to add the-class 'clsPreview' on the-links you want to trigger popups when the-reader is hovering over them.
<a class="clsPreview" href="#idPreview">link-preview</a>
name::
* McsEngl.HitpLago'link-preview,
* McsEngl.HitpJsb'link-preview,
* McsEngl.HitpLago'popup,
* McsEngl.HitpLago'preview-functionality,
* McsEngl.PreviewLink-of-HitpLago,
* McsEngl.linkPreview-of-HitpLago,
HitpJsb'tree-info
description::
· our information is full of generic-specific, whole-part, and parent-child trees.
· now HitpLago support collapsible trees, easily readable.
HOW:
· you create the-tree as an-html-unordered-list (UL).
· then you add the-class 'clsTreeUl' on the first ul-element.
· that's it, the-rest is done by the JavaScript code of the-page.
TODO:
· to add a-class 'clsTreeDepthX' and to expand the-tree to level with depth-x (depth-0 root-node).
[hmnSngo.{2022-10-25}]
- Tree-root
- Node1
- Node1.1
- Node1.1.1
- Node1.1.2
- Node1.2
- Node1.2.1
- Node1.2.2
- Node1.1
- Node2
- Node2.1
- Node2.2
- Node2.3
- Node1
name::
* McsEngl.HitpJsb'info-tree,
* McsEngl.Hmcstree,
* McsEngl.Mcsh'data.tree,
* McsEngl.Mcsh'tree-data,
* McsEngl.Mcshtree,
* McsEngl.collapsible-tree-data.HitpLago,
* McsEngl.HitpLago'info-tree,
* McsEngl.HitpLago'tree-info,
* McsEngl.lagMcsh'tree-info,
* McsEngl.tree.HitpLago,
* McsEngl.tree-data.HitpLago,
short-doc-name of HitpDoc
description::
× McsHitp-creation: {2025-05-24},
· a-HitpSite is a-network of HitpDocs.
· for convenience, we use and short-doc-names on every HitpDoc.
· searching for a-short-doc-name displays its non-short-name.
· searching for short-doc-name/ displays all the-names of this HitpDoc.
· also the-HitpName name1@name2 means that name1 is located at short-doc-name2.
· every HitpDoc always displays its short-name at the-top green bar.
name::
* McsEngl.HitpDoc'short-name,
* McsEngl.short-doc-name--of-HitpDoc,
extra-name of HitpDoc
description::
× McsHitp-creation: {2025-05-23},
· adding extra names (HitpNames)\a\ on HitpDocs, on many languages, HitpManager automatically indexes them\a\ and we can-have access to their location from ANYWHERE in the-HitpSite.
· setting HitpNames especially on definitions, we can-make our texts monosemous by setting PreviewLinks on all these names inside the texts.
· the-previous characteristic also makes reading personalized, because only the-reader who does-not-know|remember the-meaning\b\ clicks to find it\b\.
name::
* McsEngl.HitpDoc'extra-name!⇒HitpName,
* McsEngl.HitpName!=extra-name-on-HitpDoc,
HitpName.section
description::
× McsHitp-creation: {2025-05-24},
· HitpSectionName is a-HitpName that denotes an-HtmlSection with ID in a-HitpDoc.
· a-PreviewLink to this name (to the-ID of the-section), popup the-whole section that contains this name.
· HitpCode:
<p>name::
<br>* NameLang.nameX,
</p>
· this HtmlP could-have and ID and is part of the-section best at the-end.
name::
* McsEngl.HitpName.section,
* McsEngl.HitpSectionName,
HitpName.paragraph
description::
× McsHitp-creation: {2025-05-24},
· HitpPName is a-HitpName inside an-HtmlP with ID.
· a-PreviewLink to this name (to the-ID of the-paragraph), popups the-paragraph.
· HitpCode:
<p id="idX">text of paragraph
<br>* NameLang.nameX,
</p>
· the-line with the-name can-be anywhere in the-paragraph, best at the-end to not-distrurb the-reader.
HitpName.div
description::
× McsHitp-creation: {2025-05-24},
· HitpDivName is a-HitpName inside an-HtmlDiv with ID.
· HtmlDivs wrap non-sentences (tables, lists, trees) in a-HitpDoc.
· a-PreviewLink to this name (to the-ID of the-div), popups the-div.
· HitpCode:
<div id="idX">tables, lists, trees, paragrafs of div
<br>* NameLang.nameX,
</p>
· the-line with the-name can-be anywhere in the-div, best at the-end to not-distrurb the-reader.
HitpName.main
description::
× McsHitp-creation: {2025-05-24},
· usually the-concepts have many names.
· non-HitpMainNames can-contain its HitpMainNames and then the-HitpDoc searches for the-main-names.
· HitpCode:
<br>* NameLang.non-main-name!⇒main-name,
writing-style of HitpDoc
description::
Today, our information has MANY interpretations/meanings (= polysemous).
HitpLago-WebAppDocs can-reduce it, by accepting the-following writing-style.
name::
* McsEngl.HitpDoc'writing-style,
Names:
· we use the-name-notation-of-this-site.
· sentences are-comprised of names of concepts.
· alphabetic-languages English, Greek, separate all the-words in sentences.
· because many names are-comprised of many words, the-reader must semantically identify the-names and this takes time.
· using hyphens(-) inside multi-word-names, improves readability.
· on the-other side, Chinese, Ancient-Greek do-not-separate the-names and this creates the-same burden to readers.
Definition-links:
· the-names of the-sentences are-connected with preview-links with their definitions.
Sentences:
· every sentence begins in a new line, which improves readability.
WebApp of HitpDoc
description::
× McsHitp-creation: {2025-05-24},
· HitpDocs can-incorporate any WebApp.
· my-site has some examples:
* EUR ⇔ other-currency converter,
* Unicode-character-codepoint finder,
* numeral-systems-converter,
* Greek-word phonemic-notation,
name::
* McsEngl.HitpDoc'WebApp,
* McsEngl.WebApp-of-HitpDoc,
index of HitpDoc
description::
· HitpDocs can have better indexes than paper-docs.
name::
* McsEngl.HitpDoc'index!⇒HitpIndx,
* McsEngl.HitpIndx!=index-of-HitpDoc,
* McsEngl.HitpLago'index!⇒HitpIndx,
* McsEngl.HitpLago-index!⇒HitpIndx,
HitpIndx.HitpName
description::
· by setting HitpNames on HitpDocs, the-HitpManager automatically create indexes for these names and we have access to them from anywhere in a-HitpSite.
· every text describes CONCEPTS.
· the-concepts have NAMES.
· every SENTENCE in a-text is composed of names.
· iF we create the-concept-index of a-text, with every concept-entry to hold its names and its definition, THEN we will-have ONE interpretation of the-meaning of a-text (= monosemous-text).
· iF we set preview-links on the-names of sentences with the-concept-index, THEN the-understanding of a-text will-become FAST.
· every text describes concepts and relations of concepts, which are a-subjective MODEL (modelConcept) of reality.
· more important than the-concept-index is the-modelConcept of the-text.
· in a-model-concept a-concept-entry contains, except its names and its definition and ALL its attributes|characteristics.
· a crude example of a-modelConcept contains my HitpDoc of the Keynes book 'The General Theory of Employment, Interest, and Money'.
name::
* McsEngl.HitpNameIndex,
* McsEngl.HitpLago'HitpName-index,
* McsEngl.HitpIndx.HitpName,
HitpIndx.vocabulary
description::
× McsHitp-creation: {2025-05-24},
· many paper-books have vocabularies at the-end.
· correspondig HitpDocs can-have HitpNames on the-names of these vocabularies and have access to them from anywhere in a-HitpSite.
· also can-have PreviewLinks on all referencies on these vocabularies.
· an-example is the-big manual "UN-System-of-National-Accounts-2008",
HitpIndx.word
description::
· by pressing Ctrl+F or F3 you can-search for any word in a-HitpDoc which can-represent any paper-book.
meta-info of HitpDoc
description::
A-HitpLago-WebApp contains and extra info other than a-doc.
Most of this info is-stored in the-meta-title-content-tree.
name::
* McsEngl.HitpLago'meta-info,
* McsEngl.HitpDoc'meta-info,
page-wholepath of HitpLago-meta
description::
· by setting a-p-element\1\ with id "idMetaWebpage_path", the-program sets its content as the first paragraph in the left info-container, showing where the-page fits in the-site's-structure.
NOTE: If the-document does-not-contain this paragraph, the-program sets the-title-element as page-path.
I put this\1\ element as the last paragraph of the-meta-title-content-tree.
name::
* McsEngl.HitpIdMetaWebpage_path,
* McsEngl.HitpLago'PagePath,
* McsEngl.HitpLago'page-path,
HitpDoc.SPECIFIC
SPECIFIC::
This site presents many examples with our proposal.
Actually I'm writing the-site with this proposal.
Reading the-code of these examples and seeing its behavior, is the best way to understand what really we are-proposing.
* HitpLago.eBook-page,
* HitpLago.law-page,
* HitpLago.standard-page,
* HitpLago.sensorial-concept--page,
HitpDoc.independent-site-example (link)
HitpDoc.senso-concept-Mcsh (link)
HitpDoc.eBook
description::
· digital-book written in HitpLago.
=== language-book:
* ΓΡΑΜΜΑΤΙΚΗ-ΑΡΧΑΙΑΣ-ΟΙΚΟΝΟΜΟΥ: an-important and timely book.
=== economy-book:
* {2015}. People Powered Money: an-important and timely book.
* {1936}. Keynes. The General Theory of Employment, Interest, and Money: the-classic book with footnote-preview AND its conceptual-view.
* {1867|1887}. Marx. Capital, Volume-I: the-theory of surplus-value and the-labor-theory of exchange-value.
=== society-book:
* {1884}. Engels. The Origin of the Family, Private Property and the State: a-diamond in our knowledge about the-evolution of human-society.
=== Infotech-book:
* {2016}. Antonopoulos. Mastering Bitcoin in Greek:
name::
* McsEngl.Hitp-digital-book!⇒HitpBook,
* McsEngl.Hitp-ebook!⇒HitpBook,
* McsEngl.HitpBook!=book-represented-with-HitpLago,
* McsEngl.HitpDoc.eBook!⇒HitpBook,
* McsEngl.ebook.Hitp!⇒HitpBook,
* McsEngl.ebookHitp!⇒HitpBook,
* McsEngl.ebkHitp!⇒HitpBook,
* McsEngl.dbkHitp!⇒HitpBook,
* McsEngl.html5.id.toc.preview-ebook!⇒HitpBook,
* McsEngl.html5.id.toc.preview-digital-book!⇒HitpBook,
* McsEngl.html5IdTocPreview-ebook!⇒HitpBook,
* McsEngl.synagonism.net'ebook!⇒HitpBook,
===
• ebkHitp-cpt,
• ebook.Hitp-cpt,
• HitpBook-cpt,
• dbkHitp-cpt,
• html5.id.toc.preview-ebook-cpt,
• html5.id.toc.preview-digital-book-cpt,
• html5IdTocPreview-ebook-cpt,
• Hitp-digital-book-cpt,
• Hitp-ebook-cpt,
• Hitpebk-cpt,
HitpDoc.law
description::
· law written in HitpLago.
· IDs conventions (some times):
- idA4 (article)
- idA4P2 (paragraph)
- idA4P2Sp2 (SubParagraph)
- idP2 (Part)
- idP2T1 (Title)
- idP2T1C2 (Chapter)
- idP2T1C2S2 (Section)
name::
* McsEngl.HitpLaw,
* McsEngl.HitpDoc.law!⇒HitpLaw,
* McsEngl.law.008-Hitp!⇒HitpLaw,
* McsEngl.law.Hitp!⇒HitpLaw,
* McsEngl.lawHitp!⇒HitpLaw,
generic-tree-of-HitpLaw::
* law,
HitpLaw.English
description::
=== EU:
* Treaty on European Union-{2010},
* Treaty on the Functioning of the European Union-{2010},
* Protocols-{2010},
* Declarations-{2010},
* Charter of Fundamental Rights of the European Union-{2010},
=== US:
* US.Constitution.1992: final, in force.
* US.Constitution.1787: first, original form.
HitpLaw.Greece (link)
HitpDoc.standard
description::
· standard written in HitpLago.
=== economy-standard:
* System-of-National-Accounts-2008:
* IFRS for SMEs 2009: I have-converted this book to HitpLago, but I have-not-published it, because IFRS demands money to publish it!!!
=== infotech-standard:
* EMCAScript Language Specification: (ecma-262, Edition 5.1, 2011).
name::
* McsEngl.HitpDoc.standard!⇒HitpStandard,
* McsEngl.HitpStandard,
* McsEngl.standard.Hitp!⇒HitpStandard,
