Archo-node'number.ΒΟΤΤΟΜ

description::
Bottom-number of a-node is its distance from the-bottom.
The-bottom-node has 0 bottom-number.
The-root-node has the-highest bottom-number.

name::
* McsEngl.lagHitp'archo'bottom-number-of-node,
* McsEngl.lagHitp'archo'node-bottom-number,
* McsEngl.lagHitp'height-number-of-archo-node,
* McsEngl.lagHitp'bottom-number-of-archo-node,

Archo-node'number.ROOT

description::
Root-number of a-node is its distance from the-top (root).
The-root has 0 root-number.
A-bottom-node has the-highest root-number.

name::
* McsEngl.lagHitp'archo'root-number-of-node,
* McsEngl.lagHitp'archo'node-root-number,
* McsEngl.lagHitp'depth-number-of-archo-node,
* McsEngl.lagHitp'root-number-of-archo-node,

text-style.LINE

name::
* McsEngl.lagHitp--text-style.line,

lagHitp-Tctd.ROOT (header)

description::
A-lagHitp-root-tree (a-lagHitp-doc) 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.lagHitp-Tctd.header,
* McsEngl.lagHitp-header-tree,
* McsEngl.lagHitp-Tctd.root,
* McsEngl.lagHitp-root-tree,
* McsEngl.lagHitp-document.root,
* McsEngl.lagHitp-doc.root,

Depth:
The biggest depth of a-lagHitp-doc 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.

lagHitp-Tctd.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.lagHitp-Tctd.section,
* McsEngl.lagHitp-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),

lagHitp-Tctd.FOOTER

description::
A-lagHitp-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.lagHitp-Tctd.footer,
* McsEngl.lagHitp-footer-tree,

lagHitp-Tctd.P

description::
A-lagHitp-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>

name::
* McsEngl.lagHitp-Tctd.p,
* McsEngl.lagHitp-p-tree,

lagHitp-Tctd.Meta

description::
A-web-page-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>:
    lagHitp-web-page
    ∈ synagonism.net
  </p>
</section>

name::
* McsEngl.lagHitp-Tctd.meta,
* McsEngl.lagHitp-meta-tree,

lagHitp-Html-unit.Paragraph-with-sentences

description::
For readability, we put every sentence in a new line.
<p id="idName">Sentence1.
  Sentence2.
  SentenceLast.
  </p>

name::
* McsEngl.lagHitp-Html-unit.paragraph-with-sentences,
* McsEngl.lagHitp-Html-unit.sentences,
* McsEngl.lagHitp'sentences-Html-doc-unit,

lagHitp-Html-unit.Paragraph-with-subparagraphs

description::
<p id="idName">Sentence1.
  Sentence2.
 
  Sentence3.
  SentenceLast.
  </p>

name::
* McsEngl.lagHitp-Html-unit.paragraph-with-subparagraphs,

lagHitp-Html-unit.Paragraph-with-nonsentences

description::
<div id="idName">
  <p>Sentence1.
    Sentence2.
  </p>
  <table>
    ...
  </table>
  <a class="clsHide" href="#idName"></a></div>

name::
* McsEngl.lagHitp-Html-unit.paragraph-with-nonsentences,
* McsEngl.lagHitp-Html-unit.nonsentences,
* McsEngl.lagHitp'nonsentences-Html-doc-unit,

address-link-icon of lagHitp

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.lagHitp'address-link-icon,
* McsEngl.lagHitp'id'address-link-icon,

Css-class.clsHide

description::
· this class is-used to display the-links[a] on every element that[a] contain the-address of the-element.

name::
* McsEngl.lagHitp-cls.clsHide,
* McsEngl.lagHitp'clsHide,

Css-class.clsPreview

description::
· links with this class, display a-preview of their info and with a second click go to that location.

name::
* McsEngl.lagHitp-cls.clsPreview,
* McsEngl.lagHitp'clsPreview,

Css-class.clsClicked

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.lagHitp-cls.clsClicked,
* McsEngl.lagHitp'clsClicked,

Css-class.clsTocExpand

description::
· if this class is-present on idMetaWebpage_path paragraph, then when the-page is-opened the-Toc is-expanded.

name::
* McsEngl.lagHitp-cls.clsTocExpand,
* McsEngl.lagHitp'clsTocExpand,

Css-class.paperbook-page

description::
· it is-used on span-elements to display the-number of a-page of a-paper-book in lagHitp-format.

name::
* McsEngl.lagHitp-cls.paperbook-page,
* McsEngl.lagHitp'clsPagePb,

lagHitp'clsPagePb {
  display: block;
  text-align: right;
  color: green;
}

Css-class.CENTER

