beyond-rails 0.0.264 → 0.0.269
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7d41b21a153a6a43a56575b0cde527fe030b9c31e2323729259bcfd8b869a049
|
4
|
+
data.tar.gz: 408fcaaf73bd21fa7dfb52b3faa42ff44c8fda0247e7cc6b8792f82003d53f7e
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3dfe20d9ce4b0b86fe30da9c85f7edab753264fcfb386b16433370a44b7748c9d39f377421f83b07b03e395b085323174fc4929e60e24422cf708f43d5e0fba6
|
7
|
+
data.tar.gz: afead4a051571df239994f0f1680f7caea17f63d741b28bbd22aa29275a541527927112ed8bb02c986a81bc87c5ef3e6d81fbd4dbc3da3330f2f7f422678c0ce
|
data/src/js/components/Modal.js
CHANGED
@@ -25,12 +25,15 @@ export default class SearchDropdown {
|
|
25
25
|
this.offset = options.offset || 14
|
26
26
|
this.offsetTop = options.offsetTop || 0
|
27
27
|
this.offsetLeft = options.offsetLeft || 0
|
28
|
+
this.noDataMsg = options.noDataMsg || '沒有資料'
|
28
29
|
this.isMenuVisible = false
|
29
30
|
this.lastKeyword = null
|
30
31
|
this.selectedIndex = 0
|
31
32
|
this.items = []
|
32
33
|
this.compositionStarted = false
|
33
34
|
this.compositionJustEnded = false
|
35
|
+
this.noDataMsgVisible = false
|
36
|
+
this.loading = true
|
34
37
|
this.init()
|
35
38
|
}
|
36
39
|
|
@@ -77,6 +80,19 @@ export default class SearchDropdown {
|
|
77
80
|
|
78
81
|
inputWrap.appendChild(input)
|
79
82
|
|
83
|
+
const loader = document.createElement('div')
|
84
|
+
loader.className = 'search-dropdown-loader'
|
85
|
+
|
86
|
+
loader.innerHTML = `
|
87
|
+
<div class="fb-loader">
|
88
|
+
<div></div>
|
89
|
+
<div></div>
|
90
|
+
<div></div>
|
91
|
+
</div>
|
92
|
+
`
|
93
|
+
|
94
|
+
inputWrap.appendChild(loader)
|
95
|
+
|
80
96
|
if (this.options.placeholder) {
|
81
97
|
input.setAttribute('placeholder', this.options.placeholder)
|
82
98
|
}
|
@@ -88,6 +104,20 @@ export default class SearchDropdown {
|
|
88
104
|
this.menu = menu
|
89
105
|
this.input = input
|
90
106
|
this.menuContent = menuContent
|
107
|
+
this.loader = loader
|
108
|
+
}
|
109
|
+
|
110
|
+
setLoading(loading) {
|
111
|
+
this.loading = loading
|
112
|
+
|
113
|
+
if (loading) {
|
114
|
+
this.input.classList.add('loading')
|
115
|
+
this.loader.style.display = 'block'
|
116
|
+
}
|
117
|
+
else {
|
118
|
+
this.input.classList.remove('loading')
|
119
|
+
this.loader.style.display = 'none'
|
120
|
+
}
|
91
121
|
}
|
92
122
|
|
93
123
|
setMenuContentActive(active) {
|
@@ -150,15 +180,23 @@ export default class SearchDropdown {
|
|
150
180
|
}
|
151
181
|
|
152
182
|
renderMenu() {
|
153
|
-
const { menuContent, items } = this
|
154
|
-
|
155
|
-
|
183
|
+
const { menuContent, items, selectedIndex } = this
|
184
|
+
const { renderItem } = this.options
|
185
|
+
|
186
|
+
const menuItems = items.map((item, i) => {
|
187
|
+
return renderItem(item, i, (selectedIndex === i))
|
156
188
|
})
|
157
|
-
|
189
|
+
|
190
|
+
if (this.noDataMsgVisible) {
|
191
|
+
menuItems.unshift(`<div class="search-dropdown-menu-item">${this.noDataMsg}</div>`)
|
192
|
+
}
|
193
|
+
|
194
|
+
menuContent.innerHTML = menuItems.join('')
|
195
|
+
|
158
196
|
this.setMenuContentActive(items.length > 0)
|
159
197
|
|
160
198
|
const menuItemEls = this.getMenuItemEls()
|
161
|
-
const selectedEl = menuItemEls[
|
199
|
+
const selectedEl = menuItemEls[selectedIndex]
|
162
200
|
if (selectedEl) {
|
163
201
|
const scrollTop = menuContent.scrollTop
|
164
202
|
const contentTop = menuContent.offsetTop
|
@@ -168,10 +206,10 @@ export default class SearchDropdown {
|
|
168
206
|
const elBottom = elTop + elHeight
|
169
207
|
|
170
208
|
if (elTop < contentTop) {
|
171
|
-
|
209
|
+
menuContent.scrollTop -= elHeight
|
172
210
|
}
|
173
211
|
else if (elBottom > contentBottom) {
|
174
|
-
|
212
|
+
menuContent.scrollTop += elHeight
|
175
213
|
}
|
176
214
|
}
|
177
215
|
}
|
@@ -187,8 +225,19 @@ export default class SearchDropdown {
|
|
187
225
|
}
|
188
226
|
this.resetSelectedIndex()
|
189
227
|
this.lastKeyword = keyword
|
228
|
+
this.noDataMsgVisible = false
|
229
|
+
this.setItems([])
|
230
|
+
|
231
|
+
this.setLoading(true)
|
232
|
+
|
190
233
|
const items = await this.options.getData(keyword)
|
191
234
|
|
235
|
+
this.setLoading(false)
|
236
|
+
|
237
|
+
if (items.length === 0) {
|
238
|
+
this.noDataMsgVisible = true
|
239
|
+
}
|
240
|
+
|
192
241
|
if (this.lastKeyword === this.input.value) {
|
193
242
|
this.setItems(items)
|
194
243
|
}
|
@@ -350,5 +399,9 @@ export default class SearchDropdown {
|
|
350
399
|
|
351
400
|
destroy() {
|
352
401
|
this.menu.remove()
|
402
|
+
this.menu = null
|
403
|
+
this.input = null
|
404
|
+
this.menuContent = null
|
405
|
+
this.loader = null
|
353
406
|
}
|
354
407
|
}
|
@@ -2,10 +2,24 @@
|
|
2
2
|
width: 420px;
|
3
3
|
padding: 0;
|
4
4
|
.search-dropdown-input-wrap {
|
5
|
+
position: relative;
|
5
6
|
padding: 14px;
|
6
7
|
}
|
7
8
|
.search-dropdown-input.input {
|
8
9
|
width: 100%;
|
10
|
+
&.loading {
|
11
|
+
padding-right: 40px;
|
12
|
+
}
|
13
|
+
}
|
14
|
+
.search-dropdown-loader {
|
15
|
+
display: none;
|
16
|
+
position: absolute;
|
17
|
+
right: 20px;
|
18
|
+
top: 0;
|
19
|
+
bottom: 0;
|
20
|
+
margin-top: auto;
|
21
|
+
margin-bottom: auto;
|
22
|
+
height: 32px;
|
9
23
|
}
|
10
24
|
.search-dropdown-menu.active {
|
11
25
|
border-top: 1px solid rgba(60, 66, 87, .16);
|
@@ -6,6 +6,16 @@
|
|
6
6
|
transform: rotate(360deg);
|
7
7
|
}
|
8
8
|
}
|
9
|
+
@keyframes fb-loader {
|
10
|
+
0% {
|
11
|
+
top: 6px;
|
12
|
+
height: 25px;
|
13
|
+
}
|
14
|
+
50%, 100% {
|
15
|
+
top: 10px;
|
16
|
+
height: 12px;
|
17
|
+
}
|
18
|
+
}
|
9
19
|
|
10
20
|
.loader {
|
11
21
|
margin: 50px auto;
|
@@ -77,3 +87,30 @@
|
|
77
87
|
.ring-loader div:nth-child(3) {
|
78
88
|
animation-delay: -0.15s;
|
79
89
|
}
|
90
|
+
|
91
|
+
.fb-loader {
|
92
|
+
display: inline-block;
|
93
|
+
position: relative;
|
94
|
+
@include size(32px);
|
95
|
+
}
|
96
|
+
|
97
|
+
.fb-loader div {
|
98
|
+
display: inline-block;
|
99
|
+
position: absolute;
|
100
|
+
left: 0;
|
101
|
+
width: 4px;
|
102
|
+
background: $bg-primary-ex;
|
103
|
+
animation: fb-loader 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
|
104
|
+
}
|
105
|
+
.fb-loader div:nth-child(1) {
|
106
|
+
left: 6px;
|
107
|
+
animation-delay: -0.24s;
|
108
|
+
}
|
109
|
+
.fb-loader div:nth-child(2) {
|
110
|
+
left: 14px;
|
111
|
+
animation-delay: -0.12s;
|
112
|
+
}
|
113
|
+
.fb-loader div:nth-child(3) {
|
114
|
+
left: 22px;
|
115
|
+
animation-delay: 0;
|
116
|
+
}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: beyond-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.269
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- kmsheng
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2020-12-
|
12
|
+
date: 2020-12-08 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: sassc
|