<commit_before><!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8" />
<style type="text/css">
table {
  border: solid 1px black;
}
div.controls {
  text-align: right;
}
</style>
<title>expandmemo</title>
</head>

<body>

<div id="_expandmemo">
</div>

<script>
//<![CDATA[
function onClickExpandButton(btn) {
  btn.style.display="none";
  var shrinkBtn = btn.parentNode.getElementsByClassName('shrinkButton')[0];
  shrinkBtn.style.display="inline";
  var tableNode = btn.parentNode.parentNode.parentNode.parentNode.parentNode;
  var tableParentNode = tableNode.parentNode;
  tableParentNode.removeChild(tableNode);
  var expanded = getExpanded(tableNode);
  tableParentNode.appendChild(expanded);
}
function onClickShrinkButton(btn) {
  btn.style.display="none";
  var expandBtn = btn.parentNode.getElementsByClassName('expandButton')[0];
  expandBtn.style.display="inline";
  var tableNode = btn.parentNode.parentNode.parentNode.parentNode.parentNode;
  var parentTableNode = tableNode.parentNode.parentNode.parentNode.parentNode;
  var parentTableNodeParent = parentTableNode.parentNode;
  parentTableNodeParent.removeChild(parentTableNode);
  parentTableNodeParent.appendChild(tableNode);
}

function typeIs(type, obj) {
  return (obj.constructor.toString().indexOf(type) > -1);
}

function getTemplateCopy() {
  var tmpl = document.getElementById('_template').cloneNode(true);
  tmpl.id = "";
  return tmpl;
}

function getTemplateTd(isCreateTemplate) {
  var tdnode = document.createElement('TD');
  tdnode.setAttribute('align', 'center');
  tdnode.setAttribute('valign', 'center');
  if(isCreateTemplate) tdnode.appendChild(getTemplateCopy());
  return tdnode;
}
function getTemplateTr(tdcount) {
  var trnode = document.createElement('TR');
  for(var i = 0; i < tdcount; i++) {
    var tdnode = getTemplateTd(true);
    trnode.appendChild(tdnode);
  }
  return trnode;
}
function getExpanded(base) {
  var tablenode = document.createElement('TABLE');
  var tbodynode = document.createElement('TBODY');
  tablenode.appendChild(tbodynode);
  tbodynode.appendChild(getTemplateTr(3));
  var centerTd = getTemplateTd(false);
  if(typeIs('String', base)) {
    var tmpl = getTemplateCopy();
    var tmpltdnode = tmpl.children[0].children[0].children[0];
    tmpltdnode.getElementsByTagName('TEXTAREA')[0].value = base;
    centerTd.appendChild(tmpl);
  } else centerTd.appendChild(base);
  var centerTr = getTemplateTr(2);
  centerTr.insertBefore(centerTd, centerTr.lastChild);
  tbodynode.appendChild(centerTr);
  tbodynode.appendChild(getTemplateTr(3));
  return tablenode;
}
//]]>
</script>


<!-- template -->
<div style="display:none">
<table id="_template">
<tbody><tr>
<td>
  <textarea rows="4" cols="18"></textarea>
  <div class="controls">
    <span class="expandButton" style="display:inline"
      onclick="onClickExpandButton(this)">
      <svg width="28" height="28">
        <rect width="28" height="28"
          style="fill:rgb(216,216,216);stroke:rgb(128,128,128);stroke-width:0" />
        <polyline points="28,0 28,28 0,28"
          style="fill:none;stroke:rgb(128,128,128);stroke-width:4" />
        <path d="M 4 4 L 12 4 L 12 6 Q 6 5 13 12 L 12 15 Q 5 6 6 12 L 4 12 Z"
          style="fill:rgb(219,142,0);stroke:rgb(219,142,0);stroke-width:1" />
        <path d="M 24 4 L 24 12 L 22 12 Q 23 6 16 13 L 15 12 Q 22 5 16 6 L 16 4 Z"
          style="fill:rgb(219,142,0);stroke:rgb(219,142,0);stroke-width:1" />
        <path d="M 24 24 L 16 24 L 16 22 Q 22 23 15 16 L 16 15 Q 23 22 22 16 L 24 16 Z"
          style="fill:rgb(219,142,0);stroke:rgb(219,142,0);stroke-width:1" />
        <path d="M 4 24 L 4 16 L 6 16 Q 5 22 12 15 L 13 16 Q 6 23 12 22 L 12 24 Z"
          style="fill:rgb(219,142,0);stroke:rgb(219,142,0);stroke-width:1" />
      </svg>
    </span>
    <span class="shrinkButton" style="display:none"
      onclick="onClickShrinkButton(this)">
      <svg width="28" height="28">
        <rect width="28" height="28"
          style="fill:rgb(216,216,216);stroke:rgb(128,128,128);stroke-width:0" />
        <polyline points="28,0 28,28 0,28"
          style="fill:none;stroke:rgb(128,128,128);stroke-width:4" />
        <path d="M 4 4 L 5 4 Q 11 11 10 5 L 11 5 L 13 13 L 5 11 L 5 10 Q 11 11 4 5 Z"
          style="fill:rgb(67,84,149);stroke:rgb(67,84,149);stroke-width:1" />
        <path d="M 24 4 L 24 5 Q 17 11 23 10 L 23 11 L 15 13 L 17 5 L 18 5 Q 17 11 23 4 Z"
          style="fill:rgb(67,84,149);stroke:rgb(67,84,149);stroke-width:1" />
        <path d="M 24 24 L 23 24 Q 17 17 18 23 L 17 23 L 15 15 L 23 17 L 23 18 Q 17 17 24 23 Z"
          style="fill:rgb(67,84,149);stroke:rgb(67,84,149);stroke-width:1" />
        <path d="M 4 24 L 4 23 Q 11 17 5 18 L 5 17 L 11 15 L 11 23 L 10 23 Q 11 17 5 24 Z"
          style="fill:rgb(67,84,149);stroke:rgb(67,84,149);stroke-width:1" />
      </svg>
    </span>
  </div>
