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 ## Description
This is the web backend as well as the documentation and resource provider for SteamWidgets. 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 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 ## Current featured widgets
- Steam App Widget: Renders widgets of a Steam app/game - 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); 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); 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; border-radius: 25px;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
} }
.steam-workshop-preview { .steam-workshop-preview {
@ -22,6 +19,16 @@
border-bottom-left-radius: 25px; 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 { .steam-workshop-info {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -117,6 +124,16 @@
border-bottom-left-radius: unset; 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 { .steam-workshop-info {
width: 100%; width: 100%;
height: 195px; height: 195px;

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

@ -6,35 +6,40 @@
* Visit: https://github.com/danielbrendel * Visit: https://github.com/danielbrendel
*/ */
const STEAMWIDGETS_WORKSHOP_ENDPOINT = 'http://localhost:8000'; const STEAMWIDGETS_WORKSHOP_ENDPOINT = 'http://localhost:8000';
const STEAMWIDGETS_WORKSHOP_VERSION = 'v1'; const STEAMWIDGETS_WORKSHOP_VERSION = 'v1';
/** /**
* Class SteamWorkshopElem * Class SteamWorkshopElem
* *
* Handle custom HTML element to render Steam workshop widgets * Handle custom HTML element to render Steam workshop widgets
*/ */
class SteamWorkshopElem extends HTMLElement class SteamWorkshopElem extends HTMLElement
{ {
DESCRIPTION_MAX_LEN = 40; DESCRIPTION_MAX_LEN = 40;
storedData = {}; storedData = {};
oldHeader = ''; oldHeader = '';
connectedCallback() connectedCallback()
{ {
var itemid = (typeof this.attributes.itemid !== 'undefined') ? this.attributes.itemid.value : null; 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 views = (typeof this.attributes.views !== 'undefined') ? this.attributes.views.value : 'Views';
var subscriptions = (typeof this.attributes.subscriptions !== 'undefined') ? this.attributes.subscriptions.value : 'Subscriptions'; 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 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 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 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 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 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 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;
if (itemid !== null) { var styleColorTitle = (typeof this.attributes['style-color-title'] !== 'undefined') ? this.attributes['style-color-title'].value : null;
this.storedData = { 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, itemid: itemid,
views: views, views: views,
subscriptions: subscriptions, subscriptions: subscriptions,
@ -43,10 +48,15 @@
viewtext: viewtext, viewtext: viewtext,
showImage: showImage, showImage: showImage,
styleBorder: styleBorder, styleBorder: styleBorder,
styleShadow: styleShadow styleShadow: styleShadow,
}; styleColorBackground: styleColorBackground,
styleColorTitle: styleColorTitle,
this.setupWidget( styleColorDescription: styleColorDescription,
styleColorStatsCount: styleColorStatsCount,
styleCOlorStatsLabel: styleColorStatsLabel
};
this.setupWidget(
itemid, itemid,
views, views,
subscriptions, subscriptions,
@ -55,83 +65,114 @@
viewtext, viewtext,
showImage, showImage,
styleBorder, styleBorder,
styleShadow styleShadow,
); styleColorBackground,
} styleColorTitle,
} styleColorDescription,
styleColorStatsCount,
styleColorStatsLabel
);
}
}
setupWidget(itemid, views, subscriptions, favorites, author, viewtext, showImage, styleBorder, styleShadow) setupWidget(itemid, views, subscriptions, favorites, author, viewtext, showImage, styleBorder, styleShadow, styleColorBackground, styleColorTitle, styleColorDescription, styleColorStatsCount, styleColorStatsLabel)
{ {
var req = new XMLHttpRequest(); var req = new XMLHttpRequest();
var self = this; var self = this;
req.onreadystatechange = function() {
if (req.readyState == XMLHttpRequest.DONE) {
let json = JSON.parse(req.responseText);
if (!document.getElementById('steamwidgets-workshop-styles')) { req.onreadystatechange = function() {
let link = document.createElement('link'); if (req.readyState == XMLHttpRequest.DONE) {
link.id = 'steamwidgets-workshop-styles'; let json = JSON.parse(req.responseText);
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);
}
let description = json.data.description; if (!document.getElementById('steamwidgets-workshop-styles')) {
if (description.length >= self.DESCRIPTION_MAX_LEN) { let link = document.createElement('link');
description = description.substr(0, self.DESCRIPTION_MAX_LEN - 3) + '...'; 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 borderCodeWorkshop = '';
let borderCodeWorkshopPreview = '';
let html = ` if (styleBorder !== null) {
<div class="steam-workshop" ` + ((!styleShadow) ? 'style="box-shadow: unset;"' : '') + `> if (styleBorder === 'max') {
<div class="steam-workshop-preview" style="background-image: url('` + json.data.preview_url + `'); ` + ((!showImage) ? 'display: none;' : '') + `"></div> borderCodeWorkshop = '';
borderCodeWorkshopPreview = '';
<div class="steam-workshop-info" ` + ((!showImage) ? 'style="top: 13px; width: 100%;"' : '') + `> } else if (styleBorder === 'small') {
<div class="steam-workshop-info-title">` + json.data.title + `</div> borderCodeWorkshop = 'border-radius: 4px;';
borderCodeWorkshopPreview = 'steam-workshop-preview-small';
<div class="steam-workshop-info-description">` + description + `</div> } else if (styleBorder === 'none') {
borderCodeWorkshop = 'border-radius: unset;';
<div class="steam-workshop-info-stats"> borderCodeWorkshopPreview = 'steam-workshop-preview-none';
<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> let workshopBaseStyle = '';
if (!styleShadow) {
<div class="steam-workshop-info-stats-item"> workshopBaseStyle += 'box-shadow: unset;';
<div class="steam-workshop-info-stats-item-count">` + self.readableCount(json.data.subscriptions) + `</div> }
<div class="steam-workshop-info-stats-item-label">`+ subscriptions + `</div> if (borderCodeWorkshop.length > 0) {
</div> workshopBaseStyle += borderCodeWorkshop;
}
<div class="steam-workshop-info-stats-item"> if (styleColorBackground !== null) {
<div class="steam-workshop-info-stats-item-count">` + self.readableCount(json.data.favorited) + `</div> workshopBaseStyle += 'background-color: ' + styleColorBackground + ';';
<div class="steam-workshop-info-stats-item-label">`+ favorites + `</div> }
</div>
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>
<div class="steam-workshop-info-footer"> <div class="steam-workshop-info-stats-item">
<div class="steam-workshop-info-footer-author"><a href="` + json.data.creator_data.profileurl + `">` + author + `</a></div> <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 class="steam-workshop-info-footer-action"> </div>
<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.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>
</div> </div>
`; </div>
`;
self.innerHTML = html;
}
};
req.open('GET', STEAMWIDGETS_WORKSHOP_ENDPOINT + '/api/query/workshop?itemid=' + itemid, true);
req.send();
}
self.innerHTML = html; updateWidget()
} {
}; this.setupWidget(
req.open('GET', STEAMWIDGETS_WORKSHOP_ENDPOINT + '/api/query/workshop?itemid=' + itemid, true);
req.send();
}
updateWidget()
{
this.setupWidget(
this.storedData.itemid, this.storedData.itemid,
this.storedData.views, this.storedData.views,
this.storedData.subscriptions, this.storedData.subscriptions,
@ -140,9 +181,14 @@
this.storedData.viewtext, this.storedData.viewtext,
this.storedData.showImage, this.storedData.showImage,
this.storedData.styleBorder, 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) changeLang(views, subscriptions, favorites, author, viewtext)
{ {
@ -161,7 +207,12 @@
this.storedData.viewtext, this.storedData.viewtext,
this.storedData.showImage, this.storedData.showImage,
this.storedData.styleBorder, 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.viewtext,
this.storedData.showImage, this.storedData.showImage,
this.storedData.styleBorder, 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(); return count.toString();
} }
} }
} }
window.customElements.define('steam-workshop', SteamWorkshopElem); 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;
/**
* 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') { if (typeof showImage === 'boolean') {
showImage = (showImage) ? 1 : 0; showImage = (showImage) ? 1 : 0;
} }
var styleBorder = null; var styleBorder = null;
var styleShadow = 1; var styleShadow = 1;
var styleColorBackground = null;
if (typeof config.style !== 'undefined') { var styleColorTitle = null;
styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null; var styleColorDescription = null;
styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1; var styleColorStatsCount = null;
} var styleColorStatsLabel = null;
if (typeof styleShadow === 'boolean') { if (typeof config.style !== 'undefined') {
styleShadow = (styleShadow) ? 1 : 0; 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;
this.elem = document.createElement('steam-workshop'); styleColorTitle = (typeof config.style.colorTitle !== 'undefined') ? config.style.colorTitle : null;
this.elem.setAttribute('itemid', itemid); styleColorDescription = (typeof config.style.colorDescription !== 'undefined') ? config.style.colorDescription : null;
this.elem.setAttribute('views', views); styleColorStatsCount = (typeof config.style.colorStatsCount !== 'undefined') ? config.style.colorStatsCount : null;
this.elem.setAttribute('subscriptions', subscriptions); styleColorStatsLabel = (typeof config.style.colorStatsLabel !== 'undefined') ? config.style.colorStatsLabel : null;
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();
}
changeLang(views, subscriptions, favorites, author, viewtext) if (typeof styleShadow === 'boolean') {
{ styleShadow = (styleShadow) ? 1 : 0;
this.elem.changeLang(views, subscriptions, favorites, author, viewtext); }
}
setImageVisibility(visibility) this.elem = document.createElement('steam-workshop');
{ this.elem.setAttribute('itemid', itemid);
this.elem.setImageVisibility(visibility); this.elem.setAttribute('views', views);
} this.elem.setAttribute('subscriptions', subscriptions);
this.elem.setAttribute('favorites', favorites);
remove() this.elem.setAttribute('author', author);
{ this.elem.setAttribute('viewtext', viewtext);
this.elem.remove(); 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>style-shadow / style.shadow</td>
<td>You can specify false to prevent displaying box shadow or true to enable (default)</td> <td>You can specify false to prevent displaying box shadow or true to enable (default)</td>
</tr> </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> </tbody>
</table> </table>
</p> </p>

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

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

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

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