feat: upgrade to 1.1.0 support for lang switch and misc fixes

README.md

@@ -1,6 +1,6 @@
 # BandWebsite
 
-![](https://badgen.net/badge/version/1.0.0/blue)
+![](https://badgen.net/badge/version/1.1.0/blue)
 [![License](https://img.shields.io/github/license/MesseBasseProduction/BandWebsite.svg)](https://github.com/MesseBasseProduction/BandWebsite/blob/main/LICENSE)
 
 A band's website template with a description, a page to listen tracks and finally, a link tree to share all of the band's links! Translated in FR, EN, ES, DE.

assets/html/seemoremodal.html

@@ -2,10 +2,6 @@
   <a href="#" id="tidal" class="item" id="tidal" target="_blank" rel="noreferrer noopener">
     <img src="./assets/img/listen/tidal.svg" alt="tidal-link">
     <p>Tidal</p>
-  </a>    
-  <a href="#" id="pandora" target="_blank" rel="noreferrer noopener">
-    <img src="./assets/img/listen/bandcamp.svg" alt="pandora-link">
-    <p>Pandora</p>
   </a>
   <a href="#" id="genius" target="_blank" rel="noreferrer noopener">
     <img src="./assets/img/listen/genius.svg" alt="genius-link">
@@ -19,4 +15,5 @@
     <img src="./assets/img/listen/musicbrainz.svg" alt="musicbrainz-link">
     <p>MusicBrainz</p>
   </a>
+  <button id="close-modal-button" class="close-modal"></button>
 </div>

assets/json/band.json

@@ -127,9 +127,6 @@
         {
           "type": "tidal",
           "url": "https://listen.tidal.com/album/200014684"            
-        }, {
-          "type": "pandora",
-          "url": ""            
         }, {
           "type": "genius",
           "url": "https://genius.com/albums/Nac-fra/Dystopie"            
@@ -221,9 +218,6 @@
         {
           "type": "tidal",
           "url": "https://listen.tidal.com/album/200014704"            
-        }, {
-          "type": "pandora",
-          "url": ""            
         }, {
           "type": "genius",
           "url": "https://genius.com/albums/Nac-fra/Crad-bar-boogie-single"            
@@ -279,9 +273,6 @@
         {
           "type": "tidal",
           "url": "https://listen.tidal.com/album/199407447"            
-        }, {
-          "type": "pandora",
-          "url": ""            
         }, {
           "type": "genius",
           "url": "https://genius.com/albums/Nac-fra/Tramp-single"            
@@ -337,9 +328,6 @@
         {
           "type": "tidal",
           "url": ""            
-        }, {
-          "type": "pandora",
-          "url": ""            
         }, {
           "type": "genius",
           "url": "https://genius.com/albums/Nac-fra/Nature-humaine-origins"            
@@ -395,9 +383,6 @@
         {
           "type": "tidal",
           "url": ""            
-        }, {
-          "type": "pandora",
-          "url": ""            
         }, {
           "type": "genius",
           "url": "https://genius.com/artists/Nac-fra/"            
@@ -453,9 +438,6 @@
         {
           "type": "tidal",
           "url": ""            
-        }, {
-          "type": "pandora",
-          "url": ""            
         }, {
           "type": "genius",
           "url": "https://genius.com/albums/Nac-fra/Nac"            

assets/json/de.json

@@ -28,5 +28,11 @@
   "to": "bis",
   "since": "seit",
   "close": "Schließen",
-  "months": ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
+  "months": ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
+  "lang": {
+    "en": "🇬🇧 Englisch",
+    "fr": "🇫🇷 Französisch",
+    "es": "🇪🇸 Spanische",
+    "de": "🇩🇪 Deutsch"
+  }
 }

assets/json/en.json

@@ -28,5 +28,11 @@
   "to": "to",
   "since": "since",
   "close": "Close",
-  "months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
+  "months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+  "lang": {
+    "en": "🇬🇧 English",
+    "fr": "🇫🇷 French",
+    "es": "🇪🇸 Spanish",
+    "de": "🇩🇪 German"
+  }
 }

assets/json/es.json

@@ -28,5 +28,11 @@
   "to": "a",
   "since": "desde",
   "close": "Cerca",
-  "months": ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
+  "months": ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
+  "lang": {
+    "en": "🇬🇧 Inglés",
+    "fr": "🇫🇷 Francés",
+    "es": "🇪🇸 Español",
+    "de": "🇩🇪 Alemán"
+  }
 }

assets/json/fr.json

@@ -28,5 +28,11 @@
   "to": "à",
   "since": "depuis",
   "close": "Fermer",
-  "months": ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Decembre"]
+  "months": ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Decembre"],
+  "lang": {
+    "en": "🇬🇧 Anglais",
+    "fr": "🇫🇷 Français",
+    "es": "🇪🇸 Espagnol",
+    "de": "🇩🇪 Allemand"
+  }
 }

index.html

@@ -66,6 +66,12 @@ <h3 id="videos-section"></h3>
     <p>2021 – 2023</p>
   </footer>
 </main>
+<select id="lang-select">
+  <option value="en"></option>
+  <option value="fr"></option>
+  <option value="es"></option>
+  <option value="de"></option>
+</select>
 <div id="modal-overlay" class="modal-overlay"></div>
 <script type="text/javascript" src="https://arthurbeaulieu.github.io/ScrollBar.js/dist/ScrollBar.bundle.js"></script>
 <script type="text/javascript" src="./assets/dist/BW.bundle.js"></script>

listen.html

@@ -100,6 +100,12 @@ <h2><span id="release-from"></span> <span id="release-artist"></span></h2>
   </div>
 </section>
 <a href="./index.html" class="home"><img src="./assets/img/controls/home.svg"></a>
+<select id="lang-select">
+  <option value="en"></option>
+  <option value="fr"></option>
+  <option value="es"></option>
+  <option value="de"></option>
+</select>
 <div id="modal-overlay" class="modal-overlay"></div>
 <script type="text/javascript" src="https://arthurbeaulieu.github.io/ScrollBar.js/dist/ScrollBar.bundle.js"></script>
 <script type="text/javascript" src="./assets/dist/BW.bundle.js"></script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bandwebsite",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A template to make a band or artist website ",
   "keywords": [],
   "main": "src/bw.js",

src/bw.js

@@ -2,42 +2,60 @@ import { Color, Solver } from './js/FilterGenerator.js';
 import './bw.scss';
 
 
-const DEBUG = true;
+const DEBUG = false;
 
 
 class BW {
 
 
   constructor() {
-    this._lang = (['fr', 'es', 'de'].indexOf(navigator.language.substring(0, 2)) !== -1) ? navigator.language.substring(0, 2) : 'en';
+    this._lang = localStorage.getItem('website-lang');
+    if (this._lang === null) {
+      this._lang = (['fr', 'es', 'de', 'en'].indexOf(navigator.language.substring(0, 2)) !== -1) ? navigator.language.substring(0, 2) : 'en';
+      localStorage.setItem('website-lang', this._lang);
+    }
     this._nls = null;
     this._band = null;
     this._mainScroll = null;
-    this._version = '1.3.0'; // Based on v1.1.0 of BandWebsite
+    this._version = '1.1.0';
 
-    if (DEBUG === true) { console.log(`nac.band v${this._version} : Begin website initialization`); }
+    if (DEBUG === true) { console.log(`BandWebsite v${this._version} : Begin website initialization`); }
 
-    this._fetchLang()
+    this._initLang()
       .then(this._fetchBandInfo.bind(this))
       .then(this._init.bind(this))
       .then(this._buildPage.bind(this))
       .then(this._events.bind(this))
       .catch(err => { // Error are displayed even if DEBUG is set to false, to notify end user to contact support
-        console.error(`nac.band v${this._version} : Fatal error during initialization, please contact support :\n`, err);
+        console.error(`BandWebsite v${this._version} : Fatal error during initialization, please contact support :\n`, err);
       })
       .finally(() => {
-        if (DEBUG === true) { console.log(`nac.band v${this._version} : Website initialization done`); }
+        if (DEBUG === true) { console.log(`BandWebsite v${this._version} : Website initialization done`); }
       });
   }
 
 
-  _fetchLang() {
+  _initLang() {
     if (DEBUG === true) { console.log(`1. Fetch language keys with ${this._lang} locale`); }
     return new Promise((resolve, reject) => {
       fetch(`assets/json/${this._lang}.json`).then(data => {
         data.json().then(nlsKeys => {
           if (DEBUG === true) { console.log(`2. Language keys successfully retrieven`); }
           this._nls = nlsKeys;
+
+          const select = document.getElementById('lang-select');
+          for (let i = 0; i < select.children.length; ++i) {
+            select.children[i].innerHTML = this._nls.lang[select.children[i].value];
+            if (select.children[i].value === this._lang) {
+              select.children[i].setAttribute('selected', true);
+            }
+          }
+
+          select.addEventListener('change', e => {
+            localStorage.setItem('website-lang', e.target.value);
+            window.location.reload();
+          });
+
           resolve();
         }).catch(err => {
           if (DEBUG === true) { console.log(`Err. Can't parse language keys, the JSON file may be is invalid`); }
@@ -247,7 +265,9 @@ class BW {
       audio = new Audio(`assets/audio/${release.audio}`);
       handlePlayback(audio);
       // Update pager selected item
-      document.getElementById('release-pager').children[activeRelease].classList.add('selected');
+      if (this._band.releases.length < 35) {
+        document.getElementById('release-pager').children[activeRelease].classList.add('selected');
+      }
     };
     // Handle the audio playback and events
     const handlePlayback = () => {
@@ -295,37 +315,38 @@ class BW {
     } else {
       document.getElementById('release-previous').addEventListener('click', e => {
         e.target.blur();
-        document.getElementById('release-pager').children[activeRelease].classList.remove('selected');
+        if (this._band.releases.length < 35) {
+          document.getElementById('release-pager').children[activeRelease].classList.remove('selected');
+        }
         activeRelease = (this._band.releases.length + activeRelease - 1) % this._band.releases.length;
         updateRelease();
       });
       document.getElementById('release-next').addEventListener('click', e => {
         e.target.blur();
-        document.getElementById('release-pager').children[activeRelease].classList.remove('selected');
+        if (this._band.releases.length < 35) {
+          document.getElementById('release-pager').children[activeRelease].classList.remove('selected');
+        }
         activeRelease = (activeRelease + 1) % this._band.releases.length;
         updateRelease();
       });
 
-      for (let i = 0; i < this._band.releases.length; ++i) {
-        const releasePage = document.createElement('A');
-        releasePage.innerHTML = '●';
-        releasePage.addEventListener('click', e => {
-          document.getElementById('release-pager').children[activeRelease].classList.remove('selected');
-          const parent = e.target.parentNode;
-          activeRelease = Array.prototype.indexOf.call(parent.children, e.target);
-          updateRelease();
-        });
-        document.getElementById('release-pager').appendChild(releasePage);
+      if (this._band.releases.length && this._band.releases.length < 35) {
+        for (let i = 0; i < this._band.releases.length; ++i) {
+          const releasePage = document.createElement('A');
+          releasePage.innerHTML = '●';
+          releasePage.addEventListener('click', e => {
+            document.getElementById('release-pager').children[activeRelease].classList.remove('selected');
+            const parent = e.target.parentNode;
+            activeRelease = Array.prototype.indexOf.call(parent.children, e.target);
+            updateRelease();
+          });
+          releasePage.style.margin = `0 ${(3.5 / this._band.releases.length)}rem`;
+          document.getElementById('release-pager').appendChild(releasePage);
+        }
+
+        document.getElementById('release-pager').style.fontSize = `${(20 / this._band.releases.length) % 5.5}rem`;
       }
     }
-    // Blur modal event
-    document.getElementById('modal-overlay').addEventListener('click', () => {
-      overlay.style.opacity = 0;
-      setTimeout(() => {
-        overlay.innerHTML = '';
-        overlay.style.display = 'none';
-      }, 400);
-    });
     // Open modal event
     document.getElementById('see-more-links').addEventListener('click', () => {
       fetch('assets/html/seemoremodal.html').then(data => {
@@ -341,6 +362,7 @@ class BW {
               document.getElementById(release.moreLinks[i].type).href = release.moreLinks[i].url; // Update url href link
             }
           }
+          overlay.querySelector('#close-modal-button').innerHTML = this._nls.close;
           requestAnimationFrame(() => overlay.style.opacity = 1);
         });
       }).catch(e => console.error(e));

src/bw.scss

@@ -69,6 +69,13 @@ main {
   }
 }
 
+select {
+  padding: .2rem 1rem;
+  position: absolute;
+  right: 2rem;
+  top: 2rem;
+}
+
 .modal-overlay {
   align-items: center;
   background-color: rgba(0, 0, 0, .5);

src/scss/_listen.scss

@@ -187,6 +187,7 @@ section.track-links {
 
   .release-pager {
     display: flex;
+    font-size: 2.8rem;
     justify-content: center;
     margin-bottom: auto;
     user-select: none;
@@ -195,7 +196,7 @@ section.track-links {
       text-decoration: none;
       color: grey;
       cursor: pointer;
-      font-size: 2.8rem;
+      font-size: inherit;
       margin: 0 .5rem;
       user-select: none;
       transition: color .2s;
@@ -333,6 +334,8 @@ section.credits {
 }
 
 .modal-seemore {
+  text-align: center;
+
   a {
     align-items: center;
     background-color: white;
@@ -369,4 +372,8 @@ section.credits {
       padding-right: .5rem;
     }
   }
+
+  button {
+    margin-top: 1.3rem;
+  }
 }

tree.html

@@ -50,6 +50,13 @@
   </div>
 </main>
 <a href="./index.html" class="home"><img src="./assets/img/controls/home.svg"></a>
+<select id="lang-select">
+  <option value="en"></option>
+  <option value="fr"></option>
+  <option value="es"></option>
+  <option value="de"></option>
+</select>
+<div id="modal-overlay" class="modal-overlay"></div>
 <script type="text/javascript" src="https://arthurbeaulieu.github.io/ScrollBar.js/dist/ScrollBar.bundle.js"></script>
 <script type="text/javascript" src="./assets/dist/BW.bundle.js"></script>
 <script type="text/javascript">window.BW = new BW();</script>