mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 12:16:07 +00:00
![Dan Brown](/assets/img/avatar_default.png)
Added use of more accessible tags to create tabbed-interfaces then updated css and JS to require use of those attributes rather than custom techniques. Updated relevant parts of app. Some custom parts using their own tabs though, something to improve in future.
76 lines
2.6 KiB
JavaScript
76 lines
2.6 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('attachment-panel-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');
|
|
}
|
|
|
|
} |