File : dialogs/notesDialog/controls/NoteDialogLinkControl.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 theTranslator from '../../../core/uiLib/Translator.js';
27
import theConfig from '../../../data/Config.js';
28
import BaseControl from '../../../controls/baseControl/BaseControl.js';
29
30
import { ZERO, ONE, LAT_LNG } from '../../../main/Constants.js';
31
32
/* ------------------------------------------------------------------------------------------------------------------------- */
33
/**
34
This class is the url control of the NoteDialog
35
*/
36
/* ------------------------------------------------------------------------------------------------------------------------- */
37
38
class NoteDialogLinkControl extends BaseControl {
39
40
    /**
41
    The link input
42
    @type {HTMLElement}
43
    */
44
45
    #linkInput;
46
47
    /**
48
    The 👿 button...
49
    @param {Array.<Number>} latLng The lat and lng used in the 👿 button
50
    @param {HTMLElement} linkHeaderDiv The HTMLElement in witch the button will be created
51
    */
52
53
    #createTheDevilButton ( latLng, linkHeaderDiv ) {
54
        if ( theConfig.noteDialog.theDevil.addButton ) {
55
            theHTMLElementsFactory.create (
56
                'text',
57
                {
58
                    value : '👿'
59
                },
60
                theHTMLElementsFactory.create (
61
                    'a',
62
                    {
63
                        href : 'https://www.google.com/maps/@' +
64
                            latLng [ ZERO ].toFixed ( LAT_LNG.fixed ) + ',' +
65
                            latLng [ ONE ].toFixed ( LAT_LNG.fixed ) + ',' +
66
                            theConfig.noteDialog.theDevil.zoomFactor + 'z',
67
                        target : '_blank',
68
                        title : 'Reminder! The devil will know everything about you'
69
                    },
70
                    theHTMLElementsFactory.create (
71
                        'div',
72
                        {
73
                            className : 'TravelNotes-BaseDialog-Button',
74
                            title : 'Reminder! The devil will know everything about you'
75
                        },
76
                        linkHeaderDiv
77
                    )
78
                )
79
            );
80
        }
81
    }
82
83
    /**
84
    The constructor
85
    @param {NoteDialogEventListeners} eventListeners A reference to the eventListeners object of the NoteDialog
86
    @param {Array.<Number>} latLng The lat and lng to use with the 👿 button
87
    */
88
89
    constructor ( eventListeners, latLng ) {
90
91
        super ( );
92
93
        // HTMLElements creation
94
        const linkHeaderControlElement = theHTMLElementsFactory.create (
95
            'div',
96
            {
97
                className : 'TravelNotes-BaseDialog-FlexRow'
98
            },
99
            this.controlHTMLElement
100
        );
101
        this.#createTheDevilButton ( latLng, linkHeaderControlElement );
102
        theHTMLElementsFactory.create (
103
            'text',
104
            {
105
                value : theTranslator.getText ( 'NoteDialogLinkControl - Link' )
106
            },
107
            linkHeaderControlElement
108
        );
109
        this.#linkInput = theHTMLElementsFactory.create (
110
            'input',
111
            {
112
                type : 'text',
113
                className : 'TravelNotes-NoteDialog-InputText',
114
                dataset : { Name : 'url' }
115
            },
116
            theHTMLElementsFactory.create (
117
                'div',
118
                {
119
                    className : 'TravelNotes-BaseDialog-FlexRow'
120
                },
121
                this.controlHTMLElement
122
            )
123
        );
124
125
        // event listeners
126
        this.#linkInput.addEventListener ( 'focus', eventListeners.controlFocus );
127
        this.#linkInput.addEventListener ( 'input', eventListeners.controlInput );
128
        this.#linkInput.addEventListener ( 'blur', eventListeners.urlInputBlur );
129
    }
130
131
    /**
132
    Remove event listeners
133
    @param {NoteDialogEventListeners} eventListeners A reference to the eventListeners object of the NoteDialog
134
    */
135
136
    destructor ( eventListeners ) {
137
        this.#linkInput.removeEventListener ( 'focus', eventListeners.controlFocus );
138
        this.#linkInput.removeEventListener ( 'input', eventListeners.controlInput );
139
        this.#linkInput.removeEventListener ( 'blur', eventListeners.urlInputBlur );
140
    }
141
142
    /**
143
    The url value in the control
144
    @type {String}
145
    */
146
147
    get url ( ) { return this.#linkInput.value; }
148
149
    set url ( Value ) { this.#linkInput.value = Value; }
150
151
}
152
153
export default NoteDialogLinkControl;
154
155
/* --- End of file --------------------------------------------------------------------------------------------------------- */
156