<commit_before><!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Basic setup for EventList</title>

<style>
* {
    margin: 0;
    padding: 0;
}
body {
    font: 1em Helvetica, sans-serif;
}
footer {
    font-size: 80%;
    float: right;
    background: grey;
    color: white;
    width: 100%;
    text-align: right;
    margin-right: 10%;
}

#test-field {
    padding: 10px;
}
#test-field p {
    margin-bottom: 1em;
}

#result {
    position: absolute;
    bottom: 0;
    background: black;
    color: white;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    width: 100%;
    overflow: hidden;
}
</style>



<!-- include source files here... -->
<script src="../setProperty.js"></script>
<script src="../elementFitsDescription.js"></script>
<script src="../events.js"></script>




</head>

<body>
<h2>EventList</h2>
<div id=test-field>
    <p>Morbi vel fermentum eros. Quisque tincidunt enim a odio faucibus malesuada. Cras faucibus risus ut tortor lobortis lacinia. Nam feugiat sollicitudin dolor, vel interdum nisl sagittis a. Duis et orci ac tortor feugiat bibendum. Phasellus ornare, mauris vitae venenatis placerat, neque turpis dignissim nulla, non ornare elit est ut nibh. Nullam faucibus tristique bibendum. Nullam id turpis ut est gravida adipiscing. Sed erat leo, aliquet vitae semper in, mollis a lacus. Suspendisse tempus molestie enim eget cursus.</p>

<p>Maecenas felis turpis, viverra ac iaculis vitae, tincidunt sed arcu. Nam sit amet sapien ac mi fermentum tincidunt eu eget neque. Quisque eu dui id sapien accumsan consectetur. Maecenas bibendum vulputate diam quis convallis. In posuere pretium leo at porta. Vestibulum luctus commodo neque, ac faucibus sem adipiscing ac. Aliquam in velit nec eros vehicula pulvinar. Duis mattis rhoncus augue quis consequat. Mauris at lacus mi, eget suscipit massa. Phasellus sem risus, viverra eu iaculis vitae, vehicula vulputate lectus. Maecenas quis tellus sit amet eros mattis consectetur. Mauris et blandit odio. Suspendisse lorem sem, vulputate id faucibus tincidunt, dignissim non tellus. Fusce tempus, nunc ut pharetra interdum, nunc tellus blandit diam, nec cursus velit lacus in massa.</p>

<p>In sed lacus augue, a aliquam mi. Quisque congue porttitor rhoncus. Maecenas dolor purus, ornare ac venenatis at, rutrum in est. Donec turpis sapien, iaculis in laoreet ac, luctus sed lorem. Suspendisse eu leo ut neque vestibulum mollis. Phasellus felis est, egestas a malesuada eu, imperdiet sed augue. Donec ut ante eros. Phasellus dapibus, massa quis accumsan sagittis, nisl justo imperdiet risus, a tincidunt quam metus eu neque. Pellentesque quis lorem lectus, sed pulvinar enim. Vivamus nec libero ligula, vitae rutrum enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

<p>Ut metus nibh, laoreet vel ultrices in, malesuada elementum est. Vivamus purus eros, sodales eu aliquet id, malesuada ac quam. Ut bibendum orci ac urna consequat sed vehicula ante rutrum. Suspendisse vehicula tincidunt ante, eget placerat leo pretium eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a risus nisl, at pellentesque elit. Pellentesque iaculis felis vel erat aliquet ultrices eu vitae arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent fringilla pharetra laoreet. Mauris rutrum malesuada nibh, dapibus hendrerit nunc ornare eu. In mattis augue consectetur erat imperdiet gravida. Aenean molestie tincidunt posuere. Aenean consequat mollis egestas. Duis nec nunc eu mi dignissim feugiat. Nullam vitae odio enim.</p>

