2019-02-27 07:03:46 +00:00
< template >
2019-07-09 05:23:59 +00:00
< div >
2019-09-04 02:31:51 +00:00
< input type = "file" id = "pf-dz" name = "media" class = "w-100 h-100 d-none file-input" draggable = "true" multiple = "true" v -bind :accept = "config.uploader.media_types" >
2019-07-09 05:23:59 +00:00
< div class = "timeline" >
2019-09-05 19:58:27 +00:00
< div v-if = "uploading" >
< div class = "card status-card card-md-rounded-0 w-100 h-100 bg-light py-5" style = "border-bottom: 1px solid #f1f1f1" >
< div class = "p-5 mt-2" >
< b-progress :value = "uploadProgress" :max = "100" striped :animated = "true" > < / b-progress >
< p class = "text-center mb-0 font-weight-bold" > Uploading ... ( { { uploadProgress } } % ) < / p >
2019-02-27 07:03:46 +00:00
< / div >
2019-07-09 05:23:59 +00:00
< / div >
2019-09-05 19:58:27 +00:00
< / div >
< div v-else >
< div class = "card status-card card-md-rounded-0 w-100 h-100" style = "display:flex;" >
< div class = "card-header d-inline-flex align-items-center bg-white" >
< div >
< a v-if = "page == 1" href="#" @click.prevent="closeModal()" class="font-weight-bold text-decoration-none text-muted" >
< i class = "fas fa-times fa-lg" > < / i >
< span class = "font-weight-bold mb-0" > { { pageTitle } } < / span >
< / a >
< span v-else >
< span >
< a class = "text-lighter text-decoration-none mr-3" href = "#" @click.prevent ="goBack()" > < i class = "fas fa-long-arrow-alt-left fa-lg" > < / i > < / a >
< / span >
< span class = "font-weight-bold mb-0" > { { pageTitle } } < / span >
< / span >
2019-02-27 07:03:46 +00:00
< / div >
2019-09-05 19:58:27 +00:00
< div class = "text-right" style = "flex-grow:1;" >
<!-- < a v-if = "page > 1" class="font-weight-bold text-decoration-none" href="#" @click.prevent="page--" > Back < / a > - - >
< span v-if = "pageLoading" >
< div class = "spinner-border spinner-border-sm" role = "status" >
< span class = "sr-only" > Loading ... < / span >
< / div >
< / span >
< a v-if = "!pageLoading && (page > 1 && page <= 3) || (page == 1 && ids.length != 0)" class="font-weight-bold text-decoration-none" href="#" @click.prevent="nextPage" > Next < / a >
< a v-if = "!pageLoading && page == 4" class="font-weight-bold text-decoration-none" href="#" @click.prevent="compose" > Post < / a >
2019-09-04 02:31:51 +00:00
< / div >
< / div >
2019-09-05 19:58:27 +00:00
< div class = "card-body p-0 border-top" >
< 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" >
< p >
< a class = "btn btn-primary font-weight-bold" href = "/i/compose" > Compose Post < / a >
< / p >
< hr >
< p >
< button type = "button" class = "btn btn-outline-primary font-weight-bold" @click.prevent ="addMedia" > Compose Post < sup > BETA < / sup > < / button >
< / p >
< p >
< button class = "btn btn-outline-primary font-weight-bold" @click.prevent ="createCollection" > New Collection < / button >
< / p >
<!-- < p >
< button class = "btn btn-outline-primary font-weight-bold" @click.prevent ="showAddToStoryCard()" > Add To My Story < / button >
< / p > -- >
< p >
< a class = "font-weight-bold" href = "/site/help" > Need Help ? < / a >
< / p >
< p class = "text-muted mb-0 small text-center" > Formats : < b > { { acceptedFormats ( ) } } < / b > up to < b > { { maxSize ( ) } } < / b > < / p >
< p class = "text-muted mb-0 small text-center" > Albums can contain up to < b > { { config . uploader . album _limit } } < / b > photos or videos < / p >
< / div >
< / div >
2019-09-04 02:31:51 +00:00
2019-09-05 19:58:27 +00:00
< div v-if = "page == 2" class="w-100 h-100" >
< div v-if = "ids.length > 0" >
< vue-cropper
ref = "cropper"
: relativeZoom = "cropper.zoom"
: aspectRatio = "cropper.aspectRatio"
: viewMode = "cropper.viewMode"
: zoomable = "cropper.zoomable"
: rotatable = "true"
: src = "media[0].url"
>
< / vue-cropper >
< / div >
2019-07-09 05:23:59 +00:00
< / div >
2019-09-05 19:58:27 +00:00
< div v-if = "page == 3" class="w-100 h-100" >
< div slot = "img" style = "display:flex;min-height: 420px;align-items: center;" >
< img : class = "'d-block img-fluid w-100 ' + [media[carouselCursor].filter_class?media[carouselCursor].filter_class:'']" :src = "media[carouselCursor].url" :alt = "media[carouselCursor].description" :title = "media[carouselCursor].description" >
< / div >
< hr >
< div v-if = "ids.length > 0 && media[carouselCursor].type == 'Image'" class="align-items-center px-2 pt-2" >
< ul class = "nav media-drawer-filters text-center" >
< li class = "nav-item" >
< div class = "p-1 pt-3" >
< img :src = "media[carouselCursor].url" width = "100px" height = "60px" v -on : click.prevent = " toggleFilter ( $ event , null ) " class = "cursor-pointer" >
< / div >
< a : class = "[media[carouselCursor].filter_class == null ? 'nav-link text-primary active' : 'nav-link text-muted']" href = "#" v -on : click.prevent = " toggleFilter ( $ event , null ) " > No Filter < / a >
< / li >
< li class = "nav-item" v-for = "(filter, index) in filters" >
< div class = "p-1 pt-3" >
< img :src = "media[carouselCursor].url" width = "100px" height = "60px" :class = "filter[1]" v -on : click.prevent = " toggleFilter ( $ event , filter [ 1 ] ) " >
< / div >
< a : class = "[media[carouselCursor].filter_class == filter[1] ? 'nav-link text-primary active' : 'nav-link text-muted']" href = "#" v -on : click.prevent = " toggleFilter ( $ event , filter [ 1 ] ) " > { { filter [ 0 ] } } < / a >
< / li >
< / ul >
< / div >
2019-07-09 05:23:59 +00:00
< / div >
2019-09-05 19:58:27 +00:00
< div v-if = "page == 4" class="w-100 h-100" >
< div class = "border-bottom mt-2" >
< div class = "media px-3" >
< img :src = "media[0].url" width = "42px" height = "42px" : class = "[media[0].filter_class?'mr-2 ' + media[0].filter_class:'mr-2']" >
< div class = "media-body" >
< div class = "form-group" >
< label class = "font-weight-bold text-muted small d-none" > Caption < / label >
< textarea class = "form-control border-0 rounded-0 no-focus" rows = "2" placeholder = "Write a caption..." style = "resize:none" v-model = "composeText" > < / textarea >
< / div >
2019-09-04 02:31:51 +00:00
< / div >
< / div >
2019-07-22 02:24:03 +00:00
< / div >
2019-09-05 19:58:27 +00:00
< div class = "border-bottom" >
< p class = "px-4 mb-0 py-2 cursor-pointer" @click ="showTagCard()" > Tag people < / p >
< / div >
< div class = "border-bottom" >
< p class = "px-4 mb-0 py-2 cursor-pointer" @click ="showLocationCard()" v-if = "!place" > Add location < / p >
< p v -else class = "px-4 mb-0 py-2" >
< span class = "text-lighter" > Location : < / span > { { place . name } } , { { place . country } }
< span class = "float-right" >
< a href = "#" @click.prevent ="showLocationCard()" class = "text-muted font-weight-bold small mr-2" > Change < / a >
< a href = "#" @ click.prevent = " place = false " class = "text-muted font-weight-bold small" > Remove < / a >
< / span >
< / p >
< / div >
< div class = "border-bottom" >
< p class = "px-4 mb-0 py-2" >
< span class = "text-lighter" > Visibility : < / span > { { visibilityTag } }
< span class = "float-right" >
< a href = "#" @click.prevent ="showVisibilityCard()" class = "text-muted font-weight-bold small mr-2" > Change < / a >
< / span >
< / p >
< / div >
< div style = "min-height: 200px;" >
< p class = "px-4 mb-0 py-2 small font-weight-bold text-muted cursor-pointer" @click ="showAdvancedSettingsCard()" > Advanced settings < / p >
< / div >
2019-07-09 05:23:59 +00:00
< / div >
2019-02-27 07:03:46 +00:00
2019-09-05 19:58:27 +00:00
< div v-if = "page == 'tagPeople'" class="w-100 h-100 p-3" >
< p class = "text-center lead text-muted mb-0 py-5" > This feature is not available yet . < / p >
< / div >
2019-09-04 02:31:51 +00:00
2019-09-05 19:58:27 +00:00
< div v-if = "page == 'addLocation'" class="w-100 h-100 p-3" >
< p class = "mb-0" > Add Location < / p >
< autocomplete
: search = "locationSearch"
placeholder = "Search locations ..."
aria - label = "Search locations ..."
: get - result - value = "getResultValue"
@ submit = "onSubmitLocation"
>
< / autocomplete >
< / div >
2019-02-27 07:03:46 +00:00
2019-09-05 19:58:27 +00:00
< div v-if = "page == 'advancedSettings'" class="w-100 h-100" >
< div class = "list-group list-group-flush" >
< div class = "list-group-item d-flex justify-content-between" >
< div >
< div class = "text-dark " > Turn off commenting < / div >
< p class = "text-muted small mb-0" > Disables comments for this post , you can change this later . < / p >
< / div >
< div >
< div class = "custom-control custom-switch" style = "z-index: 9999;" >
< input type = "checkbox" class = "custom-control-input" id = "asdisablecomments" v-model = "commentsDisabled" >
< label class = "custom-control-label" for = "asdisablecomments" > < / label >
< / div >
2019-09-04 02:31:51 +00:00
< / div >
< / div >
2019-09-05 19:58:27 +00:00
< div class = "list-group-item d-flex justify-content-between" >
< div >
< div class = "text-dark " > Contains NSFW Media < / div >
< / div >
< div >
< div class = "custom-control custom-switch" style = "z-index: 9999;" >
< input type = "checkbox" class = "custom-control-input" id = "asnsfw" v-model = "nsfw" >
< label class = "custom-control-label" for = "asnsfw" > < / label >
< / div >
2019-09-04 02:31:51 +00:00
< / div >
2019-07-09 05:23:59 +00:00
< / div >
2019-09-05 19:58:27 +00:00
< a class = "list-group-item" @ click.prevent = " page = 'altText' " >
< div class = "text-dark" > Write alt text < / div >
< p class = "text-muted small mb-0" > Alt text describes your photos for people with visual impairments . < / p >
< / a >
< a href = "#" class = "list-group-item" @ click.prevent = " page = 'addToCollection' " >
< div class = "text-dark" > Add to Collection < / div >
< p class = "text-muted small mb-0" > Add this post to a collection . < / p >
< / a >
< a href = "#" class = "list-group-item" @ click.prevent = " page = 'schedulePost' " >
< div class = "text-dark" > Schedule < / div >
< p class = "text-muted small mb-0" > Schedule post for a future date . < / p >
< / a >
< a href = "#" class = "list-group-item" @ click.prevent = " page = 'mediaMetadata' " >
< div class = "text-dark" > Metadata < / div >
< p class = "text-muted small mb-0" > Manage media exif and metadata . < / p >
< / a >
2019-02-27 07:03:46 +00:00
< / div >
2019-07-09 05:23:59 +00:00
< / div >
2019-09-04 02:31:51 +00:00
2019-09-05 19:58:27 +00:00
< div v-if = "page == 'visibility'" class="w-100 h-100" >
< div class = "list-group list-group-flush" >
< div : class = "'list-group-item lead cursor-pointer ' + [visibility == 'public'?'text-primary':'']" @click ="toggleVisibility('public')" > Public < / div >
< div : class = "'list-group-item lead cursor-pointer ' + [visibility == 'unlisted'?'text-primary':'']" @click ="toggleVisibility('unlisted')" > Unlisted < / div >
< div : class = "'list-group-item lead cursor-pointer ' + [visibility == 'private'?'text-primary':'']" @click ="toggleVisibility('private')" > Followers Only < / div >
< / div >
2019-07-09 05:23:59 +00:00
< / div >
2019-09-04 02:31:51 +00:00
2019-09-05 19:58:27 +00:00
< div v-if = "page == 'altText'" class="w-100 h-100 p-3" >
< p class = "text-center lead text-muted mb-0 py-5" > This feature is not available yet . < / p >
< / div >
2019-09-04 02:31:51 +00:00
2019-09-05 19:58:27 +00:00
< div v-if = "page == 'addToCollection'" class="w-100 h-100 p-3" >
< p class = "text-center lead text-muted mb-0 py-5" > This feature is not available yet . < / p >
< / div >
2019-09-04 02:31:51 +00:00
2019-09-05 19:58:27 +00:00
< div v-if = "page == 'schedulePost'" class="w-100 h-100 p-3" >
< p class = "text-center lead text-muted mb-0 py-5" > This feature is not available yet . < / p >
< / div >
2019-09-04 02:31:51 +00:00
2019-09-05 19:58:27 +00:00
< div v-if = "page == 'mediaMetadata'" class="w-100 h-100 p-3" >
< p class = "text-center lead text-muted mb-0 py-5" > This feature is not available yet . < / p >
< / div >
2019-09-04 02:31:51 +00:00
2019-09-05 19:58:27 +00:00
< div v-if = "page == 'addToStory'" class="w-100 h-100 p-3" >
< p class = "text-center lead text-muted mb-0 py-5" > This feature is not available yet . < / p >
< / div >
2019-09-04 02:31:51 +00:00
< / div >
2019-09-05 19:58:27 +00:00
<!-- card - footers -- >
< div v-if = "page == 2" class="card-footer bg-white d-flex justify-content-between" >
< div >
< button type = "button" class = "btn btn-outline-secondary" @click ="rotate" > < i class = "fas fa-undo" > < / i > < / button >
< / div >
< div >
< div class = "d-inline-block button-group" >
< button : class = "'btn font-weight-bold ' + [cropper.aspectRatio == 16/9 ? 'btn-primary':'btn-light']" @click.prevent ="changeAspect(16/9)" > 16 : 9 < / button >
< button : class = "'btn font-weight-bold ' + [cropper.aspectRatio == 4/3 ? 'btn-primary':'btn-light']" @click.prevent ="changeAspect(4/3)" > 4 : 3 < / button >
< button : class = "'btn font-weight-bold ' + [cropper.aspectRatio == 3/2 ? 'btn-primary':'btn-light']" @click.prevent ="changeAspect(3/2)" > 3 : 2 < / button >
< button : class = "'btn font-weight-bold ' + [cropper.aspectRatio == 1 ? 'btn-primary':'btn-light']" @click.prevent ="changeAspect(1)" > 1 : 1 < / button >
< button : class = "'btn font-weight-bold ' + [cropper.aspectRatio == 2/3 ? 'btn-primary':'btn-light']" @click.prevent ="changeAspect(2/3)" > 2 : 3 < / button >
< / div >
2019-02-27 07:03:46 +00:00
< / div >
< / div >
< / div >
< / div >
< / div >
2019-07-09 05:23:59 +00:00
< / div >
2019-02-27 07:03:46 +00:00
< / template >
< style type = "text/css" scoped >
2019-03-26 04:22:25 +00:00
. media - drawer - filters {
overflow - x : scroll ;
flex - wrap : unset ;
}
. media - drawer - filters . nav - link {
min - width : 100 px ;
padding - top : 1 rem ;
padding - bottom : 1 rem ;
}
. media - drawer - filters . active {
color : # fff ;
font - weight : bold ;
}
2019-05-14 13:54:27 +00:00
@ media ( hover : none ) and ( pointer : coarse ) {
. media - drawer - filters : : - webkit - scrollbar {
display : none ;
}
}
2019-09-04 02:31:51 +00:00
. no - focus {
border - color : none ;
outline : 0 ;
box - shadow : none ;
}
a . list - group - item {
text - decoration : none ;
}
a . list - group - item : hover {
text - decoration : none ;
background - color : # f8f9fa ! important ;
}
2019-02-27 07:03:46 +00:00
< / style >
2019-09-04 02:31:51 +00:00
2019-02-27 07:03:46 +00:00
< script type = "text/javascript" >
2019-09-04 02:31:51 +00:00
import VueCropper from 'vue-cropperjs' ;
import 'cropperjs/dist/cropper.css' ;
import Autocomplete from '@trevoreyre/autocomplete-vue'
import '@trevoreyre/autocomplete-vue/dist/style.css'
2019-02-27 07:03:46 +00:00
export default {
2019-09-04 02:31:51 +00:00
components : {
VueCropper ,
Autocomplete
} ,
2019-02-27 07:03:46 +00:00
data ( ) {
return {
2019-08-05 04:02:10 +00:00
config : window . App . config ,
2019-09-04 02:31:51 +00:00
pageLoading : false ,
2019-03-26 04:22:25 +00:00
profile : { } ,
2019-03-26 04:22:43 +00:00
composeText : '' ,
2019-03-26 04:22:25 +00:00
composeTextLength : 0 ,
2019-02-27 07:03:46 +00:00
nsfw : false ,
filters : [ ] ,
ids : [ ] ,
media : [ ] ,
carouselCursor : 0 ,
2019-04-16 01:39:54 +00:00
uploading : false ,
2019-09-04 02:31:51 +00:00
uploadProgress : 100 ,
composeType : false ,
page : 1 ,
composeState : 'publish' ,
visibility : 'public' ,
visibilityTag : 'Public' ,
nsfw : false ,
place : false ,
commentsDisabled : false ,
pageTitle : '' ,
cropper : {
aspectRatio : 1 ,
viewMode : 1 ,
zoomable : true ,
zoom : 0
} ,
taggedUsernames : false ,
namedPages : [
'tagPeople' ,
'addLocation' ,
'advancedSettings' ,
'visibility' ,
'altText' ,
'addToCollection' ,
'schedulePost' ,
'mediaMetadata' ,
'addToStory'
]
2019-02-27 07:03:46 +00:00
}
} ,
beforeMount ( ) {
this . fetchProfile ( ) ;
} ,
mounted ( ) {
this . mediaWatcher ( ) ;
this . filters = [
[ '1977' , 'filter-1977' ] ,
[ 'Aden' , 'filter-aden' ] ,
[ 'Amaro' , 'filter-amaro' ] ,
[ 'Ashby' , 'filter-ashby' ] ,
[ 'Brannan' , 'filter-brannan' ] ,
[ 'Brooklyn' , 'filter-brooklyn' ] ,
[ 'Charmes' , 'filter-charmes' ] ,
[ 'Clarendon' , 'filter-clarendon' ] ,
[ 'Crema' , 'filter-crema' ] ,
[ 'Dogpatch' , 'filter-dogpatch' ] ,
[ 'Earlybird' , 'filter-earlybird' ] ,
[ 'Gingham' , 'filter-gingham' ] ,
[ 'Ginza' , 'filter-ginza' ] ,
[ 'Hefe' , 'filter-hefe' ] ,
[ 'Helena' , 'filter-helena' ] ,
[ 'Hudson' , 'filter-hudson' ] ,
[ 'Inkwell' , 'filter-inkwell' ] ,
[ 'Kelvin' , 'filter-kelvin' ] ,
[ 'Kuno' , 'filter-juno' ] ,
[ 'Lark' , 'filter-lark' ] ,
[ 'Lo-Fi' , 'filter-lofi' ] ,
[ 'Ludwig' , 'filter-ludwig' ] ,
[ 'Maven' , 'filter-maven' ] ,
[ 'Mayfair' , 'filter-mayfair' ] ,
[ 'Moon' , 'filter-moon' ] ,
[ 'Nashville' , 'filter-nashville' ] ,
[ 'Perpetua' , 'filter-perpetua' ] ,
[ 'Poprocket' , 'filter-poprocket' ] ,
[ 'Reyes' , 'filter-reyes' ] ,
[ 'Rise' , 'filter-rise' ] ,
[ 'Sierra' , 'filter-sierra' ] ,
[ 'Skyline' , 'filter-skyline' ] ,
[ 'Slumber' , 'filter-slumber' ] ,
[ 'Stinson' , 'filter-stinson' ] ,
[ 'Sutro' , 'filter-sutro' ] ,
[ 'Toaster' , 'filter-toaster' ] ,
[ 'Valencia' , 'filter-valencia' ] ,
[ 'Vesper' , 'filter-vesper' ] ,
[ 'Walden' , 'filter-walden' ] ,
[ 'Willow' , 'filter-willow' ] ,
[ 'X-Pro II' , 'filter-xpro-ii' ]
] ;
} ,
methods : {
2019-09-04 02:31:51 +00:00
fetchConfig ( ) {
axios . get ( '/api/v2/config' ) . then ( res => {
this . config = res . data ;
window . pixelfed . config = window . pixelfed . config || res . data ;
if ( this . config . uploader . media _types . includes ( 'video/mp4' ) == false ) {
this . composeType = 'post'
}
} ) ;
} ,
2019-02-27 07:03:46 +00:00
fetchProfile ( ) {
axios . get ( '/api/v1/accounts/verify_credentials' ) . then ( res => {
this . profile = res . data ;
2019-09-04 02:31:51 +00:00
window . pixelfed . currentUser = res . data ;
2019-04-13 04:45:27 +00:00
if ( res . data . locked == true ) {
this . visibility = 'private' ;
}
2019-02-27 07:03:46 +00:00
} ) . catch ( err => {
} ) ;
} ,
2019-05-05 20:39:02 +00:00
addMedia ( event ) {
2019-02-27 07:03:46 +00:00
let el = $ ( event . target ) ;
el . attr ( 'disabled' , '' ) ;
let fi = $ ( '.file-input[name="media"]' ) ;
fi . trigger ( 'click' ) ;
el . blur ( ) ;
el . removeAttr ( 'disabled' ) ;
} ,
mediaWatcher ( ) {
let self = this ;
2019-09-04 02:31:51 +00:00
self . mediaDragAndDrop ( ) ;
$ ( document ) . on ( 'change' , '#pf-dz' , function ( e ) {
self . mediaUpload ( ) ;
} ) ;
} ,
2019-02-27 07:03:46 +00:00
2019-09-04 02:31:51 +00:00
mediaUpload ( ) {
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' ) ;
return ;
}
let type = io . type ;
let acceptedMimes = self . config . uploader . media _types . split ( ',' ) ;
let validated = $ . inArray ( type , acceptedMimes ) ;
if ( validated == - 1 ) {
swal ( 'Invalid File Type' , 'The file you are trying to add is not a valid mime type. Please upload a ' + self . config . uploader . media _types + ' only.' , 'error' ) ;
return ;
}
2019-02-27 07:03:46 +00:00
2019-09-04 02:31:51 +00:00
let form = new FormData ( ) ;
form . append ( 'file' , io ) ;
2019-02-27 07:03:46 +00:00
2019-09-04 02:31:51 +00:00
let xhrConfig = {
onUploadProgress : function ( e ) {
let progress = Math . round ( ( e . loaded * 100 ) / e . total ) ;
self . uploadProgress = progress ;
}
} ;
axios . post ( '/api/v1/media' , form , xhrConfig )
. then ( function ( e ) {
self . uploadProgress = 100 ;
self . ids . push ( e . data . id ) ;
self . media . push ( e . data ) ;
self . page = 2 ;
setTimeout ( function ( ) {
2019-04-16 05:32:15 +00:00
self . uploading = false ;
2019-09-04 02:31:51 +00:00
} , 1000 ) ;
} ) . catch ( function ( e ) {
self . uploading = false ;
2019-02-27 07:03:46 +00:00
io . value = null ;
2019-09-04 02:31:51 +00:00
swal ( 'Oops, something went wrong!' , 'An unexpected error occurred.' , 'error' ) ;
2019-02-27 07:03:46 +00:00
} ) ;
2019-09-04 02:31:51 +00:00
io . value = null ;
self . uploadProgress = 0 ;
2019-02-27 07:03:46 +00:00
} ) ;
} ,
2019-09-04 02:31:51 +00:00
mediaDragAndDrop ( ) {
let self = this ;
let pdz = document . getElementById ( 'content' ) ;
function allowDrag ( e ) {
e . dataTransfer . dropEffect = 'copy' ;
e . preventDefault ( ) ;
}
function handleDrop ( e ) {
e . preventDefault ( ) ;
let dz = document . querySelector ( '#pf-dz' ) ;
dz . files = e . dataTransfer . files ;
$ ( '#composeModal' ) . modal ( 'show' ) ;
self . mediaUpload ( ) ;
}
window . addEventListener ( 'dragenter' , function ( e ) {
} ) ;
pdz . addEventListener ( 'dragenter' , allowDrag ) ;
pdz . addEventListener ( 'dragover' , allowDrag ) ;
pdz . addEventListener ( 'dragleave' , function ( e ) {
//
} ) ;
pdz . addEventListener ( 'drop' , handleDrop ) ;
} ,
2019-03-26 04:22:25 +00:00
toggleFilter ( e , filter ) {
this . media [ this . carouselCursor ] . filter _class = filter ;
2019-02-27 07:03:46 +00:00
} ,
updateMedia ( ) {
this . mediaDrawer = false ;
} ,
deleteMedia ( ) {
2019-07-20 02:31:29 +00:00
if ( window . confirm ( 'Are you sure you want to delete this media?' ) == false ) {
2019-03-26 04:22:25 +00:00
return ;
}
2019-02-27 07:03:46 +00:00
let id = this . media [ this . carouselCursor ] . id ;
axios . delete ( '/api/v1/media' , {
params : {
id : id
}
} ) . then ( res => {
2019-03-26 04:22:25 +00:00
if ( this . media . length == 1 ) {
2019-02-27 07:03:46 +00:00
this . mediaDrawer = false ;
2019-03-26 04:22:25 +00:00
this . ids = [ ] ;
this . media = [ ] ;
this . carouselCursor = 0 ;
2019-02-27 07:03:46 +00:00
}
this . ids . splice ( this . carouselCursor , 1 ) ;
this . media . splice ( this . carouselCursor , 1 ) ;
} ) . catch ( err => {
swal ( 'Whoops!' , 'An error occured when attempting to delete this, please try again' , 'error' ) ;
} ) ;
} ,
mediaAltText ( ) {
2019-03-26 04:22:25 +00:00
return ;
// deprecate
2019-02-27 07:03:46 +00:00
swal ( {
text : 'Add a media description' ,
content : "input"
} ) . then ( val => {
let media = this . media [ this . carouselCursor ] ;
media . alt = val ;
} ) ;
} ,
mediaLicense ( ) {
2019-03-26 04:22:25 +00:00
return ;
// deprecate
2019-02-27 07:03:46 +00:00
swal ( {
text : 'Add a media license' ,
content : "input" ,
button : {
text : "Update" ,
closeModal : true ,
} ,
} ) . then ( val => {
let media = this . media [ this . carouselCursor ] ;
media . license = val ;
} ) ;
} ,
compose ( ) {
2019-03-26 04:22:25 +00:00
let state = this . composeState ;
2019-06-11 18:50:35 +00:00
if ( this . uploadProgress != 100 || this . ids . length == 0 ) {
return ;
}
2019-06-19 08:54:21 +00:00
if ( this . composeText . length > this . config . uploader . max _caption _length ) {
swal ( 'Error' , 'Caption is too long' , 'error' ) ;
return ;
}
2019-03-26 04:22:25 +00:00
switch ( state ) {
case 'publish' :
if ( this . media . length == 0 ) {
swal ( 'Whoops!' , 'You need to add media before you can save this!' , 'warning' ) ;
return ;
}
if ( this . composeText == 'Add optional caption...' ) {
this . composeText = '' ;
}
let data = {
media : this . media ,
caption : this . composeText ,
visibility : this . visibility ,
2019-09-04 02:31:51 +00:00
cw : this . nsfw ,
comments _disabled : this . commentsDisabled ,
place : this . place
2019-03-26 04:22:25 +00:00
} ;
2019-09-04 02:31:51 +00:00
axios . post ( '/api/local/status/compose' , data )
2019-03-26 04:22:25 +00:00
. then ( res => {
let data = res . data ;
window . location . href = data ;
} ) . catch ( err => {
swal ( 'Oops, something went wrong!' , 'An unexpected error occurred.' , 'error' ) ;
} ) ;
return ;
break ;
case 'delete' :
this . mediaDrawer = false ;
this . ids = [ ] ;
this . media = [ ] ;
this . carouselCursor = 0 ;
this . composeText = '' ;
this . composeTextLength = 0 ;
$ ( '#composeModal' ) . modal ( 'hide' ) ;
return ;
break ;
2019-02-27 07:03:46 +00:00
}
2019-03-26 04:22:25 +00:00
} ,
about ( ) {
let text = document . createElement ( 'div' ) ;
text . innerHTML = `
< p class = "small font-weight-bold" > Please visit the < a href = "/site/kb/sharing-media" > Sharing Media < / a > page for more info . < / p >
` ;
swal ( {
title : 'Compose UI v3' ,
content : text ,
icon : 'info'
2019-02-27 07:03:46 +00:00
} ) ;
2019-03-26 04:22:25 +00:00
} ,
closeModal ( ) {
2019-06-03 19:24:48 +00:00
this . composeType = '' ;
2019-03-26 04:22:25 +00:00
$ ( '#composeModal' ) . modal ( 'hide' ) ;
2019-06-04 03:04:39 +00:00
} ,
composeMessage ( ) {
let config = this . config ;
let composeType = this . composeType ;
let video = config . uploader . media _types . includes ( 'video/mp4' ) ;
return video ?
'Click here to add photos or videos' :
'Click here to add photos' ;
2019-07-18 01:03:46 +00:00
} ,
createCollection ( ) {
window . location . href = '/i/collections/create' ;
2019-08-05 04:02:10 +00:00
} ,
2019-09-04 02:31:51 +00:00
nextPage ( ) {
switch ( this . page ) {
case 1 :
this . page = 3 ;
break ;
case 2 :
this . pageLoading = true ;
let self = this ;
2019-09-05 19:58:27 +00:00
this . $refs . cropper . getCroppedCanvas ( {
maxWidth : 4096 ,
maxHeight : 4096 ,
fillColor : '#fff' ,
imageSmoothingEnabled : false ,
imageSmoothingQuality : 'high' ,
} ) . toBlob ( function ( blob ) {
2019-09-04 02:31:51 +00:00
let data = new FormData ( ) ;
data . append ( 'file' , blob ) ;
let url = '/api/local/compose/media/update/' + self . ids [ self . carouselCursor ] ;
axios . post ( url , data ) . then ( res => {
self . media [ self . carouselCursor ] . url = res . data . url ;
self . pageLoading = false ;
self . page ++ ;
} ) . catch ( err => {
} ) ;
} ) ;
break ;
case 3 :
case 4 :
this . page ++ ;
break ;
}
} ,
rotate ( ) {
this . $refs . cropper . rotate ( 90 ) ;
} ,
changeAspect ( ratio ) {
this . cropper . aspectRatio = ratio ;
this . $refs . cropper . setAspectRatio ( ratio ) ;
} ,
2019-08-05 04:02:10 +00:00
maxSize ( ) {
let limit = this . config . uploader . max _photo _size ;
return limit / 1000 + ' MB' ;
} ,
acceptedFormats ( ) {
let formats = this . config . uploader . media _types ;
return formats . split ( ',' ) . map ( f => {
return ' ' + f . split ( '/' ) [ 1 ] ;
} ) . toString ( ) ;
2019-09-04 02:31:51 +00:00
} ,
showTagCard ( ) {
this . pageTitle = 'Tag People' ;
this . page = 'tagPeople' ;
} ,
showLocationCard ( ) {
this . pageTitle = 'Add Location' ;
this . page = 'addLocation' ;
} ,
showAdvancedSettingsCard ( ) {
this . pageTitle = 'Advanced Settings' ;
this . page = 'advancedSettings' ;
} ,
locationSearch ( input ) {
if ( input . length < 1 ) { return [ ] ; } ;
let results = [ ] ;
return axios . get ( '/api/local/compose/location/search' , {
params : {
q : input
}
} ) . then ( res => {
return res . data ;
} ) ;
} ,
getResultValue ( result ) {
return result . name + ', ' + result . country
} ,
onSubmitLocation ( result ) {
this . place = result ;
this . pageTitle = '' ;
this . page = 4 ;
return ;
} ,
goBack ( ) {
this . pageTitle = '' ;
if ( this . page == 'addToStory' ) {
this . page = 1 ;
} else {
this . namedPages . indexOf ( this . page ) != - 1 ? this . page = 4 : this . page -- ;
}
} ,
showVisibilityCard ( ) {
this . pageTitle = 'Post Visibility' ;
this . page = 'visibility' ;
} ,
showAddToStoryCard ( ) {
this . pageTitle = 'Add to Story' ;
this . page = 'addToStory' ;
} ,
toggleVisibility ( state ) {
let tags = {
public : 'Public' ,
private : 'Followers Only' ,
unlisted : 'Unlisted'
}
this . visibility = state ;
this . visibilityTag = tags [ state ] ;
this . pageTitle = '' ;
this . page = 4 ;
2019-02-27 07:03:46 +00:00
}
}
}
2019-05-14 13:54:27 +00:00
< / script >
