<?php
// $Id: tabeleditor3.inc.php,v 0.1 2022/10/25
// Copyright
//   2022 Kwansei Gakuin University comp-staff
// License: GPL v2
// Tabeleditor plugin
// naming candidate  "TableEditor", "TabetElroid" -> "Tabetemas", "Tabeleditor"

function plugin_tabeleditor_action()
{
    global $vars, $now, $_title_updated, $_no_name;
    global $_msg_tabeleditor_collided, $_title_tabeleditor_collided;
    global $_tabeleditor_plugin_fail_msg;

    if (PKWK_READONLY) die_message('PKWK_READONLY prohibits editing');

    $head = '';
    $match = array();

    $tabeleditor_added = TRUE;
    $cell_counter = 0;
    foreach (get_source($vars['refer']) as $line) {
        if (strpos($line, "|") === 0) {
            preg_match("/([fh])$/", $line, $match);
            $postamble = $match[1];
            $line = preg_replace("/^\\|(.*)\\|[fh]?$[^|]*/", "$1", $line);
            $postdata .= "|";
            foreach(explode("|", $line) as $cell) {
                if (strpos($cell,"~")===FALSE && strpos($cell, ">")!==0) {
                    $entry_name = "__buttons_" . $cell_counter;
                    //$postdata .= $cell_counter;
                    if ($vars[$entry_name]!==null) { 
                        $postdata .= preg_replace("/\\n/", "&br;", $vars[$entry_name]) ;
                        $postdata .= preg_replace("/&lt;del&gt;(.)&lt;/del&gt;/", "%%$1%%", $vars[$entry_name]) . "|";
                    } else {
                        $postdata .= $cell . "|";
                    }
                    $cell_counter++;
                } else {
                    $postdata .= $cell . "|";
                }
            }
            $postdata .= "$postamble\n";
        } else {
            $postdata .= $line;
        }
    }

    $title = $_title_updated;
    $body = $postdata;
    if ($tabeleditor_added) {
        // new table created
        if (md5(get_source($vars['refer'], TRUE, TRUE)) !== $vars['digest']) {
            $title = $_title_tabeleditor_collided;
            $body  = $_msg_tabeleditor_collided . make_pagelink($vars['refer']);
        }
        page_write($vars['refer'], $postdata);
    } else {
        // failed to add new table
        $title = $_title_tabeleditor_collided;
        $body  = $_tabeleditor_plugin_fail_msg . make_pagelink($vars['refer']);
    }
    $retvars['msg']  = $vars['name'];
    $retvars['body'] = $vars['body'];
    $vars['page'] = $vars['refer'];
    return $retvars;
}

