<div class="compose-box-toolbar"> <div class="compose-box-toolbar-items"> <IconButton label="Insert emoji" href="#fa-smile" on:click="onEmojiClick()" /> <IconButton svgClassName="{{$uploadingMedia ? 'spin' : ''}}" label="Add media" href="{{$uploadingMedia ? '#fa-spinner' : '#fa-camera'}}" on:click="onMediaClick()" disabled="{{$uploadingMedia || (media.length === 4)}}" /> <IconButton label="Adjust privacy (currently {{postPrivacy.label}})" href="{{postPrivacy.icon}}" on:click="onPostPrivacyClick()" /> <IconButton label="{{contentWarningShown ? 'Remove content warning' : 'Add content warning'}}" href="#fa-exclamation-triangle" on:click="onContentWarningClick()" pressable="true" pressed="{{contentWarningShown}}" /> </div> <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"> <ComposeAutosuggest :realm :text /> </div> <style> .compose-box-toolbar { grid-area: toolbar; position: relative; align-self: center; } .compose-box-toolbar-items { display: flex; align-items: center; } </style> <script> import IconButton from '../IconButton.html' import { store } from '../../_store/store' import { importDialogs } from '../../_utils/asyncModules' import { doMediaUpload } from '../../_actions/media' import { toggleContentWarningShown } from '../../_actions/contentWarnings' import ComposeAutosuggest from './ComposeAutosuggest.html' export default { oncreate () { if (process.env.NODE_ENV !== 'production') { window.__fakeFileInput = (file) => { this.onFileChange({ target: { files: [file] } }) } } }, components: { IconButton, ComposeAutosuggest }, store: () => store, methods: { async onEmojiClick () { let dialogs = await importDialogs() let { realm } = this.get() dialogs.showEmojiDialog(realm) }, onMediaClick () { this.refs.input.click() }, onFileChange (e) { let file = e.target.files[0] let { realm } = this.get() doMediaUpload(realm, file) }, async onPostPrivacyClick () { let dialogs = await importDialogs() let { realm } = this.get() dialogs.showPostPrivacyDialog(realm) }, onContentWarningClick () { let { realm } = this.get() toggleContentWarningShown(realm) } } } </script>