Resolves #11

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);
@@ -347,6 +355,9 @@ class SteamApp
         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;
             styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1;
@@ -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);

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);
@@ -291,6 +299,9 @@ class SteamGroup
         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;
             styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1;
@@ -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);

app/resources/js/steam_server.dev.js

@@ -81,6 +81,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) {
                  let json = JSON.parse(req.responseText);
@@ -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);
@@ -313,6 +321,9 @@
         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;
@@ -321,6 +332,11 @@
             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;
         }
@@ -348,6 +364,18 @@
             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);

app/resources/js/steam_user.dev.js

@@ -75,6 +75,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) {
                  let json = JSON.parse(req.responseText);
@@ -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);
@@ -282,6 +290,9 @@
          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;
@@ -290,6 +301,11 @@
              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;
          }
@@ -315,6 +331,18 @@
              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);

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);
@@ -297,6 +305,9 @@ class SteamWorkshop
         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;
             styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1;
@@ -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);

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() {
 		</table>
 	</p>
 
+	<p>
+		<br/>The following events are available for a Steam App object:<br/>
+
+		<table>
+			<thead>
+				<tr></tr>
+				<tr></tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td><strong>Event</strong></td>
+					<td><strong>Description</strong></td>
+				</tr>
+
+				<tr class="tr-colored">
+					<td>events.onInit(e)</td>
+					<td>Called when the widget is initialized</td>
+				</tr>
+
+				<tr>
+					<td>events.onCompleted(e)</td>
+					<td>Called when the widget has finished loading</td>
+				</tr>
+			</tbody>
+		</table>
+	</p>
+
 	<hr/>
 </div>
 
@@ -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)
     });
 });
 &lt;/script&gt;
@@ -398,6 +425,33 @@ document.addEventListener('DOMContentLoaded', function() {
 		</table>
 	</p>
 
+	<p>
+		<br/>The following events are available for a Steam Server object:<br/>
+
+		<table>
+			<thead>
+				<tr></tr>
+				<tr></tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td><strong>Event</strong></td>
+					<td><strong>Description</strong></td>
+				</tr>
+
+				<tr class="tr-colored">
+					<td>events.onInit(e)</td>
+					<td>Called when the widget is initialized</td>
+				</tr>
+
+				<tr>
+					<td>events.onCompleted(e)</td>
+					<td>Called when the widget has finished loading</td>
+				</tr>
+			</tbody>
+		</table>
+	</p>
+
 	<hr/>
 </div>
 
@@ -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)
     });
 });
 &lt;/script&gt;
@@ -556,6 +610,33 @@ document.addEventListener('DOMContentLoaded', function() {
 			</tbody>
 		</table>
 	</p>
+
+	<p>
+		<br/>The following events are available for a Steam User object:<br/>
+
+		<table>
+			<thead>
+				<tr></tr>
+				<tr></tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td><strong>Event</strong></td>
+					<td><strong>Description</strong></td>
+				</tr>
+
+				<tr class="tr-colored">
+					<td>events.onInit(e)</td>
+					<td>Called when the widget is initialized</td>
+				</tr>
+
+				<tr>
+					<td>events.onCompleted(e)</td>
+					<td>Called when the widget has finished loading</td>
+				</tr>
+			</tbody>
+		</table>
+	</p>
 </div>
 
 <div class="content-section">
@@ -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)
     });
 });
 &lt;/script&gt;
@@ -718,6 +799,33 @@ document.addEventListener('DOMContentLoaded', function() {
 			</tbody>
 		</table>
 	</p>
+
+	<p>
+		<br/>The following events are available for a Steam Workshop object:<br/>
+
+		<table>
+			<thead>
+				<tr></tr>
+				<tr></tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td><strong>Event</strong></td>
+					<td><strong>Description</strong></td>
+				</tr>
+
+				<tr class="tr-colored">
+					<td>events.onInit(e)</td>
+					<td>Called when the widget is initialized</td>
+				</tr>
+
+				<tr>
+					<td>events.onCompleted(e)</td>
+					<td>Called when the widget has finished loading</td>
+				</tr>
+			</tbody>
+		</table>
+	</p>
 </div>
 
 <div class="content-section">
@@ -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)
     });
 });
 &lt;/script&gt;
@@ -875,4 +983,31 @@ document.addEventListener('DOMContentLoaded', function() {
 			</tbody>
 		</table>
 	</p>
+
+	<p>
+		<br/>The following events are available for a Steam Group object:<br/>
+
+		<table>
+			<thead>
+				<tr></tr>
+				<tr></tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td><strong>Event</strong></td>
+					<td><strong>Description</strong></td>
+				</tr>
+
+				<tr class="tr-colored">
+					<td>events.onInit(e)</td>
+					<td>Called when the widget is initialized</td>
+				</tr>
+
+				<tr>
+					<td>events.onCompleted(e)</td>
+					<td>Called when the widget has finished loading</td>
+				</tr>
+			</tbody>
+		</table>
+	</p>
 </div>

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);
@@ -347,6 +355,9 @@ class SteamApp
         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;
             styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1;
@@ -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);

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);
@@ -291,6 +299,9 @@ class SteamGroup
         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;
             styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1;
@@ -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);

public/js/steamwidgets/v1/steam_server.js

@@ -81,6 +81,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) {
                  let json = JSON.parse(req.responseText);
@@ -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);
@@ -313,6 +321,9 @@
         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;
@@ -321,6 +332,11 @@
             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;
         }
@@ -348,6 +364,18 @@
             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);

public/js/steamwidgets/v1/steam_user.js

@@ -75,6 +75,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) {
                  let json = JSON.parse(req.responseText);
@@ -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);
@@ -282,6 +290,9 @@
          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;
@@ -290,6 +301,11 @@
              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;
          }
@@ -315,6 +331,18 @@
              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);

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);
@@ -297,6 +305,9 @@ class SteamWorkshop
         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;
             styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1;
@@ -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);