mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-27 12:41:58 +00:00
![Dan Brown](/assets/img/avatar_default.png)
Old system was hard to track in terms of usage and it's application of 'components' properties directly to elements was shoddy. This routes usage via the components service, with element-specific component usage tracked via a local weakmap. Updated existing found usages to use the new system.
76 lines
2.5 KiB
JavaScript
76 lines
2.5 KiB
JavaScript
import {showLoading} from "../services/dom";
|
|
import {Component} from "./component";
|
|
|
|
export class Attachments extends Component {
|
|
|
|
setup() {
|
|
this.container = this.$el;
|
|
this.pageId = this.$opts.pageId;
|
|
this.editContainer = this.$refs.editContainer;
|
|
this.listContainer = this.$refs.listContainer;
|
|
this.mainTabs = this.$refs.mainTabs;
|
|
this.list = this.$refs.list;
|
|
|
|
this.setupListeners();
|
|
}
|
|
|
|
setupListeners() {
|
|
const reloadListBound = this.reloadList.bind(this);
|
|
this.container.addEventListener('dropzone-success', reloadListBound);
|
|
this.container.addEventListener('ajax-form-success', reloadListBound);
|
|
|
|
this.container.addEventListener('sortable-list-sort', event => {
|
|
this.updateOrder(event.detail.ids);
|
|
});
|
|
|
|
this.container.addEventListener('event-emit-select-edit', event => {
|
|
this.startEdit(event.detail.id);
|
|
});
|
|
|
|
this.container.addEventListener('event-emit-select-edit-back', event => {
|
|
this.stopEdit();
|
|
});
|
|
|
|
this.container.addEventListener('event-emit-select-insert', event => {
|
|
const insertContent = event.target.closest('[data-drag-content]').getAttribute('data-drag-content');
|
|
const contentTypes = JSON.parse(insertContent);
|
|
window.$events.emit('editor::insert', {
|
|
html: contentTypes['text/html'],
|
|
markdown: contentTypes['text/plain'],
|
|
});
|
|
});
|
|
}
|
|
|
|
reloadList() {
|
|
this.stopEdit();
|
|
/** @var {Tabs} */
|
|
const tabs = window.$components.firstOnElement(this.mainTabs, 'tabs');
|
|
tabs.show('items');
|
|
window.$http.get(`/attachments/get/page/${this.pageId}`).then(resp => {
|
|
this.list.innerHTML = resp.data;
|
|
window.$components.init(this.list);
|
|
});
|
|
}
|
|
|
|
updateOrder(idOrder) {
|
|
window.$http.put(`/attachments/sort/page/${this.pageId}`, {order: idOrder}).then(resp => {
|
|
window.$events.emit('success', resp.data.message);
|
|
});
|
|
}
|
|
|
|
async startEdit(id) {
|
|
this.editContainer.classList.remove('hidden');
|
|
this.listContainer.classList.add('hidden');
|
|
|
|
showLoading(this.editContainer);
|
|
const resp = await window.$http.get(`/attachments/edit/${id}`);
|
|
this.editContainer.innerHTML = resp.data;
|
|
window.$components.init(this.editContainer);
|
|
}
|
|
|
|
stopEdit() {
|
|
this.editContainer.classList.add('hidden');
|
|
this.listContainer.classList.remove('hidden');
|
|
}
|
|
|
|
} |