Sophia/steamwidgets-web
1
0
Fork 0
mirror of https://github.com/SophiaAtkinson/steamwidgets-web.git synced 2025-06-27 01:57:40 -07:00
Code Issues Packages Projects Releases Wiki Activity

More settings

Browse Source
This commit is contained in:
Daniel Brendel
2022-09-25 12:51:24 +02:00
parent a3dd891b45
commit cc567fb7fb
6 changed files with 560 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -10,7 +10,7 @@ Released under the MIT license
## Description
This is the web backend as well as the documentation and resource provider for SteamWidgets.
SteamWidgets offers the possibility to comfortably render Steam related widgets into your web
document with as less effort as possible.
document with as little effort as possible.
## Current featured widgets
- Steam App Widget: Renders widgets of a Steam app/game

23
app/resources/css/steam_workshop.dev.css
View File

@ -6,9 +6,6 @@
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;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
}
.steam-workshop-preview {
@ -22,6 +19,16 @@
border-bottom-left-radius: 25px;
}
.steam-workshop-preview-small {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.steam-workshop-preview-none {
border-top-left-radius: unset;
border-bottom-left-radius: unset;
}
.steam-workshop-info {
position: relative;
display: inline-block;
@ -117,6 +124,16 @@
border-bottom-left-radius: unset;
}
.steam-workshop-preview-small {
border-top-right-radius: 4px;
border-bottom-left-radius: unset;
}
.steam-workshop-preview-none {
border-top-right-radius: unset;
border-bottom-left-radius: unset;
}
.steam-workshop-info {
width: 100%;
height: 195px;

423
app/resources/js/steam_workshop.dev.js
View File

@ -6,35 +6,40 @@
* Visit: https://github.com/danielbrendel
*/
const STEAMWIDGETS_WORKSHOP_ENDPOINT = 'http://localhost:8000';
const STEAMWIDGETS_WORKSHOP_VERSION = 'v1';
const STEAMWIDGETS_WORKSHOP_ENDPOINT = 'http://localhost:8000';
const STEAMWIDGETS_WORKSHOP_VERSION = 'v1';
/**
* Class SteamWorkshopElem
*
* Handle custom HTML element to render Steam workshop widgets
*/
class SteamWorkshopElem extends HTMLElement
{
DESCRIPTION_MAX_LEN = 40;
/**
* Class SteamWorkshopElem
*
* Handle custom HTML element to render Steam workshop widgets
*/
class SteamWorkshopElem extends HTMLElement
{
DESCRIPTION_MAX_LEN = 40;
storedData = {};
oldHeader = '';
storedData = {};
oldHeader = '';
connectedCallback()
{
var itemid = (typeof this.attributes.itemid !== 'undefined') ? this.attributes.itemid.value : null;
var views = (typeof this.attributes.views !== 'undefined') ? this.attributes.views.value : 'Views';
var subscriptions = (typeof this.attributes.subscriptions !== 'undefined') ? this.attributes.subscriptions.value : 'Subscriptions';
var favorites = (typeof this.attributes.favorites !== 'undefined') ? this.attributes.favorites.value : 'Favorites';
var author = (typeof this.attributes.author !== 'undefined') ? this.attributes.author.value : 'By :creator';
var viewtext = (typeof this.attributes.viewtext !== 'undefined') ? this.attributes.viewtext.value : 'View item';
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;
if (itemid !== null) {
this.storedData = {
connectedCallback()
{
var itemid = (typeof this.attributes.itemid !== 'undefined') ? this.attributes.itemid.value : null;
var views = (typeof this.attributes.views !== 'undefined') ? this.attributes.views.value : 'Views';
var subscriptions = (typeof this.attributes.subscriptions !== 'undefined') ? this.attributes.subscriptions.value : 'Subscriptions';
var favorites = (typeof this.attributes.favorites !== 'undefined') ? this.attributes.favorites.value : 'Favorites';
var author = (typeof this.attributes.author !== 'undefined') ? this.attributes.author.value : 'By :creator';
var viewtext = (typeof this.attributes.viewtext !== 'undefined') ? this.attributes.viewtext.value : 'View item';
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 (itemid !== null) {
this.storedData = {
itemid: itemid,
views: views,
subscriptions: subscriptions,
@ -43,10 +48,15 @@
viewtext: viewtext,
showImage: showImage,
styleBorder: styleBorder,
styleShadow: styleShadow
};
this.setupWidget(
styleShadow: styleShadow,
styleColorBackground: styleColorBackground,
styleColorTitle: styleColorTitle,
styleColorDescription: styleColorDescription,
styleColorStatsCount: styleColorStatsCount,
styleCOlorStatsLabel: styleColorStatsLabel
};
this.setupWidget(
itemid,
views,
subscriptions,
@ -55,83 +65,114 @@
viewtext,
showImage,
styleBorder,
styleShadow
);
}
}
styleShadow,
styleColorBackground,
styleColorTitle,
styleColorDescription,
styleColorStatsCount,
styleColorStatsLabel
);
}
}
setupWidget(itemid, views, subscriptions, favorites, author, viewtext, showImage, styleBorder, styleShadow)
{
var req = new XMLHttpRequest();
var self = this;
req.onreadystatechange = function() {
if (req.readyState == XMLHttpRequest.DONE) {
let json = JSON.parse(req.responseText);
setupWidget(itemid, views, subscriptions, favorites, author, viewtext, showImage, styleBorder, styleShadow, styleColorBackground, styleColorTitle, styleColorDescription, styleColorStatsCount, styleColorStatsLabel)
{
var req = new XMLHttpRequest();
var self = this;
if (!document.getElementById('steamwidgets-workshop-styles')) {
let link = document.createElement('link');
link.id = 'steamwidgets-workshop-styles';
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = STEAMWIDGETS_WORKSHOP_ENDPOINT + '/api/resource/query?type=css&module=workshop&version=' + STEAMWIDGETS_WORKSHOP_VERSION;
document.getElementsByTagName('head')[0].appendChild(link);
}
req.onreadystatechange = function() {
if (req.readyState == XMLHttpRequest.DONE) {
let json = JSON.parse(req.responseText);
let description = json.data.description;
if (description.length >= self.DESCRIPTION_MAX_LEN) {
description = description.substr(0, self.DESCRIPTION_MAX_LEN - 3) + '...';
}
if (!document.getElementById('steamwidgets-workshop-styles')) {
let link = document.createElement('link');
link.id = 'steamwidgets-workshop-styles';
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = STEAMWIDGETS_WORKSHOP_ENDPOINT + '/api/resource/query?type=css&module=workshop&version=' + STEAMWIDGETS_WORKSHOP_VERSION;
document.getElementsByTagName('head')[0].appendChild(link);
}
author = author.replace(':creator', json.data.creator_data.personaname);
let html = `
<div class="steam-workshop" ` + ((!styleShadow) ? 'style="box-shadow: unset;"' : '') + `>
<div class="steam-workshop-preview" style="background-image: url('` + json.data.preview_url + `'); ` + ((!showImage) ? 'display: none;' : '') + `"></div>
<div class="steam-workshop-info" ` + ((!showImage) ? 'style="top: 13px; width: 100%;"' : '') + `>
<div class="steam-workshop-info-title">` + json.data.title + `</div>
<div class="steam-workshop-info-description">` + description + `</div>
<div class="steam-workshop-info-stats">
<div class="steam-workshop-info-stats-item">
<div class="steam-workshop-info-stats-item-count">` + self.readableCount(json.data.views) + `</div>
<div class="steam-workshop-info-stats-item-label">` + views + `</div>
</div>
<div class="steam-workshop-info-stats-item">
<div class="steam-workshop-info-stats-item-count">` + self.readableCount(json.data.subscriptions) + `</div>
<div class="steam-workshop-info-stats-item-label">`+ subscriptions + `</div>
</div>
<div class="steam-workshop-info-stats-item">
<div class="steam-workshop-info-stats-item-count">` + self.readableCount(json.data.favorited) + `</div>
<div class="steam-workshop-info-stats-item-label">`+ favorites + `</div>
</div>
let borderCodeWorkshop = '';
let borderCodeWorkshopPreview = '';
if (styleBorder !== null) {
if (styleBorder === 'max') {
borderCodeWorkshop = '';
borderCodeWorkshopPreview = '';
} else if (styleBorder === 'small') {
borderCodeWorkshop = 'border-radius: 4px;';
borderCodeWorkshopPreview = 'steam-workshop-preview-small';
} else if (styleBorder === 'none') {
borderCodeWorkshop = 'border-radius: unset;';
borderCodeWorkshopPreview = 'steam-workshop-preview-none';
}
}
let workshopBaseStyle = '';
if (!styleShadow) {
workshopBaseStyle += 'box-shadow: unset;';
}
if (borderCodeWorkshop.length > 0) {
workshopBaseStyle += borderCodeWorkshop;
}
if (styleColorBackground !== null) {
workshopBaseStyle += 'background-color: ' + styleColorBackground + ';';
}
let description = json.data.description;
if (description.length >= self.DESCRIPTION_MAX_LEN) {
description = description.substr(0, self.DESCRIPTION_MAX_LEN - 3) + '...';
}
author = author.replace(':creator', json.data.creator_data.personaname);
let html = `
<div class="steam-workshop" ` + ((workshopBaseStyle.length > 0) ? 'style="' + workshopBaseStyle + '"' : '') + `>
<div class="steam-workshop-preview ` + ((borderCodeWorkshopPreview.length > 0) ? borderCodeWorkshopPreview : '') + `" style="background-image: url('` + json.data.preview_url + `'); ` + ((!showImage) ? 'display: none;' : '') + `"></div>
<div class="steam-workshop-info" ` + ((!showImage) ? 'style="top: 13px; width: 100%;"' : '') + `>
<div class="steam-workshop-info-title" ` + ((styleColorTitle !== null) ? 'style="color: ' + styleColorTitle + ';"' : '') + `>` + json.data.title + `</div>
<div class="steam-workshop-info-description" ` + ((styleColorDescription !== null) ? 'style="color: ' + styleColorDescription + ';"' : '') + `>` + description + `</div>
<div class="steam-workshop-info-stats">
<div class="steam-workshop-info-stats-item">
<div class="steam-workshop-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') + `>` + self.readableCount(json.data.views) + `</div>
<div class="steam-workshop-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') + `>` + views + `</div>
</div>
<div class="steam-workshop-info-footer">
<div class="steam-workshop-info-footer-author"><a href="` + json.data.creator_data.profileurl + `">` + author + `</a></div>
<div class="steam-workshop-info-footer-action">
<a href="https://steamcommunity.com/sharedfiles/filedetails/?id=` + json.data.publishedfileid + `">` + viewtext + `</a>
</div>
<div class="steam-workshop-info-stats-item">
<div class="steam-workshop-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') + `>` + self.readableCount(json.data.subscriptions) + `</div>
<div class="steam-workshop-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') + `>`+ subscriptions + `</div>
</div>
<div class="steam-workshop-info-stats-item">
<div class="steam-workshop-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') + `>` + self.readableCount(json.data.favorited) + `</div>
<div class="steam-workshop-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') + `>`+ favorites + `</div>
</div>
</div>
<div class="steam-workshop-info-footer">
<div class="steam-workshop-info-footer-author"><a href="` + json.data.creator_data.profileurl + `">` + author + `</a></div>
<div class="steam-workshop-info-footer-action">
<a href="https://steamcommunity.com/sharedfiles/filedetails/?id=` + json.data.publishedfileid + `">` + viewtext + `</a>
</div>
</div>
</div>
`;
</div>
`;
self.innerHTML = html;
}
};
req.open('GET', STEAMWIDGETS_WORKSHOP_ENDPOINT + '/api/query/workshop?itemid=' + itemid, true);
req.send();
}
self.innerHTML = html;
}
};
req.open('GET', STEAMWIDGETS_WORKSHOP_ENDPOINT + '/api/query/workshop?itemid=' + itemid, true);
req.send();
}
updateWidget()
{
this.setupWidget(
updateWidget()
{
this.setupWidget(
this.storedData.itemid,
this.storedData.views,
this.storedData.subscriptions,
@ -140,9 +181,14 @@
this.storedData.viewtext,
this.storedData.showImage,
this.storedData.styleBorder,
this.storedData.styleShadow
);
}
this.storedData.styleShadow,
this.storedData.styleColorBackground,
this.storedData.styleColorTitle,
this.storedData.styleColorDescription,
this.storedData.styleColorStatsCount,
this.storedData.styleColorStatsLabel
);
}
changeLang(views, subscriptions, favorites, author, viewtext)
{
@ -161,7 +207,12 @@
this.storedData.viewtext,
this.storedData.showImage,
this.storedData.styleBorder,
this.storedData.styleShadow
this.storedData.styleShadow,
this.storedData.styleColorBackground,
this.storedData.styleColorTitle,
this.storedData.styleColorDescription,
this.storedData.styleColorStatsCount,
this.storedData.styleColorStatsLabel
);
}
@ -178,7 +229,12 @@
this.storedData.viewtext,
this.storedData.showImage,
this.storedData.styleBorder,
this.storedData.styleShadow
this.storedData.styleShadow,
this.storedData.styleColorBackground,
this.storedData.styleColorTitle,
this.storedData.styleColorDescription,
this.storedData.styleColorStatsCount,
this.storedData.styleColorStatsLabel
);
}
@ -201,85 +257,100 @@
return count.toString();
}
}
}
}
window.customElements.define('steam-workshop', SteamWorkshopElem);
/**
* Class SteamWorkshop
*
* Dynamically create a Steam workshop widgets via JavaScript
*/
class SteamWorkshop
{
elem = null;
selident = null;
cfg = {};
constructor(selector, config = {})
{
this.selident = selector;
this.cfg = config;
var itemid = (typeof config.itemid !== 'undefined') ? config.itemid : null;
var views = (typeof config.views !== 'undefined') ? config.views : 'Views';
var subscriptions = (typeof config.subscriptions !== 'undefined') ? config.subscriptions : 'Subscriptions';
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;
window.customElements.define('steam-workshop', SteamWorkshopElem);
/**
* Class SteamWorkshop
*
* Dynamically create a Steam workshop widgets via JavaScript
*/
class SteamWorkshop
{
elem = null;
selident = null;
cfg = {};
constructor(selector, config = {})
{
this.selident = selector;
this.cfg = config;
var itemid = (typeof config.itemid !== 'undefined') ? config.itemid : null;
var views = (typeof config.views !== 'undefined') ? config.views : 'Views';
var subscriptions = (typeof config.subscriptions !== 'undefined') ? config.subscriptions : 'Subscriptions';
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;
if (typeof showImage === 'boolean') {
showImage = (showImage) ? 1 : 0;
}
var styleBorder = null;
var styleShadow = 1;
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;
}
if (typeof styleShadow === 'boolean') {
styleShadow = (styleShadow) ? 1 : 0;
}
this.elem = document.createElement('steam-workshop');
this.elem.setAttribute('itemid', itemid);
this.elem.setAttribute('views', views);
this.elem.setAttribute('subscriptions', subscriptions);
this.elem.setAttribute('favorites', favorites);
this.elem.setAttribute('author', author);
this.elem.setAttribute('viewtext', viewtext);
this.elem.setAttribute('show-image', showImage);
this.elem.setAttribute('style-border', styleBorder);
this.elem.setAttribute('style-shadow', styleShadow);
let sel = document.querySelector(selector);
if (sel) {
sel.appendChild(this.elem);
}
}
updateWidget()
{
this.elem.updateWidget();
}
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;
}
changeLang(views, subscriptions, favorites, author, viewtext)
{
this.elem.changeLang(views, subscriptions, favorites, author, viewtext);
}
if (typeof styleShadow === 'boolean') {
styleShadow = (styleShadow) ? 1 : 0;
}
setImageVisibility(visibility)
{
this.elem.setImageVisibility(visibility);
}
remove()
{
this.elem.remove();
}
}
this.elem = document.createElement('steam-workshop');
this.elem.setAttribute('itemid', itemid);
this.elem.setAttribute('views', views);
this.elem.setAttribute('subscriptions', subscriptions);
this.elem.setAttribute('favorites', favorites);
this.elem.setAttribute('author', author);
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(views, subscriptions, favorites, author, viewtext)
{
this.elem.changeLang(views, subscriptions, favorites, author, viewtext);
}
setImageVisibility(visibility)
{
this.elem.setImageVisibility(visibility);
}
remove()
{
this.elem.remove();
}
}

