From 92a1429de9763a39541b065ddd86c8720f20500c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 9 Feb 2018 13:11:30 +0900
Subject: [PATCH] wip

---
 src/web/app/auth/tags/form.tag                |   4 +-
 src/web/app/common/tags/messaging/index.tag   |   4 +-
 src/web/app/common/tags/signin.tag            |   2 +-
 src/web/app/common/tags/uploader.tag          |   6 +-
 src/web/app/desktop/tags/contextmenu.tag      |   2 +-
 src/web/app/desktop/tags/crop-window.tag      |   6 +-
 .../desktop/tags/drive/base-contextmenu.tag   |   2 +-
 src/web/app/desktop/tags/drive/browser.tag    |  10 +-
 .../desktop/tags/drive/file-contextmenu.tag   |   2 +-
 .../desktop/tags/drive/folder-contextmenu.tag |   2 +-
 .../desktop/tags/home-widgets/mentions.tag    |   2 +-
 .../desktop/tags/home-widgets/timeline.tag    |   2 +-
 src/web/app/desktop/tags/home.vue             | 488 +++++++++---------
 src/web/app/desktop/tags/post-form.tag        |  12 +-
 src/web/app/desktop/tags/repost-form.tag      |   6 +-
 src/web/app/desktop/tags/search-posts.tag     |   2 +-
 src/web/app/desktop/tags/search.tag           |   2 +-
 .../tags/select-file-from-drive-window.tag    |   2 +-
 .../tags/select-folder-from-drive-window.tag  |   2 +-
 src/web/app/desktop/tags/user-timeline.tag    |   2 +-
 src/web/app/desktop/tags/user.tag             |   6 +-
 src/web/app/desktop/tags/users-list.tag       |   2 +-
 src/web/app/desktop/tags/widgets/activity.tag |   2 +-
 src/web/app/desktop/tags/window.tag           |   8 +-
 .../app/mobile/tags/drive-folder-selector.tag |   4 +-
 src/web/app/mobile/tags/drive-selector.tag    |   6 +-
 src/web/app/mobile/tags/drive.tag             |  16 +-
 src/web/app/mobile/tags/home-timeline.tag     |   2 +-
 src/web/app/mobile/tags/home.tag              |   2 +-
 src/web/app/mobile/tags/notifications.tag     |   2 +-
 src/web/app/mobile/tags/post-form.tag         |  12 +-
 src/web/app/mobile/tags/search-posts.tag      |   2 +-
 src/web/app/mobile/tags/search.tag            |   2 +-
 src/web/app/mobile/tags/user-followers.tag    |   2 +-
 src/web/app/mobile/tags/user-following.tag    |   2 +-
 src/web/app/mobile/tags/user-timeline.tag     |   2 +-
 src/web/app/mobile/tags/user.tag              |   2 +-
 src/web/app/mobile/tags/users-list.tag        |   2 +-
 38 files changed, 308 insertions(+), 328 deletions(-)

diff --git a/src/web/app/auth/tags/form.tag b/src/web/app/auth/tags/form.tag
index f20165977..043b6313b 100644
--- a/src/web/app/auth/tags/form.tag
+++ b/src/web/app/auth/tags/form.tag
@@ -115,7 +115,7 @@
 			this.api('auth/deny', {
 				token: this.session.token
 			}).then(() => {
-				this.trigger('denied');
+				this.$emit('denied');
 			});
 		};
 
@@ -123,7 +123,7 @@
 			this.api('auth/accept', {
 				token: this.session.token
 			}).then(() => {
-				this.trigger('accepted');
+				this.$emit('accepted');
 			});
 		};
 	</script>
diff --git a/src/web/app/common/tags/messaging/index.tag b/src/web/app/common/tags/messaging/index.tag
index f7af153c2..0432f7e30 100644
--- a/src/web/app/common/tags/messaging/index.tag
+++ b/src/web/app/common/tags/messaging/index.tag
@@ -344,7 +344,7 @@
 		this.registerMessage = message => {
 			message.is_me = message.user_id == this.I.id;
 			message._click = () => {
-				this.trigger('navigate-user', message.is_me ? message.recipient : message.user);
+				this.$emit('navigate-user', message.is_me ? message.recipient : message.user);
 			};
 		};
 
@@ -400,7 +400,7 @@
 			}).then(users => {
 				users.forEach(user => {
 					user._click = () => {
-						this.trigger('navigate-user', user);
+						this.$emit('navigate-user', user);
 						this.searchResult = [];
 					};
 				});
diff --git a/src/web/app/common/tags/signin.tag b/src/web/app/common/tags/signin.tag
index 76a55c7e0..89213d1f7 100644
--- a/src/web/app/common/tags/signin.tag
+++ b/src/web/app/common/tags/signin.tag
@@ -111,7 +111,7 @@
 				username: this.$refs.username.value
 			}).then(user => {
 				this.user = user;
-				this.trigger('user', user);
+				this.$emit('user', user);
 				this.update();
 			});
 		};
diff --git a/src/web/app/common/tags/uploader.tag b/src/web/app/common/tags/uploader.tag
index 1dbfff96f..519b063fa 100644
--- a/src/web/app/common/tags/uploader.tag
+++ b/src/web/app/common/tags/uploader.tag
@@ -155,7 +155,7 @@
 			};
 
 			this.uploads.push(ctx);
-			this.trigger('change-uploads', this.uploads);
+			this.$emit('change-uploads', this.uploads);
 			this.update();
 
 			const reader = new FileReader();
