wip
This commit is contained in:
syuilo
parent
dab2a5dd1c
commit
cd5786d7fb
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div :data-customize="customize">
|
||||
<div class="mk-home" :data-customize="customize">
|
||||
<div class="customize" v-if="customize">
|
||||
<a href="/">%fa:check%完了</a>
|
||||
<div>
|
||||
<div class="adder">
|
||||
<p>ウィジェットを追加:</p>
|
||||
<select ref="widgetSelector">
|
||||
<select v-model="widgetAdderSelected">
|
||||
<option value="profile">プロフィール</option>
|
||||
<option value="calendar">カレンダー</option>
|
||||
<option value="timemachine">カレンダー(タイムマシン)</option>
|
||||
|
|
@ -40,11 +40,11 @@
|
|||
<div class="left">
|
||||
<div ref="left" data-place="left">
|
||||
<template v-for="widget in leftWidgets">
|
||||
<div class="customize-container" v-if="customize" :key="widget.id" @contextmenu="onWidgetContextmenu.stop.prevent(widget.id)">
|
||||
<component :is="widget.name" :widget="widget" :ref="widget.id"></component>
|
||||
<div class="customize-container" v-if="customize" :key="widget.id" @contextmenu.stop.prevent="onWidgetContextmenu(widget.id)">
|
||||
<component :is="widget.name" :widget="widget" :ref="widget.id"/>
|
||||
</div>
|
||||
<template v-else>
|
||||
<component :is="widget.name" :key="widget.id" :widget="widget" :ref="widget.id"></component>
|
||||
<component :is="widget.name" :key="widget.id" :widget="widget" :ref="widget.id"/>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -52,25 +52,25 @@
|
|||
<main ref="main">
|
||||
<div class="maintop" ref="maintop" data-place="main" v-if="customize">
|
||||
<template v-for="widget in centerWidgets">
|
||||
<div class="customize-container" v-if="customize" :key="widget.id" @contextmenu="onWidgetContextmenu.stop.prevent(widget.id)">
|
||||
<component :is="widget.name" :widget="widget" :ref="widget.id"></component>
|
||||
<div class="customize-container" v-if="customize" :key="widget.id" @contextmenu.stop.prevent="onWidgetContextmenu(widget.id)">
|
||||
<component :is="widget.name" :widget="widget" :ref="widget.id"/>
|
||||
</div>
|
||||
<template v-else>
|
||||
<component :is="widget.name" :key="widget.id" :widget="widget" :ref="widget.id"></component>
|
||||
<component :is="widget.name" :key="widget.id" :widget="widget" :ref="widget.id"/>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<mk-timeline-home-widget ref="tl" v-on:loaded="onTlLoaded" v-if="mode == 'timeline'"/>
|
||||
<mk-mentions-home-widget ref="tl" v-on:loaded="onTlLoaded" v-if="mode == 'mentions'"/>
|
||||
<mk-timeline-home-widget ref="tl" @loaded="onTlLoaded" v-if="mode == 'timeline'"/>
|
||||
<mk-mentions-home-widget ref="tl" @loaded="onTlLoaded" v-if="mode == 'mentions'"/>
|
||||
</main>
|
||||
<div class="right">
|
||||
<div ref="right" data-place="right">
|
||||
<template v-for="widget in rightWidgets">
|
||||
<div class="customize-container" v-if="customize" :key="widget.id" @contextmenu="onWidgetContextmenu.stop.prevent(widget.id)">
|
||||
<component :is="widget.name" :widget="widget" :ref="widget.id"></component>
|
||||
<div class="customize-container" v-if="customize" :key="widget.id" @contextmenu.stop.prevent="onWidgetContextmenu(widget.id)">
|
||||
<component :is="widget.name" :widget="widget" :ref="widget.id"/>
|
||||
</div>
|
||||
<template v-else>
|
||||
<component :is="widget.name" :key="widget.id" :widget="widget" :ref="widget.id"></component>
|
||||
<component :is="widget.name" :key="widget.id" :widget="widget" :ref="widget.id"/>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -80,10 +80,11 @@
|
|||
</template>
|
||||
|
||||
<script lang="typescript">
|
||||
import Vue from 'vue';
|
||||
import uuid from 'uuid';
|
||||
import Sortable from 'sortablejs';
|
||||
|
||||
export default {
|
||||
export default Vue.extend({
|
||||
props: {
|
||||
customize: Boolean,
|
||||
mode: {
|
||||
|
|
@ -94,12 +95,13 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
home: [],
|
||||
bakedHomeData: null
|
||||
bakedHomeData: null,
|
||||
widgetAdderSelected: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
bakeHomeData() {
|
||||
return JSON.stringify(this.I.client_settings.home);
|
||||
return JSON.stringify(this.$root.$data.os.i.client_settings.home);
|
||||
},
|
||||
onTlLoaded() {
|
||||
this.$emit('loaded');
|
||||
|
|
@ -111,94 +113,86 @@ export default {
|
|||
}
|
||||
},
|
||||
onWidgetContextmenu(widgetId) {
|
||||
this.$refs[widgetId].func();
|
||||
(this.$refs[widgetId] as any).func();
|
||||
},
|
||||
addWidget() {
|
||||
const widget = {
|
||||
name: this.$refs.widgetSelector.options[this.$refs.widgetSelector.selectedIndex].value,
|
||||
name: this.widgetAdderSelected,
|
||||
id: uuid(),
|
||||
place: 'left',
|
||||
data: {}
|
||||
};
|
||||
|
||||
this.I.client_settings.home.unshift(widget);
|
||||
this.$root.$data.os.i.client_settings.home.unshift(widget);
|
||||
|
||||
this.saveHome();
|
||||
},
|
||||
saveHome() {
|
||||
/*const data = [];
|
||||
const data = [];
|
||||
|
||||
Array.from(this.$refs.left.children).forEach(el => {
|
||||
Array.from((this.$refs.left as Element).children).forEach(el => {
|
||||
const id = el.getAttribute('data-widget-id');
|
||||
const widget = this.I.client_settings.home.find(w => w.id == id);
|
||||
const widget = this.$root.$data.os.i.client_settings.home.find(w => w.id == id);
|
||||
widget.place = 'left';
|
||||
data.push(widget);
|
||||
});
|
||||
|
||||
Array.from(this.$refs.right.children).forEach(el => {
|
||||
Array.from((this.$refs.right as Element).children).forEach(el => {
|
||||
const id = el.getAttribute('data-widget-id');
|
||||
const widget = this.I.client_settings.home.find(w => w.id == id);
|
||||
const widget = this.$root.$data.os.i.client_settings.home.find(w => w.id == id);
|
||||
widget.place = 'right';
|
||||
data.push(widget);
|
||||
});
|
||||
|
||||
Array.from(this.$refs.maintop.children).forEach(el => {
|
||||
Array.from((this.$refs.maintop as Element).children).forEach(el => {
|
||||
const id = el.getAttribute('data-widget-id');
|
||||
const widget = this.I.client_settings.home.find(w => w.id == id);
|
||||
const widget = this.$root.$data.os.i.client_settings.home.find(w => w.id == id);
|
||||
widget.place = 'main';
|
||||
data.push(widget);
|
||||
});
|
||||
|
||||
this.api('i/update_home', {
|
||||
this.$root.$data.os.api('i/update_home', {
|
||||
home: data
|
||||
}).then(() => {
|
||||
this.I.update();
|
||||
});*/
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
leftWidgets() {
|
||||
return this.I.client_settings.home.filter(w => w.place == 'left');
|
||||
leftWidgets(): any {
|
||||
return this.$root.$data.os.i.client_settings.home.filter(w => w.place == 'left');
|
||||
},
|
||||
centerWidgets() {
|
||||
return this.I.client_settings.home.filter(w => w.place == 'center');
|
||||
centerWidgets(): any {
|
||||
return this.$root.$data.os.i.client_settings.home.filter(w => w.place == 'center');
|
||||
},
|
||||
rightWidgets() {
|
||||
return this.I.client_settings.home.filter(w => w.place == 'right');
|
||||
rightWidgets(): any {
|
||||
return this.$root.$data.os.i.client_settings.home.filter(w => w.place == 'right');
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.bakedHomeData = this.bakeHomeData();
|
||||
},
|
||||
mounted() {
|
||||
this.I.on('refreshed', this.onMeRefreshed);
|
||||
this.$root.$data.os.i.on('refreshed', this.onMeRefreshed);
|
||||
|
||||
this.I.client_settings.home.forEach(widget => {
|
||||
try {
|
||||
this.setWidget(widget);
|
||||
} catch (e) {
|
||||
// noop
|
||||
}
|
||||
});
|
||||
this.home = this.$root.$data.os.i.client_settings.home;
|
||||
|
||||
if (!this.opts.customize) {
|
||||
if (this.$refs.left.children.length == 0) {
|
||||
this.$refs.left.parentNode.removeChild(this.$refs.left);
|
||||
if (!this.customize) {
|
||||
if ((this.$refs.left as Element).children.length == 0) {
|
||||
(this.$refs.left as Element).parentNode.removeChild((this.$refs.left as Element));
|
||||
}
|
||||
if (this.$refs.right.children.length == 0) {
|
||||
this.$refs.right.parentNode.removeChild(this.$refs.right);
|
||||
if ((this.$refs.right as Element).children.length == 0) {
|
||||
(this.$refs.right as Element).parentNode.removeChild((this.$refs.right as Element));
|
||||
}
|
||||
}
|
||||
|
||||
if (this.opts.customize) {
|
||||
dialog('%fa:info-circle%カスタマイズのヒント',
|
||||
if (this.customize) {
|
||||
/*dialog('%fa:info-circle%カスタマイズのヒント',
|
||||
'<p>ホームのカスタマイズでは、ウィジェットを追加/削除したり、ドラッグ&ドロップして並べ替えたりすることができます。</p>' +
|
||||
'<p>一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。</p>' +
|
||||
'<p>ウィジェットを削除するには、ヘッダーの<strong>「ゴミ箱」</strong>と書かれたエリアにウィジェットをドラッグ&ドロップします。</p>' +
|
||||
'<p>カスタマイズを終了するには、右上の「完了」をクリックします。</p>',
|
||||
[{
|
||||
text: 'Got it!'
|
||||
}]);
|
||||
}]);*/
|
||||
|
||||
const sortableOption = {
|
||||
group: 'kyoppie',
|
||||
|
|
@ -220,24 +214,24 @@ export default {
|
|||
const el = evt.item;
|
||||
const id = el.getAttribute('data-widget-id');
|
||||
el.parentNode.removeChild(el);
|
||||
this.I.client_settings.home = this.I.client_settings.home.filter(w => w.id != id);
|
||||
this.$root.$data.os.i.client_settings.home = this.$root.$data.os.i.client_settings.home.filter(w => w.id != id);
|
||||
this.saveHome();
|
||||
}
|
||||
}));
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.I.off('refreshed', this.onMeRefreshed);
|
||||
this.$root.$data.os.i.off('refreshed', this.onMeRefreshed);
|
||||
|
||||
this.home.forEach(widget => {
|
||||
widget.unmount();
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
:scope
|
||||
.mk-home
|
||||
display block
|
||||
|
||||
&[data-customize]
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
import Vue from 'vue';
|
||||
|
||||
import ui from './ui.vue';
|
||||
import home from './home.vue';
|
||||
|
||||
Vue.component('mk-ui', ui);
|
||||
Vue.component('mk-home', home);
|
||||
|
|
|
|||
Loading…
Reference in New Issue