Skip to content

Commit 5a3847d

Browse files
antfuantfu
committed
searching
search fix
1 parent 2f6f036 commit 5a3847d

File tree

4 files changed

+118
-24
lines changed

4 files changed

+118
-24
lines changed

‎public/index.html

+1-6
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,14 @@
77
<link rel="icon" type="image/png" size="32x32" href="/favicon-32x32.png">
88
<link rel="icon" type="image/png" size="16x16" href="/favicon-16x16.png">
99

10-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
11-
<link rel="stylesheet" href="/style.css">
1210
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
1311
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" />
1412
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/wenyan-lang/highlight/wenyan-light.codemirror.css"/>
1513
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/runmode/runmode.js"></script>
1614
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/mode/simple.js"></script>
17-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/selection/active-line.js"></script>
18-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/mode/javascript/javascript.js"></script>
1915
<script src="https://cdn.jsdelivr.net/gh/wenyan-lang/highlight/codemirror.js"></script>
2016
<script src="https://code.iconify.design/1/1.0.0-rc1/iconify.min.js"></script>
21-
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.2/beautify.js"></script>
22-
<script src="https://unpkg.com/@wenyanlang/core"></script>
17+
<link rel="stylesheet" href="/style.css">
2318

2419
<title>文言片語 - Snippets for wenyan-lang</title>
2520
</head>

‎src/api.js

+5
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ export class API {
1212
const res = await axios.get(`${API_ROOT}/pages/${page}`)
1313
return res.data
1414
}
15+
16+
static async search(str) {
17+
const res = await axios.post(`${API_ROOT}/search`, { keywords: str.split(' ') })
18+
return res.data
19+
}
1520

1621
static async vote(id, v) {
1722
const res = await axios.get(`${API_ROOT}/snippets/${id}/vote/${v}`)

‎src/components/Editor.vue

+81-14
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ export default {
1616
data() {
1717
return {
1818
loading: true,
19+
token: 'public',
20+
unlocked: false,
21+
snapshot: {},
1922
}
2023
},
2124
components: {
@@ -26,42 +29,106 @@ export default {
2629
this.$refs.iframe.contentWindow.postMessage(data, '*')
2730
},
2831
initEditor() {
32+
this.snapshot = {...this.snippet}
2933
this.$refs.iframe.onload = () => {
30-
this.send({
31-
action: 'custom',
32-
value: [{
33-
id: 'save',
34-
icon: 'content-save',
35-
}, {
36-
id: 'fullscreen',
37-
icon: 'fullscreen',
38-
align: 'right'
39-
}]
40-
})
41-
this.send({ action: 'config', field: 'title', value: this.snippet.title })
34+
this.updateControls()
35+
this.send({ action: 'title', value: this.snippet.title })
36+
this.send({ action: 'author', value: this.snippet.author })
4237
this.send({ action: 'code', value: this.snippet.code })
38+
this.send({ action: 'config', field: 'readonly', value: this.locked })
4339
this.send({ action: 'run' })
4440
this.loading = false
4541
}
4642
},
43+
updateControls() {
44+
const controls = []
45+
46+
if (this.new) {
47+
controls.push({
48+
id: 'publish',
49+
icon: 'cloud-upload'
50+
})
51+
} else if (this.unsaved) {
52+
controls.push({
53+
id: 'save',
54+
icon: 'content-save',
55+
})
56+
}
57+
58+
controls.push({
59+
id: 'lock',
60+
icon: this.public
61+
? 'earth'
62+
: this.unlocked
63+
? 'lock-open-variant-outline'
64+
: 'lock-outline',
65+
align: 'right'
66+
})
67+
68+
if (!this.new){
69+
controls.push({
70+
id: 'fork',
71+
icon: 'source-fork',
72+
align: 'right'
73+
})
74+
}
75+
76+
controls.push({
77+
id: 'fullscreen',
78+
icon: 'fullscreen',
79+
align: 'right'
80+
})
81+
82+
controls.push({
83+
id: 'close',
84+
icon: 'close',
85+
align: 'right'
86+
})
87+
88+
this.send({
89+
action: 'custom',
90+
field: 'set',
91+
value: controls,
92+
})
93+
},
4794
registerListener () {
4895
window.addEventListener('message', this.onListener)
4996
},
5097
unregisterListener(){
5198
window.removeEventListener('message', this.onListener)
5299
},
53100
onListener(e) {
54-
const { action, source, id } = e.data
101+
const { action, source, id, value } = e.data
55102
if (source !== 'wenyan-ide')
56103
return
57-
if (action === 'custom'){
104+
if (action === 'info') {
105+
this.snapshot.code = value.code
106+
this.snapshot.title = value.title
107+
this.snapshot.author = value.author
108+
this.updateControls()
109+
}
110+
else if (action === 'custom'){
58111
switch (id){
59112
case 'fullscreen':
60113
this.$emit('fullscreen', true)
114+
break
61115
}
62116
}
63117
}
64118
},
119+
computed: {
120+
public() {
121+
return this.snippet.token === 'public'
122+
},
123+
new() {
124+
return this.snippet.id == null
125+
},
126+
unsaved () {
127+
return this.snippet.code !== this.snapshot.code
128+
|| this.snippet.title !== this.snapshot.title
129+
|| this.snippet.author !== this.snapshot.author
130+
}
131+
},
65132
watch: {
66133
snippet() {
67134
this.initEditor()

‎src/components/Home.vue

+31-4
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,19 @@
33
<div class="nav">
44
<div class="content">
55
<label class="title">文言片語</label>
6-
<input class="search" placeholder="Search snippets..." v-model="searchText"/>
6+
<input
7+
v-model="searchText"
8+
@keypress.enter="search"
9+
class="search"
10+
placeholder="Search snippets..."
11+
/>
712
<span @click="search" class="iconify" data-icon="mdi:search" data-inline="false"></span>
813
<span @click="newSnippet" class="iconify" data-icon="mdi:plus" data-inline="false"></span>
914
</div>
1015
</div>
1116
<div class="showcase">
1217
<snippet-preview
13-
v-for="(s, idx) in snippets"
18+
v-for="(s, idx) in (searchResult || snippets)"
1419
:snippet="s"
1520
:key="idx"
1621
@update="data=>updateSnippet(idx, data)"
@@ -46,8 +51,9 @@ export default {
4651
data() {
4752
return {
4853
loading: false,
49-
searchText: '',
5054
snippets: [],
55+
searchText: '',
56+
searchResult: null,
5157
page: 0,
5258
totalPages: 9999,
5359
editing: null,
@@ -71,13 +77,28 @@ export default {
7177
this.loading = false
7278
},
7379
async search() {
74-
// TODO:
80+
if (!this.searchText){
81+
this.searchResult = null
82+
return
83+
}
84+
this.searchResult = []
85+
this.loading = true
86+
const text = this.searchText
87+
const data = await API.search(text)
88+
if (text === this.searchText)
89+
this.searchResult = data
90+
this.loading = false
7591
},
7692
newSnippet() {
7793
// TODO:
7894
},
7995
updateSnippet(idx, snippet) {
8096
this.$set(this.snippets, idx, snippet)
97+
},
98+
clearSearch() {
99+
this.searchResult = null
100+
this.loading = false
101+
this.searchText = ''
81102
}
82103
},
83104
mounted() {
@@ -90,6 +111,12 @@ export default {
90111
if (bottomOfWindow)
91112
this.fetchNext()
92113
}
114+
},
115+
watch: {
116+
searchText(){
117+
if (!this.searchText)
118+
this.clearSearch()
119+
}
93120
}
94121
}
95122
</script>

0 commit comments

Comments
 (0)