@@ -176,10 +176,10 @@
 			xhr.onload = e => {
 				const driveFile = JSON.parse(e.target.response);
 
-				this.trigger('uploaded', driveFile);
+				this.$emit('uploaded', driveFile);
 
 				this.uploads = this.uploads.filter(x => x.id != id);
-				this.trigger('change-uploads', this.uploads);
+				this.$emit('change-uploads', this.uploads);
 
 				this.update();
 			};
diff --git a/src/web/app/desktop/tags/contextmenu.tag b/src/web/app/desktop/tags/contextmenu.tag
index 67bdc5824..ee4c48fbd 100644
--- a/src/web/app/desktop/tags/contextmenu.tag
+++ b/src/web/app/desktop/tags/contextmenu.tag
@@ -131,7 +131,7 @@
 				el.removeEventListener('mousedown', this.mousedown);
 			});
 
-			this.trigger('closed');
+			this.$emit('closed');
 			this.$destroy();
 		};
 	</script>
diff --git a/src/web/app/desktop/tags/crop-window.tag b/src/web/app/desktop/tags/crop-window.tag
index 1749986b2..c26f74b12 100644
--- a/src/web/app/desktop/tags/crop-window.tag
+++ b/src/web/app/desktop/tags/crop-window.tag
@@ -178,18 +178,18 @@
 
 		this.ok = () => {
 			this.cropper.getCroppedCanvas().toBlob(blob => {
-				this.trigger('cropped', blob);
+				this.$emit('cropped', blob);
 				this.$refs.window.close();
 			});
 		};
 
 		this.skip = () => {
-			this.trigger('skipped');
+			this.$emit('skipped');
 			this.$refs.window.close();
 		};
 
 		this.cancel = () => {
-			this.trigger('canceled');
+			this.$emit('canceled');
 			this.$refs.window.close();
 		};
 	</script>
diff --git a/src/web/app/desktop/tags/drive/base-contextmenu.tag b/src/web/app/desktop/tags/drive/base-contextmenu.tag
index f81526bef..c93d63026 100644
--- a/src/web/app/desktop/tags/drive/base-contextmenu.tag
+++ b/src/web/app/desktop/tags/drive/base-contextmenu.tag
@@ -17,7 +17,7 @@
 
 		this.on('mount', () => {
 			this.$refs.ctx.on('closed', () => {
-				this.trigger('closed');
+				this.$emit('closed');
 				this.$destroy();
 			});
 		});
diff --git a/src/web/app/desktop/tags/drive/browser.tag b/src/web/app/desktop/tags/drive/browser.tag
index 02d79afd8..7aaedab82 100644
--- a/src/web/app/desktop/tags/drive/browser.tag
+++ b/src/web/app/desktop/tags/drive/browser.tag
@@ -535,13 +535,13 @@
 					this.selectedFiles.push(file);
 				}
 				this.update();
-				this.trigger('change-selection', this.selectedFiles);
+				this.$emit('change-selection', this.selectedFiles);
 			} else {
 				if (isAlreadySelected) {
-					this.trigger('selected', file);
+					this.$emit('selected', file);
 				} else {
 					this.selectedFiles = [file];
-					this.trigger('change-selection', [file]);
+					this.$emit('change-selection', [file]);
 				}
 			}
 		};
@@ -578,7 +578,7 @@
 				if (folder.parent) dive(folder.parent);
 
 				this.update();
-				this.trigger('open-folder', folder);
+				this.$emit('open-folder', folder);
 				this.fetch();
 			});
 		};
@@ -648,7 +648,7 @@
 				folder: null,
 				hierarchyFolders: []
 			});
-			this.trigger('move-root');
+			this.$emit('move-root');
 			this.fetch();
 		};
 
diff --git a/src/web/app/desktop/tags/drive/file-contextmenu.tag b/src/web/app/desktop/tags/drive/file-contextmenu.tag
index c7eeb01cd..125f70b61 100644
--- a/src/web/app/desktop/tags/drive/file-contextmenu.tag
+++ b/src/web/app/desktop/tags/drive/file-contextmenu.tag
@@ -49,7 +49,7 @@
 
 		this.on('mount', () => {
 			this.$refs.ctx.on('closed', () => {
-				this.trigger('closed');
+				this.$emit('closed');
 				this.$destroy();
 			});
 		});
diff --git a/src/web/app/desktop/tags/drive/folder-contextmenu.tag b/src/web/app/desktop/tags/drive/folder-contextmenu.tag
index d4c2f9380..0cb7f6eb8 100644
--- a/src/web/app/desktop/tags/drive/folder-contextmenu.tag
+++ b/src/web/app/desktop/tags/drive/folder-contextmenu.tag
@@ -29,7 +29,7 @@
 			this.$refs.ctx.open(pos);
 
 			this.$refs.ctx.on('closed', () => {
-				this.trigger('closed');
+				this.$emit('closed');
 				this.$destroy();
 			});
 		};
diff --git a/src/web/app/desktop/tags/home-widgets/mentions.tag b/src/web/app/desktop/tags/home-widgets/mentions.tag
index e0592aa04..81f9b2875 100644
--- a/src/web/app/desktop/tags/home-widgets/mentions.tag
+++ b/src/web/app/desktop/tags/home-widgets/mentions.tag
@@ -65,7 +65,7 @@
 			document.addEventListener('keydown', this.onDocumentKeydown);
 			window.addEventListener('scroll', this.onScroll);
 
