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

   1 import {showLoading} from '../services/dom.ts';
   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.linksContainer = this.$refs.linksContainer;
  12         this.listPanel = this.$refs.listPanel;
  13         this.attachLinkButton = this.$refs.attachLinkButton;
  14
  15         this.setupListeners();
  16     }
  17
  18     setupListeners() {
  19         const reloadListBound = this.reloadList.bind(this);
  20         this.container.addEventListener('dropzone-upload-success', reloadListBound);
  21         this.container.addEventListener('ajax-form-success', reloadListBound);
  22
  23         this.container.addEventListener('sortable-list-sort', event => {
  24             this.updateOrder(event.detail.ids);
  25         });
  26
  27         this.container.addEventListener('event-emit-select-edit', event => {
  28             this.startEdit(event.detail.id);
  29         });
  30
  31         this.container.addEventListener('event-emit-select-edit-back', () => {
  32             this.stopEdit();
  33         });
  34
  35         this.container.addEventListener('event-emit-select-insert', event => {
  36             const insertContent = event.target.closest('[data-drag-content]').getAttribute('data-drag-content');
  37             const contentTypes = JSON.parse(insertContent);
  38             window.$events.emit('editor::insert', {
  39                 html: contentTypes['text/html'],
  40                 markdown: contentTypes['text/plain'],
  41             });
  42         });
  43
  44         this.attachLinkButton.addEventListener('click', () => {
  45             this.showSection('links');
  46         });
  47     }
  48
  49     showSection(section) {
  50         const sectionMap = {
  51             links: this.linksContainer,
  52             edit: this.editContainer,
  53             list: this.listContainer,
  54         };
  55
  56         for (const [name, elem] of Object.entries(sectionMap)) {
  57             elem.toggleAttribute('hidden', name !== section);
  58         }
  59     }
  60
  61     reloadList() {
  62         this.stopEdit();
  63         window.$http.get(`/attachments/get/page/${this.pageId}`).then(resp => {
  64             this.listPanel.innerHTML = resp.data;
  65             window.$components.init(this.listPanel);
  66         });
  67     }
  68
  69     updateOrder(idOrder) {
  70         window.$http.put(`/attachments/sort/page/${this.pageId}`, {order: idOrder}).then(resp => {
  71             window.$events.emit('success', resp.data.message);
  72         });
  73     }
  74
  75     async startEdit(id) {
  76         this.showSection('edit');
  77
  78         showLoading(this.editContainer);
  79         const resp = await window.$http.get(`/attachments/edit/${id}`);
  80         this.editContainer.innerHTML = resp.data;
  81         window.$components.init(this.editContainer);
  82     }
  83
  84     stopEdit() {
  85         this.showSection('list');
  86     }
  87
  88 }