mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-10 00:34:50 +00:00
Update StoryCompose.vue
This commit is contained in:
Daniel Supernault
parent
894ce91f22
commit
6a6f1f802f
1 changed files with 242 additions and 16 deletions
|
|
@ -1,42 +1,268 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="container">
|
||||
<p class="display-4 text-center py-5">Share Your Story</p>
|
||||
<div class="container mt-2 mt-md-5">
|
||||
<input type="file" id="pf-dz" name="media" class="w-100 h-100 d-none file-input" draggable="true" v-bind:accept="config.mimes">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 offset-md-3">
|
||||
|
||||
<div class="d-flex justify-content-center align-item-center">
|
||||
<div class="bg-dark" style="width:400px;height:600px">
|
||||
<p class="text-center text-light font-weight-bold">Add Photo</p>
|
||||
<!-- LANDING -->
|
||||
<div v-if="page == 'landing'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 90vh;">
|
||||
<div class="text-center flex-fill mt-5 pt-5">
|
||||
<img src="/img/pixelfed-icon-grey.svg" width="60px" height="60px">
|
||||
<p class="font-weight-bold lead text-lighter mt-1">Stories</p>
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<div class="card w-100 shadow-none">
|
||||
<div class="list-group">
|
||||
<a class="list-group-item text-center lead text-decoration-none text-dark" href="#" @click.prevent="upload()">Add Photo</a>
|
||||
<a v-if="stories.length" class="list-group-item text-center lead text-decoration-none text-dark" href="#" @click.prevent="edit()">Edit Story</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center flex-fill">
|
||||
<p class="text-lighter small text-uppercase">
|
||||
<a href="/" class="text-muted font-weight-bold">Home</a>
|
||||
<span class="px-2 text-lighter">|</span>
|
||||
<a href="/i/my/story" class="text-muted font-weight-bold">View My Story</a>
|
||||
<span class="px-2 text-lighter">|</span>
|
||||
<a href="/site/help" class="text-muted font-weight-bold">Help</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CROP -->
|
||||
<div v-if="page == 'crop'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 95vh;">
|
||||
<div class="text-center pt-5 mb-3 d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<button class="btn btn-outline-lighter btn-sm py-0 px-md-3"><i class="pr-2 fas fa-chevron-left fa-sm"></i> Delete</button>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<img class="d-inline-block mr-2" src="/img/pixelfed-icon-grey.svg" width="30px" height="30px">
|
||||
<span class="font-weight-bold lead text-lighter">Stories</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-outline-success btn-sm py-0 px-md-3">Crop <i class="pl-2 fas fa-chevron-right fa-sm"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<div class="card w-100 mt-3">
|
||||
<div class="card-body p-0">
|
||||
<vue-cropper
|
||||
ref="cropper"
|
||||
:relativeZoom="cropper.zoom"
|
||||
:aspectRatio="cropper.aspectRatio"
|
||||
:viewMode="cropper.viewMode"
|
||||
:zoomable="cropper.zoomable"
|
||||
:rotatable="true"
|
||||
:src="mediaUrl"
|
||||
>
|
||||
</vue-cropper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center flex-fill">
|
||||
<p class="text-lighter small text-uppercase pt-2">
|
||||
<!-- <a href="#" class="text-muted font-weight-bold">Home</a>
|
||||
<span class="px-2 text-lighter">|</span>
|
||||
<a href="#" class="text-muted font-weight-bold">View My Story</a>
|
||||
<span class="px-2 text-lighter">|</span> -->
|
||||
<a href="/site/help" class="text-muted font-weight-bold mb-0">Help</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ERROR -->
|
||||
<div v-if="page == 'error'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center align-items-center" style="height: 90vh;">
|
||||
<p class="h3 mb-0">Oops!</p>
|
||||
<p class="text-muted lead">An error occurred, please try again later.</p>
|
||||
<p class="text-muted mb-0">
|
||||
<a class="btn btn-outline-secondary py-0 px-5 font-weight-bold" href="/">Go back</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="page == 'edit'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 90vh;">
|
||||
<div class="text-center flex-fill mt-5 pt-5">
|
||||
<img src="/img/pixelfed-icon-grey.svg" width="60px" height="60px">
|
||||
<p class="font-weight-bold lead text-lighter mt-1">Stories</p>
|
||||
</div>
|
||||
<div class="flex-fill py-5">
|
||||
<div class="card w-100 shadow-none" style="max-height: 500px; overflow-y: auto">
|
||||
<div class="list-group">
|
||||
<div v-for="(story, index) in stories" class="list-group-item text-center text-dark" href="#">
|
||||
<div class="media align-items-center">
|
||||
<img :src="story.src" class="img-fluid mr-3 cursor-pointer" width="70px" height="70px" @click="showLightbox(story)">
|
||||
<div class="media-body">
|
||||
<p class="mb-0">Expires</p>
|
||||
<p class="mb-0 text-muted small"><span>{{expiresTimestamp(story.expires_at)}}</span></p>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<button @click="deleteStory(story, index)" class="btn btn-danger btn-sm font-weight-bold text-uppercase">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-fill text-center">
|
||||
<a class="btn btn-outline-secondary py-0 px-5 font-weight-bold" href="/i/stories/new">Go back</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<b-modal
|
||||
id="lightbox"
|
||||
ref="lightboxModal"
|
||||
hide-header
|
||||
hide-footer
|
||||
centered
|
||||
size="lg"
|
||||
body-class="p-0"
|
||||
>
|
||||
<div v-if="lightboxMedia" class="w-100 h-100">
|
||||
<img :src="lightboxMedia.url" style="max-height: 100%; max-width: 100%">
|
||||
</div>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style type="text/css" scoped>
|
||||
.navtab .nav-link {
|
||||
color: #657786;
|
||||
}
|
||||
|
||||
.navtab .nav-link.active {
|
||||
color: #08d;
|
||||
border-bottom: 4px solid #08d;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
import VueTimeago from 'vue-timeago';
|
||||
import VueCropper from 'vue-cropperjs';
|
||||
import 'cropperjs/dist/cropper.css';
|
||||
export default {
|
||||
components: {
|
||||
VueCropper,
|
||||
VueTimeago
|
||||
},
|
||||
|
||||
props: ['profile-id'],
|
||||
data() {
|
||||
return {
|
||||
currentTab: 'upload',
|
||||
config: window.App.config,
|
||||
mimes: [
|
||||
'image/jpeg',
|
||||
'image/png'
|
||||
],
|
||||
page: 'landing',
|
||||
pages: [
|
||||
'landing',
|
||||
'crop',
|
||||
'edit',
|
||||
'confirm',
|
||||
'error'
|
||||
],
|
||||
uploading: false,
|
||||
uploadProgress: 100,
|
||||
cropper: {
|
||||
aspectRatio: 9/16,
|
||||
viewMode: 1,
|
||||
zoomable: true,
|
||||
zoom: null
|
||||
},
|
||||
mediaUrl: null,
|
||||
stories: [],
|
||||
lightboxMedia: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.welcomeMessage();
|
||||
this.mediaWatcher();
|
||||
axios.get('/api/stories/v1/fetch/' + this.profileId)
|
||||
.then(res => this.stories = res.data);
|
||||
},
|
||||
|
||||
methods: {
|
||||
welcomeMessage() {
|
||||
|
||||
upload() {
|
||||
let fi = $('.file-input[name="media"]');
|
||||
fi.trigger('click');
|
||||
},
|
||||
|
||||
mediaWatcher() {
|
||||
let self = this;
|
||||
$(document).on('change', '#pf-dz', function(e) {
|
||||
self.triggerUpload();
|
||||
});
|
||||
},
|
||||
|
||||
triggerUpload() {
|
||||
let self = this;
|
||||
self.uploading = true;
|
||||
let io = document.querySelector('#pf-dz');
|
||||
Array.prototype.forEach.call(io.files, function(io, i) {
|
||||
if(self.media && self.media.length + i >= self.config.uploader.album_limit) {
|
||||
swal('Error', 'You can only upload ' + self.config.uploader.album_limit + ' photos per album', 'error');
|
||||
self.uploading = false;
|
||||
self.page = 2;
|
||||
return;
|
||||
}
|
||||
let type = io.type;
|
||||
let validated = $.inArray(type, self.mimes);
|
||||
if(validated == -1) {
|
||||
swal('Invalid File Type', 'The file you are trying to add is not a valid mime type. Please upload a '+self.mimes+' only.', 'error');
|
||||
self.uploading = false;
|
||||
self.page = 'error';
|
||||
return;
|
||||
}
|
||||
|
||||
let form = new FormData();
|
||||
form.append('file', io);
|
||||
|
||||
let xhrConfig = {
|
||||
onUploadProgress: function(e) {
|
||||
let progress = Math.round( (e.loaded * 100) / e.total );
|
||||
self.uploadProgress = progress;
|
||||
}
|
||||
};
|
||||
|
||||
axios.post('/api/stories/v1/add', form, xhrConfig)
|
||||
.then(function(e) {
|
||||
self.uploadProgress = 100;
|
||||
self.uploading = false;
|
||||
window.location.href = '/i/my/story';
|
||||
self.mediaUrl = e.data.media_url;
|
||||
}).catch(function(e) {
|
||||
self.uploading = false;
|
||||
io.value = null;
|
||||
swal('Oops!', e.response.data.message, 'warning');
|
||||
});
|
||||
io.value = null;
|
||||
self.uploadProgress = 0;
|
||||
});
|
||||
},
|
||||
|
||||
expiresTimestamp(ts) {
|
||||
ts = new Date(ts * 1000);
|
||||
return ts.toDateString() + ' ' + ts.toLocaleTimeString();
|
||||
},
|
||||
|
||||
edit() {
|
||||
this.page = 'edit';
|
||||
},
|
||||
|
||||
showLightbox(story) {
|
||||
this.lightboxMedia = {
|
||||
url: story.src
|
||||
}
|
||||
this.$refs.lightboxModal.show();
|
||||
},
|
||||
|
||||
deleteStory(story, index) {
|
||||
if(window.confirm('Are you sure you want to delete this Story?') != true) {
|
||||
return;
|
||||
}
|
||||
|
||||
axios.delete('/api/stories/v1/delete/' + story.id)
|
||||
.then(res => {
|
||||
this.stories.splice(index, 1);
|
||||
if(this.stories.length == 0) {
|
||||
window.location.href = '/i/stories/new';
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue