From fe3ada0323419e8f199b71946224d2bb7ce1417c Mon Sep 17 00:00:00 2001 From: wukko Date: Sun, 2 Oct 2022 20:13:33 +0600 Subject: [PATCH] removed annoying popups --- package.json | 2 +- src/front/cobalt.css | 20 ++++- src/front/cobalt.js | 113 +++++++++++++++------------ src/localization/languages/en.json | 4 +- src/localization/languages/ru.json | 4 +- src/modules/changelog/changelog.json | 8 +- src/modules/pageRender/elements.js | 8 +- src/modules/pageRender/page.js | 8 +- 8 files changed, 100 insertions(+), 67 deletions(-) diff --git a/package.json b/package.json index 874b470..2eaa9e2 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "cobalt", "description": "save what you love", - "version": "3.6", + "version": "3.6.1", "author": "wukko", "exports": "./src/cobalt.js", "type": "module", diff --git a/src/front/cobalt.css b/src/front/cobalt.css index 1dc6faa..9ce5ca1 100644 --- a/src/front/cobalt.css +++ b/src/front/cobalt.css @@ -4,6 +4,7 @@ --border-15: 0.15rem solid var(--accent); --border-10: 0.1rem solid var(--accent); --font-mono: 'Noto Sans Mono', 'Consolas', 'SF Mono', monospace; + --red: rgb(255, 0, 61); } @media (prefers-color-scheme: dark) { :root { @@ -251,6 +252,13 @@ input[type="checkbox"] { padding: 0.6rem 1.2rem!important; align-content: center; } +.notification-dot { + width: 8px; + height: 8px; + background: var(--red); + margin-right: 0.4rem; + border-radius: 99rem; +} .text-backdrop { background: var(--accent); color: var(--background); @@ -268,7 +276,7 @@ input[type="checkbox"] { visibility: hidden; position: fixed; height: auto; - width: 30%; + width: 32%; z-index: 999; padding: 3rem 2rem 2rem 2rem; font-size: 0.9rem; @@ -542,6 +550,9 @@ input[type="checkbox"] { .popup.small { width: 25% } + .popup { + width: 35%; + } } @media screen and (max-width: 1440px) { #cobalt-main-box { @@ -554,7 +565,12 @@ input[type="checkbox"] { width: 40%; } } -@media screen and (max-width: 1100px) { +@media screen and (max-width: 1300px) { + .popup { + width: 46%; + } +} +@media screen and (max-width: 1200px) { #cobalt-main-box { width: 70%; } diff --git a/src/front/cobalt.js b/src/front/cobalt.js index 547d3ca..6d0a784 100644 --- a/src/front/cobalt.js +++ b/src/front/cobalt.js @@ -1,6 +1,7 @@ let isIOS = navigator.userAgent.toLowerCase().match("iphone os"); -let version = 11; +let version = 12; let regex = new RegExp(/https:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/); +let notification = `
` let switchers = { "theme": ["auto", "light", "dark"], @@ -105,6 +106,35 @@ function changeTab(evnt, tabId, tabClass) { } eid(tabId).style.display = "block"; evnt.currentTarget.dataset.enabled = "true"; + if (tabId == "tab-about-changelog" && sGet("changelogStatus") != `${version}`) notificationCheck("changelog"); + if (tabId == "tab-about-about" && !sGet("seenAbout")) notificationCheck("about"); +} +function notificationCheck(type) { + let changed = true; + switch (type) { + case "about": + sSet("seenAbout", "true"); + break; + case "changelog": + sSet("changelogStatus", version) + break; + default: + changed = false; + break; + } + if (changed && sGet("changelogStatus") == `${version}` || type == "disable") { + setTimeout(() => { + eid("about-footer").innerHTML = eid("about-footer").innerHTML.replace(notification, ''); + eid("tab-button-about-changelog").innerHTML = eid("tab-button-about-changelog").innerHTML.replace(notification, '') + }, 900) + } + if (sGet("disableChangelog") != "true") { + if (!sGet("seenAbout") && !eid("about-footer").innerHTML.includes(notification)) eid("about-footer").innerHTML = `${notification}${eid("about-footer").innerHTML}`; + if (sGet("changelogStatus") != `${version}`) { + if (!eid("about-footer").innerHTML.includes(notification)) eid("about-footer").innerHTML = `${notification}${eid("about-footer").innerHTML}`; + if (!eid("tab-button-about-changelog").innerHTML.includes(notification)) eid("tab-button-about-changelog").innerHTML = `${notification}${eid("tab-button-about-changelog").innerHTML}`; + } + } } function hideAllPopups() { let filter = document.getElementsByClassName('popup'); @@ -116,52 +146,40 @@ function hideAllPopups() { eid("popup-backdrop").style.visibility = "hidden"; } function popup(type, action, text) { - if (action == 1) hideAllPopups(); - eid("popup-backdrop").style.visibility = vis(action); - switch (type) { - case "about": - let tabId = text ? text : "changelog"; - if (tabId == "changelog") { - sSet("changelogStatus", version) - } - eid(`tab-button-${type}-${tabId}`).click(); - eid("popup-about").style.visibility = vis(action); - if (!sGet("seenAbout")) sSet("seenAbout", "true"); - break; - case "settings": - eid(`tab-button-${type}-video`).click(); - eid("popup-settings").style.visibility = vis(action); - break; - case "error": - eid("desc-error").innerHTML = text; - eid("popup-error").style.visibility = vis(action); - break; - case "download": - if (action == 1) { + if (action == 1) { + hideAllPopups(); // hide the previous popup before showing a new one + switch (type) { + case "about": + let tabId = sGet("seenAbout") ? "changelog" : "about"; + eid(`tab-button-${type}-${tabId}`).click(); + break; + case "settings": + eid(`tab-button-${type}-video`).click(); + break; + case "error": + eid("desc-error").innerHTML = text; + break; + case "download": eid("pd-download").href = text; eid("pd-copy").setAttribute("onClick", `copy('pd-copy', '${text}')`); - } - eid("popup-download").style.visibility = vis(action); - break; - case "imagePicker": - switch (action) { - case 1: - eid("imagepicker-download").href = text.url; - for (let i in text.images) { - eid("imagepicker-holder").innerHTML += `
` - } - break; - case 0: - eid("imagepicker-download").href = '/'; - eid("imagepicker-holder").innerHTML = '' - break; - } - eid("popup-imagePicker").style.visibility = vis(action); - break; - default: - eid(`popup-${type}`).style.visibility = vis(action); - break; + break; + case "imagePicker": + eid("imagepicker-download").href = text.url; + for (let i in text.images) { + eid("imagepicker-holder").innerHTML += `
` + } + break; + default: + break; + } + } else { + if (type == "imagePicker") { + eid("imagepicker-download").href = '/'; + eid("imagepicker-holder").innerHTML = '' + } } + eid("popup-backdrop").style.visibility = vis(action); + eid(`popup-${type}`).style.visibility = vis(action); } function changeSwitcher(li, b) { if (b) { @@ -194,6 +212,7 @@ function checkbox(action) { if (action == "alwaysVisibleButton") button(); if (action == "disableClipboardButton") eid("pasteFromClipboard").style.display = "flex"; } + sGet(action) == "true" ? notificationCheck("disable") : notificationCheck(); } function updateToggle(toggl, state) { switch(state) { @@ -359,11 +378,7 @@ window.onload = () => { eid("cobalt-main-box").style.visibility = 'visible'; eid("footer").style.visibility = 'visible'; eid("url-input-area").value = ""; - if (!sGet("seenAbout")) { - popup('about', 1, "about"); - } else if (sGet("changelogStatus") != `${version}` && sGet("disableChangelog") != "true") { - popup('about', 1, "changelog"); - } + notificationCheck(); if (isIOS) sSet("downloadPopup", "true"); let urlQuery = new URLSearchParams(window.location.search).get("u"); if (urlQuery !== null) { diff --git a/src/localization/languages/en.json b/src/localization/languages/en.json index 9d8dd32..1903376 100644 --- a/src/localization/languages/en.json +++ b/src/localization/languages/en.json @@ -80,7 +80,6 @@ "SettingsAudioFormatBest": "best", "SettingsAudioFormatDescription": "when best format is selected, you get audio in best quality available, because audio is kept in its original format. if you select anything other than that, you'll get a slightly compressed file.", "Keyphrase": "save what you love", - "SettingsDisableChangelogOnUpdate": "don't show changelog after major updates", "SettingsRemoveWatermark": "disable watermark", "ErrorPopupCloseButton": "got it", "ErrorLengthAudioConvert": "current length limit for audio conversion is {s} minutes. pick \"best\" format if you want to avoid limitations.", @@ -101,6 +100,7 @@ "ChangelogPressToExpand": "press to load", "Miscellaneous": "miscellaneous", "ModeToggleAuto": "auto mode", - "ModeToggleAudio": "audio mode" + "ModeToggleAudio": "audio mode", + "SettingsDisableNotifications": "disable in-app notifications" } } diff --git a/src/localization/languages/ru.json b/src/localization/languages/ru.json index 3b16065..2590d36 100644 --- a/src/localization/languages/ru.json +++ b/src/localization/languages/ru.json @@ -81,7 +81,6 @@ "SettingsAudioFormatBest": "лучший", "SettingsAudioFormatDescription": "когда выбран \"лучший\" формат, ты получишь аудио максимально возможного качества, так как оно останется в оригинальном формате. если же выбрано что-то другое, то аудио будет немного сжато.", "Keyphrase": "сохраняй то, что любишь", - "SettingsDisableChangelogOnUpdate": "не показывать изменения после обновлений", "SettingsRemoveWatermark": "убрать ватермарку", "ErrorPopupCloseButton": "ясно", "ModeToggle": "режим", @@ -104,6 +103,7 @@ "ChangelogPressToExpand": "нажми, чтобы загрузить", "Miscellaneous": "разное", "ModeToggleAuto": "авто режим", - "ModeToggleAudio": "аудио режим" + "ModeToggleAudio": "аудио режим", + "SettingsDisableNotifications": "не показывать уведомления" } } diff --git a/src/modules/changelog/changelog.json b/src/modules/changelog/changelog.json index 496986c..791a428 100644 --- a/src/modules/changelog/changelog.json +++ b/src/modules/changelog/changelog.json @@ -1,10 +1,12 @@ { "current": { + "title": "less disturbance (3.6.2)", + "content": "changelog no longer annoys you after a major update! this action has been replaced with a notification dot. if you see a red dot, then there's something new.\n\nyour old setting that disabled the changelog popup now applies to notifications.\n\nnew users will see a notification dot instead of an about popup, too. this was mostly done to prevent complications if your browser is set up to clean local storage when you close it.\n\nother changes:\n- popups are now a bit wider, just so more content fits at once.\n- better interface scaling.\n- code is a bit cleaner now." + }, + "history": [{ "title": "improvements all around! (3.6)", "content": "- download mode switcher is moving places, it's now right next to link input area.\n- smart mode has been renamed to auto mode, because this name is easier to understand.\n- all spacings in ui have been evened out. no more eye strain.\n- added support for twitter /video/1 links\n- clipboard button exception has been redone to prepare for adoption of readtext clipboard api in firefox.\n- cobalt is now using different tiktok api endpoint, because previous one got killed, just like the one before.\n- \"other\" settings tab has been cleaned up." - }, - "DisableIfYouWant": "\n\nif you don't want to see this popup after every major update, you can disable it in settings > other.", - "history": [{ + }, { "title": "tiktok support is back :D (3.5.4)", "content": "you can download videos, sounds, and images from tiktok again!\nhuge thank you to @minzique for finding another api endpoint that works." }, { diff --git a/src/modules/pageRender/elements.js b/src/modules/pageRender/elements.js index ef07d87..f1c263d 100644 --- a/src/modules/pageRender/elements.js +++ b/src/modules/pageRender/elements.js @@ -33,7 +33,7 @@ export function checkbox(action, text, aria, paddingType) { break; } return `` } @@ -119,13 +119,13 @@ export function footerButtons(obj) { for (let i = 0; i < obj.length; i++) { switch (obj[i]["type"]) { case "toggle": - items += ``; + items += ``; break; case "action": - items += ``; + items += ``; break; case "popup": - items += `
`; + items += `
`; i++; break; } diff --git a/src/modules/pageRender/page.js b/src/modules/pageRender/page.js index 6920b09..b47775c 100644 --- a/src/modules/pageRender/page.js +++ b/src/modules/pageRender/page.js @@ -107,7 +107,7 @@ export default function(obj) { classes: ["changelog-subtitle"], nopadding: true }, { - text: changelogManager("content") + changelogManager("DisableIfYouWant") + text: changelogManager("content") }, { text: `
${loc(obj.lang, 'ChangelogLastCommit')}
`, raw: true @@ -207,7 +207,7 @@ export default function(obj) { + settingsCategory({ name: "tiktok", title: "tiktok & douyin", - body: checkbox("disableTikTokWatermark", loc(obj.lang, 'SettingsRemoveWatermark'), loc(obj.lang, 'SettingsRemoveWatermark')) + body: checkbox("disableTikTokWatermark", loc(obj.lang, 'SettingsRemoveWatermark')) }) }, { name: "audio", @@ -249,8 +249,8 @@ export default function(obj) { }) + settingsCategory({ name: "miscellaneous", title: loc(obj.lang, 'Miscellaneous'), - body: checkbox("disableChangelog", loc(obj.lang, 'SettingsDisableChangelogOnUpdate'), loc(obj.lang, 'SettingsDisableChangelogOnUpdate')) - + checkbox("disableClipboardButton", loc(obj.lang, 'SettingsDisableClipboard'), loc(obj.lang, 'SettingsDisableClipboard')) + body: checkbox("disableChangelog", loc(obj.lang, 'SettingsDisableNotifications')) + + checkbox("disableClipboardButton", loc(obj.lang, 'SettingsDisableClipboard')) }) }], })}