25
app/views/index.php
View File

@ -632,6 +632,31 @@ document.addEventListener('DOMContentLoaded', function() {
<td>style-shadow / style.shadow</td>
<td>You can specify false to prevent displaying box shadow or true to enable (default)</td>
</tr>
<tr>
<td>style-color-background / style.colorBackground</td>
<td>Specify a CSS value for the background color</td>
</tr>
<tr class="tr-colored">
<td>style-color-title / style.colorTitle</td>
<td>Specify a CSS value for the title color</td>
</tr>
<tr>
<td>style-color-description / style.colorDescription</td>
<td>Specify a CSS value for the description color</td>
</tr>
<tr class="tr-colored">
<td>style-color-stats-count / style.colorStatsCount</td>
<td>Specify a CSS value for the stats count color</td>
</tr>
<tr>
<td>style-color-stats-label / style.colorStatsLabel</td>
<td>Specify a CSS value for the stats label color</td>
</tr>
</tbody>
</table>
</p>

23
public/css/steamwidgets/v1/steam_workshop.css
View File

@ -6,9 +6,6 @@
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;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
}
.steam-workshop-preview {
@ -22,6 +19,16 @@
border-bottom-left-radius: 25px;
}
.steam-workshop-preview-small {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.steam-workshop-preview-none {
border-top-left-radius: unset;
border-bottom-left-radius: unset;
}
.steam-workshop-info {
position: relative;
display: inline-block;
@ -117,6 +124,16 @@
border-bottom-left-radius: unset;
}
.steam-workshop-preview-small {
border-top-right-radius: 4px;
border-bottom-left-radius: unset;
}
.steam-workshop-preview-none {
border-top-right-radius: unset;
border-bottom-left-radius: unset;
}
.steam-workshop-info {
width: 100%;
height: 195px;

423
public/js/steamwidgets/v1/steam_workshop.js
View File

@ -6,35 +6,40 @@
* Visit: https://github.com/danielbrendel
*/
const STEAMWIDGETS_WORKSHOP_ENDPOINT = 'http://localhost:8000';
const STEAMWIDGETS_WORKSHOP_VERSION = 'v1';
const STEAMWIDGETS_WORKSHOP_ENDPOINT = 'http://localhost:8000';
const STEAMWIDGETS_WORKSHOP_VERSION = 'v1';
/**
* Class SteamWorkshopElem
*
* Handle custom HTML element to render Steam workshop widgets
*/
class SteamWorkshopElem extends HTMLElement
{
DESCRIPTION_MAX_LEN = 40;
/**
* Class SteamWorkshopElem
*
* Handle custom HTML element to render Steam workshop widgets
*/
class SteamWorkshopElem extends HTMLElement
{
DESCRIPTION_MAX_LEN = 40;
storedData = {};
oldHeader = '';
storedData = {};
oldHeader = '';
connectedCallback()
{
var itemid = (typeof this.attributes.itemid !== 'undefined') ? this.attributes.itemid.value : null;
var views = (typeof this.attributes.views !== 'undefined') ? this.attributes.views.value : 'Views';
var subscriptions = (typeof this.attributes.subscriptions !== 'undefined') ? this.attributes.subscriptions.value : 'Subscriptions';
var favorites = (typeof this.attributes.favorites !== 'undefined') ? this.attributes.favorites.value : 'Favorites';
var author = (typeof this.attributes.author !== 'undefined') ? this.attributes.author.value : 'By :creator';
var viewtext = (typeof this.attributes.viewtext !== 'undefined') ? this.attributes.viewtext.value : 'View item';
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;
if (itemid !== null) {
this.storedData = {
connectedCallback()
{
var itemid = (typeof this.attributes.itemid !== 'undefined') ? this.attributes.itemid.value : null;
var views = (typeof this.attributes.views !== 'undefined') ? this.attributes.views.value : 'Views';
var subscriptions = (typeof this.attributes.subscriptions !== 'undefined') ? this.attributes.subscriptions.value : 'Subscriptions';
var favorites = (typeof this.attributes.favorites !== 'undefined') ? this.attributes.favorites.value : 'Favorites';
var author = (typeof this.attributes.author !== 'undefined') ? this.attributes.author.value : 'By :creator';
var viewtext = (typeof this.attributes.viewtext !== 'undefined') ? this.attributes.viewtext.value : 'View item';
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 (itemid !== null) {
this.storedData = {
itemid: itemid,
views: views,
subscriptions: subscriptions,
@ -43,10 +48,15 @@
viewtext: viewtext,
showImage: showImage,
styleBorder: styleBorder,
styleShadow: styleShadow
};
this.setupWidget(
styleShadow: styleShadow,
styleColorBackground: styleColorBackground,
styleColorTitle: styleColorTitle,
styleColorDescription: styleColorDescription,
styleColorStatsCount: styleColorStatsCount,
styleCOlorStatsLabel: styleColorStatsLabel
};
this.setupWidget(
itemid,
views,
subscriptions,
@ -55,83 +65,114 @@
viewtext,
showImage,
styleBorder,
styleShadow
);
}
}
styleShadow,
styleColorBackground,
styleColorTitle,
styleColorDescription,
styleColorStatsCount,
styleColorStatsLabel
);
}
}
setupWidget(itemid, views, subscriptions, favorites, author, viewtext, showImage, styleBorder, styleShadow)
{
var req = new XMLHttpRequest();
var self = this;
req.onreadystatechange = function() {
if (req.readyState == XMLHttpRequest.DONE) {
let json = JSON.parse(req.responseText);
setupWidget(itemid, views, subscriptions, favorites, author, viewtext, showImage, styleBorder, styleShadow, styleColorBackground, styleColorTitle, styleColorDescription, styleColorStatsCount, styleColorStatsLabel)
{
var req = new XMLHttpRequest();
var self = this;
if (!document.getElementById('steamwidgets-workshop-styles')) {
let link = document.createElement('link');
link.id = 'steamwidgets-workshop-styles';
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = STEAMWIDGETS_WORKSHOP_ENDPOINT + '/api/resource/query?type=css&module=workshop&version=' + STEAMWIDGETS_WORKSHOP_VERSION;
document.getElementsByTagName('head')[0].appendChild(link);
}
req.onreadystatechange = function() {
if (req.readyState == XMLHttpRequest.DONE) {
let json = JSON.parse(req.responseText);
let description = json.data.description;
if (description.length >= self.DESCRIPTION_MAX_LEN) {
description = description.substr(0, self.DESCRIPTION_MAX_LEN - 3) + '...';
}
if (!document.getElementById('steamwidgets-workshop-styles')) {
let link = document.createElement('link');
link.id = 'steamwidgets-workshop-styles';
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = STEAMWIDGETS_WORKSHOP_ENDPOINT + '/api/resource/query?type=css&module=workshop&version=' + STEAMWIDGETS_WORKSHOP_VERSION;
document.getElementsByTagName('head')[0].appendChild(link);
}
author = author.replace(':creator', json.data.creator_data.personaname);
let html = `
<div class="steam-workshop" ` + ((!styleShadow) ? 'style="box-shadow: unset;"' : '') + `>
<div class="steam-workshop-preview" style="background-image: url('` + json.data.preview_url + `'); ` + ((!showImage) ? 'display: none;' : '') + `"></div>
<div class="steam-workshop-info" ` + ((!showImage) ? 'style="top: 13px; width: 100%;"' : '') + `>
<div class="steam-workshop-info-title">` + json.data.title + `</div>
<div class="steam-workshop-info-description">` + description + `</div>
<div class="steam-workshop-info-stats">
<div class="steam-workshop-info-stats-item">
<div class="steam-workshop-info-stats-item-count">` + self.readableCount(json.data.views) + `</div>
<div class="steam-workshop-info-stats-item-label">` + views + `</div>
</div>
<div class="steam-workshop-info-stats-item">
<div class="steam-workshop-info-stats-item-count">` + self.readableCount(json.data.subscriptions) + `</div>
<div class="steam-workshop-info-stats-item-label">`+ subscriptions + `</div>
</div>
<div class="steam-workshop-info-stats-item">
<div class="steam-workshop-info-stats-item-count">` + self.readableCount(json.data.favorited) + `</div>
<div class="steam-workshop-info-stats-item-label">`+ favorites + `</div>
</div>
let borderCodeWorkshop = '';
let borderCodeWorkshopPreview = '';
if (styleBorder !== null) {
if (styleBorder === 'max') {
borderCodeWorkshop = '';
borderCodeWorkshopPreview = '';
} else if (styleBorder === 'small') {
borderCodeWorkshop = 'border-radius: 4px;';
borderCodeWorkshopPreview = 'steam-workshop-preview-small';
} else if (styleBorder === 'none') {
borderCodeWorkshop = 'border-radius: unset;';
borderCodeWorkshopPreview = 'steam-workshop-preview-none';
}
}
let workshopBaseStyle = '';
if (!styleShadow) {
workshopBaseStyle += 'box-shadow: unset;';
}
if (borderCodeWorkshop.length > 0) {
workshopBaseStyle += borderCodeWorkshop;
}
if (styleColorBackground !== null) {
workshopBaseStyle += 'background-color: ' + styleColorBackground + ';';
}
let description = json.data.description;
if (description.length >= self.DESCRIPTION_MAX_LEN) {
description = description.substr(0, self.DESCRIPTION_MAX_LEN - 3) + '...';
}
author = author.replace(':creator', json.data.creator_data.personaname);
let html = `
<div class="steam-workshop" ` + ((workshopBaseStyle.length > 0) ? 'style="' + workshopBaseStyle + '"' : '') + `>
<div class="steam-workshop-preview ` + ((borderCodeWorkshopPreview.length > 0) ? borderCodeWorkshopPreview : '') + `" style="background-image: url('` + json.data.preview_url + `'); ` + ((!showImage) ? 'display: none;' : '') + `"></div>
<div class="steam-workshop-info" ` + ((!showImage) ? 'style="top: 13px; width: 100%;"' : '') + `>
<div class="steam-workshop-info-title" ` + ((styleColorTitle !== null) ? 'style="color: ' + styleColorTitle + ';"' : '') + `>` + json.data.title + `</div>
<div class="steam-workshop-info-description" ` + ((styleColorDescription !== null) ? 'style="color: ' + styleColorDescription + ';"' : '') + `>` + description + `</div>
<div class="steam-workshop-info-stats">
<div class="steam-workshop-info-stats-item">
<div class="steam-workshop-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') + `>` + self.readableCount(json.data.views) + `</div>
<div class="steam-workshop-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') + `>` + views + `</div>
</div>
<div class="steam-workshop-info-footer">
<div class="steam-workshop-info-footer-author"><a href="` + json.data.creator_data.profileurl + `">` + author + `</a></div>
<div class="steam-workshop-info-footer-action">
<a href="https://steamcommunity.com/sharedfiles/filedetails/?id=` + json.data.publishedfileid + `">` + viewtext + `</a>
</div>
<div class="steam-workshop-info-stats-item">
<div class="steam-workshop-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') + `>` + self.readableCount(json.data.subscriptions) + `</div>
<div class="steam-workshop-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') + `>`+ subscriptions + `</div>
</div>
<div class="steam-workshop-info-stats-item">
<div class="steam-workshop-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') + `>` + self.readableCount(json.data.favorited) + `</div>
<div class="steam-workshop-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') + `>`+ favorites + `</div>
</div>
</div>
<div class="steam-workshop-info-footer">
<div class="steam-workshop-info-footer-author"><a href="` + json.data.creator_data.profileurl + `">` + author + `</a></div>
<div class="steam-workshop-info-footer-action">
<a href="https://steamcommunity.com/sharedfiles/filedetails/?id=` + json.data.publishedfileid + `">` + viewtext + `</a>
</div>
</div>
</div>
`;
</div>
`;
self.innerHTML = html;
}
};
req.open('GET', STEAMWIDGETS_WORKSHOP_ENDPOINT + '/api/query/workshop?itemid=' + itemid, true);
req.send();
}
self.innerHTML = html;
}
};
req.open('GET', STEAMWIDGETS_WORKSHOP_ENDPOINT + '/api/query/workshop?itemid=' + itemid, true);
req.send();
}
updateWidget()
{
this.setupWidget(
updateWidget()
{
this.setupWidget(
this.storedData.itemid,
this.storedData.views,
this.storedData.subscriptions,
@ -140,9 +181,14 @@
this.storedData.viewtext,
this.storedData.showImage,
this.storedData.styleBorder,
this.storedData.styleShadow
);
}
this.storedData.styleShadow,
this.storedData.styleColorBackground,
this.storedData.styleColorTitle,
this.storedData.styleColorDescription,
this.storedData.styleColorStatsCount,
this.storedData.styleColorStatsLabel
);
}
changeLang(views, subscriptions, favorites, author, viewtext)
{
@ -161,7 +207,12 @@
this.storedData.viewtext,
this.storedData.showImage,
this.storedData.styleBorder,
this.storedData.styleShadow
this.storedData.styleShadow,
this.storedData.styleColorBackground,
this.storedData.styleColorTitle,
this.storedData.styleColorDescription,
this.storedData.styleColorStatsCount,
this.storedData.styleColorStatsLabel
);
}
@ -178,7 +229,12 @@
this.storedData.viewtext,
this.storedData.showImage,
this.storedData.styleBorder,
this.storedData.styleShadow
this.storedData.styleShadow,
this.storedData.styleColorBackground,
this.storedData.styleColorTitle,
this.storedData.styleColorDescription,
this.storedData.styleColorStatsCount,
this.storedData.styleColorStatsLabel
);
}
@ -201,85 +257,100 @@
return count.toString();
}
}
}
}
window.customElements.define('steam-workshop', SteamWorkshopElem);
/**
* Class SteamWorkshop
*
* Dynamically create a Steam workshop widgets via JavaScript
*/
class SteamWorkshop
{
elem = null;
selident = null;
cfg = {};
constructor(selector, config = {})
{
this.selident = selector;
this.cfg = config;
var itemid = (typeof config.itemid !== 'undefined') ? config.itemid : null;
var views = (typeof config.views !== 'undefined') ? config.views : 'Views';
var subscriptions = (typeof config.subscriptions !== 'undefined') ? config.subscriptions : 'Subscriptions';
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;
window.customElements.define('steam-workshop', SteamWorkshopElem);
/**
* Class SteamWorkshop
*
* Dynamically create a Steam workshop widgets via JavaScript
*/
class SteamWorkshop
{
elem = null;
selident = null;
cfg = {};
constructor(selector, config = {})
{
this.selident = selector;
this.cfg = config;
var itemid = (typeof config.itemid !== 'undefined') ? config.itemid : null;
var views = (typeof config.views !== 'undefined') ? config.views : 'Views';
var subscriptions = (typeof config.subscriptions !== 'undefined') ? config.subscriptions : 'Subscriptions';
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;
if (typeof showImage === 'boolean') {
showImage = (showImage) ? 1 : 0;
}
var styleBorder = null;
var styleShadow = 1;
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;
}
if (typeof styleShadow === 'boolean') {
styleShadow = (styleShadow) ? 1 : 0;
}
this.elem = document.createElement('steam-workshop');
this.elem.setAttribute('itemid', itemid);
this.elem.setAttribute('views', views);
this.elem.setAttribute('subscriptions', subscriptions);
this.elem.setAttribute('favorites', favorites);
this.elem.setAttribute('author', author);
this.elem.setAttribute('viewtext', viewtext);
this.elem.setAttribute('show-image', showImage);
this.elem.setAttribute('style-border', styleBorder);
this.elem.setAttribute('style-shadow', styleShadow);
let sel = document.querySelector(selector);
if (sel) {
sel.appendChild(this.elem);
}
}
updateWidget()
{
this.elem.updateWidget();
}
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;
}
changeLang(views, subscriptions, favorites, author, viewtext)
{
this.elem.changeLang(views, subscriptions, favorites, author, viewtext);
}
if (typeof styleShadow === 'boolean') {
styleShadow = (styleShadow) ? 1 : 0;
}
setImageVisibility(visibility)
{
this.elem.setImageVisibility(visibility);
}
remove()
{
this.elem.remove();
}
}
this.elem = document.createElement('steam-workshop');
this.elem.setAttribute('itemid', itemid);
this.elem.setAttribute('views', views);
this.elem.setAttribute('subscriptions', subscriptions);
this.elem.setAttribute('favorites', favorites);
this.elem.setAttribute('author', author);
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(views, subscriptions, favorites, author, viewtext)
{
this.elem.changeLang(views, subscriptions, favorites, author, viewtext);
}
setImageVisibility(visibility)
{
this.elem.setImageVisibility(visibility);
}
remove()
{
this.elem.remove();
}
}