StoryTimelineComponent.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <template>
  2. <div>
  3. <div v-if="show" class="card card-body p-0 border mt-4 mb-3 shadow-none">
  4. <div id="storyContainer" :class="[list == true ? 'mt-1 mr-3 mb-0 ml-1':'mx-3 mt-3 mb-0 pb-0']"></div>
  5. </div>
  6. </div>
  7. </template>
  8. <style type="text/css" scoped>
  9. #storyContainer > .story {
  10. margin-right: 3rem;
  11. }
  12. </style>
  13. <script type="text/javascript">
  14. import 'zuck.js/dist/zuck.css';
  15. import 'zuck.js/dist/skins/snapgram.css';
  16. let Zuck = require('zuck.js');
  17. export default {
  18. props: ['list'],
  19. data() {
  20. return {
  21. show: false,
  22. stories: {},
  23. }
  24. },
  25. mounted() {
  26. this.fetchStories();
  27. },
  28. methods: {
  29. fetchStories() {
  30. axios.get('/api/stories/v0/recent')
  31. .then(res => {
  32. let data = res.data;
  33. if(!res.data.length) {
  34. this.show = false;
  35. return;
  36. }
  37. let stories = new Zuck('storyContainer', {
  38. list: this.list == true ? true : false,
  39. stories: data,
  40. localStorage: true,
  41. callbacks: {
  42. onOpen (storyId, callback) {
  43. document.body.style.overflow = "hidden";
  44. callback()
  45. },
  46. onEnd (storyId, callback) {
  47. axios.post('/i/stories/viewed', {
  48. id: storyId
  49. });
  50. callback();
  51. },
  52. onClose (storyId, callback) {
  53. document.body.style.overflow = "auto";
  54. callback();
  55. },
  56. }
  57. });
  58. data.forEach(d => {
  59. let url = '/api/stories/v0/fetch/' + d.pid;
  60. axios.get(url)
  61. .then(res => {
  62. res.data.forEach(item => {
  63. let img = new Image();
  64. img.src = item.src;
  65. stories.addItem(d.id, item);
  66. });
  67. });
  68. });
  69. });
  70. this.show = true;
  71. }
  72. }
  73. }
  74. </script>
  75. <style type="text/css">
  76. #storyContainer .story {
  77. margin-right: 2rem;
  78. width: 100%;
  79. max-width: 60px;
  80. }
  81. .stories.carousel .story > .item-link > .item-preview {
  82. height: 60px;
  83. }
  84. #zuck-modal.with-effects {
  85. width: 100%;
  86. }
  87. .stories.carousel .story > .item-link > .info .name {
  88. font-weight: 500;
  89. font-size: 11px;
  90. }
  91. .stories.carousel .story > .item-link > .info {
  92. }
  93. </style>