</td>
</tr></tbody>
</table>
</div>

<script>
//<![CDATA[
/*** initialize ***/
document.getElementById('_expandmemo').appendChild(getTemplateCopy());
//]]>
</script>

</body>

</html>
<commit_msg>add menu and popup functions<commit_after><!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8" />
<style type="text/css">
* { padding: 0px; margin: 0px; }
body { padding-top: 20px; }
table {
  border: solid 1px black;
}
div.controls {
  text-align: right;
}
*.button {
  background-color: transparent;
}
#menu {
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0px;
}
#menu ul {
  float:left;
  list-style: none;
  padding: 0px;
  margin: 0px;
}
#menu ul li {
  float:left;
  padding: 0px;
  margin: 0px;
}
#menu ul li:not(.button) {
  float:left;
  padding: 0px 5px;
  margin: 0px 2px;
  background-color: rgb(71, 57, 70);
  color: white;
}
#informations {
  float:left;
  padding: 0px 5px;
  background-color: rgba(192, 192, 192, 0.3);
}
#popup {
  z-index: 2;
  background-color: rgba(128, 128, 128, 0.5);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
}
</style>
<title>expandmemo</title>
</head>

<body>

<div id="_expandmemo">
</div>

<script>
//<![CDATA[
function onClickExpandButton(btn) {
  btn.style.display="none";
  var shrinkBtn = btn.parentNode.getElementsByClassName("shrinkButton")[0];
  shrinkBtn.style.display="inline";
  var tableNode = btn.parentNode.parentNode.parentNode.parentNode.parentNode;
  var tableParentNode = tableNode.parentNode;
  tableParentNode.removeChild(tableNode);
  var expanded = getExpanded(tableNode);
  tableParentNode.appendChild(expanded);
}
function onClickShrinkButton(btn) {
  btn.style.display="none";
  var expandBtn = btn.parentNode.getElementsByClassName("expandButton")[0];
  expandBtn.style.display="inline";
  var tableNode = btn.parentNode.parentNode.parentNode.parentNode.parentNode;
  var parentTableNode = tableNode.parentNode.parentNode.parentNode.parentNode;
  var parentTableNodeParent = parentTableNode.parentNode;
  parentTableNodeParent.removeChild(parentTableNode);
  parentTableNodeParent.appendChild(tableNode);
}

function typeIs(type, obj) {
  return (obj.constructor.toString().indexOf(type) > -1);
}

function getTemplateCopy() {
  var tmpl = document.getElementById("_template").cloneNode(true);
  tmpl.id = "";
  return tmpl;
}

function getTemplateTd(isCreateTemplate) {
  var tdnode = document.createElement("TD");
  tdnode.setAttribute("align", "center");
  tdnode.setAttribute("valign", "center");
  if(isCreateTemplate) tdnode.appendChild(getTemplateCopy());
  return tdnode;
}
function getTemplateTr(tdcount) {
  var trnode = document.createElement("TR");
  for(var i = 0; i < tdcount; i++) {
    var tdnode = getTemplateTd(true);
    trnode.appendChild(tdnode);
  }
  return trnode;
}
function getExpanded(base) {
  var tablenode = document.createElement("TABLE");
  var tbodynode = document.createElement("TBODY");
  tablenode.appendChild(tbodynode);
  tbodynode.appendChild(getTemplateTr(3));
  var centerTd = getTemplateTd(false);
  if(typeIs("String", base)) {
    var tmpl = getTemplateCopy();
    var tmpltdnode = tmpl.children[0].children[0].children[0];
    tmpltdnode.getElementsByTagName('TEXTAREA')[0].value = base;
    centerTd.appendChild(tmpl);
  } else centerTd.appendChild(base);
  var centerTr = getTemplateTr(2);
  centerTr.insertBefore(centerTd, centerTr.lastChild);
  tbodynode.appendChild(centerTr);
  tbodynode.appendChild(getTemplateTr(3));
  return tablenode;
}
//]]>
</script>


