sentenzo/demo.html

## demo.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>imposition</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/marked.min.js"></script>
    <script src="js/knoTiler.js"></script>
</head>

<body class="imposition knotiler">
    <script>
var dbg_md = `
<div name="id0">
ДНК - [дезоксирибонуклеиновая](#dez_oxy_ribo_nuclein) [кислота](#asid).

![DNA_chemical_structure](img/DNA_chemical_structure.svg.png)

[Молекулярная структура](#dna_struct), хранящая генетическую информацию об организме.

Была обнаружена Фридрихом Мишером

Структура ДНК была открыта Джеймсом Уотсоном и Френсисом Криком на основе работ Мориса Уилкинса и Розалинды Франклин.
</div>

<div name="asid">
Кислота - любое химическое соединение, проявляющее [кислотные свойства](#asidity).
</div>

<div name="asidity">
Кислотные свойства - способность отдавать катион водорода, либо принимать электронную пару с образованием ковалентной связи.
</div>

<div name="nuclein">
Нуклеин - название, которое даёт ДНК её первооткрыватель Фридрих Мишер.

![Friedrich_Miescher](img/438px-Friedrich_Miescher.jpg)

Он находит это вещество в ядрах клеток человеческой крови. Отсюда название "нуклеин" от "nuclius" - ядро.
Проведя дополнительный химический анализ, Мишер обнаруживает у нуклеина кислотные свойства и
переименовывает его в "нуклеиновую кислоту", т.е. простыми словами, кислота из ядра клетки.

Мишер не подозревает о важности сделанного им открытия. Аномально большое содержание атомов фтора в нуклеине
заставляет его сделать ошибочный вывод, что нуклеин используется человеческими клетками для складирования фтора.
</div>

<div name="dez_oxy_ribo_nuclein">
Дезоксирибонуклеин - сложносоставной термин, который может быть перефразирован как [нуклеиновая](#nuclein) [дезоксирибоза](#dez_oxy_ribo)
</div>

<div name="dez_oxy_ribo">
Дезоксирибоза - вещество, производное от [моносахарида](#mono_shugger) [рибозы](#riboza).

Дез - латинский префикс, означающий "без \[чего-то\]".

Окси - от латинского oxygen - кислород.

Дезокси- таким образом означает "без кислорода". Т.е. это молекула рибозы, от которой оторвали один атом кислорода.
</div>

<div name="poly_shugger">
Полисахарид - комплексная молекула, состоящая из двух и более молекул моносахаридов

Пищевой сахар - это полисахарид (по-научному его называют сахарозой).
</div>

<div name="shugger">
Сахара - один из основных видов [углеводов](#carbohydrate).
</div>

<div name="carbohydrate">
Углеводы - это такие органические молекулы, используемые живыми существами для складирования и добычи энергии.
</div>

<div name="mono_shugger">
Моносахарид - органическое вещество, относящееся к одноимённой подгруппе [сахаров](#shugger) (второй подгруппой являются [полисахариды](#poly_shugger))
</div>

<div name="riboza">
Рибоза - моносахарид, открытый в начале XX века немецким химиком Эмилем Фишером. Судя по сведениям, подчерпнутым из различных источнков, название было придуманно им "от балды" (просто слово звучит прикольно).
</div>

<div name="dna_struct">
ДНК состоит из двух дублирующих друг друга цепочек нуклиотидов, скрученных в спираль.

В ядре каждой клетки лежит по одной копии ДНК. В развёрнутом состоянии молекула ДНК человека имеет длину примерно 2 метра, при толщине в 2 нанометра (2*10 <sup> -9 </sup> м).
В клетках молекула хранится в свёрнутом состоянии.
</div>
`;

        //knoTiler.go(dbg_data);
        knoTiler.go(dbg_md);
        //knoTiler.go(getTxtFile("2018-05-03 dna.md"));
    </script>
</body>

</html>

