Adding sponsor tile to the landing page. (#3697)

* Adding sponsor tile to the landing page. * Consistent naming. * Removing duplication for Sonar * Formatting update
betaflight · Dec 27, 2023 · 6577697 · 6577697
1 parent 820d30b
commit 6577697
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 63 deletions.
diff --git a/src/css/tabs/landing.less b/src/css/tabs/landing.less
@@ -13,6 +13,7 @@
 		padding: 20px;
 		background: #fff url(../../images/pattern.png);
 		background-size: 300px;
+		margin-bottom: 15px;
 	}
 	.content_mid {
 		background-color: var(--accent);

diff --git a/src/js/BuildApi.js b/src/js/BuildApi.js
@@ -172,8 +172,8 @@ export default class BuildApi {
         this.load(url, onSuccess, onFailure);
     }
 
-    loadSponsorTile(mode, onSuccess, onFailure) {
-        const url = `${this._url}/api/configurator/sponsors/${mode}`;
+    loadSponsorTile(mode, page, onSuccess, onFailure) {
+        const url = `${this._url}/api/configurator/sponsors/${mode}/${page}`;
         this.load(url, onSuccess, onFailure);
     }
 }
diff --git a/src/js/Sponsor.js b/src/js/Sponsor.js
@@ -0,0 +1,26 @@
+import BuildApi from './BuildApi';
+import DarkTheme from './DarkTheme';
+
+export default class Sponsor {
+
+    constructor () {
+        this._api = new BuildApi();
+    }
+
+    loadSponsorTile(name, div) {
+        if (!navigator.onLine) {
+            return;
+        }
+
+        this._api.loadSponsorTile(DarkTheme.enabled ? 'dark' : 'light', name,
+            (content) => {
+                if (content) {
+                    div.html(content);
+                    div.show();
+                } else {
+                    div.hide();
+                }
+            },
+        );
+    }
+}
diff --git a/src/js/tabs/firmware_flasher.js b/src/js/tabs/firmware_flasher.js
@@ -19,11 +19,12 @@ import { gui_log } from '../gui_log';
 import semver from 'semver';
 import { checkChromeRuntimeError, urlExists } from '../utils/common';
 import { generateFilename } from '../utils/generate_filename';
-import DarkTheme from '../DarkTheme';
+import Sponsor from '../Sponsor';
 
 const firmware_flasher = {
     targets: null,
     releaseLoader: new BuildApi(),
+    sponsor: new Sponsor(),
     localFirmwareLoaded: false,
     selectedBoard: undefined,
     boardNeedsVerification: false,
@@ -58,23 +59,6 @@ firmware_flasher.initialize = function (callback) {
 
     function onDocumentLoad() {
 
-        function loadSponsor() {
-            if (!navigator.onLine) {
-                return;
-            }
-
-            self.releaseLoader.loadSponsorTile(DarkTheme.enabled ? 'dark' : 'light',
-                (content) => {
-                    if (content) {
-                        $('div.tab_sponsor').html(content);
-                        $('div.tab_sponsor').show();
-                    } else {
-                        $('div.tab_sponsor').hide();
-                    }
-                },
-            );
-        }
-
         function parseHex(str, callback) {
             // parsing hex in different thread
             const worker = new Worker('./js/workers/hex_parser.js');
@@ -292,7 +276,7 @@ firmware_flasher.initialize = function (callback) {
         // translate to user-selected language
         i18n.localizePage();
 
-        loadSponsor();
+        self.sponsor.loadSponsorTile('flash', $('div.tab_sponsor'));
 
         buildType_e.on('change', function() {
             self.enableLoadRemoteFileButton(false);

diff --git a/src/js/tabs/landing.js b/src/js/tabs/landing.js
@@ -1,58 +1,70 @@
 import GUI, { TABS } from '../gui';
 import { i18n } from '../localization';
+import Sponsor from '../Sponsor';
 import $ from 'jquery';
 
-const landing = {};
+const landing = {
+    sponsor: new Sponsor(),
+};
+
 landing.initialize = function (callback) {
+    const self = this;
 
-  if (GUI.active_tab != 'landing') {
-    GUI.active_tab = 'landing';
-  }
-
-  $('#content').load("./tabs/landing.html", function () {
-    function showLang(newLang) {
-      bottomSection = $('.languageSwitcher');
-      bottomSection.find('a').each(function(index) {
-        const element = $(this);
-        const languageSelected = element.attr('lang');
-        if (newLang == languageSelected) {
-          element.removeClass('selected_language');
-          element.addClass('selected_language');
-        } else {
-          element.removeClass('selected_language');
-        }
-      });
+    if (GUI.active_tab != 'landing') {
+        GUI.active_tab = 'landing';
     }
-    let bottomSection = $('.languageSwitcher');
-    bottomSection.html(' <span i18n="language_choice_message"></span>');
-    bottomSection.append(' <a href="#" i18n="language_default_pretty" lang="DEFAULT"></a>');
-    const languagesAvailables = i18n.getLanguagesAvailables();
-    languagesAvailables.forEach(function(element) {
-      bottomSection.append(` <a href="#" lang="${element}" i18n="language_${element}"></a>`);
-    });
-    bottomSection.find('a').each(function(index) {
-      let element = $(this);
-      element.click(function(){
-        element = $(this);
-        const languageSelected = element.attr('lang');
-        if (!languageSelected) { return; }
-        if (i18n.selectedLanguage != languageSelected) {
-          i18n.changeLanguage(languageSelected);
-          showLang(languageSelected);
+
+    $('#content').load("./tabs/landing.html", () => {
+        function showLang(newLang) {
+            bottomSection = $('.languageSwitcher');
+            bottomSection.find('a').each(function(index) {
+                const element = $(this);
+                const languageSelected = element.attr('lang');
+                if (newLang == languageSelected) {
+                    element.removeClass('selected_language');
+                    element.addClass('selected_language');
+                } else {
+                    element.removeClass('selected_language');
+                }
+            });
         }
-      });
-    });
-    showLang(i18n.selectedLanguage);
-    // translate to user-selected language
-    i18n.localizePage();
 
-    GUI.content_ready(callback);
-  });
+        let bottomSection = $('.languageSwitcher');
+        bottomSection.html(' <span i18n="language_choice_message"></span>');
+        bottomSection.append(' <a href="#" i18n="language_default_pretty" lang="DEFAULT"></a>');
+        const languagesAvailables = i18n.getLanguagesAvailables();
 
+        languagesAvailables.forEach((element) => {
+            bottomSection.append(` <a href="#" lang="${element}" i18n="language_${element}"></a>`);
+        });
+
+        bottomSection.find('a').each((index) => {
+            let element = $(this);
+            element.click(() => {
+                element = $(this);
+                const languageSelected = element.attr('lang');
+                if (!languageSelected) { return; }
+                if (i18n.selectedLanguage != languageSelected) {
+                    i18n.changeLanguage(languageSelected);
+                    showLang(languageSelected);
+                }
+            });
+        });
+
+        showLang(i18n.selectedLanguage);
+        // translate to user-selected language
+        i18n.localizePage();
+
+        self.sponsor.loadSponsorTile('landing', $('div.tab_sponsor'));
+
+        GUI.content_ready(callback);
+    });
 };
 
 landing.cleanup = function (callback) {
-    if (callback) callback();
+    if (callback) {
+        callback();
+    }
 };
 
 // TODO: remove after all is using modules

diff --git a/src/tabs/landing.html b/src/tabs/landing.html
@@ -6,6 +6,8 @@
                 <div class="" i18n="defaultWelcomeIntro" align="center"></div>
             </div>
         </div>
+        <div class="tab_sponsor">
+        </div>
         <div class="content_mid grid-row">
 
             <div class="column third_left text1 grid-col col4">