SelectTreeElement.ts 3.11 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
/*
* This file is part of the TYPO3 CMS project.
*
* It is free software; you can redistribute it and/or modify it under
* the terms of the GNU General Public License, either version 2
* of the License, or any later version.
*
* For the full copyright and license information, please read the
* LICENSE.txt file that was distributed with this source code.
*
* The TYPO3 project - inspiring people to share!
*/

14
import {SelectTree} from './SelectTree';
15
import {TreeToolbar} from './TreeToolbar';
16

17
export class SelectTreeElement {
18
19
20
21
  private readonly treeWrapper: HTMLElement = null;
  private readonly recordField: HTMLInputElement = null;

  constructor(treeWrapperId: string, treeRecordFieldId: string, callback: Function) {
22
23
    this.treeWrapper = <HTMLElement>document.getElementById(treeWrapperId);
    this.recordField = <HTMLInputElement>document.getElementById(treeRecordFieldId);
24
25
26
    const tree = new SelectTree();

    const settings = {
27
      dataUrl: this.generateRequestUrl(),
28
29
30
31
32
33
34
35
      showIcons: true,
      showCheckboxes: true,
      readOnlyMode: parseInt(this.recordField.dataset.readOnly, 10) === 1,
      input: this.recordField,
      exclusiveNodesIdentifiers: this.recordField.dataset.treeExclusiveKeys,
      validation: JSON.parse(this.recordField.dataset.formengineValidationRules)[0],
      expandUpToLevel: this.recordField.dataset.treeExpandUpToLevel,
    };
36
37
38
    tree.initialize(this.treeWrapper, settings);
    tree.dispatch.on('nodeSelectedAfter.requestUpdate', () => { callback(); } );
    this.listenForVisibleTree();
39

40
41
    new TreeToolbar(this.treeWrapper);
  }
42

43
44
45
46
47
48
49
50
51
52
53
54
  /**
   * If the Select item is in an invisible tab, it needs to be rendered once the tab
   * becomes visible.
   */
  private listenForVisibleTree(): void {
    if (!this.treeWrapper.offsetParent) {
      // Search for the parents that are tab containers
      let idOfTabContainer = this.treeWrapper.closest('.tab-pane').getAttribute('id');
      if (idOfTabContainer) {
        let btn = document.querySelector('[aria-controls="' + idOfTabContainer + '"]');
        btn.addEventListener('shown.bs.tab', () => { this.treeWrapper.dispatchEvent(new Event('svg-tree:visible')); });
      }
55
56
57
58
59
60
61
62
63
    }
  }

  private generateRequestUrl(): string {
    const params = {
      tableName: this.recordField.dataset.tablename,
      fieldName: this.recordField.dataset.fieldname,
      uid: this.recordField.dataset.uid,
      recordTypeValue: this.recordField.dataset.recordtypevalue,
64
      dataStructureIdentifier: this.recordField.dataset.datastructureidentifier,
65
66
67
68
69
70
71
72
      flexFormSheetName: this.recordField.dataset.flexformsheetname,
      flexFormFieldName: this.recordField.dataset.flexformfieldname,
      flexFormContainerName: this.recordField.dataset.flexformcontainername,
      flexFormContainerIdentifier: this.recordField.dataset.flexformcontaineridentifier,
      flexFormContainerFieldName: this.recordField.dataset.flexformcontainerfieldname,
      flexFormSectionContainerIsNew: this.recordField.dataset.flexformsectioncontainerisnew,
      command: this.recordField.dataset.command,
    };
73
    return TYPO3.settings.ajaxUrls.record_tree_data + '&' + new URLSearchParams(params);
74
75
  }
}