Profile.vue 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269
  1. <template>
  2. <div class="w-100 h-100">
  3. <div v-if="isMobile" class="bg-white p-3 border-bottom">
  4. <div class="d-flex justify-content-between align-items-center">
  5. <div @click="goBack" class="cursor-pointer">
  6. <i class="fas fa-chevron-left fa-lg"></i>
  7. </div>
  8. <div class="font-weight-bold">
  9. {{this.profileUsername}}
  10. </div>
  11. <div>
  12. <a class="fas fa-ellipsis-v fa-lg text-muted text-decoration-none" href="#" @click.prevent="visitorMenu"></a>
  13. </div>
  14. </div>
  15. </div>
  16. <div v-if="relationship && relationship.blocking && warning" class="bg-white pt-3 border-bottom">
  17. <div class="container">
  18. <p class="text-center font-weight-bold">You are blocking this account</p>
  19. <p class="text-center font-weight-bold">Click <a href="#" class="cursor-pointer" @click.prevent="warning = false;">here</a> to view profile</p>
  20. </div>
  21. </div>
  22. <div v-if="loading" style="height: 80vh;" class="d-flex justify-content-center align-items-center">
  23. <img src="/img/pixelfed-icon-grey.svg" class="">
  24. </div>
  25. <div v-if="!loading && !warning">
  26. <div v-if="layout == 'metro'" class="container">
  27. <div :class="isMobile ? 'pt-5' : 'pt-5 border-bottom'">
  28. <div class="container px-0">
  29. <div class="row">
  30. <div class="col-12 col-md-4 d-md-flex">
  31. <div class="profile-avatar mx-md-auto">
  32. <!-- MOBILE PROFILE PICTURE -->
  33. <div class="d-block d-md-none mt-n3 mb-3">
  34. <div class="row">
  35. <div class="col-4">
  36. <div v-if="hasStory" class="has-story cursor-pointer shadow-sm" @click="storyRedirect()">
  37. <img :alt="profileUsername + '\'s profile picture'" class="rounded-circle" :src="profile.avatar" width="77px" height="77px">
  38. </div>
  39. <div v-else>
  40. <img :alt="profileUsername + '\'s profile picture'" class="rounded-circle border" :src="profile.avatar" width="77px" height="77px">
  41. </div>
  42. </div>
  43. <div class="col-8">
  44. <div class="d-block d-md-none mt-3 py-2">
  45. <ul class="nav d-flex justify-content-between">
  46. <li class="nav-item">
  47. <div class="font-weight-light">
  48. <span class="text-dark text-center">
  49. <p class="font-weight-bold mb-0">{{formatCount(profile.statuses_count)}}</p>
  50. <p class="text-muted mb-0 small">Posts</p>
  51. </span>
  52. </div>
  53. </li>
  54. <li class="nav-item">
  55. <div v-if="profileSettings.followers.count" class="font-weight-light">
  56. <a class="text-dark cursor-pointer text-center" v-on:click="followersModal()">
  57. <p class="font-weight-bold mb-0">{{formatCount(profile.followers_count)}}</p>
  58. <p class="text-muted mb-0 small">Followers</p>
  59. </a>
  60. </div>
  61. </li>
  62. <li class="nav-item">
  63. <div v-if="profileSettings.following.count" class="font-weight-light">
  64. <a class="text-dark cursor-pointer text-center" v-on:click="followingModal()">
  65. <p class="font-weight-bold mb-0">{{formatCount(profile.following_count)}}</p>
  66. <p class="text-muted mb-0 small">Following</p>
  67. </a>
  68. </div>
  69. </li>
  70. </ul>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. <!-- DESKTOP PROFILE PICTURE -->
  76. <div class="d-none d-md-block pb-3">
  77. <div v-if="hasStory" class="has-story-lg cursor-pointer shadow-sm" @click="storyRedirect()">
  78. <img :alt="profileUsername + '\'s profile picture'" class="rounded-circle box-shadow cursor-pointer" :src="profile.avatar" width="150px" height="150px">
  79. </div>
  80. <div v-else>
  81. <img :alt="profileUsername + '\'s profile picture'" class="rounded-circle box-shadow" :src="profile.avatar" width="150px" height="150px">
  82. </div>
  83. <p v-if="sponsorList.patreon || sponsorList.liberapay || sponsorList.opencollective" class="text-center mt-3">
  84. <button type="button" @click="showSponsorModal" class="btn btn-outline-secondary font-weight-bold py-0">
  85. <i class="fas fa-heart text-danger"></i>
  86. Donate
  87. </button>
  88. </p>
  89. </div>
  90. </div>
  91. </div>
  92. <div class="col-12 col-md-8 d-flex align-items-center">
  93. <div class="profile-details">
  94. <div class="d-none d-md-flex username-bar pb-3 align-items-center">
  95. <span class="font-weight-ultralight h3 mb-0">{{profile.username}}</span>
  96. <span class="pl-1 pb-2 fa-stack" v-if="profile.is_admin" title="Admin Account" data-toggle="tooltip">
  97. <i class="fas fa-certificate fa-lg text-danger fa-stack-1x"></i>
  98. <i class="fas fa-crown text-white fa-sm fa-stack-1x" style="font-size:9px;"></i>
  99. </span>
  100. <span v-if="profile.id != user.id && user.hasOwnProperty('id')">
  101. <span class="pl-4" v-if="relationship.following == true">
  102. <button type="button" class="btn btn-outline-secondary font-weight-bold btn-sm py-1" v-on:click="followProfile" data-toggle="tooltip" title="Unfollow">FOLLOWING</button>
  103. </span>
  104. <span class="pl-4" v-if="!relationship.following">
  105. <button type="button" class="btn btn-primary font-weight-bold btn-sm py-1" v-on:click="followProfile" data-toggle="tooltip" title="Follow">FOLLOW</button>
  106. </span>
  107. </span>
  108. <span class="pl-4" v-if="owner && user.hasOwnProperty('id')">
  109. <a class="btn btn-outline-secondary btn-sm" href="/settings/home" style="font-weight: 600;">Edit Profile</a>
  110. </span>
  111. <span class="pl-4">
  112. <a class="fas fa-ellipsis-h fa-lg text-muted text-decoration-none" href="#" @click.prevent="visitorMenu"></a>
  113. </span>
  114. </div>
  115. <div class="font-size-16px">
  116. <div class="d-none d-md-inline-flex profile-stats pb-3">
  117. <div class="font-weight-light pr-5">
  118. <span class="text-dark">
  119. <span class="font-weight-bold">{{formatCount(profile.statuses_count)}}</span>
  120. Posts
  121. </span>
  122. </div>
  123. <div v-if="profileSettings.followers.count" class="font-weight-light pr-5">
  124. <a class="text-dark cursor-pointer" v-on:click="followersModal()">
  125. <span class="font-weight-bold">{{formatCount(profile.followers_count)}}</span>
  126. Followers
  127. </a>
  128. </div>
  129. <div v-if="profileSettings.following.count" class="font-weight-light">
  130. <a class="text-dark cursor-pointer" v-on:click="followingModal()">
  131. <span class="font-weight-bold">{{formatCount(profile.following_count)}}</span>
  132. Following
  133. </a>
  134. </div>
  135. </div>
  136. <p class="mb-0 d-flex align-items-center">
  137. <span class="font-weight-bold pr-3">{{profile.display_name}}</span>
  138. </p>
  139. <div v-if="profile.note" class="mb-0" v-html="profile.note"></div>
  140. <p v-if="profile.website" class=""><a :href="profile.website" class="profile-website" rel="me external nofollow noopener" target="_blank">{{profile.website}}</a></p>
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147. <div class="d-block d-md-none my-0 pt-3 border-bottom">
  148. <p v-if="user && user.hasOwnProperty('id')" class="pt-3">
  149. <button v-if="owner" class="btn btn-outline-secondary bg-white btn-sm py-1 btn-block text-center font-weight-bold text-dark border border-lighter" @click.prevent="redirect('/settings/home')">Edit Profile</button>
  150. <button v-if="!owner && relationship.following" class="btn btn-outline-secondary bg-white btn-sm py-1 px-5 font-weight-bold text-dark border border-lighter" @click="followProfile">&nbsp;&nbsp; Unfollow &nbsp;&nbsp;</button>
  151. <button v-if="!owner && !relationship.following" class="btn btn-primary btn-sm py-1 px-5 font-weight-bold" @click="followProfile">{{relationship.followed_by ? 'Follow Back' : '&nbsp;&nbsp;&nbsp;&nbsp; Follow &nbsp;&nbsp;&nbsp;&nbsp;'}}</button>
  152. <!-- <button v-if="!owner" class="btn btn-outline-secondary bg-white btn-sm py-1 px-5 font-weight-bold text-dark border border-lighter mx-2">Message</button>
  153. <button v-if="!owner" class="btn btn-outline-secondary bg-white btn-sm py-1 font-weight-bold text-dark border border-lighter"><i class="fas fa-chevron-down fa-sm"></i></button> -->
  154. </p>
  155. </div>
  156. <div class="">
  157. <ul class="nav nav-topbar d-flex justify-content-center border-0">
  158. <li class="nav-item border-top">
  159. <a :class="this.mode == 'grid' ? 'nav-link text-dark' : 'nav-link'" href="#" v-on:click.prevent="switchMode('grid')"><i class="fas fa-th"></i> <span class="d-none d-md-inline-block small pl-1">POSTS</span></a>
  160. </li>
  161. <li class="nav-item px-0 border-top">
  162. <a :class="this.mode == 'collections' ? 'nav-link text-dark' : 'nav-link'" href="#" v-on:click.prevent="switchMode('collections')"><i class="fas fa-images"></i> <span class="d-none d-md-inline-block small pl-1">COLLECTIONS</span></a>
  163. </li>
  164. <li v-if="owner" class="nav-item border-top">
  165. <a :class="this.mode == 'bookmarks' ? 'nav-link text-dark' : 'nav-link'" href="#" v-on:click.prevent="switchMode('bookmarks')"><i class="fas fa-bookmark"></i></a>
  166. </li>
  167. </ul>
  168. </div>
  169. <div class="container px-0">
  170. <div class="profile-timeline mt-md-4">
  171. <div class="row" v-if="mode == 'grid'">
  172. <div class="col-4 p-1 p-md-3" v-for="(s, index) in timeline" :key="'tlob:'+index">
  173. <a class="card info-overlay card-md-border-0" :href="statusUrl(s)" v-once>
  174. <div :class="[s.sensitive ? 'square' : 'square ' + s.media_attachments[0].filter_class]">
  175. <span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
  176. <span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
  177. <span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
  178. <div class="square-content" v-bind:style="previewBackground(s)">
  179. </div>
  180. <div class="info-overlay-text">
  181. <h5 class="text-white m-auto font-weight-bold">
  182. <span>
  183. <span class="far fa-heart fa-lg p-2 d-flex-inline"></span>
  184. <span class="d-flex-inline">{{s.favourites_count}}</span>
  185. </span>
  186. <span>
  187. <span class="fas fa-retweet fa-lg p-2 d-flex-inline"></span>
  188. <span class="d-flex-inline">{{s.reblogs_count}}</span>
  189. </span>
  190. </h5>
  191. </div>
  192. </div>
  193. </a>
  194. </div>
  195. <div v-if="timeline.length == 0" class="col-12">
  196. <div class="py-5 text-center text-muted">
  197. <p><i class="fas fa-camera-retro fa-2x"></i></p>
  198. <p class="h2 font-weight-light pt-3">No posts yet</p>
  199. </div>
  200. </div>
  201. </div>
  202. <div v-if="timeline.length && mode == 'grid'">
  203. <infinite-loading @infinite="infiniteTimeline">
  204. <div slot="no-more"></div>
  205. <div slot="no-results"></div>
  206. </infinite-loading>
  207. </div>
  208. <div v-if="mode == 'bookmarks'">
  209. <div v-if="bookmarksLoading">
  210. <div class="row">
  211. <div class="col-12">
  212. <div class="p-1 p-sm-2 p-md-3 d-flex justify-content-center align-items-center" style="height: 30vh;">
  213. <img src="/img/pixelfed-icon-grey.svg" class="">
  214. </div>
  215. </div>
  216. </div>
  217. </div>
  218. <div v-else>
  219. <div v-if="bookmarks.length" class="row">
  220. <div class="col-4 p-1 p-sm-2 p-md-3" v-for="(s, index) in bookmarks">
  221. <a class="card info-overlay card-md-border-0" :href="s.url">
  222. <div class="square">
  223. <span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
  224. <span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
  225. <span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
  226. <div class="square-content" v-bind:style="previewBackground(s)">
  227. </div>
  228. <div class="info-overlay-text">
  229. <h5 class="text-white m-auto font-weight-bold">
  230. <span>
  231. <span class="far fa-heart fa-lg p-2 d-flex-inline"></span>
  232. <span class="d-flex-inline">{{s.favourites_count}}</span>
  233. </span>
  234. <span>
  235. <span class="fas fa-retweet fa-lg p-2 d-flex-inline"></span>
  236. <span class="d-flex-inline">{{s.reblogs_count}}</span>
  237. </span>
  238. </h5>
  239. </div>
  240. </div>
  241. </a>
  242. </div>
  243. </div>
  244. <div v-else class="col-12">
  245. <div class="py-5 text-center text-muted">
  246. <p><i class="fas fa-bookmark fa-2x"></i></p>
  247. <p class="h2 font-weight-light pt-3">No saved bookmarks</p>
  248. </div>
  249. </div>
  250. </div>
  251. </div>
  252. <div v-if="mode == 'collections'">
  253. <div v-if="collections.length" class="row">
  254. <div class="col-4 p-1 p-sm-2 p-md-3" v-for="(c, index) in collections">
  255. <a class="card info-overlay card-md-border-0" :href="c.url">
  256. <div class="square">
  257. <div class="square-content" v-bind:style="'background-image: url(' + c.thumb + ');'">
  258. </div>
  259. </div>
  260. </a>
  261. </div>
  262. </div>
  263. <div v-else>
  264. <div class="py-5 text-center text-muted">
  265. <p><i class="fas fa-images fa-2x"></i></p>
  266. <p class="h2 font-weight-light pt-3">No collections yet</p>
  267. </div>
  268. </div>
  269. </div>
  270. </div>
  271. </div>
  272. </div>
  273. <div v-if="layout == 'moment'" class="mt-3">
  274. <div :class="momentBackground()" style="width:100%;min-height:274px;">
  275. </div>
  276. <div class="bg-white border-bottom">
  277. <div class="container">
  278. <div class="row">
  279. <div class="col-12 row mx-0">
  280. <div class="col-4 text-left mt-2">
  281. <span v-if="relationship && relationship.followed_by">
  282. <span class="bg-light border border-secondary font-weight-bold small py-1 px-2 text-muted rounded">FOLLOWS YOU</span>
  283. </span>
  284. <span v-if="profile.is_admin">
  285. <span class="bg-light border border-danger font-weight-bold small py-1 px-2 text-danger rounded">ADMIN</span>
  286. </span>
  287. </div>
  288. <div class="col-4 text-center">
  289. <div class="d-block d-md-none">
  290. <img class="rounded-circle box-shadow" :src="profile.avatar" width="110px" height="110px" style="margin-top:-60px; border: 5px solid #fff">
  291. </div>
  292. <div class="d-none d-md-block">
  293. <img class="rounded-circle box-shadow" :src="profile.avatar" width="172px" height="172px" style="margin-top:-90px; border: 5px solid #fff">
  294. </div>
  295. </div>
  296. <div class="col-4 text-right mt-2">
  297. <span class="d-none d-md-inline-block pl-4">
  298. <a :href="'/users/'+profile.username+'.atom'" class="fas fa-rss fa-lg text-muted text-decoration-none"></a>
  299. </span>
  300. <span class="pl-md-4 pl-sm-2" v-if="owner">
  301. <a class="fas fa-cog fa-lg text-muted text-decoration-none" href="/settings/home"></a>
  302. </span>
  303. <span class="pl-md-4 pl-sm-2" v-if="profile.id != user.id && user.hasOwnProperty('id')">
  304. <a class="fas fa-cog fa-lg text-muted text-decoration-none" href="#" @click.prevent="visitorMenu"></a>
  305. </span>
  306. <span v-if="profile.id != user.id && user.hasOwnProperty('id')">
  307. <span class="pl-md-4 pl-sm-2" v-if="relationship.following == true">
  308. <button type="button" class="btn btn-outline-secondary font-weight-bold btn-sm" @click.prevent="followProfile()">Unfollow</button>
  309. </span>
  310. <span class="pl-md-4 pl-sm-2" v-else>
  311. <button type="button" class="btn btn-primary font-weight-bold btn-sm" @click.prevent="followProfile()">Follow</button>
  312. </span>
  313. </span>
  314. </div>
  315. </div>
  316. <div class="col-12 text-center">
  317. <div class="profile-details my-3">
  318. <p class="font-weight-ultralight h2 text-center">{{profile.username}}</p>
  319. <div v-if="profile.note" class="text-center text-muted p-3" v-html="profile.note"></div>
  320. <div class="pb-3 text-muted text-center">
  321. <a class="text-lighter" :href="profile.url">
  322. <span class="font-weight-bold">{{formatCount(profile.statuses_count)}}</span>
  323. Posts
  324. </a>
  325. <a v-if="profileSettings.followers.count" class="text-lighter cursor-pointer px-3" v-on:click="followersModal()">
  326. <span class="font-weight-bold">{{formatCount(profile.followers_count)}}</span>
  327. Followers
  328. </a>
  329. <a v-if="profileSettings.following.count" class="text-lighter cursor-pointer" v-on:click="followingModal()">
  330. <span class="font-weight-bold">{{formatCount(profile.following_count)}}</span>
  331. Following
  332. </a>
  333. </div>
  334. </div>
  335. </div>
  336. </div>
  337. </div>
  338. </div>
  339. <div class="container-fluid">
  340. <div class="profile-timeline mt-md-4">
  341. <div class="" v-if="mode == 'grid'">
  342. <masonry
  343. :cols="{default: 3, 700: 2, 400: 1}"
  344. :gutter="{default: '5px'}"
  345. >
  346. <div class="p-1" v-for="(s, index) in timeline">
  347. <a :class="[s.sensitive ? 'card info-overlay card-md-border-0' : s.media_attachments[0].filter_class + ' card info-overlay card-md-border-0']" :href="statusUrl(s)">
  348. <img :src="previewUrl(s)" class="img-fluid w-100">
  349. </a>
  350. </div>
  351. </masonry>
  352. </div>
  353. <div v-if="timeline.length">
  354. <infinite-loading @infinite="infiniteTimeline">
  355. <div slot="no-more"></div>
  356. <div slot="no-results"></div>
  357. </infinite-loading>
  358. </div>
  359. </div>
  360. </div>
  361. </div>
  362. </div>
  363. <b-modal
  364. v-if="profile && following"
  365. ref="followingModal"
  366. id="following-modal"
  367. hide-footer
  368. centered
  369. title="Following"
  370. body-class="list-group-flush py-3 px-0"
  371. dialog-class="follow-modal">
  372. <div v-if="!loading" class="list-group" style="min-height: 60vh;">
  373. <div v-if="owner == true" class="list-group-item border-0 pt-0 px-0 mt-n2 mb-3">
  374. <span class="d-flex px-4 pb-0 align-items-center">
  375. <i class="fas fa-search text-lighter"></i>
  376. <input type="text" class="form-control border-0 shadow-0 no-focus" placeholder="Search Following..." v-model="followingModalSearch" v-on:keyup="followingModalSearchHandler">
  377. </span>
  378. </div>
  379. <div v-if="owner == true" class="btn-group rounded-0 mt-n3 mb-3 border-top" role="group" aria-label="Following">
  380. <!-- <button type="button" :class="[followingModalTab == 'following' ? ' btn btn-light py-3 rounded-0 font-weight-bold modal-tab-active' : 'btn btn-light py-3 rounded-0 font-weight-bold']" style="font-size: 12px;">FOLLOWING</button> -->
  381. <!-- <button type="button" class="btn btn-light py-3 rounded-0 text-muted font-weight-bold" style="font-size: 12px;">MUTED</button>
  382. <button type="button" class="btn btn-light py-3 rounded-0 text-muted font-weight-bold" style="font-size: 12px;">BLOCKED</button> -->
  383. </div>
  384. <div v-else class="btn-group rounded-0 mt-n3 mb-3" role="group" aria-label="Following">
  385. <!-- <button type="button" class="btn btn-light py-3 rounded-0 border-primary border-left-0 border-right-0 border-top-0 font-weight-bold" style="font-size: 12px;" @click="followingModalTab = 'following'">FOLLOWING</button>
  386. <button type="button" class="btn btn-light py-3 rounded-0 text-muted font-weight-bold" style="font-size: 12px;" @click="followingModalTab = 'mutual'">MUTUAL</button>
  387. <button type="button" class="btn btn-light py-3 rounded-0 text-muted font-weight-bold" style="font-size: 12px;" @click="followingModalTab = 'blocked'">BLOCKED</button> -->
  388. </div>
  389. <div class="list-group-item border-0 py-1" v-for="(user, index) in following" :key="'following_'+index">
  390. <div class="media">
  391. <a :href="user.url">
  392. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy">
  393. </a>
  394. <div class="media-body text-truncate">
  395. <p class="mb-0" style="font-size: 14px">
  396. <a :href="user.url" class="font-weight-bold text-dark">
  397. {{user.username}}
  398. </a>
  399. </p>
  400. <p v-if="!user.local" class="text-muted mb-0 text-truncate mr-3" style="font-size: 14px" :title="user.acct" data-toggle="dropdown" data-placement="bottom">
  401. <span class="font-weight-bold">{{user.acct.split('@')[0]}}</span><span class="text-lighter">&commat;{{user.acct.split('@')[1]}}</span>
  402. </p>
  403. <p v-else class="text-muted mb-0 text-truncate" style="font-size: 14px">
  404. {{user.display_name}}
  405. </p>
  406. </div>
  407. <div v-if="owner">
  408. <a class="btn btn-outline-dark btn-sm font-weight-bold" href="#" @click.prevent="followModalAction(user.id, index, 'following')">Following</a>
  409. </div>
  410. </div>
  411. </div>
  412. <div v-if="followingModalSearch && following.length == 0" class="list-group-item border-0">
  413. <div class="list-group-item border-0 pt-5">
  414. <p class="p-3 text-center mb-0 lead">No Results Found</p>
  415. </div>
  416. </div>
  417. <div v-if="following.length > 0 && followingMore" class="list-group-item text-center" v-on:click="followingLoadMore()">
  418. <p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
  419. </div>
  420. </div>
  421. </b-modal>
  422. <b-modal ref="followerModal"
  423. id="follower-modal"
  424. hide-footer
  425. centered
  426. title="Followers"
  427. body-class="list-group-flush py-3 px-0"
  428. dialog-class="follow-modal"
  429. >
  430. <div class="list-group">
  431. <div class="list-group-item border-0 py-1" v-for="(user, index) in followers" :key="'follower_'+index">
  432. <div class="media mb-0">
  433. <a :href="user.url">
  434. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" height="30px" loading="lazy">
  435. </a>
  436. <div class="media-body mb-0">
  437. <p class="mb-0" style="font-size: 14px">
  438. <a :href="user.url" class="font-weight-bold text-dark">
  439. {{user.username}}
  440. </a>
  441. </p>
  442. <p class="text-secondary mb-0" style="font-size: 13px">
  443. {{user.display_name}}
  444. </p>
  445. </div>
  446. <!-- <button class="btn btn-primary font-weight-bold btn-sm py-1">FOLLOW</button> -->
  447. </div>
  448. </div>
  449. <div v-if="followerMore" class="list-group-item text-center" v-on:click="followersLoadMore()">
  450. <p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
  451. </div>
  452. </div>
  453. </b-modal>
  454. <b-modal ref="visitorContextMenu"
  455. id="visitor-context-menu"
  456. hide-footer
  457. hide-header
  458. centered
  459. size="sm"
  460. body-class="list-group-flush p-0">
  461. <div class="list-group" v-if="relationship">
  462. <div class="list-group-item cursor-pointer text-center rounded text-dark" @click="copyProfileLink">
  463. Copy Link
  464. </div>
  465. <div v-if="profile.locked == false" class="list-group-item cursor-pointer text-center rounded text-dark" @click="showEmbedProfileModal">
  466. Embed
  467. </div>
  468. <div v-if="user && !owner && !relationship.following" class="list-group-item cursor-pointer text-center rounded text-dark" @click="followProfile">
  469. Follow
  470. </div>
  471. <div v-if="user && !owner && relationship.following" class="list-group-item cursor-pointer text-center rounded" @click="followProfile">
  472. Unfollow
  473. </div>
  474. <div v-if="user && !owner && !relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="muteProfile">
  475. Mute
  476. </div>
  477. <div v-if="user && !owner && relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="unmuteProfile">
  478. Unmute
  479. </div>
  480. <div v-if="user && !owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="reportProfile">
  481. Report User
  482. </div>
  483. <div v-if="user && !owner && !relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="blockProfile">
  484. Block
  485. </div>
  486. <div v-if="user && !owner && relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="unblockProfile">
  487. Unblock
  488. </div>
  489. <div v-if="user && owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="redirect('/settings/home')">
  490. Settings
  491. </div>
  492. <div class="list-group-item cursor-pointer text-center rounded text-muted" @click="$refs.visitorContextMenu.hide()">
  493. Close
  494. </div>
  495. </div>
  496. </b-modal>
  497. <b-modal ref="sponsorModal"
  498. id="sponsor-modal"
  499. hide-footer
  500. :title="'Sponsor ' + profileUsername"
  501. centered
  502. size="md"
  503. body-class="px-5">
  504. <div>
  505. <p class="font-weight-bold">External Links</p>
  506. <p v-if="sponsorList.patreon" class="pt-2">
  507. <a :href="'https://' + sponsorList.patreon" rel="nofollow" class="font-weight-bold">{{sponsorList.patreon}}</a>
  508. </p>
  509. <p v-if="sponsorList.liberapay" class="pt-2">
  510. <a :href="'https://' + sponsorList.liberapay" rel="nofollow" class="font-weight-bold">{{sponsorList.liberapay}}</a>
  511. </p>
  512. <p v-if="sponsorList.opencollective" class="pt-2">
  513. <a :href="'https://' + sponsorList.opencollective" rel="nofollow" class="font-weight-bold">{{sponsorList.opencollective}}</a>
  514. </p>
  515. </div>
  516. </b-modal>
  517. <b-modal ref="embedModal"
  518. id="ctx-embed-modal"
  519. hide-header
  520. hide-footer
  521. centered
  522. rounded
  523. size="md"
  524. body-class="p-2 rounded">
  525. <div>
  526. <textarea class="form-control disabled text-monospace" rows="6" style="overflow-y:hidden;border: 1px solid #efefef; font-size: 12px; line-height: 18px; margin: 0 0 7px;resize:none;" v-model="ctxEmbedPayload" disabled=""></textarea>
  527. <hr>
  528. <button :class="copiedEmbed ? 'btn btn-primary btn-block btn-sm py-1 font-weight-bold disabed': 'btn btn-primary btn-block btn-sm py-1 font-weight-bold'" @click="ctxCopyEmbed" :disabled="copiedEmbed">{{copiedEmbed ? 'Embed Code Copied!' : 'Copy Embed Code'}}</button>
  529. <p class="mb-0 px-2 small text-muted">By using this embed, you agree to our <a href="/site/terms">Terms of Use</a></p>
  530. </div>
  531. </b-modal>
  532. </div>
  533. </template>
  534. <style type="text/css" scoped>
  535. .o-square {
  536. max-width: 320px;
  537. }
  538. .o-portrait {
  539. max-width: 320px;
  540. }
  541. .o-landscape {
  542. max-width: 320px;
  543. }
  544. .post-icon {
  545. color: #fff;
  546. position:relative;
  547. margin-top: 10px;
  548. z-index: 9;
  549. opacity: 0.6;
  550. text-shadow: 3px 3px 16px #272634;
  551. }
  552. .font-size-16px {
  553. font-size: 16px;
  554. }
  555. .profile-website {
  556. color: #003569;
  557. text-decoration: none;
  558. font-weight: 600;
  559. }
  560. .nav-topbar .nav-link {
  561. color: #999;
  562. }
  563. .nav-topbar .nav-link .small {
  564. font-weight: 600;
  565. }
  566. .has-story {
  567. width: 84px;
  568. height: 84px;
  569. border-radius: 50%;
  570. padding: 4px;
  571. background: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
  572. }
  573. .has-story img {
  574. width: 76px;
  575. height: 76px;
  576. border-radius: 50%;
  577. padding: 6px;
  578. background: #fff;
  579. }
  580. .has-story-lg {
  581. width: 159px;
  582. height: 159px;
  583. border-radius: 50%;
  584. padding: 4px;
  585. background: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
  586. }
  587. .has-story-lg img {
  588. width: 150px;
  589. height: 150px;
  590. border-radius: 50%;
  591. padding: 6px;
  592. background:#fff;
  593. }
  594. .no-focus {
  595. border-color: none;
  596. outline: 0;
  597. box-shadow: none;
  598. }
  599. .modal-tab-active {
  600. border-bottom: 1px solid #08d;
  601. }
  602. </style>
  603. <script type="text/javascript">
  604. import VueMasonry from 'vue-masonry-css'
  605. export default {
  606. props: [
  607. 'profile-id',
  608. 'profile-layout',
  609. 'profile-settings',
  610. 'profile-username'
  611. ],
  612. data() {
  613. return {
  614. ids: [],
  615. profile: {},
  616. user: false,
  617. timeline: [],
  618. timelinePage: 2,
  619. min_id: 0,
  620. max_id: 0,
  621. loading: true,
  622. owner: false,
  623. layout: this.profileLayout,
  624. mode: 'grid',
  625. modes: ['grid', 'collections', 'bookmarks'],
  626. modalStatus: false,
  627. relationship: {},
  628. followers: [],
  629. followerCursor: 1,
  630. followerMore: true,
  631. following: [],
  632. followingCursor: 1,
  633. followingMore: true,
  634. warning: false,
  635. sponsorList: [],
  636. bookmarks: [],
  637. bookmarksPage: 2,
  638. collections: [],
  639. collectionsPage: 2,
  640. isMobile: false,
  641. ctxEmbedPayload: null,
  642. copiedEmbed: false,
  643. hasStory: null,
  644. followingModalSearch: null,
  645. followingModalSearchCache: null,
  646. followingModalTab: 'following',
  647. bookmarksLoading: true,
  648. }
  649. },
  650. beforeMount() {
  651. this.fetchRelationships();
  652. this.fetchProfile();
  653. let u = new URLSearchParams(window.location.search);
  654. let forceMetro = localStorage.getItem('pf_metro_ui.exp.forceMetro') == 'true';
  655. if(forceMetro == true || u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') {
  656. this.layout = 'metro';
  657. }
  658. if(u.has('ui') && u.get('ui') == 'moment' && this.layout != 'moment') {
  659. Vue.use(VueMasonry);
  660. this.layout = 'moment';
  661. }
  662. if(this.layout == 'metro' && u.has('t')) {
  663. if(this.modes.indexOf(u.get('t')) != -1) {
  664. if(u.get('t') == 'bookmarks') {
  665. return;
  666. }
  667. this.mode = u.get('t');
  668. }
  669. }
  670. },
  671. mounted() {
  672. let u = new URLSearchParams(window.location.search);
  673. if(u.has('md') && u.get('md') == 'followers') {
  674. this.followersModal();
  675. }
  676. if(u.has('md') && u.get('md') == 'following') {
  677. this.followingModal();
  678. }
  679. if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
  680. axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
  681. this.user = res.data;
  682. if(res.data.id == this.profileId || this.relationship.following == true) {
  683. axios.get('/api/stories/v0/exists/' + this.profileId)
  684. .then(res => {
  685. this.hasStory = res.data == true;
  686. })
  687. }
  688. });
  689. }
  690. if(window.outerWidth < 576) {
  691. $('nav.navbar').hide();
  692. this.isMobile = true;
  693. }
  694. },
  695. updated() {
  696. $('[data-toggle="tooltip"]').tooltip();
  697. },
  698. methods: {
  699. fetchProfile() {
  700. axios.get('/api/pixelfed/v1/accounts/' + this.profileId).then(res => {
  701. this.profile = res.data;
  702. }).then(res => {
  703. this.fetchPosts();
  704. });
  705. },
  706. fetchPosts() {
  707. let apiUrl = '/api/pixelfed/v1/accounts/' + this.profileId + '/statuses';
  708. axios.get(apiUrl, {
  709. params: {
  710. only_media: true,
  711. min_id: 1,
  712. }
  713. })
  714. .then(res => {
  715. let data = res.data.filter(status => status.media_attachments.length > 0);
  716. let ids = data.map(status => status.id);
  717. this.ids = ids;
  718. this.min_id = Math.max(...ids);
  719. this.max_id = Math.min(...ids);
  720. this.modalStatus = _.first(res.data);
  721. this.timeline = data;
  722. this.ownerCheck();
  723. this.loading = false;
  724. //this.loadSponsor();
  725. }).catch(err => {
  726. swal('Oops, something went wrong',
  727. 'Please release the page.',
  728. 'error');
  729. });
  730. },
  731. ownerCheck() {
  732. if($('body').hasClass('loggedIn') == false) {
  733. this.owner = false;
  734. return;
  735. }
  736. this.owner = this.profile.id === this.user.id;
  737. },
  738. infiniteTimeline($state) {
  739. if(this.loading || this.timeline.length < 9) {
  740. $state.complete();
  741. return;
  742. }
  743. let apiUrl = '/api/pixelfed/v1/accounts/' + this.profileId + '/statuses';
  744. axios.get(apiUrl, {
  745. params: {
  746. only_media: true,
  747. max_id: this.max_id
  748. },
  749. }).then(res => {
  750. if (res.data.length && this.loading == false) {
  751. let data = res.data;
  752. let self = this;
  753. data.forEach(d => {
  754. if(self.ids.indexOf(d.id) == -1) {
  755. self.timeline.push(d);
  756. self.ids.push(d.id);
  757. }
  758. });
  759. let max = Math.min(...this.ids);
  760. if(max == this.max_id) {
  761. $state.complete();
  762. return;
  763. }
  764. this.min_id = Math.max(...this.ids);
  765. this.max_id = max;
  766. $state.loaded();
  767. this.loading = false;
  768. } else {
  769. $state.complete();
  770. }
  771. });
  772. },
  773. previewUrl(status) {
  774. return status.sensitive ? '/storage/no-preview.png?v=' + new Date().getTime() : status.media_attachments[0].preview_url;
  775. },
  776. previewBackground(status) {
  777. let preview = this.previewUrl(status);
  778. return 'background-image: url(' + preview + ');';
  779. },
  780. switchMode(mode) {
  781. this.mode = _.indexOf(this.modes, mode) ? mode : 'grid';
  782. if(this.mode == 'bookmarks' && this.bookmarks.length == 0) {
  783. axios.get('/api/local/bookmarks')
  784. .then(res => {
  785. this.bookmarks = res.data;
  786. this.bookmarksLoading = false;
  787. });
  788. }
  789. if(this.mode == 'collections' && this.collections.length == 0) {
  790. axios.get('/api/local/profile/collections/' + this.profileId)
  791. .then(res => {
  792. this.collections = res.data
  793. });
  794. }
  795. },
  796. reportProfile() {
  797. let id = this.profile.id;
  798. window.location.href = '/i/report?type=user&id=' + id;
  799. },
  800. reportUrl(status) {
  801. let type = status.in_reply_to ? 'comment' : 'post';
  802. let id = status.id;
  803. return '/i/report?type=' + type + '&id=' + id;
  804. },
  805. commentFocus(status, $event) {
  806. let el = event.target;
  807. let card = el.parentElement.parentElement.parentElement;
  808. let comments = card.getElementsByClassName('comments')[0];
  809. if(comments.children.length == 0) {
  810. comments.classList.add('mb-2');
  811. this.fetchStatusComments(status, card);
  812. }
  813. let footer = card.querySelectorAll('.card-footer')[0];
  814. let input = card.querySelectorAll('.status-reply-input')[0];
  815. if(footer.classList.contains('d-none') == true) {
  816. footer.classList.remove('d-none');
  817. input.focus();
  818. } else {
  819. footer.classList.add('d-none');
  820. input.blur();
  821. }
  822. },
  823. likeStatus(status, $event) {
  824. if($('body').hasClass('loggedIn') == false) {
  825. return;
  826. }
  827. axios.post('/i/like', {
  828. item: status.id
  829. }).then(res => {
  830. status.favourites_count = res.data.count;
  831. if(status.favourited == true) {
  832. status.favourited = false;
  833. } else {
  834. status.favourited = true;
  835. }
  836. }).catch(err => {
  837. swal('Error', 'Something went wrong, please try again later.', 'error');
  838. });
  839. },
  840. shareStatus(status, $event) {
  841. if($('body').hasClass('loggedIn') == false) {
  842. return;
  843. }
  844. axios.post('/i/share', {
  845. item: status.id
  846. }).then(res => {
  847. status.reblogs_count = res.data.count;
  848. if(status.reblogged == true) {
  849. status.reblogged = false;
  850. } else {
  851. status.reblogged = true;
  852. }
  853. }).catch(err => {
  854. swal('Error', 'Something went wrong, please try again later.', 'error');
  855. });
  856. },
  857. timestampFormat(timestamp) {
  858. let ts = new Date(timestamp);
  859. return ts.toDateString() + ' ' + ts.toLocaleTimeString();
  860. },
  861. editUrl(status) {
  862. return status.url + '/edit';
  863. },
  864. redirect(url) {
  865. window.location.href = url;
  866. return;
  867. },
  868. replyUrl(status) {
  869. let username = this.profile.username;
  870. let id = status.account.id == this.profile.id ? status.id : status.in_reply_to_id;
  871. return '/p/' + username + '/' + id;
  872. },
  873. mentionUrl(status) {
  874. let username = status.account.username;
  875. let id = status.id;
  876. return '/p/' + username + '/' + id;
  877. },
  878. statusOwner(status) {
  879. let sid = status.account.id;
  880. let uid = this.profile.id;
  881. if(sid == uid) {
  882. return true;
  883. } else {
  884. return false;
  885. }
  886. },
  887. fetchRelationships() {
  888. if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == false) {
  889. return;
  890. }
  891. axios.get('/api/pixelfed/v1/accounts/relationships', {
  892. params: {
  893. 'id[]': this.profileId
  894. }
  895. }).then(res => {
  896. if(res.data.length) {
  897. this.relationship = res.data[0];
  898. if(res.data[0].blocking == true) {
  899. this.warning = true;
  900. }
  901. }
  902. });
  903. },
  904. muteProfile(status = null) {
  905. if($('body').hasClass('loggedIn') == false) {
  906. return;
  907. }
  908. let id = this.profileId;
  909. axios.post('/i/mute', {
  910. type: 'user',
  911. item: id
  912. }).then(res => {
  913. this.fetchRelationships();
  914. this.$refs.visitorContextMenu.hide();
  915. swal('Success', 'You have successfully muted ' + this.profile.acct, 'success');
  916. }).catch(err => {
  917. swal('Error', 'Something went wrong. Please try again later.', 'error');
  918. });
  919. },
  920. unmuteProfile(status = null) {
  921. if($('body').hasClass('loggedIn') == false) {
  922. return;
  923. }
  924. let id = this.profileId;
  925. axios.post('/i/unmute', {
  926. type: 'user',
  927. item: id
  928. }).then(res => {
  929. this.fetchRelationships();
  930. this.$refs.visitorContextMenu.hide();
  931. swal('Success', 'You have successfully unmuted ' + this.profile.acct, 'success');
  932. }).catch(err => {
  933. swal('Error', 'Something went wrong. Please try again later.', 'error');
  934. });
  935. },
  936. blockProfile(status = null) {
  937. if($('body').hasClass('loggedIn') == false) {
  938. return;
  939. }
  940. let id = this.profileId;
  941. axios.post('/i/block', {
  942. type: 'user',
  943. item: id
  944. }).then(res => {
  945. this.warning = true;
  946. this.fetchRelationships();
  947. this.$refs.visitorContextMenu.hide();
  948. swal('Success', 'You have successfully blocked ' + this.profile.acct, 'success');
  949. }).catch(err => {
  950. swal('Error', 'Something went wrong. Please try again later.', 'error');
  951. });
  952. },
  953. unblockProfile(status = null) {
  954. if($('body').hasClass('loggedIn') == false) {
  955. return;
  956. }
  957. let id = this.profileId;
  958. axios.post('/i/unblock', {
  959. type: 'user',
  960. item: id
  961. }).then(res => {
  962. this.fetchRelationships();
  963. this.$refs.visitorContextMenu.hide();
  964. swal('Success', 'You have successfully unblocked ' + this.profile.acct, 'success');
  965. }).catch(err => {
  966. swal('Error', 'Something went wrong. Please try again later.', 'error');
  967. });
  968. },
  969. deletePost(status, index) {
  970. if($('body').hasClass('loggedIn') == false || status.account.id !== this.profile.id) {
  971. return;
  972. }
  973. axios.post('/i/delete', {
  974. type: 'status',
  975. item: status.id
  976. }).then(res => {
  977. this.timeline.splice(index,1);
  978. swal('Success', 'You have successfully deleted this post', 'success');
  979. }).catch(err => {
  980. swal('Error', 'Something went wrong. Please try again later.', 'error');
  981. });
  982. },
  983. followProfile() {
  984. if($('body').hasClass('loggedIn') == false) {
  985. return;
  986. }
  987. axios.post('/i/follow', {
  988. item: this.profileId
  989. }).then(res => {
  990. this.$refs.visitorContextMenu.hide();
  991. if(this.relationship.following) {
  992. this.profile.followers_count--;
  993. if(this.profile.locked == true) {
  994. window.location.href = '/';
  995. }
  996. } else {
  997. this.profile.followers_count++;
  998. }
  999. this.relationship.following = !this.relationship.following;
  1000. }).catch(err => {
  1001. if(err.response.data.message) {
  1002. swal('Error', err.response.data.message, 'error');
  1003. }
  1004. });
  1005. },
  1006. followingModal() {
  1007. if($('body').hasClass('loggedIn') == false) {
  1008. window.location.href = encodeURI('/login?next=/' + this.profileUsername + '/');
  1009. return;
  1010. }
  1011. if(this.profileSettings.following.list == false) {
  1012. return;
  1013. }
  1014. if(this.followingCursor > 1) {
  1015. this.$refs.followingModal.show();
  1016. return;
  1017. } else {
  1018. axios.get('/api/pixelfed/v1/accounts/'+this.profileId+'/following', {
  1019. params: {
  1020. page: this.followingCursor
  1021. }
  1022. })
  1023. .then(res => {
  1024. this.following = res.data;
  1025. this.followingModalSearchCache = res.data;
  1026. this.followingCursor++;
  1027. if(res.data.length < 10) {
  1028. this.followingMore = false;
  1029. }
  1030. });
  1031. this.$refs.followingModal.show();
  1032. return;
  1033. }
  1034. },
  1035. followersModal() {
  1036. if($('body').hasClass('loggedIn') == false) {
  1037. window.location.href = encodeURI('/login?next=/' + this.profileUsername + '/');
  1038. return;
  1039. }
  1040. if(this.profileSettings.followers.list == false) {
  1041. return;
  1042. }
  1043. if(this.followerCursor > 1) {
  1044. this.$refs.followerModal.show();
  1045. return;
  1046. } else {
  1047. axios.get('/api/pixelfed/v1/accounts/'+this.profileId+'/followers', {
  1048. params: {
  1049. page: this.followerCursor
  1050. }
  1051. })
  1052. .then(res => {
  1053. this.followers.push(...res.data);
  1054. this.followerCursor++;
  1055. if(res.data.length < 10) {
  1056. this.followerMore = false;
  1057. }
  1058. })
  1059. this.$refs.followerModal.show();
  1060. return;
  1061. }
  1062. },
  1063. followingLoadMore() {
  1064. if($('body').hasClass('loggedIn') == false) {
  1065. window.location.href = encodeURI('/login?next=/' + this.profile.username + '/');
  1066. return;
  1067. }
  1068. axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/following', {
  1069. params: {
  1070. page: this.followingCursor,
  1071. fbu: this.followingModalSearch
  1072. }
  1073. })
  1074. .then(res => {
  1075. if(res.data.length > 0) {
  1076. this.following.push(...res.data);
  1077. this.followingCursor++;
  1078. this.followingModalSearchCache = this.following;
  1079. }
  1080. if(res.data.length < 10) {
  1081. this.followingModalSearchCache = this.following;
  1082. this.followingMore = false;
  1083. }
  1084. });
  1085. },
  1086. followersLoadMore() {
  1087. if($('body').hasClass('loggedIn') == false) {
  1088. return;
  1089. }
  1090. axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/followers', {
  1091. params: {
  1092. page: this.followerCursor
  1093. }
  1094. })
  1095. .then(res => {
  1096. if(res.data.length > 0) {
  1097. this.followers.push(...res.data);
  1098. this.followerCursor++;
  1099. }
  1100. if(res.data.length < 10) {
  1101. this.followerMore = false;
  1102. }
  1103. });
  1104. },
  1105. visitorMenu() {
  1106. this.$refs.visitorContextMenu.show();
  1107. },
  1108. followModalAction(id, index, type = 'following') {
  1109. axios.post('/i/follow', {
  1110. item: id
  1111. }).then(res => {
  1112. if(type == 'following') {
  1113. this.following.splice(index, 1);
  1114. this.profile.following_count--;
  1115. }
  1116. }).catch(err => {
  1117. if(err.response.data.message) {
  1118. swal('Error', err.response.data.message, 'error');
  1119. }
  1120. });
  1121. },
  1122. momentBackground() {
  1123. let c = 'w-100 h-100 mt-n3 ';
  1124. if(this.profile.header_bg) {
  1125. c += this.profile.header_bg == 'default' ? 'bg-pixelfed' : 'bg-moment-' + this.profile.header_bg;
  1126. } else {
  1127. c += 'bg-pixelfed';
  1128. }
  1129. return c;
  1130. },
  1131. loadSponsor() {
  1132. axios.get('/api/local/profile/sponsor/' + this.profileId)
  1133. .then(res => {
  1134. this.sponsorList = res.data;
  1135. });
  1136. },
  1137. showSponsorModal() {
  1138. this.$refs.sponsorModal.show();
  1139. },
  1140. goBack() {
  1141. if(window.history.length > 2) {
  1142. window.history.back();
  1143. return;
  1144. } else {
  1145. window.location.href = '/';
  1146. return;
  1147. }
  1148. },
  1149. copyProfileLink() {
  1150. navigator.clipboard.writeText(window.location.href);
  1151. this.$refs.visitorContextMenu.hide();
  1152. },
  1153. formatCount(count) {
  1154. return App.util.format.count(count);
  1155. },
  1156. statusUrl(status) {
  1157. return status.url;
  1158. if(status.local == true) {
  1159. return status.url;
  1160. }
  1161. return '/i/web/post/_/' + status.account.id + '/' + status.id;
  1162. },
  1163. profileUrl(status) {
  1164. return status.url;
  1165. if(status.local == true) {
  1166. return status.account.url;
  1167. }
  1168. return '/i/web/profile/_/' + status.account.id;
  1169. },
  1170. showEmbedProfileModal() {
  1171. this.ctxEmbedPayload = window.App.util.embed.profile(this.profile.url);
  1172. this.$refs.visitorContextMenu.hide();
  1173. this.$refs.embedModal.show();
  1174. },
  1175. ctxCopyEmbed() {
  1176. navigator.clipboard.writeText(this.ctxEmbedPayload);
  1177. this.$refs.embedModal.hide();
  1178. this.$refs.visitorContextMenu.hide();
  1179. },
  1180. storyRedirect() {
  1181. window.location.href = '/stories/' + this.profileUsername;
  1182. },
  1183. followingModalSearchHandler() {
  1184. let self = this;
  1185. let q = this.followingModalSearch;
  1186. if(q.length == 0) {
  1187. this.following = this.followingModalSearchCache;
  1188. this.followingModalSearch = null;
  1189. }
  1190. if(q.length > 0) {
  1191. let url = '/api/pixelfed/v1/accounts/' +
  1192. self.profileId + '/following?page=1&fbu=' +
  1193. q;
  1194. axios.get(url).then(res => {
  1195. this.following = res.data;
  1196. }).catch(err => {
  1197. self.following = self.followingModalSearchCache;
  1198. self.followingModalSearch = null;
  1199. });
  1200. }
  1201. }
  1202. }
  1203. }
  1204. </script>