4.8: new about popup and other visual improvements

2023-01-30 00:17:33 +06:00
parent b557ffb0cf
commit 6b87c7babd
19 changed files with 295 additions and 160 deletions
--- a/src/modules/pageRender/elements.js
+++ b/src/modules/pageRender/elements.js
@@ -2,26 +2,22 @@ import { celebrations } from "../config.js";

 export function switcher(obj) {
    let items = ``;
-    switch(obj.name) {
-        case "download":
-            items = obj.items;
-            break;
-        default:
-            for (let i = 0; i < obj.items.length; i++) {
-                let classes = obj.items[i]["classes"] ? obj.items[i]["classes"] : []
-                items += `<button id="${obj.name}-${obj.items[i]["action"]}" class="switch${classes.length > 0 ? ' ' + classes.join(' ') : ''}" onclick="changeSwitcher('${obj.name}', '${obj.items[i]["action"]}')">${obj.items[i]["text"] ? obj.items[i]["text"] : obj.items[i]["action"]}</button>`
-            }
-            break;
+    if (obj.name == "download") {
+        items = obj.times;
+    } else {
+        for (let i = 0; i < obj.items.length; i++) {
+            let classes = obj.items[i]["classes"] ? obj.items[i]["classes"] : []
+            items += `<button id="${obj.name}-${obj.items[i]["action"]}" class="switch${classes.length > 0 ? ' ' + classes.join(' ') : ''}" onclick="changeSwitcher('${obj.name}', '${obj.items[i]["action"]}')">${obj.items[i]["text"] ? obj.items[i]["text"] : obj.items[i]["action"]}</button>`
+        }
    }
-    return `
-        <div id="${obj.name}-switcher" class="switch-container">
+    return `<div id="${obj.name}-switcher" class="switch-container">
            ${obj.subtitle ? `<div class="subtitle">${obj.subtitle}</div>` : ``}
            <div class="switches">${items}</div>
            ${obj.explanation ? `<div class="explanation">${obj.explanation}</div>` : ``}
        </div>`
 }

-export function checkbox(action, text, aria, paddingType) {
+export function checkbox(action, text, paddingType, aria) {
    let paddingClass = ` `
    switch (paddingType) {
        case 1:
@@ -33,6 +29,8 @@ export function checkbox(action, text, aria, paddingType) {
        case 3:
            paddingClass += "no-margin"
            break;
+        case 4:
+            paddingClass += "top-margin-only"
    }
    return `<label id="${action}-chkbx" class="checkbox${paddingClass}">
        <input id="${action}" type="checkbox" ${aria ? `aria-label="${aria}"` : `aria-label="${text}"`} onclick="checkbox('${action}')">
@@ -65,9 +63,9 @@ export function popup(obj) {
    }
    return `
    ${obj.standalone ? `<div id="popup-${obj.name}" class="popup center box${classes.length > 0 ? ' ' + classes.join(' ') : ''}" style="visibility: hidden;">` : ''}
-    ${obj.buttonOnly ? obj.emoji : ``}
        <div id="popup-header" class="popup-header">
-            ${obj.standalone && !obj.buttonOnly ? `<button id="popup-close" class="button mono" onclick="popup('${obj.name}', 0)" ${obj.header.closeAria ? `aria-label="${obj.header.closeAria}"` : ''}>x</button>` : ''}
+            ${obj.standalone && !obj.buttonOnly ? `<button id="close-button" class="switch up" onclick="popup('${obj.name}', 0)" ${obj.header.closeAria ? `aria-label="${obj.header.closeAria}"` : ''}>x</button>` : ''}
+            ${obj.buttonOnly ? obj.header.emoji : ``}
            ${obj.header.aboveTitle ? `<a id="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
            ${obj.header.title ? `<div id="popup-title">${obj.header.title}</div>` : ''}
            ${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
@@ -88,7 +86,7 @@ export function multiPagePopup(obj) {
        tabs += `<button id="tab-button-${obj.name}-${obj.tabs[i]["name"]}" class="switch tab tab-${obj.name}" onclick="changeTab(event, 'tab-${obj.name}-${obj.tabs[i]["name"]}', '${obj.name}')">${obj.tabs[i]["title"]}</button>`
        tabContent += `<div id="tab-${obj.name}-${obj.tabs[i]["name"]}" class="popup-tab-content tab-content-${obj.name}">${obj.tabs[i]["content"]}</div>`
    }
-    tabs += `<button id="close-bottom" class="switch tab-${obj.name}" onclick="popup('${obj.name}', 0)" ${obj.closeAria ? `aria-label="${obj.closeAria}"` : ''}>x</button>`
+    tabs += `<button id="close-button" class="switch tab-${obj.name}" onclick="popup('${obj.name}', 0)" ${obj.closeAria ? `aria-label="${obj.closeAria}"` : ''}>x</button>`
    return `
    <div id="popup-${obj.name}" class="popup center box scrollable" style="visibility: hidden;">
        <div id="popup-content">${obj.header ? `<div id="popup-header" class="popup-header">
@@ -98,13 +96,25 @@ export function multiPagePopup(obj) {
        <div id="popup-tabs" class="switches popup-tabs">${tabs}</div>
    </div>`
 }
-
+export function collapsibleList(arr) {
+    let items = ``
+    for (let i = 0; i < arr.length; i++) {
+        items += `<div id="${arr[i]["name"]}-collapse" class="collapse-list">
+            <div class="collapse-header" onclick="expandCollapsible(event)">
+                <div class="collapse-title">${arr[i]["title"]}</div>
+                <div class="collapse-indicator">^</div>
+            </div>
+            <div id="${arr[i]["name"]}-body" class="collapse-body">${arr[i]["body"]}</div>
+        </div>`
+    }
+    return items;
+}
 export function popupWithBottomButtons(obj) {
    let tabs = ``
    for (let i = 0; i < obj.buttons.length; i++) {
        tabs += obj.buttons[i]
    }
-    tabs += `<button id="close-bottom" class="switch tab-${obj.name}" onclick="popup('${obj.name}', 0)" ${obj.closeAria ? `aria-label="${obj.closeAria}"` : ''}>x</button>`
+    tabs += `<button id="close-button" class="switch tab-${obj.name}" onclick="popup('${obj.name}', 0)" ${obj.closeAria ? `aria-label="${obj.closeAria}"` : ''}>x</button>`
    return `
    <div id="popup-${obj.name}" class="popup center box scrollable" style="visibility: hidden;">
        <div id="popup-content">${obj.header ? `<div id="popup-header" class="popup-header">
@@ -116,13 +126,15 @@ export function popupWithBottomButtons(obj) {
    </div>`
 }
 export function backdropLink(link, text) {
-    return `<a class="text-backdrop" href="${link}" target="_blank">${text}</a>`
+    return `<a class="text-backdrop italic" href="${link}" target="_blank">${text}</a>`
+}
+export function socialLink(emoji, name, handle, url) {
+    return `<div class="social-link">${emoji} ${name}: <a class="text-backdrop italic" href="${url}" target="_blank">${handle}</a></div>`
 }
-
 export function settingsCategory(obj) {
    return `<div id="settings-${obj.name}" class="settings-category">
        <div class="category-title">${obj.title ? obj.title : obj.name}</div>
-        <div class="settings-category-content">${obj.body}</div>
+        <div class="category-content">${obj.body}</div>
    </div>`
 }

--- a/src/modules/pageRender/page.js
+++ b/src/modules/pageRender/page.js
@@ -1,4 +1,4 @@
-import { backdropLink, celebrationsEmoji, checkbox, explanation, footerButtons, multiPagePopup, popup, popupWithBottomButtons, sep, settingsCategory, switcher } from "./elements.js";
+import { backdropLink, celebrationsEmoji, checkbox, collapsibleList, explanation, footerButtons, multiPagePopup, popup, popupWithBottomButtons, sep, settingsCategory, switcher, socialLink } from "./elements.js";
 import { services as s, appName, authorInfo, version, quality, repo, donations, supportedAudio } from "../config.js";
 import { getCommitInfo } from "../sub/currentCommit.js";
 import loc from "../../localization/manager.js";
@@ -11,7 +11,7 @@ let enabledServices = Object.keys(s).filter((p) => {
    if (s[p].enabled) return true;
 }).sort().map((p) => {
    return `<br>&bull; ${s[p].alias ? s[p].alias : p}`
-}).join(';').substring(4)
+}).join('').substring(4)

 let donate = ``
 let donateLinks = ``
@@ -79,21 +79,29 @@ export default function(obj) {
                            url: authorInfo.link
                        },
                        closeAria: t('AccessibilityClosePopup'),
-                        title: t('TitlePopupAbout')
+                        title: `${emoji("🔮", 30)} ${t('TitlePopupAbout')}`
                    },
                    body: [{
                        text: t('AboutSummary')
                    }, {
-                        text: `${t('AboutSupportedServices')}`,
-                        nopadding: true
-                    }, {
-                        text: `<div class="bullpadding">${enabledServices}.</div>`
-                    }, {
-                        text: obj.lang !== "ru" ? t('FollowTwitter') : "",
-                        classes: ["desc-padding"]
-                    }, {
-                        text: backdropLink(repo, t('LinkGitHubIssues')),
-                        classes: ["bottom-link"]
+                        text: collapsibleList([{
+                            "name": "services",
+                            "title": t("CollapseServices"),
+                            "body": `${enabledServices}<br/><br/>${t("ServicesNote")}`
+                        }, {
+                            "name": "support",
+                            "title": t("CollapseSupport"),
+                            "body": `${t("FollowSupport")}<br/>
+                            ${socialLink(emoji("🐘"), "mastodon", authorInfo.support.mastodon.handle, authorInfo.support.mastodon.url)}
+                            ${socialLink(emoji("🐦"), "twitter", authorInfo.support.twitter.handle, authorInfo.support.twitter.url)}<br/>
+                            ${t("SourceCode")}<br/>
+                            ${socialLink(emoji("🐙"), "github", repo.replace("https://github.com/", ''), repo)}<br/>
+                            ${t("SupportNote")}`
+                        }, {
+                            "name": "privacy",
+                            "title": t("CollapsePrivacy"),
+                            "body": t("PrivacyPolicy")
+                        }])
                    }]
                })
            }, {
@@ -211,7 +219,7 @@ export default function(obj) {
                + settingsCategory({
                    name: "tiktok",
                    title: "tiktok & douyin",
-                    body: checkbox("disableTikTokWatermark", t('SettingsRemoveWatermark'))
+                    body: checkbox("disableTikTokWatermark", t('SettingsRemoveWatermark'), 3)
                })
                + settingsCategory({
                    name: "youtube",
@@ -239,11 +247,11 @@ export default function(obj) {
                        subtitle: t('SettingsFormatSubtitle'),
                        explanation: t('SettingsAudioFormatDescription'),
                        items: audioFormats
-                    }) + sep(0) + checkbox("muteAudio", t('SettingsVideoMute'), t('SettingsVideoMute'), 3) + explanation(t('SettingsVideoMuteExplanation'))
+                    }) + sep(0) + checkbox("muteAudio", t('SettingsVideoMute'), 3) + explanation(t('SettingsVideoMuteExplanation'))
                }) + settingsCategory({
                    name: "tiktok",
                    title: "tiktok & douyin",
-                    body: checkbox("fullTikTokAudio", t('SettingsAudioFullTikTok'), t('SettingsAudioFullTikTok'), 3) + `<div class="explanation">${t('SettingsAudioFullTikTokDescription')}</div>`
+                    body: checkbox("fullTikTokAudio", t('SettingsAudioFullTikTok'), 3) + `<div class="explanation">${t('SettingsAudioFullTikTokDescription')}</div>`
                })
            }, {
                name: "other",
@@ -264,11 +272,11 @@ export default function(obj) {
                            "action": "light",
                            "text": t('SettingsThemeLight')
                        }]
