1
0

ComposeModal.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437
  1. <template>
  2. <div>
  3. <input type="file" name="media" class="d-none file-input" multiple="">
  4. <div class="timeline">
  5. <div class="card status-card card-md-rounded-0">
  6. <div class="card-header d-inline-flex align-items-center bg-white">
  7. <img v-bind:src="profile.avatar" width="32px" height="32px" style="border-radius: 32px;" class="box-shadow">
  8. <a class="username font-weight-bold pl-2 text-dark" v-bind:href="profile.url">
  9. {{profile.username}}
  10. </a>
  11. <div class="text-right" style="flex-grow:1;">
  12. <div class="dropdown">
  13. <button class="btn btn-link text-dark no-caret dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Post options">
  14. <span class="fas fa-ellipsis-v fa-lg text-muted"></span>
  15. </button>
  16. <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
  17. <div class="dropdown-item small font-weight-bold" v-on:click="mediaDrawer = !mediaDrawer">Show Media Toolbar</div>
  18. <div class="dropdown-divider"></div>
  19. </div>
  20. </div>
  21. </div>
  22. </div>
  23. <div class="postPresenterContainer">
  24. <div v-if="ids.length == 0" class="w-100 h-100 bg-light py-5 cursor-pointer" style="border-bottom: 1px solid #f1f1f1" v-on:click="addMedia()">
  25. <p class="text-center mb-0 font-weight-bold p-5">Click here to add photos.</p>
  26. </div>
  27. <div v-if="ids.length > 0">
  28. <b-carousel id="p-carousel"
  29. style="text-shadow: 1px 1px 2px #333;"
  30. controls
  31. indicators
  32. background="#ffffff"
  33. :interval="0"
  34. v-model="carouselCursor"
  35. >
  36. <b-carousel-slide v-if="ids.length > 0" v-for="(preview, index) in media" :key="'preview_media_'+index">
  37. <div slot="img" :class="[media[index].filter_class?media[index].filter_class + ' cursor-pointer':' cursor-pointer']" v-on:click="addMedia()">
  38. <img class="d-block img-fluid w-100" :src="preview.url" :alt="preview.description" :title="preview.description">
  39. </div>
  40. </b-carousel-slide>
  41. </b-carousel>
  42. </div>
  43. <div v-if="mediaDrawer" class="bg-lighter p-2 row">
  44. <div class="col-4">
  45. <select class="form-control form-control-sm" id="filterSelectDropdown" v-on:change="toggleFilter($event)">
  46. <option value="none">No filter</option>
  47. <option v-for="(filter, index) in filters" :value="filter[1]" :selected="filter[1]==media[carouselCursor].filter_class?'selected':''">{{filter[0]}}</option>
  48. </select>
  49. </div>
  50. <div class="col-5">
  51. <button class="btn btn-outline-primary btn-sm mr-1" v-on:click="mediaAltText()">Alt Text</button>
  52. <button class="btn btn-outline-primary btn-sm mr-1" v-on:click="mediaLicense()">License</button>
  53. </div>
  54. <div class="col-3 text-right">
  55. <button class="btn btn-outline-danger btn-sm font-weight-bold mr-1" v-on:click="deleteMedia()"><i class="fas fa-trash"></i></button>
  56. <button class="btn btn-outline-secondary btn-sm font-weight-bold" v-on:click="updateMedia()"><i class="fas fa-times"></i></button>
  57. </div>
  58. </div>
  59. </div>
  60. <div :class="[mediaDrawer?'glass card-body disabled':'card-body']">
  61. <div class="reactions my-1">
  62. <h3 class="far fa-heart pr-3 m-0 text-lighter" title="Like"></h3>
  63. <h3 class="far fa-comment pr-3 m-0 text-lighter" title="Comment"></h3>
  64. </div>
  65. <div class="likes font-weight-bold">
  66. <span class="like-count">0</span> likes
  67. </div>
  68. <div class="caption">
  69. <p class="mb-2 read-more" style="overflow: hidden;">
  70. <span class="username font-weight-bold d-inline-block clearfix">
  71. <bdi><a class="text-dark" :href="profile.url">{{profile.username}}</a></bdi>
  72. </span>
  73. <span contenteditable="" style="outline:none;" v-on:keyup="textWatcher"></span>
  74. </p>
  75. </div>
  76. <div class="comments">
  77. </div>
  78. <div class="timestamp pt-1">
  79. <p class="small text-uppercase mb-0">
  80. <span class="text-muted">
  81. Draft
  82. </span>
  83. </p>
  84. </div>
  85. </div>
  86. <div :class="[mediaDrawer?'glass card-footer':'card-footer']">
  87. <div class="d-flex justify-content-between align-items-center">
  88. <div>
  89. <div class="custom-control custom-switch d-inline mr-3">
  90. <input type="checkbox" class="custom-control-input" id="nsfwToggle" v-model="nsfw">
  91. <label class="custom-control-label small font-weight-bold text-muted pt-1" for="nsfwToggle">NSFW</label>
  92. </div>
  93. <div class="dropdown d-inline">
  94. <button class="btn btn-outline-secondary btn-sm py-0 dropdown-toggle" type="button" id="visibility" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  95. Public
  96. </button>
  97. <div class="dropdown-menu" aria-labelledby="visibility" style="width: 200px;">
  98. <a class="dropdown-item active" href="#" data-id="public" data-title="Public">
  99. <div class="row">
  100. <div class="col-12 col-sm-2 px-0 text-center">
  101. <i class="fas fa-globe"></i>
  102. </div>
  103. <div class="col-12 col-sm-10 pl-2">
  104. <p class="font-weight-bold mb-0">Public</p>
  105. <p class="small mb-0">Anyone can see</p>
  106. </div>
  107. </div>
  108. </a>
  109. <a class="dropdown-item" href="#" data-id="private" data-title="Followers Only">
  110. <div class="row">
  111. <div class="col-12 col-sm-2 px-0 text-center">
  112. <i class="fas fa-lock"></i>
  113. </div>
  114. <div class="col-12 col-sm-10 pl-2">
  115. <p class="font-weight-bold mb-0">Followers Only</p>
  116. <p class="small mb-0">Only followers can see</p>
  117. </div>
  118. </div>
  119. </a>
  120. <a class="dropdown-item" href="#" data-id="circle" data-title="Circle">
  121. <div class="row">
  122. <div class="col-12 col-sm-2 px-0 text-center">
  123. <i class="far fa-circle"></i>
  124. </div>
  125. <div class="col-12 col-sm-10 pl-2">
  126. <p class="font-weight-bold mb-0">Circle</p>
  127. <p class="small mb-0">Select a circle</p>
  128. </div>
  129. </div>
  130. </a>
  131. <a class="dropdown-item" href="#" data-id="direct" data-title="Direct Message">
  132. <div class="row">
  133. <div class="col-12 col-sm-2 px-0 text-center">
  134. <i class="fas fa-envelope"></i>
  135. </div>
  136. <div class="col-12 col-sm-10 pl-2">
  137. <p class="font-weight-bold mb-0">Direct Message</p>
  138. <p class="small mb-0">Recipients only</p>
  139. </div>
  140. </div>
  141. </a>
  142. </div>
  143. </div>
  144. </div>
  145. <div class="small text-muted font-weight-bold">
  146. {{composeTextLength}} / 500
  147. </div>
  148. <div class="pl-md-5">
  149. <div class="btn-group">
  150. <button type="button" class="btn btn-primary btn-sm font-weight-bold" v-on:click="compose()">{{composeState[0].toUpperCase() + composeState.slice(1)}}</button>
  151. <button type="button" class="btn btn-primary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  152. <span class="sr-only">Toggle Dropdown</span>
  153. </button>
  154. <div class="dropdown-menu dropdown-menu-right">
  155. <a :class="[composeState == 'publish' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'publish'">Publish now</a>
  156. <a :class="[composeState == 'draft' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'draft'">Save as draft</a>
  157. <a :class="[composeState == 'schedule' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'schedule'">Schedule for later</a>
  158. <div class="dropdown-divider"></div>
  159. <a :class="[composeState == 'delete' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'delete'">Delete</a>
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164. </div>
  165. </div>
  166. </div>
  167. </div>
  168. </template>
  169. <style type="text/css" scoped>
  170. .glass {
  171. -webkit-filter: blur(2px);
  172. -moz-filter: blur(2px);
  173. -o-filter: blur(2px);
  174. -ms-filter: blur(2px);
  175. filter: blur(2px);
  176. width: 100%;
  177. height: 100%;
  178. }
  179. </style>
  180. <script type="text/javascript">
  181. export default {
  182. data() {
  183. return {
  184. profile: {},
  185. create: {
  186. hasGeneratedSelect: false,
  187. selectedFilter: false,
  188. currentFilterName: false,
  189. currentFilterClass: false
  190. },
  191. composeText: '',
  192. composeTextLength: 27,
  193. nsfw: false,
  194. filters: [],
  195. ids: [],
  196. media: [],
  197. meta: {
  198. 'id': false,
  199. 'cursor': false,
  200. 'cw': false,
  201. 'alt': null,
  202. 'filter': null,
  203. 'license': null,
  204. 'preserve_exif': false,
  205. },
  206. cursor: 1,
  207. carouselCursor: 0,
  208. visibility: 'public',
  209. cropmode: false,
  210. croppie: false,
  211. limit: pixelfed.settings.maxAlbumLength,
  212. acceptedMimes: pixelfed.settings.acceptedMimes,
  213. mediaDrawer: false,
  214. composeState: 'publish',
  215. filter: {
  216. name: null,
  217. class: null
  218. }
  219. }
  220. },
  221. beforeMount() {
  222. this.fetchProfile();
  223. },
  224. mounted() {
  225. this.mediaWatcher();
  226. this.filters = [
  227. ['1977','filter-1977'],
  228. ['Aden','filter-aden'],
  229. ['Amaro','filter-amaro'],
  230. ['Ashby','filter-ashby'],
  231. ['Brannan','filter-brannan'],
  232. ['Brooklyn','filter-brooklyn'],
  233. ['Charmes','filter-charmes'],
  234. ['Clarendon','filter-clarendon'],
  235. ['Crema','filter-crema'],
  236. ['Dogpatch','filter-dogpatch'],
  237. ['Earlybird','filter-earlybird'],
  238. ['Gingham','filter-gingham'],
  239. ['Ginza','filter-ginza'],
  240. ['Hefe','filter-hefe'],
  241. ['Helena','filter-helena'],
  242. ['Hudson','filter-hudson'],
  243. ['Inkwell','filter-inkwell'],
  244. ['Kelvin','filter-kelvin'],
  245. ['Kuno','filter-juno'],
  246. ['Lark','filter-lark'],
  247. ['Lo-Fi','filter-lofi'],
  248. ['Ludwig','filter-ludwig'],
  249. ['Maven','filter-maven'],
  250. ['Mayfair','filter-mayfair'],
  251. ['Moon','filter-moon'],
  252. ['Nashville','filter-nashville'],
  253. ['Perpetua','filter-perpetua'],
  254. ['Poprocket','filter-poprocket'],
  255. ['Reyes','filter-reyes'],
  256. ['Rise','filter-rise'],
  257. ['Sierra','filter-sierra'],
  258. ['Skyline','filter-skyline'],
  259. ['Slumber','filter-slumber'],
  260. ['Stinson','filter-stinson'],
  261. ['Sutro','filter-sutro'],
  262. ['Toaster','filter-toaster'],
  263. ['Valencia','filter-valencia'],
  264. ['Vesper','filter-vesper'],
  265. ['Walden','filter-walden'],
  266. ['Willow','filter-willow'],
  267. ['X-Pro II','filter-xpro-ii']
  268. ];
  269. },
  270. watch: {
  271. composeText: function (newComposeText, oldComposeText) {
  272. this.debouncedTextWatcher();
  273. }
  274. },
  275. created: function() {
  276. this.debouncedTextWatcher = _.debounce(this.textWatcher, 300)
  277. },
  278. methods: {
  279. fetchProfile() {
  280. axios.get('/api/v1/accounts/verify_credentials').then(res => {
  281. this.profile = res.data;
  282. }).catch(err => {
  283. console.log(err)
  284. });
  285. },
  286. addMedia() {
  287. let el = $(event.target);
  288. el.attr('disabled', '');
  289. let fi = $('.file-input[name="media"]');
  290. fi.trigger('click');
  291. el.blur();
  292. el.removeAttr('disabled');
  293. },
  294. textWatcher() {
  295. this.composeText = event.target.innerText;
  296. this.composeTextLength = event.target.innerText.length;
  297. },
  298. mediaWatcher() {
  299. let self = this;
  300. $(document).on('change', '.file-input', function(e) {
  301. let io = document.querySelector('.file-input');
  302. Array.prototype.forEach.call(io.files, function(io, i) {
  303. if(self.media && self.media.length + i >= self.limit) {
  304. return;
  305. }
  306. let type = io.type;
  307. let acceptedMimes = pixelfed.settings.acceptedMimes.split(',');
  308. let validated = $.inArray(type, acceptedMimes);
  309. if(validated == -1) {
  310. swal('Invalid File Type', 'The file you are trying to add is not a valid mime type. Please upload a '+pixelfed.uploader.acceptedMimes+' only.', 'error');
  311. return;
  312. }
  313. let form = new FormData();
  314. form.append('file', io);
  315. let config = {
  316. onUploadProgress: function(e) {
  317. let progress = Math.round( (e.loaded * 100) / e.total );
  318. }
  319. };
  320. axios.post('/api/v1/media', form, config)
  321. .then(function(e) {
  322. self.ids.push(e.data.id);
  323. self.media.push(e.data);
  324. self.mediaDrawer = true;
  325. }).catch(function(e) {
  326. swal('Oops, something went wrong!', 'An unexpected error occurred.', 'error');
  327. });
  328. io.value = null;
  329. });
  330. });
  331. },
  332. toggleFilter(e) {
  333. this.media[this.carouselCursor].filter_class = e.target.value;
  334. // todo: deprecate
  335. this.create.selectedFilter = true;
  336. this.create.filterName = val;
  337. this.create.filterClass = val;
  338. this.create.currentFilterName = val;
  339. this.create.currentFilterClass = val;
  340. this.filter.class = val;
  341. },
  342. updateMedia() {
  343. this.mediaDrawer = false;
  344. },
  345. deleteMedia() {
  346. let id = this.media[this.carouselCursor].id;
  347. axios.delete('/api/v1/media', {
  348. params: {
  349. id: id
  350. }
  351. }).then(res => {
  352. if(this.media.length == 0) {
  353. this.mediaDrawer = false;
  354. }
  355. this.ids.splice(this.carouselCursor, 1);
  356. this.media.splice(this.carouselCursor, 1);
  357. }).catch(err => {
  358. swal('Whoops!', 'An error occured when attempting to delete this, please try again', 'error');
  359. });
  360. },
  361. mediaAltText() {
  362. swal({
  363. text: 'Add a media description',
  364. content: "input"
  365. }).then(val => {
  366. let media = this.media[this.carouselCursor];
  367. media.alt = val;
  368. });
  369. },
  370. mediaLicense() {
  371. swal({
  372. text: 'Add a media license',
  373. content: "input",
  374. button: {
  375. text: "Update",
  376. closeModal: true,
  377. },
  378. }).then(val => {
  379. let media = this.media[this.carouselCursor];
  380. media.license = val;
  381. });
  382. },
  383. compose() {
  384. if(this.media.length == 0) {
  385. swal('Whoops!', 'You need to add media before you can save this!', 'warning');
  386. return;
  387. }
  388. let data = {
  389. media: this.media,
  390. caption: this.composeText,
  391. visibility: this.visibility,
  392. cw: this.nsfw
  393. };
  394. axios.post('/api/local/status/compose', data)
  395. .then(res => {
  396. let data = res.data;
  397. window.location.href = data;
  398. }).catch(err => {
  399. swal('Oops, something went wrong!', 'An unexpected error occurred.', 'error');
  400. });
  401. }
  402. }
  403. }
  404. </script>