From 6be34dd83aaed75a300679ec8cb1c70c01f49c5a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 9 Nov 2017 02:56:02 +0900
Subject: [PATCH] Implement #888

---
 CHANGELOG.md                                  |   4 +
 .../desktop/tags/home-widgets/slideshow.tag   | 164 ++++++++++++++++++
 src/web/app/desktop/tags/home.tag             |   1 +
 src/web/app/desktop/tags/index.js             |   2 +
 .../tags/select-folder-from-drive-window.tag  | 112 ++++++++++++
 5 files changed, 283 insertions(+)
 create mode 100644 src/web/app/desktop/tags/home-widgets/slideshow.tag
 create mode 100644 src/web/app/desktop/tags/select-folder-from-drive-window.tag

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fbbb1acbd..bbeac2d74 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@ ChangeLog (Release Notes)
 =========================
 主に notable な changes を書いていきます
 
+unreleased
+----------
+* スライドショーウィジェットを追加
+
 2974 (2017/11/08)
 -----------------
 * ホームのカスタマイズを実装するなど
diff --git a/src/web/app/desktop/tags/home-widgets/slideshow.tag b/src/web/app/desktop/tags/home-widgets/slideshow.tag
new file mode 100644
index 000000000..da65bf91b
--- /dev/null
+++ b/src/web/app/desktop/tags/home-widgets/slideshow.tag
@@ -0,0 +1,164 @@
+<mk-slideshow-home-widget>
+	<div onclick={ choose }>
+		<p if={ folder === undefined }>クリックしてフォルダを指定してください</p>
+		<p if={ folder !== undefined && images.length == 0 }>このフォルダには画像がありません</p>
+		<div ref="slideA" class="slide a"></div>
+		<div ref="slideB" class="slide b"></div>
+	</div>
+	<button onclick={ resize }><i class="fa fa-expand"></i></button>
+	<style>
+		:scope
+			display block
+			overflow hidden
+			background #fff
+
+			&:hover > button
+				display block
+
+			> button
+				position absolute
+				left 0
+				bottom 0
+				display none
+				padding 4px
+				font-size 24px
+				color #fff
+				text-shadow 0 0 8px #000
+
+			> div
+				width 100%
+				height 100%
+				cursor pointer
+
+				> *
+					pointer-events none
+
+				> .slide
+					position absolute
+					top 0
+					left 0
+					width 100%
+					height 100%
+					background-size cover
+					background-position center
+
+					&.b
+						opacity 0
+
+	</style>
+	<script>
+		import anime from 'animejs';
+
+		this.mixin('i');
+		this.mixin('api');
+
+		this.size = this.opts.data.hasOwnProperty('size') ? this.opts.data.size : 0;
+		this.folder = this.opts.data.hasOwnProperty('folder') ? this.opts.data.folder : undefined;
+		this.images = [];
+		this.fetching = false;
+
+		this.on('mount', () => {
+			this.applySize();
+
+			if (this.folder !== undefined) {
+				this.fetch();
+			}
+
+			this.clock = setInterval(this.change, 10000);
+		});
+
+		this.on('unmount', () => {
+			clearInterval(this.clock);
+		});
+
+		this.applySize = () => {
+			let h;
+
+			if (this.size == 1) {
+				h = 250;
+			} else {
+				h = 170;
+			}
+
+			this.root.style.height = `${h}px`;
+		};
+
+		this.resize = () => {
+			this.size++;
+			if (this.size == 2) this.size = 0;
+
+			this.applySize();
+
+			// Save state
+			this.I.client_settings.home.filter(w => w.id == this.opts.id)[0].data.size = this.size;
+			this.api('i/update_home', {
+				home: this.I.client_settings.home
+			}).then(() => {
+				this.I.update();
+			});
+		};
+
+		this.change = () => {
+			if (this.images.length == 0) return;
+			if (this.index >= this.images.length) this.index = 0;
+
+			const img = `url(${ this.images[this.index].url }?thumbnail&size=1024)`;
+
+			this.refs.slideB.style.backgroundImage = img;
+
+			this.index++;
+
+			anime({
+				targets: this.refs.slideB,
+				opacity: 1,
+				duration: 1000,
+				easing: 'linear',
+				complete: () => {
+					this.refs.slideA.style.backgroundImage = img;
+					anime({
+						targets: this.refs.slideB,
+						opacity: 0,
+						duration: 0
+					});
+				}
+			});
+		};
+
+		this.fetch = () => {
+			this.update({
+				fetching: true
+			});
+
+			this.api('drive/files', {
+				folder_id: this.folder,
+				type: 'image/*',
+				limit: 100
+			}).then(images => {
+				this.update({
+					fetching: false,
+					images: images,
+					index: 0
+				});
+				this.refs.slideA.style.backgroundImage = '';
+				this.refs.slideB.style.backgroundImage = '';
+				this.change();
+			});
+		};
+
+		this.choose = () => {
+			const i = riot.mount(document.body.appendChild(document.createElement('mk-select-folder-from-drive-window')))[0];
+			i.one('selected', folder => {
+				this.folder = folder ? folder.id : null;
+				this.fetch();
+
+				// Save state
+				this.I.client_settings.home.filter(w => w.id == this.opts.id)[0].data.folder = this.folder;
+				this.api('i/update_home', {
+					home: this.I.client_settings.home
+				}).then(() => {
+					this.I.update();
+				});
+			});
+		};
+	</script>
+</mk-slideshow-home-widget>
diff --git a/src/web/app/desktop/tags/home.tag b/src/web/app/desktop/tags/home.tag
index f0c71a7ea..531adca4c 100644
--- a/src/web/app/desktop/tags/home.tag
+++ b/src/web/app/desktop/tags/home.tag
@@ -9,6 +9,7 @@
 				<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>