<!-- template -->
<div style="display:none">
<table id="_template">
<tbody><tr>
<td>
  <textarea rows="4" cols="18"></textarea>
  <div class="controls">
    <span class="expandButton button" style="display:inline"
      onclick="onClickExpandButton(this)">
      <svg width="28" height="28">
        <rect width="28" height="28"
          style="fill:rgb(216,216,216);stroke:rgb(128,128,128);stroke-width:0" />
        <polyline points="28,0 28,28 0,28"
          style="fill:none;stroke:rgb(128,128,128);stroke-width:4" />
        <path d="M 4 4 L 12 4 L 12 6 Q 6 5 13 12 L 12 15 Q 5 6 6 12 L 4 12 Z"
          style="fill:rgb(219,142,0);stroke:rgb(219,142,0);stroke-width:1" />
        <path d="M 24 4 L 24 12 L 22 12 Q 23 6 16 13 L 15 12 Q 22 5 16 6 L 16 4 Z"
          style="fill:rgb(219,142,0);stroke:rgb(219,142,0);stroke-width:1" />
        <path d="M 24 24 L 16 24 L 16 22 Q 22 23 15 16 L 16 15 Q 23 22 22 16 L 24 16 Z"
          style="fill:rgb(219,142,0);stroke:rgb(219,142,0);stroke-width:1" />
        <path d="M 4 24 L 4 16 L 6 16 Q 5 22 12 15 L 13 16 Q 6 23 12 22 L 12 24 Z"
          style="fill:rgb(219,142,0);stroke:rgb(219,142,0);stroke-width:1" />
      </svg>
    </span>
    <span class="shrinkButton button" style="display:none"
      onclick="onClickShrinkButton(this)">
      <svg width="28" height="28">
        <rect width="28" height="28"
          style="fill:rgb(216,216,216);stroke:rgb(128,128,128);stroke-width:0" />
        <polyline points="28,0 28,28 0,28"
          style="fill:none;stroke:rgb(128,128,128);stroke-width:4" />
        <path d="M 4 4 L 5 4 Q 11 11 10 5 L 11 5 L 13 13 L 5 11 L 5 10 Q 11 11 4 5 Z"
          style="fill:rgb(67,84,149);stroke:rgb(67,84,149);stroke-width:1" />
        <path d="M 24 4 L 24 5 Q 17 11 23 10 L 23 11 L 15 13 L 17 5 L 18 5 Q 17 11 23 4 Z"
          style="fill:rgb(67,84,149);stroke:rgb(67,84,149);stroke-width:1" />
        <path d="M 24 24 L 23 24 Q 17 17 18 23 L 17 23 L 15 15 L 23 17 L 23 18 Q 17 17 24 23 Z"
          style="fill:rgb(67,84,149);stroke:rgb(67,84,149);stroke-width:1" />
        <path d="M 4 24 L 4 23 Q 11 17 5 18 L 5 17 L 11 15 L 11 23 L 10 23 Q 11 17 5 24 Z"
          style="fill:rgb(67,84,149);stroke:rgb(67,84,149);stroke-width:1" />
      </svg>
    </span>
  </div>
</td>
</tr></tbody>
</table>
</div>

<div id="menu">
<ul>
<!--
<li id="menuItem" onclick="alert('menu item')">
</li>
-->
<li id="startNewMenuItem" onclick="onClickStartNewMenuItem()">
start new
</li>
<!--
<li id="hogeMenuItem" onclick="displayPopup('hoge')">
openHoge
</li>
<li id="fugaMenuItem" onclick="displayPopup('fuga')">
openFuga
</li>
-->
<li id="closeMenuButton" class="button"
  onclick="onClickCloseMenuButton(this, false)">
  <svg width="12" height="22">
    <rect width="12" height="22"
      style="fill:rgb(216,216,216);stroke:rgb(128,128,128);stroke-width:0" />
    <polyline points="12,0 12,22 0,22"
      style="fill:none;stroke:rgb(128,128,128);stroke-width:2" />
    <polyline points="6,3 1,11 6,19"
      style="fill:none;stroke:black;stroke-width:1" />
    <polyline points="10,3 5,11 10,19"
      style="fill:none;stroke:black;stroke-width:1" />
  </svg>
