BookStack Code Mirror - bookstack/blob - resources/js/components/template-manager.js

   1 import * as DOM from '../services/dom.ts';
   2 import {Component} from './component';
   3
   4 export class TemplateManager extends Component {
   5
   6     setup() {
   7         this.container = this.$el;
   8         this.list = this.$refs.list;
   9
  10         this.searchInput = this.$refs.searchInput;
  11         this.searchButton = this.$refs.searchButton;
  12         this.searchCancel = this.$refs.searchCancel;
  13
  14         this.setupListeners();
  15     }
  16
  17     setupListeners() {
  18         // Template insert action buttons
  19         DOM.onChildEvent(this.container, '[template-action]', 'click', this.handleTemplateActionClick.bind(this));
  20
  21         // Template list pagination click
  22         DOM.onChildEvent(this.container, '.pagination a', 'click', this.handlePaginationClick.bind(this));
  23
  24         // Template list item content click
  25         DOM.onChildEvent(this.container, '.template-item-content', 'click', this.handleTemplateItemClick.bind(this));
  26
  27         // Template list item drag start
  28         DOM.onChildEvent(this.container, '.template-item', 'dragstart', this.handleTemplateItemDragStart.bind(this));
  29
  30         // Search box enter press
  31         this.searchInput.addEventListener('keypress', event => {
  32             if (event.key === 'Enter') {
  33                 event.preventDefault();
  34                 this.performSearch();
  35             }
  36         });
  37
  38         // Search submit button press
  39         this.searchButton.addEventListener('click', () => this.performSearch());
  40
  41         // Search cancel button press
  42         this.searchCancel.addEventListener('click', () => {
  43             this.searchInput.value = '';
  44             this.performSearch();
  45         });
  46     }
  47
  48     handleTemplateItemClick(event, templateItem) {
  49         const templateId = templateItem.closest('[template-id]').getAttribute('template-id');
  50         this.insertTemplate(templateId, 'replace');
  51     }
  52
  53     handleTemplateItemDragStart(event, templateItem) {
  54         const templateId = templateItem.closest('[template-id]').getAttribute('template-id');
  55         event.dataTransfer.setData('bookstack/template', templateId);
  56         event.dataTransfer.setData('text/plain', templateId);
  57     }
  58
  59     handleTemplateActionClick(event, actionButton) {
  60         event.stopPropagation();
  61
  62         const action = actionButton.getAttribute('template-action');
  63         const templateId = actionButton.closest('[template-id]').getAttribute('template-id');
  64         this.insertTemplate(templateId, action);
  65     }
  66
  67     async insertTemplate(templateId, action = 'replace') {
  68         const resp = await window.$http.get(`/templates/${templateId}`);
  69         const eventName = `editor::${action}`;
  70         window.$events.emit(eventName, resp.data);
  71     }
  72
  73     async handlePaginationClick(event, paginationLink) {
  74         event.preventDefault();
  75         const paginationUrl = paginationLink.getAttribute('href');
  76         const resp = await window.$http.get(paginationUrl);
  77         this.list.innerHTML = resp.data;
  78     }
  79
  80     async performSearch() {
  81         const searchTerm = this.searchInput.value;
  82         const resp = await window.$http.get('/templates', {
  83             search: searchTerm,
  84         });
  85         this.searchCancel.style.display = searchTerm ? 'block' : 'none';
  86         this.list.innerHTML = resp.data;
  87     }
  88
  89 }