1 | import BaseComponent from 'bootstrap/js/src/base-component.js'
|
2 |
|
3 | import EventHandler from 'bootstrap/js/src/dom/event-handler'
|
4 | import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
|
5 |
|
6 | import ProgressDonut from './progress-donut'
|
7 |
|
8 | const NAME = 'upload'
|
9 |
|
10 |
|
11 |
|
12 |
|
13 | const EVENT_DRAG = `drag`
|
14 | const EVENT_DRAG_START = `dragstart`
|
15 | const EVENT_DRAG_END = `dragend`
|
16 | const EVENT_DRAG_OVER = `dragover`
|
17 | const EVENT_DRAG_ENTER = `dragenter`
|
18 | const EVENT_DRAG_LEAVE = `dragleave`
|
19 | const EVENT_DROP = `drop`
|
20 |
|
21 | const CLASS_NAME_SUCCESS = 'success'
|
22 | const CLASS_NAME_DRAGOVER = 'dragover'
|
23 | const CLASS_NAME_LOADING = 'loading'
|
24 |
|
25 | const SELECTOR_FORM = '[data-bs-upload-dragdrop]'
|
26 | const SELECTOR_DONUT = '[data-bs-progress-donut]'
|
27 |
|
28 | class UploadDragDrop extends BaseComponent {
|
29 | constructor(element) {
|
30 | super(element)
|
31 |
|
32 | const donutElement = SelectorEngine.findOne(SELECTOR_DONUT, this._element)
|
33 | if (donutElement) {
|
34 | this._donut = ProgressDonut.getOrCreateInstance(donutElement)
|
35 | }
|
36 |
|
37 | this._bindEvents()
|
38 | }
|
39 |
|
40 |
|
41 |
|
42 | static get NAME() {
|
43 | return NAME
|
44 | }
|
45 |
|
46 |
|
47 | progress(value) {
|
48 | this._donut.set(value)
|
49 | }
|
50 |
|
51 | start() {
|
52 | this.reset()
|
53 | this._element.classList.add(CLASS_NAME_LOADING)
|
54 | }
|
55 |
|
56 | success() {
|
57 | this._element.classList.remove(CLASS_NAME_LOADING)
|
58 | this._element.classList.add(CLASS_NAME_SUCCESS)
|
59 | }
|
60 |
|
61 | reset() {
|
62 | this._element.classList.remove(CLASS_NAME_LOADING)
|
63 | this._element.classList.remove(CLASS_NAME_SUCCESS)
|
64 | this._donut.set(0)
|
65 | }
|
66 |
|
67 | dispose() {
|
68 | this._donut.dispose()
|
69 |
|
70 | super.dispose()
|
71 | }
|
72 |
|
73 |
|
74 | _bindEvents() {
|
75 | EventHandler.on(this._element, EVENT_DRAG, (evt) => this._preventEvent(evt))
|
76 | EventHandler.on(this._element, EVENT_DRAG_START, (evt) => this._preventEvent(evt))
|
77 | EventHandler.on(this._element, EVENT_DRAG_END, (evt) => this._preventEvent(evt))
|
78 | EventHandler.on(this._element, EVENT_DRAG_OVER, (evt) => this._preventEvent(evt))
|
79 | EventHandler.on(this._element, EVENT_DRAG_ENTER, (evt) => this._preventEvent(evt))
|
80 | EventHandler.on(this._element, EVENT_DRAG_LEAVE, (evt) => this._preventEvent(evt))
|
81 | EventHandler.on(this._element, EVENT_DROP, (evt) => this._preventEvent(evt))
|
82 |
|
83 | EventHandler.on(this._element, EVENT_DRAG_OVER, () => this._dropIn())
|
84 | EventHandler.on(this._element, EVENT_DRAG_ENTER, () => this._dropIn())
|
85 | EventHandler.on(this._element, EVENT_DRAG_LEAVE, () => this._dropOut())
|
86 | EventHandler.on(this._element, EVENT_DRAG_END, () => this._dropOut())
|
87 | EventHandler.on(this._element, EVENT_DROP, () => this._dropOut())
|
88 |
|
89 | EventHandler.on(this._element, EVENT_DROP, () => this._drop())
|
90 | }
|
91 | _preventEvent(evt) {
|
92 | evt.preventDefault()
|
93 | evt.stopPropagation()
|
94 | }
|
95 |
|
96 | _dropIn() {
|
97 | if (!this._isSuccess()) {
|
98 | this._element.classList.add(CLASS_NAME_DRAGOVER)
|
99 | }
|
100 | }
|
101 | _dropOut() {
|
102 | if (!this._isSuccess()) {
|
103 | this._element.classList.remove(CLASS_NAME_DRAGOVER)
|
104 | }
|
105 | }
|
106 | _drop() {
|
107 | if (!this._isSuccess()) {
|
108 | this.start()
|
109 | }
|
110 | }
|
111 |
|
112 | _isSuccess() {
|
113 | return this._element.classList.contains(CLASS_NAME_SUCCESS)
|
114 | }
|
115 | }
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 | SelectorEngine.find(SELECTOR_FORM).forEach((form) => {
|
124 | UploadDragDrop.getOrCreateInstance(form)
|
125 | })
|
126 |
|
127 | export default UploadDragDrop
|