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.Hitparcho'bottom-number-of-node,
* McsEngl.Hitparcho'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.Hitparcho'root-number-of-node,
* McsEngl.Hitparcho'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,

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.lagHitp'sentences-Html-doc-unit,

Hitphtmlcunit.Paragraph-with-subparagraphs

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

name::
* McsEngl.Hitphtmlcunit.paragraph-with-subparagraphs,

Hitphtmlcunit.Paragraph-with-nonsentences

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

name::
* McsEngl.Hitphtmlcunit.paragraph-with-nonsentences,
* McsEngl.Hitphtmlcunit.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.clsHitp.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.clsHitp.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.clsHitp.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.clsHitp.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.clsHitp.paperbook-page,
* McsEngl.lagHitp'clsPagePb,

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

Css-class.CENTER

name::
* McsEngl.lagHitp'center-text,
* McsEngl.clsHitp.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.clsHitp.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.clsHitp.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.clsHitp.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.clsHitp.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.clsHitp.bold,
* McsEngl.clsHitp.italic,
* McsEngl.clsHitp.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::
// 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, sPathSite, sPathSitemenu, 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]

aNamidxRoot of oHitp

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

name::
* McsEngl.aNamidxRoot//oHitp,
* 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.aSuggestions//oHitp,
* McsEngl.oHitp/aSuggestions,

aVersion of oHitp

description::
· contains the-versions of hitp.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)'
]

name::
* McsEngl.aVersion//oHitp,
* McsEngl.oHitp/aVersion,

bEdge of oHitp

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

name::
* McsEngl.bEdge//oHitp,
* McsEngl.oHitp/bEdge,

bFirefox of oHitp

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

name::
* McsEngl.bFirefox//oHitp,
* McsEngl.oHitp/bFirefox,

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.fContainersInsert//oHitp,
* McsEngl.oHitp/fContainersInsert,

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,

oEltClicked of oHitp

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

name::
* McsEngl.oEltClicked/oHitp,
* McsEngl.oHitp/oEltClicked,

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,

sCfgHomeLocal of oHitp

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

name::
* McsEngl.oHitp/sCfgHomeLocal,
* McsEngl.sCfgHomeLocal//oHitp,

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

name::
* McsEngl.oHitp/sNamidx,
* McsEngl.sNamidx//oHitp,

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.oHitp/sPathSite,
* McsEngl.sPathSite//oHitp,

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.oHitp/sPathSitemenu,
* McsEngl.sPathSitemenu//oHitp,

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,