Sharkey/src/web/app/desktop/views/components/home.vue

310 lines
7.6 KiB
Vue
Raw Normal View History

2018-02-09 02:46:23 +02:00
<template>
2018-02-11 06:02:35 +02:00
<div class="mk-home" :data-customize="customize">
2018-02-09 06:11:30 +02:00
<div class="customize" v-if="customize">
<a href="/">%fa:check%完了</a>
<div>
<div class="adder">
<p>ウィジェットを追加:</p>
2018-02-11 06:02:35 +02:00
<select v-model="widgetAdderSelected">
2018-02-09 06:11:30 +02:00
<option value="profile">プロフィール</option>
<option value="calendar">カレンダー</option>
<option value="timemachine">カレンダー(タイムマシン)</option>
<option value="activity">アクティビティ</option>
2018-02-20 18:12:18 +02:00
<option value="rss">RSSリーダー</option>
2018-02-09 06:11:30 +02:00
<option value="trends">トレンド</option>
<option value="photo-stream">フォトストリーム</option>
<option value="slideshow">スライドショー</option>
<option value="version">バージョン</option>
<option value="broadcast">ブロードキャスト</option>
<option value="notifications">通知</option>
2018-02-20 18:12:18 +02:00
<option value="users">おすすめユーザー</option>
<option value="polls">投票</option>
2018-02-09 06:11:30 +02:00
<option value="post-form">投稿フォーム</option>
<option value="messaging">メッセージ</option>
<option value="channel">チャンネル</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>
</div>
<div class="trash">
<div ref="trash"></div>
<p>ゴミ箱</p>
</div>
</div>
</div>
<div class="main">
2018-02-19 11:26:20 +02:00
<div v-for="place in ['left', 'main', 'right']" :class="place" :ref="place" :data-place="place">
<template v-if="place != 'main'">
<template v-for="widget in widgets[place]">
2018-02-21 08:30:03 +02:00
<div class="customize-container" v-if="customize" :key="widget.id" @contextmenu.stop.prevent="onWidgetContextmenu(widget.id)" :data-widget-id="widget.id">
2018-02-19 11:26:20 +02:00
<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id"/>
2018-02-09 06:11:30 +02:00
</div>
<template v-else>
2018-02-19 11:26:20 +02:00
<component :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :ref="widget.id" @chosen="warp"/>
2018-02-09 06:11:30 +02:00
</template>
</template>
2018-02-19 11:26:20 +02:00
</template>
<template v-else>
<mk-timeline ref="tl" @loaded="onTlLoaded" v-if="place == 'main' && mode == 'timeline'"/>
<mk-mentions @loaded="onTlLoaded" v-if="place == 'main' && mode == 'mentions'"/>
</template>
2018-02-09 06:11:30 +02:00
</div>
2018-02-09 02:46:23 +02:00
</div>
2018-02-09 06:11:30 +02:00
</div>
2018-02-09 02:46:23 +02:00
</template>
2018-02-11 06:09:46 +02:00
<script lang="ts">
2018-02-11 06:02:35 +02:00
import Vue from 'vue';
2018-02-11 06:09:46 +02:00
import * as uuid from 'uuid';
2018-02-21 08:30:03 +02:00
import * as Sortable from 'sortablejs';
2018-02-09 06:11:30 +02:00
2018-02-11 06:02:35 +02:00
export default Vue.extend({
2018-02-09 06:11:30 +02:00
props: {
customize: Boolean,
mode: {
type: String,
default: 'timeline'
}
},
data() {
return {
2018-02-11 06:02:35 +02:00
widgetAdderSelected: null
2018-02-09 06:11:30 +02:00
};
},
2018-02-19 11:26:20 +02:00
computed: {
2018-02-21 13:55:03 +02:00
home(): any {
//#region 互換性のため
(this as any).os.i.client_settings.home.forEach(w => {
if (w.name == 'rss-reader') w.name = 'rss';
if (w.name == 'user-recommendation') w.name = 'users';
if (w.name == 'recommended-polls') w.name = 'polls';
});
//#endregion
return (this as any).os.i.client_settings.home;
},
2018-02-19 11:26:20 +02:00
leftWidgets(): any {
2018-02-21 13:55:03 +02:00
return this.home.filter(w => w.place == 'left');
2018-02-19 11:26:20 +02:00
},
rightWidgets(): any {
2018-02-21 13:55:03 +02:00
return this.home.filter(w => w.place == 'right');
2018-02-19 11:26:20 +02:00
},
widgets(): any {
return {
left: this.leftWidgets,
right: this.rightWidgets,
};
},
leftEl(): Element {
return (this.$refs.left as Element[])[0];
},
rightEl(): Element {
return (this.$refs.right as Element[])[0];
}
},
mounted() {
this.$nextTick(() => {
if (!this.customize) {
if (this.leftEl.children.length == 0) {
this.leftEl.parentNode.removeChild(this.leftEl);
}
if (this.rightEl.children.length == 0) {
this.rightEl.parentNode.removeChild(this.rightEl);
}
}
if (this.customize) {
(this as any).apis.dialog({
title: '%fa:info-circle%カスタマイズのヒント',
text: '<p>ホームのカスタマイズでは、ウィジェットを追加/削除したり、ドラッグ&ドロップして並べ替えたりすることができます。</p>' +
'<p>一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。</p>' +
'<p>ウィジェットを削除するには、ヘッダーの<strong>「ゴミ箱」</strong>と書かれたエリアにウィジェットをドラッグ&ドロップします。</p>' +
'<p>カスタマイズを終了するには、右上の「完了」をクリックします。</p>',
actions: [{
text: 'Got it!'
}]
});
const sortableOption = {
group: 'kyoppie',
animation: 150,
onMove: evt => {
const id = evt.dragged.getAttribute('data-widget-id');
2018-02-21 08:30:03 +02:00
this.home.find(w => w.id == id).place = evt.to.getAttribute('data-place');
2018-02-19 11:26:20 +02:00
},
onSort: () => {
this.saveHome();
}
};
new Sortable(this.leftEl, sortableOption);
new Sortable(this.rightEl, sortableOption);
new Sortable(this.$refs.trash, Object.assign({}, sortableOption, {
onAdd: evt => {
const el = evt.item;
const id = el.getAttribute('data-widget-id');
el.parentNode.removeChild(el);
2018-02-21 13:55:03 +02:00
(this as any).os.i.client_settings.home = this.home.filter(w => w.id != id);
2018-02-19 11:26:20 +02:00
this.saveHome();
}
}));
}
});
},
2018-02-09 06:11:30 +02:00
methods: {
onTlLoaded() {
this.$emit('loaded');
},
onWidgetContextmenu(widgetId) {
2018-02-21 08:30:03 +02:00
(this.$refs[widgetId] as any)[0].func();
2018-02-09 06:11:30 +02:00
},
addWidget() {
const widget = {
2018-02-11 06:02:35 +02:00
name: this.widgetAdderSelected,
2018-02-09 06:11:30 +02:00
id: uuid(),
place: 'left',
data: {}
};
2018-02-21 08:30:03 +02:00
this.home.unshift(widget);
2018-02-09 06:11:30 +02:00
this.saveHome();
},
saveHome() {
2018-02-18 05:35:18 +02:00
(this as any).api('i/update_home', {
2018-02-21 08:30:03 +02:00
home: this.home
2018-02-11 06:02:35 +02:00
});
2018-02-09 06:11:30 +02:00
},
2018-02-19 11:26:20 +02:00
warp(date) {
(this.$refs.tl as any)[0].warp(date);
2018-02-09 06:11:30 +02:00
}
}
2018-02-11 06:02:35 +02:00
});
2018-02-09 06:11:30 +02:00
</script>
2018-02-09 02:46:23 +02:00
<style lang="stylus" scoped>
2018-02-11 06:02:35 +02:00
.mk-home
display block
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
&[data-customize]
padding-top 48px
background-image url('/assets/desktop/grid.svg')
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
> .main > main > *:not(.maintop)
cursor not-allowed
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
> *
pointer-events none
&:not([data-customize])
> .main > *:empty
display none
> .customize
position fixed
z-index 1000
top 0
left 0
width 100%
height 48px
background #f7f7f7
box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
> a
display block
position absolute
z-index 1001
top 0
right 0
padding 0 16px
line-height 48px
text-decoration none
color $theme-color-foreground
background $theme-color
transition background 0.1s ease
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
&:hover
background lighten($theme-color, 10%)
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
&:active
background darken($theme-color, 10%)
transition background 0s ease
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
> [data-fa]
margin-right 8px
> div
2018-02-09 02:46:23 +02:00
display flex
margin 0 auto
2018-02-11 06:02:35 +02:00
max-width 1200px - 32px
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
> div
width 50%
&.adder
> p
display inline
line-height 48px
&.trash
border-left solid 1px #ddd
> div
width 100%
height 100%
> p
position absolute
top 0
left 0
width 100%
line-height 48px
margin 0
text-align center
2018-02-09 02:46:23 +02:00
pointer-events none
2018-02-11 06:02:35 +02:00
> .main
display flex
justify-content center
margin 0 auto
max-width 1200px
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
> *
.customize-container
cursor move
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
> *
pointer-events none
2018-02-09 02:46:23 +02:00
2018-02-19 11:26:20 +02:00
> .main
2018-02-11 06:02:35 +02:00
padding 16px
width calc(100% - 275px * 2)
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
> *:not(main)
width 275px
2018-02-19 11:26:20 +02:00
padding 16px 0 16px 0
2018-02-09 02:46:23 +02:00
2018-02-19 11:26:20 +02:00
> *:not(:last-child)
margin-bottom 16px
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
> .left
padding-left 16px
> .right
padding-right 16px
@media (max-width 1100px)
> *:not(main)
display none
2018-02-19 11:26:20 +02:00
> .main
2018-02-11 06:02:35 +02:00
float none
width 100%
max-width 700px
margin 0 auto
2018-02-09 02:46:23 +02:00
</style>