diff --git a/src/web/app/desktop/tags/index.js b/src/web/app/desktop/tags/index.js
index c36a06e49..75bbdae95 100644
--- a/src/web/app/desktop/tags/index.js
+++ b/src/web/app/desktop/tags/index.js
@@ -12,6 +12,7 @@ require('./drive/nav-folder.tag');
 require('./drive/browser-window.tag');
 require('./drive/browser.tag');
 require('./select-file-from-drive-window.tag');
+require('./select-folder-from-drive-window.tag');
 require('./crop-window.tag');
 require('./settings.tag');
 require('./settings-window.tag');
@@ -38,6 +39,7 @@ require('./home-widgets/recommended-polls.tag');
 require('./home-widgets/trends.tag');
 require('./home-widgets/activity.tag');
 require('./home-widgets/server.tag');
+require('./home-widgets/slideshow.tag');
 require('./timeline.tag');
 require('./messaging/window.tag');
 require('./messaging/room-window.tag');
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
new file mode 100644
index 000000000..375f428bf
--- /dev/null
+++ b/src/web/app/desktop/tags/select-folder-from-drive-window.tag
@@ -0,0 +1,112 @@
+<mk-select-folder-from-drive-window>
+	<mk-window ref="window" is-modal={ true } width={ '800px' } height={ '500px' }>
+		<yield to="header">
+			<mk-raw content={ parent.title }/>
+		</yield>
+		<yield to="content">
+			<mk-drive-browser ref="browser"/>
+			<div>
+				<button class="cancel" onclick={ parent.close }>キャンセル</button>
+				<button class="ok" onclick={ parent.ok }>決定</button>
+			</div>
+		</yield>
+	</mk-window>
+	<style>
+		:scope
+			> mk-window
+				[data-yield='header']
+					> mk-raw
+						> i
+							margin-right 4px
+
+				[data-yield='content']
+					> mk-drive-browser
+						height calc(100% - 72px)
+
+					> div
+						height 72px
+						background lighten($theme-color, 95%)
+
+						.ok
+						.cancel
+							display block
+							position absolute
+							bottom 16px
+							cursor pointer
+							padding 0
+							margin 0
+							width 120px
+							height 40px
+							font-size 1em
+							outline none
+							border-radius 4px
+
+							&:focus
+								&:after
+									content ""
+									pointer-events none
+									position absolute
+									top -5px
+									right -5px
+									bottom -5px
+									left -5px
+									border 2px solid rgba($theme-color, 0.3)
+									border-radius 8px
+
+							&:disabled
+								opacity 0.7
+								cursor default
+
+						.ok
+							right 16px
+							color $theme-color-foreground
+							background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+							border solid 1px lighten($theme-color, 15%)
+
+							&:not(:disabled)
+								font-weight bold
+
+							&:hover:not(:disabled)
+								background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+								border-color $theme-color
+
+							&:active:not(:disabled)
+								background $theme-color
+								border-color $theme-color
+
+						.cancel
+							right 148px
+							color #888
+							background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+							border solid 1px #e2e2e2
+
+							&:hover
+								background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+								border-color #dcdcdc
+
+							&:active
+								background #ececec
+								border-color #dcdcdc
+
+	</style>
+	<script>
+		this.files = [];
+
+		this.title = this.opts.title || '<i class="fa fa-folder-o"></i>フォルダを選択';
+
+		this.on('mount', () => {
+			this.refs.window.on('closed', () => {
+				this.unmount();
+			});
+		});
+
+		this.close = () => {
+			this.refs.window.close();
+		};
+
+		this.ok = () => {
+			this.trigger('selected', this.refs.window.refs.browser.folder);
+			this.refs.window.close();
+		};
+	</script>
+</mk-select-folder-from-drive-window>