## knoTiler.js
(function () {
    var cssClassNames = {
        canvas: "ktCanvas",
        tile: "ktTile",
    };
    var knoTiler = {};

    this.getTxtFile = function (url) {
        var txt, reqListener, oReq;
        txt = "";
        reqListener = function () {
            //console.log(this.responseText);
            txt = this.responseText;
        };
        oReq = new XMLHttpRequest();
        //oReq.responseType = "text";
        oReq.addEventListener("load", reqListener);
        oReq.open("GET", url, false);
        oReq.send();
        return txt;
    };

    // ##########################################
    // ##########################################
    var makeTiles = function (data) {
        var md2html = function (text_md) {
            // https://github.com/evilstreak/markdown-js/releases
            // markdown.min.js
            //return markdown.toHTML(text_md, 'Gruber');

            // https://github.com/markedjs/marked/releases
            return marked(text_md);
        }
        var tiles = [];

        if (typeof (data) == "string") {
            var div = document.createElement("DIV");
            div.innerHTML = data;
            var ds = div.getElementsByTagName("DIV");
            for (var i = 0; i < ds.length; i += 1) {
                var t = {};
                t.id = ds[i].attributes.name.value;
                var ih = ds[i].innerHTML;
                t.text_html = md2html(ih);
                tiles.push(t);
            }
        } else {
            for (var i = 0; i < data.length; i += 1) {
                var t = {};
                t.id = data[i].id;
                if (data[i].text_md) {
                    t.text_html = md2html(data[i].text_md);
                } else {
                    t.text_html = data[i].text_html;
                }
                tiles.push(t);
            }
        }

        return tiles;
    };
    // ##########################################


    // ##########################################
    // ##########################################
    var fl = false;
    var drawCanvas = function (tiles) {

        function getOffset(el) {
            el = el.getBoundingClientRect();
            return {
                x: el.left + window.scrollX,
                y: el.top + window.scrollY
            }
        }

        var createDivTile = function (text_html) {
            var divTile = document.createElement("DIV");
            divTile.className = "knotiler tile"
            var divBg = document.createElement("DIV");
            divBg.className = "bg";
            var divPointer = document.createElement("DIV");
            divPointer.className = "pointer";
            var divCon = document.createElement("DIV");
            divCon.className = "con";
            var divText = document.createElement("DIV");
            divText.className = "text";
            divText.innerHTML = text_html;

            divCon.appendChild(divText);
            divTile.appendChild(divBg);
            divTile.appendChild(divPointer);
            divTile.appendChild(divCon);
            divTile.style.display = "block";
            if (fl) {
                divBg.onclick = function () {
                    this.parentNode.parentNode.removeChild(this.parentNode);
                };
            } else {
                fl = true;
            }


            var as = divText.getElementsByTagName("A");
            var ids = {};
            for (var i = 0; i < tiles.length; i += 1) {
                ids["#" + tiles[i].id] = i;
            }
            for (var i = 0; i < as.length; i += 1) {
                (function (i) {
                    var a = as[i];
                    if (ids[a.attributes.href.value] + 1) {
                        var t = tiles[ids[a.attributes.href.value]];
                        a.onclick = function () {
                            var paddingTop = getOffset(a).y
                            paddingTop += 36;
                            paddingTop = paddingTop + "px";
                            var xPointer = getOffset(a).x;
                            xPointer = xPointer + "px";
                            drawTile(t, paddingTop, xPointer);
                            return false;
                        };
                    }
                })(i);
            }

            divTile.setXPointer = function (xPointer) {
                divPointer.style.left = xPointer;
            };


            return divTile;
        }
        var drawTile = function (tile, paddingTop = "0", xPointer = "0") {
            var divTile = createDivTile(tile.text_html)
            divTile.style.paddingTop = paddingTop;
            divTile.setXPointer(xPointer);
            document.body.appendChild(divTile);
        };
        drawTile(tiles[0]);
    };
    // ##########################################

    knoTiler.go = function (data) {
        tiles = makeTiles(data);
        drawCanvas(tiles);
    };

    this.knoTiler = knoTiler;

}).apply(this);

## style.css
body {
  font-family: Arial;
}

.aspect.verge {
    border: 12px solid #ccc;
    padding: 4px;
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
    width: 100%;
}

body.imposition.knotiler {

}

body.imposition .knotiler.tile {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    border: 1px solid transparent;
    box-sizing: border-box;
}

body.imposition .knotiler.tile .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(128,128,220,0.2);
}

