rudeshark.net/src/client/app/mobile/views/pages/home.vue

260 lines
6.7 KiB
Vue
Raw Normal View History

2018-02-15 09:50:19 +01:00
<template>
2018-02-23 18:46:09 +01:00
<mk-ui>
<span slot="header" @click="showTl = !showTl">
<template v-if="showTl">%fa:home%タイムライン</template>
<template v-else>%fa:home%ウィジェット</template>
<span style="margin-left:8px">
<template v-if="showTl">%fa:angle-down%</template>
<template v-else>%fa:angle-up%</template>
</span>
</span>
<template slot="func">
<button @click="fn" v-if="showTl">%fa:pencil-alt%</button>
<button @click="customizing = !customizing" v-else>%fa:cog%</button>
</template>
<main>
<div class="tl">
<mk-timeline @loaded="onLoaded" v-show="showTl"/>
</div>
2018-02-23 19:30:13 +01:00
<div class="widgets" v-show="!showTl">
2018-02-23 18:46:09 +01:00
<template v-if="customizing">
<header>
<select v-model="widgetAdderSelected">
<option value="profile">プロフィール</option>
<option value="calendar">カレンダー</option>
<option value="activity">アクティビティ</option>
<option value="rss">RSSリーダー</option>
<option value="photo-stream">フォトストリーム</option>
2018-02-25 14:50:26 +01:00
<option value="slideshow">スライドショー</option>
2018-02-23 18:46:09 +01:00
<option value="version">バージョン</option>
<option value="access-log">アクセスログ</option>
<option value="server">サーバー情報</option>
<option value="donation">寄付のお願い</option>
<option value="nav">ナビゲーション</option>
<option value="tips">ヒント</option>
</select>
<button @click="addWidget">追加</button>
2018-02-23 19:05:50 +01:00
<p><a @click="hint">カスタマイズのヒント</a></p>
2018-02-23 18:46:09 +01:00
</header>
<x-draggable
:list="widgets"
:options="{ handle: '.handle', animation: 150 }"
@sort="onWidgetSort"
>
<div v-for="widget in widgets" class="customize-container" :key="widget.id">
<header>
<span class="handle">%fa:bars%</span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
</header>
2018-02-23 19:03:26 +01:00
<div @click="widgetFunc(widget.id)">
2018-02-25 14:50:26 +01:00
<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" :is-mobile="true"/>
2018-02-23 18:46:09 +01:00
</div>
</div>
</x-draggable>
</template>
<template v-else>
2018-02-23 23:49:03 +01:00
<component class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" :is-mobile="true" @chosen="warp"/>
2018-02-23 18:46:09 +01:00
</template>
</div>
</main>
2018-02-15 09:50:19 +01:00
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
2018-02-23 18:46:09 +01:00
import * as XDraggable from 'vuedraggable';
import * as uuid from 'uuid';
2018-02-15 09:50:19 +01:00
import Progress from '../../../common/scripts/loading';
2018-04-07 19:30:37 +02:00
import getNoteSummary from '../../../../../renderers/get-note-summary';
2018-02-15 09:50:19 +01:00
export default Vue.extend({
2018-02-23 18:46:09 +01:00
components: {
XDraggable
},
2018-02-15 09:50:19 +01:00
data() {
return {
connection: null,
connectionId: null,
2018-02-23 18:46:09 +01:00
unreadCount: 0,
showTl: true,
widgets: [],
customizing: false,
widgetAdderSelected: null
2018-02-15 09:50:19 +01:00
};
},
2018-02-23 18:46:09 +01:00
created() {
2018-04-07 20:58:11 +02:00
if ((this as any).os.i.clientSettings.mobileHome == null) {
Vue.set((this as any).os.i.clientSettings, 'mobileHome', [{
2018-02-23 18:46:09 +01:00
name: 'calendar',
2018-02-23 19:03:26 +01:00
id: 'a', data: {}
2018-02-23 18:46:09 +01:00
}, {
name: 'activity',
2018-02-23 19:03:26 +01:00
id: 'b', data: {}
2018-02-23 18:46:09 +01:00
}, {
name: 'rss',
2018-02-23 19:03:26 +01:00
id: 'c', data: {}
2018-02-23 18:46:09 +01:00
}, {
name: 'photo-stream',
2018-02-23 19:03:26 +01:00
id: 'd', data: {}
2018-02-23 18:46:09 +01:00
}, {
name: 'donation',
2018-02-23 19:03:26 +01:00
id: 'e', data: {}
2018-02-23 18:46:09 +01:00
}, {
name: 'nav',
2018-02-23 19:03:26 +01:00
id: 'f', data: {}
2018-02-23 18:46:09 +01:00
}, {
name: 'version',
2018-02-23 19:03:26 +01:00
id: 'g', data: {}
2018-02-23 18:46:09 +01:00
}]);
2018-04-07 20:58:11 +02:00
this.widgets = (this as any).os.i.clientSettings.mobileHome;
2018-02-23 19:03:26 +01:00
this.saveHome();
} else {
2018-04-07 20:58:11 +02:00
this.widgets = (this as any).os.i.clientSettings.mobileHome;
2018-02-23 18:46:09 +01:00
}
2018-02-23 19:03:26 +01:00
2018-04-07 20:58:11 +02:00
this.$watch('os.i.clientSettings', i => {
this.widgets = (this as any).os.i.clientSettings.mobileHome;
2018-02-23 19:03:26 +01:00
}, {
deep: true
});
2018-02-23 18:46:09 +01:00
},
2018-02-15 09:50:19 +01:00
mounted() {
document.title = 'Misskey';
document.documentElement.style.background = '#313a42';
2018-02-18 04:35:18 +01:00
this.connection = (this as any).os.stream.getConnection();
this.connectionId = (this as any).os.stream.use();
2018-02-15 09:50:19 +01:00
2018-04-07 19:30:37 +02:00
this.connection.on('note', this.onStreamNote);
2018-02-23 23:49:03 +01:00
this.connection.on('mobile_home_updated', this.onHomeUpdated);
2018-02-15 09:50:19 +01:00
document.addEventListener('visibilitychange', this.onVisibilitychange, false);
Progress.start();
},
beforeDestroy() {
2018-04-07 19:30:37 +02:00
this.connection.off('note', this.onStreamNote);
2018-02-23 23:49:03 +01:00
this.connection.off('mobile_home_updated', this.onHomeUpdated);
2018-02-18 04:35:18 +01:00
(this as any).os.stream.dispose(this.connectionId);
2018-02-15 09:50:19 +01:00
document.removeEventListener('visibilitychange', this.onVisibilitychange);
},
methods: {
fn() {
2018-02-21 19:11:24 +01:00
(this as any).apis.post();
2018-02-15 09:50:19 +01:00
},
2018-02-23 18:46:09 +01:00
onLoaded() {
2018-02-15 09:50:19 +01:00
Progress.done();
},
2018-04-07 19:30:37 +02:00
onStreamNote(note) {
if (document.hidden && note.userId !== (this as any).os.i.id) {
2018-02-15 09:50:19 +01:00
this.unreadCount++;
2018-04-07 19:30:37 +02:00
document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
2018-02-15 09:50:19 +01:00
}
},
onVisibilitychange() {
if (!document.hidden) {
this.unreadCount = 0;
document.title = 'Misskey';
}
2018-02-23 18:46:09 +01:00
},
2018-02-23 23:49:03 +01:00
onHomeUpdated(data) {
if (data.home) {
2018-04-07 20:58:11 +02:00
(this as any).os.i.clientSettings.mobileHome = data.home;
2018-02-23 23:49:03 +01:00
this.widgets = data.home;
} else {
2018-04-07 20:58:11 +02:00
const w = (this as any).os.i.clientSettings.mobileHome.find(w => w.id == data.id);
2018-02-23 23:49:03 +01:00
if (w != null) {
w.data = data.data;
this.$refs[w.id][0].preventSave = true;
this.$refs[w.id][0].props = w.data;
2018-04-07 20:58:11 +02:00
this.widgets = (this as any).os.i.clientSettings.mobileHome;
2018-02-23 23:49:03 +01:00
}
}
},
2018-02-23 19:05:50 +01:00
hint() {
alert('ウィジェットを追加/削除したり並べ替えたりできます。ウィジェットを移動するには「三」をドラッグします。ウィジェットを削除するには「x」をタップします。いくつかのウィジェットはタップすることで表示を変更できます。');
},
2018-02-23 19:03:26 +01:00
widgetFunc(id) {
const w = this.$refs[id][0];
if (w.func) w.func();
},
2018-02-23 18:46:09 +01:00
onWidgetSort() {
this.saveHome();
},
addWidget() {
const widget = {
name: this.widgetAdderSelected,
id: uuid(),
data: {}
};
this.widgets.unshift(widget);
this.saveHome();
},
removeWidget(widget) {
this.widgets = this.widgets.filter(w => w.id != widget.id);
this.saveHome();
},
saveHome() {
2018-04-07 20:58:11 +02:00
(this as any).os.i.clientSettings.mobileHome = this.widgets;
2018-02-23 18:46:09 +01:00
(this as any).api('i/update_mobile_home', {
home: this.widgets
});
},
warp() {
2018-02-15 09:50:19 +01:00
}
}
});
</script>
2018-02-23 18:46:09 +01:00
<style lang="stylus" scoped>
main
> .tl
> .mk-timeline
max-width 600px
margin 0 auto
padding 8px
@media (min-width 500px)
padding 16px
> .widgets
margin 0 auto
max-width 500px
2018-02-23 19:30:13 +01:00
@media (min-width 500px)
padding 8px
2018-02-23 18:46:09 +01:00
> header
padding 8px
background #fff
.widget
margin 8px
.customize-container
margin 8px
background #fff
> header
line-height 32px
background #eee
> .handle
padding 0 8px
> .remove
position absolute
top 0
right 0
padding 0 8px
line-height 32px
> div
padding 8px
> *
pointer-events none
</style>