fix #133, show more by default

Author: Dev-Lan

dist/bundle.js

@@ -207,10 +207,10 @@
                             <img id="description-short-image" src="">
                             <zero-md id="description-short-text" src=""></zero-md>
                         </div>
-                        <zero-md id="description-long-text" class="collapse" src=""></zero-md>
+                        <zero-md id="description-long-text" class="collapse show" src=""></zero-md>
                         <div class="d-flex flex-column"><button class="btn btn-sm btn-light" data-bs-toggle="collapse"
                                 data-bs-target="#description-long-text" id="description-show-more-less">Show
-                                more.</button></div>
+                                less.</button></div>
                     </div>
                     <div class="border border-primary rounded lineupContainerOuter" id="lineupContainerOuter">
                         <div class="lineupContainer d-none" id="lineupContainer">

dist/view.html

@@ -96,7 +96,11 @@ export class DescriptionDisplay {
 
     constructor(container: HTMLDivElement) {
         this._container = container;
-        this._expanded = false;
+        if (localStorage && localStorage.getItem('expanded')) {
+            this._expanded = localStorage.getItem('expanded') === 'true';
+        } else {
+            this._expanded = true;
+        }
 
         this._tabContainer = document.getElementById(
             'description-tab-row'
@@ -110,10 +114,14 @@ export class DescriptionDisplay {
         this._longText = document.getElementById(
             'description-long-text'
         ) as HTMLZeroMDElement;
+
+        this._longText.classList.toggle('show', this._expanded);
+
         this._showMoreLessButton = document.getElementById(
             'description-show-more-less'
         ) as HTMLButtonElement;
 
+        this.setShowMoreLessButtonText();
         this.showMoreLessButton.onclick = (ev: MouseEvent) => {
             this.onShowMoreLessClick();
         };
@@ -147,12 +155,16 @@ export class DescriptionDisplay {
 
     private onShowMoreLessClick(): void {
         this._expanded = !this.expanded;
+        if (localStorage) {
+            localStorage.setItem('expanded', `${this._expanded}`);
+        }
+        this.setShowMoreLessButtonText();
+    }
+    private setShowMoreLessButtonText(): void {
         if (this.expanded) {
             this.showMoreLessButton.innerText = 'Show less.';
-            // this.longText.classList.remove('d-none');
         } else {
             this.showMoreLessButton.innerText = 'Show more.';
-            // this.longText.classList.add('d-none');
         }
     }
 }

src/DescriptionDisplay.ts

@@ -207,10 +207,10 @@
                             <img id="description-short-image" src="">
                             <zero-md id="description-short-text" src=""></zero-md>
                         </div>
-                        <zero-md id="description-long-text" class="collapse" src=""></zero-md>
+                        <zero-md id="description-long-text" class="collapse show" src=""></zero-md>
                         <div class="d-flex flex-column"><button class="btn btn-sm btn-light" data-bs-toggle="collapse"
                                 data-bs-target="#description-long-text" id="description-show-more-less">Show
-                                more.</button></div>
+                                less.</button></div>
                     </div>
                     <div class="border border-primary rounded lineupContainerOuter" id="lineupContainerOuter">
                         <div class="lineupContainer d-none" id="lineupContainer">