comment_app_frontend 0.1.3

function showReplyForm(uid, cid, level, user_id) {
    const replyBox = `reply-box-${uid}`;
    let replyBoxElem = document.getElementById( replyBox );
    replyBoxElem.style.display = "none";

    let divElem = document.getElementById( `reply-row-${uid}` );
    divElem.innerHTML = replyFormHtmlString(uid, cid, level, user_id);
    
    var textareaElem = document.getElementById( `reply-text-${uid}` );
    textareaElem.focus();

    var cancelElem = document.getElementById( `cancel-btn-${uid}` );

    document.addEventListener('click', function(event) {
        var isClickInside = divElem.contains(event.target) 
            || replyBoxElem.contains(event.target);
        if( !isClickInside ) { 
            cancelElem.click();
        }
    });
    autoHeightOnTextarea(); // add an event listener
}

function autoHeightOnTextarea() {
    var tx = document.getElementsByTagName('textarea');
    for (var i = 0; i < tx.length; i++) {
      tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
      tx[i].addEventListener("input", OnInput, false);
    }    
}

function replyFormHtmlString(uid, cid, level, user_id) {
    return `
    <form method="POST" action="/replies" id="reply-form-${uid}" name="reply-form" >
        <div class="add-reply">
            <textarea 
                name="message" 
                rows="1" 
                placeholder="Write a Reply"
                id="reply-text-${uid}" 
                required 
            ></textarea>
            <input 
                name="parent_id" 
                type="text" 
                value="${uid}" 
                hidden 
            />
            <input 
                name="comment_id" 
                type="text" 
                value="${cid}" 
                hidden 
            />    
            <input 
                name="level" 
                type="text" 
                value="${level}" 
                hidden 
            />
            <input 
                name="user_id" 
                type="text" 
                value="${user_id}" 
                hidden 
            />
        </div>
        <div class="add-reply-control">
            <input 
                type="button" 
                onclick="cancelReply('${uid}')" 
                value="Cancel" 
                id="cancel-btn-${uid}" 
                style="border: none; background: none; padding: 0; color: red; margin-left: 5px;"
            />
            <input 
                type="submit" 
                value="Reply" 
                style="margin-left: 10px; margin-top: 2px"
            />
            <span 
                style="font-size: 0.7em; margin-left: 2px"
            >Mark as Anonymous</span>
            <input 
                name="is-anonymous" 
                type="checkbox" 
                style="margin-left: 5px"
            />
        </div>
    </form>
`
}

function OnInput() {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
}

function cancelReply(uid) {
    let divElem = document.getElementById( `reply-row-${uid}` );
    divElem.innerHTML = "";
    let replyBoxElem = document.getElementById( `reply-box-${uid}` );
    replyBoxElem.style.display = "block";
}

function toggleCommentsTo(status, cid) {
    hideDropdown(cid);
    let cb_elem = document.getElementById(`cb-enable-${cid}`);
    cb_elem.checked = status == 'enable';
    document.getElementById(`update-status-form-${cid}`).submit();
}

function showCommentEditForm(elem, unique_id, user_id) {
    let msgPara = document.getElementById( `msg-${unique_id}` );
    let currentMsg = msgPara.innerText;
    msgPara.innerHTML = editCommentFormHtmlString(unique_id, user_id, currentMsg);
    elem.disabled = true;
    autoHeightOnTextarea(); // add an event listener
    hideDropdown(unique_id);
    hideThreeDots(unique_id);
}

function editCommentFormHtmlString(unique_id, user_id, message) {
    return `
    <form method="POST" action="/comment_message" id="edit-form-${unique_id}" name="edit-form" >
        <div class="edit-comment">
            <input 
                name="unique_id" 
                type="text" 
                value="${unique_id}" 
                hidden 
            />
            <input 
                name="user_id" 
                type="text" 
                value="${user_id}" 
                hidden 
            />
            <textarea 
                name="message" 
                rows="1" 
                title="edit message"
                placeholder="Edit the comment" 
                required 
            >${message}</textarea>
        </div>
        <div class="edit-comment-control">
            <input 
                type="button" 
                onclick="cancelUpdate('${unique_id}','${message}'); showThreeDots('${unique_id}');" 
                value="Cancel" 
                id="cancel-comment-edit" 
                style="border: none; background: none; padding: 0; color: red; margin-left: 5px;"
            />
            <input 
                id="submit-comment-edit"
                onclick="showThreeDots('${unique_id}');"
                type="submit" 
                value="Submit" 
                style="margin-top: 2px"
            />
        </div>
    </form>
`
}

function showReplyEditForm(elem, unique_id, user_id) {
    let msgPara = document.getElementById( `msg-${unique_id}` );
    let currentMsg = msgPara.innerText;
    msgPara.innerHTML = editReplyFormHtmlString(unique_id, user_id, currentMsg);
    elem.disabled = true;
    autoHeightOnTextarea(); // add an event listener
    hideDropdown(unique_id);
    hideThreeDots(unique_id);
}

function editReplyFormHtmlString(unique_id, user_id, message) {
    return `
        <form method="POST" action="/reply_message" id="edit-form-${unique_id}" name="edit-form" >
            <div class="edit-reply">
                <input 
                    name="unique_id" 
                    type="text" 
                    value="${unique_id}" 
                    hidden 
                />
                <input
                    type="text"
                    name="user_id"
                    id="user_id"
                    value="${user_id}}"
                    hidden
                />
                <textarea 
                    id="edit-text-${unique_id}"
                    name="message" 
                    title="enter reply message here"
                    placeholder="Add a reply"
                    rows="1"  
                    required 
                >${message}</textarea>
            </div>
            <div class="edit-reply-control">
                <input 
                    type="button" 
                    onclick="cancelUpdate('${unique_id}', '${message}'); showThreeDots('${unique_id}');" 
                    value="Cancel" 
                    id="cancel-reply-edit" 
                    style="border: none; background: none; padding: 0; color: red; margin-left: 5px;"
                />
                <input 
                    id="submit-reply-edit"
                    onclick="showThreeDots('${unique_id}');"
                    type="submit" 
                    value="Submit" 
                    style="margin-top: 2px"
                />
            </div>
        </form>
`
}

