limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-26 20:07:33 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
こぴなたみぽ 2018-02-17 09:19:16 +09:00
parent dc6796b07c
commit 94a16c5189
4 changed files with 70 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/web/app/mobile/tags/page/search.tag
View file

@ -1,26 +0,0 @@
<mk-search-page>
<mk-ui ref="ui">
<mk-search ref="search" query={ parent.opts.query }/>
</mk-ui>
<style lang="stylus" scoped>
:scope
display block
</style>
<script lang="typescript">
import ui from '../../scripts/ui-event';
import Progress from '../../../common/scripts/loading';
this.on('mount', () => {
document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.opts.query} | Misskey`
// TODO: クエリをHTMLエスケープ
ui.trigger('title', '%fa:search%' + this.opts.query);
document.documentElement.style.background = '#313a42';
Progress.start();
this.$refs.ui.refs.search.on('loaded', () => {
Progress.done();
});
});
</script>
</mk-search-page>

42
src/web/app/mobile/tags/search-posts.tag
View file

@ -1,42 +0,0 @@
<mk-search-posts>
<mk-timeline init={ init } more={ more } empty={ '%i18n:mobile.tags.mk-search-posts.empty%'.replace('{}', query) }/>
<style lang="stylus" scoped>
:scope
display block
margin 8px auto
max-width 500px
width calc(100% - 16px)
background #fff
border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
@media (min-width 500px)
margin 16px auto
width calc(100% - 32px)
</style>
<script lang="typescript">
import parse from '../../common/scripts/parse-search-query';
this.mixin('api');
this.limit = 30;
this.offset = 0;
this.query = this.opts.query;
this.init = new Promise((res, rej) => {
this.$root.$data.os.api('posts/search', parse(this.query)).then(posts => {
res(posts);
this.$emit('loaded');
});
});
this.more = () => {
this.offset += this.limit;
return this.$root.$data.os.api('posts/search', Object.assign({}, parse(this.query), {
limit: this.limit,
offset: this.offset
}));
};
</script>
</mk-search-posts>

16
src/web/app/mobile/tags/search.tag
View file

@ -1,16 +0,0 @@
<mk-search>
<mk-search-posts ref="posts" query={ query }/>
<style lang="stylus" scoped>
:scope
display block
</style>
<script lang="typescript">
this.query = this.opts.query;
this.on('mount', () => {
this.$refs.posts.on('loaded', () => {
this.$emit('loaded');
});
});
</script>
</mk-search>

70
src/web/app/mobile/views/pages/search.vue Normal file
View file

@ -0,0 +1,70 @@
<template>
<mk-ui>
<span slot="header">%fa:search% {{ query }}</span>
<main v-if="!fetching">
<mk-posts :class="$style.posts">
<span v-if="posts.length == 0">{{ '%i18n:mobile.tags.mk-search-posts.empty%'.replace('{}', query) }}</span>
<button v-if="canFetchMore" @click="more" :disabled="fetching" slot="tail">
<span v-if="!fetching">%i18n:mobile.tags.mk-timeline.load-more%</span>
<span v-if="fetching">%i18n:common.loading%<mk-ellipsis/></span>
</button>
</mk-posts>
</main>
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
import Progress from '../../../common/scripts/loading';
import parse from '../../../common/scripts/parse-search-query';
const limit = 30;
export default Vue.extend({
props: ['query'],
data() {
return {
fetching: true,
posts: [],
offset: 0
};
},
mounted() {
document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.query} | Misskey`;
document.documentElement.style.background = '#313a42';
Progress.start();
this.$root.$data.os.api('posts/search', Object.assign({}, parse(this.query), {
limit: limit
})).then(posts => {
this.posts = posts;
this.fetching = false;
Progress.done();
});
},
methods: {
more() {
this.offset += limit;
return this.$root.$data.os.api('posts/search', Object.assign({}, parse(this.query), {
limit: limit,
offset: this.offset
}));
}
}
});
</script>
<style lang="stylus" module>
.posts
margin 8px auto
max-width 500px
width calc(100% - 16px)
background #fff
border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
@media (min-width 500px)
margin 16px auto
width calc(100% - 32px)
</style>