From 20d4b03628a9a31df7e779355c482590375eba4f Mon Sep 17 00:00:00 2001 From: Daniel Brendel Date: Fri, 12 May 2023 14:03:02 +0200 Subject: [PATCH] Resolves #11 --- app/resources/js/steam_app.dev.js | 28 ++++ app/resources/js/steam_group.dev.js | 28 ++++ app/resources/js/steam_server.dev.js | 144 +++++++++++-------- app/resources/js/steam_user.dev.js | 30 +++- app/resources/js/steam_workshop.dev.js | 28 ++++ app/views/doc.php | 145 +++++++++++++++++++- public/js/steamwidgets/v1/steam_app.js | 28 ++++ public/js/steamwidgets/v1/steam_group.js | 28 ++++ public/js/steamwidgets/v1/steam_server.js | 144 +++++++++++-------- public/js/steamwidgets/v1/steam_user.js | 30 +++- public/js/steamwidgets/v1/steam_workshop.js | 28 ++++ 11 files changed, 538 insertions(+), 123 deletions(-) diff --git a/app/resources/js/steam_app.dev.js b/app/resources/js/steam_app.dev.js index bbd373d..602e80d 100644 --- a/app/resources/js/steam_app.dev.js +++ b/app/resources/js/steam_app.dev.js @@ -83,6 +83,10 @@ class SteamAppElem extends HTMLElement var req = new XMLHttpRequest(); var self = this; + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnInit !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnInit); + } + req.onreadystatechange = function() { if (req.readyState == XMLHttpRequest.DONE) { let json = JSON.parse(req.responseText); @@ -211,6 +215,10 @@ class SteamAppElem extends HTMLElement `; self.innerHTML = html; + + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnCompleted !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnCompleted); + } } }; req.open('GET', STEAMWIDGETS_APP_ENDPOINT + '/api/query/app?appid=' + appid + '&lang=' + lang, true); @@ -346,6 +354,9 @@ class SteamApp var styleColorAuthor = null; var styleColorOnlinecount = null; var styleHideImage = 0; + + var evtOnInit = null; + var evtOnCompleted = null; if (typeof config.style !== 'undefined') { styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null; @@ -358,6 +369,11 @@ class SteamApp styleHideImage = (typeof config.style.hideimage !== 'undefined') ? config.style.hideimage : 0; } + if (typeof config.events !== 'undefined') { + evtOnInit = (typeof config.events.onInit === 'function') ? config.events.onInit : null; + evtOnCompleted = (typeof config.events.onCompleted === 'function') ? config.events.onCompleted : null; + } + if (typeof rating === 'boolean') { rating = (rating) ? 1 : 0; } @@ -397,6 +413,18 @@ class SteamApp this.elem.setAttribute('height', height); } + this.elem.custom_events = {}; + + if (evtOnInit !== null) { + this.elem.custom_events.eventOnInit = new CustomEvent('onInit', { detail: this }); + this.elem.addEventListener('onInit', evtOnInit, false); + } + + if (evtOnCompleted !== null) { + this.elem.custom_events.eventOnCompleted = new CustomEvent('onCompleted', { detail: this }); + this.elem.addEventListener('onCompleted', evtOnCompleted, false); + } + let sel = document.querySelector(selector); if (sel) { sel.appendChild(this.elem); diff --git a/app/resources/js/steam_group.dev.js b/app/resources/js/steam_group.dev.js index 9c44ff3..191f831 100644 --- a/app/resources/js/steam_group.dev.js +++ b/app/resources/js/steam_group.dev.js @@ -78,6 +78,10 @@ class SteamGroupElem extends HTMLElement var req = new XMLHttpRequest(); var self = this; + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnInit !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnInit); + } + req.onreadystatechange = function() { if (req.readyState == XMLHttpRequest.DONE) { let json = JSON.parse(req.responseText); @@ -163,6 +167,10 @@ class SteamGroupElem extends HTMLElement `; self.innerHTML = html; + + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnCompleted !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnCompleted); + } } }; req.open('GET', STEAMWIDGETS_GROUP_ENDPOINT + '/api/query/group?group=' + group, true); @@ -290,6 +298,9 @@ class SteamGroup var styleColorDescription = null; var styleColorStatsCount = null; var styleColorStatsLabel = null; + + var evtOnInit = null; + var evtOnCompleted = null; if (typeof config.style !== 'undefined') { styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null; @@ -301,6 +312,11 @@ class SteamGroup styleColorStatsLabel = (typeof config.style.colorStatsLabel !== 'undefined') ? config.style.colorStatsLabel : null; } + if (typeof config.events !== 'undefined') { + evtOnInit = (typeof config.events.onInit === 'function') ? config.events.onInit : null; + evtOnCompleted = (typeof config.events.onCompleted === 'function') ? config.events.onCompleted : null; + } + if (typeof styleShadow === 'boolean') { styleShadow = (styleShadow) ? 1 : 0; } @@ -320,6 +336,18 @@ class SteamGroup this.elem.setAttribute('style-color-stats-count', styleColorStatsCount); this.elem.setAttribute('style-color-stats-label', styleColorStatsLabel); + this.elem.custom_events = {}; + + if (evtOnInit !== null) { + this.elem.custom_events.eventOnInit = new CustomEvent('onInit', { detail: this }); + this.elem.addEventListener('onInit', evtOnInit, false); + } + + if (evtOnCompleted !== null) { + this.elem.custom_events.eventOnCompleted = new CustomEvent('onCompleted', { detail: this }); + this.elem.addEventListener('onCompleted', evtOnCompleted, false); + } + let sel = document.querySelector(selector); if (sel) { sel.appendChild(this.elem); diff --git a/app/resources/js/steam_server.dev.js b/app/resources/js/steam_server.dev.js index 022185f..a7b0a07 100644 --- a/app/resources/js/steam_server.dev.js +++ b/app/resources/js/steam_server.dev.js @@ -80,6 +80,10 @@ { var req = new XMLHttpRequest(); var self = this; + + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnInit !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnInit); + } req.onreadystatechange = function() { if (req.readyState == XMLHttpRequest.DONE) { @@ -191,6 +195,10 @@ `; self.innerHTML = html; + + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnCompleted !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnCompleted); + } } }; req.open('GET', STEAMWIDGETS_SERVER_ENDPOINT + '/api/query/server?addr=' + addr, true); @@ -293,65 +301,85 @@ constructor(selector, config = {}) { - this.selident = selector; - this.cfg = config; - - var addr = (typeof config.addr !== 'undefined') ? config.addr : null; - var header = (typeof config.header !== 'undefined') ? config.header : ''; - var width = (typeof config.width !== 'undefined') ? config.width : null; - var height = (typeof config.height !== 'undefined') ? config.height : null; - var bots = (typeof config.bots !== 'undefined') ? config.bots : ':count bots'; - var secure_yes = (typeof config.secure_yes !== 'undefined') ? config.secure_yes : 'secure'; - var secure_no = (typeof config.secure_no !== 'undefined') ? config.secure_no : 'insecure'; - var hosting_dedicated = (typeof config.hosting_dedicated !== 'undefined') ? config.hosting_dedicated : 'dedicated'; - var hosting_listen = (typeof config.hosting_listen !== 'undefined') ? config.hosting_listen : 'listen'; - var playtext = (typeof config.playtext !== 'undefined') ? config.playtext : 'Join'; - - var styleBorder = null; - var styleShadow = 1; - var styleColorBackground = null; - var styleColorTextBright = null; - var styleColorTextDark = null; - - if (typeof config.style !== 'undefined') { - styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null; - styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1; - styleColorBackground = (typeof config.style.colorBackground !== 'undefined') ? config.style.colorBackground : null; - styleColorTextBright = (typeof config.style.colorTextBright !== 'undefined') ? config.style.colorTextBright : null; - styleColorTextDark = (typeof config.style.colorTextDark !== 'undefined') ? config.style.colorTextDark : null; - } - - if (typeof styleShadow === 'boolean') { - styleShadow = (styleShadow) ? 1 : 0; - } - - this.elem = document.createElement('steam-server'); - this.elem.setAttribute('addr', addr); - this.elem.setAttribute('header', header); - this.elem.setAttribute('style-border', styleBorder); - this.elem.setAttribute('style-shadow', styleShadow); - this.elem.setAttribute('style-color-background', styleColorBackground); - this.elem.setAttribute('style-color-text-bright', styleColorTextBright); - this.elem.setAttribute('style-color-text-dark', styleColorTextDark); - this.elem.setAttribute('bots', bots); - this.elem.setAttribute('secure-yes', secure_yes); - this.elem.setAttribute('secure-no', secure_no); - this.elem.setAttribute('hosting-dedicated', hosting_dedicated); - this.elem.setAttribute('hosting-listen', hosting_listen); - this.elem.setAttribute('playtext', playtext); + this.selident = selector; + this.cfg = config; - if (width !== null) { - this.elem.setAttribute('width', width); - } - - if (height !== null) { - this.elem.setAttribute('height', height); - } - - let sel = document.querySelector(selector); - if (sel) { - sel.appendChild(this.elem); - } + var addr = (typeof config.addr !== 'undefined') ? config.addr : null; + var header = (typeof config.header !== 'undefined') ? config.header : ''; + var width = (typeof config.width !== 'undefined') ? config.width : null; + var height = (typeof config.height !== 'undefined') ? config.height : null; + var bots = (typeof config.bots !== 'undefined') ? config.bots : ':count bots'; + var secure_yes = (typeof config.secure_yes !== 'undefined') ? config.secure_yes : 'secure'; + var secure_no = (typeof config.secure_no !== 'undefined') ? config.secure_no : 'insecure'; + var hosting_dedicated = (typeof config.hosting_dedicated !== 'undefined') ? config.hosting_dedicated : 'dedicated'; + var hosting_listen = (typeof config.hosting_listen !== 'undefined') ? config.hosting_listen : 'listen'; + var playtext = (typeof config.playtext !== 'undefined') ? config.playtext : 'Join'; + + var styleBorder = null; + var styleShadow = 1; + var styleColorBackground = null; + var styleColorTextBright = null; + var styleColorTextDark = null; + + var evtOnInit = null; + var evtOnCompleted = null; + + if (typeof config.style !== 'undefined') { + styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null; + styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1; + styleColorBackground = (typeof config.style.colorBackground !== 'undefined') ? config.style.colorBackground : null; + styleColorTextBright = (typeof config.style.colorTextBright !== 'undefined') ? config.style.colorTextBright : null; + styleColorTextDark = (typeof config.style.colorTextDark !== 'undefined') ? config.style.colorTextDark : null; + } + + if (typeof config.events !== 'undefined') { + evtOnInit = (typeof config.events.onInit === 'function') ? config.events.onInit : null; + evtOnCompleted = (typeof config.events.onCompleted === 'function') ? config.events.onCompleted : null; + } + + if (typeof styleShadow === 'boolean') { + styleShadow = (styleShadow) ? 1 : 0; + } + + this.elem = document.createElement('steam-server'); + this.elem.setAttribute('addr', addr); + this.elem.setAttribute('header', header); + this.elem.setAttribute('style-border', styleBorder); + this.elem.setAttribute('style-shadow', styleShadow); + this.elem.setAttribute('style-color-background', styleColorBackground); + this.elem.setAttribute('style-color-text-bright', styleColorTextBright); + this.elem.setAttribute('style-color-text-dark', styleColorTextDark); + this.elem.setAttribute('bots', bots); + this.elem.setAttribute('secure-yes', secure_yes); + this.elem.setAttribute('secure-no', secure_no); + this.elem.setAttribute('hosting-dedicated', hosting_dedicated); + this.elem.setAttribute('hosting-listen', hosting_listen); + this.elem.setAttribute('playtext', playtext); + + if (width !== null) { + this.elem.setAttribute('width', width); + } + + if (height !== null) { + this.elem.setAttribute('height', height); + } + + this.elem.custom_events = {}; + + if (evtOnInit !== null) { + this.elem.custom_events.eventOnInit = new CustomEvent('onInit', { detail: this }); + this.elem.addEventListener('onInit', evtOnInit, false); + } + + if (evtOnCompleted !== null) { + this.elem.custom_events.eventOnCompleted = new CustomEvent('onCompleted', { detail: this }); + this.elem.addEventListener('onCompleted', evtOnCompleted, false); + } + + let sel = document.querySelector(selector); + if (sel) { + sel.appendChild(this.elem); + } } updateWidget() diff --git a/app/resources/js/steam_user.dev.js b/app/resources/js/steam_user.dev.js index 1d0572b..90c1099 100644 --- a/app/resources/js/steam_user.dev.js +++ b/app/resources/js/steam_user.dev.js @@ -74,11 +74,15 @@ { var req = new XMLHttpRequest(); var self = this; + + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnInit !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnInit); + } req.onreadystatechange = function() { if (req.readyState == XMLHttpRequest.DONE) { let json = JSON.parse(req.responseText); - + if (!document.getElementById('steamwidgets-user-styles')) { let link = document.createElement('link'); link.id = 'steamwidgets-user-styles'; @@ -170,6 +174,10 @@ `; self.innerHTML = html; + + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnCompleted !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnCompleted); + } } }; req.open('GET', STEAMWIDGETS_USER_ENDPOINT + '/api/query/user?steamid=' + steamid, true); @@ -281,6 +289,9 @@ var styleColorBackground = null; var styleColorTextBright = null; var styleColorTextDark = null; + + var evtOnInit = null; + var evtOnCompleted = null; if (typeof config.style !== 'undefined') { styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null; @@ -289,6 +300,11 @@ styleColorTextBright = (typeof config.style.colorTextBright !== 'undefined') ? config.style.colorTextBright : null; styleColorTextDark = (typeof config.style.colorTextDark !== 'undefined') ? config.style.colorTextDark : null; } + + if (typeof config.events !== 'undefined') { + evtOnInit = (typeof config.events.onInit === 'function') ? config.events.onInit : null; + evtOnCompleted = (typeof config.events.onCompleted === 'function') ? config.events.onCompleted : null; + } if (typeof styleShadow === 'boolean') { styleShadow = (styleShadow) ? 1 : 0; @@ -314,6 +330,18 @@ if (height !== null) { this.elem.setAttribute('height', height); } + + this.elem.custom_events = {}; + + if (evtOnInit !== null) { + this.elem.custom_events.eventOnInit = new CustomEvent('onInit', { detail: this }); + this.elem.addEventListener('onInit', evtOnInit, false); + } + + if (evtOnCompleted !== null) { + this.elem.custom_events.eventOnCompleted = new CustomEvent('onCompleted', { detail: this }); + this.elem.addEventListener('onCompleted', evtOnCompleted, false); + } let sel = document.querySelector(selector); if (sel) { diff --git a/app/resources/js/steam_workshop.dev.js b/app/resources/js/steam_workshop.dev.js index 7bfca23..008fe09 100644 --- a/app/resources/js/steam_workshop.dev.js +++ b/app/resources/js/steam_workshop.dev.js @@ -80,6 +80,10 @@ class SteamWorkshopElem extends HTMLElement var req = new XMLHttpRequest(); var self = this; + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnInit !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnInit); + } + req.onreadystatechange = function() { if (req.readyState == XMLHttpRequest.DONE) { let json = JSON.parse(req.responseText); @@ -164,6 +168,10 @@ class SteamWorkshopElem extends HTMLElement `; self.innerHTML = html; + + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnCompleted !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnCompleted); + } } }; req.open('GET', STEAMWIDGETS_WORKSHOP_ENDPOINT + '/api/query/workshop?itemid=' + itemid, true); @@ -296,6 +304,9 @@ class SteamWorkshop var styleColorDescription = null; var styleColorStatsCount = null; var styleColorStatsLabel = null; + + var evtOnInit = null; + var evtOnCompleted = null; if (typeof config.style !== 'undefined') { styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null; @@ -307,6 +318,11 @@ class SteamWorkshop styleColorStatsLabel = (typeof config.style.colorStatsLabel !== 'undefined') ? config.style.colorStatsLabel : null; } + if (typeof config.events !== 'undefined') { + evtOnInit = (typeof config.events.onInit === 'function') ? config.events.onInit : null; + evtOnCompleted = (typeof config.events.onCompleted === 'function') ? config.events.onCompleted : null; + } + if (typeof styleShadow === 'boolean') { styleShadow = (styleShadow) ? 1 : 0; } @@ -327,6 +343,18 @@ class SteamWorkshop this.elem.setAttribute('style-color-stats-count', styleColorStatsCount); this.elem.setAttribute('style-color-stats-label', styleColorStatsLabel); + this.elem.custom_events = {}; + + if (evtOnInit !== null) { + this.elem.custom_events.eventOnInit = new CustomEvent('onInit', { detail: this }); + this.elem.addEventListener('onInit', evtOnInit, false); + } + + if (evtOnCompleted !== null) { + this.elem.custom_events.eventOnCompleted = new CustomEvent('onCompleted', { detail: this }); + this.elem.addEventListener('onCompleted', evtOnCompleted, false); + } + let sel = document.querySelector(selector); if (sel) { sel.appendChild(this.elem); diff --git a/app/views/doc.php b/app/views/doc.php index 533bde5..1e15609 100644 --- a/app/views/doc.php +++ b/app/views/doc.php @@ -184,7 +184,7 @@ document.addEventListener('DOMContentLoaded', function() { let widget = new SteamApp('#app-widget', { appid: '{{ env('APP_EXAMPLE_APP') }}', - //You can specify the same attributes as shown in the table above + //You can specify the same attributes as shown in the table above as well as events (see below) }); }); </script> @@ -229,6 +229,33 @@ document.addEventListener('DOMContentLoaded', function() {