Pellentesque imperdiet, orci sed pharetra scelerisque, erat odio posuere lorem, non blandit turpis enim nec massa. Etiam suscipit sagittis felis a pulvinar. Etiam quis velit in velit ullamcorper hendrerit id at nulla. Integer pharetra tempor lectus ut tincidunt. Nulla vitae mauris tempor enim consectetur pretium. Vivamus laoreet dapibus elementum. Duis ligula nunc, facilisis vitae tincidunt at, tempus in lectus. Aenean a neque eros, eu commodo purus.</p>
    <p>真有心...世界最矮的男人，前情侶臉書鬧翻，我相信我此生都不會跟他們有交集的...一定不會有的，你/妳們可以接受這個數據嗎？開玩笑，謝謝鄭委員，如果政府不按照數據……放在最後一項說不定是最重要的一項，我實在不太願意在立法院裡面講黨派之分，因為過去有很多預言……我和沈署長會共同勉勵，其實臺灣和那些出問題國家的最大不同在於，包括提出工作機會的變動率，我知道有的立體停車場是蚊子館，是不是請施部長做個報告？晚上跑出來和網友打電話，中華日報│台南市長賴清德廿二日宣布，輕輕一扯，尷尬啊拓海家聊八卦，和Jurassick披星戴月大清早出門去馬賽面試，下班時間忙，最終發現，應該不能優利退休，未來假如沒有分年繳付的話，我們專案向你請教，我認為這種回答讓你不悅，不是我自我感覺良好，之前的薪水也好多年都沒有調整，委員誤會了，我瞭解曹委員指教的意義，讓體育司與體委會合作，所有各部會都是為庶民經濟在考慮。</p>
    <p>女愛吃青蛙鍋，我相信我此生都不會跟他們有交集的...一定不會有的，這個副教授~~~還有臉為人師表嗎?廠商是怎樣~~把台灣球迷當凱子削喔!手段使盡卻判13年~~衝衝衝，格子籠養雞太殘忍，【有影片】對不起，有瘦肉精，夠浪漫，只有55.9公分高。</p>

</div>
<footer>
Dummy text created with <a href="http://www.lipsum.com/">Lipsum Lorem (English)</a> and <a href="http://more.handlino.com/">MoreText (Chinese)</a>
</footer>
<div id=result>&nbsp;</div>
<script>
function id(el) {
    if (!el) {
        return;
    }
    return document.getElementById(el);
}

var evt = new EventList("#test-field");
evt.listen("click", {
    selector: "p",
    handler: function () {
        id("result").innerHTML = "The clicked paragraph begins with &#8220;" + this.innerHTML.substring(0, 10) + "&#8221;.";
    }
});
</script>
</body>
</html><commit_msg>improved basic setup (example page) style<commit_after><!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Basic setup for EventList</title>

<style>
* {
    margin: 0;
    padding: 0;
}
body {
    font: 1em Helvetica, sans-serif;
}
footer {
    font-size: 80%;
    float: right;
    background: grey;
    color: white;
    width: 100%;
    text-align: right;
    margin-right: 10%;
    padding: 5px 0;
}

#test-field {
    padding: 10px;
}
#test-field p {
    margin-bottom: 1em;
}

#result {
    position: fixed;
    bottom: 0;
    background: #3C94DC;
    color: white;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    width: 100%;
    overflow: hidden;
}
</style>



<!-- include source files here... -->
<script src="../setProperty.js"></script>
<script src="../elementFitsDescription.js"></script>
<script src="../events.js"></script>




</head>

<body>
<h2>Basic Setup (click paragraph)</h2>
<div id=test-field>
    <p>Morbi vel fermentum eros. Quisque tincidunt enim a odio faucibus malesuada. Cras faucibus risus ut tortor lobortis lacinia. Nam feugiat sollicitudin dolor, vel interdum nisl sagittis a. Duis et orci ac tortor feugiat bibendum. Phasellus ornare, mauris vitae venenatis placerat, neque turpis dignissim nulla, non ornare elit est ut nibh. Nullam faucibus tristique bibendum. Nullam id turpis ut est gravida adipiscing. Sed erat leo, aliquet vitae semper in, mollis a lacus. Suspendisse tempus molestie enim eget cursus.</p>

<p>Maecenas felis turpis, viverra ac iaculis vitae, tincidunt sed arcu. Nam sit amet sapien ac mi fermentum tincidunt eu eget neque. Quisque eu dui id sapien accumsan consectetur. Maecenas bibendum vulputate diam quis convallis. In posuere pretium leo at porta. Vestibulum luctus commodo neque, ac faucibus sem adipiscing ac. Aliquam in velit nec eros vehicula pulvinar. Duis mattis rhoncus augue quis consequat. Mauris at lacus mi, eget suscipit massa. Phasellus sem risus, viverra eu iaculis vitae, vehicula vulputate lectus. Maecenas quis tellus sit amet eros mattis consectetur. Mauris et blandit odio. Suspendisse lorem sem, vulputate id faucibus tincidunt, dignissim non tellus. Fusce tempus, nunc ut pharetra interdum, nunc tellus blandit diam, nec cursus velit lacus in massa.</p>

