aiden
/
pixelfed
mirror of https://github.com/pixelfed/pixelfed
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixes #581 #584 #566

Browse Source
pull/590/head
Daniel Supernault 7 years ago
parent e3e2f902c1
commit b1ca105cb4
No known key found for this signature in database
GPG Key ID: 0DEF1C662C9033F7
4 changed files with 93 additions and 141 deletions
Show Stats Download Patch File Download Diff File

2
public/js/components.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/mix-manifest.json
Unescape Escape View File

@ -1,5 +1,5 @@
{
"/js/components.js": "/js/components.js?id=b5ec6a460ae105e0f0ce",
"/js/components.js": "/js/components.js?id=40990e47ee8a18848a41",
"/js/app.js": "/js/app.js?id=763d01bb175be69c8ad3",
"/css/app.css": "/css/app.css?id=0f11643b1635ebda5e1b",
"/js/timeline.js": "/js/timeline.js?id=415bfde862ab8c5b4548",

11
resources/assets/js/components/PostComments.vue
Unescape Escape View File

@ -16,7 +16,7 @@
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>
<div class="postCommentsContainer d-none">
<p class="mb-1 text-center load-more-link"><a href="#" class="text-muted" v-on:click="loadMore">Load more comments</a></p>
<p class="mb-1 text-center load-more-link d-none"><a href="#" class="text-muted" v-on:click="loadMore">Load more comments</a></p>
<div class="comments" data-min-id="0" data-max-id="0">
<p class="mb-1" v-for="(comment, index) in results" :data-id="comment.id" v-bind:key="comment.id">
<span class="d-flex justify-content-between align-items-center">
@ -27,7 +27,7 @@
<span class="comment-text" v-html="comment.content" style="overflow: hidden;"></span>
</div>
</span>
<b-dropdown :id="comment.uri" variant="link" no-caret class="float-right">
<b-dropdown :id="comment.uri" variant="link" no-caret right class="float-right">
<template slot="button-content">
<i class="fas fa-ellipsis-v text-muted"></i><span class="sr-only">Options</span>
</template>
@ -66,7 +66,7 @@ export default {
},
methods: {
embed(e) {
pixelfed.embed.build(e);
//pixelfed.embed.build(e);
},
deleteComment(id, i) {
axios.post('/i/delete', {
@ -95,6 +95,9 @@ export default {
let self = this;
this.results = response.data.data;
this.pagination = response.data.meta.pagination;
if(this.results.length > 0) {
$('.load-more-link').removeClass('d-none');
}
$('.postCommentsLoader').addClass('d-none');
$('.postCommentsContainer').removeClass('d-none');
}).catch(error => {
@ -103,7 +106,6 @@ export default {
.attr('style','width:100%')
.addClass('pt-4 font-weight-bold text-muted')
.text('An error occured, cannot fetch comments. Please try again later.');
console.log(error);
} else {
switch(error.response.status) {
case 401:
@ -120,7 +122,6 @@ export default {
.text('An error occured, cannot fetch comments. Please try again later.');
break;
}
console.log(error.response.status);
}
});
},

219
resources/assets/js/components/PostComponent.vue
Unescape Escape View File

@ -1,113 +1,5 @@
<style>
.carousel {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
margin: 0 auto;
}
.carousel:hover .slide:after,
.carousel:hover .counter,
.carousel:hover .slide:before {
opacity: 1;
}
.slide {
float: right;
position: absolute;
z-index: 1;
width: 600px;
height: 400px;
background-color: #fff;
text-align: center;
transition: opacity 0.4s;
opacity: 1;
}
.slide:before {
content: attr(annot);
display: block;
position: absolute;
left: 20px;
bottom: 20px;
color: #fff;
font-size: 14px;
font-weight: bold;
z-index: 12;
opacity: 0;
transition: opacity 0.3s;
}
.slide:after {
content: attr(slide);
display: block;
position: absolute;
bottom: 0;
transition: opacity 0.3s;
width: 100%;
height: 80px;
opacity: 0;
background-image: linear-gradient(transparent, rgba(0,0,0,0.2));
text-align: left;
text-indent: 549px;
line-height: 101px;
font-size: 13px;
color: #fff;
font-weight: bold;
}
.counter {
position: absolute;
bottom: 20px;
right: 2px;
height: 20px;
width: 60px;
z-index: 2;
text-align: center;
color: #fff;
line-height: 21px;
font-size: 13px;
font-weight: bold;
opacity: 0;
transition: opacity 0.3s;
}
.carousel-slide {
top: 0;
right: 0;
float: right;
position: absolute;
margin-top: 0;
z-index: 9;
height: 100%;
width: 100%;
opacity: 0;
cursor: pointer;
}
.carousel-slide:checked {
z-index: 8;
}
.carousel-slide:checked + .slide {
opacity: 0;
}
.carousel-slide:checked:nth-child(1):checked {
z-index: 9;
}
.carousel-slide:nth-child(1):checked {
float: left;
z-index: 9;
}
.carousel-slide:nth-child(1):checked + .slide {
opacity: 1;
}
.carousel-slide:nth-child(1):checked ~ .carousel-slide {
float: left;
z-index: 8;
}
.carousel-slide:nth-child(1):checked ~ .carousel-slide + .slide {
opacity: 0;
}
.carousel-slide:nth-child(1):checked ~ .carousel-slide:checked {
z-index: 9;
}
.carousel-slide:nth-child(1):checked ~ .carousel-slide:checked + .slide {
opacity: 1;
}
</style>
<template>
<div class="postComponent">
@ -213,7 +105,7 @@
<h3 class="status-heart m-0 far fa-heart text-dark"></h3>
</button>
</form>
<h3 class="far fa-comment pr-3 m-0" title="Comment"></h3>
<h3 class="far fa-comment pr-3 m-0" title="Comment" v-on:click="commentFocus"></h3>
<form class="d-inline-flex share-form pr-3" method="post" action="/i/share" style="display: inline;" data-id="11todo" data-action="share" data-count="status.favourite_count">
<input type="hidden" name="_token" value="">
<input type="hidden" name="item" :value="statusId">
@ -225,7 +117,7 @@
<span class="float-right">
<form class="d-inline-flex" method="post" action="/i/bookmark" style="display: inline;" data-id="#" data-action="bookmark" onclick="this.preventDefault()">
<input type="hidden" name="_token" value="">
<input type="hidden" name="item" value="#">
<input type="hidden" name="item" :value="statusId">
<button class="btn btn-link text-dark p-0 border-0" type="submit" title="Save">
<h3 class="m-0 far fa-bookmark"></h3>
</button>
@ -267,6 +159,9 @@ pixelfed.postComponent = {};
pixelfed.presenter = {
show: {
image: function(container, media) {
$('.status-container')
.removeClass('orientation-unknown')
.addClass('orientation-' + media[0]['orientation']);
let wrapper = $('<div>');
wrapper.addClass(media[0]['filter_class']);
let el = $('<img>');
@ -288,29 +183,67 @@ pixelfed.presenter = {
container.append(wrapper);
},
imageAlbum: function(container, media) {
imageAlbum: function(container, media, status) {
$('.status-container')
.removeClass('orientation-unknown')
.addClass('orientation-' + media[0]['orientation']);
let id = 'photo-carousel-wrapper-' + status.id;
let wrapper = $('<div>');
wrapper.addClass('carousel');
let counter = $('<div>');
counter.attr('class', 'counter');
counter.attr('count', media.length);
counter.text(' / ' + media.length);
for(var i = media.length - 1; i >= 0; i--) {
wrapper.addClass('carousel slide carousel-fade');
wrapper.attr('data-ride', 'carousel');
wrapper.attr('id', id);
let indicators = $('<ol>');
indicators.addClass('carousel-indicators');
let prev = $('<a>');
prev.addClass('carousel-control-prev');
prev.attr('href', '#' + id);
prev.attr('role', 'button');
prev.attr('data-slide', 'prev');
let prevIcon = $('<span>').addClass('carousel-control-prev-icon').attr('aria-hidden', 'true');
let prevSr = $('<span>').addClass('sr-only');
prev.append(prevIcon, prevSr);
let next = $('<a>');
next.addClass('carousel-control-next');
next.attr('href', '#' + id);
next.attr('role', 'button');
next.attr('data-slide', 'next');
let nextIcon = $('<span>').addClass('carousel-control-next-icon').attr('aria-hidden', 'true');
let nextSr = $('<span>').addClass('sr-only');
let inner = $('<div>').addClass('carousel-inner');
next.append(nextIcon, nextSr);
for(let i = 0; i < media.length; i++) {
let li = $('<li>');
li.attr('data-target', '#' + id);
li.attr('data-slide-to', i);
if(i == 0) {
li.addClass('active');
}
indicators.append(li);
let item = media[i];
let carouselItem = $('<div>').addClass('slide d-flex align-items-center');
carouselItem.attr('slide', i + 1);
carouselItem.attr('annot', item.description);
let check = $('<input>');
check.attr('type', 'checkbox');
check.attr('class', 'carousel-slide');
let carouselItem = $('<div>').addClass('carousel-item');
if(i == 0) {
carouselItem.addClass('active');
}
let figure = $('<figure>');
if(item['filter_class']) {
figure.addClass(item['filter_class']);
}
let badge = $('<span>');
badge.addClass('float-right mr-3 badge badge-dark');
badge.style = 'position:fixed;top:8px;right:0;margin-bottom:-20px;';
badge.text(i+1 + '/' + media.length);
let img = $('<img>');
img.addClass('img-fluid');
img.addClass('d-block w-100');
img.attr('src', item['url']);
carouselItem.append(img);
wrapper.append(check);
wrapper.append(carouselItem);
figure.append(badge, img);
carouselItem.append(figure);
inner.append(carouselItem);
}
wrapper.append(counter);
wrapper.append(indicators, inner, prev, next);
container.append(wrapper);
}
}
@ -322,7 +255,8 @@ export default {
return {
status: {},
media: {},
user: {}
user: {},
reactions: {}
}
},
mounted() {
@ -332,9 +266,23 @@ export default {
el.val(token);
});
this.fetchData();
pixelfed.hydrateLikes();
//pixelfed.hydrateLikes();
this.authCheck();
},
updated() {
$('.carousel').carousel();
if(this.reactions) {
if(this.reactions.bookmarked == true) {
$('.far.fa-bookmark').removeClass('far').addClass('fas text-warning');
}
if(this.reactions.shared == true) {
$('.far.fa-share-square').addClass('text-primary');
}
if(this.reactions.liked == true) {
$('.far.fa-heart ').removeClass('far text-dark').addClass('fas text-danger');
}
}
},
methods: {
authCheck() {
let authed = $('body').hasClass('loggedIn');
@ -355,7 +303,7 @@ export default {
},
timestampFormat() {
let ts = new Date(this.status.created_at);
return ts.toDateString();
return ts.toDateString() + ' ' + ts.toLocaleTimeString();
},
fetchData() {
let url = '/api/v2/profile/'+this.statusUsername+'/status/'+this.statusId;
@ -365,6 +313,7 @@ export default {
self.status = response.data.status;
self.user = response.data.user;
self.media = self.status.media_attachments;
self.reactions = response.data.reactions;
this.buildPresenter();
this.showMuteBlock();
}).catch(error => {
@ -386,6 +335,9 @@ export default {
}
});
},
commentFocus() {
$('.comment-form input[name="comment"]').focus();
},
buildPresenter() {
let container = $('.postPresenterContainer');
let status = this.status;
@ -407,8 +359,7 @@ export default {
break;
case 'album':
pixelfed.presenter.show.imageAlbum(container, media);
$('.carousel').carousel();
pixelfed.presenter.show.imageAlbum(container, media, this.status);
break;
case 'video':

Write Preview
Loading…
Cancel
Save