beyond-rails 0.0.230 → 0.0.235
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/src/js/components/SearchDropdown.js +27 -15
- data/src/js/components/TagInput.js +53 -15
- data/src/js/utils/noop.js +2 -0
- data/src/sass/_main.scss +4 -0
- data/src/sass/components/_form.scss +3 -0
- data/src/sass/components/_search-dropdown.scss +1 -3
- data/src/sass/components/_tag-input.scss +18 -4
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e972bbd922678dfc2e96398e28bf7c0ca244e43888bc725b3ded68ca31eba1bc
|
4
|
+
data.tar.gz: 385681f6de17231ca6761d7a1432f005fd8b0a44fa1384e45e67864455004ac1
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e8b93b49eb4839c608d2d36b2b77b1b8e178b46a8af15d250a6d9aa6cae50dc35e900e42a7fb010bb4ed118d9a84b6f2b5604caceb3495ada627766b568bdc5f
|
7
|
+
data.tar.gz: e3771b1aff459ea89efe73b6dd7b62a4b6d3e8e7630f406b683f7b0d4e7e4c927bdcf18d19682d806875add00a0b9bfe0443dbace28874eff8f9459e330002d7
|
@@ -20,8 +20,11 @@ export default class SearchDropdown {
|
|
20
20
|
this.options.itemClick = options.itemClick || itemClick
|
21
21
|
this.options.change = options.change || noop
|
22
22
|
this.options.wait = options.wait || 50
|
23
|
-
this.place = 'bottom'
|
24
|
-
this.align = 'left'
|
23
|
+
this.place = options.place || 'bottom'
|
24
|
+
this.align = options.align || 'left'
|
25
|
+
this.offset = options.offset || 14
|
26
|
+
this.offsetTop = options.offsetTop || 0
|
27
|
+
this.offsetLeft = options.offsetLeft || 0
|
25
28
|
this.isMenuVisible = false
|
26
29
|
this.lastKeyword = null
|
27
30
|
this.selectedIndex = 0
|
@@ -53,7 +56,16 @@ export default class SearchDropdown {
|
|
53
56
|
}
|
54
57
|
|
55
58
|
appendMenu() {
|
59
|
+
|
56
60
|
const menu = document.createElement('div')
|
61
|
+
const { dataset } = menu
|
62
|
+
|
63
|
+
dataset.place = this.place
|
64
|
+
dataset.align = this.align
|
65
|
+
dataset.offset = this.offset
|
66
|
+
dataset.offsetTop = this.offsetTop
|
67
|
+
dataset.offsetLeft = this.offsetLeft
|
68
|
+
|
57
69
|
menu.className = 'search-dropdown dropdown-menu'
|
58
70
|
|
59
71
|
const inputWrap = document.createElement('div')
|
@@ -100,15 +112,19 @@ export default class SearchDropdown {
|
|
100
112
|
showMenu() {
|
101
113
|
const { input, menu } = this
|
102
114
|
this.getData(input.value)
|
115
|
+
|
103
116
|
menu.style.display = 'block'
|
104
117
|
menu.style.opacity = 0
|
105
118
|
menu.style.transform = 'scale(.8)'
|
106
119
|
document.body.appendChild(menu)
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
120
|
+
|
121
|
+
setTimeout(() => {
|
122
|
+
this.adjustMenuPos()
|
123
|
+
menu.style.transform = 'scale(1)'
|
124
|
+
menu.style.opacity = 1
|
125
|
+
this.isMenuVisible = true
|
126
|
+
this.input.focus()
|
127
|
+
}, 0)
|
112
128
|
}
|
113
129
|
|
114
130
|
toggleMenu() {
|
@@ -116,22 +132,18 @@ export default class SearchDropdown {
|
|
116
132
|
}
|
117
133
|
|
118
134
|
adjustMenuPos() {
|
119
|
-
const { menu, dom } = this
|
120
|
-
const { dataset } = menu
|
121
|
-
const offsetLeft = ('offsetLeft' in dataset) ? parseInt(dataset.offsetLeft, 10) : 0
|
122
|
-
const offsetTop = ('offsetTop' in dataset) ? parseInt(dataset.offsetTop, 10) : 0
|
123
|
-
|
135
|
+
const { menu, dom, offset, offsetLeft, offsetTop } = this
|
124
136
|
const { pos, place, align } = getFloatedTargetPos({
|
125
137
|
src: dom,
|
126
138
|
target: menu,
|
127
139
|
place: this.place,
|
128
140
|
align: this.align,
|
129
|
-
offset
|
141
|
+
offset,
|
130
142
|
offsetLeft,
|
131
143
|
offsetTop
|
132
144
|
})
|
133
|
-
dataset.place = place
|
134
|
-
dataset.align = align
|
145
|
+
menu.dataset.place = place
|
146
|
+
menu.dataset.align = align
|
135
147
|
menu.style.left = toPixel(pos.left)
|
136
148
|
menu.style.top = toPixel(pos.top)
|
137
149
|
}
|
@@ -1,7 +1,7 @@
|
|
1
|
+
import getKey from '../utils/getKey'
|
2
|
+
import noop from '../utils/noop'
|
1
3
|
import raf from '../utils/raf'
|
2
|
-
import isStr from '../utils/isStr'
|
3
4
|
import supportDom from '../decorators/supportDom'
|
4
|
-
import getKey from '../utils/getKey'
|
5
5
|
|
6
6
|
@supportDom
|
7
7
|
export default class TagInput {
|
@@ -10,7 +10,8 @@ export default class TagInput {
|
|
10
10
|
this.dom = dom
|
11
11
|
this.defaultInputWidth = 128
|
12
12
|
this.validate = options.validate || (() => ({ isTag: true }))
|
13
|
-
this.
|
13
|
+
this.suggest = options.suggest || noop
|
14
|
+
this.change = options.change || noop
|
14
15
|
this.isComposing = false
|
15
16
|
this.raf = raf
|
16
17
|
this.tags = []
|
@@ -23,12 +24,29 @@ export default class TagInput {
|
|
23
24
|
}
|
24
25
|
|
25
26
|
setup() {
|
27
|
+
const { defaultInputWidth } = this
|
28
|
+
const inputDiv = document.createElement('div')
|
29
|
+
inputDiv.className = 'tag-input-box'
|
30
|
+
|
31
|
+
const suggestInput = document.createElement('input')
|
32
|
+
suggestInput.type = 'text'
|
33
|
+
suggestInput.style.width = defaultInputWidth + 'px'
|
34
|
+
suggestInput.className = 'tag-suggest-input'
|
35
|
+
|
26
36
|
const input = document.createElement('input')
|
27
37
|
input.type = 'text'
|
28
|
-
input.style.width =
|
38
|
+
input.style.width = defaultInputWidth + 'px'
|
39
|
+
input.className = 'tag-main-input'
|
40
|
+
|
41
|
+
inputDiv.appendChild(input)
|
42
|
+
inputDiv.appendChild(suggestInput)
|
43
|
+
|
29
44
|
this.input = input
|
45
|
+
this.suggestInput = suggestInput
|
30
46
|
this.canvas = document.createElement('canvas')
|
31
|
-
this.
|
47
|
+
this.inputDiv = inputDiv
|
48
|
+
|
49
|
+
this.dom.append(inputDiv)
|
32
50
|
}
|
33
51
|
|
34
52
|
getTextWidth(text, font) {
|
@@ -56,13 +74,7 @@ export default class TagInput {
|
|
56
74
|
}, 500)
|
57
75
|
}
|
58
76
|
|
59
|
-
|
60
|
-
const { input } = this
|
61
|
-
const inputValue = input.value
|
62
|
-
const res = await this.validate(inputValue)
|
63
|
-
if (! res.isTag) {
|
64
|
-
return this.shake()
|
65
|
-
}
|
77
|
+
addTag(inputValue, res) {
|
66
78
|
const classname = res.classname ? ` ${res.classname}` : ''
|
67
79
|
const tag = document.createElement('div')
|
68
80
|
|
@@ -84,8 +96,20 @@ export default class TagInput {
|
|
84
96
|
tag.appendChild(btn)
|
85
97
|
|
86
98
|
this.tags.push({ elem: tag, remove: handleBtnClick, res })
|
87
|
-
this.dom.insertBefore(tag,
|
99
|
+
this.dom.insertBefore(tag, this.inputDiv)
|
100
|
+
}
|
101
|
+
|
102
|
+
async addTagIfNeeded() {
|
103
|
+
const { input, suggestInput } = this
|
104
|
+
const inputValue = suggestInput.value || input.value
|
105
|
+
const res = await this.validate(inputValue)
|
106
|
+
if (! res.isTag) {
|
107
|
+
return this.shake()
|
108
|
+
}
|
109
|
+
this.addTag(inputValue, res)
|
110
|
+
|
88
111
|
input.value = ''
|
112
|
+
suggestInput.value = ''
|
89
113
|
|
90
114
|
this.change(this.tags.slice())
|
91
115
|
}
|
@@ -121,7 +145,7 @@ export default class TagInput {
|
|
121
145
|
this.addEvent(input, 'keydown', async event => {
|
122
146
|
const key = getKey(event)
|
123
147
|
if ((key === 'enter') && (! this.isComposing)) {
|
124
|
-
await this.addTagIfNeeded(
|
148
|
+
await this.addTagIfNeeded()
|
125
149
|
}
|
126
150
|
else if ((key === 'backspace') && (lastValue === '')) {
|
127
151
|
this.removeTagIfNeeded()
|
@@ -130,6 +154,7 @@ export default class TagInput {
|
|
130
154
|
})
|
131
155
|
|
132
156
|
this.addEvent(input, 'input', event => {
|
157
|
+
this.suggestInputIfNeeded(input.value)
|
133
158
|
this.raf(() => {
|
134
159
|
const textWidth = this.getTextWidth(input.value, font)
|
135
160
|
const nextWidth = this.getNextInputWidth(textWidth)
|
@@ -138,8 +163,21 @@ export default class TagInput {
|
|
138
163
|
})
|
139
164
|
}
|
140
165
|
|
166
|
+
async suggestInputIfNeeded(value) {
|
167
|
+
const suggestValue = await this.suggest(value)
|
168
|
+
this.raf(() => {
|
169
|
+
if (this.input.value === value) {
|
170
|
+
this.suggestInput.value = (suggestValue || '')
|
171
|
+
}
|
172
|
+
})
|
173
|
+
}
|
174
|
+
|
141
175
|
destroy() {
|
142
176
|
this.tags.forEach(tag => tag.remove())
|
143
|
-
this.
|
177
|
+
this.inputDiv.remove()
|
178
|
+
this.canvas = null
|
179
|
+
this.input = null
|
180
|
+
this.suggestInput = null
|
181
|
+
this.inputDiv = null
|
144
182
|
}
|
145
183
|
}
|
data/src/sass/_main.scss
CHANGED
@@ -3,10 +3,24 @@
|
|
3
3
|
background-color: #fff;
|
4
4
|
padding: .4em .4em 0 .4em;
|
5
5
|
min-height: 40px;
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
6
|
+
|
7
|
+
.tag-suggest-input {
|
8
|
+
color: rgba(60, 66, 87, .41);
|
9
|
+
}
|
10
|
+
|
11
|
+
.tag-main-input {
|
12
|
+
position: absolute;
|
13
|
+
background-color: transparent;
|
14
|
+
}
|
15
|
+
|
16
|
+
.tag-input-box {
|
17
|
+
display: inline-block;
|
18
|
+
position: relative;
|
19
|
+
> input {
|
20
|
+
border: 0;
|
21
|
+
&:focus {
|
22
|
+
outline: none;
|
23
|
+
}
|
10
24
|
}
|
11
25
|
}
|
12
26
|
.tag {
|
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.235
|
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
|
+
date: 2020-11-02 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: sassc
|
@@ -199,6 +199,7 @@ files:
|
|
199
199
|
- src/js/utils/isTouchDevice.js
|
200
200
|
- src/js/utils/isUndef.js
|
201
201
|
- src/js/utils/msToS.js
|
202
|
+
- src/js/utils/noop.js
|
202
203
|
- src/js/utils/promisify.js
|
203
204
|
- src/js/utils/raf.js
|
204
205
|
- src/js/utils/unbindAll.js
|