function cancelUpdate(uid, msg) {
    let msgPara = document.getElementById( `msg-${uid}` );
    msgPara.innerHTML = msg;
}

function trashComment(uid, user_id) {
    hideDropdown(uid);
    return fetch(`/comments/${uid}/${user_id}`, {
      method: 'delete'
    })
    .then(response => {
        location.reload();
        response.json();
    });
}

function trashReply(uid) {
    hideDropdown(uid);
    return fetch(`/replies/${uid}`, {
      method: 'delete'
    })
    .then(response => {
        location.reload();
        response.json();
    });
}

function toggle_more_message(uid) {
    var dots = document.getElementById("dots-"+uid);
    var moreText = document.getElementById("more-"+uid);
    var btnText = document.getElementById("btn-more-"+uid);

    if (dots.style.display === "none") {
        dots.style.display = "inline";
        btnText.innerHTML = "(more)";
        moreText.style.display = "none";
    } else {
        dots.style.display = "none";
        btnText.innerHTML = "(less)";
        moreText.style.display = "inline";
    }
}

function toggle_show_replies(uid) {
    var replies = document.getElementById("replies-"+uid);
    if (replies.style.display === "none") {
        replies.style.display = "block";
        show_limited_reply_items(uid);
        add_to_shown_replies(uid);
    } else {
        replies.style.display = "none";
        remove_from_shown_replies(uid);
    }
}

function toggle_show_replies_on_restoring(uid) {
    var replies = document.getElementById("replies-"+uid);
    if (replies.style.display === "none") {
        replies.style.display = "block";
        show_limited_reply_items(uid);
    }
}

function add_to_shown_replies(uid) {
    let currentList = sessionStorage.getItem("shown_replies");
    currentList = (currentList == null) ? '' : currentList;
    let indx = currentList.indexOf(uid);
    if (indx > -1) return; // if uid already exist, don't add again, just return
    let newList = currentList.concat(','+uid);
    sessionStorage.setItem('shown_replies', newList);
}

function remove_from_shown_replies(uid) {
    let currentList = sessionStorage.getItem("shown_replies");
    let newList =  (currentList != null) ? currentList.replace(','+uid, '') : '' ;
    sessionStorage.setItem('shown_replies', newList);
}

function restore_shown_replies() {
    let currentList = sessionStorage.getItem("shown_replies");
    ids = currentList.split(',');
    for(i=0; i<ids.length; i++) {
        if (ids[i] !== null && ids[i] !== '') { 
            toggle_show_replies_on_restoring(ids[i]);
        }
    }
}

function show_limited_reply_items(uid) {
    var val = document.getElementById("reply-display-total-count-"+uid).value;
    var total = parseInt( val );
    val = document.getElementById("reply-display-count-"+uid).value;
    var count = parseInt( val );
    var iter_count = count < total ? count : total;
    for(i = 0; i < iter_count; i++) {
        document.getElementById(`reply-item-${uid}-${i}`).style.display = "block";
    }
    var more_replies_btn = document.getElementById("show-more-replies-"+uid);
    if (count < total) {
        more_replies_btn.hidden = false;
    } else {
        more_replies_btn.hidden = true;
    }
}

function show_more_replies(uid) {
    var val = document.getElementById("reply-display-count-additional-"+uid).value;
    var more_count = parseInt( val );
    val = document.getElementById("reply-display-total-count-"+uid).value;
    var total = parseInt( val );    
    var elem = document.getElementById("reply-display-count-"+uid);
    var existing_count = parseInt( elem.value );
    var new_count = (existing_count + more_count) < total ? (existing_count+more_count) : total;
    elem.setAttribute("value", new_count);
    show_limited_reply_items(uid); // call the function to display new list
}

// Retain the scroll position even after page refresh or page reload
window.addEventListener('scroll',function() {
    //When scroll changes, save it on sessionStorage.
    sessionStorage.setItem('scrollPosition', window.scrollY);
},false);

window.addEventListener('load',function() {
    // retrieve the last saved scroll position on loading the page
    if(sessionStorage.getItem('scrollPosition') !== null)
       window.scrollTo(0, sessionStorage.getItem('scrollPosition'));
},false);

window.addEventListener('DOMContentLoaded',function() {
    if(sessionStorage.getItem("shown_replies") !== null)
        restore_shown_replies(); // restore tree structure on reload of the page
},false);

function showDropdown(uid){
    var content = document.getElementById("dropdown-content-"+uid);
    content.style.display = "block";
}
function hideThreeDots(uid) {
    var img = document.getElementById("menu-img-"+uid);
    img.classList.remove("shown"); // currently menu three dots are shown
    img.classList.add("hidden"); // make those three dots hidden
}
function hideDropdown(uid){
    var content = document.getElementById("dropdown-content-"+uid);
    content.style.display = "none";
}
function showThreeDots(uid) {
    var img = document.getElementById("menu-img-"+uid);
    img.classList.remove("hidden"); // currently menu (three dots) are hidden
    img.classList.add("shown");    // make those three dots shown
}

function changeAvatar(elem) {
    var imgElem = document.getElementById("add-comment-avatar");
    if (elem.checked) {
        imgElem.src = imgElem.alt;
    } else {
        imgElem.src = imgElem.title;
    }
}