function plugin_tabeleditor_convert()
{
    global $vars, $digest, $_btn_tabeleditor, $_btn_name, $_msg_tabeleditor;
    static $numbers = array();

    if (PKWK_READONLY) return ''; // Show nothing

    $page = $vars['page'];
    if (! isset($numbers[$page])) $numbers[$page] = 0;
    $tabeleditor_no = $numbers[$page]++;

    $options = func_num_args() ? func_get_args() : array();

    $script = get_script_uri();
    $s_page = htmlsc($page);
    $string = <<<EOD
<style>
 .style_td textarea {
    resize: none;
    overflow: hidden;
    font-size: 100%;
    background: linear-gradient(#6af 0%, #fef 10%, #dde 85%, #fff 100%);
}
</style>
<div id="ruler" style="display: block; word-wrap: break-word"></div>
<script>
  var backuped_style;
  var sem = 0;
  function blur_handler(e) {
    var value = e.target.value;
    var elm   = e.target.parentNode;
    var cellid = elm.cellid;
    var entry_name = "__buttons_"+cellid;
    var entry = document.getElementById(entry_name);

    elm.style.CssText = backuped_style;
    elm.style.width = elm.style.height = elm.style.outline = elm.style.padding = "";
    if (elm.initial_value != value) {
        elm.style.color= "red";
        document.getElementById("__buttons").style.visibility = "visible";
        if (!entry) {
            entry = document.createElement("input");
            entry.className = "changed";
            entry.type = "hidden";
            entry.name = entry.id = entry_name;
            document.getElementById("tabform").appendChild(entry);
        } 
        entry.value = value;
    } else {
        elm.style.color= "";
        if (entry) {
            entry.remove();
            if (document.querySelectorAll(".changed").length == 0) {
                document.getElementById("__buttons").style.visibility = "hidden";
            }
        }
    }
    value = value.replace(/\\n/g, "<br class=\"spacer\">");
    elm.onclick = click_handler;
    elm.innerHTML = value;
  }
  function __vertical_center(elm) {
    var ruler = document.querySelector("#ruler");

    ruler.style.display = "block";
    ruler.innerText = elm.value;
    if (ruler.innerText == "" || ruler.innerText.endsWith("\\n")) { ruler.innerText += "."; }
    var pad= ((ruler.orig_height - ruler.offsetHeight)/2);
    elm.style.paddingTop = pad + "px";
    elm.style.height = (ruler.orig_height - pad) + "px";
    ruler.style.display = "none";
  }

  function change_handler(e) {
    var elm   = e.target;
    __vertical_center(elm);
  }
  function key_handler(e) {
    if (e.keyCode == 13 && !e.shiftKey) {
            e.target.blur();
    } else if (e.keyCode == 27) {
        e.target.value = e.target.parentNode.initial_value;
        e.target.blur();
    }
  }
  function click_handler(e) {
    sem+= 1;
    if (sem == 1) {
	    setTimeout(() => {
		 __main_click_handler(e);
		}, 150);
    }
  }
  function __main_click_handler(e) {
    if (sem > 1 || document.getSelection().isCollapsed == false) {
      sem = 0;
      return;
    }
    sem = 0;
    e.target.onclick = null;
    var value = e.target.innerHTML;
    var elm = document.createElement("textarea");
    value = value.replace(/<br class=\"spacer\">/g, "\\n");

    var container = document.querySelector('.style_td');
    var style = window.getComputedStyle(container);

    backuped_style = elm.style.CssText;

    elm.value = value;
    elm.style.width = (e.target.clientWidth-5) + "px";
    elm.style.height = (e.target.clientHeight-5) + "px";
    elm.style.outline = elm.style.margin = elm.style.border = "0px";
    elm.style.padding = "5px 0px 0px 5px";
    elm.onblur = blur_handler;
    elm.onkeydown = key_handler;
    elm.onkeyup = change_handler;

    e.target.innerHTML="";
    e.target.style.padding = "0px";
    e.target.appendChild(elm);

    var ruler = document.querySelector("#ruler");
    ruler.orig_height = e.target.clientHeight;
    ruler.style.width = elm.style.width;
    ruler.style.offsetHeight = "0px";
    var style = window.getComputedStyle(elm);
    ruler.style.fontSize = style.fontSize;
    ruler.style.fontFamily = style.fontFamily;

    __vertical_center(elm);

    elm.focus();
  }

  (function() {
     var node_td = document.getElementsByClassName("style_td");
     for (let i = 0; i< node_td.length; i++) {
       node_td[i].cellid = i;
       node_td[i].onclick = click_handler; 
       node_td[i].initial_value = node_td[i].innerHTML.replace(/<br class=\"spacer\">/g, "\\n");
     }
   })();
</script>

<form id="tabform" action="$script" method="post">
  <input type="hidden" name="plugin" value="tabeleditor" />
  <input type="hidden" name="refer"  value="$s_page" />
  <input type="hidden" name="digest" value="$digest" />
  <div id="__buttons" class="style_buttons" style="padding:10px;background:#f5f0f0;margin:0px 26% 0px 26%;text-align:right;visibility:hidden;">
      <input type="submit" name="tabeleditor" value="SUBMIT" />
      <input type="button" name="tabeleditor" onclick="location.reload();" value="CANCEL" />
  </div>
</form>
EOD;

    return $string;
}