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

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