Who to follow panel (configurable) See merge request pleroma/pleroma-fe!254environments/dev/deployments/104
commit
622e8cd94f
@ -0,0 +1,123 @@
|
||||
function showWhoToFollow (panel, reply, aHost, aUser) {
|
||||
var users = reply.ids
|
||||
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 img
|
||||
if (user.icon) {
|
||||
img = user.icon
|
||||
} else {
|
||||
img = '/images/avi.png'
|
||||
}
|
||||
var name = user.to_id
|
||||
if (index === 0) {
|
||||
panel.img1 = img
|
||||
panel.name1 = name
|
||||
panel.$store.state.api.backendInteractor.externalProfile(name)
|
||||
.then((externalUser) => {
|
||||
if (!externalUser.error) {
|
||||
panel.$store.commit('addNewUsers', [externalUser])
|
||||
panel.id1 = externalUser.id
|
||||
}
|
||||
})
|
||||
} else if (index === 1) {
|
||||
panel.img2 = img
|
||||
panel.name2 = name
|
||||
panel.$store.state.api.backendInteractor.externalProfile(name)
|
||||
.then((externalUser) => {
|
||||
if (!externalUser.error) {
|
||||
panel.$store.commit('addNewUsers', [externalUser])
|
||||
panel.id2 = externalUser.id
|
||||
}
|
||||
})
|
||||
} else if (index === 2) {
|
||||
panel.img3 = img
|
||||
panel.name3 = name
|
||||
panel.$store.state.api.backendInteractor.externalProfile(name)
|
||||
.then((externalUser) => {
|
||||
if (!externalUser.error) {
|
||||
panel.$store.commit('addNewUsers', [externalUser])
|
||||
panel.id3 = externalUser.id
|
||||
}
|
||||
})
|
||||
}
|
||||
index = index + 1
|
||||
if (index > 2) {
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getWhoToFollow (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 whoToFollowProvider = panel.$store.state.config.whoToFollowProvider
|
||||
var url
|
||||
url = whoToFollowProvider.replace(/{{host}}/g, encodeURIComponent(host))
|
||||
url = url.replace(/{{user}}/g, 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 (reply) {
|
||||
showWhoToFollow(panel, reply, host, user)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const WhoToFollowPanel = {
|
||||
data: () => ({
|
||||
img1: '/images/avi.png',
|
||||
name1: '',
|
||||
id1: 0,
|
||||
img2: '/images/avi.png',
|
||||
name2: '',
|
||||
id2: 0,
|
||||
img3: '/images/avi.png',
|
||||
name3: '',
|
||||
id3: 0
|
||||
}),
|
||||
computed: {
|
||||
user: function () {
|
||||
return this.$store.state.users.currentUser.screen_name
|
||||
},
|
||||
moreUrl: function () {
|
||||
var host = window.location.hostname
|
||||
var user = this.user
|
||||
var whoToFollowLink = this.$store.state.config.whoToFollowLink
|
||||
var url
|
||||
url = whoToFollowLink.replace(/{{host}}/g, encodeURIComponent(host))
|
||||
url = url.replace(/{{user}}/g, encodeURIComponent(user))
|
||||
return url
|
||||
},
|
||||
showWhoToFollowPanel () {
|
||||
return this.$store.state.config.showWhoToFollowPanel
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
user: function (user, oldUser) {
|
||||
if (this.showWhoToFollowPanel) {
|
||||
getWhoToFollow(this)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted:
|
||||
function () {
|
||||
if (this.showWhoToFollowPanel) {
|
||||
getWhoToFollow(this)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default WhoToFollowPanel
|
@ -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"/> <router-link :to="{ name: 'user-profile', params: { id: id1 } }">{{ name1 }}</router-link><br>
|
||||
<img v-bind:src="img2"/> <router-link :to="{ name: 'user-profile', params: { id: id2 } }">{{ name2 }}</router-link><br>
|
||||
<img v-bind:src="img3"/> <router-link :to="{ name: 'user-profile', params: { id: id3 } }">{{ name3 }}</router-link><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>
|
Loading…
Reference in new issue