name::
* McsEngl.lagHitp'center-text,
* McsEngl.lagHitp-cls.center,
* McsEngl.lagHitp'clsCenter,

lagHitp'clsCenter {
  text-align: center;
}

lagHitp'clsCenterBlock {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

lagHitp'clsCenterInline {
  display: block;
  text-align: center;
}

Css-class.BUTTON

name::
* McsEngl.lagHitp'button-class,
* McsEngl.lagHitp-cls.button,
* McsEngl.lagHitp'clsBtn,

lagHitp'clsBtn {
  border-radius: 5px;
  font-size: 12px;
  margin: 2px 0 5px 12px;
}

lagHitp'clsBtn:hover {
  background: #e0f2f7;
  color: red;
}

Css-class.COLOR

name::
* McsEngl.lagHitp'color-classes,
* McsEngl.lagHitp-cls.color,
* McsEngl.lagHitp'clsColor,

lagHitp'clsColorBlue {
  color: #0000ff;
}

lagHitp'clsColorGreen {
  color: #008000;
}

lagHitp'clsColorGreenBg {
  background-color: #008000;
}

lagHitp'clsColorRed {
  color: #ff0000;
}

lagHitp'clsColorYellow {
  color: #FFFF00;
}

lagHitp'clsColorYellowBg {
  background-color: #FFFF00;
}

Css-class.FONT

name::
* McsEngl.lagHitp'font-classes,
* McsEngl.lagHitp-cls.font,
* McsEngl.lagHitp'clsFont,

lagHitp'clsFontGrExt {
  font-family: "Palatino Linotype";
}

lagHitp'clsFontGrMg {
  font-family: MgPolNewTimes;
  font-size: 16px;
}

lagHitp'clsFontSerif {
  font-family: Serif, "Times New Roman", Georgia;
}

lagHitp'clsFontSansserif {
  font-family: SansSerif, "Microsoft Sans Serif", Arial, Dialog, Tahoma;
}

lagHitp'clsFontMonospaced {
  font-family: Monospaced, "Courier New", Courier;
}

lagHitp'clsFontScript {
  font-family: Script "Monotype Corsiva";
}

lagHitp'clsFontDecorative {
  font-family: Wingdings;
}

Css-class.SIZE

name::
* McsEngl.lagHitp'size-of-font,
* McsEngl.lagHitp-cls.size,
* McsEngl.lagHitp'clsSize,

lagHitp'clsSizeSmall {
  font-size: small;
}

lagHitp'clsSizeSmallX {
  font-size: x-small;
}

lagHitp'clsSizeMedium {
  font-size: large;
}

lagHitp'clsSizeLarge {
  font-size: large;
  font-weight: bold;
}

lagHitp'clsSizeLargeX {
  font-size: x-large;
  font-weight: bold;
}

Css-class.BIU

name::
* McsEngl.lagHitp'bold-class,
* McsEngl.lagHitp'italic-class,
* McsEngl.lagHitp'underline-class,
* McsEngl.lagHitp-cls.bold,
* McsEngl.lagHitp-cls.italic,
* McsEngl.lagHitp-cls.underline,
* McsEngl.lagHitp'clsB,
* McsEngl.lagHitp'clsBU,
* McsEngl.lagHitp'clsI,
* McsEngl.lagHitp'clsU,

lagHitp'clsB {
/* use strong element, not this */
  font-weight: bold;
}
===
· also use the-Html-element <strong>.

lagHitp'clsBU {
  font-weight: bold;
  text-decoration: underline;
}

lagHitp'clsI {
  font-style: italic;
}
===
· also use the-Html-element <em>.

lagHitp'clsU {
  text-decoration: underline;
}

oHitp

description::
oHitp is the-most-whole-object of the-lagHitp-javascript-document.

name::
* McsEngl.lagHitp'API'oHitp!⇒oHitp,
* McsEngl.lagHitp'oHitp!⇒oHitp,
* McsEngl.oHitp, {2019-02-24},

member::
// 16-5-0.2017-11-09 Object.getOwnPropertyNames(oHitp).sort().join(', ')
[bEdge, bFirefox, bSite, fContainersInsert, fObjvalRKey, fTocTriCreate, fTocTriHighlightNode, nCfgPageinfoWidth, oEltClicked, oTreeUl, sCfgHomeLocal, sQrAClk, sQrAClkLast, sVersion]
// Object.getOwnPropertyNames(oHitp.__proto__).sort().join(', ')
[__defineGetter__, __defineSetter__, __lookupGetter__, __lookupSetter__, __proto__, constructor, hasOwnProperty, isPrototypeOf, propertyIsEnumerable, toLocaleString, toString, valueOf]

aNamidxRoot of oHitp

description::
· aNamidxRoot is a-javascript-array that contains the-namidx.lagRoot.json if exists.

