beyond-rails 0.0.233 → 0.0.234
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/TagInput.js +43 -9
- data/src/js/utils/noop.js +2 -0
- data/src/sass/components/_tag-input.scss +18 -4
- metadata +2 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: bcf9966ac572b5cb235b53411d2d89f3d271d88eec0b49bcba44592ed3d8157a
|
4
|
+
data.tar.gz: 77ecacca81f2b28ae7afe335a8f88f38c999856226b79c51202e93c89d29a9f0
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: bccb21dc7b61956e318b4906638f441db32564ac98cc5711b9cb24d7ac07d0dbe9adcf23b99ecf01696a9d06ffa7dd5919d2c6820ee4f006ec2effbe1298f9e9
|
7
|
+
data.tar.gz: aa6e944f0916c3e968a6d55def21242a386abf30511c71c64dd7386cbfece40662bc5422265e6d7849ff4a37a601a240d71e74c821123ef64c978e8c99460a63
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import raf from '../utils/raf'
|
2
2
|
import supportDom from '../decorators/supportDom'
|
3
3
|
import getKey from '../utils/getKey'
|
4
|
+
import noop from '../utils/noop'
|
4
5
|
|
5
6
|
@supportDom
|
6
7
|
export default class TagInput {
|
@@ -9,7 +10,8 @@ export default class TagInput {
|
|
9
10
|
this.dom = dom
|
10
11
|
this.defaultInputWidth = 128
|
11
12
|
this.validate = options.validate || (() => ({ isTag: true }))
|
12
|
-
this.
|
13
|
+
this.suggest = options.suggest || noop
|
14
|
+
this.change = options.change || noop
|
13
15
|
this.isComposing = false
|
14
16
|
this.raf = raf
|
15
17
|
this.tags = []
|
@@ -22,12 +24,29 @@ export default class TagInput {
|
|
22
24
|
}
|
23
25
|
|
24
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
|
+
|
25
36
|
const input = document.createElement('input')
|
26
37
|
input.type = 'text'
|
27
|
-
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
|
+
|
28
44
|
this.input = input
|
45
|
+
this.suggestInput = suggestInput
|
29
46
|
this.canvas = document.createElement('canvas')
|
30
|
-
this.
|
47
|
+
this.inputDiv = inputDiv
|
48
|
+
|
49
|
+
this.dom.append(inputDiv)
|
31
50
|
}
|
32
51
|
|
33
52
|
getTextWidth(text, font) {
|
@@ -55,9 +74,9 @@ export default class TagInput {
|
|
55
74
|
}, 500)
|
56
75
|
}
|
57
76
|
|
58
|
-
async addTagIfNeeded(
|
59
|
-
const { input } = this
|
60
|
-
const inputValue = input.value
|
77
|
+
async addTagIfNeeded() {
|
78
|
+
const { input, suggestInput, inputDiv } = this
|
79
|
+
const inputValue = suggestInput.value || input.value
|
61
80
|
const res = await this.validate(inputValue)
|
62
81
|
if (! res.isTag) {
|
63
82
|
return this.shake()
|
@@ -83,8 +102,9 @@ export default class TagInput {
|
|
83
102
|
tag.appendChild(btn)
|
84
103
|
|
85
104
|
this.tags.push({ elem: tag, remove: handleBtnClick, res })
|
86
|
-
this.dom.insertBefore(tag,
|
105
|
+
this.dom.insertBefore(tag, inputDiv)
|
87
106
|
input.value = ''
|
107
|
+
suggestInput.value = ''
|
88
108
|
|
89
109
|
this.change(this.tags.slice())
|
90
110
|
}
|
@@ -120,7 +140,7 @@ export default class TagInput {
|
|
120
140
|
this.addEvent(input, 'keydown', async event => {
|
121
141
|
const key = getKey(event)
|
122
142
|
if ((key === 'enter') && (! this.isComposing)) {
|
123
|
-
await this.addTagIfNeeded(
|
143
|
+
await this.addTagIfNeeded()
|
124
144
|
}
|
125
145
|
else if ((key === 'backspace') && (lastValue === '')) {
|
126
146
|
this.removeTagIfNeeded()
|
@@ -129,6 +149,7 @@ export default class TagInput {
|
|
129
149
|
})
|
130
150
|
|
131
151
|
this.addEvent(input, 'input', event => {
|
152
|
+
this.suggestInputIfNeeded(input.value)
|
132
153
|
this.raf(() => {
|
133
154
|
const textWidth = this.getTextWidth(input.value, font)
|
134
155
|
const nextWidth = this.getNextInputWidth(textWidth)
|
@@ -137,8 +158,21 @@ export default class TagInput {
|
|
137
158
|
})
|
138
159
|
}
|
139
160
|
|
161
|
+
async suggestInputIfNeeded(value) {
|
162
|
+
const suggestValue = await this.suggest(value)
|
163
|
+
this.raf(() => {
|
164
|
+
if (this.input.value === value) {
|
165
|
+
this.suggestInput.value = (suggestValue || '')
|
166
|
+
}
|
167
|
+
})
|
168
|
+
}
|
169
|
+
|
140
170
|
destroy() {
|
141
171
|
this.tags.forEach(tag => tag.remove())
|
142
|
-
this.
|
172
|
+
this.inputDiv.remove()
|
173
|
+
this.canvas = null
|
174
|
+
this.input = null
|
175
|
+
this.suggestInput = null
|
176
|
+
this.inputDiv = null
|
143
177
|
}
|
144
178
|
}
|
@@ -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.234
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- kmsheng
|
@@ -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
|