From cb6524ae57b2188e0d03416f3ac0acb049afb8d3 Mon Sep 17 00:00:00 2001 From: Daniel Brendel Date: Fri, 30 Sep 2022 21:50:02 +0200 Subject: [PATCH] #1 Add documentation --- .env.example | 1 + app/resources/js/steam_group.dev.js | 12 +- app/resources/js/steam_workshop.dev.js | 4 +- app/views/index.php | 160 +++++++++++++++++++- app/views/navbar.php | 8 +- public/js/steamwidgets/v1/steam_group.js | 14 +- public/js/steamwidgets/v1/steam_workshop.js | 6 +- 7 files changed, 188 insertions(+), 17 deletions(-) diff --git a/.env.example b/.env.example index 3bd69ab..bce8e6a 100644 --- a/.env.example +++ b/.env.example @@ -29,6 +29,7 @@ APP_EXAMPLE_APP="" APP_EXAMPLE_SERVER="" APP_EXAMPLE_USER="" APP_EXAMPLE_WIDGET="" +APP_EXAMPLE_GROUP="" STEAM_API_KEY="" diff --git a/app/resources/js/steam_group.dev.js b/app/resources/js/steam_group.dev.js index 81b12d4..8772ffc 100644 --- a/app/resources/js/steam_group.dev.js +++ b/app/resources/js/steam_group.dev.js @@ -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
-
` + json.data.groupHeadline + `
+
` + headline + `
` + description + `
@@ -327,12 +333,12 @@ class SteamGroup changeLang(online, ingame, members, viewtext) { - this.elem.changeLang(online, ingame, members, viewtext); + this.elem.changeLang(online, ingame, members, viewtext); } setImageVisibility(visibility) { - this.elem.setImageVisibility(visibility); + this.elem.setImageVisibility(visibility); } remove() diff --git a/app/resources/js/steam_workshop.dev.js b/app/resources/js/steam_workshop.dev.js index ca52ba3..7bfca23 100644 --- a/app/resources/js/steam_workshop.dev.js +++ b/app/resources/js/steam_workshop.dev.js @@ -340,12 +340,12 @@ class SteamWorkshop changeLang(views, subscriptions, favorites, author, viewtext) { - this.elem.changeLang(views, subscriptions, favorites, author, viewtext); + this.elem.changeLang(views, subscriptions, favorites, author, viewtext); } setImageVisibility(visibility) { - this.elem.setImageVisibility(visibility); + this.elem.setImageVisibility(visibility); } remove() diff --git a/app/views/index.php b/app/views/index.php index bad05fc..e8d3a13 100644 --- a/app/views/index.php +++ b/app/views/index.php @@ -27,6 +27,7 @@
  • Steam Server Widget
  • Steam User Widget
  • Steam Workshop Widget
    • +
  • Steam Group Widget

    • @@ -42,7 +43,7 @@
    STEAM_WIDGETS_MODULE can either be app for the Steam App widget, server for the Steam Server widget, - user for the Steam User widget or workshop for the Steam Workshop widget. + user for the Steam User widget, workshop for the Steam Workshop widget or group for the Steam Group widget.

    @if (env('APP_SHOWNPMUSAGE', false)) @@ -709,6 +710,163 @@ document.addEventListener('DOMContentLoaded', function() { Sets the widget image visibility + + remove() + Removes the widget from the document + + + +

    +
    + +
    +

    + +

    Steam Group

    + +

    + When referenced the required Steam Group module, the minimum code to render a widget is as follows:
    + 

    +			
+<steam-group group="{{ env('APP_EXAMPLE_GROUP') }}"></steam-group>
+			
+
    + +

    + This renders the following widget:
    + +

    + +

    +
    You can define these options:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    AttributeValue
    groupSpecifies the group either by numeric ID or URL identifier token
    membersSpecifies the text of the members stats label
    onlineSpecifies the text of the online stats label
    ingameSpecifies the text of the in-game stats label
    viewtextSpecifies the text of the button which can be used to go to the group page
    show-image / showImageSpecifies if the group avatar image shall be displayed. Defaults to true/1
    style-border / style.borderSpecify border rounding: Either none, small or max
    style-shadow / style.shadowYou can specify false to prevent displaying box shadow or true to enable (default)
    style-color-background / style.colorBackgroundSpecify a CSS value for the background color
    style-color-title / style.colorTitleSpecify a CSS value for the title color
    style-color-description / style.colorDescriptionSpecify a CSS value for the description color
    style-color-stats-count / style.colorStatsCountSpecify a CSS value for the stats count color
    style-color-stats-label / style.colorStatsLabelSpecify a CSS value for the stats label color
    +

    + +

    + You can also dynamically create Steam Group widgets via JavaScript:
    + + 

    +			
+<div id="group-widget"></div>
+
+<script>
+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
+    });
+});
+</script>
+			
+
    +

    + +

    +
    The following methods are available for a Steam Group element / object:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/views/navbar.php b/app/views/navbar.php index ea95625..f8f3d49 100644 --- a/app/views/navbar.php +++ b/app/views/navbar.php @@ -13,10 +13,6 @@
    MethodDescription
    updateWidget()Updates the widget data and displays them
    changeLang(online, ingame, members, viewtext)Changes the language of the widget using the given information
    setImageVisibility(visibility)Sets the widget image visibility
    remove() Removes the widget from the document