DiscoverComponent.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <template>
  2. <div class="container">
  3. <section class="mb-5 pb-3 px-2 d-xs-none d-md-block" style="overflow-x: hidden;" v-if="categories.length > 0">
  4. <a class="bg-dark rounded d-inline-flex align-items-end justify-content-center mr-3 box-shadow" style="width:160px;height:100px;" href="/discover/personal">
  5. <p class="text-white font-weight-bold" style="text-shadow: 3px 3px 16px #272634;border-bottom: 2px solid #fff;">For You</p>
  6. </a>
  7. <div v-show="categoryCursor > 5" class="text-dark d-inline-flex align-items-center pr-3" v-on:click="categoryPrev()">
  8. <i class="fas fa-chevron-circle-left fa-lg text-muted"></i>
  9. </div>
  10. <a v-for="(category, index) in categories" :key="index+'_cat_'" class="bg-dark rounded d-inline-flex align-items-end justify-content-center mr-3 box-shadow card-disc" :href="category.url" :style="'width:160px;height:100px;background: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)),url('+category.thumb+');'">
  11. <p class="text-white font-weight-bold" style="text-shadow: 3px 3px 16px #272634;">{{category.name}}</p>
  12. </a>
  13. <div v-show="allCategories.length != categoryCursor" class="text-dark d-flex align-items-center" v-on:click="categoryNext()">
  14. <i class="fas fa-chevron-circle-right fa-lg text-muted"></i>
  15. </div>
  16. </section>
  17. <section class="mb-5 section-explore">
  18. <div class="profile-timeline">
  19. <div class="loader text-center">
  20. <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
  21. </div>
  22. <div class="row d-none">
  23. <div class="col-4 p-0 p-sm-2 p-md-3" v-for="post in posts">
  24. <a class="card info-overlay card-md-border-0" :href="post.url">
  25. <div class="square filter_class">
  26. <div class="square-content" v-bind:style="{ 'background-image': 'url(' + post.thumb + ')' }"></div>
  27. </div>
  28. </a>
  29. </div>
  30. </div>
  31. </div>
  32. </section>
  33. <section class="mb-5">
  34. <p class="lead text-center">To view more posts, check the <a href="/" class="font-weight-bold">home</a> or <a href="/timeline/public" class="font-weight-bold">local</a> timelines.</p>
  35. </section>
  36. </div>
  37. </template>
  38. <style type="text/css" scoped>
  39. .card-disc {
  40. background-size: cover !important;
  41. }
  42. </style>
  43. <script type="text/javascript">
  44. export default {
  45. data() {
  46. return {
  47. people: {},
  48. posts: {},
  49. trending: {},
  50. categories: {},
  51. allCategories: {},
  52. categoryCursor: 5,
  53. }
  54. },
  55. mounted() {
  56. this.fetchData();
  57. this.fetchCategories();
  58. },
  59. methods: {
  60. followUser(id, event) {
  61. axios.post('/i/follow', {
  62. item: id
  63. }).then(res => {
  64. let el = $(event.target);
  65. el.addClass('btn-outline-secondary').removeClass('btn-primary');
  66. el.text('Unfollow');
  67. }).catch(err => {
  68. swal(
  69. 'Whoops! Something went wrong…',
  70. 'An error occurred, please try again later.',
  71. 'error'
  72. );
  73. });
  74. },
  75. fetchData() {
  76. // axios.get('/api/v2/discover/people')
  77. // .then((res) => {
  78. // let data = res.data;
  79. // this.people = data.people;
  80. // if(this.people.length > 1) {
  81. // $('.section-people .loader').hide();
  82. // $('.section-people .row.d-none').removeClass('d-none');
  83. // }
  84. // });
  85. axios.get('/api/v2/discover/posts')
  86. .then((res) => {
  87. let data = res.data;
  88. this.posts = data.posts;
  89. if(this.posts.length > 1) {
  90. $('.section-explore .loader').hide();
  91. $('.section-explore .row.d-none').removeClass('d-none');
  92. }
  93. });
  94. },
  95. fetchCategories() {
  96. axios.get('/api/v2/discover/categories')
  97. .then(res => {
  98. this.allCategories = res.data;
  99. this.categories = _.slice(res.data, 0, 5);
  100. });
  101. },
  102. categoryNext() {
  103. if(this.categoryCursor > this.allCategories.length - 1) {
  104. return;
  105. }
  106. this.categoryCursor++;
  107. let cursor = this.categoryCursor;
  108. let start = cursor - 5;
  109. let end = cursor;
  110. this.categories = _.slice(this.allCategories, start, end);
  111. },
  112. categoryPrev() {
  113. if(this.categoryCursor == 5) {
  114. return;
  115. }
  116. this.categoryCursor--;
  117. let cursor = this.categoryCursor;
  118. let start = cursor - 5;
  119. let end = cursor;
  120. this.categories = _.slice(this.allCategories, start, end);
  121. },
  122. }
  123. }
  124. </script>