BookStack Code Mirror - bookstack/blob - resources/js/components/attachments.js

   1 import {showLoading} from '../services/dom';
   2 import {Component} from './component';
   3
   4 export class Attachments extends Component {
   5
   6     setup() {
   7         this.container = this.$el;
   8         this.pageId = this.$opts.pageId;
   9         this.editContainer = this.$refs.editContainer;
  10         this.listContainer = this.$refs.listContainer;
  11         this.mainTabs = this.$refs.mainTabs;
  12         this.list = this.$refs.list;
  13
  14         this.setupListeners();
  15     }
  16
  17     setupListeners() {
  18         const reloadListBound = this.reloadList.bind(this);
  19         this.container.addEventListener('dropzone-success', reloadListBound);
  20         this.container.addEventListener('ajax-form-success', reloadListBound);
  21
  22         this.container.addEventListener('sortable-list-sort', event => {
  23             this.updateOrder(event.detail.ids);
  24         });
  25
  26         this.container.addEventListener('event-emit-select-edit', event => {
  27             this.startEdit(event.detail.id);
  28         });
  29
  30         this.container.addEventListener('event-emit-select-edit-back', event => {
  31             this.stopEdit();
  32         });
  33
  34         this.container.addEventListener('event-emit-select-insert', event => {
  35             const insertContent = event.target.closest('[data-drag-content]').getAttribute('data-drag-content');
  36             const contentTypes = JSON.parse(insertContent);
  37             window.$events.emit('editor::insert', {
  38                 html: contentTypes['text/html'],
  39                 markdown: contentTypes['text/plain'],
  40             });
  41         });
  42     }
  43
  44     reloadList() {
  45         this.stopEdit();
  46         /** @var {Tabs} */
  47         const tabs = window.$components.firstOnElement(this.mainTabs, 'tabs');
  48         tabs.show('attachment-panel-items');
  49         window.$http.get(`/attachments/get/page/${this.pageId}`).then(resp => {
  50             this.list.innerHTML = resp.data;
  51             window.$components.init(this.list);
  52         });
  53     }
  54
  55     updateOrder(idOrder) {
  56         window.$http.put(`/attachments/sort/page/${this.pageId}`, {order: idOrder}).then(resp => {
  57             window.$events.emit('success', resp.data.message);
  58         });
  59     }
  60
  61     async startEdit(id) {
  62         this.editContainer.classList.remove('hidden');
  63         this.listContainer.classList.add('hidden');
  64
  65         showLoading(this.editContainer);
  66         const resp = await window.$http.get(`/attachments/edit/${id}`);
  67         this.editContainer.innerHTML = resp.data;
  68         window.$components.init(this.editContainer);
  69     }
  70
  71     stopEdit() {
  72         this.editContainer.classList.add('hidden');
  73         this.listContainer.classList.remove('hidden');
  74     }
  75
  76 }