The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

[Tutorial] Online staff widget

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

[Tutorial] Online staff widget

Post by Daemon on March 1st 2017, 3:28 pm

First topic message reminder :

This code serves to create a widget with online team members.

Image:


Create a custom widget with the following content:
Code:
<ul id="staff_widget"></ul>
<script type="text/javascript">
/*
 *  Application: Staff Online Widget
 *  Date: 01/03/2017
 *  Version: 1.218072017
 *  Copyright (c) 2017 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
 */
document.addEventListener("DOMContentLoaded", function(event) {

    function staffOnline() {

        var staff = [
            {group: "Administrator", color: "FF0000"},
            {group: "Moderator", color: "008C09"},
            {group: "Helper", color: "D69A45"}
        ];

        var xhr1 = new XMLHttpRequest();
        xhr1.open("GET", "/viewonline", true);

        xhr1.onload = function() {
            if (xhr1.status >= 200 && xhr1.status < 400) {
                staffWidget.innerHTML = "";
                var tempDiv = document.createElement("div");
                tempDiv.innerHTML = xhr1.responseText;
                var table = tempDiv.querySelector(".table, .table1, .ipbtable, .three-col .forumline");
                var staffColor;
                // List each item in the array
                staff.forEach(function(item, i) {
                    staffColor = table.querySelectorAll("span[style*='" + item.color + "']");

                    // Check span elements that contain array colors
                    if (typeof(staffColor) != "undefined" && staffColor != null) {
                        var stafferHref, tempDiv2, stafferName, stafferId, avatarSrc, elLi;
                        // For each existing color
                        Array.prototype.forEach.call(staffColor, function(el, i) {
                            stafferHref = el.parentNode.href;

                            var xhr2 = new XMLHttpRequest();
                            xhr2.open("GET", stafferHref, true);

                            xhr2.onload = function() {
                                 if (xhr2.status >= 200 && xhr2.status < 400) {
                                    tempDiv2 = document.createElement("div");
                                    tempDiv2.innerHTML = xhr2.responseText;
                                    stafferName = el.parentNode.outerHTML;
                                    stafferId = el.parentNode.href.split("/u")[1];
                                    avatarSrc = tempDiv2.querySelector("img[alt='avatar']").src;
                                    elLi =
                                    "<li class='online_staff clearfix'>" +
                                    "  <div class='div-icon-staff'>" +
                                    "    <div class='staff-avatar'><img src='" + avatarSrc + "' alt='avatar'></div>" +
                                    "  </div>" +
                                    "  <div class='div-main-staff'>" +
                                    "    <div class='staff-mp'><a href='/privmsg?mode=post&u=" + stafferId + "'><img src='https://hitsk.in/t/18/09/33/i_icon_pm.png' title='Send PM'></a></div>" +
                                    "    <div class='staff-name'>" + stafferName + "</div>" +
                                    "    <p class='staff-rank'>" + item.group + "</p>" +
                                    "  </div>" +
                                    "</li>";
                                    staffWidget.innerHTML += elLi;
                                    sessionStorage.setItem("online_staff", staffWidget.innerHTML);
                                }  else {
                                    // We reached our target server, but it returned an error
                                }
                            };

                            xhr2.onerror = function() {
                                // There was a connection error of some sort
                                console.log("** An error occurred during the transaction");
                            };

                            xhr2.send();
                        });
                    }
                });
            } else {
                // We reached our target server, but it returned an error
            }
        };

        xhr1.onerror = function() {
            // There was a connection error of some sort
            console.log("** An error occurred during the transaction");
        };

        xhr1.send();
    }

    var staffWidget = document.getElementById("staff_widget");
    storedValue = sessionStorage.getItem("online_staff");
    (storedValue) ? staffWidget.innerHTML = storedValue : staffOnline();
 
    setInterval(function() {
        sessionStorage.removeItem("online_staff");
        staffOnline();
    }, 180000); // staffOnline function, reload every 3 minutes
});
</script>
<style type="text/css">
#staff_widget:empty:before {
    content: "No staff online!";
}
#staff_widget .online_staff {
  display: block;
  font-size: 14px;
  padding: 1px 0;
  zoom: 1;
}
#staff_widget .div-icon-staff {
  width: 25px;
  min-width: 25px;
  padding-top: 12px;
}
#staff_widget .div-icon-staff, #staff_widget .div-main-staff {
  display: table-cell;
  padding: 8px;
  vertical-align: top;
}
#staff_widget .staff-avatar {
  background: #fff;
  vertical-align: middle;
  display: inline-block;
  line-height: 1px;
  position: relative;
  margin: 2px;
}
#staff_widget .staff-avatar img {
  width: 34px;
  height: 34px;
  border: 1px solid #ddd;
}
#staff_widget .staff-mp {
  display: inline-block;
  float: right;
  margin-right: -25px;
}
#staff_widget .staff-rank {
  color: rgb(150, 150, 150);
  margin-top: 5px;
}
</style>

To add groups and their colors, edit in the following lines of code:
Code:
var staff = [
    {group: "Administrator", color: "FF0000"},
    {group: "Moderator", color: "008C09"},
    {group: "Helper", color: "D69A45"}
];

Smile


Last edited by Daemon on July 22nd 2017, 1:01 am; edited 14 times in total
avatar
Daemon
Forumember

Posts : 51
Reputation : 31
Language : Português

Back to top Go down


Re: [Tutorial] Online staff widget

Post by Van-Helsing on October 3rd 2017, 10:55 pm

Hello @Daemon,
I 've just tested on my new forum and its not working.

Forum Link:

avatar
Van-Helsing
Hyperactive

Male Posts : 2400
Reputation : 111
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Re: [Tutorial] Online staff widget

Post by ShinyFirefly on January 8th 2018, 11:57 pm

I just tried it on mine (phpbb3) as well and the output was all the lines of code where the widget should be.
avatar
ShinyFirefly
New Member

Female Posts : 13
Reputation : 1
Language : English
Location : The Ether

http://www.spoilerthings.forumotion.com

Back to top Go down

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum