From 3eb61a46da54e08765f32744145476cab688e5e9 Mon Sep 17 00:00:00 2001 From: Daniel Brendel Date: Fri, 30 Sep 2022 21:35:02 +0200 Subject: [PATCH] #1 Widget data obtainer and renderer --- app/resources/css/steam_group.dev.css | 150 +++++++++ app/resources/js/steam_group.dev.js | 343 ++++++++++++++++++++ app/resources/js/steam_server.dev.js | 2 +- app/resources/js/steam_user.dev.js | 2 +- app/resources/js/steam_workshop.dev.js | 6 +- app/views/layout.php | 1 + build_ver.bat | 9 + public/css/steamwidgets/v1/steam_group.css | 150 +++++++++ public/js/steamwidgets/v1/steam_group.js | 343 ++++++++++++++++++++ public/js/steamwidgets/v1/steam_server.js | 2 +- public/js/steamwidgets/v1/steam_user.js | 2 +- public/js/steamwidgets/v1/steam_workshop.js | 4 +- 12 files changed, 1005 insertions(+), 9 deletions(-) create mode 100644 app/resources/css/steam_group.dev.css create mode 100644 app/resources/js/steam_group.dev.js create mode 100644 public/css/steamwidgets/v1/steam_group.css create mode 100644 public/js/steamwidgets/v1/steam_group.js diff --git a/app/resources/css/steam_group.dev.css b/app/resources/css/steam_group.dev.css new file mode 100644 index 0000000..05cb34f --- /dev/null +++ b/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%; + } +} \ No newline at end of file diff --git a/app/resources/js/steam_group.dev.js b/app/resources/js/steam_group.dev.js new file mode 100644 index 0000000..81b12d4 --- /dev/null +++ b/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 = ` +
0) ? 'style="' + groupBaseStyle + '"' : '') + `> +
+ +
+
` + json.data.groupHeadline + `
+ +
` + description + `
+ +
+
+
` + self.readableCount(json.data.members.count) + `
+
` + members + `
+
+ +
+
` + self.readableCount(json.data.members.online) + `
+
`+ online + `
+
+ +
+
` + self.readableCount(json.data.members.in_game) + `
+
`+ ingame + `
+
+
+ +
+
+ ` + viewtext + ` +
+
+
+
+ `; + + 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(); + } +} + \ No newline at end of file diff --git a/app/resources/js/steam_server.dev.js b/app/resources/js/steam_server.dev.js index d11c244..022185f 100644 --- a/app/resources/js/steam_server.dev.js +++ b/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 { diff --git a/app/resources/js/steam_user.dev.js b/app/resources/js/steam_user.dev.js index 388703f..1d0572b 100644 --- a/app/resources/js/steam_user.dev.js +++ b/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 { diff --git a/app/resources/js/steam_workshop.dev.js b/app/resources/js/steam_workshop.dev.js index e57fdbf..ca52ba3 100644 --- a/app/resources/js/steam_workshop.dev.js +++ b/app/resources/js/steam_workshop.dev.js @@ -121,7 +121,7 @@ class SteamWorkshopElem extends HTMLElement let description = json.data.description; if (description.length >= self.DESCRIPTION_MAX_LEN) { - description = description.substr(0, self.DESCRIPTION_MAX_LEN - 3) + '...'; + description = description.substr(0, self.DESCRIPTION_MAX_LEN - 3) + '...'; } author = author.replace(':creator', json.data.creator_data.personaname); @@ -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; diff --git a/app/views/layout.php b/app/views/layout.php index d2eaac8..b13e6bb 100644 --- a/app/views/layout.php +++ b/app/views/layout.php @@ -23,6 +23,7 @@ + diff --git a/build_ver.bat b/build_ver.bat index ccc00ac..3c499fc 100644 --- a/build_ver.bat +++ b/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 \ No newline at end of file diff --git a/public/css/steamwidgets/v1/steam_group.css b/public/css/steamwidgets/v1/steam_group.css new file mode 100644 index 0000000..05cb34f --- /dev/null +++ b/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%; + } +} \ No newline at end of file diff --git a/public/js/steamwidgets/v1/steam_group.js b/public/js/steamwidgets/v1/steam_group.js new file mode 100644 index 0000000..7c3aa06 --- /dev/null +++ b/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 = ` +
0) ? 'style="' + groupBaseStyle + '"' : '') + `> +
+ +
+
` + json.data.groupHeadline + `
+ +
` + description + `
+ +
+
+
` + self.readableCount(json.data.members.count) + `
+
` + members + `
+
+ +
+
` + self.readableCount(json.data.members.online) + `
+
`+ online + `
+
+ +
+
` + self.readableCount(json.data.members.in_game) + `
+
`+ ingame + `
+
+
+ +
+
+ ` + viewtext + ` +
+
+
+
+ `; + + 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(); + } +} + \ No newline at end of file diff --git a/public/js/steamwidgets/v1/steam_server.js b/public/js/steamwidgets/v1/steam_server.js index d11c244..022185f 100644 --- a/public/js/steamwidgets/v1/steam_server.js +++ b/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 { diff --git a/public/js/steamwidgets/v1/steam_user.js b/public/js/steamwidgets/v1/steam_user.js index 388703f..1d0572b 100644 --- a/public/js/steamwidgets/v1/steam_user.js +++ b/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 { diff --git a/public/js/steamwidgets/v1/steam_workshop.js b/public/js/steamwidgets/v1/steam_workshop.js index e57fdbf..b4fc81c 100644 --- a/public/js/steamwidgets/v1/steam_workshop.js +++ b/public/js/steamwidgets/v1/steam_workshop.js @@ -121,7 +121,7 @@ class SteamWorkshopElem extends HTMLElement let description = json.data.description; if (description.length >= self.DESCRIPTION_MAX_LEN) { - description = description.substr(0, self.DESCRIPTION_MAX_LEN - 3) + '...'; + description = description.substr(0, self.DESCRIPTION_MAX_LEN - 3) + '...'; } author = author.replace(':creator', json.data.creator_data.personaname); @@ -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 {