-			this.fetch(() => this.trigger('loaded'));
+			this.fetch(() => this.$emit('loaded'));
 		});
 
 		this.on('unmount', () => {
diff --git a/src/web/app/desktop/tags/home-widgets/timeline.tag b/src/web/app/desktop/tags/home-widgets/timeline.tag
index ac2d95d5a..4668ebfa8 100644
--- a/src/web/app/desktop/tags/home-widgets/timeline.tag
+++ b/src/web/app/desktop/tags/home-widgets/timeline.tag
@@ -59,7 +59,7 @@
 			document.addEventListener('keydown', this.onDocumentKeydown);
 			window.addEventListener('scroll', this.onScroll);
 
-			this.load(() => this.trigger('loaded'));
+			this.load(() => this.$emit('loaded'));
 		});
 
 		this.on('unmount', () => {
diff --git a/src/web/app/desktop/tags/home.vue b/src/web/app/desktop/tags/home.vue
index ee12200ba..981123c56 100644
--- a/src/web/app/desktop/tags/home.vue
+++ b/src/web/app/desktop/tags/home.vue
@@ -1,57 +1,243 @@
 <template>
-	<div :data-customize="customize">
-		<div class="customize" v-if="customize">
-			<a href="/">%fa:check%完了</a>
-			<div>
-				<div class="adder">
-					<p>ウィジェットを追加:</p>
-					<select ref="widgetSelector">
-						<option value="profile">プロフィール</option>
-						<option value="calendar">カレンダー</option>
-						<option value="timemachine">カレンダー(タイムマシン)</option>
-						<option value="activity">アクティビティ</option>
-						<option value="rss-reader">RSSリーダー</option>
-						<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>
-						<option value="user-recommendation">おすすめユーザー</option>
-						<option value="recommended-polls">投票</option>
-						<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 :data-customize="customize">
+	<div class="customize" v-if="customize">
+		<a href="/">%fa:check%完了</a>
+		<div>
+			<div class="adder">
+				<p>ウィジェットを追加:</p>
+				<select ref="widgetSelector">
+					<option value="profile">プロフィール</option>
+					<option value="calendar">カレンダー</option>
+					<option value="timemachine">カレンダー(タイムマシン)</option>
+					<option value="activity">アクティビティ</option>
+					<option value="rss-reader">RSSリーダー</option>
+					<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>
+					<option value="user-recommendation">おすすめユーザー</option>
+					<option value="recommended-polls">投票</option>
+					<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 class="main">
-			<div class="left">
-				<div ref="left" data-place="left"></div>
-			</div>
-			<main ref="main">
-				<div class="maintop" ref="maintop" data-place="main" v-if="customize"></div>
-				<mk-timeline-home-widget ref="tl" v-if="mode == 'timeline'"/>
-				<mk-mentions-home-widget ref="tl" v-if="mode == 'mentions'"/>
-			</main>
-			<div class="right">
-				<div ref="right" data-place="right"></div>
-			</div>
-		</div>	
 	</div>
+	<div class="main">
+		<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>
+					<template v-else>
+						<component :is="widget.name" :key="widget.id" :widget="widget" :ref="widget.id"></component>
+					</template>
+				</template>
+			</div>
+		</div>
+		<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>
+					<template v-else>
+						<component :is="widget.name" :key="widget.id" :widget="widget" :ref="widget.id"></component>
+					</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'"/>
+		</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>
+					<template v-else>
+						<component :is="widget.name" :key="widget.id" :widget="widget" :ref="widget.id"></component>
+					</template>
+				</template>
+			</div>
+		</div>
+	</div>
+</div>
 </template>
 
+<script lang="typescript">
+import uuid from 'uuid';
+import Sortable from 'sortablejs';
+import I from '../../common/i';
+import { resolveSrv } from 'dns';
+
+export default {
+	props: {
+		customize: Boolean,
+		mode: {
+			type: String,
+			default: 'timeline'
+		}
+	},
+	data() {
+		return {
+			home: [],
+			bakedHomeData: null
+		};
+	},
+	methods: {
+		bakeHomeData() {
+			return JSON.stringify(this.I.client_settings.home);
+		},
+		onTlLoaded() {
+			this.$emit('loaded');
+		},
+		onMeRefreshed() {
+			if (this.bakedHomeData != this.bakeHomeData()) {
+				// TODO: i18n
+				alert('別の場所でホームが編集されました。ページを再度読み込みすると編集が反映されます。');
+			}
+		},
+		onWidgetContextmenu(widgetId) {
+			this.$refs[widgetId].func();
+		},
+		addWidget() {
+			const widget = {
+				name: this.$refs.widgetSelector.options[this.$refs.widgetSelector.selectedIndex].value,
+				id: uuid(),
+				place: 'left',
+				data: {}
+			};
+
+			this.I.client_settings.home.unshift(widget);
+
+			this.saveHome();
+		},
+		saveHome() {
+			/*const data = [];
+
+			Array.from(this.$refs.left.children).forEach(el => {
+				const id = el.getAttribute('data-widget-id');
+				const widget = this.I.client_settings.home.find(w => w.id == id);
+				widget.place = 'left';
+				data.push(widget);
+			});
+
+			Array.from(this.$refs.right.children).forEach(el => {
+				const id = el.getAttribute('data-widget-id');
+				const widget = this.I.client_settings.home.find(w => w.id == id);
+				widget.place = 'right';
+				data.push(widget);
+			});
+
+			Array.from(this.$refs.maintop.children).forEach(el => {
+				const id = el.getAttribute('data-widget-id');
+				const widget = this.I.client_settings.home.find(w => w.id == id);
+				widget.place = 'main';
+				data.push(widget);
+			});
+
+			this.api('i/update_home', {
+				home: data
+			}).then(() => {
+				this.I.update();
+			});*/
+		}
+	},
+	computed: {
+		leftWidgets() {
+			return this.I.client_settings.home.filter(w => w.place == 'left');
+		},
+		centerWidgets() {
+			return this.I.client_settings.home.filter(w => w.place == 'center');
+		},
+		rightWidgets() {
+			return this.I.client_settings.home.filter(w => w.place == 'right');
+		}
+	},
+	created() {
+		this.bakedHomeData = this.bakeHomeData();
+	},
+	mounted() {
+		this.I.on('refreshed', this.onMeRefreshed);
+
+		this.I.client_settings.home.forEach(widget => {
+			try {
+				this.setWidget(widget);
+			} catch (e) {
+				// noop
+			}
+		});
+
+		if (!this.opts.customize) {
+			if (this.$refs.left.children.length == 0) {
+				this.$refs.left.parentNode.removeChild(this.$refs.left);
+			}
+			if (this.$refs.right.children.length == 0) {
+				this.$refs.right.parentNode.removeChild(this.$refs.right);
+			}
+		}
+
+		if (this.opts.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',
+				animation: 150,
+				onMove: evt => {
+					const id = evt.dragged.getAttribute('data-widget-id');
+					this.home.find(tag => tag.id == id).update({ place: evt.to.getAttribute('data-place') });
+				},
+				onSort: () => {
+					this.saveHome();
+				}
+			};
+
+			new Sortable(this.$refs.left, sortableOption);
+			new Sortable(this.$refs.right, sortableOption);
+			new Sortable(this.$refs.maintop, 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);
+					this.I.client_settings.home = this.I.client_settings.home.filter(w => w.id != id);
+					this.saveHome();
+				}
+			}));
+		}
+	},
+	beforeDestroy() {
+		this.I.off('refreshed', this.onMeRefreshed);
+
+		this.home.forEach(widget => {
+			widget.unmount();
+		});
+	}
+};
+</script>
+
 <style lang="stylus" scoped>
 	:scope
 		display block
