mirror of
https://github.com/SophiaAtkinson/steamwidgets-web.git
synced 2025-06-27 12:27:42 -07:00
377 lines
17 KiB
JavaScript
Vendored
377 lines
17 KiB
JavaScript
Vendored
/**
|
|
* 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
|
|
{
|
|
HEADLINE_MAX_LEN = 32;
|
|
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;
|
|
|
|
if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnInit !== 'undefined')) {
|
|
self.dispatchEvent(self.custom_events.eventOnInit);
|
|
}
|
|
|
|
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 headline = json.data.groupHeadline;
|
|
if (headline.length >= self.HEADLINE_MAX_LEN) {
|
|
headline = headline.substr(0, self.HEADLINE_MAX_LEN - 3) + '...';
|
|
}
|
|
|
|
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 + ';"' : '') + `>` + headline + `</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;
|
|
|
|
if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnCompleted !== 'undefined')) {
|
|
self.dispatchEvent(self.custom_events.eventOnCompleted);
|
|
}
|
|
}
|
|
};
|
|
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;
|
|
|
|
var evtOnInit = null;
|
|
var evtOnCompleted = 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 config.events !== 'undefined') {
|
|
evtOnInit = (typeof config.events.onInit === 'function') ? config.events.onInit : null;
|
|
evtOnCompleted = (typeof config.events.onCompleted === 'function') ? config.events.onCompleted : 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);
|
|
|
|
this.elem.custom_events = {};
|
|
|
|
if (evtOnInit !== null) {
|
|
this.elem.custom_events.eventOnInit = new CustomEvent('onInit', { detail: this });
|
|
this.elem.addEventListener('onInit', evtOnInit, false);
|
|
}
|
|
|
|
if (evtOnCompleted !== null) {
|
|
this.elem.custom_events.eventOnCompleted = new CustomEvent('onCompleted', { detail: this });
|
|
this.elem.addEventListener('onCompleted', evtOnCompleted, false);
|
|
}
|
|
|
|
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();
|
|
}
|
|
}
|
|
|