ComposeModal.vue 17 KB

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