Sophia/steamwidgets-web
1
0
Fork 0
mirror of https://github.com/SophiaAtkinson/steamwidgets-web.git synced 2025-06-26 23:47:42 -07:00
Code Issues Packages Projects Releases Wiki Activity

#1 Add documentation

Browse Source
This commit is contained in:
Daniel Brendel
2022-09-30 21:50:02 +02:00
parent 3eb61a46da
commit cb6524ae57
7 changed files with 188 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.example
View File

@ -29,6 +29,7 @@ APP_EXAMPLE_APP=""
APP_EXAMPLE_SERVER=""
APP_EXAMPLE_USER=""
APP_EXAMPLE_WIDGET=""
APP_EXAMPLE_GROUP=""
STEAM_API_KEY=""

8
app/resources/js/steam_group.dev.js
View File

@ -16,6 +16,7 @@ const STEAMWIDGETS_GROUP_VERSION = 'v1';
*/
class SteamGroupElem extends HTMLElement
{
HEADLINE_MAX_LEN = 30;
DESCRIPTION_MAX_LEN = 40;
storedData = {};
@ -116,6 +117,11 @@ class SteamGroupElem extends HTMLElement
groupBaseStyle += 'background-color: ' + styleColorBackground + ';';
}
let headline = json.data.groupHeadline;
if (headline.length >= self.HEADLINE_MAX_LEN) {
headline = headline.substr(0, self.HEADLINE_MAX_LEN - 3) + '...';
}
let description = json.data.groupSummary;
if (description.length >= self.DESCRIPTION_MAX_LEN) {
description = description.substr(0, self.DESCRIPTION_MAX_LEN - 3) + '...';
@ -126,7 +132,7 @@ class SteamGroupElem extends HTMLElement
<div class="steam-group-preview ` + ((borderCodeGroupPreview.length > 0) ? borderCodeGroupPreview : '') + `" style="background-image: url('` + json.data.groupAvatar + `'); ` + ((!showImage) ? 'display: none;' : '') + `"></div>
<div class="steam-group-info" ` + ((!showImage) ? 'style="top: 13px; width: 100%;"' : '') + `>
<div class="steam-group-info-title" ` + ((styleColorTitle !== null) ? 'style="color: ' + styleColorTitle + ';"' : '') + `>` + json.data.groupHeadline + `</div>
<div class="steam-group-info-title" ` + ((styleColorTitle !== null) ? 'style="color: ' + styleColorTitle + ';"' : '') + `>` + headline + `</div>
<div class="steam-group-info-description" ` + ((styleColorDescription !== null) ? 'style="color: ' + styleColorDescription + ';"' : '') + `>` + description + `</div>

160
app/views/index.php
View File

@ -27,6 +27,7 @@
<li><a href="#steam-server">Steam Server Widget</a></li>
<li><a href="#steam-user">Steam User Widget</a></li>
<li><a href="#steam-workshop">Steam Workshop Widget</a></li>
<li><a href="#steam-group">Steam Group Widget</a></li>
</ul>
</p>
@ -42,7 +43,7 @@
<br/>
<i>STEAM_WIDGETS_MODULE</i> can either be <b>app</b> for the Steam App widget, <b>server</b> for the Steam Server widget,
<b>user</b> for the Steam User widget or <b>workshop</b> for the Steam Workshop widget.
<b>user</b> for the Steam User widget, <b>workshop</b> for the Steam Workshop widget or <b>group</b> for the Steam Group widget.
</p>
@if (env('APP_SHOWNPMUSAGE', false))
@ -717,3 +718,160 @@ document.addEventListener('DOMContentLoaded', function() {
</table>
</p>
</div>
<div class="content-section">
<a name="steam-group"></a><br/><br/>
<h3>Steam Group</h3>
<p>
When referenced the required Steam Group module, the minimum code to render a widget is as follows:<br/>
<pre>
<code class="language-html">
&lt;steam-group group="{{ env('APP_EXAMPLE_GROUP') }}"&gt;&lt;/steam-group&gt;
</code>
</pre>
<br/><br/>
This renders the following widget:<br/>
<steam-group group="{{ env('APP_EXAMPLE_GROUP') }}"></steam-group>
</p>
<p>
<br/>You can define these options:<br/>
<table>
<thead>
<tr></tr>
<tr></tr>
</thead>
<tbody>
<tr>
<td><strong>Attribute</strong></td>
<td><strong>Value</strong></td>
</tr>
<tr class="tr-colored">
<td>group</td>
<td>Specifies the group either by numeric ID or URL identifier token</td>
</tr>
<tr>
<td>members</td>
<td>Specifies the text of the members stats label</td>
</tr>
<tr class="tr-colored">
<td>online</td>
<td>Specifies the text of the online stats label</td>
</tr>
<tr>
<td>ingame</td>
<td>Specifies the text of the in-game stats label</td>
</tr>
<tr class="tr-colored">
<td>viewtext</td>
<td>Specifies the text of the button which can be used to go to the group page</td>
</tr>
<tr>
<td>show-image / showImage</td>
<td>Specifies if the group avatar image shall be displayed. Defaults to true/1</td>
</tr>
<tr class="tr-colored">
<td>style-border / style.border</td>
<td>Specify border rounding: Either none, small or max</td>
</tr>
<tr>
<td>style-shadow / style.shadow</td>
<td>You can specify false to prevent displaying box shadow or true to enable (default)</td>
</tr>
<tr class="tr-colored">
<td>style-color-background / style.colorBackground</td>
<td>Specify a CSS value for the background color</td>
</tr>
<tr>
<td>style-color-title / style.colorTitle</td>
<td>Specify a CSS value for the title color</td>
</tr>
<tr class="tr-colored">
<td>style-color-description / style.colorDescription</td>
<td>Specify a CSS value for the description color</td>
</tr>
<tr>
<td>style-color-stats-count / style.colorStatsCount</td>
<td>Specify a CSS value for the stats count color</td>
</tr>
<tr class="tr-colored">
<td>style-color-stats-label / style.colorStatsLabel</td>
<td>Specify a CSS value for the stats label color</td>
</tr>
</tbody>
</table>
</p>
<p>
You can also dynamically create Steam Group widgets via JavaScript:<br/>
<pre>
<code class="language-html">
&lt;div id="group-widget"&gt;&lt;/div&gt;
&lt;script&gt;
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
});
});
&lt;/script&gt;
</code>
</pre>
</p>
<p>
<br/>The following methods are available for a Steam Group element / object:<br/>
<table>
<thead>
<tr></tr>
<tr></tr>
</thead>
<tbody>
<tr>
<td><strong>Method</strong></td>
<td><strong>Description</strong></td>
</tr>
<tr class="tr-colored">
<td>updateWidget()</td>
<td>Updates the widget data and displays them</td>
</tr>
<tr>
<td>changeLang(online, ingame, members, viewtext)</td>
<td>Changes the language of the widget using the given information</td>
</tr>
<tr class="tr-colored">
<td>setImageVisibility(visibility)</td>
<td>Sets the widget image visibility</td>
</tr>
<tr>
<td>remove()</td>
<td>Removes the widget from the document</td>
</tr>
</tbody>
</table>
</p>
</div>

