From cc567fb7fb9a55f7d4b43b33e5f6a8f63e12da9a Mon Sep 17 00:00:00 2001 From: Daniel Brendel Date: Sun, 25 Sep 2022 12:51:24 +0200 Subject: [PATCH] More settings --- README.md | 2 +- app/resources/css/steam_workshop.dev.css | 23 +- app/resources/js/steam_workshop.dev.js | 423 ++++++++++-------- app/views/index.php | 25 ++ public/css/steamwidgets/v1/steam_workshop.css | 23 +- public/js/steamwidgets/v1/steam_workshop.js | 423 ++++++++++-------- 6 files changed, 560 insertions(+), 359 deletions(-) diff --git a/README.md b/README.md index ba08927..82ebfda 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/app/resources/css/steam_workshop.dev.css b/app/resources/css/steam_workshop.dev.css index d61bc30..61130d1 100644 --- a/app/resources/css/steam_workshop.dev.css +++ b/app/resources/css/steam_workshop.dev.css @@ -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; diff --git a/app/resources/js/steam_workshop.dev.js b/app/resources/js/steam_workshop.dev.js index 4e671eb..e57fdbf 100644 --- a/app/resources/js/steam_workshop.dev.js +++ b/app/resources/js/steam_workshop.dev.js @@ -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 = ` -
-
- -
-
` + json.data.title + `
- -
` + description + `
- -
-
-
` + self.readableCount(json.data.views) + `
-
` + views + `
-
- -
-
` + self.readableCount(json.data.subscriptions) + `
-
`+ subscriptions + `
-
- -
-
` + self.readableCount(json.data.favorited) + `
-
`+ favorites + `
-
+ 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 = ` +
0) ? 'style="' + workshopBaseStyle + '"' : '') + `> +
+ +
+
` + json.data.title + `
+ +
` + description + `
+ +
+
+
` + self.readableCount(json.data.views) + `
+
` + views + `
- -
-
` + author + `
- -
- ` + viewtext + ` -
+ +
+
` + self.readableCount(json.data.subscriptions) + `
+
`+ subscriptions + `
+
+ +
+
` + self.readableCount(json.data.favorited) + `
+
`+ favorites + `
+
+
+ +
+
` + author + `
+ +
+ ` + viewtext + `
- `; +
+ `; + + 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(); + } +} \ No newline at end of file diff --git a/app/views/index.php b/app/views/index.php index 4065b2f..b05f168 100644 --- a/app/views/index.php +++ b/app/views/index.php @@ -632,6 +632,31 @@ document.addEventListener('DOMContentLoaded', function() { style-shadow / style.shadow You can specify false to prevent displaying box shadow or true to enable (default) + + + style-color-background / style.colorBackground + Specify a CSS value for the background color + + + + style-color-title / style.colorTitle + Specify a CSS value for the title color + + + + style-color-description / style.colorDescription + Specify a CSS value for the description color + + + + style-color-stats-count / style.colorStatsCount + Specify a CSS value for the stats count color + + + + style-color-stats-label / style.colorStatsLabel + Specify a CSS value for the stats label color +

diff --git a/public/css/steamwidgets/v1/steam_workshop.css b/public/css/steamwidgets/v1/steam_workshop.css index d61bc30..61130d1 100644 --- a/public/css/steamwidgets/v1/steam_workshop.css +++ b/public/css/steamwidgets/v1/steam_workshop.css @@ -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; diff --git a/public/js/steamwidgets/v1/steam_workshop.js b/public/js/steamwidgets/v1/steam_workshop.js index 4e671eb..e57fdbf 100644 --- a/public/js/steamwidgets/v1/steam_workshop.js +++ b/public/js/steamwidgets/v1/steam_workshop.js @@ -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 = ` -
-
- -
-
` + json.data.title + `
- -
` + description + `
- -
-
-
` + self.readableCount(json.data.views) + `
-
` + views + `
-
- -
-
` + self.readableCount(json.data.subscriptions) + `
-
`+ subscriptions + `
-
- -
-
` + self.readableCount(json.data.favorited) + `
-
`+ favorites + `
-
+ 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 = ` +
0) ? 'style="' + workshopBaseStyle + '"' : '') + `> +
+ +
+
` + json.data.title + `
+ +
` + description + `
+ +
+
+
` + self.readableCount(json.data.views) + `
+
` + views + `
- -
-
` + author + `
- -
- ` + viewtext + ` -
+ +
+
` + self.readableCount(json.data.subscriptions) + `
+
`+ subscriptions + `
+
+ +
+
` + self.readableCount(json.data.favorited) + `
+
`+ favorites + `
+
+
+ +
+
` + author + `
+ +
+ ` + viewtext + `
- `; +
+ `; + + 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(); + } +} \ No newline at end of file