@@ -184,209 +370,3 @@
 					margin 0 auto
 
 </style>
-
-<script lang="typescript">
-	import uuid from 'uuid';
-	import Sortable from 'sortablejs';
-	import dialog from '../scripts/dialog';
-	import ScrollFollower from '../scripts/scroll-follower';
-
-	this.mixin('i');
-	this.mixin('api');
-
-	this.mode = this.opts.mode || 'timeline';
-
-	this.home = [];
-
-	this.bakeHomeData = () => JSON.stringify(this.I.client_settings.home);
-	this.bakedHomeData = this.bakeHomeData();
-
-	this.on('mount', () => {
-		this.$refs.tl.on('loaded', () => {
-			this.trigger('loaded');
-		});
-
-		this.I.on('refreshed', this.onMeRefreshed);
-
-		this.I.client_settings.home.forEach(widget => {
-			try {
-				this.setWidget(widget);
-			} catch (e) {
-				// noop
-			}
-		});
-
-		if (!this.opts.customize) {
-			if (this.$refs.left.children.length == 0) {
-				this.$refs.left.parentNode.removeChild(this.$refs.left);
-			}
-			if (this.$refs.right.children.length == 0) {
-				this.$refs.right.parentNode.removeChild(this.$refs.right);
-			}
-		}
-
-		if (this.opts.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',
-				animation: 150,
-				onMove: evt => {
-					const id = evt.dragged.getAttribute('data-widget-id');
-					this.home.find(tag => tag.id == id).update({ place: evt.to.getAttribute('data-place') });
-				},
-				onSort: () => {
-					this.saveHome();
-				}
-			};
-
-			new Sortable(this.$refs.left, sortableOption);
-			new Sortable(this.$refs.right, sortableOption);
-			new Sortable(this.$refs.maintop, 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);
-					this.I.client_settings.home = this.I.client_settings.home.filter(w => w.id != id);
-					this.saveHome();
-				}
-			}));
-		}
-
-		if (!this.opts.customize) {
-			this.scrollFollowerLeft = this.$refs.left.parentNode ? new ScrollFollower(this.$refs.left, this.root.getBoundingClientRect().top) : null;
-			this.scrollFollowerRight = this.$refs.right.parentNode ? new ScrollFollower(this.$refs.right, this.root.getBoundingClientRect().top) : null;
-		}
-	});
-
-	this.on('unmount', () => {
-		this.I.off('refreshed', this.onMeRefreshed);
-
-		this.home.forEach(widget => {
-			widget.unmount();
-		});
-
-		if (!this.opts.customize) {
-			if (this.scrollFollowerLeft) this.scrollFollowerLeft.dispose();
-			if (this.scrollFollowerRight) this.scrollFollowerRight.dispose();
-		}
-	});
-
-	this.onMeRefreshed = () => {
-		if (this.bakedHomeData != this.bakeHomeData()) {
-			alert('別の場所でホームが編集されました。ページを再度読み込みすると編集が反映されます。');
-		}
-	};
-
-	this.setWidget = (widget, prepend = false) => {
-		const el = document.createElement(`mk-${widget.name}-home-widget`);
-
-		let actualEl;
-
-		if (this.opts.customize) {
-			const container = document.createElement('div');
-			container.classList.add('customize-container');
-			container.setAttribute('data-widget-id', widget.id);
-			container.appendChild(el);
-			actualEl = container;
-		} else {
-			actualEl = el;
-		}
-
-		switch (widget.place) {
-			case 'left':
-				if (prepend) {
-					this.$refs.left.insertBefore(actualEl, this.$refs.left.firstChild);
-				} else {
-					this.$refs.left.appendChild(actualEl);
-				}
-				break;
-			case 'right':
-				if (prepend) {
-					this.$refs.right.insertBefore(actualEl, this.$refs.right.firstChild);
-				} else {
-					this.$refs.right.appendChild(actualEl);
-				}
-				break;
-			case 'main':
-				if (this.opts.customize) {
-					this.$refs.maintop.appendChild(actualEl);
-				} else {
-					this.$refs.main.insertBefore(actualEl, this.$refs.tl.root);
-				}
-				break;
-		}
-
-		const tag = riot.mount(el, {
-			id: widget.id,
-			data: widget.data,
-			place: widget.place,
-			tl: this.$refs.tl
-		})[0];
-
-		this.home.push(tag);
-
-		if (this.opts.customize) {
-			actualEl.oncontextmenu = e => {
-				e.preventDefault();
-				e.stopImmediatePropagation();
-				if (tag.func) tag.func();
-				return false;
-			};
-		}
-	};
-
-	this.addWidget = () => {
-		const widget = {
-			name: this.$refs.widgetSelector.options[this.$refs.widgetSelector.selectedIndex].value,
-			id: uuid(),
-			place: 'left',
-			data: {}
-		};
-
-		this.I.client_settings.home.unshift(widget);
-
-		this.setWidget(widget, true);
-
-		this.saveHome();
-	};
-
-	this.saveHome = () => {
-		const data = [];
-
-		Array.from(this.$refs.left.children).forEach(el => {
-			const id = el.getAttribute('data-widget-id');
-			const widget = this.I.client_settings.home.find(w => w.id == id);
-			widget.place = 'left';
-			data.push(widget);
-		});
-
-		Array.from(this.$refs.right.children).forEach(el => {
-			const id = el.getAttribute('data-widget-id');
-			const widget = this.I.client_settings.home.find(w => w.id == id);
-			widget.place = 'right';
-			data.push(widget);
-		});
-
-		Array.from(this.$refs.maintop.children).forEach(el => {
-			const id = el.getAttribute('data-widget-id');
-			const widget = this.I.client_settings.home.find(w => w.id == id);
-			widget.place = 'main';
-			data.push(widget);
-		});
-
-		this.api('i/update_home', {
-			home: data
-		}).then(() => {
-			this.I.update();
-		});
-	};
-</script>
diff --git a/src/web/app/desktop/tags/post-form.tag b/src/web/app/desktop/tags/post-form.tag
index 358deb82f..ddbb485d9 100644
--- a/src/web/app/desktop/tags/post-form.tag
+++ b/src/web/app/desktop/tags/post-form.tag
@@ -324,7 +324,7 @@
 			});
 
 			this.$refs.uploader.on('change-uploads', uploads => {
-				this.trigger('change-uploading-files', uploads);
+				this.$emit('change-uploading-files', uploads);
 			});
 
 			this.autocomplete = new Autocomplete(this.$refs.text);