-                    }) + checkbox("alwaysVisibleButton", t('SettingsKeepDownloadButton'), t('AccessibilityKeepDownloadButton'), 2)
+                    }) + checkbox("alwaysVisibleButton", t('SettingsKeepDownloadButton'), 4, t('AccessibilityKeepDownloadButton'))
                }) + settingsCategory({
                    name: "miscellaneous",
                    title: t('Miscellaneous'),
-                    body: checkbox("disableChangelog", t('SettingsDisableNotifications')) + `${!isIOS ? checkbox("downloadPopup", t('SettingsEnableDownloadPopup'), t('AccessibilityEnableDownloadPopup'), 1) : ''}`
+                    body: checkbox("disableChangelog", t('SettingsDisableNotifications')) + `${!isIOS ? checkbox("downloadPopup", t('SettingsEnableDownloadPopup'), 1, t('AccessibilityEnableDownloadPopup')) : ''}`
                })
            }],
        })}
@@ -301,12 +309,12 @@ export default function(obj) {
            name: "error",
            standalone: true,
            buttonOnly: true,
-            emoji: emoji("☹️", 48, 1),
            classes: ["small"],
            buttonText: t('ErrorPopupCloseButton'),
            header: {
                closeAria: t('AccessibilityClosePopup'),
-                title: t('TitlePopupError')
+                title: t('TitlePopupError'),
+                emoji: emoji("☹️", 64, 1),
            },
            body: `<div id="desc-error" class="desc-padding subtext"></div>`
        })}