{% extends "_base.html" %}
{% block title %}Proofer{% endblock %}
{% block style %}
{{ super() }}
#toolbar {
    float:right;
    position: fixed;
    right: 20px;
    top: 20px;
    cursor: default;
    user-select: none; /* Standard */
    border: 1px solid black;
    font-size: 9pt;
}
#view-button {
}
#pt-dropdown {
    padding: 5px;
}
#pt-selector {
    background-color: black;
    color: white;
}
#side-by-side {
    width: 6000px;
}
.box-side-by-side {
    word-break: break-all;
    float: left;
    min-width: 200px;
    max-width: 500px;
}
{% endblock %}

{% block content_name %}
<b>Proofer</b>
{% endblock %}

{% block nav %}
    <div class="nav-item" id="view-button">Line by line</div>
    <div class="nav-item" id="pt-dropdown">
        <label for="pt-size">Font Size:</label>
            <select id="pt-selector" name="pt">
            <option value="10pt">10pt</option>
            <option selected="selected" value="{{ pt_size }}pt">{{ pt_size }}pt</option>
            <option value="48pt">48pt</option>
            <option value="96pt">96pt</option>
        </select>
    </div>
{% endblock %}

{% block content %}
<div id="line-by-line" style="display: block;">
        {% for glyph_set, section in test_strings.items() %}
        <h3>Glyphset: {{ glyph_set }}</h3>
        {% for section_title, strings in section.items() %}
            <div class="box">
            <div class="box-title">{{ section_title }}</div>
            {% for sentence in strings %}
            {% for font_class in font_styles or font_styles_old or font_styles_new %}
                <div class="box-text {{ font_class.class_name }}" style="font-size: {{ pt_size }}pt" lang="{{ sentence['lang'] }}">
                    {{ sentence["string"] }}<br>
                </div>
            {% endfor %}
            <br>
            {% endfor %}
        </div>
        {% endfor %}
    {% endfor %}
    </div>

    

<div id="font-by-font" style="display: none;">
{% for glyph_set, section in test_strings.items() %}
    <h3>Glyphset: {{ glyph_set }}</h3>
    {% for font_class in font_styles or font_styles_old or font_styles_new %}
        <div class="box-title">{{ font_class.class_name }} {{ pt_size }}pt</div>
        {% for section_title, strings in section.items() %}
            <div class="box">
                <div class="box-title">{{ section_title }}</div>
                {% for sentence in strings %}
                    <div class="box-text {{ font_class.class_name }}" style="font-size: {{ pt_size }}pt" lang="{{ sentence['lang'] }}">
                        {{ sentence["string"] }}</div>
                {% endfor %}
            </div>
        {% endfor %}
    {% endfor %}
{% endfor %} 
</div>


<div id="side-by-side" style="display: none;">
{% for glyph_set, section in test_strings.items() %}
    <h3>Glyphset: {{ glyph_set }}</h3>
    {% for font_class in font_styles or font_styles_old or font_styles_new %}
        <div class="box-side-by-side">
            <div class="box-title">{{ font_class.class_name }} {{ pt_size }}pt</div>
            {% for section_title, strings in section.items() %}
                <div class="box">
                    <div class="box-title">{{ section_title }}</div>
                    {% for sentence in strings %}
                        <div class="box-text {{ font_class.class_name }} box-text" style="font-size: {{ pt_size }}pt" lang="{{ sentence['lang'] }}">
                            {{ sentence["string"] }}
                        </div>
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
    {% endfor %}
{% endfor %} 
</div>


{% endblock %}
{% block js %}
    
