1
0
Fork 0
forked from mirror/pixelfed

Update ComposeModal, use new routes

This commit is contained in:
Daniel Supernault 2021-01-17 20:25:19 -07:00
parent a0a15730db
commit caafef580c
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7

View file

@ -86,10 +86,46 @@
<span v-else>
<a v-if="!pageLoading && (page > 1 && page <= 2) || (page == 1 && ids.length != 0) || page == 'cropPhoto'" class="font-weight-bold text-decoration-none" href="#" @click.prevent="nextPage">Next</a>
<a v-if="!pageLoading && page == 3" class="font-weight-bold text-decoration-none" href="#" @click.prevent="compose()">Post</a>
<a v-if="!pageLoading && page == 'addText'" class="font-weight-bold text-decoration-none" href="#" @click.prevent="composeTextPost()">Post</a>
</span>
</div>
</div>
<div class="card-body p-0 border-top">
<div v-if="page == 'textOptions'" class="w-100 h-100" style="min-height: 280px;">
test
</div>
<div v-if="page == 'addText'" class="w-100 h-100" style="min-height: 280px;">
<div class="mt-2">
<div class="media px-3">
<div class="media-body">
<div class="form-group">
<label class="font-weight-bold text-muted small d-none">Body</label>
<textarea class="form-control border-0 rounded-0 no-focus" rows="7" placeholder="What's happening?" style="font-size:18px;resize:none" v-model="composeText" v-on:keyup="composeTextLength = composeText.length"></textarea>
<div class="border-bottom"></div>
<p class="help-text small text-right text-muted mb-0 font-weight-bold">{{composeTextLength}}/{{config.uploader.max_caption_length}}</p>
<p class="mb-0 mt-2">
<a class="btn btn-primary rounded-pill mr-2" href="#" style="height: 37px;" @click.prevent="showTextOptions()">
<i class="fas fa-palette px-3 text-white"></i>
</a>
<!-- <a class="btn btn-outline-lighter rounded-pill ml-3" href="#" @click.prevent="showLocationCard()">
<i class="fas fa-map-marker-alt px-3"></i>
</a>
<a class="btn btn-outline-lighter rounded-pill mx-3" href="#" @click.prevent="showTagCard()">
<i class="fas fa-user-plus px-3"></i>
</a> -->
<a class="btn rounded-pill mx-3 d-inline-flex align-items-center" href="#" :class="[nsfw ? 'btn-danger' : 'btn-outline-lighter']" style="height: 37px;" @click.prevent="nsfw = !nsfw" title="Mark as sensitive/not safe for work">
<i class="far fa-flag px-3"></i> <span class="text-muted small font-weight-bold"></span>
</a>
<a class="btn btn-outline-lighter rounded-pill d-inline-flex align-items-center" href="#" style="height: 37px;" @click.prevent="showVisibilityCard()">
<i class="fas fa-eye mr-2"></i> <span class="text-muted small font-weight-bold">{{visibilityTag}}</span>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div v-if="page == 1" class="w-100 h-100 d-flex justify-content-center align-items-center" style="min-height: 400px;">
<div class="text-center">
<div v-if="media.length == 0" class="card mx-md-5 my-md-3 shadow-none border compose-action text-decoration-none text-dark">
@ -107,6 +143,26 @@
</div>
</div>
</div>
<div v-if="config.ab.top == true && media.length == 0" class="card mx-md-5 my-md-3 shadow-none border compose-action text-decoration-none text-dark">
<div @click.prevent="addText" class="card-body">
<div class="media">
<div class="mr-3 align-items-center justify-content-center" style="display:inline-flex;width:40px;height:40px;border-radius: 100%;border: 2px solid #008DF5">
<i class="far fa-edit text-primary fa-lg"></i>
</div>
<div class="media-body text-left">
<p class="mb-0">
<span class="h5 mt-0 font-weight-bold text-primary">New Text Post</span>
<sup class="float-right mt-2">
<span class="btn btn-outline-lighter p-1 btn-sm font-weight-bold py-0" style="font-size:10px;line-height: 0.6">BETA</span>
</sup>
</p>
<p class="mb-0 text-muted">Share a text only post</p>
</div>
</div>
</div>
</div>
<a v-if="config.features.stories == true" class="card mx-md-5 my-md-3 shadow-none border compose-action text-decoration-none text-dark" href="/i/stories/new">
<div class="card-body">
<div class="media">
@ -349,6 +405,19 @@
<div v-if="page == 'advancedSettings'" class="w-100 h-100">
<div class="list-group list-group-flush">
<!-- <div class="d-none list-group-item d-flex justify-content-between">
<div>
<div class="text-dark ">Optimize Media</div>
<p v-if="mediaCropped" class="text-muted small mb-0">Media was cropped or filtered, it must be optimized.</p>
<p v-else class="text-muted small mb-0">Compress media for smaller file size.</p>
</div>
<div>
<div class="custom-control custom-switch" style="z-index: 9999;">
<input type="checkbox" class="custom-control-input" id="asoptimizemedia" v-model="optimizeMedia" :disabled="mediaCropped">
<label class="custom-control-label" for="asoptimizemedia"></label>
</div>
</div>
</div> -->
<div class="list-group-item d-flex justify-content-between">
<div>
<div class="text-dark ">Turn off commenting</div>
@ -591,6 +660,8 @@ export default {
nsfw: false,
place: false,
commentsDisabled: false,
optimizeMedia: true,
mediaCropped: false,
pageTitle: '',
cropper: {
@ -613,11 +684,13 @@ export default {
'addToStory',
'editMedia',
'cameraRoll',
'tagPeopleHelp'
'tagPeopleHelp',
'textOptions'
],
cameraRollMedia: [],
taggedUsernames: [],
taggedPeopleSearch: null
taggedPeopleSearch: null,
textMode: false
}
},
@ -664,6 +737,12 @@ export default {
el.removeAttr('disabled');
},
addText(event) {
this.pageTitle = 'New Text Post';
this.page = 'addText';
this.textMode = true;
},
mediaWatcher() {
let self = this;
$(document).on('change', '#pf-dz', function(e) {
@ -705,7 +784,7 @@ export default {
}
};
axios.post('/api/pixelfed/v1/media', form, xhrConfig)
axios.post('/api/compose/v0/media/upload', form, xhrConfig)
.then(function(e) {
self.uploadProgress = 100;
self.ids.push(e.data.id);
@ -747,7 +826,7 @@ export default {
}
let id = this.media[this.carouselCursor].id;
axios.delete('/api/pixelfed/v1/media', {
axios.delete('/api/compose/v0/media/delete', {
params: {
id: id
}
@ -794,9 +873,51 @@ export default {
cw: this.nsfw,
comments_disabled: this.commentsDisabled,
place: this.place,
tagged: this.taggedUsernames
tagged: this.taggedUsernames,
optimize_media: this.optimizeMedia
};
axios.post('/api/local/status/compose', data)
axios.post('/api/compose/v0/publish', data)
.then(res => {
let data = res.data;
window.location.href = data;
}).catch(err => {
let msg = err.response.data.message ? err.response.data.message : 'An unexpected error occured.'
swal('Oops, something went wrong!', msg, 'error');
});
return;
break;
case 'delete' :
this.ids = [];
this.media = [];
this.carouselCursor = 0;
this.composeText = '';
this.composeTextLength = 0;
$('#composeModal').modal('hide');
return;
break;
}
},
composeTextPost() {
let state = this.composeState;
if(this.composeText.length > this.config.uploader.max_caption_length) {
swal('Error', 'Caption is too long', 'error');
return;
}
switch(state) {
case 'publish' :
let data = {
caption: this.composeText,
visibility: this.visibility,
cw: this.nsfw,
comments_disabled: this.commentsDisabled,
place: this.place,
tagged: this.taggedUsernames,
};
axios.post('/api/compose/v0/publish/text', data)
.then(res => {
let data = res.data;
window.location.href = data;
@ -828,6 +949,14 @@ export default {
this.pageTitle = '';
switch(this.page) {
case 'addText':
this.page = 1;
break;
case 'textOptions':
this.page = 'addText';
break;
case 'cropPhoto':
case 'editMedia':
this.page = 2;
@ -838,7 +967,9 @@ export default {
break;
default:
this.namedPages.indexOf(this.page) != -1 ? this.page = 3 : this.page--;
this.namedPages.indexOf(this.page) != -1 ?
this.page = (this.textMode ? 'addText' : 3) :
(this.textMode ? 'addText' : this.page--);
break;
}
},
@ -860,10 +991,11 @@ export default {
imageSmoothingEnabled: false,
imageSmoothingQuality: 'high',
}).toBlob(function(blob) {
self.mediaCropped = true;
let data = new FormData();
data.append('file', blob);
let url = '/api/local/compose/media/update/' + self.ids[self.carouselCursor];
data.append('id', self.ids[self.carouselCursor]);
let url = '/api/compose/v0/media/update';
axios.post(url, data).then(res => {
self.media[self.carouselCursor].url = res.data.url;
self.pageLoading = false;
@ -921,7 +1053,7 @@ export default {
locationSearch(input) {
if (input.length < 1) { return []; };
let results = [];
return axios.get('/api/local/compose/location/search', {
return axios.get('/api/compose/v0/search/location', {
params: {
q: input
}
@ -936,8 +1068,8 @@ export default {
onSubmitLocation(result) {
this.place = result;
this.pageTitle = '';
this.page = 3;
this.pageTitle = this.textMode ? 'New Text Post' : '';
this.page = (this.textMode ? 'addText' : 3);
return;
},
@ -965,7 +1097,7 @@ export default {
this.visibility = state;
this.visibilityTag = tags[state];
this.pageTitle = '';
this.page = 3;
this.page = this.textMode ? 'addText' : 3;
},
showMediaDescriptionsCard() {
@ -1024,7 +1156,8 @@ export default {
canvas.toBlob(function(blob) {
data = new FormData();
data.append('file', blob);
axios.post('/api/local/compose/media/update/'+media.id, data).then(res => {
data.append('id', media.id);
axios.post('/api/compose/v0/media/update', data).then(res => {
}).catch(err => {
});
});
@ -1039,7 +1172,7 @@ export default {
if (input.length < 1) { return []; };
let self = this;
let results = [];
return axios.get('/api/local/compose/tag/search', {
return axios.get('/api/compose/v0/search/tag', {
params: {
q: input
}
@ -1070,6 +1203,11 @@ export default {
untagUsername(index) {
this.taggedUsernames.splice(index, 1);
},
showTextOptions() {
this.page = 'textOptions';
this.pageTitle = 'Text Post Options';
}
}
}