@@ -340,7 +340,7 @@
 					this.update();
 					this.$refs.poll.set(draft.data.poll);
 				}
-				this.trigger('change-files', this.files);
+				this.$emit('change-files', this.files);
 				this.update();
 			}
 
@@ -361,7 +361,7 @@
 			this.$refs.text.value = '';
 			this.files = [];
 			this.poll = false;
-			this.trigger('change-files');
+			this.$emit('change-files');
 			this.update();
 		};
 
@@ -444,14 +444,14 @@
 
 		this.addFile = file => {
 			this.files.push(file);
-			this.trigger('change-files', this.files);
+			this.$emit('change-files', this.files);
 			this.update();
 		};
 
 		this.removeFile = e => {
 			const file = e.item;
 			this.files = this.files.filter(x => x.id != file.id);
-			this.trigger('change-files', this.files);
+			this.$emit('change-files', this.files);
 			this.update();
 		};
 
@@ -487,7 +487,7 @@
 			}).then(data => {
 				this.clear();
 				this.removeDraft();
-				this.trigger('post');
+				this.$emit('post');
 				notify(this.repost
 					? '%i18n:desktop.tags.mk-post-form.reposted%'
 					: this.inReplyToPost
diff --git a/src/web/app/desktop/tags/repost-form.tag b/src/web/app/desktop/tags/repost-form.tag
index a3d350fa2..afe555b6d 100644
--- a/src/web/app/desktop/tags/repost-form.tag
+++ b/src/web/app/desktop/tags/repost-form.tag
@@ -93,7 +93,7 @@
 		this.quote = false;
 
 		this.cancel = () => {
-			this.trigger('cancel');
+			this.$emit('cancel');
 		};
 
 		this.ok = () => {
@@ -101,7 +101,7 @@
 			this.api('posts/create', {
 				repost_id: this.opts.post.id
 			}).then(data => {
-				this.trigger('posted');
+				this.$emit('posted');
 				notify('%i18n:desktop.tags.mk-repost-form.success%');
 			}).catch(err => {
 				notify('%i18n:desktop.tags.mk-repost-form.failure%');
@@ -118,7 +118,7 @@
 			});
 
 			this.$refs.form.on('post', () => {
-				this.trigger('posted');
+				this.$emit('posted');
 			});
 
 			this.$refs.form.focus();
diff --git a/src/web/app/desktop/tags/search-posts.tag b/src/web/app/desktop/tags/search-posts.tag
index 91bea2e90..52c68b754 100644
--- a/src/web/app/desktop/tags/search-posts.tag
+++ b/src/web/app/desktop/tags/search-posts.tag
@@ -54,7 +54,7 @@
 					isEmpty: posts.length == 0
 				});
 				this.$refs.timeline.setPosts(posts);
-				this.trigger('loaded');
+				this.$emit('loaded');
 			});
 		});
 