+

+
The following events are available for a Steam App object:
+ + + + + + + + + + + + + + + + + + + + + + +
EventDescription
events.onInit(e)Called when the widget is initialized
events.onCompleted(e)Called when the widget has finished loading
+

+
@@ -353,7 +380,7 @@ document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() { let widget = new SteamServer('#server-widget', { addr: '{{ env('APP_EXAMPLE_SERVER') }}', - //You can specify the same attributes as shown in the table above + //You can specify the same attributes as shown in the table above as well as events (see below) }); }); </script> @@ -398,6 +425,33 @@ document.addEventListener('DOMContentLoaded', function() {

+

+
The following events are available for a Steam Server object:
+ + + + + + + + + + + + + + + + + + + + + + +
EventDescription
events.onInit(e)Called when the widget is initialized
events.onCompleted(e)Called when the widget has finished loading
+

+
@@ -512,7 +566,7 @@ document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() { let widget = new SteamUser('#user-widget', { steamid: '{{ env('APP_EXAMPLE_USER') }}', - //You can specify the same attributes as shown in the table above + //You can specify the same attributes as shown in the table above as well as events (see below) }); }); </script> @@ -556,6 +610,33 @@ document.addEventListener('DOMContentLoaded', function() {

+ +

+
The following events are available for a Steam User object:
+ + + + + + + + + + + + + + + + + + + + + + +
EventDescription
events.onInit(e)Called when the widget is initialized
events.onCompleted(e)Called when the widget has finished loading
+

@@ -674,7 +755,7 @@ document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() { let widget = new SteamWorkshop('#workshop-widget', { itemid: '{{ env('APP_EXAMPLE_WORKSHOP') }}', - //You can specify the same attributes as shown in the table above + //You can specify the same attributes as shown in the table above as well as events (see below) }); }); </script> @@ -718,6 +799,33 @@ document.addEventListener('DOMContentLoaded', function() {

+ +

+
The following events are available for a Steam Workshop object:
+ + + + + + + + + + + + + + + + + + + + + + +
EventDescription
events.onInit(e)Called when the widget is initialized
events.onCompleted(e)Called when the widget has finished loading
+

@@ -831,7 +939,7 @@ document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() { let widget = new SteamGroup('#group-widget', { group: '{{ env('APP_EXAMPLE_GROUP') }}', - //You can specify the same attributes as shown in the table above + //You can specify the same attributes as shown in the table above as well as events (see below) }); }); </script> @@ -875,4 +983,31 @@ document.addEventListener('DOMContentLoaded', function() {

+ +

+
The following events are available for a Steam Group object:
+ + + + + + + + + + + + + + + + + + + + + + +
EventDescription
events.onInit(e)Called when the widget is initialized
events.onCompleted(e)Called when the widget has finished loading
+

\ No newline at end of file diff --git a/public/js/steamwidgets/v1/steam_app.js b/public/js/steamwidgets/v1/steam_app.js index bbd373d..602e80d 100644 --- a/public/js/steamwidgets/v1/steam_app.js +++ b/public/js/steamwidgets/v1/steam_app.js @@ -83,6 +83,10 @@ class SteamAppElem extends HTMLElement var req = new XMLHttpRequest(); var self = this; + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnInit !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnInit); + } + req.onreadystatechange = function() { if (req.readyState == XMLHttpRequest.DONE) { let json = JSON.parse(req.responseText); @@ -211,6 +215,10 @@ class SteamAppElem extends HTMLElement `; self.innerHTML = html; + + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnCompleted !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnCompleted); + } } }; req.open('GET', STEAMWIDGETS_APP_ENDPOINT + '/api/query/app?appid=' + appid + '&lang=' + lang, true); @@ -346,6 +354,9 @@ class SteamApp var styleColorAuthor = null; var styleColorOnlinecount = null; var styleHideImage = 0; + + var evtOnInit = null; + var evtOnCompleted = null; if (typeof config.style !== 'undefined') { styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null; @@ -358,6 +369,11 @@ class SteamApp styleHideImage = (typeof config.style.hideimage !== 'undefined') ? config.style.hideimage : 0; } + if (typeof config.events !== 'undefined') { + evtOnInit = (typeof config.events.onInit === 'function') ? config.events.onInit : null; + evtOnCompleted = (typeof config.events.onCompleted === 'function') ? config.events.onCompleted : null; + } + if (typeof rating === 'boolean') { rating = (rating) ? 1 : 0; } @@ -397,6 +413,18 @@ class SteamApp this.elem.setAttribute('height', height); } + this.elem.custom_events = {}; + + if (evtOnInit !== null) { + this.elem.custom_events.eventOnInit = new CustomEvent('onInit', { detail: this }); + this.elem.addEventListener('onInit', evtOnInit, false); + } + + if (evtOnCompleted !== null) { + this.elem.custom_events.eventOnCompleted = new CustomEvent('onCompleted', { detail: this }); + this.elem.addEventListener('onCompleted', evtOnCompleted, false); + } + let sel = document.querySelector(selector); if (sel) { sel.appendChild(this.elem); diff --git a/public/js/steamwidgets/v1/steam_group.js b/public/js/steamwidgets/v1/steam_group.js index 9c44ff3..191f831 100644 --- a/public/js/steamwidgets/v1/steam_group.js +++ b/public/js/steamwidgets/v1/steam_group.js @@ -78,6 +78,10 @@ class SteamGroupElem extends HTMLElement var req = new XMLHttpRequest(); var self = this; + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnInit !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnInit); + } + req.onreadystatechange = function() { if (req.readyState == XMLHttpRequest.DONE) { let json = JSON.parse(req.responseText); @@ -163,6 +167,10 @@ class SteamGroupElem extends HTMLElement `; self.innerHTML = html; + + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnCompleted !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnCompleted); + } } }; req.open('GET', STEAMWIDGETS_GROUP_ENDPOINT + '/api/query/group?group=' + group, true); @@ -290,6 +298,9 @@ class SteamGroup var styleColorDescription = null; var styleColorStatsCount = null; var styleColorStatsLabel = null; + + var evtOnInit = null; + var evtOnCompleted = null; if (typeof config.style !== 'undefined') { styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null; @@ -301,6 +312,11 @@ class SteamGroup styleColorStatsLabel = (typeof config.style.colorStatsLabel !== 'undefined') ? config.style.colorStatsLabel : null; } + if (typeof config.events !== 'undefined') { + evtOnInit = (typeof config.events.onInit === 'function') ? config.events.onInit : null; + evtOnCompleted = (typeof config.events.onCompleted === 'function') ? config.events.onCompleted : null; + } + if (typeof styleShadow === 'boolean') { styleShadow = (styleShadow) ? 1 : 0; } @@ -320,6 +336,18 @@ class SteamGroup this.elem.setAttribute('style-color-stats-count', styleColorStatsCount); this.elem.setAttribute('style-color-stats-label', styleColorStatsLabel); + this.elem.custom_events = {}; + + if (evtOnInit !== null) { + this.elem.custom_events.eventOnInit = new CustomEvent('onInit', { detail: this }); + this.elem.addEventListener('onInit', evtOnInit, false); + } + + if (evtOnCompleted !== null) { + this.elem.custom_events.eventOnCompleted = new CustomEvent('onCompleted', { detail: this }); + this.elem.addEventListener('onCompleted', evtOnCompleted, false); + } + let sel = document.querySelector(selector); if (sel) { sel.appendChild(this.elem); diff --git a/public/js/steamwidgets/v1/steam_server.js b/public/js/steamwidgets/v1/steam_server.js index 022185f..a7b0a07 100644 --- a/public/js/steamwidgets/v1/steam_server.js +++ b/public/js/steamwidgets/v1/steam_server.js @@ -80,6 +80,10 @@ { var req = new XMLHttpRequest(); var self = this; + + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnInit !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnInit); + } req.onreadystatechange = function() { if (req.readyState == XMLHttpRequest.DONE) { @@ -191,6 +195,10 @@ `; self.innerHTML = html; + + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnCompleted !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnCompleted); + } } }; req.open('GET', STEAMWIDGETS_SERVER_ENDPOINT + '/api/query/server?addr=' + addr, true); @@ -293,65 +301,85 @@ constructor(selector, config = {}) { - this.selident = selector; - this.cfg = config; - - var addr = (typeof config.addr !== 'undefined') ? config.addr : null; - var header = (typeof config.header !== 'undefined') ? config.header : ''; - var width = (typeof config.width !== 'undefined') ? config.width : null; - var height = (typeof config.height !== 'undefined') ? config.height : null; - var bots = (typeof config.bots !== 'undefined') ? config.bots : ':count bots'; - var secure_yes = (typeof config.secure_yes !== 'undefined') ? config.secure_yes : 'secure'; - var secure_no = (typeof config.secure_no !== 'undefined') ? config.secure_no : 'insecure'; - var hosting_dedicated = (typeof config.hosting_dedicated !== 'undefined') ? config.hosting_dedicated : 'dedicated'; - var hosting_listen = (typeof config.hosting_listen !== 'undefined') ? config.hosting_listen : 'listen'; - var playtext = (typeof config.playtext !== 'undefined') ? config.playtext : 'Join'; - - var styleBorder = null; - var styleShadow = 1; - var styleColorBackground = null; - var styleColorTextBright = null; - var styleColorTextDark = null; - - if (typeof config.style !== 'undefined') { - styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null; - styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1; - styleColorBackground = (typeof config.style.colorBackground !== 'undefined') ? config.style.colorBackground : null; - styleColorTextBright = (typeof config.style.colorTextBright !== 'undefined') ? config.style.colorTextBright : null; - styleColorTextDark = (typeof config.style.colorTextDark !== 'undefined') ? config.style.colorTextDark : null; - } - - if (typeof styleShadow === 'boolean') { - styleShadow = (styleShadow) ? 1 : 0; - } - - this.elem = document.createElement('steam-server'); - this.elem.setAttribute('addr', addr); - this.elem.setAttribute('header', header); - this.elem.setAttribute('style-border', styleBorder); - this.elem.setAttribute('style-shadow', styleShadow); - this.elem.setAttribute('style-color-background', styleColorBackground); - this.elem.setAttribute('style-color-text-bright', styleColorTextBright); - this.elem.setAttribute('style-color-text-dark', styleColorTextDark); - this.elem.setAttribute('bots', bots); - this.elem.setAttribute('secure-yes', secure_yes); - this.elem.setAttribute('secure-no', secure_no); - this.elem.setAttribute('hosting-dedicated', hosting_dedicated); - this.elem.setAttribute('hosting-listen', hosting_listen); - this.elem.setAttribute('playtext', playtext); + this.selident = selector; + this.cfg = config; - if (width !== null) { - this.elem.setAttribute('width', width); - } - - if (height !== null) { - this.elem.setAttribute('height', height); - } - - let sel = document.querySelector(selector); - if (sel) { - sel.appendChild(this.elem); - } + var addr = (typeof config.addr !== 'undefined') ? config.addr : null; + var header = (typeof config.header !== 'undefined') ? config.header : ''; + var width = (typeof config.width !== 'undefined') ? config.width : null; + var height = (typeof config.height !== 'undefined') ? config.height : null; + var bots = (typeof config.bots !== 'undefined') ? config.bots : ':count bots'; + var secure_yes = (typeof config.secure_yes !== 'undefined') ? config.secure_yes : 'secure'; + var secure_no = (typeof config.secure_no !== 'undefined') ? config.secure_no : 'insecure'; + var hosting_dedicated = (typeof config.hosting_dedicated !== 'undefined') ? config.hosting_dedicated : 'dedicated'; + var hosting_listen = (typeof config.hosting_listen !== 'undefined') ? config.hosting_listen : 'listen'; + var playtext = (typeof config.playtext !== 'undefined') ? config.playtext : 'Join'; + + var styleBorder = null; + var styleShadow = 1; + var styleColorBackground = null; + var styleColorTextBright = null; + var styleColorTextDark = null; + + var evtOnInit = null; + var evtOnCompleted = null; + + if (typeof config.style !== 'undefined') { + styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null; + styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1; + styleColorBackground = (typeof config.style.colorBackground !== 'undefined') ? config.style.colorBackground : null; + styleColorTextBright = (typeof config.style.colorTextBright !== 'undefined') ? config.style.colorTextBright : null; + styleColorTextDark = (typeof config.style.colorTextDark !== 'undefined') ? config.style.colorTextDark : null; + } + + if (typeof config.events !== 'undefined') { + evtOnInit = (typeof config.events.onInit === 'function') ? config.events.onInit : null; + evtOnCompleted = (typeof config.events.onCompleted === 'function') ? config.events.onCompleted : null; + } + + if (typeof styleShadow === 'boolean') { + styleShadow = (styleShadow) ? 1 : 0; + } + + this.elem = document.createElement('steam-server'); + this.elem.setAttribute('addr', addr); + this.elem.setAttribute('header', header); + this.elem.setAttribute('style-border', styleBorder); + this.elem.setAttribute('style-shadow', styleShadow); + this.elem.setAttribute('style-color-background', styleColorBackground); + this.elem.setAttribute('style-color-text-bright', styleColorTextBright); + this.elem.setAttribute('style-color-text-dark', styleColorTextDark); + this.elem.setAttribute('bots', bots); + this.elem.setAttribute('secure-yes', secure_yes); + this.elem.setAttribute('secure-no', secure_no); + this.elem.setAttribute('hosting-dedicated', hosting_dedicated); + this.elem.setAttribute('hosting-listen', hosting_listen); + this.elem.setAttribute('playtext', playtext); + + if (width !== null) { + this.elem.setAttribute('width', width); + } + + if (height !== null) { + this.elem.setAttribute('height', height); + } + + this.elem.custom_events = {}; + + if (evtOnInit !== null) { + this.elem.custom_events.eventOnInit = new CustomEvent('onInit', { detail: this }); + this.elem.addEventListener('onInit', evtOnInit, false); + } + + if (evtOnCompleted !== null) { + this.elem.custom_events.eventOnCompleted = new CustomEvent('onCompleted', { detail: this }); + this.elem.addEventListener('onCompleted', evtOnCompleted, false); + } + + let sel = document.querySelector(selector); + if (sel) { + sel.appendChild(this.elem); + } } updateWidget() diff --git a/public/js/steamwidgets/v1/steam_user.js b/public/js/steamwidgets/v1/steam_user.js index 1d0572b..90c1099 100644 --- a/public/js/steamwidgets/v1/steam_user.js +++ b/public/js/steamwidgets/v1/steam_user.js @@ -74,11 +74,15 @@ { var req = new XMLHttpRequest(); var self = this; + + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnInit !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnInit); + } req.onreadystatechange = function() { if (req.readyState == XMLHttpRequest.DONE) { let json = JSON.parse(req.responseText); - + if (!document.getElementById('steamwidgets-user-styles')) { let link = document.createElement('link'); link.id = 'steamwidgets-user-styles'; @@ -170,6 +174,10 @@ `; self.innerHTML = html; + + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnCompleted !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnCompleted); + } } }; req.open('GET', STEAMWIDGETS_USER_ENDPOINT + '/api/query/user?steamid=' + steamid, true); @@ -281,6 +289,9 @@ var styleColorBackground = null; var styleColorTextBright = null; var styleColorTextDark = null; + + var evtOnInit = null; + var evtOnCompleted = null; if (typeof config.style !== 'undefined') { styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null; @@ -289,6 +300,11 @@ styleColorTextBright = (typeof config.style.colorTextBright !== 'undefined') ? config.style.colorTextBright : null; styleColorTextDark = (typeof config.style.colorTextDark !== 'undefined') ? config.style.colorTextDark : null; } + + if (typeof config.events !== 'undefined') { + evtOnInit = (typeof config.events.onInit === 'function') ? config.events.onInit : null; + evtOnCompleted = (typeof config.events.onCompleted === 'function') ? config.events.onCompleted : null; + } if (typeof styleShadow === 'boolean') { styleShadow = (styleShadow) ? 1 : 0; @@ -314,6 +330,18 @@ if (height !== null) { this.elem.setAttribute('height', height); } + + this.elem.custom_events = {}; + + if (evtOnInit !== null) { + this.elem.custom_events.eventOnInit = new CustomEvent('onInit', { detail: this }); + this.elem.addEventListener('onInit', evtOnInit, false); + } + + if (evtOnCompleted !== null) { + this.elem.custom_events.eventOnCompleted = new CustomEvent('onCompleted', { detail: this }); + this.elem.addEventListener('onCompleted', evtOnCompleted, false); + } let sel = document.querySelector(selector); if (sel) { diff --git a/public/js/steamwidgets/v1/steam_workshop.js b/public/js/steamwidgets/v1/steam_workshop.js index 7bfca23..008fe09 100644 --- a/public/js/steamwidgets/v1/steam_workshop.js +++ b/public/js/steamwidgets/v1/steam_workshop.js @@ -80,6 +80,10 @@ class SteamWorkshopElem extends HTMLElement var req = new XMLHttpRequest(); var self = this; + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnInit !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnInit); + } + req.onreadystatechange = function() { if (req.readyState == XMLHttpRequest.DONE) { let json = JSON.parse(req.responseText); @@ -164,6 +168,10 @@ class SteamWorkshopElem extends HTMLElement `; self.innerHTML = html; + + if ((typeof self.custom_events !== 'undefined') && (typeof self.custom_events.eventOnCompleted !== 'undefined')) { + self.dispatchEvent(self.custom_events.eventOnCompleted); + } } }; req.open('GET', STEAMWIDGETS_WORKSHOP_ENDPOINT + '/api/query/workshop?itemid=' + itemid, true); @@ -296,6 +304,9 @@ class SteamWorkshop var styleColorDescription = null; var styleColorStatsCount = null; var styleColorStatsLabel = null; + + var evtOnInit = null; + var evtOnCompleted = null; if (typeof config.style !== 'undefined') { styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null; @@ -307,6 +318,11 @@ class SteamWorkshop styleColorStatsLabel = (typeof config.style.colorStatsLabel !== 'undefined') ? config.style.colorStatsLabel : null; } + if (typeof config.events !== 'undefined') { + evtOnInit = (typeof config.events.onInit === 'function') ? config.events.onInit : null; + evtOnCompleted = (typeof config.events.onCompleted === 'function') ? config.events.onCompleted : null; + } + if (typeof styleShadow === 'boolean') { styleShadow = (styleShadow) ? 1 : 0; } @@ -327,6 +343,18 @@ class SteamWorkshop this.elem.setAttribute('style-color-stats-count', styleColorStatsCount); this.elem.setAttribute('style-color-stats-label', styleColorStatsLabel); + this.elem.custom_events = {}; + + if (evtOnInit !== null) { + this.elem.custom_events.eventOnInit = new CustomEvent('onInit', { detail: this }); + this.elem.addEventListener('onInit', evtOnInit, false); + } + + if (evtOnCompleted !== null) { + this.elem.custom_events.eventOnCompleted = new CustomEvent('onCompleted', { detail: this }); + this.elem.addEventListener('onCompleted', evtOnCompleted, false); + } + let sel = document.querySelector(selector); if (sel) { sel.appendChild(this.elem);