state = "line-by-line"
function viewMode() {
    var viewButton = document.getElementById("view-button")
    if (state === "line-by-line") {
        document.getElementById("line-by-line").style.display = "none"
        document.getElementById("font-by-font").style.display = "block"
        document.getElementById("side-by-side").style.display = "none"
        state = "font-by-font"
        viewButton.innerHTML = "Font by font"
    } else if (state === "font-by-font") {
        document.getElementById("line-by-line").style.display = "none"
        document.getElementById("font-by-font").style.display = "none"
        document.getElementById("side-by-side").style.display = "block"
        state = "side-by-side"
        setWidth()
        viewButton.innerHTML = "Side by side"
    } else if (state === "side-by-side") {
        document.getElementById("line-by-line").style.display = "block"
        document.getElementById("font-by-font").style.display = "none"
        document.getElementById("side-by-side").style.display = "none"
        state = "line-by-line"
        viewButton.innerHTML = "Line by line"
    }
}
document.getElementById("view-button").addEventListener("click", viewMode)
    
    var ptSelector = document.getElementById("pt-selector");
    ptSelector.addEventListener("change", function(e) {
        var newPtSize = e.target.value
        textBoxes = document.getElementsByClassName("box-text")
        for (i=0; i<textBoxes.length; i++) {
            var textBox = textBoxes[i]
            textBox.style.fontSize = newPtSize
        }
        setWidth()
    })

// break text for side by side view
async function breakText() {
var boxContent = document.getElementsByClassName("box-side-by-side")
var paragraphs = boxContent[0].getElementsByClassName("box-text")

for (j=0; j<paragraphs.length; j++) {
    res = []
    for (i=0; i<boxContent.length; i++) {
        box = boxContent[i]
        paras = box.getElementsByClassName("box-text")
        para = paras[j]
        breaks = getLineBreaks(para)
        // populate if empty
        if (res.length === 0) {
            res = breaks
        // replace tighter linebreaks
        } else {
            for (k=0; k<breaks.length; k++) {
                if (k >= res.length) {
                    res.push(breaks[k])
                } else if (breaks[k] <= res[k]) {
                    res[k] = breaks[k]
                }
            }
        }

    }
    for (ii=0; ii<boxContent.length; ii++) {
        box = boxContent[ii]
        paras = box.getElementsByClassName("box-text")
        para = paras[j]
        insertBreaks(para, res)
    }
}
}


function getLineBreaks(elem) {
const nodes = grabTextNodes(elem);
for (const node of nodes) { // each node is a big block of text
    let rangeIndex = 1;
    let textIndex = 0;
    let nodeText = node.textContent;
    const textLength = nodeText.length;

    linebreaks = []
    prevTop = 0;
    while (rangeIndex <= textLength) {
        const range = document.createRange();
        range.setStart(node, rangeIndex-1);
        range.setEnd(node, rangeIndex)
        currentTop = range.getBoundingClientRect().top
    if (currentTop > prevTop) {
        if (rangeIndex-2 !== -1) {
            linebreaks.push(rangeIndex-2)
        }
    }
    rangeIndex += 1;
    prevTop = currentTop
    }
}
return linebreaks
}

function grabTextNodes(elem) {
const walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null);
const nodes = [];
while (walker.nextNode()) {
    nodes.push(walker.currentNode);
}
return nodes;
}

function insertBreaks(node, breaks) {
console.log(node.innerHTML, breaks)
newText = ""
currentText = node.textContent
for (jj=0; jj<currentText.length; jj++) {
    if (breaks.includes(jj)) {
        newText += "<br>"
    } else {
        newText += currentText[jj]
    }
}
node.innerHTML = newText
}

function longestLine() {
    var paragraphs = document.getElementsByClassName("box-text")
    var res = 0
    for (i=0; i<paragraphs.length; i++) {
        var cur = lineLength(paragraphs[i])
        res = Math.max(cur, res)
    }
    return res
}

function lineLength(elem) {
    var node = grabTextNodes(elem)[0]
    var range = document.createRange()
    var width = 0
    for (j=1; j<=node.textContent.length; j++) {
        var p = j - 1
        range.setStart(node, p)
        range.setEnd(node, j)
        width += range.getBoundingClientRect().width
    }
    return width
}

function setWidth() {
    var width = longestLine()
    var container = document.getElementById("side-by-side")
    var subContainers = container.getElementsByClassName("box-side-by-side")
    
    var containerWidth = (width * subContainers.length) + 100
    container.style.width = containerWidth + "pt"

    for (i=0; i<subContainers.length; i++) {
        subContainer = subContainers[i]
        var dist = Math.ceil(width) + "pt"
        subContainer.style.maxWidth = dist
    }
}


{% endblock %}