File : dialogs/osmSearchDialog/osmSearchToolbarTree/OsmSearchTree.js

1
/*
2
Copyright - 2017 2023 - wwwouaiebe - Contact: https://www.ouaie.be/
3
4
This  program is free software;
5
you can redistribute it and/or modify it under the terms of the
6
GNU General Public License as published by the Free Software Foundation;
7
either version 3 of the License, or any later version.
8
9
This program is distributed in the hope that it will be useful,
10
but WITHOUT ANY WARRANTY; without even the implied warranty of
11
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12
GNU General Public License for more details.
13
14
You should have received a copy of the GNU General Public License
15
along with this program; if not, write to the Free Software
16
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
17
*/
18
/*
19
Changes:
20
    - v4.0.0:
21
        - created from v3.6.0
22
Doc reviewed 202208
23
 */
24
25
import theHTMLElementsFactory from '../../../core/uiLib/HTMLElementsFactory.js';
26
import theOsmSearchDictionary from '../../../core/osmSearch/OsmSearchDictionary.js';
27
import TreeArrowClickEL from './TreeArrowClickEL.js';
28
import TreeWheelEL from './TreeWheelEL.js';
29
import TreeCheckboxChangeEL from './TreeCheckboxChangeEL.js';
30
import { ZERO } from '../../../main/Constants.js';
31
32
/* ------------------------------------------------------------------------------------------------------------------------- */
33
/**
34
This class build the search tree and contains also methods to modify this tree
35
*/
36
/* ------------------------------------------------------------------------------------------------------------------------- */
37
38
class OsmSearchTree {
39
40
    /**
41
    A reference to the tree HTMLElement
42
    @type {HTMLElement}
43
    */
44
45
    #treeHTMLElement;
46
47
    /**
48
    Tree arrow click event listener
49
    @type {TreeArrowClickEL}
50
    */
51
52
    #treeArrowClickEL;
53
54
    /**
55
    Tree checkbox change event listener
56
    @type {TreeCheckboxChangeEL}
57
    */
58
59
    #treeCheckboxChangeEL;
60
61
    /**
62
    Recursivity counter for the #addItem method
63
    @type {Number}
64
    */
65
66
    #deepTree;
67
68
    /**
69
    Add a dictionary item in the SearchTree and do the same for all descendants
70
    @param {DictionaryItem} item The dictionary item to add
71
    */
72
73
    #addItem ( item ) {
74
75
        this.#deepTree ++;
76
77
        // Container for the item
78
        const itemHTMLElement = theHTMLElementsFactory.create (
79
            'div',
80
            {
81
                className : 'TravelNotes-OsmSearchDialog-SearchItemMargin' + this.#deepTree,
82
                dataset : { ObjId : item.objId }
83
            },
84
            this.#treeHTMLElement
85
        );
86
87
        // checkbox
88
        if ( ! item.isRoot ) {
89
            const itemCheckbox = theHTMLElementsFactory.create (
90
                'input',
91
                {
92
                    type : 'checkbox',
93
                    checked : item.isSelected
94
                },
95
                itemHTMLElement
96
            );
97
            itemCheckbox.addEventListener ( 'change', this.#treeCheckboxChangeEL, false );
98
        }
99
100
        // arrow
101
        if ( ZERO === item.filterTagsArray.length ) {
102
            const itemArrow = theHTMLElementsFactory.create (
103
                'div',
104
                {
105
                    className : 'TravelNotes-BaseDialog-Button TravelNotes-OsmSearchDialog-TreeArrow',
106
                    textContent : item.isExpanded ? '▼' : '▶'
107
                },
108
                itemHTMLElement
109
            );
110
            itemArrow.addEventListener ( 'click', this.#treeArrowClickEL, false );
111
        }
112
113
        // text
114
        theHTMLElementsFactory.create (
115
            'text',
116
            {
117
                value : item.name
118
            },
119
            itemHTMLElement
120
        );
121
122
        // Recurse on sub items
123
        if ( item.isExpanded ) {
124
            item.items.forEach ( tmpItem => this.#addItem ( tmpItem ) );
125
        }
126
127
        // return to parent item
128
        this.#deepTree --;
129
    }
130
131
    /**
132
    The constructor
133
    */
134
135
    constructor ( ) {
136
137
        Object.freeze ( this );
138
139
        this.#deepTree = ZERO;
140
141
        // Container creation
142
        this.#treeHTMLElement = theHTMLElementsFactory.create (
143
            'div',
144
            {
145
                id : 'TravelNotes-OsmSearchDialog-SearchTree'
146
            }
147
        );
148
149
        // event listeners
150
        this.#treeHTMLElement.addEventListener ( 'wheel', new TreeWheelEL ( ), { passive : true } );
151
        this.#treeCheckboxChangeEL = new TreeCheckboxChangeEL ( this );
152
        this.#treeArrowClickEL = new TreeArrowClickEL ( this );
153
154
        // items
155
        this.#addItem ( theOsmSearchDictionary.dictionary );
156
    }
157
158
    /**
159
    rebuild the complete tree
160
    */
161
162
    redraw ( ) {
163
        this.#treeHTMLElement.textContent = '';
164
        this.#addItem ( theOsmSearchDictionary.dictionary );
165
    }
166
167
    /**
168
    The tree HTML element
169
    @type {HTMLElement}
170
    */
171
172
    get treeHTMLElement ( ) { return this.#treeHTMLElement; }
173
}
174
175
export default OsmSearchTree;
176
177
/* --- End of file --------------------------------------------------------------------------------------------------------- */
178