From c81c4c224aa2ebe44f69875b80a272152a2401d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=93=E3=81=B4=E3=81=AA=E3=81=9F=E3=81=BF=E3=81=BD?= <syuilotan@yahoo.co.jp> Date: Sat, 17 Feb 2018 09:19:16 +0900 Subject: [PATCH] wip --- src/web/app/mobile/tags/page/search.tag | 26 --------- src/web/app/mobile/tags/search-posts.tag | 42 -------------- src/web/app/mobile/tags/search.tag | 16 ------ src/web/app/mobile/views/pages/search.vue | 70 +++++++++++++++++++++++ 4 files changed, 70 insertions(+), 84 deletions(-) delete mode 100644 src/web/app/mobile/tags/page/search.tag delete mode 100644 src/web/app/mobile/tags/search-posts.tag delete mode 100644 src/web/app/mobile/tags/search.tag create mode 100644 src/web/app/mobile/views/pages/search.vue diff --git a/src/web/app/mobile/tags/page/search.tag b/src/web/app/mobile/tags/page/search.tag deleted file mode 100644 index 44af3a2ad1..0000000000 --- a/src/web/app/mobile/tags/page/search.tag +++ /dev/null @@ -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> diff --git a/src/web/app/mobile/tags/search-posts.tag b/src/web/app/mobile/tags/search-posts.tag deleted file mode 100644 index 7b4d73f2d6..0000000000 --- a/src/web/app/mobile/tags/search-posts.tag +++ /dev/null @@ -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> diff --git a/src/web/app/mobile/tags/search.tag b/src/web/app/mobile/tags/search.tag deleted file mode 100644 index 61f3093e03..0000000000 --- a/src/web/app/mobile/tags/search.tag +++ /dev/null @@ -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> diff --git a/src/web/app/mobile/views/pages/search.vue b/src/web/app/mobile/views/pages/search.vue new file mode 100644 index 0000000000..89710d7c23 --- /dev/null +++ b/src/web/app/mobile/views/pages/search.vue @@ -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>