Add who-to-follow-panel
This commit is contained in:
Hakaba Hitoyo
hakabahitoyo
parent
ea6ee2aaa2
commit
b32573138b
6 changed files with 225 additions and 3 deletions
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
<user-panel></user-panel>
|
||||
<nav-panel></nav-panel>
|
||||
<instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel>
|
||||
<who-to-follow-panel v-if="currentUser && showWhoToFollowPanel"></who-to-follow-panel>
|
||||
<chat-panel v-if="currentUser && chat"></chat-panel>
|
||||
<notifications v-if="currentUser"></notifications>
|
||||
</div>
|
||||
|
|
|
|||
179
src/components/who_to_follow_panel/who_to_follow_panel.js
Normal file
179
src/components/who_to_follow_panel/who_to_follow_panel.js
Normal file
|
|
@ -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
|
||||
37
src/components/who_to_follow_panel/who_to_follow_panel.vue
Normal file
37
src/components/who_to_follow_panel/who_to_follow_panel.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div class="who-to-follow-panel">
|
||||
<div class="panel panel-default base01-background">
|
||||
<div class="panel-heading timeline-heading base02-background base04">
|
||||
<div class="title">
|
||||
Who to follow
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body who-to-follow">
|
||||
<p>
|
||||
<img v-bind:src="img1"/> <a v-bind:href="link1" target="_blank">{{ name1 }}</a><br>
|
||||
<img v-bind:src="img2"/> <a v-bind:href="link2" target="_blank">{{ name2 }}</a><br>
|
||||
<img v-bind:src="img3"/> <a v-bind:href="link3" target="_blank">{{ name3 }}</a><br>
|
||||
<img v-bind:src="$store.state.config.logo"> <a v-bind:href="moreUrl" target="_blank">More</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./who_to_follow_panel.js" ></script>
|
||||
|
||||
<style lang="scss">
|
||||
.who-to-follow * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.who-to-follow img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.who-to-follow p {
|
||||
line-height: 40px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -4,5 +4,6 @@
|
|||
"logo": "/static/logo.png",
|
||||
"defaultPath": "/main/all",
|
||||
"chatDisabled": false,
|
||||
"showWhoToFollowPanel": false,
|
||||
"showInstanceSpecificPanel": false
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue