mirror of
https://github.com/SophiaAtkinson/steamwidgets-web.git
synced 2025-06-27 14:37:41 -07:00
More settings
This commit is contained in:
Daniel Brendel
@ -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;
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user