diff --git a/src/web/app/desktop/tags/search.tag b/src/web/app/desktop/tags/search.tag
index ec6bbfc34..28127b721 100644
--- a/src/web/app/desktop/tags/search.tag
+++ b/src/web/app/desktop/tags/search.tag
@@ -27,7 +27,7 @@
 
 		this.on('mount', () => {
 			this.$refs.posts.on('loaded', () => {
-				this.trigger('loaded');
+				this.$emit('loaded');
 			});
 		});
 	</script>
diff --git a/src/web/app/desktop/tags/select-file-from-drive-window.tag b/src/web/app/desktop/tags/select-file-from-drive-window.tag
index 10dc7db9f..d6234d5fd 100644
--- a/src/web/app/desktop/tags/select-file-from-drive-window.tag
+++ b/src/web/app/desktop/tags/select-file-from-drive-window.tag
@@ -166,7 +166,7 @@
 		};
 
 		this.ok = () => {
-			this.trigger('selected', this.multiple ? this.files : this.files[0]);
+			this.$emit('selected', this.multiple ? this.files : this.files[0]);
 			this.$refs.window.close();
 		};
 	</script>
diff --git a/src/web/app/desktop/tags/select-folder-from-drive-window.tag b/src/web/app/desktop/tags/select-folder-from-drive-window.tag
index 1cd7527c8..2f98f30a6 100644
--- a/src/web/app/desktop/tags/select-folder-from-drive-window.tag
+++ b/src/web/app/desktop/tags/select-folder-from-drive-window.tag
@@ -105,7 +105,7 @@
 		};
 
 		this.ok = () => {
-			this.trigger('selected', this.$refs.window.refs.browser.folder);
+			this.$emit('selected', this.$refs.window.refs.browser.folder);
 			this.$refs.window.close();
 		};
 	</script>
diff --git a/src/web/app/desktop/tags/user-timeline.tag b/src/web/app/desktop/tags/user-timeline.tag
index 2e3bbbfd6..f018ba64e 100644
--- a/src/web/app/desktop/tags/user-timeline.tag
+++ b/src/web/app/desktop/tags/user-timeline.tag
@@ -76,7 +76,7 @@
 					user: user
 				});
 
-				this.fetch(() => this.trigger('loaded'));
+				this.fetch(() => this.$emit('loaded'));
 			});
 		});
 
diff --git a/src/web/app/desktop/tags/user.tag b/src/web/app/desktop/tags/user.tag
index 161a15190..8221926f4 100644
--- a/src/web/app/desktop/tags/user.tag
+++ b/src/web/app/desktop/tags/user.tag
@@ -32,7 +32,7 @@
 					fetching: false,
 					user: user
 				});
-				this.trigger('loaded');
+				this.$emit('loaded');
 			});
 		});
 	</script>
@@ -716,7 +716,7 @@
 
 		this.on('mount', () => {
 			this.$refs.tl.on('loaded', () => {
-				this.trigger('loaded');
+				this.$emit('loaded');
 			});
 
 			this.scrollFollowerLeft = new ScrollFollower(this.$refs.left, this.parent.root.getBoundingClientRect().top);
@@ -778,7 +778,7 @@
 	</style>
 	<script lang="typescript">
 		this.on('mount', () => {
-			this.trigger('loaded');
+			this.$emit('loaded');
 		});
 	</script>
 </mk-user-graphs>
diff --git a/src/web/app/desktop/tags/users-list.tag b/src/web/app/desktop/tags/users-list.tag
index 90173bfd2..bf002ae55 100644
--- a/src/web/app/desktop/tags/users-list.tag
+++ b/src/web/app/desktop/tags/users-list.tag
@@ -98,7 +98,7 @@
 		this.moreFetching = false;
 
 		this.on('mount', () => {
-			this.fetch(() => this.trigger('loaded'));
+			this.fetch(() => this.$emit('loaded'));
 		});
 
 		this.fetch = cb => {
diff --git a/src/web/app/desktop/tags/widgets/activity.tag b/src/web/app/desktop/tags/widgets/activity.tag
index ffddfa7dc..8c20ef5a6 100644
--- a/src/web/app/desktop/tags/widgets/activity.tag
+++ b/src/web/app/desktop/tags/widgets/activity.tag
@@ -82,7 +82,7 @@
 			this.view++;
 			if (this.view == 2) this.view = 0;
 			this.update();
-			this.trigger('view-changed', this.view);
+			this.$emit('view-changed', this.view);
 		};
 	</script>
 </mk-activity-widget>
diff --git a/src/web/app/desktop/tags/window.tag b/src/web/app/desktop/tags/window.tag
index dc7a37fff..051b43f07 100644
--- a/src/web/app/desktop/tags/window.tag
+++ b/src/web/app/desktop/tags/window.tag
@@ -231,7 +231,7 @@
 		};
 
 		this.open = () => {
-			this.trigger('opening');
+			this.$emit('opening');
 
 			this.top();
 
@@ -257,7 +257,7 @@
 			//this.$refs.main.focus();
 
 			setTimeout(() => {
-				this.trigger('opened');
+				this.$emit('opened');
 			}, 300);
 		};
 
@@ -278,7 +278,7 @@
 		};
 
 		this.close = () => {
-			this.trigger('closing');
+			this.$emit('closing');
 
 			if (this.isModal) {
 				this.$refs.bg.style.pointerEvents = 'none';
@@ -301,7 +301,7 @@
 			});
 
 			setTimeout(() => {
-				this.trigger('closed');
+				this.$emit('closed');
 			}, 300);
 		};
 
