Comments icon hi-lite like Attachments.

Good evening everyone,

following an exchange with Alan I made this. It works well, but it uses JavaScript and could become unstable over time if Ninox changes its code.

The first code proposed by Alan had several flaws:
- It had to be added to every page and every tab on every page for it to work all the time.
- The count(files()) usage returns the total number of files in the record, including those linked to image fields. The tab could is highlighted when there were no files in the list.

For comments, the list, add, edit and delete functions exist and are accessible in JavaScript. They are just not linked to NinoxScript.

Here is the JavaScript code for the file attachments and comments badges

The code must be placed in a formula. The display of the badges will start after the first execution of the code. It is therefore advisable to place the formula on the first page that is displayed in the application.

html("
<script>
    //style base of badges
    var badgeStyle = `
                    position: absolute;
                    display: flex;
                    top: 0px;
                    right: 0px;
                    background-color: red;
                    height: 15px;
                    line-height: 15px;
                    width: 15px;
                    text-align: center;
                    border-radius: 50%;
                    color: white;
                    justify-content: center;
                    font-size: smaller`;
    // color of selection
    var filesColor = '#4970ff';
    var oldCommentColor = '#999999';
    var newCommentColor = 'red';
    // Threshold of new or old comment in ms. For 1 day = 1000ms * 60s * 60mn * 24h = 86400000ms
    var oldCommentThreshold = 1000 * 60 * 60 * 24;

    //event function called when tab changeed or popup opened
    function editorTabChanged(e) {
        //recordver the current editor with links to html components
        var editor = ui.getCurrentEditor();
        if (editor && editor.container) {
            var container = editor.container;

            //call the original event fonction editorTabChanged
            Object.getPrototypeOf(container).oldeditorTabChanged(e);

            //load files of current record (is async function)
            database.loadFiles(container.nid, (e, i) => {
                // e = error text
                // i = files array of id record this.id

                // recover the attached files icon on current editor
                var files = ui.getCurrentEditor().files.elTab[0];
                if (files) {
                    //recover or create the badge
                    var badge = files.getElementsByTagName('span')[0];
                    if (!badge) {
                        badge = document.createElement('span');
                        files.appendChild(badge);
                    }

                    //reading file list en exclude files connected to fields
                    var n = database.typeOf(container.nid);
                    var r = database.loadNodeSync(container.nid);
                    if (n && r) {
                        var s = {},
                            l = n.fields;
                        for (var c in l) {
                            if (l.hasOwnProperty(c))
                                if ('file' === l[c].base) {
                                    var d = r[c];
                                    d && (s[d] = !0)
                                }
                        }
                        let f = []
                        for (var u = 0; u < i.length; u++)
                            s[(d = i[u]).name] || f.push(d);

                        //number attached files
                        var cnt = f.length;

                        //set the badge
                        badge.style.cssText = badgeStyle;
                        badge.innerText = cnt.toString();
                        badge.style.visibility = (cnt > 0) ? 'visible' : 'hidden';
                        badge.style.backgroundColor = filesColor;
                    }
                };
            });

            //load files of current record (is async function)
            database.loadComments(container.nid, (e, i) => {
                // e = error text
                // i = comments array of id record this.id

                // recover the comment icon
                var comments = editor.comments.elTab[0];
                if (comments) {

                    //recover or create the badge
                    var badge = comments.getElementsByTagName('span')[0];
                    if (!badge) {
                        badge = document.createElement('span');
                        comments.appendChild(badge);

                    }

                    //get durrent time to compare with comment date
                    var ms = Date.now();

                    //count the number of new and old comments
                    var cntNew = i.reduce((total, el) => {
                        if (ms - el[0] < oldCommentThreshold) total += 1;
                        return total;
                    }, 0);
                    var cntAll = i.length;

                    //set the badge with different color to indicate if there is new comments
                    badge.style.cssText = badgeStyle;
                    badge.innerText = cntNew ? cntNew.toString() : cntAll.toString();
                    badge.style.visibility = (cntAll + cntNew > 0) ? 'visible' : 'hidden';
                    badge.style.backgroundColor = (cntNew > 0) ? newCommentColor : oldCommentColor;

                };
            })
        }

    }

    // On first call, put this editorTabChanged in place to Ninox function and save the oldest
    var container = ui.getCurrentEditor().container;
    if (container && !Object.getPrototypeOf(container).oldeditorTabChanged) {
        Object.getPrototypeOf(container).oldeditorTabChanged = Object.getPrototypeOf(container).editorTabChanged;
        Object.getPrototypeOf(container).editorTabChanged = editorTabChanged;
    }

</script>
")

I get this error. How do I fix it? Thanks.

I get the same error in the Mac app that Mr. K. got. When I run the code in the browser version, I don't see the badges.

I copied the code using the forum copy button and I tried it using Safari, Firefox and Chrome.

Hello to all, 
and thanks to Sean, Bruce and Alan who kindly did some testing that allowed me to stabilise the code.

It is now functional on the web and on the Mac application. 

var divId := "myDiv" + string(this.ID);
html("
<div id='" + divId + "'></div>
<script>
    debugger;
    //create global object to manage badges.
    if (!window.badges) window.badges = {};

    //style base of badges
    badges.style = `
            position: absolute;
            display: flex;
            top: 0px;
            right: 0px;
            background-color: red;
            height: 15px;
            line-height: 15px;
            width: 15px;
            text-align: center;
            border-radius: 50%;
            color: white;
            justify-content: center;
            font-size: smaller`;
    // color of selection
    var filesColor = '#4970ff';
    var oldCommentColor = '#999999';
    var newCommentColor = 'red';
    // Threshold of new or old comment in ms. For 1 day = 1000ms * 60s * 60mn * 24h = 86400000ms
    var oldCommentThreshold = 1000 * 60 * 60 * 24;

    //event function called when tab changeed or popup opened
    function selectTab(e) {
        //call the original event fonction selectTab
        if (this.oldSelectTab) this.oldSelectTab(e);
        debugger;
        try {
            //recordver the current badges.editor with links to html components
            if (this.container) {
                console.log('badges : files load')
                //load files of current record (is async function)
                database.loadFiles(this.container.nid, (e, i) => {
                    // e = error text
                    // i = files array of id record this.id

                    console.log('badges : files refresh')

                    // recover the attached files icon on current badges.editor
                    var files = this.files.elTab[0];
                    if (files) {
                        //recover or create the badge
                        var badge = files.getElementsByTagName('span')[0];
                        if (!badge) {
                            badge = document.createElement('span');
                            files.appendChild(badge);
                        }

                        //reading file list en exclude files connected to fields
                        var n = database.typeOf(this.container.nid);
                        var r = database.loadNodeSync(this.container.nid);
                        if (n && r) {
                            var s = {},
                                l = n.fields;
                            for (var c in l) {
                                if (l.hasOwnProperty(c))
                                    if ('file' === l[c].base) {
                                        var d = r[c];
                                        d && (s[d] = !0)
                                    }
                            }
                            let f = []
                            for (var u = 0; u < i.length; u++)
                                s[(d = i[u]).name] || f.push(d);

                            //number attached files
                            var cnt = f.length;

                            //set the badge
                            badge.style.cssText = badges.style;
                            badge.innerText = cnt.toString();
                            badge.style.visibility = (cnt > 0) ? 'visible' : 'hidden';
                            badge.style.backgroundColor = filesColor;
                        }
                    };
                });

                // load the comment only for the web application.On the Mac application, comments do not exist
                if (schemas.envConfig.userEnvName != 'mac') {
                    console.log('badges : comments load')

                    //load files of current record (is async function)
                    database.loadComments(this.container.nid, (e, i) => {
                        // e = error text
                        // i = comments array of id record this.id

                        console.log('badges : comments refresh')

                        // recover the comment icon
                        var comments = this.comments ? this.comments.elTab[0] : null;
                        if (comments) {

                            //recover or create the badge
                            var badge = comments.getElementsByTagName('span')[0];
                            if (!badge) {
                                badge = document.createElement('span');
                                comments.appendChild(badge);

                            }

                            //get durrent time to compare with comment date
                            var ms = Date.now();

                            //count the number of new and old comments
                            var cntNew = i.reduce((total, el) => {
                                if (ms - el[0] < oldCommentThreshold) total += 1;
                                return total;
                            }, 0);
                            var cntAll = i.length;

                            //set the badge with different color to indicate if there is new comments
                            badge.style.cssText = badges.style;
                            badge.innerText = cntNew ? cntNew.toString() : cntAll.toString();
                            badge.style.visibility = (cntAll + cntNew > 0) ? 'visible' : 'hidden';
                            badge.style.backgroundColor = (cntNew > 0) ? newCommentColor : oldCommentColor;

                        };
                    })
                }
            }

        } catch (err) {
            console.log('badges error : ' + String(err.message));
        }

    }

    // On first call, put this selectTab in place to Ninox function and save the oldest
    function setHook() {
        try {
            //badges.editor = ui.getCurrentEditor();
            if (!badges.editor) {
                debugger;
                var div = document.getElementById('" + divId + "');
                if (div) {
                    var data = $(div).closest('.component').data('component');
                    if (data) {
                        badges.editor = data.container;
                    }
                }

            }

            if (badges.editor && badges.editor.container && !Object.getPrototypeOf(badges.editor).oldSelectTab) {
                if (!Object.getPrototypeOf(badges.editor).oldSelectTab) {
                    Object.getPrototypeOf(badges.editor).oldSelectTab = Object.getPrototypeOf(badges.editor).selectTab;
                    Object.getPrototypeOf(badges.editor).selectTab = selectTab;
                    console.log('badges initalized');

                    badges.initalized = true;
                    badges.editor.selectTab(badges.editor.currentTab.id);


                    if (ui.getCurrentEditor() && ui.getCurrentEditor().currentTab)
                        ui.getCurrentEditor().selectTab(ui.getCurrentEditor().currentTab.id)
                }

            }
            else if (!badges.editor)
                setTimeout(setHook, 100);
        } catch (err) {
            alert('badges error : ' + String(err.message));
        }
    }
    setHook();

    if (badges.initalized) {
        var component = document.getElementById('" + divId + "');
        if (component)
            component.innerText = 'badges initalized';
    }

</script>
")

Hi Jaques

I had a way of listing the files count and colouring the paperclip icon, but of course like many others could not get at the comments area. 

Your solution is neat and well executed and I have already taken advantage of it (noting that it might fall apart if Nixon do their thing on the software!)

I'm on cloud version and it works a treat

Very useful and practical !