name::
* McsEngl.lagHitp'aNamidxRoot,
* McsEngl.oHitp'aNamidxRoot,

aSuggestions of oHitp

description::
· aSuggestions is a-javascript-array-object that contains the-name-index-file we are-reading each time we search for a-name.
· it is an oHitp member to have access to it from the-console.

name::
* McsEngl.lagHitp'aSuggestions,
* McsEngl.oHitp'aSuggestions,

aVersion of oHitp

description::
· contains the-versions of hitp.js.

name::
* McsEngl.lagHitp'aVersion,
* McsEngl.oHitp'aVersion,

bEdge of oHitp

description::
· boolean if the-runtime is the-Edge-browser.

name::
* McsEngl.lagHitp'bEdge,
* McsEngl.oHitp'bEdge,

bFirefox of oHitp

description::
· boolean if the-runtime is the-Firefox-browser.

name::
* McsEngl.lagHitp'bFirefox,
* McsEngl.oHitp'bFirefox,

bSite of oHitp

description::
· boolean if exists a-site-structure-menu.

name::
* McsEngl.lagHitp'bSite,
* McsEngl.oHitp'bSite,

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-strucute.
- Preview-cnr to display link-previews.

name::
* McsEngl.lagHitp'fContainersInsert,
* McsEngl.oHitp'fContainersInsert,

fObjvalRKey of oHitp

description::
· utility-function, returns the-key of an-object, given its value.

name::
* McsEngl.lagHitp'fObjvalRKey,
* McsEngl.oHitp'fObjvalRKey,

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.lagHitp'fTocTriCreate,
* McsEngl.oHitp'fTocTriCreate,

fTocTriHighlightNode of oHitp

description::
· Highlights ONE item in Toc-list

name::
* McsEngl.lagHitp'fTocTriHighlightNode,
* McsEngl.oHitp'fTocTriHighlightNode,

nCfgPageinfoWidth of oHitp

description::
· config-variable which contains the-number of the-width of page-info-container.
· default 30.

name::
* McsEngl.lagHitp'nCfgPageinfoWidth,
* McsEngl.oHitp'nCfgPageinfoWidth,

oEltClicked of oHitp

description::
· holds the-object of the-Html-element a-user clicks on.

name::
* McsEngl.lagHitp'oEltClicked,
* McsEngl.oHitp'oEltClicked,

oTreeUl of oHitp

description::
· contains functionality to manage collapsible-trees, from unordered-lists with clsTreeUl.

name::
* McsEngl.lagHitp'oTreeUl,
* McsEngl.oHitp'oTreeUl,

part::
* fTruCreate,
* fTruToggleLi,
* fTruTocCollapseAll,
* fTruTocExpandAll,
* fTruTocExpandFirst,

sCfgHomeLocal of oHitp

description::
· config-variable, contains the-string of the-local-directory of the-site.
· example: /dirWstSgm/

name::
* McsEngl.lagHitp'sCfgHomeLocal,
* McsEngl.oHitp'sCfgHomeLocal,

sNamidx of oHitp

description::
· sNamidx contains the-string of the-name-index-file we want to search for names.
· only the middle part eg 'root' for 'namidx.lagRoot.json' or 'lagEng02bi' for 'namidx.lagEng02bi.json'.

name::
* McsEngl.lagHitp'sNamidx,
* McsEngl.oHitp'sNamidx,

sPathSite of oHitp

description::
· sPathSite contains the-path of a-lagHitp-site:
- no-server: ''
- server.local: location.origin + oHitp.sCfgHomeLocal
- server.online: location.origin + '/'

name::
* McsEngl.lagHitp'sPathSite,
* McsEngl.oHitp'sPathSite,

sPathSitemenu of oHitp

description::
· sPathSitemenu contains the-path of the-site-structure a-lagHitp-site:
- no-server: ''
- server.local: location.origin + oHitp.sCfgHomeLocal + 'filSite-structureLocal.html'
- server.online: location.origin + '/' + 'filSite-structure.html'

name::
* McsEngl.lagHitp'sPathSitemenu,
* McsEngl.oHitp'sPathSitemenu,

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.lagHitp'sSrchCrnt,
* McsEngl.oHitp'sSrchCrnt,

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.lagHitp'sSrchNext,
* McsEngl.oHitp'sSrchNext,

sQrslrAClk of oHitp

description::
· selector for a-elements with clsClickCnt

name::
* McsEngl.lagHitp'sQrslrAClk,
* McsEngl.oHitp'sQrslrAClk,

sQrslrAClkLast of oHitp

description::
· last selector for a-elements with clsClickCnt

name::
* McsEngl.lagHitp'sQrslrAClk,
* McsEngl.oHitp'sQrslrAClkLast,