diff --git a/src/web/app/mobile/tags/drive-folder-selector.tag b/src/web/app/mobile/tags/drive-folder-selector.tag
index a63d90af5..7dca527d6 100644
--- a/src/web/app/mobile/tags/drive-folder-selector.tag
+++ b/src/web/app/mobile/tags/drive-folder-selector.tag
@@ -57,12 +57,12 @@
 	</style>
 	<script lang="typescript">
 		this.cancel = () => {
-			this.trigger('canceled');
+			this.$emit('canceled');
 			this.$destroy();
 		};
 
 		this.ok = () => {
-			this.trigger('selected', this.$refs.browser.folder);
+			this.$emit('selected', this.$refs.browser.folder);
 			this.$destroy();
 		};
 	</script>
diff --git a/src/web/app/mobile/tags/drive-selector.tag b/src/web/app/mobile/tags/drive-selector.tag
index d3e4f54c2..4589592a7 100644
--- a/src/web/app/mobile/tags/drive-selector.tag
+++ b/src/web/app/mobile/tags/drive-selector.tag
@@ -70,18 +70,18 @@
 			});
 
 			this.$refs.browser.on('selected', file => {
-				this.trigger('selected', file);
+				this.$emit('selected', file);
 				this.$destroy();
 			});
 		});
 
 		this.cancel = () => {
-			this.trigger('canceled');
+			this.$emit('canceled');
 			this.$destroy();
 		};
 
 		this.ok = () => {
-			this.trigger('selected', this.files);
+			this.$emit('selected', this.files);
 			this.$destroy();
 		};
 	</script>
diff --git a/src/web/app/mobile/tags/drive.tag b/src/web/app/mobile/tags/drive.tag
index 50578299a..a7a8a35c3 100644
--- a/src/web/app/mobile/tags/drive.tag
+++ b/src/web/app/mobile/tags/drive.tag
@@ -274,7 +274,7 @@
 				if (folder.parent) dive(folder.parent);
 
 				this.update();
-				this.trigger('open-folder', this.folder, silent);
+				this.$emit('open-folder', this.folder, silent);
 				this.fetch();
 			});
 		};
@@ -343,7 +343,7 @@
 					folder: null,
 					hierarchyFolders: []
 				});
-				this.trigger('move-root');
+				this.$emit('move-root');
 				this.fetch();
 			}
 
@@ -359,7 +359,7 @@
 				fetching: true
 			});
 
-			this.trigger('begin-fetch');
+			this.$emit('begin-fetch');
 
 			let fetchedFolders = null;
 			let fetchedFiles = null;
@@ -402,11 +402,11 @@
 						fetching: false
 					});
 					// 一連の読み込みが完了したイベントを発行
-					this.trigger('fetched');
+					this.$emit('fetched');
 				} else {
 					flag = true;
 					// 一連の読み込みが半分完了したイベントを発行
-					this.trigger('fetch-mid');
+					this.$emit('fetch-mid');
 				}
 			};
 
@@ -455,9 +455,9 @@
 						this.selectedFiles.push(file);
 					}
 					this.update();
-					this.trigger('change-selection', this.selectedFiles);
+					this.$emit('change-selection', this.selectedFiles);
 				} else {
-					this.trigger('selected', file);
+					this.$emit('selected', file);
 				}
 			} else {
 				this.cf(file);
@@ -482,7 +482,7 @@
 				if (file.folder) dive(file.folder);
 
 				this.update();
-				this.trigger('open-file', this.file, silent);
+				this.$emit('open-file', this.file, silent);
 			});
 		};
 
diff --git a/src/web/app/mobile/tags/home-timeline.tag b/src/web/app/mobile/tags/home-timeline.tag
index 70074ef9f..88e26bc78 100644
--- a/src/web/app/mobile/tags/home-timeline.tag
+++ b/src/web/app/mobile/tags/home-timeline.tag
@@ -22,7 +22,7 @@
 		this.init = new Promise((res, rej) => {
 			this.api('posts/timeline').then(posts => {
 				res(posts);
-				this.trigger('loaded');
+				this.$emit('loaded');
 			});
 		});
 
diff --git a/src/web/app/mobile/tags/home.tag b/src/web/app/mobile/tags/home.tag
index a304708b3..038322b63 100644
--- a/src/web/app/mobile/tags/home.tag
+++ b/src/web/app/mobile/tags/home.tag
@@ -16,7 +16,7 @@
 	<script lang="typescript">
 		this.on('mount', () => {
 			this.$refs.tl.on('loaded', () => {
-				this.trigger('loaded');
+				this.$emit('loaded');
 			});
 		});
 	</script>
diff --git a/src/web/app/mobile/tags/notifications.tag b/src/web/app/mobile/tags/notifications.tag
index c945f6a3e..8a1482aca 100644
--- a/src/web/app/mobile/tags/notifications.tag
+++ b/src/web/app/mobile/tags/notifications.tag
@@ -106,7 +106,7 @@
 					notifications: notifications
 				});
 
