File : controls/sortableListControl/SortableListControl.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 BaseControl from '../baseControl/BaseControl.js';
26
import theHTMLElementsFactory from '../../core/uiLib/HTMLElementsFactory.js';
27
import TouchListItemEL from './TouchListItemEL.js';
28
import DragStartListItemEL from './DragStartListItemEL.js';
29
import DropListItemEL from './DropListItemEL.js';
30
import ContextMenuListItemEL from './ContextMenuListItemEL.js';
31
32
/* ------------------------------------------------------------------------------------------------------------------------- */
33
/**
34
A control for dialogs with a list that can be sorted with drag and drop
35
*/
36
/* ------------------------------------------------------------------------------------------------------------------------- */
37
38
class SortableListControl extends BaseControl {
39
40
    /**
41
    The item drag start event listener
42
    @type {DragStartListItemEL}
43
    */
44
45
    #dragStartListItemEL;
46
47
    /**
48
    The item drop event listener
49
    @type {DropListItemEL}
50
    */
51
52
    #dropListItemEL;
53
54
    /**
55
    The context menu on item event listener
56
    @type {ContextMenuListItemEL}
57
    */
58
59
    #contextMenuListItemEL;
60
61
    /**
62
    The touch item event listener
63
    @type {TouchListItemEL}
64
    */
65
66
    #touchListItemEL;
67
68
    /**
69
    The HTMLElement container for the list
70
    @type {HTMLElement}
71
    */
72
73
    #sortableListHTMLElement;
74
75
    /**
76
    The constructor
77
    @param {function} dropFunction The function to call when an item is droped
78
    @param {class} contextMenuClass The context menu class to use
79
    @param {String} headingText The text to add in the header
80
    */
81
82
    constructor ( dropFunction, contextMenuClass, headingText ) {
83
        super ( );
84
        this.#dragStartListItemEL = new DragStartListItemEL ( );
85
        this.#dropListItemEL = new DropListItemEL ( dropFunction );
86
        this.#contextMenuListItemEL = new ContextMenuListItemEL ( contextMenuClass );
87
        this.#touchListItemEL = new TouchListItemEL ( dropFunction );
88
        if ( headingText ) {
89
            theHTMLElementsFactory.create (
90
                'div',
91
                {
92
                    className : 'TravelNotes-BaseDialog-FlexRow',
93
                    textContent : headingText
94
                },
95
                this.controlHTMLElement
96
            );
97
        }
98
        this.#sortableListHTMLElement = theHTMLElementsFactory.create (
99
            'div',
100
            {
101
                className : 'TravelNotes-SortableList-ListHTMLElement'
102
            },
103
            this.controlHTMLElement
104
        );
105
    }
106
107
    /**
108
    Update the items in the control
109
    @param {array.<HTMLElement>} listItemsHTMLElements An array with HTMLElements to use as items
110
    */
111
112
    updateContent ( listItemsHTMLElements ) {
113
        while ( this.#sortableListHTMLElement.firstChild ) {
114
            this.#sortableListHTMLElement.firstChild.removeEventListener ( 'dragstart', this.#dragStartListItemEL, false );
115
            this.#sortableListHTMLElement.firstChild.removeEventListener ( 'drop', this.#dropListItemEL, false );
116
            this.#sortableListHTMLElement.firstChild.removeEventListener ( 'contextmenu', this.#contextMenuListItemEL, false );
117
            this.#sortableListHTMLElement.firstChild.removeEventListener ( 'touchstart', this.#touchListItemEL, false );
118
            this.#sortableListHTMLElement.firstChild.removeEventListener ( 'touchmove', this.#touchListItemEL, false );
119
            this.#sortableListHTMLElement.firstChild.removeEventListener ( 'touchend', this.#touchListItemEL, false );
120
            this.#sortableListHTMLElement.removeChild ( this.#sortableListHTMLElement.firstChild );
121
        }
122
        listItemsHTMLElements.forEach (
123
            listItemHTMLElement => {
124
                listItemHTMLElement.draggable = true;
125
                listItemHTMLElement.addEventListener ( 'dragstart', this.#dragStartListItemEL, false );
126
                listItemHTMLElement.addEventListener ( 'drop', this.#dropListItemEL, false );
127
                listItemHTMLElement.addEventListener ( 'contextmenu', this.#contextMenuListItemEL, false );
128
                listItemHTMLElement.addEventListener ( 'touchstart', this.#touchListItemEL, false );
129
                listItemHTMLElement.addEventListener ( 'touchmove', this.#touchListItemEL, false );
130
                listItemHTMLElement.addEventListener ( 'touchend', this.#touchListItemEL, false );
131
                this.#sortableListHTMLElement.appendChild ( listItemHTMLElement );
132
                listItemHTMLElement.classList.add ( 'TravelNotes-SortableList-ListItemHTMLElement' );
133
            }
134
        );
135
    }
136
}
137
138
export default SortableListControl;
139
140
/* --- End of file --------------------------------------------------------------------------------------------------------- */
141