8
app/views/navbar.php
View File

@ -13,10 +13,6 @@
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="{{ url('/#about') }}" onclick="document.getElementById('burger-button').click(); return true;">
About
</a>
<a class="navbar-item" href="{{ url('/#steam-app') }}" onclick="document.getElementById('burger-button').click(); return true;">
Steam App
</a>
@ -32,6 +28,10 @@
<a class="navbar-item" href="{{ url('/#steam-workshop') }}" onclick="document.getElementById('burger-button').click(); return true;">
Steam Workshop
</a>
<a class="navbar-item" href="{{ url('/#steam-group') }}" onclick="document.getElementById('burger-button').click(); return true;">
Steam Group
</a>
</div>
<div class="navbar-end">

10
public/js/steamwidgets/v1/steam_group.js
View File

@ -16,6 +16,7 @@ const STEAMWIDGETS_GROUP_VERSION = 'v1';
*/
class SteamGroupElem extends HTMLElement
{
HEADLINE_MAX_LEN = 30;
DESCRIPTION_MAX_LEN = 40;
storedData = {};
@ -116,6 +117,11 @@ class SteamGroupElem extends HTMLElement
groupBaseStyle += 'background-color: ' + styleColorBackground + ';';
}
let headline = json.data.groupHeadline;
if (headline.length >= self.HEADLINE_MAX_LEN) {
headline = headline.substr(0, self.HEADLINE_MAX_LEN - 3) + '...';
}
let description = json.data.groupSummary;
if (description.length >= self.DESCRIPTION_MAX_LEN) {
description = description.substr(0, self.DESCRIPTION_MAX_LEN - 3) + '...';
@ -126,7 +132,7 @@ class SteamGroupElem extends HTMLElement
<div class="steam-group-preview ` + ((borderCodeGroupPreview.length > 0) ? borderCodeGroupPreview : '') + `" style="background-image: url('` + json.data.groupAvatar + `'); ` + ((!showImage) ? 'display: none;' : '') + `"></div>
<div class="steam-group-info" ` + ((!showImage) ? 'style="top: 13px; width: 100%;"' : '') + `>
<div class="steam-group-info-title" ` + ((styleColorTitle !== null) ? 'style="color: ' + styleColorTitle + ';"' : '') + `>` + json.data.groupHeadline + `</div>
<div class="steam-group-info-title" ` + ((styleColorTitle !== null) ? 'style="color: ' + styleColorTitle + ';"' : '') + `>` + headline + `</div>
<div class="steam-group-info-description" ` + ((styleColorDescription !== null) ? 'style="color: ' + styleColorDescription + ';"' : '') + `>` + description + `</div>
@ -271,7 +277,7 @@ class SteamGroup
var online = (typeof config.online !== 'undefined') ? config.online : 'Online';
var ingame = (typeof config.ingame !== 'undefined') ? config.ingame : 'In-Game';
var viewtext = (typeof config.viewtext !== 'undefined') ? config.viewtext : 'View group';
var showImage = (typeof config.showImage !== 'undefined') ? config.showImage : null;
var showImage = (typeof config.showImage !== 'undefined') ? config.showImage : true;
if (typeof showImage === 'boolean') {
showImage = (showImage) ? 1 : 0;

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

@ -283,7 +283,7 @@ class SteamWorkshop
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;
var showImage = (typeof config.showImage !== 'undefined') ? config.showImage : true;
if (typeof showImage === 'boolean') {
showImage = (showImage) ? 1 : 0;