ComposeModal.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512
  1. <template>
  2. <div>
  3. <input type="file" name="media" class="d-none file-input" multiple="" v-bind:accept="config.uploader.media_types">
  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 v-show="media.length > 0" class="dropdown-item small font-weight-bold" v-on:click="mediaDrawer = !mediaDrawer">{{mediaDrawer ? 'Hide' : 'Show'}} Media Toolbar</div>
  18. <div class="dropdown-item small font-weight-bold" v-on:click="about">About</div>
  19. <div class="dropdown-divider"></div>
  20. <div class="dropdown-item small font-weight-bold" v-on:click="closeModal">Close</div>
  21. </div>
  22. </div>
  23. </div>
  24. </div>
  25. <div class="postPresenterContainer">
  26. <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()">
  27. <p class="text-center mb-0 font-weight-bold p-5">Click here to add photos.</p>
  28. </div>
  29. <div v-if="ids.length > 0">
  30. <b-carousel id="p-carousel"
  31. style="text-shadow: 1px 1px 2px #333;"
  32. controls
  33. indicators
  34. background="#ffffff"
  35. :interval="0"
  36. v-model="carouselCursor"
  37. >
  38. <b-carousel-slide v-if="ids.length > 0" v-for="(preview, index) in media" :key="'preview_media_'+index">
  39. <div slot="img" :class="[media[index].filter_class?media[index].filter_class + ' cursor-pointer':' cursor-pointer']" v-on:click="addMedia()">
  40. <img class="d-block img-fluid w-100" :src="preview.url" :alt="preview.description" :title="preview.description">
  41. </div>
  42. </b-carousel-slide>
  43. </b-carousel>
  44. </div>
  45. <div v-if="mediaDrawer" class="bg-dark align-items-center">
  46. <ul class="nav media-drawer-filters text-center">
  47. <li class="nav-item">
  48. <div class="p-1 pt-3">
  49. <img :src="media[carouselCursor].url" width="100px" height="60px" v-on:click.prevent="toggleFilter($event, null)" class="cursor-pointer">
  50. </div>
  51. <a :class="[media[carouselCursor].filter_class == null ? 'nav-link text-white active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, null)">No Filter</a>
  52. </li>
  53. <li class="nav-item" v-for="(filter, index) in filters">
  54. <div class="p-1 pt-3">
  55. <div :class="filter[1]" v-on:click.prevent="toggleFilter($event, filter[1])">
  56. <img :src="media[carouselCursor].url" width="100px" height="60px" class="">
  57. </div>
  58. </div>
  59. <a :class="[media[carouselCursor].filter_class == filter[1] ? 'nav-link text-white active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, filter[1])">{{filter[0]}}</a>
  60. </li>
  61. </ul>
  62. </div>
  63. <div v-if="mediaDrawer" class="bg-lighter p-2 row">
  64. <div class="col-12">
  65. <div class="form-group">
  66. <input type="text" class="form-control" v-model="media[carouselCursor].alt" placeholder="Optional image description">
  67. </div>
  68. <div class="form-group">
  69. <input type="text" class="form-control" v-model="media[carouselCursor].license" placeholder="Optional media license">
  70. </div>
  71. </div>
  72. <div class="col-6 pt-2">
  73. <!-- <button class="btn btn-outline-secondary btn-sm mr-1"><i class="fas fa-map-marker-alt"></i></button>
  74. <button class="btn btn-outline-secondary btn-sm"><i class="fas fa-tools"></i></button> -->
  75. </div>
  76. <div class="col-6 text-right pt-2">
  77. <button class="btn btn-outline-danger btn-sm font-weight-bold mr-1" v-on:click="deleteMedia()"><i class="fas fa-trash"></i></button>
  78. <button class="btn btn-outline-secondary btn-sm font-weight-bold" v-on:click="updateMedia()">Close</button>
  79. </div>
  80. </div>
  81. </div>
  82. <div :class="[mediaDrawer?'glass card-body disabled':'card-body']">
  83. <div class="reactions my-1">
  84. <h3 class="far fa-heart pr-3 m-0 text-lighter" title="Like"></h3>
  85. <h3 class="far fa-comment pr-3 m-0 text-lighter" title="Comment"></h3>
  86. </div>
  87. <div class="likes font-weight-bold">
  88. <span class="like-count">0</span> likes
  89. </div>
  90. <div class="caption">
  91. <p class="mb-2 read-more" style="overflow: hidden;">
  92. <span class="username font-weight-bold d-inline-block clearfix">
  93. <bdi><a class="text-dark" :href="profile.url">{{profile.username}}</a></bdi>
  94. </span>
  95. <span contenteditable="" style="outline:none;" v-on:keyup="textWatcher"></span>
  96. </p>
  97. </div>
  98. <div class="comments">
  99. </div>
  100. <div class="timestamp pt-1">
  101. <p class="small text-uppercase mb-0">
  102. <span class="text-muted">
  103. Draft
  104. </span>
  105. </p>
  106. </div>
  107. </div>
  108. <div :class="[mediaDrawer?'glass card-footer':'card-footer']">
  109. <div class="d-flex justify-content-between align-items-center">
  110. <div>
  111. <div class="custom-control custom-switch d-inline mr-3">
  112. <input type="checkbox" class="custom-control-input" id="nsfwToggle" v-model="nsfw">
  113. <label class="custom-control-label small font-weight-bold text-muted pt-1" for="nsfwToggle">NSFW</label>
  114. </div>
  115. <div class="dropdown d-inline">
  116. <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">
  117. {{visibility[0].toUpperCase() + visibility.slice(1)}}
  118. </button>
  119. <div class="dropdown-menu" aria-labelledby="visibility" style="width: 200px;">
  120. <a :class="[visibility=='public'?'dropdown-item active':'dropdown-item']" href="#" data-id="public" data-title="Public" v-on:click.prevent="visibility = 'public'">
  121. <div class="row">
  122. <div class="d-none d-block-sm col-sm-2 px-0 text-center">
  123. <i class="fas fa-globe"></i>
  124. </div>
  125. <div class="col-12 col-sm-10 pl-2">
  126. <p class="font-weight-bold mb-0">Public</p>
  127. <p class="small mb-0">Anyone can see</p>
  128. </div>
  129. </div>
  130. </a>
  131. <a :class="[visibility=='private'?'dropdown-item active':'dropdown-item']" href="#" data-id="private" data-title="Followers Only" v-on:click.prevent="visibility = 'private'">
  132. <div class="row">
  133. <div class="d-none d-block-sm col-sm-2 px-0 text-center">
  134. <i class="fas fa-lock"></i>
  135. </div>
  136. <div class="col-12 col-sm-10 pl-2">
  137. <p class="font-weight-bold mb-0">Followers Only</p>
  138. <p class="small mb-0">Only followers can see</p>
  139. </div>
  140. </div>
  141. </a>
  142. <a :class="[visibility=='private'?'dropdown-item active':'dropdown-item']" href="#" data-id="private" data-title="Followers Only" v-on:click.prevent="visibility = 'unlisted'">
  143. <div class="row">
  144. <div class="d-none d-block-sm col-sm-2 px-0 text-center">
  145. <i class="fas fa-lock"></i>
  146. </div>
  147. <div class="col-12 col-sm-10 pl-2">
  148. <p class="font-weight-bold mb-0">Unlisted</p>
  149. <p class="small mb-0">Not listed on public timelines</p>
  150. </div>
  151. </div>
  152. </a>
  153. <!-- <a class="dropdown-item" href="#" data-id="circle" data-title="Circle">
  154. <div class="row">
  155. <div class="col-12 col-sm-2 px-0 text-center">
  156. <i class="far fa-circle"></i>
  157. </div>
  158. <div class="col-12 col-sm-10 pl-2">
  159. <p class="font-weight-bold mb-0">Circle</p>
  160. <p class="small mb-0">Select a circle</p>
  161. </div>
  162. </div>
  163. </a>
  164. <a class="dropdown-item" href="#" data-id="direct" data-title="Direct Message">
  165. <div class="row">
  166. <div class="col-12 col-sm-2 px-0 text-center">
  167. <i class="fas fa-envelope"></i>
  168. </div>
  169. <div class="col-12 col-sm-10 pl-2">
  170. <p class="font-weight-bold mb-0">Direct Message</p>
  171. <p class="small mb-0">Recipients only</p>
  172. </div>
  173. </div>
  174. </a> -->
  175. </div>
  176. </div>
  177. </div>
  178. <div class="small text-muted font-weight-bold">
  179. {{composeTextLength}} / 500
  180. </div>
  181. <div class="pl-md-5">
  182. <div class="btn-group">
  183. <button type="button" class="btn btn-primary btn-sm font-weight-bold" v-on:click="compose()">{{composeState[0].toUpperCase() + composeState.slice(1)}}</button>
  184. <button type="button" class="btn btn-primary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  185. <span class="sr-only">Toggle Dropdown</span>
  186. </button>
  187. <div class="dropdown-menu dropdown-menu-right">
  188. <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>
  189. <!-- <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>
  190. <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>
  191. <div class="dropdown-divider"></div>
  192. <a :class="[composeState == 'delete' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'delete'">Delete</a> -->
  193. </div>
  194. </div>
  195. </div>
  196. </div>
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201. </template>
  202. <style type="text/css" scoped>
  203. .glass {
  204. -webkit-filter: blur(2px);
  205. -moz-filter: blur(2px);
  206. -o-filter: blur(2px);
  207. -ms-filter: blur(2px);
  208. filter: blur(2px);
  209. width: 100%;
  210. height: 100%;
  211. }
  212. .media-drawer-filters {
  213. overflow-x: scroll;
  214. flex-wrap:unset;
  215. }
  216. .media-drawer-filters .nav-link {
  217. min-width:100px;
  218. padding-top: 1rem;
  219. padding-bottom: 1rem;
  220. }
  221. .media-drawer-filters .active {
  222. color: #fff;
  223. font-weight: bold;
  224. }
  225. .media-drawer-filters::-webkit-scrollbar {
  226. display: none;
  227. }
  228. </style>
  229. <script type="text/javascript">
  230. export default {
  231. data() {
  232. return {
  233. config: {
  234. uploader: {
  235. media_types: '',
  236. }
  237. },
  238. profile: {},
  239. composeText: 'Add optional caption...',
  240. composeTextLength: 0,
  241. nsfw: false,
  242. filters: [],
  243. ids: [],
  244. media: [],
  245. carouselCursor: 0,
  246. visibility: 'public',
  247. mediaDrawer: false,
  248. composeState: 'publish'
  249. }
  250. },
  251. beforeMount() {
  252. this.fetchConfig();
  253. this.fetchProfile();
  254. },
  255. mounted() {
  256. this.mediaWatcher();
  257. this.filters = [
  258. ['1977','filter-1977'],
  259. ['Aden','filter-aden'],
  260. ['Amaro','filter-amaro'],
  261. ['Ashby','filter-ashby'],
  262. ['Brannan','filter-brannan'],
  263. ['Brooklyn','filter-brooklyn'],
  264. ['Charmes','filter-charmes'],
  265. ['Clarendon','filter-clarendon'],
  266. ['Crema','filter-crema'],
  267. ['Dogpatch','filter-dogpatch'],
  268. ['Earlybird','filter-earlybird'],
  269. ['Gingham','filter-gingham'],
  270. ['Ginza','filter-ginza'],
  271. ['Hefe','filter-hefe'],
  272. ['Helena','filter-helena'],
  273. ['Hudson','filter-hudson'],
  274. ['Inkwell','filter-inkwell'],
  275. ['Kelvin','filter-kelvin'],
  276. ['Kuno','filter-juno'],
  277. ['Lark','filter-lark'],
  278. ['Lo-Fi','filter-lofi'],
  279. ['Ludwig','filter-ludwig'],
  280. ['Maven','filter-maven'],
  281. ['Mayfair','filter-mayfair'],
  282. ['Moon','filter-moon'],
  283. ['Nashville','filter-nashville'],
  284. ['Perpetua','filter-perpetua'],
  285. ['Poprocket','filter-poprocket'],
  286. ['Reyes','filter-reyes'],
  287. ['Rise','filter-rise'],
  288. ['Sierra','filter-sierra'],
  289. ['Skyline','filter-skyline'],
  290. ['Slumber','filter-slumber'],
  291. ['Stinson','filter-stinson'],
  292. ['Sutro','filter-sutro'],
  293. ['Toaster','filter-toaster'],
  294. ['Valencia','filter-valencia'],
  295. ['Vesper','filter-vesper'],
  296. ['Walden','filter-walden'],
  297. ['Willow','filter-willow'],
  298. ['X-Pro II','filter-xpro-ii']
  299. ];
  300. },
  301. watch: {
  302. composeText: function (newComposeText, oldComposeText) {
  303. this.debouncedTextWatcher();
  304. }
  305. },
  306. created: function() {
  307. this.debouncedTextWatcher = _.debounce(this.textWatcher, 300)
  308. },
  309. methods: {
  310. fetchConfig() {
  311. axios.get('/api/v2/config').then(res => {
  312. this.config = res.data;
  313. });
  314. },
  315. fetchProfile() {
  316. axios.get('/api/v1/accounts/verify_credentials').then(res => {
  317. this.profile = res.data;
  318. }).catch(err => {
  319. console.log(err)
  320. });
  321. },
  322. addMedia() {
  323. let el = $(event.target);
  324. el.attr('disabled', '');
  325. let fi = $('.file-input[name="media"]');
  326. fi.trigger('click');
  327. el.blur();
  328. el.removeAttr('disabled');
  329. },
  330. textWatcher() {
  331. this.composeText = event.target.innerText;
  332. this.composeTextLength = event.target.innerText.length;
  333. },
  334. mediaWatcher() {
  335. let self = this;
  336. $(document).on('change', '.file-input', function(e) {
  337. let io = document.querySelector('.file-input');
  338. Array.prototype.forEach.call(io.files, function(io, i) {
  339. if(self.media && self.media.length + i >= self.config.uploader.album_limit) {
  340. swal('Error', 'You can only upload ' + self.config.uploader.album_limit + ' photos per album', 'error');
  341. return;
  342. }
  343. let type = io.type;
  344. let acceptedMimes = self.config.uploader.media_types.split(',');
  345. let validated = $.inArray(type, acceptedMimes);
  346. if(validated == -1) {
  347. 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');
  348. return;
  349. }
  350. let form = new FormData();
  351. form.append('file', io);
  352. let xhrConfig = {
  353. onUploadProgress: function(e) {
  354. let progress = Math.round( (e.loaded * 100) / e.total );
  355. }
  356. };
  357. axios.post('/api/v1/media', form, xhrConfig)
  358. .then(function(e) {
  359. self.ids.push(e.data.id);
  360. self.media.push(e.data);
  361. setTimeout(function() {
  362. self.mediaDrawer = true;
  363. }, 1000);
  364. }).catch(function(e) {
  365. swal('Oops, something went wrong!', 'An unexpected error occurred.', 'error');
  366. });
  367. io.value = null;
  368. });
  369. });
  370. },
  371. toggleFilter(e, filter) {
  372. this.media[this.carouselCursor].filter_class = filter;
  373. },
  374. updateMedia() {
  375. this.mediaDrawer = false;
  376. },
  377. deleteMedia() {
  378. if(window.confirm('Are you sure you want to delete this photo?') == false) {
  379. return;
  380. }
  381. let id = this.media[this.carouselCursor].id;
  382. axios.delete('/api/v1/media', {
  383. params: {
  384. id: id
  385. }
  386. }).then(res => {
  387. if(this.media.length == 1) {
  388. this.mediaDrawer = false;
  389. this.ids = [];
  390. this.media = [];
  391. this.carouselCursor = 0;
  392. }
  393. this.ids.splice(this.carouselCursor, 1);
  394. this.media.splice(this.carouselCursor, 1);
  395. }).catch(err => {
  396. swal('Whoops!', 'An error occured when attempting to delete this, please try again', 'error');
  397. });
  398. },
  399. mediaAltText() {
  400. return;
  401. // deprecate
  402. swal({
  403. text: 'Add a media description',
  404. content: "input"
  405. }).then(val => {
  406. let media = this.media[this.carouselCursor];
  407. media.alt = val;
  408. });
  409. },
  410. mediaLicense() {
  411. return;
  412. // deprecate
  413. swal({
  414. text: 'Add a media license',
  415. content: "input",
  416. button: {
  417. text: "Update",
  418. closeModal: true,
  419. },
  420. }).then(val => {
  421. let media = this.media[this.carouselCursor];
  422. media.license = val;
  423. });
  424. },
  425. compose() {
  426. let state = this.composeState;
  427. switch(state) {
  428. case 'publish' :
  429. if(this.media.length == 0) {
  430. swal('Whoops!', 'You need to add media before you can save this!', 'warning');
  431. return;
  432. }
  433. if(this.composeText == 'Add optional caption...') {
  434. this.composeText = '';
  435. }
  436. let data = {
  437. media: this.media,
  438. caption: this.composeText,
  439. visibility: this.visibility,
  440. cw: this.nsfw
  441. };
  442. axios.post('/api/v2/status/compose', data)
  443. .then(res => {
  444. let data = res.data;
  445. window.location.href = data;
  446. }).catch(err => {
  447. swal('Oops, something went wrong!', 'An unexpected error occurred.', 'error');
  448. });
  449. return;
  450. break;
  451. case 'delete' :
  452. this.mediaDrawer = false;
  453. this.ids = [];
  454. this.media = [];
  455. this.carouselCursor = 0;
  456. this.composeText = '';
  457. this.composeTextLength = 0;
  458. $('#composeModal').modal('hide');
  459. return;
  460. break;
  461. }
  462. },
  463. about() {
  464. let text = document.createElement('div');
  465. text.innerHTML = `
  466. <p class="small font-weight-bold">Please visit the <a href="/site/kb/sharing-media">Sharing Media</a> page for more info.</p>
  467. `;
  468. swal({
  469. title: 'Compose UI v3',
  470. content: text,
  471. icon: 'info'
  472. });
  473. },
  474. closeModal() {
  475. $('#composeModal').modal('hide');
  476. }
  477. }
  478. }
  479. </script>