</li>
<li id="openMenuButton" class="button"
  onclick="onClickOpenMenuButton(this, true)">
  <svg width="12" height="22">
    <rect width="12" height="22"
      style="fill:rgb(216,216,216);stroke:rgb(128,128,128);stroke-width:0" />
    <polyline points="12,0 12,22 0,22"
      style="fill:none;stroke:rgb(128,128,128);stroke-width:2" />
    <polyline points="1,3 6,11 1,19"
      style="fill:none;stroke:black;stroke-width:1" />
    <polyline points="5,3 10,11 5,19"
      style="fill:none;stroke:black;stroke-width:1" />
  </svg>
</li>
</ul>
<div id="informations">
&lt;-- click this button to open menu.
</div>
</div>

<script>
//<![CDATA[
function onClickOpenMenuButton(btn, isClearInfo) {
  var menuUl = btn.parentNode;
  for(var i = 0; i < menuUl.children.length; i++) {
    menuUl.children[i].style.display="inline";
  }
  menuUl.children[menuUl.children.length - 1].style.display="none";
  menuUl.style.marginLeft = "2px";
  if(isClearInfo) clearInformation();
}
function onClickCloseMenuButton(btn, isClearInfo) {
  var menuUl = btn.parentNode;
  for(var i = 0; i < menuUl.children.length; i++) {
    menuUl.children[i].style.display="none";
  }
  menuUl.children[menuUl.children.length - 1].style.display="inline";
  menuUl.style.marginLeft = "0px";
  if(isClearInfo) clearInformation();
}

function onClickStartNewMenuItem() {
  onClickCloseMenuButton(document.getElementById("closeMenuButton"), true);
  var memoRoot = document.getElementById("_expandmemo");
  for(var i = memoRoot.childNodes.length - 1; i >= 0; i--)
    memoRoot.removeChild(memoRoot.childNodes[i]);
  memoRoot.appendChild(getTemplateCopy());
}

function clearInformation() {
  var infoNode = document.getElementById("informations");
  for(var i = infoNode.childNodes.length - 1; i >= 0; i--)
    infoNode.removeChild(infoNode.childNodes[i]);
}
function addInformation(info) {
  var infoNode = document.getElementById("informations");
  if(typeIs("String", info)) {
    infoNode.appendChild(document.createElement("BR"));
    infoNode.appendChild(document.createTextNode(info));
  } else infoNode.appendChild(info);
}
//]]>
</script>

<div id="popup" style="display:none">
  <div id="closePopupButton" class="button">
    <svg width="20" height="20" onclick="closePopup()">
      <rect width="20" height="20"
        style="fill:black;stroke:black;stroke-width:0" />
      <line x1="4" y1="4" x2="16" y2="16"
        style="fill:none;stroke:white;stroke-width:3" />
      <line x1="16" y1="4" x2="4" y2="16"
        style="fill:none;stroke:white;stroke-width:3" />
    </svg>
  </div>
  <span id="hoge">hogehogehogehogehogehoge</span>
  <span id="fuga">fugaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>

<script>
//<![CDATA[
function displayPopup(nodeId) {
  var popupNode = document.getElementById("popup");
  popupNode.style.display = "block";
  for(var i = 0; i < popupNode.children.length; i++)
    if(popupNode.children[i].id !== "closePopupButton")
      popupNode.children[i].style.display = "none";

  var closeButton = document.getElementById("closePopupButton");
  closeButton.style.paddingLeft = (popupNode.clientWidth / 3) + "px";
  var content = document.getElementById(nodeId);
  var contentHeight = 0;
  if((content !== undefined) || (content !== null)) {
    content.style.display = "block";
    contentHeight = closeButton.clientHeight + content.clientHeight;
  } else contentHeight = closeButton.clientHeight;
  var topPadding = (popupNode.clientHeight - contentHeight) / 2;
  popupNode.style.paddingTop = topPadding + "px";
}
function closePopup() {
  var popupNode = document.getElementById("popup");
  popupNode.style.display = "none";
}
//]]>
</script>

<script>
//<![CDATA[
/*** data structure ***/
function memoData() {
  this.parentMemo = null;
  this.childrenMemo = [];
  this.memoText = "";
  this.memoNode = null;
}
//]]>
</script>

<script>
//<![CDATA[
/*** initialize ***/
onClickCloseMenuButton(document.getElementById("closeMenuButton"), false);
//]]>
</script>

</body>

</html>

{'fraction_non_alphanumeric': 0.1672023656466958, 'fraction_numerical': 0.07842633067626639, 'mean_word_length': 4.1411103767349635, 'pattern_counts': {'":': 0, '<': 172, '<?xml version=': 0, '>': 171, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 1, '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': '2829821', 'n_tokens_mistral': 6429, 'n_tokens_neox': 5478, 'n_words': 1246}