-				this.trigger('fetched');
+				this.$emit('fetched');
 			});
 
 			this.connection.on('notification', this.onNotification);
diff --git a/src/web/app/mobile/tags/post-form.tag b/src/web/app/mobile/tags/post-form.tag
index 1c0282e77..a37e2bf38 100644
--- a/src/web/app/mobile/tags/post-form.tag
+++ b/src/web/app/mobile/tags/post-form.tag
@@ -161,7 +161,7 @@
 			});
 
 			this.$refs.uploader.on('change-uploads', uploads => {
-				this.trigger('change-uploading-files', uploads);
+				this.$emit('change-uploading-files', uploads);
 			});
 
 			this.$refs.text.focus();
@@ -207,19 +207,19 @@
 		this.addFile = file => {
 			file._remove = () => {
 				this.files = this.files.filter(x => x.id != file.id);
-				this.trigger('change-files', this.files);
+				this.$emit('change-files', this.files);
 				this.update();
 			};
 
 			this.files.push(file);
-			this.trigger('change-files', this.files);
+			this.$emit('change-files', this.files);
 			this.update();
 		};
 
 		this.removeFile = e => {
 			const file = e.item;
 			this.files = this.files.filter(x => x.id != file.id);
-			this.trigger('change-files', this.files);
+			this.$emit('change-files', this.files);
 			this.update();
 		};
 
@@ -254,7 +254,7 @@
 				reply_id: opts.reply ? opts.reply.id : undefined,
 				poll: this.poll ? this.$refs.poll.get() : undefined
 			}).then(data => {
-				this.trigger('post');
+				this.$emit('post');
 				this.$destroy();
 			}).catch(err => {
 				this.update({
@@ -264,7 +264,7 @@
 		};
 
 		this.cancel = () => {
-			this.trigger('cancel');
+			this.$emit('cancel');
 			this.$destroy();
 		};
 
diff --git a/src/web/app/mobile/tags/search-posts.tag b/src/web/app/mobile/tags/search-posts.tag
index 00936a838..c650fbce5 100644
--- a/src/web/app/mobile/tags/search-posts.tag
+++ b/src/web/app/mobile/tags/search-posts.tag
@@ -27,7 +27,7 @@
 		this.init = new Promise((res, rej) => {
 			this.api('posts/search', parse(this.query)).then(posts => {
 				res(posts);
-				this.trigger('loaded');
+				this.$emit('loaded');
 			});
 		});
 
diff --git a/src/web/app/mobile/tags/search.tag b/src/web/app/mobile/tags/search.tag
index 36f375e96..61f3093e0 100644
--- a/src/web/app/mobile/tags/search.tag
+++ b/src/web/app/mobile/tags/search.tag
@@ -9,7 +9,7 @@
 
 		this.on('mount', () => {
 			this.$refs.posts.on('loaded', () => {
-				this.trigger('loaded');
+				this.$emit('loaded');
 			});
 		});
 	</script>
diff --git a/src/web/app/mobile/tags/user-followers.tag b/src/web/app/mobile/tags/user-followers.tag
index 02368045e..b9101e212 100644
--- a/src/web/app/mobile/tags/user-followers.tag
+++ b/src/web/app/mobile/tags/user-followers.tag
@@ -21,7 +21,7 @@
 
 		this.on('mount', () => {
 			this.$refs.list.on('loaded', () => {
-				this.trigger('loaded');
+				this.$emit('loaded');
 			});
 		});
 	</script>
diff --git a/src/web/app/mobile/tags/user-following.tag b/src/web/app/mobile/tags/user-following.tag
index c0eb58b4b..5cfe60fec 100644
--- a/src/web/app/mobile/tags/user-following.tag
+++ b/src/web/app/mobile/tags/user-following.tag
@@ -21,7 +21,7 @@
 
 		this.on('mount', () => {
 			this.$refs.list.on('loaded', () => {
-				this.trigger('loaded');
+				this.$emit('loaded');
 			});
 		});
 	</script>
diff --git a/src/web/app/mobile/tags/user-timeline.tag b/src/web/app/mobile/tags/user-timeline.tag
index 270a3744c..b9f5dfbd5 100644
--- a/src/web/app/mobile/tags/user-timeline.tag
+++ b/src/web/app/mobile/tags/user-timeline.tag
@@ -18,7 +18,7 @@
 				with_media: this.withMedia
 			}).then(posts => {
 				res(posts);
-				this.trigger('loaded');
+				this.$emit('loaded');
 			});
 		});
 
diff --git a/src/web/app/mobile/tags/user.tag b/src/web/app/mobile/tags/user.tag
index 0091bafc2..87e63471e 100644
--- a/src/web/app/mobile/tags/user.tag
+++ b/src/web/app/mobile/tags/user.tag
@@ -201,7 +201,7 @@
 			}).then(user => {
 				this.fetching = false;
 				this.user = user;
-				this.trigger('loaded', user);
+				this.$emit('loaded', user);
 				this.update();
 			});
 		});
diff --git a/src/web/app/mobile/tags/users-list.tag b/src/web/app/mobile/tags/users-list.tag
index fb7040a7a..2bc0c6e93 100644
--- a/src/web/app/mobile/tags/users-list.tag
+++ b/src/web/app/mobile/tags/users-list.tag
@@ -87,7 +87,7 @@
 		this.moreFetching = false;
 
 		this.on('mount', () => {
-			this.fetch(() => this.trigger('loaded'));
+			this.fetch(() => this.$emit('loaded'));
 		});
 
 		this.fetch = cb => {