mirror of
https://github.com/SophiaAtkinson/steamwidgets-web.git
synced 2025-06-27 14:37:41 -07:00
Build script
This commit is contained in:
Daniel Brendel
425
public/js/steamwidgets/v1/steam_app.js
Normal file
425
public/js/steamwidgets/v1/steam_app.js
Normal file
@ -0,0 +1,425 @@
|
||||
/**
|
||||
* SteamWidgets - Steam Widgets for your website
|
||||
*
|
||||
* Module: Steam Game/App Widget
|
||||
*
|
||||
* Visit: https://github.com/danielbrendel
|
||||
*/
|
||||
|
||||
const STEAMWIDGETS_APP_ENDPOINT = 'http://localhost:8000';
|
||||
const STEAMWIDGETS_APP_VERSION = 'v1';
|
||||
|
||||
/**
|
||||
* Class SteamAppElem
|
||||
*
|
||||
* Handle custom HTML element to render Steam app/game widgets
|
||||
*/
|
||||
class SteamAppElem extends HTMLElement
|
||||
{
|
||||
storedData = {};
|
||||
|
||||
connectedCallback()
|
||||
{
|
||||
var appid = (typeof this.attributes.appid !== 'undefined') ? this.attributes.appid.value : null;
|
||||
var lang = (typeof this.attributes.lang !== 'undefined') ? this.attributes.lang.value : 'english';
|
||||
var playtext = (typeof this.attributes.playtext !== 'undefined') ? this.attributes.playtext.value : 'Play on Steam';
|
||||
var author = (typeof this.attributes.author !== 'undefined') ? this.attributes.author.value : 'By :developer';
|
||||
var onlinecount = (typeof this.attributes.onlinecount !== 'undefined') ? this.attributes.onlinecount.value : null;
|
||||
var rating = (typeof this.attributes.rating !== 'undefined') ? parseInt(this.attributes.rating.value) : 0;
|
||||
var width = (typeof this.attributes.width !== 'undefined') ? this.attributes.width.value : null;
|
||||
var height = (typeof this.attributes.height !== 'undefined') ? this.attributes.height.value : null;
|
||||
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 styleColorAuthor = (typeof this.attributes['style-color-author'] !== 'undefined') ? this.attributes['style-color-author'].value : null;
|
||||
var styleColorOnlinecount = (typeof this.attributes['style-color-onlinecount'] !== 'undefined') ? this.attributes['style-color-onlinecount'].value : null;
|
||||
var styleHideImage = (typeof this.attributes['style-hideimage'] !== 'undefined') ? parseInt(this.attributes['style-hideimage'].value) : 0;
|
||||
|
||||
if (appid !== null) {
|
||||
this.storedData = {
|
||||
appid: appid,
|
||||
lang: lang,
|
||||
playtext: playtext,
|
||||
author: author,
|
||||
onlinecount: onlinecount,
|
||||
rating: rating,
|
||||
width: width,
|
||||
height: height,
|
||||
styleBorder: styleBorder,
|
||||
styleShadow: styleShadow,
|
||||
styleColorBackground: styleColorBackground,
|
||||
styleColorTitle: styleColorTitle,
|
||||
styleColorDescription: styleColorDescription,
|
||||
styleColorAuthor: styleColorAuthor,
|
||||
styleColorOnlinecount: styleColorOnlinecount,
|
||||
styleHideImage: styleHideImage
|
||||
};
|
||||
|
||||
this.setupWidget(
|
||||
appid,
|
||||
lang,
|
||||
playtext,
|
||||
author,
|
||||
onlinecount,
|
||||
rating,
|
||||
width,
|
||||
height,
|
||||
styleBorder,
|
||||
styleShadow,
|
||||
styleColorBackground,
|
||||
styleColorTitle,
|
||||
styleColorDescription,
|
||||
styleColorAuthor,
|
||||
styleColorOnlinecount,
|
||||
styleHideImage
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
setupWidget(appid, lang, playtext, author, onlinecount, rating, width, height, styleBorder, styleShadow, styleColorBackground, styleColorTitle, styleColorDescription, styleColorAuthor, styleColorOnlinecount, styleHideImage)
|
||||
{
|
||||
var req = new XMLHttpRequest();
|
||||
var self = this;
|
||||
|
||||
req.onreadystatechange = function() {
|
||||
if (req.readyState == XMLHttpRequest.DONE) {
|
||||
let json = JSON.parse(req.responseText);
|
||||
|
||||
if (author.indexOf(':developer') !== false) {
|
||||
let developers = '';
|
||||
|
||||
json.data.developers.forEach(function(elem, index) {
|
||||
developers += elem;
|
||||
|
||||
if (index < json.data.developers.length - 1) {
|
||||
developers += ', ';
|
||||
}
|
||||
});
|
||||
|
||||
author = author.replace(':developer', developers);
|
||||
}
|
||||
|
||||
if (author.indexOf(':publisher') !== false) {
|
||||
let publishers = '';
|
||||
|
||||
json.data.publishers.forEach(function(elem, index) {
|
||||
publishers += elem;
|
||||
|
||||
if (index < json.data.publishers.length - 1) {
|
||||
publishers += ', ';
|
||||
}
|
||||
});
|
||||
|
||||
author = author.replace(':publisher', publishers);
|
||||
}
|
||||
|
||||
if (!document.getElementById('steamwidgets-app-styles')) {
|
||||
let link = document.createElement('link');
|
||||
link.id = 'steamwidgets-app-styles';
|
||||
link.rel = 'stylesheet';
|
||||
link.type = 'text/css';
|
||||
link.href = STEAMWIDGETS_APP_ENDPOINT + '/api/resource/query?type=css&module=app&version=' + STEAMWIDGETS_APP_VERSION;
|
||||
document.getElementsByTagName('head')[0].appendChild(link);
|
||||
}
|
||||
|
||||
let onlineCountText = '';
|
||||
if ((onlinecount !== null) && (json.data.online_count > 0)) {
|
||||
onlineCountText = onlinecount;
|
||||
onlineCountText = onlineCountText.replace(':count', self.readableCount(json.data.online_count));
|
||||
}
|
||||
|
||||
let widgetImageStyle = '';
|
||||
|
||||
let widgetStyle = '';
|
||||
if ((width !== null) || (styleBorder !== null) || (styleShadow !== true) || (styleColorBackground !== null)) {
|
||||
let widthCode = '';
|
||||
if (width !== null) {
|
||||
widthCode = 'max-width: ' + width + 'px;';
|
||||
}
|
||||
|
||||
let borderCode = '';
|
||||
if (styleBorder !== null) {
|
||||
if (styleBorder === 'max') {
|
||||
borderCode = 'border-radius: 25px;';
|
||||
widgetImageStyle = 'border-top-left-radius: 25px; border-top-right-radius: 25px;';
|
||||
} else if (styleBorder === 'small') {
|
||||
borderCode = 'border-radius: 4px;';
|
||||
widgetImageStyle = 'border-top-left-radius: 4px; border-top-right-radius: 4px;';
|
||||
} else if (styleBorder === 'none') {
|
||||
borderCode = 'border-radius: unset;';
|
||||
widgetImageStyle = 'border-top-left-radius: unset; border-top-right-radius: unset;';
|
||||
}
|
||||
}
|
||||
|
||||
let shadowCode = '';
|
||||
if (!styleShadow) {
|
||||
shadowCode = 'box-shadow: unset;';
|
||||
}
|
||||
|
||||
let bgColor = '';
|
||||
if (styleColorBackground !== null) {
|
||||
bgColor = 'background-color: ' + styleColorBackground + ';';
|
||||
}
|
||||
|
||||
widgetStyle = 'style="' + widthCode + borderCode + shadowCode + bgColor + '"';
|
||||
}
|
||||
|
||||
let ratingCode = '';
|
||||
if (rating) {
|
||||
ratingCode = '<br/>';
|
||||
|
||||
for (let i = 0; i < Math.round(json.data.rating_count / 2); i++) {
|
||||
ratingCode += '<span>⭐</span>';
|
||||
}
|
||||
|
||||
for (let i = Math.round(json.data.rating_count / 2); i < 5; i++) {
|
||||
ratingCode += '<span class="steam-app-title-left-rating-star-grey">⭐</span>';
|
||||
}
|
||||
}
|
||||
|
||||
let html = `
|
||||
<div class="steam-app" ` + ((widgetStyle.length > 0) ? widgetStyle: '') + `>
|
||||
<div class="steam-app-image" style="background-image: url('` + json.data.header_image + `'); ` + ((height !== null) ? 'height: ' + height + 'px;' : '') + ((widgetImageStyle.length > 0) ? widgetImageStyle : '') + ((styleHideImage) ? 'display: none;' : '') + `"></div>
|
||||
|
||||
<div class="steam-app-infos">
|
||||
<div class="steam-app-title">
|
||||
<div class="steam-app-title-left">
|
||||
<div class="steam-app-title-left-name" ` + ((styleColorTitle !== null) ? 'style="color: ' + styleColorTitle + ';"' : '') + `>` + json.data.name + `</div>
|
||||
<div class="steam-app-title-left-rating">` + ratingCode + `</div>
|
||||
</div>
|
||||
|
||||
<div class="steam-app-title-right" ` + ((styleColorOnlinecount !== null) ? 'style="color: ' + styleColorOnlinecount + ';"' : '') + `>` + ((onlineCountText.length > 0) ? onlineCountText : '') + `</div>
|
||||
</div>
|
||||
|
||||
<div class="steam-app-description" ` + ((styleColorDescription !== null) ? 'style="color: ' + styleColorDescription + ';"' : '') + `>
|
||||
` + json.data.short_description + `
|
||||
</div>
|
||||
|
||||
<div class="steam-app-footer">
|
||||
<div class="steam-app-footer-author" ` + ((styleColorAuthor !== null) ? 'style="color: ' + styleColorAuthor + ';"' : '') + `>
|
||||
` + author + `
|
||||
</div>
|
||||
|
||||
<div class="steam-app-footer-button">
|
||||
<a href="https://store.steampowered.com/app/` + json.appid + `">` + playtext + `</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
self.innerHTML = html;
|
||||
}
|
||||
};
|
||||
req.open('GET', STEAMWIDGETS_APP_ENDPOINT + '/api/query/app?appid=' + appid + '&lang=' + lang, true);
|
||||
req.send();
|
||||
}
|
||||
|
||||
updateWidget()
|
||||
{
|
||||
this.setupWidget(
|
||||
this.storedData.appid,
|
||||
this.storedData.lang,
|
||||
this.storedData.playtext,
|
||||
this.storedData.author,
|
||||
this.storedData.onlinecount,
|
||||
this.storedData.rating,
|
||||
this.storedData.width,
|
||||
this.storedData.height,
|
||||
this.storedData.styleBorder,
|
||||
this.storedData.styleShadow,
|
||||
this.storedData.styleColorBackground,
|
||||
this.storedData.styleColorTitle,
|
||||
this.storedData.styleColorDescription,
|
||||
this.storedData.styleColorAuthor,
|
||||
this.storedData.styleColorOnlinecount,
|
||||
this.storedData.styleHideImage
|
||||
);
|
||||
}
|
||||
|
||||
changeLang(lang, playtext, author, onlinecount)
|
||||
{
|
||||
this.storedData.lang = lang;
|
||||
this.storedData.playtext = playtext;
|
||||
this.storedData.author = author;
|
||||
this.storedData.onlinecount = onlinecount;
|
||||
|
||||
this.setupWidget(
|
||||
this.storedData.appid,
|
||||
this.storedData.lang,
|
||||
this.storedData.playtext,
|
||||
this.storedData.author,
|
||||
this.storedData.onlinecount,
|
||||
this.storedData.rating,
|
||||
this.storedData.width,
|
||||
this.storedData.height,
|
||||
this.storedData.styleBorder,
|
||||
this.storedData.styleShadow,
|
||||
this.storedData.styleColorBackground,
|
||||
this.storedData.styleColorTitle,
|
||||
this.storedData.styleColorDescription,
|
||||
this.storedData.styleColorAuthor,
|
||||
this.storedData.styleColorOnlinecount,
|
||||
this.storedData.styleHideImage
|
||||
);
|
||||
}
|
||||
|
||||
setImageVisibility(visibility)
|
||||
{
|
||||
this.storedData.styleHideImage = !visibility;
|
||||
|
||||
this.setupWidget(
|
||||
this.storedData.appid,
|
||||
this.storedData.lang,
|
||||
this.storedData.playtext,
|
||||
this.storedData.author,
|
||||
this.storedData.onlinecount,
|
||||
this.storedData.rating,
|
||||
this.storedData.width,
|
||||
this.storedData.height,
|
||||
this.storedData.styleBorder,
|
||||
this.storedData.styleShadow,
|
||||
this.storedData.styleColorBackground,
|
||||
this.storedData.styleColorTitle,
|
||||
this.storedData.styleColorDescription,
|
||||
this.storedData.styleColorAuthor,
|
||||
this.storedData.styleColorOnlinecount,
|
||||
this.storedData.styleHideImage
|
||||
);
|
||||
}
|
||||
|
||||
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-app', SteamAppElem);
|
||||
|
||||
/**
|
||||
* Class SteamApp
|
||||
*
|
||||
* Dynamically create a Steam game/app widget via JavaScript
|
||||
*/
|
||||
class SteamApp
|
||||
{
|
||||
elem = null;
|
||||
selident = null;
|
||||
cfg = {};
|
||||
|
||||
constructor(selector, config = {})
|
||||
{
|
||||
this.selident = selector;
|
||||
this.cfg = config;
|
||||
|
||||
var appid = (typeof config.appid !== 'undefined') ? config.appid : null;
|
||||
var lang = (typeof config.lang !== 'undefined') ? config.lang : 'english';
|
||||
var onlinecount = (typeof config.onlinecount !== 'undefined') ? config.onlinecount : null;
|
||||
var rating = (typeof config.rating !== 'undefined') ? config.rating : 0;
|
||||
var playtext = (typeof config.playtext !== 'undefined') ? config.playtext : 'Play on Steam';
|
||||
var author = (typeof config.author !== 'undefined') ? config.author : 'By :developer';
|
||||
var width = (typeof config.width !== 'undefined') ? config.width : null;
|
||||
var height = (typeof config.height !== 'undefined') ? config.height : null;
|
||||
|
||||
var styleBorder = null;
|
||||
var styleShadow = 1;
|
||||
var styleColorBackground = null;
|
||||
var styleColorTitle = null;
|
||||
var styleColorDescription = null;
|
||||
var styleColorAuthor = null;
|
||||
var styleColorOnlinecount = null;
|
||||
var styleHideImage = 0;
|
||||
|
||||
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;
|
||||
styleColorAuthor = (typeof config.style.colorAuthor !== 'undefined') ? config.style.colorAuthor : null;
|
||||
styleColorOnlinecount = (typeof config.style.colorOnlinecount !== 'undefined') ? config.style.colorOnlinecount : null;
|
||||
styleHideImage = (typeof config.style.hideimage !== 'undefined') ? config.style.hideimage : 0;
|
||||
}
|
||||
|
||||
if (typeof rating === 'boolean') {
|
||||
rating = (rating) ? 1 : 0;
|
||||
}
|
||||
|
||||
if (typeof styleShadow === 'boolean') {
|
||||
styleShadow = (styleShadow) ? 1 : 0;
|
||||
}
|
||||
|
||||
if (typeof styleHideImage === 'boolean') {
|
||||
styleHideImage = (styleHideImage) ? 1 : 0;
|
||||
}
|
||||
|
||||
this.elem = document.createElement('steam-app');
|
||||
this.elem.setAttribute('appid', appid);
|
||||
this.elem.setAttribute('lang', lang);
|
||||
this.elem.setAttribute('playtext', playtext);
|
||||
this.elem.setAttribute('author', author);
|
||||
this.elem.setAttribute('rating', rating);
|
||||
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-author', styleColorAuthor);
|
||||
this.elem.setAttribute('style-color-onlinecount', styleColorOnlinecount);
|
||||
this.elem.setAttribute('style-hideimage', styleHideImage);
|
||||
|
||||
if (onlinecount !== null) {
|
||||
this.elem.setAttribute('onlinecount', onlinecount);
|
||||
}
|
||||
|
||||
if (width !== null) {
|
||||
this.elem.setAttribute('width', width);
|
||||
}
|
||||
|
||||
if (height !== null) {
|
||||
this.elem.setAttribute('height', height);
|
||||
}
|
||||
|
||||
let sel = document.querySelector(selector);
|
||||
if (sel) {
|
||||
sel.appendChild(this.elem);
|
||||
}
|
||||
}
|
||||
|
||||
updateWidget()
|
||||
{
|
||||
this.elem.updateWidget();
|
||||
}
|
||||
|
||||
changeLang(lang, playtext, author, onlinecount)
|
||||
{
|
||||
this.elem.changeLang(lang, playtext, author, onlinecount);
|
||||
}
|
||||
|
||||
setImageVisibility(visibility)
|
||||
{
|
||||
this.elem.setImageVisibility(visibility);
|
||||
}
|
||||
|
||||
remove()
|
||||
{
|
||||
this.elem.remove();
|
||||
}
|
||||
}
|
||||
377
public/js/steamwidgets/v1/steam_server.js
Normal file
377
public/js/steamwidgets/v1/steam_server.js
Normal file
@ -0,0 +1,377 @@
|
||||
/**
|
||||
* SteamWidgets - Steam Widgets for your website
|
||||
*
|
||||
* Module: Steam Server Widget
|
||||
*
|
||||
* Visit: https://github.com/danielbrendel
|
||||
*/
|
||||
|
||||
const STEAMWIDGETS_SERVER_ENDPOINT = 'http://localhost:8000';
|
||||
const STEAMWIDGETS_SERVER_VERSION = 'v1';
|
||||
|
||||
/**
|
||||
* Class SteamServerElem
|
||||
*
|
||||
* Handle custom HTML element to render Steam server widgets
|
||||
*/
|
||||
class SteamServerElem extends HTMLElement
|
||||
{
|
||||
storedData = {};
|
||||
oldHeader = '';
|
||||
|
||||
connectedCallback()
|
||||
{
|
||||
var addr = (typeof this.attributes.addr !== 'undefined') ? this.attributes.addr.value : null;
|
||||
var header = (typeof this.attributes.header !== 'undefined') ? this.attributes.header.value : '';
|
||||
var width = (typeof this.attributes.width !== 'undefined') ? this.attributes.width.value : null;
|
||||
var height = (typeof this.attributes.height !== 'undefined') ? this.attributes.height.value : null;
|
||||
var bots = (typeof this.attributes.bots !== 'undefined') ? this.attributes.bots.value : ':count bots';
|
||||
var secure_yes = (typeof this.attributes['secure-yes'] !== 'undefined') ? this.attributes['secure-yes'].value : 'secure';
|
||||
var secure_no = (typeof this.attributes['secure-no'] !== 'undefined') ? this.attributes['secure-no'].value : 'insecure';
|
||||
var hosting_dedicated = (typeof this.attributes['hosting-dedicated'] !== 'undefined') ? this.attributes['hosting-dedicated'].value : 'dedicated';
|
||||
var hosting_listen = (typeof this.attributes['hosting-listen'] !== 'undefined') ? this.attributes['hosting-listen'].value : 'listen';
|
||||
var playtext = (typeof this.attributes.playtext !== 'undefined') ? this.attributes.playtext.value : 'Join';
|
||||
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 styleColorTextBright = (typeof this.attributes['style-color-text-bright'] !== 'undefined') ? this.attributes['style-color-text-bright'].value : null;
|
||||
var styleColorTextDark = (typeof this.attributes['style-color-text-dark'] !== 'undefined') ? this.attributes['style-color-text-dark'].value : null;
|
||||
|
||||
if (addr !== null) {
|
||||
this.storedData = {
|
||||
addr: addr,
|
||||
header: header,
|
||||
width: width,
|
||||
height: height,
|
||||
bots: bots,
|
||||
secure_yes: secure_yes,
|
||||
secure_no: secure_no,
|
||||
hosting_dedicated: hosting_dedicated,
|
||||
hosting_listen: hosting_listen,
|
||||
playtext: playtext,
|
||||
styleBorder: styleBorder,
|
||||
styleShadow: styleShadow,
|
||||
styleColorBackground: styleColorBackground,
|
||||
styleColorTextBright,
|
||||
styleColorTextDark
|
||||
};
|
||||
|
||||
this.setupWidget(
|
||||
addr,
|
||||
header,
|
||||
width,
|
||||
height,
|
||||
bots,
|
||||
secure_yes,
|
||||
secure_no,
|
||||
hosting_dedicated,
|
||||
hosting_listen,
|
||||
playtext,
|
||||
styleBorder,
|
||||
styleShadow,
|
||||
styleColorBackground,
|
||||
styleColorTextBright,
|
||||
styleColorTextDark
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
setupWidget(addr, header, width, height, bots, secure_yes, secure_no, hosting_dedicated, hosting_listen, playtext, styleBorder, styleShadow, styleColorBackground, styleColorTextBright, styleColorTextDark)
|
||||
{
|
||||
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-server-styles')) {
|
||||
let link = document.createElement('link');
|
||||
link.id = 'steamwidgets-server-styles';
|
||||
link.rel = 'stylesheet';
|
||||
link.type = 'text/css';
|
||||
link.href = STEAMWIDGETS_SERVER_ENDPOINT + '/api/resource/query?type=css&module=server&version=' + STEAMWIDGETS_SERVER_VERSION;
|
||||
document.getElementsByTagName('head')[0].appendChild(link);
|
||||
}
|
||||
|
||||
let widgetImageStyle = '';
|
||||
|
||||
let widgetStyle = '';
|
||||
if ((width !== null) || (styleBorder !== null) || (styleShadow !== true) || (styleColorBackground !== null)) {
|
||||
let widthCode = '';
|
||||
if (width !== null) {
|
||||
widthCode = 'max-width: ' + width + 'px;';
|
||||
}
|
||||
|
||||
let borderCode = '';
|
||||
if (styleBorder !== null) {
|
||||
if (styleBorder === 'max') {
|
||||
borderCode = 'border-radius: 25px;';
|
||||
widgetImageStyle = 'border-top-left-radius: 25px; border-top-right-radius: 25px;';
|
||||
} else if (styleBorder === 'small') {
|
||||
borderCode = 'border-radius: 4px;';
|
||||
widgetImageStyle = 'border-top-left-radius: 4px; border-top-right-radius: 4px;';
|
||||
} else if (styleBorder === 'none') {
|
||||
borderCode = 'border-radius: unset;';
|
||||
widgetImageStyle = 'border-top-left-radius: unset; border-top-right-radius: unset;';
|
||||
}
|
||||
}
|
||||
|
||||
let shadowCode = '';
|
||||
if (!styleShadow) {
|
||||
shadowCode = 'box-shadow: unset;';
|
||||
}
|
||||
|
||||
let bgColor = '';
|
||||
if (styleColorBackground !== null) {
|
||||
bgColor = 'background-color: ' + styleColorBackground + ';';
|
||||
}
|
||||
|
||||
widgetStyle = 'style="' + widthCode + borderCode + shadowCode + bgColor + '"';
|
||||
}
|
||||
|
||||
let bgimage = '';
|
||||
if (header !== '') {
|
||||
bgimage = 'background-image: url(\'' + header + '\');';
|
||||
}
|
||||
|
||||
bots = bots.replace(':count', json.data.bots);
|
||||
|
||||
let security = '';
|
||||
let seccol = '';
|
||||
if (json.data.secure) {
|
||||
security = secure_yes;
|
||||
seccol = 'steam-server-gameinfo-item-green';
|
||||
} else {
|
||||
security = secure_no;
|
||||
seccol = 'steam-server-gameinfo-item-red';
|
||||
}
|
||||
|
||||
let hosting = '';
|
||||
if (json.data.dedicated) {
|
||||
hosting = hosting_dedicated;
|
||||
} else {
|
||||
hosting = hosting_listen;
|
||||
}
|
||||
|
||||
let html = `
|
||||
<div class="steam-server" ` + ((widgetStyle.length > 0) ? widgetStyle: '') + `>
|
||||
<div class="steam-server-image" style="` + bgimage + ` ` + ((header == '') ? 'display: none;' : '') + ` ` + ((height !== null) ? 'height: ' + height + 'px;' : '') + ((widgetImageStyle.length > 0) ? widgetImageStyle : '') + `"></div>
|
||||
|
||||
<div class="steam-server-infos">
|
||||
<div class="steam-server-title">
|
||||
<div class="steam-server-title-left">
|
||||
<div class="steam-server-title-left-addr" ` + ((styleColorTextBright !== null) ? 'style="color: ' + styleColorTextBright + ';"' : '') + `>` + json.data.addr + `</div>
|
||||
<div class="steam-server-title-left-name" ` + ((styleColorTextDark !== null) ? 'style="color: ' + styleColorTextDark + ';"' : '') + `>`+ json.data.name + `</div>
|
||||
</div>
|
||||
|
||||
<div class="steam-server-title-right">
|
||||
<div class="steam-server-title-right-count" ` + ((styleColorTextDark !== null) ? 'style="color: ' + styleColorTextDark + ';"' : '') + `>` + json.data.players + `/` + json.data.max_players + `</div>
|
||||
<div class="steam-server-title-right-bots" ` + ((styleColorTextDark !== null) ? 'style="color: ' + styleColorTextDark + ';"' : '') + `>` + bots + `</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="steam-server-footer">
|
||||
<div class="steam-server-gameinfo" ` + ((styleColorTextDark !== null) ? 'style="color: ' + styleColorTextDark + ';"' : '') + `>
|
||||
<span class="steam-server-gameinfo-item">` + json.data.product + `</span>
|
||||
|
|
||||
<span class="steam-server-gameinfo-item">`+ json.data.map + `</span>
|
||||
|
|
||||
<span class="steam-server-gameinfo-item ` + seccol + `">` + security + `</span>
|
||||
|
|
||||
<span class="steam-server-gameinfo-item">` + hosting + `</span>
|
||||
</div>
|
||||
|
||||
<div class="steam-server-action">
|
||||
<a href="steam://connect/` + json.data.addr + `">` + playtext + `</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
self.innerHTML = html;
|
||||
}
|
||||
};
|
||||
req.open('GET', STEAMWIDGETS_SERVER_ENDPOINT + '/api/query/server?addr=' + addr, true);
|
||||
req.send();
|
||||
}
|
||||
|
||||
updateWidget()
|
||||
{
|
||||
this.setupWidget(
|
||||
this.storedData.addr,
|
||||
this.storedData.header,
|
||||
this.storedData.width,
|
||||
this.storedData.height,
|
||||
this.storedData.bots,
|
||||
this.storedData.secure_yes,
|
||||
this.storedData.secure_no,
|
||||
this.storedData.hosting_dedicated,
|
||||
this.storedData.hosting_listen,
|
||||
this.storedData.playtext,
|
||||
this.storedData.styleBorder,
|
||||
this.storedData.styleShadow,
|
||||
this.storedData.styleColorBackground,
|
||||
this.storedData.styleColorTextBright,
|
||||
this.storedData.styleColorTextDark,
|
||||
);
|
||||
}
|
||||
|
||||
changeLang(bots, secure_yes, secure_no, hosting_dedicated, hosting_listen, playtext)
|
||||
{
|
||||
this.storedData.bots = bots;
|
||||
this.storedData.secure_yes = secure_yes;
|
||||
this.storedData.secure_no = secure_no;
|
||||
this.storedData.hosting_dedicated = hosting_dedicated;
|
||||
this.storedData.hosting_listen = hosting_listen;
|
||||
this.storedData.playtext = playtext;
|
||||
|
||||
this.setupWidget(
|
||||
this.storedData.addr,
|
||||
this.storedData.header,
|
||||
this.storedData.width,
|
||||
this.storedData.height,
|
||||
this.storedData.bots,
|
||||
this.storedData.secure_yes,
|
||||
this.storedData.secure_no,
|
||||
this.storedData.hosting_dedicated,
|
||||
this.storedData.hosting_listen,
|
||||
this.storedData.playtext,
|
||||
this.storedData.styleBorder,
|
||||
this.storedData.styleShadow,
|
||||
this.storedData.styleColorBackground,
|
||||
this.storedData.styleColorTextBright,
|
||||
this.storedData.styleColorTextDark,
|
||||
);
|
||||
}
|
||||
|
||||
setImageVisibility(visibility)
|
||||
{
|
||||
if (visibility) {
|
||||
this.storedData.header = this.oldHeader;
|
||||
} else {
|
||||
if (this.storedData.header != '') {
|
||||
this.oldHeader = this.storedData.header;
|
||||
}
|
||||
|
||||
this.storedData.header = '';
|
||||
}
|
||||
|
||||
this.setupWidget(
|
||||
this.storedData.addr,
|
||||
this.storedData.header,
|
||||
this.storedData.width,
|
||||
this.storedData.height,
|
||||
this.storedData.bots,
|
||||
this.storedData.secure_yes,
|
||||
this.storedData.secure_no,
|
||||
this.storedData.hosting_dedicated,
|
||||
this.storedData.hosting_listen,
|
||||
this.storedData.playtext,
|
||||
this.storedData.styleBorder,
|
||||
this.storedData.styleShadow,
|
||||
this.storedData.styleColorBackground,
|
||||
this.storedData.styleColorTextBright,
|
||||
this.storedData.styleColorTextDark,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('steam-server', SteamServerElem);
|
||||
|
||||
/**
|
||||
* Class SteamServer
|
||||
*
|
||||
* Dynamically create a Steam server widgets via JavaScript
|
||||
*/
|
||||
class SteamServer
|
||||
{
|
||||
elem = null;
|
||||
selident = null;
|
||||
cfg = {};
|
||||
|
||||
constructor(selector, config = {})
|
||||
{
|
||||
this.selident = selector;
|
||||
this.cfg = config;
|
||||
|
||||
var addr = (typeof config.addr !== 'undefined') ? config.addr : null;
|
||||
var header = (typeof config.header !== 'undefined') ? config.header : '';
|
||||
var width = (typeof config.width !== 'undefined') ? config.width : null;
|
||||
var height = (typeof config.height !== 'undefined') ? config.height : null;
|
||||
var bots = (typeof config.bots !== 'undefined') ? config.bots : ':count bots';
|
||||
var secure_yes = (typeof config.secure_yes !== 'undefined') ? config.secure_yes : 'secure';
|
||||
var secure_no = (typeof config.secure_no !== 'undefined') ? config.secure_no : 'insecure';
|
||||
var hosting_dedicated = (typeof config.hosting_dedicated !== 'undefined') ? config.hosting_dedicated : 'dedicated';
|
||||
var hosting_listen = (typeof config.hosting_listen !== 'undefined') ? config.hosting_listen : 'listen';
|
||||
var playtext = (typeof config.playtext !== 'undefined') ? config.playtext : 'Join';
|
||||
|
||||
var styleBorder = null;
|
||||
var styleShadow = 1;
|
||||
var styleColorBackground = null;
|
||||
var styleColorTextBright = null;
|
||||
var styleColorTextDark = 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;
|
||||
styleColorTextBright = (typeof config.style.colorTextBright !== 'undefined') ? config.style.colorTextBright : null;
|
||||
styleColorTextDark = (typeof config.style.colorTextDark !== 'undefined') ? config.style.colorTextDark : null;
|
||||
}
|
||||
|
||||
if (typeof styleShadow === 'boolean') {
|
||||
styleShadow = (styleShadow) ? 1 : 0;
|
||||
}
|
||||
|
||||
this.elem = document.createElement('steam-server');
|
||||
this.elem.setAttribute('addr', addr);
|
||||
this.elem.setAttribute('header', header);
|
||||
this.elem.setAttribute('style-border', styleBorder);
|
||||
this.elem.setAttribute('style-shadow', styleShadow);
|
||||
this.elem.setAttribute('style-color-background', styleColorBackground);
|
||||
this.elem.setAttribute('style-color-text-bright', styleColorTextBright);
|
||||
this.elem.setAttribute('style-color-text-dark', styleColorTextDark);
|
||||
this.elem.setAttribute('bots', bots);
|
||||
this.elem.setAttribute('secure-yes', secure_yes);
|
||||
this.elem.setAttribute('secure-no', secure_no);
|
||||
this.elem.setAttribute('hosting-dedicated', hosting_dedicated);
|
||||
this.elem.setAttribute('hosting-listen', hosting_listen);
|
||||
this.elem.setAttribute('playtext', playtext);
|
||||
|
||||
if (width !== null) {
|
||||
this.elem.setAttribute('width', width);
|
||||
}
|
||||
|
||||
if (height !== null) {
|
||||
this.elem.setAttribute('height', height);
|
||||
}
|
||||
|
||||
let sel = document.querySelector(selector);
|
||||
if (sel) {
|
||||
sel.appendChild(this.elem);
|
||||
}
|
||||
}
|
||||
|
||||
updateWidget()
|
||||
{
|
||||
this.elem.updateWidget();
|
||||
}
|
||||
|
||||
changeLang(bots, secure_yes, secure_no, hosting_dedicated, hosting_listen, playtext)
|
||||
{
|
||||
this.elem.changeLang(bots, secure_yes, secure_no, hosting_dedicated, hosting_listen, playtext);
|
||||
}
|
||||
|
||||
setImageVisibility(visibility)
|
||||
{
|
||||
this.elem.setImageVisibility(visibility);
|
||||
}
|
||||
|
||||
remove()
|
||||
{
|
||||
this.elem.remove();
|
||||
}
|
||||
}
|
||||
|
||||
344
public/js/steamwidgets/v1/steam_user.js
Normal file
344
public/js/steamwidgets/v1/steam_user.js
Normal file
@ -0,0 +1,344 @@
|
||||
/**
|
||||
* SteamWidgets - Steam Widgets for your website
|
||||
*
|
||||
* Module: Steam User Widget
|
||||
*
|
||||
* Visit: https://github.com/danielbrendel
|
||||
*/
|
||||
|
||||
const STEAMWIDGETS_USER_ENDPOINT = 'http://localhost:8000';
|
||||
const STEAMWIDGETS_USER_VERSION = 'v1';
|
||||
|
||||
/**
|
||||
* Class SteamUserElem
|
||||
*
|
||||
* Handle custom HTML element to render Steam user widgets
|
||||
*/
|
||||
class SteamUserElem extends HTMLElement
|
||||
{
|
||||
storedData = {};
|
||||
oldHeader = '';
|
||||
|
||||
connectedCallback()
|
||||
{
|
||||
var steamid = (typeof this.attributes.steamid !== 'undefined') ? this.attributes.steamid.value : null;
|
||||
var header = (typeof this.attributes.header !== 'undefined') ? this.attributes.header.value : '';
|
||||
var width = (typeof this.attributes.width !== 'undefined') ? this.attributes.width.value : null;
|
||||
var height = (typeof this.attributes.height !== 'undefined') ? this.attributes.height.value : null;
|
||||
var online_yes = (typeof this.attributes['online-yes'] !== 'undefined') ? this.attributes['online-yes'].value : 'online';
|
||||
var online_no = (typeof this.attributes['online-no'] !== 'undefined') ? this.attributes['online-no'].value : 'offline';
|
||||
var member_since = (typeof this.attributes['member-since'] !== 'undefined') ? this.attributes['member-since'].value : 'Member since: :year-:month-:day';
|
||||
var viewtext = (typeof this.attributes.viewtext !== 'undefined') ? this.attributes.viewtext.value : 'View';
|
||||
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 styleColorTextBright = (typeof this.attributes['style-color-text-bright'] !== 'undefined') ? this.attributes['style-color-text-bright'].value : null;
|
||||
var styleColorTextDark = (typeof this.attributes['style-color-text-dark'] !== 'undefined') ? this.attributes['style-color-text-dark'].value : null;
|
||||
|
||||
if (steamid !== null) {
|
||||
this.storedData = {
|
||||
steamid: steamid,
|
||||
header: header,
|
||||
width: width,
|
||||
height: height,
|
||||
online_yes: online_yes,
|
||||
online_no: online_no,
|
||||
member_since: member_since,
|
||||
viewtext: viewtext,
|
||||
styleBorder: styleBorder,
|
||||
styleShadow: styleShadow,
|
||||
styleColorBackground: styleColorBackground,
|
||||
styleColorTextBright,
|
||||
styleColorTextDark
|
||||
};
|
||||
|
||||
this.setupWidget(
|
||||
steamid,
|
||||
header,
|
||||
width,
|
||||
height,
|
||||
online_yes,
|
||||
online_no,
|
||||
member_since,
|
||||
viewtext,
|
||||
styleBorder,
|
||||
styleShadow,
|
||||
styleColorBackground,
|
||||
styleColorTextBright,
|
||||
styleColorTextDark
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
setupWidget(steamid, header, width, height, online_yes, online_no, member_since, viewtext, styleBorder, styleShadow, styleColorBackground, styleColorTextBright, styleColorTextDark)
|
||||
{
|
||||
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-user-styles')) {
|
||||
let link = document.createElement('link');
|
||||
link.id = 'steamwidgets-user-styles';
|
||||
link.rel = 'stylesheet';
|
||||
link.type = 'text/css';
|
||||
link.href = STEAMWIDGETS_USER_ENDPOINT + '/api/resource/query?type=css&module=user&version=' + STEAMWIDGETS_USER_VERSION;
|
||||
document.getElementsByTagName('head')[0].appendChild(link);
|
||||
}
|
||||
|
||||
let widgetImageStyle = '';
|
||||
|
||||
let widgetStyle = '';
|
||||
if ((width !== null) || (styleBorder !== null) || (styleShadow !== true) || (styleColorBackground !== null)) {
|
||||
let widthCode = '';
|
||||
if (width !== null) {
|
||||
widthCode = 'max-width: ' + width + 'px;';
|
||||
}
|
||||
|
||||
let borderCode = '';
|
||||
if (styleBorder !== null) {
|
||||
if (styleBorder === 'max') {
|
||||
borderCode = 'border-radius: 25px;';
|
||||
widgetImageStyle = 'border-top-left-radius: 25px; border-top-right-radius: 25px;';
|
||||
} else if (styleBorder === 'small') {
|
||||
borderCode = 'border-radius: 4px;';
|
||||
widgetImageStyle = 'border-top-left-radius: 4px; border-top-right-radius: 4px;';
|
||||
} else if (styleBorder === 'none') {
|
||||
borderCode = 'border-radius: unset;';
|
||||
widgetImageStyle = 'border-top-left-radius: unset; border-top-right-radius: unset;';
|
||||
}
|
||||
}
|
||||
|
||||
let shadowCode = '';
|
||||
if (!styleShadow) {
|
||||
shadowCode = 'box-shadow: unset;';
|
||||
}
|
||||
|
||||
let bgColor = '';
|
||||
if (styleColorBackground !== null) {
|
||||
bgColor = 'background-color: ' + styleColorBackground + ';';
|
||||
}
|
||||
|
||||
widgetStyle = 'style="' + widthCode + borderCode + shadowCode + bgColor + '"';
|
||||
}
|
||||
|
||||
let bgimage = '';
|
||||
if (header !== '') {
|
||||
bgimage = 'background-image: url(\'' + header + '\');';
|
||||
}
|
||||
|
||||
let onstatus = '';
|
||||
let oncolor = '';
|
||||
if (json.data.personastate) {
|
||||
onstatus = online_yes;
|
||||
oncolor = 'steam-user-infos-right-online-green';
|
||||
} else {
|
||||
onstatus = online_no;
|
||||
oncolor = '';
|
||||
}
|
||||
|
||||
let regdate = new Date(json.data.timecreated * 1000);
|
||||
member_since = member_since.replace(':year', regdate.getFullYear());
|
||||
member_since = member_since.replace(':month', regdate.getMonth() + 1);
|
||||
member_since = member_since.replace(':day', regdate.getDate());
|
||||
|
||||
let html = `
|
||||
<div class="steam-user" ` + ((widgetStyle.length > 0) ? widgetStyle: '') + `>
|
||||
<div class="steam-user-image" style="` + bgimage + ` ` + ((header == '') ? 'display: none;' : '') + ` ` + ((height !== null) ? 'height: ' + height + 'px;' : '') + ((widgetImageStyle.length > 0) ? widgetImageStyle : '') + `"></div>
|
||||
|
||||
<div class="steam-user-infos">
|
||||
<div class="steam-user-infos-left">
|
||||
<div class="steam-user-infos-left-avatar"><img src="` + json.data.avatarfull + `" alt="Avatar"/></div>
|
||||
|
||||
<div class="steam-user-infos-left-text">
|
||||
<div class="steam-user-infos-left-text-name" ` + ((styleColorTextBright !== null) ? 'style="color: ' + styleColorTextBright + ';"' : '') + `>` + json.data.personaname + `</div>
|
||||
<div class="steam-user-infos-left-text-since" ` + ((styleColorTextDark !== null) ? 'style="color: ' + styleColorTextDark + ';"' : '') + `>` + member_since + `</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="steam-user-infos-right">
|
||||
<div class="steam-user-infos-right-online ` + ((json.data.personastate) ? oncolor : '') + `" ` + (((styleColorTextDark !== null) && (json.data.personastate)) ? 'style="color: ' + styleColorTextDark + ';"' : '') + `>` + onstatus + `</div>
|
||||
|
||||
<div class="steam-user-infos-right-view">
|
||||
<a href="` + json.data.profileurl + `">` + viewtext + `</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
self.innerHTML = html;
|
||||
}
|
||||
};
|
||||
req.open('GET', STEAMWIDGETS_USER_ENDPOINT + '/api/query/user?steamid=' + steamid, true);
|
||||
req.send();
|
||||
}
|
||||
|
||||
updateWidget()
|
||||
{
|
||||
this.setupWidget(
|
||||
this.storedData.steamid,
|
||||
this.storedData.header,
|
||||
this.storedData.width,
|
||||
this.storedData.height,
|
||||
this.storedData.online_yes,
|
||||
this.storedData.online_no,
|
||||
this.storedData.member_since,
|
||||
this.storedData.viewtext,
|
||||
this.storedData.styleBorder,
|
||||
this.storedData.styleShadow,
|
||||
this.storedData.styleColorBackground,
|
||||
this.storedData.styleColorTextBright,
|
||||
this.storedData.styleColorTextDark,
|
||||
);
|
||||
}
|
||||
|
||||
changeLang(online_yes, online_no, member_since, viewtext)
|
||||
{
|
||||
this.storedData.online_yes = online_yes;
|
||||
this.storedData.online_no = online_no;
|
||||
this.storedData.member_since = member_since;
|
||||
this.storedData.viewtext = viewtext;
|
||||
|
||||
this.setupWidget(
|
||||
this.storedData.steamid,
|
||||
this.storedData.header,
|
||||
this.storedData.width,
|
||||
this.storedData.height,
|
||||
this.storedData.online_yes,
|
||||
this.storedData.online_no,
|
||||
this.storedData.member_since,
|
||||
this.storedData.viewtext,
|
||||
this.storedData.styleBorder,
|
||||
this.storedData.styleShadow,
|
||||
this.storedData.styleColorBackground,
|
||||
this.storedData.styleColorTextBright,
|
||||
this.storedData.styleColorTextDark,
|
||||
);
|
||||
}
|
||||
|
||||
setImageVisibility(visibility)
|
||||
{
|
||||
if (visibility) {
|
||||
this.storedData.header = this.oldHeader;
|
||||
} else {
|
||||
if (this.storedData.header != '') {
|
||||
this.oldHeader = this.storedData.header;
|
||||
}
|
||||
|
||||
this.storedData.header = '';
|
||||
}
|
||||
|
||||
this.setupWidget(
|
||||
this.storedData.steamid,
|
||||
this.storedData.header,
|
||||
this.storedData.width,
|
||||
this.storedData.height,
|
||||
this.storedData.online_yes,
|
||||
this.storedData.online_no,
|
||||
this.storedData.member_since,
|
||||
this.storedData.viewtext,
|
||||
this.storedData.styleBorder,
|
||||
this.storedData.styleShadow,
|
||||
this.storedData.styleColorBackground,
|
||||
this.storedData.styleColorTextBright,
|
||||
this.storedData.styleColorTextDark,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('steam-user', SteamUserElem);
|
||||
|
||||
/**
|
||||
* Class SteamUser
|
||||
*
|
||||
* Dynamically create a Steam user widgets via JavaScript
|
||||
*/
|
||||
class SteamUser
|
||||
{
|
||||
elem = null;
|
||||
selident = null;
|
||||
cfg = {};
|
||||
|
||||
constructor(selector, config = {})
|
||||
{
|
||||
this.selident = selector;
|
||||
this.cfg = config;
|
||||
|
||||
var steamid = (typeof config.steamid !== 'undefined') ? config.steamid : null;
|
||||
var header = (typeof config.header !== 'undefined') ? config.header : '';
|
||||
var width = (typeof config.width !== 'undefined') ? config.width : null;
|
||||
var height = (typeof config.height !== 'undefined') ? config.height : null;
|
||||
var online_yes = (typeof config.online_yes !== 'undefined') ? config.online_yes : 'online';
|
||||
var online_no = (typeof config.online_no !== 'undefined') ? config.online_no : 'offline';
|
||||
var member_since = (typeof config.member_since !== 'undefined') ? config.member_since : 'Member since: :year-:month-:day';
|
||||
var viewtext = (typeof config.viewtext !== 'undefined') ? config.viewtext : 'View';
|
||||
|
||||
var styleBorder = null;
|
||||
var styleShadow = 1;
|
||||
var styleColorBackground = null;
|
||||
var styleColorTextBright = null;
|
||||
var styleColorTextDark = 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;
|
||||
styleColorTextBright = (typeof config.style.colorTextBright !== 'undefined') ? config.style.colorTextBright : null;
|
||||
styleColorTextDark = (typeof config.style.colorTextDark !== 'undefined') ? config.style.colorTextDark : null;
|
||||
}
|
||||
|
||||
if (typeof styleShadow === 'boolean') {
|
||||
styleShadow = (styleShadow) ? 1 : 0;
|
||||
}
|
||||
|
||||
this.elem = document.createElement('steam-user');
|
||||
this.elem.setAttribute('steamid', steamid);
|
||||
this.elem.setAttribute('header', header);
|
||||
this.elem.setAttribute('style-border', styleBorder);
|
||||
this.elem.setAttribute('style-shadow', styleShadow);
|
||||
this.elem.setAttribute('style-color-background', styleColorBackground);
|
||||
this.elem.setAttribute('style-color-text-bright', styleColorTextBright);
|
||||
this.elem.setAttribute('style-color-text-dark', styleColorTextDark);
|
||||
this.elem.setAttribute('online-yes', online_yes);
|
||||
this.elem.setAttribute('online-no', online_no);
|
||||
this.elem.setAttribute('member-since', member_since);
|
||||
this.elem.setAttribute('viewtext', viewtext);
|
||||
|
||||
if (width !== null) {
|
||||
this.elem.setAttribute('width', width);
|
||||
}
|
||||
|
||||
if (height !== null) {
|
||||
this.elem.setAttribute('height', height);
|
||||
}
|
||||
|
||||
let sel = document.querySelector(selector);
|
||||
if (sel) {
|
||||
sel.appendChild(this.elem);
|
||||
}
|
||||
}
|
||||
|
||||
updateWidget()
|
||||
{
|
||||
this.elem.updateWidget();
|
||||
}
|
||||
|
||||
changeLang(online_yes, online_no, member_since, viewtext)
|
||||
{
|
||||
this.elem.changeLang(online_yes, online_no, member_since, viewtext);
|
||||
}
|
||||
|
||||
setImageVisibility(visibility)
|
||||
{
|
||||
this.elem.setImageVisibility(visibility);
|
||||
}
|
||||
|
||||
remove()
|
||||
{
|
||||
this.elem.remove();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user