From 68b1721ecf65484c1b679404246edc3627346c1b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 8 Nov 2017 23:43:47 +0900
Subject: なんかもうめっちゃやった
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/web/app/desktop/router.js                      |   5 +
 src/web/app/desktop/tags/donation.tag              |   7 +-
 src/web/app/desktop/tags/home-widgets/activity.tag |  10 +-
 src/web/app/desktop/tags/home-widgets/server.tag   |  11 +-
 src/web/app/desktop/tags/home.tag                  | 215 +++++++++++++++------
 src/web/app/desktop/tags/index.js                  |   1 +
 src/web/app/desktop/tags/pages/home-customize.tag  |  14 ++
 src/web/app/desktop/tags/settings.tag              |   1 +
 src/web/app/desktop/tags/ui.tag                    |   2 +-
 9 files changed, 204 insertions(+), 62 deletions(-)
 create mode 100644 src/web/app/desktop/tags/pages/home-customize.tag

(limited to 'src/web/app/desktop')

diff --git a/src/web/app/desktop/router.js b/src/web/app/desktop/router.js
index 104b9bbe5d..bbd68cf99a 100644
--- a/src/web/app/desktop/router.js
+++ b/src/web/app/desktop/router.js
@@ -9,6 +9,7 @@ let page = null;
 export default me => {
 	route('/',                       index);
 	route('/selectdrive',            selectDrive);
+	route('/i/customize-home',       customizeHome);
 	route('/i/drive',                drive);
 	route('/i/drive/folder/:folder', drive);
 	route('/i/mentions',             mentions);
@@ -27,6 +28,10 @@ export default me => {
 		mount(document.createElement('mk-home-page'));
 	}
 
+	function customizeHome() {
+		mount(document.createElement('mk-home-customize-page'));
+	}
+
 	function entrance() {
 		mount(document.createElement('mk-entrance'));
 		document.documentElement.setAttribute('data-page', 'entrance');
diff --git a/src/web/app/desktop/tags/donation.tag b/src/web/app/desktop/tags/donation.tag
index 33f377a192..1c19fac1f5 100644
--- a/src/web/app/desktop/tags/donation.tag
+++ b/src/web/app/desktop/tags/donation.tag
@@ -54,11 +54,10 @@
 			e.preventDefault();
 			e.stopPropagation();
 
-			this.I.data.no_donation = 'true';
+			this.I.client_settings.show_donation = false;
 			this.I.update();
-			this.api('i/appdata/set', {
-				key: 'no_donation',
-				value: 'true'
+			this.api('i/update', {
+				show_donation: false
 			});
 
 			this.unmount();
diff --git a/src/web/app/desktop/tags/home-widgets/activity.tag b/src/web/app/desktop/tags/home-widgets/activity.tag
index 8bd8bfb2aa..7bdcd334c9 100644
--- a/src/web/app/desktop/tags/home-widgets/activity.tag
+++ b/src/web/app/desktop/tags/home-widgets/activity.tag
@@ -54,7 +54,7 @@
 		this.mixin('api');
 
 		this.initializing = true;
-		this.view = 0;
+		this.view = this.opts.data.hasOwnProperty('view') ? this.opts.data.view : 0;
 
 		this.on('mount', () => {
 			this.api('aggregation/users/activity', {
@@ -71,6 +71,14 @@
 		this.toggle = () => {
 			this.view++;
 			if (this.view == 2) this.view = 0;
+
+			// Save view state
+			this.I.client_settings.home.filter(w => w.id == this.opts.id)[0].data.view = this.view;
+			this.api('i/update_home', {
+				home: this.I.client_settings.home
+			}).then(() => {
+				this.I.update();
+			});
 		};
 	</script>
 </mk-activity-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/server.tag b/src/web/app/desktop/tags/home-widgets/server.tag
index bc8f313d53..235867c38a 100644
--- a/src/web/app/desktop/tags/home-widgets/server.tag
+++ b/src/web/app/desktop/tags/home-widgets/server.tag
@@ -56,10 +56,11 @@
 	<script>
 		import Connection from '../../../common/scripts/server-stream';
 
+		this.mixin('i');
 		this.mixin('api');
 
 		this.initializing = true;
-		this.view = 0;
+		this.view = this.opts.data.hasOwnProperty('view') ? this.opts.data.view : 0;
 		this.connection = new Connection();
 
 		this.on('mount', () => {
@@ -78,6 +79,14 @@
 		this.toggle = () => {
 			this.view++;
 			if (this.view == 6) this.view = 0;
+
+			// Save view state
+			this.I.client_settings.home.filter(w => w.id == this.opts.id)[0].data.view = this.view;
+			this.api('i/update_home', {
+				home: this.I.client_settings.home
+			}).then(() => {
+				this.I.update();
+			});
 		};
 	</script>
 </mk-server-home-widget>
diff --git a/src/web/app/desktop/tags/home.tag b/src/web/app/desktop/tags/home.tag
index 37b2d3cf7e..f0c71a7ea8 100644
--- a/src/web/app/desktop/tags/home.tag
+++ b/src/web/app/desktop/tags/home.tag
@@ -1,4 +1,30 @@
-<mk-home>
+<mk-home data-customize={ opts.customize }>
+	<div class="customize" if={ opts.customize }>
+		<div class="adder">
+			<p>ウィジェットを追加:</p>
+			<select ref="widgetSelector">
+				<option value="profile">プロフィール</option>
+				<option value="calendar">カレンダー</option>
+				<option value="activity">アクティビティ</option>
+				<option value="rss-reader">RSSリーダー</option>
+				<option value="trends">トレンド</option>
+				<option value="photo-stream">フォトストリーム</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="server">サーバー情報</option>
+				<option value="donation">寄付のお願い</option>
+				<option value="nav">ナビゲーション</option>
+				<option value="tips">ヒント</option>
+			</select>
+			<button onclick={ addWidget }>追加</button>
+		</div>
+		<div class="trash" ref="trash">
+			<p class="ignore"><b>ゴミ箱</b> (ここにウィジェットをドロップすると削除できます)</p>
+		</div>
+	</div>
 	<div class="main">
 		<div class="left" ref="left"></div>
 		<main>
@@ -11,25 +37,37 @@
 		:scope
 			display block
 
-			> .main
+			&:not([data-customize])
+				> .main > *:empty
+					display none
+
+			> .customize
+				display flex
 				margin 0 auto
 				max-width 1200px
+				background #fff1c8
 
-				&:after
-					content ""
-					display block
-					clear both
+				> div
+					width 50%
 
-				> *
-					float left
+					&.trash
+						background #ffc5c5
+
+			> .main
+				display flex
+				justify-content center
+				margin 0 auto
+				max-width 1200px
 
-					> *
+				> *
+					> *:not(.customize-container)
+					> .customize-container > *
 						display block
-						//border solid 1px #eaeaea
 						border solid 1px rgba(0, 0, 0, 0.075)
 						border-radius 6px
-						//box-shadow 0px 2px 16px rgba(0, 0, 0, 0.2)
 
+					> *:not(.customize-container)
+					> .customize-container
 						&:not(:last-child)
 							margin-bottom 16px
 
@@ -40,6 +78,12 @@
 				> *:not(main)
 					width 275px
 
+					> .customize-container
+						cursor move
+
+						> *
+							pointer-events none
+
 				> .left
 					padding 16px 0 16px 16px
 
@@ -58,66 +102,49 @@
 
 	</style>
 	<script>
+		import uuid from 'uuid';
+		import Sortable from 'sortablejs';
+
 		this.mixin('i');
+		this.mixin('api');
 
 		this.mode = this.opts.mode || 'timeline';
 
-		const _home = {
-			left: [
-				'profile',
-				'calendar',
-				'activity',
-				'rss-reader',
-				'trends',
-				'photo-stream',
-				'version'
-			],
-			right: [
-				'broadcast',
-				'notifications',
-				'user-recommendation',
-				'recommended-polls',
-				'server',
-				'donation',
-				'nav',
-				'tips'
-			]
-		};
-
 		this.home = [];
 
 		this.on('mount', () => {
 			this.refs.tl.on('loaded', () => {
 				this.trigger('loaded');
 			});
-/*
-			this.I.data.home.forEach(widget => {
+
+			this.I.client_settings.home.forEach(widget => {
 				try {
-					const el = document.createElement(`mk-${widget.name}-home-widget`);
-					switch (widget.place) {
-						case 'left': this.refs.left.appendChild(el); break;
-						case 'right': this.refs.right.appendChild(el); break;
-					}
-					this.home.push(riot.mount(el, {
-						id: widget.id,
-						data: widget.data
-					})[0]);
+					this.setWidget(widget);
 				} catch (e) {
 					// noop
 				}
 			});
-*/
-			_home.left.forEach(widget => {
-				const el = document.createElement(`mk-${widget}-home-widget`);
-				this.refs.left.appendChild(el);
-				this.home.push(riot.mount(el)[0]);
-			});
 
-			_home.right.forEach(widget => {
-				const el = document.createElement(`mk-${widget}-home-widget`);
-				this.refs.right.appendChild(el);
-				this.home.push(riot.mount(el)[0]);
-			});
+			if (this.opts.customize) {
+				const sortableOption = {
+					group: 'kyoppie',
+					animation: 150,
+					filter: '.ignore',
+					onSort: this.saveHome
+				};
+
+				new Sortable(this.refs.left, sortableOption);
+				new Sortable(this.refs.right, 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();
+					}
+				}));
+			}
 		});
 
 		this.on('unmount', () => {
@@ -125,5 +152,83 @@
 				widget.unmount();
 			});
 		});
+
+		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;
+			}
+
+			this.home.push(riot.mount(el, {
+				id: widget.id,
+				data: widget.data
+			})[0]);
+		};
+
+		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);
+			});
+
+			this.api('i/update_home', {
+				home: data
+			}).then(() => {
+				this.I.client_settings.home = data;
+				this.I.update();
+			});
+		};
 	</script>
 </mk-home>
