RFE Extensions source code

frontend.js

const popupAutoComplete = document.createElement("div")
const connectedToObserve = document.createElement("strong")

var popupLeftMargin = 0
var popupWidth = 0
var popupIsShow = false
var recentScrollPosition = 0

let popupItemsData = new Map()
let placeholder = ""
let socket = undefined
let debounceInputTimes

window.addEventListener("scroll", doOnScroll, true)
window.onload = doOnLoad()
window.onresize = () => { hidePopup() }
document.onmouseup = (event) => { doOnFocusToTextField(event) }
document.onclick = (event) => { doOnFocusToTextField(event) }

function doOnScroll() {
    if (popupIsShow) {
        recentScrollPosition++
        if (recentScrollPosition > 20) {
            recentScrollPosition = 0
            hidePopup()
            return
        }
        popupAutoComplete.style.top = `${window.yPosition() + 20}px`
    }
}

function doOnLoad() {
    fetch(window.dataUrl).then(response => response.json()).then((data) => {
        Object.keys(data).forEach((key) => {
            popupItemsData.set(key, data[key])
        });
    }).then(() => {
        let containerFluid = document.getElementsByClassName("container-fluid mt-3 mb-5")[0]
        if (containerFluid != null) {
            const popupItems = window.renderPopupItems(popupItemsData)
            popupAutoComplete.className = "popup-autocomplete"
            popupAutoComplete.innerHTML = popupItems

            let container = containerFluid.getElementsByClassName("container")[0]
            container.prepend(popupAutoComplete)

            socket = new WebSocket("ws://localhost:8123/platform");
            socket.onopen = function () {
                connectedToObserve.innerText = "  [Connected to observer]"
                document.querySelector(".text-left").append(connectedToObserve)
            }
            socket.onerror = function () {
                connectedToObserve.innerText = "  [Failed to connect]"
                document.querySelector(".text-left").append(connectedToObserve)
            }
            socket.onmessage = function (event) {
                const data = event.data.split("===")
                const key = data[0]
                const value = data[1]
                if (key == "path") {
                    const fullPath = value.toString().split("::")
                    const root = fullPath[0]
                    window.moveToRoot(root)
                    fullPath.forEach((target) => {
                        try {
                            window.openTarget(target)
                        } catch (err) {
                            console.log("skipped path")
                        }
                    })
                } else {
                    try {
                        document.querySelector(`a[data-line=\"${value}\"]`).scrollIntoView({
                            behavior: 'auto',
                            block: 'center',
                            inline: 'center'
                        });
                    } catch (e) {
                        console.log("skipped scroll " + e.message)
                    }
                }
            };
        }
    })
}

function doOnFocusToTextField(event) {
    hidePopup()
    const activeElement = document.activeElement
    const classNameComponent = activeElement.className
    const keyFeedback = event.target.getAttribute("key")
    if (keyFeedback != null) {
        const valueFeedback = popupItemsData.get(keyFeedback)
        const area = document.getElementsByClassName("fr-element fr-view")

        Array.from(area).forEach((form) => {
            let feedbackForm = form.innerHTML
            if (placeholder != "" && feedbackForm.includes(placeholder)) {
                let replacements = feedbackForm.replace("//" + placeholder, valueFeedback)
                form.innerHTML = replacements

                placeholder = ""
                document.activeElement.blur()
                hidePopup()
            }
        })
    } else {
        if (classNameComponent === "fr-element fr-view") {
            const textArea = document.getElementsByClassName(classNameComponent)
            Array.from(textArea).forEach((form) => {
                form.addEventListener('keydown', ({ key }) => {
                    if (["Backspace", "Delete"].includes(key)) {
                        hidePopup()
                        return false
                    }
                })

                form.addEventListener('input', () => {
                    debounceOnInput(debounceInputTimes, () => {
                        const formPosition = form.getBoundingClientRect()
                        updateSideMarginOfPopup(formPosition)

                        const pattern = /\/\/[a-zA-Z ]+/
                        const feedbackFrom = form.innerText
                        const result = feedbackFrom.match(pattern)

                        if (result != null && result[0] != "//") {
                            const resultFromFeedback = result[0]
                            placeholder = resultFromFeedback.replace("//", "").toLowerCase()

                            let filteredFeedback = new Map()
                            Array.from(popupItemsData.entries()).map(([key, val]) => {
                                if (key.toLowerCase().includes(placeholder) || val.toLowerCase().includes(placeholder)) {
                                    filteredFeedback.set(key, val)
                                }
                            });

                            if (filteredFeedback.size > 0) {
                                showPopup()
                                popupAutoComplete.innerHTML = window.renderPopupItems(filteredFeedback)
                            } else {
                                hidePopup()
                            }
                        }
                    }, 200)
                });
            })
        }
    }
}

function showPopup() {
    popupIsShow = true
    popupAutoComplete.style.top = `${window.yPosition() + 20}px`
    popupAutoComplete.style.display = "inline"
}

function hidePopup() {
    popupIsShow = false
    popupAutoComplete.style.display = "none"
}

function updateSideMarginOfPopup(react) {
    popupLeftMargin = react.left
    popupWidth = react.width
    popupAutoComplete.style.width = `${popupWidth - 40}px`
    popupAutoComplete.style.left = `${popupLeftMargin + 20}px`
}

navigation.js

window.moveToRoot = (root) => {
    const rootElm = document.querySelector(`button[data-path=\"${root}/\"]`)

    if (rootElm !== null)
        rootElm.click()
    else
        document.querySelector(`button[data-path=\"/\"]`).click()
}

window.openTarget =  (target) => {
    document.querySelectorAll(`button[title=\"${target}\"]`)[0].click()
}

utils.js

window.dataUrl = "https://gist.githubusercontent.com/alfianyusufabdullah/ba3f7e7060e75b4a8aca7f568e223d6a/raw/2f3d33d8583cf86fd5146041da321397a2d2c2f7/latest_feedback.json"

window.renderPopupItems = (data) => {
    let visual = ``
    let index = 0
    Array.from(data.entries()).map(([key, val]) => {
        if (index <= 8) {
            visual += `
                <div class="popup-autocomplete-items" key="${key}">
                    <p class="badge badge-success" style="margin: 0;" key="${key}">${key.replaceAll("_", " ")}</p>
                    <p class="popup-right-text" key="${key}">${renderText(val)}</p>
                </div>
            `
            index++
        }
    });

    return visual
}

window.renderText = (data) => {
    const temp = document.createElement("div")
    temp.innerHTML = data
    return temp.innerText
}

window.debounceOnInput = (timerObj, func, delay) => {
    clearTimeout(timerObj)
    timerObj = setTimeout(func, delay)
}

window.getBoundingClientRect = () => {
    var domRange = null
    try {
        var selection = window.getSelection();
        domRange = selection.getRangeAt(0).getBoundingClientRect()
    } catch { }

    return domRange
}

window.yPosition = () => {
    var yPos = 0
    try {
        yPos = window.getBoundingClientRect().y
    } catch { }
    return yPos
}