<p>In sed lacus augue, a aliquam mi. Quisque congue porttitor rhoncus. Maecenas dolor purus, ornare ac venenatis at, rutrum in est. Donec turpis sapien, iaculis in laoreet ac, luctus sed lorem. Suspendisse eu leo ut neque vestibulum mollis. Phasellus felis est, egestas a malesuada eu, imperdiet sed augue. Donec ut ante eros. Phasellus dapibus, massa quis accumsan sagittis, nisl justo imperdiet risus, a tincidunt quam metus eu neque. Pellentesque quis lorem lectus, sed pulvinar enim. Vivamus nec libero ligula, vitae rutrum enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

<p>Ut metus nibh, laoreet vel ultrices in, malesuada elementum est. Vivamus purus eros, sodales eu aliquet id, malesuada ac quam. Ut bibendum orci ac urna consequat sed vehicula ante rutrum. Suspendisse vehicula tincidunt ante, eget placerat leo pretium eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a risus nisl, at pellentesque elit. Pellentesque iaculis felis vel erat aliquet ultrices eu vitae arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent fringilla pharetra laoreet. Mauris rutrum malesuada nibh, dapibus hendrerit nunc ornare eu. In mattis augue consectetur erat imperdiet gravida. Aenean molestie tincidunt posuere. Aenean consequat mollis egestas. Duis nec nunc eu mi dignissim feugiat. Nullam vitae odio enim.</p>

Pellentesque imperdiet, orci sed pharetra scelerisque, erat odio posuere lorem, non blandit turpis enim nec massa. Etiam suscipit sagittis felis a pulvinar. Etiam quis velit in velit ullamcorper hendrerit id at nulla. Integer pharetra tempor lectus ut tincidunt. Nulla vitae mauris tempor enim consectetur pretium. Vivamus laoreet dapibus elementum. Duis ligula nunc, facilisis vitae tincidunt at, tempus in lectus. Aenean a neque eros, eu commodo purus.</p>
    <p>真有心...世界最矮的男人，前情侶臉書鬧翻，我相信我此生都不會跟他們有交集的...一定不會有的，你/妳們可以接受這個數據嗎？開玩笑，謝謝鄭委員，如果政府不按照數據……放在最後一項說不定是最重要的一項，我實在不太願意在立法院裡面講黨派之分，因為過去有很多預言……我和沈署長會共同勉勵，其實臺灣和那些出問題國家的最大不同在於，包括提出工作機會的變動率，我知道有的立體停車場是蚊子館，是不是請施部長做個報告？晚上跑出來和網友打電話，中華日報│台南市長賴清德廿二日宣布，輕輕一扯，尷尬啊拓海家聊八卦，和Jurassick披星戴月大清早出門去馬賽面試，下班時間忙，最終發現，應該不能優利退休，未來假如沒有分年繳付的話，我們專案向你請教，我認為這種回答讓你不悅，不是我自我感覺良好，之前的薪水也好多年都沒有調整，委員誤會了，我瞭解曹委員指教的意義，讓體育司與體委會合作，所有各部會都是為庶民經濟在考慮。</p>
    <p>女愛吃青蛙鍋，我相信我此生都不會跟他們有交集的...一定不會有的，這個副教授~~~還有臉為人師表嗎?廠商是怎樣~~把台灣球迷當凱子削喔!手段使盡卻判13年~~衝衝衝，格子籠養雞太殘忍，【有影片】對不起，有瘦肉精，夠浪漫，只有55.9公分高。</p>

</div>
<footer>
Dummy text created with <a href="http://www.lipsum.com/">Lipsum Lorem (English)</a> and <a href="http://more.handlino.com/">MoreText (Chinese)</a>
</footer>
<div id=result>&nbsp;</div>
<script>
function id(el) {
    if (!el) {
        return;
    }
    return document.getElementById(el);
}

var evt = new EventList("#test-field");
evt.listen("click", {
    selector: "p",
    handler: function () {
        id("result").innerHTML = "The clicked paragraph begins with &#8220; " + this.innerHTML.substring(0, 10) + " &#8221;.";
    }
});
</script>
</body>
</html>
{'fraction_non_alphanumeric': 0.09212605745096217, 'fraction_numerical': 0.00827368225341638, 'mean_word_length': 4.704135737009544, 'pattern_counts': {'":': 0, '<': 95, '<?xml version=': 0, '>': 95, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6580160', 'n_tokens_mistral': 4914, 'n_tokens_neox': 4937, 'n_words': 1232}