From e68f5e38340c67f3d9063df2dfcf9e83bcf49a4a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 11 Feb 2018 13:02:35 +0900
Subject: [PATCH] wip

---
 .../desktop/views/{ => components}/home.vue   | 334 +++++++++---------
 src/web/app/desktop/views/components/index.ts |   2 +
 2 files changed, 166 insertions(+), 170 deletions(-)
 rename src/web/app/desktop/views/{ => components}/home.vue (57%)

diff --git a/src/web/app/desktop/views/home.vue b/src/web/app/desktop/views/components/home.vue
similarity index 57%
rename from src/web/app/desktop/views/home.vue
rename to src/web/app/desktop/views/components/home.vue
index d054127da..987f272a0 100644
--- a/src/web/app/desktop/views/home.vue
+++ b/src/web/app/desktop/views/components/home.vue
@@ -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,151 +214,151 @@ 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
-		display block
+.mk-home
+	display block
 
-		&[data-customize]
-			padding-top 48px
-			background-image url('/assets/desktop/grid.svg')
+	&[data-customize]
+		padding-top 48px
+		background-image url('/assets/desktop/grid.svg')
 
-			> .main > main > *:not(.maintop)
-				cursor not-allowed
+		> .main > main > *:not(.maintop)
+			cursor not-allowed
+
+			> *
+				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
+
+			&:hover
+				background lighten($theme-color, 10%)
+
+			&:active
+				background darken($theme-color, 10%)
+				transition background 0s ease
+
+			> [data-fa]
+				margin-right 8px
+
+		> div
+			display flex
+			margin 0 auto
+			max-width 1200px - 32px
+
+			> 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
+						pointer-events none
+
+	> .main
+		display flex
+		justify-content center
+		margin 0 auto
+		max-width 1200px
+
+		> *
+			.customize-container
+				cursor move
 
 				> *
 					pointer-events none
 
-		&:not([data-customize])
-			> .main > *:empty
-				display none
+		> main
+			padding 16px
+			width calc(100% - 275px * 2)
 
-		> .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)
+			> *:not(.maintop):not(:last-child)
+			> .maintop > *:not(:last-child)
+				margin-bottom 16px
 
-			> 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
+			> .maintop
+				min-height 64px
+				margin-bottom 16px
 
-				&:hover
-					background lighten($theme-color, 10%)
-
-				&:active
-					background darken($theme-color, 10%)
-					transition background 0s ease
-
-				> [data-fa]
-					margin-right 8px
-
-			> div
-				display flex
-				margin 0 auto
-				max-width 1200px - 32px
-
-				> 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
-							pointer-events none
-
-		> .main
-			display flex
-			justify-content center
-			margin 0 auto
-			max-width 1200px
+		> *:not(main)
+			width 275px
 
 			> *
-				.customize-container
-					cursor move
+				padding 16px 0 16px 0
 
-					> *
-						pointer-events none
+				> *:not(:last-child)
+					margin-bottom 16px
+
+		> .left
+			padding-left 16px
+
+		> .right
+			padding-right 16px
+
+		@media (max-width 1100px)
+			> *:not(main)
+				display none
 
 			> main
-				padding 16px
-				width calc(100% - 275px * 2)
-
-				> *:not(.maintop):not(:last-child)
-				> .maintop > *:not(:last-child)
-					margin-bottom 16px
-
-				> .maintop
-					min-height 64px
-					margin-bottom 16px
-
-			> *:not(main)
-				width 275px
-
-				> *
-					padding 16px 0 16px 0
-
-					> *:not(:last-child)
-						margin-bottom 16px
-
-			> .left
-				padding-left 16px
-
-			> .right
-				padding-right 16px
-
-			@media (max-width 1100px)
-				> *:not(main)
-					display none
-
-				> main
-					float none
-					width 100%
-					max-width 700px
-					margin 0 auto
+				float none
+				width 100%
+				max-width 700px
+				margin 0 auto
 
 </style>
diff --git a/src/web/app/desktop/views/components/index.ts b/src/web/app/desktop/views/components/index.ts
index f628dee88..8c490ef6d 100644
--- a/src/web/app/desktop/views/components/index.ts
+++ b/src/web/app/desktop/views/components/index.ts
@@ -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);