From b32573138b7607b8d9070100fb792f0241a4ba80 Mon Sep 17 00:00:00 2001 From: Hakaba Hitoyo Date: Sun, 11 Feb 2018 23:12:05 +0900 Subject: [PATCH] Add who-to-follow-panel --- src/App.js | 7 +- src/App.vue | 1 + .../who_to_follow_panel.js | 179 ++++++++++++++++++ .../who_to_follow_panel.vue | 37 ++++ src/main.js | 3 +- static/config.json | 1 + 6 files changed, 225 insertions(+), 3 deletions(-) create mode 100644 src/components/who_to_follow_panel/who_to_follow_panel.js create mode 100644 src/components/who_to_follow_panel/who_to_follow_panel.vue diff --git a/src/App.js b/src/App.js index e9248967..a052e058 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import UserPanel from './components/user_panel/user_panel.vue' import NavPanel from './components/nav_panel/nav_panel.vue' import Notifications from './components/notifications/notifications.vue' import UserFinder from './components/user_finder/user_finder.vue' +import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue' import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue' import ChatPanel from './components/chat_panel/chat_panel.vue' @@ -12,8 +13,9 @@ export default { NavPanel, Notifications, UserFinder, - ChatPanel, - InstanceSpecificPanel + WhoToFollowPanel, + InstanceSpecificPanel, + ChatPanel }, data: () => ({ mobileActivePanel: 'timeline' @@ -27,6 +29,7 @@ export default { style () { return { 'background-image': `url(${this.background})` } }, sitename () { return this.$store.state.config.name }, chat () { return this.$store.state.chat.channel.state === 'joined' }, + showWhoToFollowPanel () { return this.$store.state.config.showWhoToFollowPanel }, showInstanceSpecificPanel () { return this.$store.state.config.showInstanceSpecificPanel } }, methods: { diff --git a/src/App.vue b/src/App.vue index 2a910bc0..1d8dd6c8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -24,6 +24,7 @@ + diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js new file mode 100644 index 00000000..49653c81 --- /dev/null +++ b/src/components/who_to_follow_panel/who_to_follow_panel.js @@ -0,0 +1,179 @@ +const WhoToFollowPanel = { + data: () => ({ + img1: '/images/avi.png', + link1: null, + name1: '', + img2: '/images/avi.png', + link2: null, + name2: '', + img3: '/images/avi.png', + link3: null, + name3: '' + }), + computed: { + user: function () { + return this.$store.state.users.currentUser.screen_name + }, + moreUrl: function () { + var host = window.location.hostname + var user = this.user + var url = 'https://vinayaka.distsn.org/?' + + encodeURIComponent(host) + '+' + encodeURIComponent(user) + return url + }, + showWhoToFollowPanel () { + return this.$store.state.config.showWhoToFollowPanel + } + }, + watch: { + user: function (user, oldUser) { + function showUsers (panel, users, aHost, aUser) { + var cn + var index = 0 + var random = Math.floor(Math.random() * 10) + for (cn = random; cn < users.length; cn = cn + 10) { + var user + user = users[cn] + var host + host = user.host + var username + if (user.username) { + username = user.username + } else { + username = user.user + } + var img + if (user.avatar) { + img = user.avatar + } else { + img = '/images/avi.png' + } + var link = 'https://' + host + '/users/' + username + var name = username + '@' + host + if ((!user.following) && + (!user.blacklisted) && + (!(host === aHost && username === aUser))) { + if (index === 0) { + panel.img1 = img + panel.link1 = link + panel.name1 = name + } else if (index === 1) { + panel.img2 = img + panel.link2 = link + panel.name2 = name + } else if (index === 2) { + panel.img3 = img + panel.link3 = link + panel.name3 = name + } + index = index + 1 + if (index > 2) { + break + } + } + } + } + function getUsers (panel) { + var user = panel.$store.state.users.currentUser.screen_name + if (user) { + panel.name1 = 'Loading...' + panel.name2 = 'Loading...' + panel.name3 = 'Loading...' + var host = window.location.hostname + var url = 'https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-simple-api.cgi?' + + encodeURIComponent(host) + '+' + encodeURIComponent(user) + window.fetch(url, {mode: 'cors'}).then(function (response) { + if (response.ok) { + return response.json() + } else { + panel.name1 = '' + panel.name2 = '' + panel.name3 = '' + } + }).then(function (users) { + showUsers(panel, users, host, user) + }) + } + } + if (this.showWhoToFollowPanel) { + getUsers(this) + } + } + }, + mounted: + function () { + function showUsers (panel, users, aHost, aUser) { + var cn + var index = 0 + var random = Math.floor(Math.random() * 10) + for (cn = random; cn < users.length; cn = cn + 10) { + var user + user = users[cn] + var host + host = user.host + var username + if (user.username) { + username = user.username + } else { + username = user.user + } + var img + if (user.avatar) { + img = user.avatar + } else { + img = '/images/avi.png' + } + var link = 'https://' + host + '/users/' + username + var name = username + '@' + host + if ((!user.following) && + (!user.blacklisted) && + (!(host === aHost && username === aUser))) { + if (index === 0) { + panel.img1 = img + panel.link1 = link + panel.name1 = name + } else if (index === 1) { + panel.img2 = img + panel.link2 = link + panel.name2 = name + } else if (index === 2) { + panel.img3 = img + panel.link3 = link + panel.name3 = name + } + index = index + 1 + if (index > 2) { + break + } + } + } + } + function getUsers (panel) { + var user = panel.user + if (user) { + panel.name1 = 'Loading...' + panel.name2 = 'Loading...' + panel.name3 = 'Loading...' + var host = window.location.hostname + var url = 'https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-simple-api.cgi?' + + encodeURIComponent(host) + '+' + encodeURIComponent(user) + window.fetch(url, {mode: 'cors'}).then(function (response) { + if (response.ok) { + return response.json() + } else { + panel.name1 = '' + panel.name2 = '' + panel.name3 = '' + } + }).then(function (users) { + showUsers(panel, users, host, user) + }) + } + } + if (this.showWhoToFollowPanel) { + getUsers(this) + } + } +} + +export default WhoToFollowPanel diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue new file mode 100644 index 00000000..fff966ab --- /dev/null +++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/src/main.js b/src/main.js index 6f8c00f0..5c74da3a 100644 --- a/src/main.js +++ b/src/main.js @@ -88,10 +88,11 @@ window.fetch('/api/statusnet/config.json') window.fetch('/static/config.json') .then((res) => res.json()) .then((data) => { - const {theme, background, logo, showInstanceSpecificPanel} = data + const {theme, background, logo, showWhoToFollowPanel, showInstanceSpecificPanel} = data store.dispatch('setOption', { name: 'theme', value: theme }) store.dispatch('setOption', { name: 'background', value: background }) store.dispatch('setOption', { name: 'logo', value: logo }) + store.dispatch('setOption', { name: 'showWhoToFollowPanel', value: showWhoToFollowPanel }) store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel }) if (data['chatDisabled']) { store.dispatch('disableChat') diff --git a/static/config.json b/static/config.json index 6c9c27da..23fdf8a8 100644 --- a/static/config.json +++ b/static/config.json @@ -4,5 +4,6 @@ "logo": "/static/logo.png", "defaultPath": "/main/all", "chatDisabled": false, + "showWhoToFollowPanel": false, "showInstanceSpecificPanel": false }