From c1cb2f212e69334587d01080d7cf5c0abdda1bff Mon Sep 17 00:00:00 2001 From: Bastard Operator Date: Thu, 7 Jan 2021 01:25:04 +0100 Subject: [PATCH] Added "Matches" page Matches page will show the follows/followers and both following as: People matched me / I matched people / We matched together For this feature to work we have to make sure the Mastodon account is private, because we will use the "accept friend request" as a "both match" Fixes: * Improved chat painting intervals * Added matches intl and new pages * Fixed Toast UI * Fixed a bug where home will not display correctly when before login * Removed notification options from settings * Improved code stability * Added "myAccountId" fediloveData, which contains the user account id * Replaced localStorage.userAccountId for fediloveData.myAccountId * Improved path URL handling for /settings and /accounts --- src/intl/en-US.js | 1 + src/routes/_components/toast/Toast.html | 1 - src/routes/_pages/matches/index.html | 20 +++ .../settings/instances/[instanceName].html | 14 +- .../_store/computations/navComputations.js | 4 +- src/routes/matches/index.html | 19 +++ src/scss/themes/ozark.scss | 1 + static/fedilove-no-react.js | 120 ++++++++++-------- 8 files changed, 110 insertions(+), 70 deletions(-) create mode 100644 src/routes/_pages/matches/index.html create mode 100644 src/routes/matches/index.html diff --git a/src/intl/en-US.js b/src/intl/en-US.js index 7a239ba8..47ec4800 100644 --- a/src/intl/en-US.js +++ b/src/intl/en-US.js @@ -61,6 +61,7 @@ export default { home: 'Home', meet: 'Meet!', notifications: 'Notifications', + matches: 'Matches', mutedUsers: 'Muted users', pinnedStatuses: 'Pinned toots', followRequests: 'Follow requests', diff --git a/src/routes/_components/toast/Toast.html b/src/routes/_components/toast/Toast.html index 358391ac..fcf31e69 100644 --- a/src/routes/_components/toast/Toast.html +++ b/src/routes/_components/toast/Toast.html @@ -25,7 +25,6 @@ display: flex; flex-direction: column; align-items: center; - border: 2px solid var(--toast-border); background: var(--toast-bg); border-radius: 5px; margin: 0 40px; diff --git a/src/routes/_pages/matches/index.html b/src/routes/_pages/matches/index.html new file mode 100644 index 00000000..47bb7b0b --- /dev/null +++ b/src/routes/_pages/matches/index.html @@ -0,0 +1,20 @@ + + + diff --git a/src/routes/_pages/settings/instances/[instanceName].html b/src/routes/_pages/settings/instances/[instanceName].html index 5ab694a2..1c6dbda9 100644 --- a/src/routes/_pages/settings/instances/[instanceName].html +++ b/src/routes/_pages/settings/instances/[instanceName].html @@ -4,12 +4,6 @@ {#if verifyCredentials}

{intl.loggedInAs}

-

{intl.homeTimelineFilters}

- -

{intl.notificationFilters}

- -

{intl.pushNotifications}

- {/if} @@ -25,9 +19,6 @@ import { store } from '../../../_store/store' import SettingsLayout from '../../../_components/settings/SettingsLayout.html' import InstanceUserProfile from '../../../_components/settings/instance/InstanceUserProfile.html' - import HomeTimelineFilterSettings from '../../../_components/settings/instance/HomeTimelineFilterSettings.html' - import NotificationFilterSettings from '../../../_components/settings/instance/NotificationFilterSettings.html' - import PushNotificationSettings from '../../../_components/settings/instance/PushNotificationSettings.html' import InstanceActions from '../../../_components/settings/instance/InstanceActions.html' import { updateVerifyCredentialsForInstance } from '../../../_actions/instances' @@ -44,10 +35,7 @@ components: { SettingsLayout, InstanceUserProfile, - PushNotificationSettings, - InstanceActions, - HomeTimelineFilterSettings, - NotificationFilterSettings + InstanceActions } } diff --git a/src/routes/_store/computations/navComputations.js b/src/routes/_store/computations/navComputations.js index 0564c402..ca230ec3 100644 --- a/src/routes/_store/computations/navComputations.js +++ b/src/routes/_store/computations/navComputations.js @@ -74,9 +74,9 @@ export function navComputations (store) { }, { name: 'notifications', - href: '/notifications', + href: '/matches', svg: '#fa-asterisk', - label: 'intl.notifications' + label: 'intl.matches' }, { name: 'direct', diff --git a/src/routes/matches/index.html b/src/routes/matches/index.html new file mode 100644 index 00000000..ad74e1f3 --- /dev/null +++ b/src/routes/matches/index.html @@ -0,0 +1,19 @@ + + + <LazyPage {pageComponent} {params} /> + +<script> + import Title from '../_components/Title.html' + import LazyPage from '../_components/LazyPage.html' + import pageComponent from '../_pages/matches/index.html' + + export default { + components: { + Title, + LazyPage + }, + data: () => ({ + pageComponent + }) + } +</script> diff --git a/src/scss/themes/ozark.scss b/src/scss/themes/ozark.scss index b77af90c..7224a703 100644 --- a/src/scss/themes/ozark.scss +++ b/src/scss/themes/ozark.scss @@ -59,6 +59,7 @@ $deemphasized-text-color: #939393; --article-bg: #{$article-bg}; --focus-outline: #{$button-primary-hover}; --focus-width: 1px; + --toast-text: #{$main-text-color}; --deemphasized-text-color: #{$deemphasized-text-color}; --very-deemphasized-text-color: #{$deemphasized-text-color}; } diff --git a/static/fedilove-no-react.js b/static/fedilove-no-react.js index 712abdea..cd9ddfe7 100644 --- a/static/fedilove-no-react.js +++ b/static/fedilove-no-react.js @@ -9,12 +9,17 @@ function mastodon_get(path, payload, callbk) { return mastodon_request('GET', function mastodon_post(path, payload, callbk) { return mastodon_request('POST', path, payload, callbk); } function mastodon_request(method, path, payload, callbk) { payload = payload || null; - var url = 'https://'+fediloveApi.getCurrentInstance()+path; - var oReq = new XMLHttpRequest(); + const ACCESS_TOKEN = window.fediloveApi.getAccessToken(); + if (ACCESS_TOKEN === undefined) + return callbk(undefined); + + const API_URL = 'https://'+fediloveApi.getCurrentInstance()+path; + + const oReq = new XMLHttpRequest(); oReq.addEventListener("load", function() { callbk(this.responseText); }); - oReq.open(method, url); - oReq.setRequestHeader('Authorization', 'Bearer '+fediloveApi.getAccessToken()); + oReq.open(method, API_URL); + oReq.setRequestHeader('Authorization', 'Bearer '+ACCESS_TOKEN); oReq.send(payload); } @@ -240,10 +245,14 @@ var fediloveApi = { return andUuid? { id: parts[parts.length-1], uuid: lastUuid } : parts[parts.length-1]; }, getAccessToken: function() { - var instance = fediloveApi.getCurrentInstance(); + const instance = fediloveApi.getCurrentInstance(); + if (instance === undefined) + return undefined; return JSON.parse(localStorage.store_loggedInInstances)[instance].access_token; }, getCurrentInstance: function() { + if (localStorage.store_currentInstance === undefined) + return undefined; return JSON.parse(localStorage.store_currentInstance); } }; @@ -265,6 +274,7 @@ var fediloveData = { chatAvatarCache: undefined, meetAccountCurrentImg: 0, meetAccountImageLocked: false, + myAccountId: undefined, currentAccount: null, currentAccountIsEmpty: false, gotEmojifyTextFunction: false, @@ -298,7 +308,7 @@ var fediloveEvents = { if (data) { // if the message is mine, search which account is doing it for, // and do the same with the party's data - if (localStorage.store_userAccountId == data.account.id) { + if (fediloveData.myAccountId == data.account.id) { var account_id = data.in_reply_to_account_id; if (account_id === null && data.mentions.length > 0) { account_id = data.mentions[0].id; @@ -340,7 +350,7 @@ function fedilove_customization() { document.body.classList = ''; document.getElementById('sapper').style = ''; - if (localStorage.store_currentInstance === "undefined") { + if ([undefined,"undefined"].includes(localStorage.store_currentInstance)) { $('body').addClass('not-logged-in'); if (window.location.pathname == '/') { $('body').addClass('home'); @@ -348,6 +358,17 @@ function fedilove_customization() { return; } + // get the userAccountId to check against the href /account/NUM on the messages + // so we can apply different style to my messages + if (fediloveData.myAccountId === undefined) { + mastodon_get('/api/v1/accounts/verify_credentials', {}, function(data) { + const json = JSON.parse(data); + if (json !== undefined) { + fediloveData.myAccountId = json.id; + } + }); + } + if (document.querySelector('#main-nav > div#dummy-nav') != null) { document.querySelector('#main-nav > div#dummy-nav').remove(); document.querySelector('#main-nav > ul.main-nav-ul').style = ''; @@ -432,72 +453,63 @@ function fedilove_customization() { // this function changes the css class on articles (messages) // that match the given account_id - var makeMessageUIModifications = function(account_id) { - var theint = 150; - const _this = setInterval(function() - { - if (!window.location.pathname.startsWith('/statuses/')) { - clearInterval(_this); - return; - } + var theint = 100; + const _this = setInterval(function() + { + // interval auto-destroyer + if (!window.location.pathname.startsWith('/statuses/')) { + clearInterval(_this); + return; + } - // paint MY messages as mine + // paint MY messages as mine + if (fediloveData.myAccountId !== undefined) { $('div.main-content.chat article.status-article').each(function(i) { - if ($(this).find('a.status-author-name').attr('href').endsWith(`/accounts/${account_id}`)) { + if ($(this).find('a.status-author-name').attr('href').endsWith(`/accounts/${fediloveData.myAccountId}`)) { $(this).addClass('mymsg'); theint = 250; } else { $(this).addClass('partymsg'); } }); + } - // paint LIKES - $('a.status-favs-reblogs.status-favs').each(function(i) { - // easy, aria-label contains the times this status was fav - // so, we use this as the input source to search for "0", - // if no "0" found in text, we mark element as liked so we can apply styles and "undo like" function - if ($(this).attr('aria-label').search(/0/) == -1) { - $(this).addClass('liked-msg'); - $(this).attr('data-liked', 1); - } - }); - - // remove liking functionality from our own messages - $('div.the-list article.status-article.mymsg a.status-favs-reblogs').each(function(i) { - $(this).attr('onclick', 'return false;'); - }); - - // resize likes acording to the outer parent - $('div.main-content.chat div.the-list article.status-article').each(function(e) { - $(this).find('div.like-div').width($(this).width()); - }); - - }, theint); - }; - - // get the userAccountId to check against the href /account/NUM on the messages - // so we can apply different style to my messages - if (localStorage.store_userAccountId === undefined) { - mastodon_get('/api/v1/accounts/verify_credentials', {}, function(data) { - var json = JSON.parse(data); - if (json !== undefined) { - localStorage.store_userAccountId = json.id; - makeMessageUIModifications(json.id); + // paint LIKES + $('a.status-favs-reblogs.status-favs').each(function(i) { + // easy, aria-label contains the times this status was fav + // so, we use this as the input source to search for "0", + // if no "0" found in text, we mark element as liked so we can apply styles and "undo like" function + if ($(this).attr('aria-label').search(/0/) == -1) { + $(this).addClass('liked-msg'); + $(this).attr('data-liked', 1); } }); - } else { - makeMessageUIModifications(localStorage.store_userAccountId); - } + + // remove liking functionality from our own messages + $('div.the-list article.status-article.mymsg a.status-favs-reblogs').each(function(i) { + $(this).attr('onclick', 'return false;'); + }); + + // resize likes acording to the outer parent + $('div.main-content.chat div.the-list article.status-article').each(function(e) { + $(this).find('div.like-div').width($(this).width()); + }); + + }, theint); + } + else if (window.location.pathname == '/matches') { + console.log('matches'); } else if (window.location.pathname == '/direct') { $('div.main-content').addClass('direct'); $('body').addClass('direct'); $('nav#main-nav li.main-nav-li svg')[2].classList += ' active'; } - else if (window.location.pathname == '/settings') { + else if (window.location.pathname.startsWith('/settings')) { $('nav#main-nav li.main-nav-li svg')[3].classList += ' active'; } - else if (window.location.pathname.startsWith('/accounts/')) + else if (window.location.pathname.startsWith('/accounts/') && + window.location.pathname.match(/^\/accounts\/\d+$/) !== null) { $('div.main-content').addClass('account'); $('body').addClass('account');