From 6577697e2a86e3f5428d2ce23f1fc1dd3f1bc78b Mon Sep 17 00:00:00 2001 From: J Blackman Date: Thu, 28 Dec 2023 04:06:38 +1100 Subject: [PATCH] Adding sponsor tile to the landing page. (#3697) * Adding sponsor tile to the landing page. * Consistent naming. * Removing duplication for Sonar * Formatting update --- src/css/tabs/landing.less | 1 + src/js/BuildApi.js | 4 +- src/js/Sponsor.js | 26 +++++++++ src/js/tabs/firmware_flasher.js | 22 ++------ src/js/tabs/landing.js | 96 ++++++++++++++++++--------------- src/tabs/landing.html | 2 + 6 files changed, 88 insertions(+), 63 deletions(-) create mode 100644 src/js/Sponsor.js diff --git a/src/css/tabs/landing.less b/src/css/tabs/landing.less index 8559f2cebb..77569eea94 100644 --- 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 index 3506bc7cdd..43d4c79c2f 100644 --- 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 new file mode 100644 index 0000000000..2f36ab9c57 --- /dev/null +++ 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 index c8c77d2998..3ff24b7318 100644 --- 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 index f72d9630bb..29f319e0d2 100644 --- 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(' '); - bottomSection.append(' '); - const languagesAvailables = i18n.getLanguagesAvailables(); - languagesAvailables.forEach(function(element) { - bottomSection.append(` `); - }); - 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(' '); + bottomSection.append(' '); + const languagesAvailables = i18n.getLanguagesAvailables(); + languagesAvailables.forEach((element) => { + bottomSection.append(` `); + }); + + 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 index d3b1741973..68b9f4ec6f 100644 --- a/src/tabs/landing.html +++ b/src/tabs/landing.html @@ -6,6 +6,8 @@
+
+