diff --git a/src/web/app/desktop/tags/index.js b/src/web/app/desktop/tags/index.js
index 7997bcc7f2..c36a06e499 100644
--- a/src/web/app/desktop/tags/index.js
+++ b/src/web/app/desktop/tags/index.js
@@ -57,6 +57,7 @@ require('./pages/entrance.tag');
 require('./pages/entrance/signin.tag');
 require('./pages/entrance/signup.tag');
 require('./pages/home.tag');
+require('./pages/home-customize.tag');
 require('./pages/user.tag');
 require('./pages/post.tag');
 require('./pages/search.tag');
diff --git a/src/web/app/desktop/tags/pages/home-customize.tag b/src/web/app/desktop/tags/pages/home-customize.tag
new file mode 100644
index 0000000000..4434015615
--- /dev/null
+++ b/src/web/app/desktop/tags/pages/home-customize.tag
@@ -0,0 +1,14 @@
+<mk-home-customize-page>
+	<mk-ui ref="ui" page="timeline">
+		<mk-home ref="home" mode={ parent.opts.mode } customize={ true }/>
+	</mk-ui>
+	<style>
+		:scope
+			display block
+	</style>
+	<script>
+		this.on('mount', () => {
+			document.title = 'Misskey - ホームのカスタマイズ';
+		});
+	</script>
+</mk-home-customize-page>
diff --git a/src/web/app/desktop/tags/settings.tag b/src/web/app/desktop/tags/settings.tag
index eabddfb432..4c16f9eaa8 100644
--- a/src/web/app/desktop/tags/settings.tag
+++ b/src/web/app/desktop/tags/settings.tag
@@ -38,6 +38,7 @@
 
 		<section class="web" show={ page == 'web' }>
 			<h1>デザイン</h1>
+			<a href="/i/customize-home">ホームをカスタマイズ</a>
 		</section>
 
 		<section class="web" show={ page == 'web' }>
diff --git a/src/web/app/desktop/tags/ui.tag b/src/web/app/desktop/tags/ui.tag
index 0a3e8d9c53..6a4982877f 100644
--- a/src/web/app/desktop/tags/ui.tag
+++ b/src/web/app/desktop/tags/ui.tag
@@ -37,7 +37,7 @@
 </mk-ui>
 
 <mk-ui-header>
-	<mk-donation if={ SIGNIN && I.data.no_donation != 'true' }/>
+	<mk-donation if={ SIGNIN && I.client_settings.show_donation }/>
 	<mk-special-message/>
 	<div class="main">
 		<div class="backdrop"></div>
-- 
cgit v1.3.1-freya