pinafore/routes/_components/compose/ComposeToolbar.html

91 lines
2.6 KiB
HTML

<div class="compose-box-toolbar">
<IconButton
label="Insert emoji"
href="#fa-smile"
on:click="onEmojiClick()"
/>
<IconButton
className="{{$uploadingMedia ? 'spin' : ''}}"
label="Add media"
href="{{$uploadingMedia ? '#fa-spinner' : '#fa-camera'}}"
on:click="onMediaClick()"
disabled="{{$uploadingMedia || (composeMedia.length === 4)}}"
/>
<IconButton
label="Adjust privacy (currently {{postPrivacy.label}})"
href="{{postPrivacy.icon}}"
on:click="onPostPrivacyClick()"
/>
<IconButton
label="Add content warning"
href="#fa-exclamation-triangle"
/>
<input ref:input
on:change="onFileChange(event)"
style="display: none;"
type="file"
accept=".jpg,.jpeg,.png,.gif,.webm,.mp4,.m4v,image/jpeg,image/png,image/gif,video/webm,video/mp4">
</div>
<style>
.compose-box-toolbar {
grid-area: toolbar;
align-self: center;
display: flex;
align-items: center;
}
</style>
<script>
import IconButton from '../IconButton.html'
import { store } from '../../_store/store'
import { updateCustomEmojiForInstance } from '../../_actions/emoji'
import { importDialogs } from '../../_utils/asyncModules'
import { doMediaUpload } from '../../_actions/media'
import { POST_PRIVACY_OPTIONS } from '../../_static/statuses'
export default {
oncreate() {
if (process.env.NODE_ENV !== 'production') {
window.__fakeFileInput = (file) => {
this.onFileChange({
target: {
files: [file]
}
})
}
}
},
components: {
IconButton
},
store: () => store,
methods: {
async onEmojiClick() {
/* no await */ updateCustomEmojiForInstance(this.store.get('currentInstance'))
let dialogs = await importDialogs()
dialogs.showEmojiDialog()
},
onMediaClick() {
this.refs.input.click()
},
onFileChange(e) {
let file = e.target.files[0]
let realm = this.get('realm')
doMediaUpload(realm, file)
},
async onPostPrivacyClick() {
let dialogs = await importDialogs()
dialogs.showPostPrivacyDialog(this.get('realm'))
}
},
computed: {
composeData: ($currentComposeData, realm) => $currentComposeData[realm] || {},
composeMedia: (composeData) => composeData.media || [],
postPrivacy: (postPrivacyKey) => {
return POST_PRIVACY_OPTIONS.find(_ => _.key === postPrivacyKey)
},
postPrivacyKey: (composeData, $currentVerifyCredentials) => {
return composeData.postPrivacy || $currentVerifyCredentials.source.privacy
}
}
}
</script>