#1 Widget data obtainer and renderer

app/resources/css/steam_group.dev.css

@@ -0,0 +1,150 @@
+.steam-group {
+    position: relative;
+    min-width: 360px;
+    max-width: 555px;
+    height: 205px;
+    background-color: rgb(22, 32, 45);
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    border-radius: 25px;
+}
+
+.steam-group-preview {
+    position: relative;
+    display: inline-block;
+    min-width: 205px;
+    height: 205px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    border-top-left-radius: 25px;
+    border-bottom-left-radius: 25px;
+}
+
+.steam-group-preview-small {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.steam-group-preview-none {
+    border-top-left-radius: unset;
+    border-bottom-left-radius: unset;
+}
+
+.steam-group-info {
+    position: relative;
+    display: inline-block;
+    width: 55%;
+    margin-left: 20px;
+    top: -20px;
+}
+
+.steam-group-info-title {
+    margin-bottom: 10px;
+    color: rgb(220, 220, 220);
+    font-size: 1.1em;
+    font-family: Verdana, Arial, sans-serif;
+}
+
+.steam-group-info-description {
+    margin-bottom: 10px;
+    color: rgb(150, 150, 150);
+    font-size: 0.8em;
+    font-family: Verdana, Arial, sans-serif;
+}
+
+.steam-group-info-stats {
+    margin-bottom: 12px;
+}
+
+.steam-group-info-stats-item {
+}
+
+.steam-group-info-stats-item-count {
+    display: inline-block;
+    min-width: 50px;
+    color: rgb(59, 135, 185);
+}
+
+.steam-group-info-stats-item-label {
+    display: inline-block;
+    text-transform: uppercase;
+    color: rgb(100, 100, 100);
+}
+
+.steam-group-info-footer {
+}
+
+.steam-group-info-footer-author {
+    display: inline-block;
+    width: 69%;
+}
+
+.steam-group-info-footer-author a {
+    color: rgb(50, 115, 220);
+}
+
+.steam-group-info-footer-author a:hover {
+    color: rgb(50, 115, 220);
+    text-decoration: underline;
+}
+
+.steam-group-info-footer-action {
+    display: inline-block;
+}
+
+.steam-group-info-footer-action a {
+    color: #D2E885;
+    background: linear-gradient(to bottom, #a4d007 5%, #536904 95%);
+    border-radius: 5px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    text-decoration: none;
+    font-size: 0.9em;
+    font-family: 'Motiva Sans', sans-serif;
+}
+
+.steam-group-info-footer-action a:hover {
+    color: rgb(250, 250, 250);
+}
+
+@media screen and (max-width: 465px) {
+    .steam-group {
+        min-width: unset;
+        width: 350px;
+        min-height: 205px;
+        height: unset;
+    }
+
+    .steam-group-preview {
+        min-width: unset;
+        width: 350px;
+        height: 350px;
+        border-top-right-radius: 25px;
+        border-bottom-left-radius: unset;
+    }
+
+    .steam-group-preview-small {
+        border-top-right-radius: 4px;
+        border-bottom-left-radius: unset;
+    }
+
+    .steam-group-preview-none {
+        border-top-right-radius: unset;
+        border-bottom-left-radius: unset;
+    }
+
+    .steam-group-info {
+        width: 100%;
+        height: 195px;
+        top: unset;
+    }
+
+    .steam-group-info-title {
+        margin-top: 5px;
+    }
+
+    .steam-group-info-footer-author {
+        width: 64%;
+    }
+}

app/resources/js/steam_group.dev.js

@@ -0,0 +1,343 @@
+/**
+ * SteamWidgets - Steam Widgets for your website
+ * 
+ * Module: Steam Group Widget
+ * 
+ * Visit: https://github.com/danielbrendel
+ */
+
+const STEAMWIDGETS_GROUP_ENDPOINT = 'http://localhost:8000';
+const STEAMWIDGETS_GROUP_VERSION = 'v1';
+ 
+/**
+ * Class SteamGroupElem
+ * 
+ * Handle custom HTML element to render Steam group widgets
+ */
+class SteamGroupElem extends HTMLElement
+{
+    DESCRIPTION_MAX_LEN = 40;
+
+    storedData = {};
+    oldHeader = '';
+ 
+    connectedCallback()
+    {
+        var group = (typeof this.attributes.group !== 'undefined') ? this.attributes.group.value : null;
+        var online = (typeof this.attributes.online !== 'undefined') ? this.attributes.online.value : 'Online';
+        var ingame = (typeof this.attributes.ingame !== 'undefined') ? this.attributes.ingame.value : 'In-Game';
+        var members = (typeof this.attributes.members !== 'undefined') ? this.attributes.members.value : 'Members';
+        var viewtext = (typeof this.attributes.viewtext !== 'undefined') ? this.attributes.viewtext.value : 'View group';
+        var showImage = (typeof this.attributes['show-image'] !== 'undefined') ? parseInt(this.attributes['show-image'].value) : 1;
+        var styleBorder = (typeof this.attributes['style-border'] !== 'undefined') ? this.attributes['style-border'].value : null;
+        var styleShadow = (typeof this.attributes['style-shadow'] !== 'undefined') ? parseInt(this.attributes['style-shadow'].value) : 1;
+        var styleColorBackground = (typeof this.attributes['style-color-background'] !== 'undefined') ? this.attributes['style-color-background'].value : null;
+        var styleColorTitle = (typeof this.attributes['style-color-title'] !== 'undefined') ? this.attributes['style-color-title'].value : null;
+        var styleColorDescription = (typeof this.attributes['style-color-description'] !== 'undefined') ? this.attributes['style-color-description'].value : null;
+        var styleColorStatsCount = (typeof this.attributes['style-color-stats-count'] !== 'undefined') ? this.attributes['style-color-stats-count'].value : null;
+        var styleColorStatsLabel = (typeof this.attributes['style-color-stats-label'] !== 'undefined') ? this.attributes['style-color-stats-label'].value : null;
+        
+        if (group !== null) {
+            this.storedData = {
+                group: group,
+                online: online,
+                ingame: ingame,
+                members: members,
+                viewtext: viewtext,
+                showImage: showImage,
+                styleBorder: styleBorder,
+                styleShadow: styleShadow,
+                styleColorBackground: styleColorBackground,
+                styleColorTitle: styleColorTitle,
+                styleColorDescription: styleColorDescription,
+                styleColorStatsCount: styleColorStatsCount,
+                styleCOlorStatsLabel: styleColorStatsLabel
+            };
+
+            this.setupWidget(
+                group,
+                online,
+                ingame,
+                members,
+                viewtext,
+                showImage,
+                styleBorder,
+                styleShadow,
+                styleColorBackground,
+                styleColorTitle,
+                styleColorDescription,
+                styleColorStatsCount,
+                styleColorStatsLabel
+            );
+        }
+    }
+ 
+    setupWidget(group, online, ingame, members, viewtext, showImage, styleBorder, styleShadow, styleColorBackground, styleColorTitle, styleColorDescription, styleColorStatsCount, styleColorStatsLabel)
+    {
+        var req = new XMLHttpRequest();
+        var self = this;
+
+        req.onreadystatechange = function() {
+            if (req.readyState == XMLHttpRequest.DONE) {
+                let json = JSON.parse(req.responseText);
+
+                if (!document.getElementById('steamwidgets-group-styles')) {
+                    let link = document.createElement('link');
+                    link.id = 'steamwidgets-group-styles';
+                    link.rel = 'stylesheet';
+                    link.type = 'text/css';
+                    link.href = STEAMWIDGETS_GROUP_ENDPOINT + '/api/resource/query?type=css&module=group&version=' + STEAMWIDGETS_GROUP_VERSION;
+                    document.getElementsByTagName('head')[0].appendChild(link);
+                }
+
+                let borderCodeGroup = '';
+                let borderCodeGroupPreview = '';
+                if (styleBorder !== null) {
+                    if (styleBorder === 'max') {
+                        borderCodeGroup = '';
+                        borderCodeGroupPreview = '';
+                    } else if (styleBorder === 'small') {
+                        borderCodeGroup = 'border-radius: 4px;';
+                        borderCodeGroupPreview = 'steam-group-preview-small';
+                    } else if (styleBorder === 'none') {
+                        borderCodeGroup = 'border-radius: unset;';
+                        borderCodeGroupPreview = 'steam-group-preview-none';
+                    }
+                }
+
+                let groupBaseStyle = '';
+                if (!styleShadow) {
+                    groupBaseStyle += 'box-shadow: unset;';
+                }
+                if (borderCodeGroup.length > 0) {
+                    groupBaseStyle += borderCodeGroup;
+                }
+                if (styleColorBackground !== null) {
+                    groupBaseStyle += 'background-color: ' + styleColorBackground + ';';
+                }
+
+                let description = json.data.groupSummary;
+                if (description.length >= self.DESCRIPTION_MAX_LEN) {
+                    description = description.substr(0, self.DESCRIPTION_MAX_LEN - 3) + '...';
+                }
+
+                let html = `
+                <div class="steam-group" ` + ((groupBaseStyle.length > 0) ? 'style="' + groupBaseStyle + '"' : '') + `>
+                    <div class="steam-group-preview ` + ((borderCodeGroupPreview.length > 0) ? borderCodeGroupPreview : '') + `" style="background-image: url('` + json.data.groupAvatar + `'); ` + ((!showImage) ? 'display: none;' : '') + `"></div>
+                
+                    <div class="steam-group-info" ` + ((!showImage) ? 'style="top: 13px; width: 100%;"' : '') + `>
+                        <div class="steam-group-info-title" ` + ((styleColorTitle !== null) ? 'style="color: ' + styleColorTitle + ';"' : '') + `>` + json.data.groupHeadline + `</div>
+                
+                        <div class="steam-group-info-description" ` + ((styleColorDescription !== null) ? 'style="color: ' + styleColorDescription + ';"' : '') +  `>` + description + `</div>
+                
+                        <div class="steam-group-info-stats">
+                            <div class="steam-group-info-stats-item">
+                                <div class="steam-group-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') +  `>` + self.readableCount(json.data.members.count) + `</div>
+                                <div class="steam-group-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') +  `>` + members + `</div>
+                            </div>
+                
+                            <div class="steam-group-info-stats-item">
+                                <div class="steam-group-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') +  `>` + self.readableCount(json.data.members.online) + `</div>
+                                <div class="steam-group-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') +  `>`+ online + `</div>
+                            </div>
+                
+                            <div class="steam-group-info-stats-item">
+                                <div class="steam-group-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') +  `>` + self.readableCount(json.data.members.in_game) + `</div>
+                                <div class="steam-group-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') +  `>`+ ingame + `</div>
+                            </div>
+                        </div>
+                
+                        <div class="steam-group-info-footer">
+                            <div class="steam-group-info-footer-action">
+                                <a href="https://steamcommunity.com/groups/` + json.data.groupURL + `">` + viewtext + `</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                `;
+
+                self.innerHTML = html;
+            }
+        };
+        req.open('GET', STEAMWIDGETS_GROUP_ENDPOINT + '/api/query/group?group=' + group, true);
+        req.send();
+    }
+ 
+    updateWidget()
+    {
+        this.setupWidget(
+            this.storedData.group,
+            this.storedData.online,
+            this.storedData.ingame,
+            this.storedData.members,
+            this.storedData.viewtext,
+            this.storedData.showImage,
+            this.storedData.styleBorder,
+            this.storedData.styleShadow,
+            this.storedData.styleColorBackground,
+            this.storedData.styleColorTitle,
+            this.storedData.styleColorDescription,
+            this.storedData.styleColorStatsCount,
+            this.storedData.styleColorStatsLabel
+        );
+    }
+
+    changeLang(online, ingame, members, viewtext)
+    {
+        this.storedData.online = online;
+        this.storedData.ingame = ingame;
+        this.storedData.members = members;
+        this.storedData.viewtext = viewtext;
+
+        this.setupWidget(
+            this.storedData.group,
+            this.storedData.online,
+            this.storedData.ingame,
+            this.storedData.members,
+            this.storedData.viewtext,
+            this.storedData.showImage,
+            this.storedData.styleBorder,
+            this.storedData.styleShadow,
+            this.storedData.styleColorBackground,
+            this.storedData.styleColorTitle,
+            this.storedData.styleColorDescription,
+            this.storedData.styleColorStatsCount,
+            this.storedData.styleColorStatsLabel
+        );
+    }
+
+    setImageVisibility(visibility)
+    {
+        this.storedData.showImage = visibility;
+        
+        this.setupWidget(
+            this.storedData.group,
+            this.storedData.online,
+            this.storedData.ingame,
+            this.storedData.members,
+            this.storedData.viewtext,
+            this.storedData.showImage,
+            this.storedData.styleBorder,
+            this.storedData.styleShadow,
+            this.storedData.styleColorBackground,
+            this.storedData.styleColorTitle,
+            this.storedData.styleColorDescription,
+            this.storedData.styleColorStatsCount,
+            this.storedData.styleColorStatsLabel
+        );
+    }
+
+    readableCount(count)
+    {
+        const COUNT_MILLION = 1000000;
+        const COUNT_HUNDREDTHOUSAND = 100000;
+        const COUNT_TENTHOUSAND = 10000;
+        const COUNT_THOUSAND = 1000;
+
+        if (count >= COUNT_MILLION) {
+            return (Math.round(count / COUNT_MILLION, 1)).toString() + 'M';
+        } else if ((count < COUNT_MILLION) && (count >= COUNT_HUNDREDTHOUSAND)) {
+            return (Math.round(count / COUNT_THOUSAND, 1)).toString() + 'K';
+        } else if ((count < COUNT_HUNDREDTHOUSAND) && (count >= COUNT_TENTHOUSAND)) {
+            return (Math.round(count / COUNT_THOUSAND, 1)).toString() + 'K';
+        } else if ((count < COUNT_TENTHOUSAND) && (count >= COUNT_THOUSAND)) {
+            return (Math.round(count / COUNT_THOUSAND, 1)).toString() + 'K';
+        } else {
+            return count.toString();
+        }
+    }
+}
+ 
+window.customElements.define('steam-group', SteamGroupElem);
+ 
+/**
+ * Class SteamGroup
+ * 
+ * Dynamically create a Steam group widget via JavaScript
+ */
+class SteamGroup
+{
+    elem = null;
+    selident = null;
+    cfg = {};
+
+    constructor(selector, config = {})
+    {
+        this.selident = selector;
+        this.cfg = config;
+
+        var group = (typeof config.group !== 'undefined') ? config.group : null;
+        var members = (typeof config.members !== 'undefined') ? config.members : 'Members';
+        var online = (typeof config.online !== 'undefined') ? config.online : 'Online';
+        var ingame = (typeof config.ingame !== 'undefined') ? config.ingame : 'In-Game';
+        var viewtext = (typeof config.viewtext !== 'undefined') ? config.viewtext : 'View group';
+        var showImage = (typeof config.showImage !== 'undefined') ? config.showImage : true;
+
+        if (typeof showImage === 'boolean') {
+            showImage = (showImage) ? 1 : 0;
+        }
+
+        var styleBorder = null;
+        var styleShadow = 1;
+        var styleColorBackground = null;
+        var styleColorTitle = null;
+        var styleColorDescription = null;
+        var styleColorStatsCount = null;
+        var styleColorStatsLabel = null;
+        
+        if (typeof config.style !== 'undefined') {
+            styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null;
+            styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1;
+            styleColorBackground = (typeof config.style.colorBackground !== 'undefined') ? config.style.colorBackground : null;
+            styleColorTitle = (typeof config.style.colorTitle !== 'undefined') ? config.style.colorTitle : null;
+            styleColorDescription = (typeof config.style.colorDescription !== 'undefined') ? config.style.colorDescription : null;
+            styleColorStatsCount = (typeof config.style.colorStatsCount !== 'undefined') ? config.style.colorStatsCount : null;
+            styleColorStatsLabel = (typeof config.style.colorStatsLabel !== 'undefined') ? config.style.colorStatsLabel : null;
+        }
+
+        if (typeof styleShadow === 'boolean') {
+            styleShadow = (styleShadow) ? 1 : 0;
+        }
+
+        this.elem = document.createElement('steam-group');
+        this.elem.setAttribute('group', group);
+        this.elem.setAttribute('online', online);
+        this.elem.setAttribute('members', members);
+        this.elem.setAttribute('ingame', ingame);
+        this.elem.setAttribute('viewtext', viewtext);
+        this.elem.setAttribute('show-image', showImage);
+        this.elem.setAttribute('style-border', styleBorder);
+        this.elem.setAttribute('style-shadow', styleShadow);
+        this.elem.setAttribute('style-color-background', styleColorBackground);
+        this.elem.setAttribute('style-color-title', styleColorTitle);
+        this.elem.setAttribute('style-color-description', styleColorDescription);
+        this.elem.setAttribute('style-color-stats-count', styleColorStatsCount);
+        this.elem.setAttribute('style-color-stats-label', styleColorStatsLabel);
+
+        let sel = document.querySelector(selector);
+        if (sel) {
+            sel.appendChild(this.elem);
+        }
+    }
+
+    updateWidget()
+    {
+        this.elem.updateWidget();
+    }
+
+    changeLang(online, ingame, members, viewtext)
+    {
+    this.elem.changeLang(online, ingame, members, viewtext);
+    }
+
+    setImageVisibility(visibility)
+    {
+    this.elem.setImageVisibility(visibility);
+    }
+
+    remove()
+    {
+        this.elem.remove();
+    }
+}
+ 

app/resources/js/steam_server.dev.js

@@ -283,7 +283,7 @@
  /**
   * Class SteamServer
   * 
-  * Dynamically create a Steam server widgets via JavaScript
+  * Dynamically create a Steam server widget via JavaScript
   */
  class SteamServer
  {

app/resources/js/steam_user.dev.js

@@ -254,7 +254,7 @@
  /**
   * Class SteamUser
   * 
-  * Dynamically create a Steam user widgets via JavaScript
+  * Dynamically create a Steam user widget via JavaScript
   */
  class SteamUser
  {

app/resources/js/steam_workshop.dev.js

@@ -264,7 +264,7 @@ window.customElements.define('steam-workshop', SteamWorkshopElem);
 /**
  * Class SteamWorkshop
  * 
- * Dynamically create a Steam workshop widgets via JavaScript
+ * Dynamically create a Steam workshop widget via JavaScript
  */
 class SteamWorkshop
 {
@@ -283,7 +283,7 @@ class SteamWorkshop
         var favorites = (typeof config.favorites !== 'undefined') ? config.favorites : 'Favorites';
         var author = (typeof config.author !== 'undefined') ? config.author : 'By :creator';
         var viewtext = (typeof config.viewtext !== 'undefined') ? config.viewtext : 'View item';
-        var showImage = (typeof config.showImage !== 'undefined') ? config.showImage : null;
+        var showImage = (typeof config.showImage !== 'undefined') ? config.showImage : true;
 
         if (typeof showImage === 'boolean') {
             showImage = (showImage) ? 1 : 0;

app/views/layout.php

@@ -23,6 +23,7 @@
         <script src="{{ url('/api/resource/query') }}?type=js&module=server&version=v1"></script>
         <script src="{{ url('/api/resource/query') }}?type=js&module=user&version=v1"></script>
         <script src="{{ url('/api/resource/query') }}?type=js&module=workshop&version=v1"></script>
+        <script src="{{ url('/api/resource/query') }}?type=js&module=group&version=v1"></script>
     </head>
 
     <body>

build_ver.bat

@@ -19,6 +19,9 @@ del "%~dp0public\css\steamwidgets\%ver%\steam_user.css"
 del "%~dp0public\js\steamwidgets\%ver%\steam_workshop.js"
 del "%~dp0public\css\steamwidgets\%ver%\steam_workshop.css"
 
+del "%~dp0public\js\steamwidgets\%ver%\steam_group.js"
+del "%~dp0public\css\steamwidgets\%ver%\steam_group.css"
+
 xcopy "%~dp0app\resources\js\steam_app.dev.js" "%~dp0public\js\steamwidgets\%ver%\" /Y
 xcopy "%~dp0app\resources\css\steam_app.dev.css" "%~dp0public\css\steamwidgets\%ver%\" /Y
 
@@ -31,6 +34,9 @@ xcopy "%~dp0app\resources\css\steam_user.dev.css" "%~dp0public\css\steamwidgets\
 xcopy "%~dp0app\resources\js\steam_workshop.dev.js" "%~dp0public\js\steamwidgets\%ver%\" /Y
 xcopy "%~dp0app\resources\css\steam_workshop.dev.css" "%~dp0public\css\steamwidgets\%ver%\" /Y
 
+xcopy "%~dp0app\resources\js\steam_group.dev.js" "%~dp0public\js\steamwidgets\%ver%\" /Y
+xcopy "%~dp0app\resources\css\steam_group.dev.css" "%~dp0public\css\steamwidgets\%ver%\" /Y
+
 ren "%~dp0public\js\steamwidgets\%ver%\steam_app.dev.js" "steam_app.js"
 ren "%~dp0public\css\steamwidgets\%ver%\steam_app.dev.css" "steam_app.css"
 
@@ -43,6 +49,9 @@ ren "%~dp0public\css\steamwidgets\%ver%\steam_user.dev.css" "steam_user.css"
 ren "%~dp0public\js\steamwidgets\%ver%\steam_workshop.dev.js" "steam_workshop.js"
 ren "%~dp0public\css\steamwidgets\%ver%\steam_workshop.dev.css" "steam_workshop.css"
 
+ren "%~dp0public\js\steamwidgets\%ver%\steam_group.dev.js" "steam_group.js"
+ren "%~dp0public\css\steamwidgets\%ver%\steam_group.dev.css" "steam_group.css"
+
 echo "Job done"
 
 pause

public/css/steamwidgets/v1/steam_group.css

@@ -0,0 +1,150 @@
+.steam-group {
+    position: relative;
+    min-width: 360px;
+    max-width: 555px;
+    height: 205px;
+    background-color: rgb(22, 32, 45);
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    border-radius: 25px;
+}
+
+.steam-group-preview {
+    position: relative;
+    display: inline-block;
+    min-width: 205px;
+    height: 205px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    border-top-left-radius: 25px;
+    border-bottom-left-radius: 25px;
+}
+
+.steam-group-preview-small {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.steam-group-preview-none {
+    border-top-left-radius: unset;
+    border-bottom-left-radius: unset;
+}
+
+.steam-group-info {
+    position: relative;
+    display: inline-block;
+    width: 55%;
+    margin-left: 20px;
+    top: -20px;
+}
+
+.steam-group-info-title {
+    margin-bottom: 10px;
+    color: rgb(220, 220, 220);
+    font-size: 1.1em;
+    font-family: Verdana, Arial, sans-serif;
+}
+
+.steam-group-info-description {
+    margin-bottom: 10px;
+    color: rgb(150, 150, 150);
+    font-size: 0.8em;
+    font-family: Verdana, Arial, sans-serif;
+}
+
+.steam-group-info-stats {
+    margin-bottom: 12px;
+}
+
+.steam-group-info-stats-item {
+}
+
+.steam-group-info-stats-item-count {
+    display: inline-block;
+    min-width: 50px;
+    color: rgb(59, 135, 185);
+}
+
+.steam-group-info-stats-item-label {
+    display: inline-block;
+    text-transform: uppercase;
+    color: rgb(100, 100, 100);
+}
+
+.steam-group-info-footer {
+}
+
+.steam-group-info-footer-author {
+    display: inline-block;
+    width: 69%;
+}
+
+.steam-group-info-footer-author a {
+    color: rgb(50, 115, 220);
+}
+
+.steam-group-info-footer-author a:hover {
+    color: rgb(50, 115, 220);
+    text-decoration: underline;
+}
+
+.steam-group-info-footer-action {
+    display: inline-block;
+}
+
+.steam-group-info-footer-action a {
+    color: #D2E885;
+    background: linear-gradient(to bottom, #a4d007 5%, #536904 95%);
+    border-radius: 5px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    text-decoration: none;
+    font-size: 0.9em;
+    font-family: 'Motiva Sans', sans-serif;
+}
+
+.steam-group-info-footer-action a:hover {
+    color: rgb(250, 250, 250);
+}
+
+@media screen and (max-width: 465px) {
+    .steam-group {
+        min-width: unset;
+        width: 350px;
+        min-height: 205px;
+        height: unset;
+    }
+
+    .steam-group-preview {
+        min-width: unset;
+        width: 350px;
+        height: 350px;
+        border-top-right-radius: 25px;
+        border-bottom-left-radius: unset;
+    }
+
+    .steam-group-preview-small {
+        border-top-right-radius: 4px;
+        border-bottom-left-radius: unset;
+    }
+
+    .steam-group-preview-none {
+        border-top-right-radius: unset;
+        border-bottom-left-radius: unset;
+    }
+
+    .steam-group-info {
+        width: 100%;
+        height: 195px;
+        top: unset;
+    }
+
+    .steam-group-info-title {
+        margin-top: 5px;
+    }
+
+    .steam-group-info-footer-author {
+        width: 64%;
+    }
+}

public/js/steamwidgets/v1/steam_group.js

@@ -0,0 +1,343 @@
+/**
+ * SteamWidgets - Steam Widgets for your website
+ * 
+ * Module: Steam Group Widget
+ * 
+ * Visit: https://github.com/danielbrendel
+ */
+
+const STEAMWIDGETS_GROUP_ENDPOINT = 'http://localhost:8000';
+const STEAMWIDGETS_GROUP_VERSION = 'v1';
+ 
+/**
+ * Class SteamGroupElem
+ * 
+ * Handle custom HTML element to render Steam group widgets
+ */
+class SteamGroupElem extends HTMLElement
+{
+    DESCRIPTION_MAX_LEN = 40;
+
+    storedData = {};
+    oldHeader = '';
+ 
+    connectedCallback()
+    {
+        var group = (typeof this.attributes.group !== 'undefined') ? this.attributes.group.value : null;
+        var online = (typeof this.attributes.online !== 'undefined') ? this.attributes.online.value : 'Online';
+        var ingame = (typeof this.attributes.ingame !== 'undefined') ? this.attributes.ingame.value : 'In-Game';
+        var members = (typeof this.attributes.members !== 'undefined') ? this.attributes.members.value : 'Members';
+        var viewtext = (typeof this.attributes.viewtext !== 'undefined') ? this.attributes.viewtext.value : 'View group';
+        var showImage = (typeof this.attributes['show-image'] !== 'undefined') ? parseInt(this.attributes['show-image'].value) : 1;
+        var styleBorder = (typeof this.attributes['style-border'] !== 'undefined') ? this.attributes['style-border'].value : null;
+        var styleShadow = (typeof this.attributes['style-shadow'] !== 'undefined') ? parseInt(this.attributes['style-shadow'].value) : 1;
+        var styleColorBackground = (typeof this.attributes['style-color-background'] !== 'undefined') ? this.attributes['style-color-background'].value : null;
+        var styleColorTitle = (typeof this.attributes['style-color-title'] !== 'undefined') ? this.attributes['style-color-title'].value : null;
+        var styleColorDescription = (typeof this.attributes['style-color-description'] !== 'undefined') ? this.attributes['style-color-description'].value : null;
+        var styleColorStatsCount = (typeof this.attributes['style-color-stats-count'] !== 'undefined') ? this.attributes['style-color-stats-count'].value : null;
+        var styleColorStatsLabel = (typeof this.attributes['style-color-stats-label'] !== 'undefined') ? this.attributes['style-color-stats-label'].value : null;
+        
+        if (group !== null) {
+            this.storedData = {
+                group: group,
+                online: online,
+                ingame: ingame,
+                members: members,
+                viewtext: viewtext,
+                showImage: showImage,
+                styleBorder: styleBorder,
+                styleShadow: styleShadow,
+                styleColorBackground: styleColorBackground,
+                styleColorTitle: styleColorTitle,
+                styleColorDescription: styleColorDescription,
+                styleColorStatsCount: styleColorStatsCount,
+                styleCOlorStatsLabel: styleColorStatsLabel
+            };
+
+            this.setupWidget(
+                group,
+                online,
+                ingame,
+                members,
+                viewtext,
+                showImage,
+                styleBorder,
+                styleShadow,
+                styleColorBackground,
+                styleColorTitle,
+                styleColorDescription,
+                styleColorStatsCount,
+                styleColorStatsLabel
+            );
+        }
+    }
+ 
+    setupWidget(group, online, ingame, members, viewtext, showImage, styleBorder, styleShadow, styleColorBackground, styleColorTitle, styleColorDescription, styleColorStatsCount, styleColorStatsLabel)
+    {
+        var req = new XMLHttpRequest();
+        var self = this;
+
+        req.onreadystatechange = function() {
+            if (req.readyState == XMLHttpRequest.DONE) {
+                let json = JSON.parse(req.responseText);
+
+                if (!document.getElementById('steamwidgets-group-styles')) {
+                    let link = document.createElement('link');
+                    link.id = 'steamwidgets-group-styles';
+                    link.rel = 'stylesheet';
+                    link.type = 'text/css';
+                    link.href = STEAMWIDGETS_GROUP_ENDPOINT + '/api/resource/query?type=css&module=group&version=' + STEAMWIDGETS_GROUP_VERSION;
+                    document.getElementsByTagName('head')[0].appendChild(link);
+                }
+
+                let borderCodeGroup = '';
+                let borderCodeGroupPreview = '';
+                if (styleBorder !== null) {
+                    if (styleBorder === 'max') {
+                        borderCodeGroup = '';
+                        borderCodeGroupPreview = '';
+                    } else if (styleBorder === 'small') {
+                        borderCodeGroup = 'border-radius: 4px;';
+                        borderCodeGroupPreview = 'steam-group-preview-small';
+                    } else if (styleBorder === 'none') {
+                        borderCodeGroup = 'border-radius: unset;';
+                        borderCodeGroupPreview = 'steam-group-preview-none';
+                    }
+                }
+
+                let groupBaseStyle = '';
+                if (!styleShadow) {
+                    groupBaseStyle += 'box-shadow: unset;';
+                }
+                if (borderCodeGroup.length > 0) {
+                    groupBaseStyle += borderCodeGroup;
+                }
+                if (styleColorBackground !== null) {
+                    groupBaseStyle += 'background-color: ' + styleColorBackground + ';';
+                }
+
+                let description = json.data.groupSummary;
+                if (description.length >= self.DESCRIPTION_MAX_LEN) {
+                    description = description.substr(0, self.DESCRIPTION_MAX_LEN - 3) + '...';
+                }
+
+                let html = `
+                <div class="steam-group" ` + ((groupBaseStyle.length > 0) ? 'style="' + groupBaseStyle + '"' : '') + `>
+                    <div class="steam-group-preview ` + ((borderCodeGroupPreview.length > 0) ? borderCodeGroupPreview : '') + `" style="background-image: url('` + json.data.groupAvatar + `'); ` + ((!showImage) ? 'display: none;' : '') + `"></div>
+                
+                    <div class="steam-group-info" ` + ((!showImage) ? 'style="top: 13px; width: 100%;"' : '') + `>
+                        <div class="steam-group-info-title" ` + ((styleColorTitle !== null) ? 'style="color: ' + styleColorTitle + ';"' : '') + `>` + json.data.groupHeadline + `</div>
+                
+                        <div class="steam-group-info-description" ` + ((styleColorDescription !== null) ? 'style="color: ' + styleColorDescription + ';"' : '') +  `>` + description + `</div>
+                
+                        <div class="steam-group-info-stats">
+                            <div class="steam-group-info-stats-item">
+                                <div class="steam-group-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') +  `>` + self.readableCount(json.data.members.count) + `</div>
+                                <div class="steam-group-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') +  `>` + members + `</div>
+                            </div>
+                
+                            <div class="steam-group-info-stats-item">
+                                <div class="steam-group-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') +  `>` + self.readableCount(json.data.members.online) + `</div>
+                                <div class="steam-group-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') +  `>`+ online + `</div>
+                            </div>
+                
+                            <div class="steam-group-info-stats-item">
+                                <div class="steam-group-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') +  `>` + self.readableCount(json.data.members.in_game) + `</div>
+                                <div class="steam-group-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') +  `>`+ ingame + `</div>
+                            </div>
+                        </div>
+                
+                        <div class="steam-group-info-footer">
+                            <div class="steam-group-info-footer-action">
+                                <a href="https://steamcommunity.com/groups/` + json.data.groupURL + `">` + viewtext + `</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                `;
+
+                self.innerHTML = html;
+            }
+        };
+        req.open('GET', STEAMWIDGETS_GROUP_ENDPOINT + '/api/query/group?group=' + group, true);
+        req.send();
+    }
+ 
+    updateWidget()
+    {
+        this.setupWidget(
+            this.storedData.group,
+            this.storedData.online,
+            this.storedData.ingame,
+            this.storedData.members,
+            this.storedData.viewtext,
+            this.storedData.showImage,
+            this.storedData.styleBorder,
+            this.storedData.styleShadow,
+            this.storedData.styleColorBackground,
+            this.storedData.styleColorTitle,
+            this.storedData.styleColorDescription,
+            this.storedData.styleColorStatsCount,
+            this.storedData.styleColorStatsLabel
+        );
+    }
+
+    changeLang(online, ingame, members, viewtext)
+    {
+        this.storedData.online = online;
+        this.storedData.ingame = ingame;
+        this.storedData.members = members;
+        this.storedData.viewtext = viewtext;
+
+        this.setupWidget(
+            this.storedData.group,
+            this.storedData.online,
+            this.storedData.ingame,
+            this.storedData.members,
+            this.storedData.viewtext,
+            this.storedData.showImage,
+            this.storedData.styleBorder,
+            this.storedData.styleShadow,
+            this.storedData.styleColorBackground,
+            this.storedData.styleColorTitle,
+            this.storedData.styleColorDescription,
+            this.storedData.styleColorStatsCount,
+            this.storedData.styleColorStatsLabel
+        );
+    }
+
+    setImageVisibility(visibility)
+    {
+        this.storedData.showImage = visibility;
+        
+        this.setupWidget(
+            this.storedData.group,
+            this.storedData.online,
+            this.storedData.ingame,
+            this.storedData.members,
+            this.storedData.viewtext,
+            this.storedData.showImage,
+            this.storedData.styleBorder,
+            this.storedData.styleShadow,
+            this.storedData.styleColorBackground,
+            this.storedData.styleColorTitle,
+            this.storedData.styleColorDescription,
+            this.storedData.styleColorStatsCount,
+            this.storedData.styleColorStatsLabel
+        );
+    }
+
+    readableCount(count)
+    {
+        const COUNT_MILLION = 1000000;
+        const COUNT_HUNDREDTHOUSAND = 100000;
+        const COUNT_TENTHOUSAND = 10000;
+        const COUNT_THOUSAND = 1000;
+
+        if (count >= COUNT_MILLION) {
+            return (Math.round(count / COUNT_MILLION, 1)).toString() + 'M';
+        } else if ((count < COUNT_MILLION) && (count >= COUNT_HUNDREDTHOUSAND)) {
+            return (Math.round(count / COUNT_THOUSAND, 1)).toString() + 'K';
+        } else if ((count < COUNT_HUNDREDTHOUSAND) && (count >= COUNT_TENTHOUSAND)) {
+            return (Math.round(count / COUNT_THOUSAND, 1)).toString() + 'K';
+        } else if ((count < COUNT_TENTHOUSAND) && (count >= COUNT_THOUSAND)) {
+            return (Math.round(count / COUNT_THOUSAND, 1)).toString() + 'K';
+        } else {
+            return count.toString();
+        }
+    }
+}
+ 
+window.customElements.define('steam-group', SteamGroupElem);
+ 
+/**
+ * Class SteamGroup
+ * 
+ * Dynamically create a Steam group widget via JavaScript
+ */
+class SteamGroup
+{
+    elem = null;
+    selident = null;
+    cfg = {};
+
+    constructor(selector, config = {})
+    {
+        this.selident = selector;
+        this.cfg = config;
+
+        var group = (typeof config.group !== 'undefined') ? config.group : null;
+        var members = (typeof config.members !== 'undefined') ? config.members : 'Members';
+        var online = (typeof config.online !== 'undefined') ? config.online : 'Online';
+        var ingame = (typeof config.ingame !== 'undefined') ? config.ingame : 'In-Game';
+        var viewtext = (typeof config.viewtext !== 'undefined') ? config.viewtext : 'View group';
+        var showImage = (typeof config.showImage !== 'undefined') ? config.showImage : null;
+
+        if (typeof showImage === 'boolean') {
+            showImage = (showImage) ? 1 : 0;
+        }
+
+        var styleBorder = null;
+        var styleShadow = 1;
+        var styleColorBackground = null;
+        var styleColorTitle = null;
+        var styleColorDescription = null;
+        var styleColorStatsCount = null;
+        var styleColorStatsLabel = null;
+        
+        if (typeof config.style !== 'undefined') {
+            styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null;
+            styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1;
+            styleColorBackground = (typeof config.style.colorBackground !== 'undefined') ? config.style.colorBackground : null;
+            styleColorTitle = (typeof config.style.colorTitle !== 'undefined') ? config.style.colorTitle : null;
+            styleColorDescription = (typeof config.style.colorDescription !== 'undefined') ? config.style.colorDescription : null;
+            styleColorStatsCount = (typeof config.style.colorStatsCount !== 'undefined') ? config.style.colorStatsCount : null;
+            styleColorStatsLabel = (typeof config.style.colorStatsLabel !== 'undefined') ? config.style.colorStatsLabel : null;
+        }
+
+        if (typeof styleShadow === 'boolean') {
+            styleShadow = (styleShadow) ? 1 : 0;
+        }
+
+        this.elem = document.createElement('steam-group');
+        this.elem.setAttribute('group', group);
+        this.elem.setAttribute('online', online);
+        this.elem.setAttribute('members', members);
+        this.elem.setAttribute('ingame', ingame);
+        this.elem.setAttribute('viewtext', viewtext);
+        this.elem.setAttribute('show-image', showImage);
+        this.elem.setAttribute('style-border', styleBorder);
+        this.elem.setAttribute('style-shadow', styleShadow);
+        this.elem.setAttribute('style-color-background', styleColorBackground);
+        this.elem.setAttribute('style-color-title', styleColorTitle);
+        this.elem.setAttribute('style-color-description', styleColorDescription);
+        this.elem.setAttribute('style-color-stats-count', styleColorStatsCount);
+        this.elem.setAttribute('style-color-stats-label', styleColorStatsLabel);
+
+        let sel = document.querySelector(selector);
+        if (sel) {
+            sel.appendChild(this.elem);
+        }
+    }
+
+    updateWidget()
+    {
+        this.elem.updateWidget();
+    }
+
+    changeLang(online, ingame, members, viewtext)
+    {
+    this.elem.changeLang(online, ingame, members, viewtext);
+    }
+
+    setImageVisibility(visibility)
+    {
+    this.elem.setImageVisibility(visibility);
+    }
+
+    remove()
+    {
+        this.elem.remove();
+    }
+}
+ 

public/js/steamwidgets/v1/steam_server.js

@@ -283,7 +283,7 @@
  /**
   * Class SteamServer
   * 
-  * Dynamically create a Steam server widgets via JavaScript
+  * Dynamically create a Steam server widget via JavaScript
   */
  class SteamServer
  {

public/js/steamwidgets/v1/steam_user.js

@@ -254,7 +254,7 @@
  /**
   * Class SteamUser
   * 
-  * Dynamically create a Steam user widgets via JavaScript
+  * Dynamically create a Steam user widget via JavaScript
   */
  class SteamUser
  {

public/js/steamwidgets/v1/steam_workshop.js

@@ -264,7 +264,7 @@ window.customElements.define('steam-workshop', SteamWorkshopElem);
 /**
  * Class SteamWorkshop
  * 
- * Dynamically create a Steam workshop widgets via JavaScript
+ * Dynamically create a Steam workshop widget via JavaScript
  */
 class SteamWorkshop
 {