body.imposition .knotiler.tile .con {
    background-color: #ffe;
    border: 1px solid transparent;
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

body.imposition .knotiler.tile .con .text {
    width: 780px;
    margin: 0 auto;
}
body.imposition .knotiler.tile .pointer {
    width: 48px;
    height: 14px;
    position: absolute;
}
body.imposition .knotiler.tile .pointer {
    position: relative;
    top: 0;
    width: 0;
    height: 0;
    border-bottom: 16px solid #ffe;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 16px solid transparent;
    margin-bottom: -32px;
    top: -32px;
}
body.imposition .knotiler.tile.tile1 .pointer {
    left: 218px;
}
body.imposition .knotiler.tile.tile2 .pointer {
    left: 484px;
}

body.imposition .knotiler.tile.top {
    display: block;
}

body.imposition .knotiler.tile.tile1 {
    display: block;
    padding-top: 72px;
}

body.imposition .knotiler.tile.tile2 {
    display: block;
    padding-top: 124px;
}
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>imposition</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/style.css">
	<script src="js/marked.min.js"></script>
	<script src="js/knoTiler.js"></script>
	</head>

	<body class="imposition knotiler">
	<script>
	var dbg_md = `
	<div name="id0">
	ДНК - [дезоксирибонуклеиновая](#dez_oxy_ribo_nuclein) [кислота](#asid).

	![DNA_chemical_structure](img/DNA_chemical_structure.svg.png)

	[Молекулярная структура](#dna_struct), хранящая генетическую информацию об организме.

	Была обнаружена Фридрихом Мишером

	Структура ДНК была открыта Джеймсом Уотсоном и Френсисом Криком на основе работ Мориса Уилкинса и Розалинды Франклин.
	</div>

	<div name="asid">
	Кислота - любое химическое соединение, проявляющее [кислотные свойства](#asidity).
	</div>

	<div name="asidity">
	Кислотные свойства - способность отдавать катион водорода, либо принимать электронную пару с образованием ковалентной связи.
	</div>

	<div name="nuclein">
	Нуклеин - название, которое даёт ДНК её первооткрыватель Фридрих Мишер.

	![Friedrich_Miescher](img/438px-Friedrich_Miescher.jpg)

	Он находит это вещество в ядрах клеток человеческой крови. Отсюда название "нуклеин" от "nuclius" - ядро.
	Проведя дополнительный химический анализ, Мишер обнаруживает у нуклеина кислотные свойства и
	переименовывает его в "нуклеиновую кислоту", т.е. простыми словами, кислота из ядра клетки.

	Мишер не подозревает о важности сделанного им открытия. Аномально большое содержание атомов фтора в нуклеине
	заставляет его сделать ошибочный вывод, что нуклеин используется человеческими клетками для складирования фтора.
	</div>

	<div name="dez_oxy_ribo_nuclein">
	Дезоксирибонуклеин - сложносоставной термин, который может быть перефразирован как [нуклеиновая](#nuclein) [дезоксирибоза](#dez_oxy_ribo)
	</div>

	<div name="dez_oxy_ribo">
	Дезоксирибоза - вещество, производное от [моносахарида](#mono_shugger) [рибозы](#riboza).

	Дез - латинский префикс, означающий "без \[чего-то\]".

	Окси - от латинского oxygen - кислород.

	Дезокси- таким образом означает "без кислорода". Т.е. это молекула рибозы, от которой оторвали один атом кислорода.
	</div>

	<div name="poly_shugger">
	Полисахарид - комплексная молекула, состоящая из двух и более молекул моносахаридов

	Пищевой сахар - это полисахарид (по-научному его называют сахарозой).
	</div>

	<div name="shugger">
	Сахара - один из основных видов [углеводов](#carbohydrate).
	</div>

	<div name="carbohydrate">
	Углеводы - это такие органические молекулы, используемые живыми существами для складирования и добычи энергии.
	</div>

	<div name="mono_shugger">
	Моносахарид - органическое вещество, относящееся к одноимённой подгруппе [сахаров](#shugger) (второй подгруппой являются [полисахариды](#poly_shugger))
	</div>

	<div name="riboza">
	Рибоза - моносахарид, открытый в начале XX века немецким химиком Эмилем Фишером. Судя по сведениям, подчерпнутым из различных источнков, название было придуманно им "от балды" (просто слово звучит прикольно).
	</div>

	<div name="dna_struct">
	ДНК состоит из двух дублирующих друг друга цепочек нуклиотидов, скрученных в спираль.

	В ядре каждой клетки лежит по одной копии ДНК. В развёрнутом состоянии молекула ДНК человека имеет длину примерно 2 метра, при толщине в 2 нанометра (2*10 <sup> -9 </sup> м).
	В клетках молекула хранится в свёрнутом состоянии.
	</div>
	`;

	//knoTiler.go(dbg_data);
	knoTiler.go(dbg_md);
	//knoTiler.go(getTxtFile("2018-05-03 dna.md"));
	</script>
	</body>

	</html>
	(function () {
	var cssClassNames = {
	canvas: "ktCanvas",
	tile: "ktTile",
	};
	var knoTiler = {};

	this.getTxtFile = function (url) {
	var txt, reqListener, oReq;
	txt = "";
	reqListener = function () {
	//console.log(this.responseText);
	txt = this.responseText;
	};
	oReq = new XMLHttpRequest();
	//oReq.responseType = "text";
	oReq.addEventListener("load", reqListener);
	oReq.open("GET", url, false);
	oReq.send();
	return txt;
	};

	// ##########################################
	// ##########################################
	var makeTiles = function (data) {
	var md2html = function (text_md) {
	// https://github.com/evilstreak/markdown-js/releases
	// markdown.min.js
	//return markdown.toHTML(text_md, 'Gruber');

	// https://github.com/markedjs/marked/releases
	return marked(text_md);
	}
	var tiles = [];

	if (typeof (data) == "string") {
	var div = document.createElement("DIV");
	div.innerHTML = data;
	var ds = div.getElementsByTagName("DIV");
	for (var i = 0; i < ds.length; i += 1) {
	var t = {};
	t.id = ds[i].attributes.name.value;
	var ih = ds[i].innerHTML;
	t.text_html = md2html(ih);
	tiles.push(t);
	}
	} else {
	for (var i = 0; i < data.length; i += 1) {
	var t = {};
	t.id = data[i].id;
	if (data[i].text_md) {
	t.text_html = md2html(data[i].text_md);
	} else {
	t.text_html = data[i].text_html;
	}
	tiles.push(t);
	}
	}

	return tiles;
	};
	// ##########################################


	// ##########################################
	// ##########################################
	var fl = false;
	var drawCanvas = function (tiles) {

	function getOffset(el) {
	el = el.getBoundingClientRect();
	return {
	x: el.left + window.scrollX,
	y: el.top + window.scrollY
	}
	}

	var createDivTile = function (text_html) {
	var divTile = document.createElement("DIV");
	divTile.className = "knotiler tile"
	var divBg = document.createElement("DIV");
	divBg.className = "bg";
	var divPointer = document.createElement("DIV");
	divPointer.className = "pointer";
	var divCon = document.createElement("DIV");
	divCon.className = "con";
	var divText = document.createElement("DIV");
	divText.className = "text";
	divText.innerHTML = text_html;

	divCon.appendChild(divText);
	divTile.appendChild(divBg);
	divTile.appendChild(divPointer);
	divTile.appendChild(divCon);
	divTile.style.display = "block";
	if (fl) {
	divBg.onclick = function () {
	this.parentNode.parentNode.removeChild(this.parentNode);
	};
	} else {
	fl = true;
	}


	var as = divText.getElementsByTagName("A");
	var ids = {};
	for (var i = 0; i < tiles.length; i += 1) {
	ids["#" + tiles[i].id] = i;
	}
	for (var i = 0; i < as.length; i += 1) {
	(function (i) {
	var a = as[i];
	if (ids[a.attributes.href.value] + 1) {
	var t = tiles[ids[a.attributes.href.value]];
	a.onclick = function () {
	var paddingTop = getOffset(a).y
	paddingTop += 36;
	paddingTop = paddingTop + "px";
	var xPointer = getOffset(a).x;
	xPointer = xPointer + "px";
	drawTile(t, paddingTop, xPointer);
	return false;
	};
	}
	})(i);
	}

	divTile.setXPointer = function (xPointer) {
	divPointer.style.left = xPointer;
	};


	return divTile;
	}
	var drawTile = function (tile, paddingTop = "0", xPointer = "0") {
	var divTile = createDivTile(tile.text_html)
	divTile.style.paddingTop = paddingTop;
	divTile.setXPointer(xPointer);
	document.body.appendChild(divTile);
	};
	drawTile(tiles[0]);
	};
	// ##########################################

	knoTiler.go = function (data) {
	tiles = makeTiles(data);
	drawCanvas(tiles);
	};

	this.knoTiler = knoTiler;

	}).apply(this);
	body {
	font-family: Arial;
	}

	.aspect.verge {
	border: 12px solid #ccc;
	padding: 4px;
	box-sizing: border-box;
	position: relative;
	background-color: #fff;
	width: 100%;
	}

	body.imposition.knotiler {

	}

	body.imposition .knotiler.tile {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100%;
	border: 1px solid transparent;
	box-sizing: border-box;
	}

	body.imposition .knotiler.tile .bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(128,128,220,0.2);
	}

	body.imposition .knotiler.tile .con {
	background-color: #ffe;
	border: 1px solid transparent;
	box-sizing: border-box;
	width: 100%;
	position: relative;
	}

	body.imposition .knotiler.tile .con .text {
	width: 780px;
	margin: 0 auto;
	}
	body.imposition .knotiler.tile .pointer {
	width: 48px;
	height: 14px;
	position: absolute;
	}
	body.imposition .knotiler.tile .pointer {
	position: relative;
	top: 0;
	width: 0;
	height: 0;
	border-bottom: 16px solid #ffe;
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	border-top: 16px solid transparent;
	margin-bottom: -32px;
	top: -32px;
	}
	body.imposition .knotiler.tile.tile1 .pointer {
	left: 218px;
	}
	body.imposition .knotiler.tile.tile2 .pointer {
	left: 484px;
	}

	body.imposition .knotiler.tile.top {
	display: block;
	}

	body.imposition .knotiler.tile.tile1 {
	display: block;
	padding-top: 72px;
	}

	body.imposition .knotiler.tile.tile2 {
	display: block;
	padding-top: 124px;
	}