Search improvements
Former-commit-id: 02833b77fadd0e4a71bf7c6eb9a989f22341d6d9 [formerly 4af05232c153b5a692ca2dc1e11086886380f59a] [formerly a7404255b9b512ff57166674caaf9a25b39b0d65 [formerly 690f515439
]]
Former-commit-id: 90f73bf9c4f0384dbe5c839885dcac7b5fdc15fa [formerly 8b43240cb17d54d087978ededbac39e354b21d8e]
Former-commit-id: 3844ae5471aa4b32a37c2469ab28e3a4bc1fedb4
pull/726/head
parent
5d84c22a91
commit
8d00050b9c
|
@ -25,7 +25,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapMutations } from 'vuex'
|
import { mapMutations, mapGetters } from 'vuex'
|
||||||
import filesize from 'filesize'
|
import filesize from 'filesize'
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
import webdav from '../webdav.js'
|
import webdav from '../webdav.js'
|
||||||
|
@ -35,8 +35,8 @@ export default {
|
||||||
name: 'item',
|
name: 'item',
|
||||||
props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
|
props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
|
||||||
methods: {
|
methods: {
|
||||||
// ...mapGetters('selectedCount'),
|
...mapGetters(['selectedCount']),
|
||||||
...mapMutations('addSelected', 'removeSelected'),
|
...mapMutations(['addSelected', 'removeSelected']),
|
||||||
icon: function () {
|
icon: function () {
|
||||||
if (this.isDir) return 'folder'
|
if (this.isDir) return 'folder'
|
||||||
if (this.type === 'image') return 'insert_photo'
|
if (this.type === 'image') return 'insert_photo'
|
||||||
|
|
|
@ -1,53 +1,79 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="search" v-on:mouseleave="hover = false" v-on:click="click" v-bind:class="{ active: focus || hover }">
|
<div id="search" v-on:mouseleave="hover = false" v-on:click="click" v-bind:class="{ active: focus || hover, ongoing }">
|
||||||
<i class="material-icons" title="Search">search</i>
|
<i class="material-icons" title="Search">search</i>
|
||||||
<input type="text"
|
<input type="text"
|
||||||
|
v-model.trim="value"
|
||||||
v-on:focus="focus = true"
|
v-on:focus="focus = true"
|
||||||
v-on:blur="focus = false"
|
v-on:blur="focus = false"
|
||||||
v-on:keyup="keyup"
|
v-on:keyup="keyup"
|
||||||
v-on:keyup.enter="submit"
|
v-on:keyup.enter="submit"
|
||||||
aria-label="Write here to search"
|
aria-label="Write here to search"
|
||||||
placeholder="Search or execute a command...">
|
:placeholder="placeholder()">
|
||||||
<div v-on:mouseover="hover = true">
|
<div v-on:mouseover="hover = true">
|
||||||
<div>Loading...</div>
|
<div>
|
||||||
|
<span v-if="search.length === 0 && commands.length === 0">{{ text() }}</span>
|
||||||
|
<ul v-else-if="search.length > 0">
|
||||||
|
<li v-for="s in search"><a :href="'.' + s">.{{ s }}</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul v-else-if="commands.length > 0">
|
||||||
|
<li v-for="c in commands">{{ c }}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
<p><i class="material-icons spin">autorenew</i></p>
|
<p><i class="material-icons spin">autorenew</i></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import page from '../page'
|
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
|
import page from '../page'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'search',
|
name: 'search',
|
||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
|
value: '',
|
||||||
hover: false,
|
hover: false,
|
||||||
focus: false,
|
focus: false,
|
||||||
|
ongoing: false,
|
||||||
scrollable: null,
|
scrollable: null,
|
||||||
box: null,
|
search: [],
|
||||||
input: null
|
commands: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: mapState('user'),
|
computed: mapState(['user']),
|
||||||
mounted: function () {
|
mounted: function () {
|
||||||
this.scrollable = document.querySelector('#search > div')
|
this.scrollable = document.querySelector('#search > div')
|
||||||
this.box = document.querySelector('#search > div div')
|
|
||||||
this.input = document.querySelector('#search input')
|
|
||||||
this.reset()
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
reset: function () {
|
placeholder: function () {
|
||||||
if (this.user.allowCommands && this.user.commands.length > 0) {
|
if (this.user.allowCommands && this.user.commands.length > 0) {
|
||||||
this.box.innerHTML = `Search or use one of your supported commands: ${this.user.commands.join(', ')}.`
|
return 'Search or execute a command...'
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'Search...'
|
||||||
|
},
|
||||||
|
text: function () {
|
||||||
|
if (this.value.length === 0) {
|
||||||
|
if (this.user.allowCommands && this.user.commands.length > 0) {
|
||||||
|
return `Search or use one of your supported commands: ${this.user.commands.join(', ')}.`
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'Type and press enter to search.'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.supported() || !this.user.allowCommands) {
|
||||||
|
return 'Press enter to search.'
|
||||||
} else {
|
} else {
|
||||||
this.box.innerHTML = 'Type and press enter to search.'
|
return 'Press enter to execute.'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
keyup: function () {
|
||||||
|
this.search.length = 0
|
||||||
|
this.commands.length = 0
|
||||||
|
},
|
||||||
supported: function () {
|
supported: function () {
|
||||||
let value = this.input.value
|
let pieces = this.value.split(' ')
|
||||||
let pieces = value.split(' ')
|
|
||||||
|
|
||||||
for (let i = 0; i < this.user.commands.length; i++) {
|
for (let i = 0; i < this.user.commands.length; i++) {
|
||||||
if (pieces[0] === this.user.commands[0]) {
|
if (pieces[0] === this.user.commands[0]) {
|
||||||
|
@ -61,68 +87,47 @@ export default {
|
||||||
event.currentTarget.classList.add('active')
|
event.currentTarget.classList.add('active')
|
||||||
this.$el.querySelector('input').focus()
|
this.$el.querySelector('input').focus()
|
||||||
},
|
},
|
||||||
keyup: function (event) {
|
|
||||||
let el = event.currentTarget
|
|
||||||
|
|
||||||
if (el.value.length === 0) {
|
|
||||||
this.reset()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.supported() || !this.user.allowCommands) {
|
|
||||||
this.box.innerHTML = 'Press enter to search.'
|
|
||||||
} else {
|
|
||||||
this.box.innerHTML = 'Press enter to execute.'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
submit: function (event) {
|
submit: function (event) {
|
||||||
this.box.innerHTML = ''
|
this.ongoing = true
|
||||||
this.$el.classList.add('ongoing')
|
let uri = window.location.host + window.location.pathname
|
||||||
|
|
||||||
let url = window.location.host + window.location.pathname
|
if (this.$store.state.req.kind !== 'listing') {
|
||||||
|
uri = page.removeLastDir(uri)
|
||||||
if (document.getElementById('editor')) {
|
|
||||||
url = page.removeLastDir(url)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let protocol = this.$store.state.ssl ? 'wss:' : 'ws:'
|
uri = `${(this.$store.state.ssl ? 'wss:' : 'ws:')}//${uri}`
|
||||||
|
|
||||||
if (this.supported() && this.user.allowCommands) {
|
if (this.supported() && this.user.allowCommands) {
|
||||||
let conn = new window.WebSocket(`${protocol}//${url}?command=true`)
|
let conn = new window.WebSocket(`${uri}?command=true`)
|
||||||
|
|
||||||
conn.onopen = () => {
|
conn.onopen = () => conn.send(this.value)
|
||||||
conn.send(this.input.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
conn.onmessage = (event) => {
|
conn.onmessage = (event) => {
|
||||||
this.box.innerHTML = event.data
|
this.commands.push(event.data)
|
||||||
this.scrollable.scrollTop = this.scrollable.scrollHeight
|
this.scrollable.scrollTop = this.scrollable.scrollHeight
|
||||||
}
|
}
|
||||||
|
|
||||||
conn.onclose = (event) => {
|
conn.onclose = (event) => {
|
||||||
this.$el.classList.remove('ongoing')
|
this.ongoing = false
|
||||||
|
this.scrollable.scrollTop = this.scrollable.scrollHeight
|
||||||
page.reload()
|
page.reload()
|
||||||
}
|
}
|
||||||
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
this.box.innerHTML = '<ul></ul>'
|
let conn = new window.WebSocket(`${uri}?search=true`)
|
||||||
|
|
||||||
let ul = this.box.querySelector('ul')
|
conn.onopen = () => conn.send(this.value)
|
||||||
let conn = new window.WebSocket(`${protocol}//${url}?search=true`)
|
|
||||||
|
|
||||||
conn.onopen = () => {
|
|
||||||
conn.send(this.input.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
conn.onmessage = (event) => {
|
conn.onmessage = (event) => {
|
||||||
ul.innerHTML += `<li><a href=".${event.data}">${event.data}</a></li>`
|
this.search.push(event.data)
|
||||||
this.scrollable.scrollTop = this.scrollable.scrollHeight
|
this.scrollable.scrollTop = this.scrollable.scrollHeight
|
||||||
}
|
}
|
||||||
|
|
||||||
conn.onclose = () => {
|
conn.onclose = () => {
|
||||||
this.$el.classList.remove('ongoing')
|
this.ongoing = false
|
||||||
|
this.scrollable.scrollTop = this.scrollable.scrollHeight
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue