From 9996603e158d18c87429410b344403718fa095f0 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 20 Mar 2017 18:43:04 +0900
Subject: [PATCH] #299 Use Anime instead of Velocity

---
 package.json                                  |  2 +-
 src/web/app/boot.js                           |  1 -
 src/web/app/common/tags/reaction-picker.tag   | 33 +++++++++++++-
 src/web/app/common/tags/stream-indicator.tag  | 20 ++++++---
 src/web/app/desktop/tags/contextmenu.tag      | 11 +++--
 src/web/app/desktop/tags/dialog.tag           | 43 ++++++++-----------
 .../app/desktop/tags/home-widgets/tips.tag    | 22 ++++++----
 src/web/app/desktop/tags/image-dialog.tag     | 17 ++++----
 src/web/app/desktop/tags/ui-notification.tag  | 20 +++++----
 src/web/app/desktop/tags/user-preview.tag     | 20 +++++----
 src/web/app/desktop/tags/window.tag           | 39 +++++++----------
 src/web/app/mobile/tags/notify.tag            | 18 ++++----
 12 files changed, 139 insertions(+), 107 deletions(-)

diff --git a/package.json b/package.json
index 4761428c27..5e15ae9182 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "@types/webpack": "2.2.11",
     "@types/webpack-stream": "3.2.6",
     "@types/websocket": "0.0.33",
+    "animejs": "2.0.1",
     "autwh": "0.0.1",
     "bcryptjs": "2.4.3",
     "body-parser": "1.17.1",
@@ -141,7 +142,6 @@
     "typescript": "2.2.1",
     "uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#8f4b45f4f814c04918382949b4bcaf7a8d910281",
     "uuid": "3.0.1",
-    "velocity-animate": "1.4.3",
     "vhost": "3.0.2",
     "webpack": "2.2.1",
     "webpack-stream": "3.2.0",
diff --git a/src/web/app/boot.js b/src/web/app/boot.js
index 8a65e59735..8a9d623bde 100644
--- a/src/web/app/boot.js
+++ b/src/web/app/boot.js
@@ -3,7 +3,6 @@
  */
 
 import * as riot from 'riot';
-require('velocity-animate');
 import api from './common/scripts/api';
 import signout from './common/scripts/signout';
 import checkForUpdate from './common/scripts/check-for-update';
diff --git a/src/web/app/common/tags/reaction-picker.tag b/src/web/app/common/tags/reaction-picker.tag
index 194c9d7b4a..688ccc32a3 100644
--- a/src/web/app/common/tags/reaction-picker.tag
+++ b/src/web/app/common/tags/reaction-picker.tag
@@ -1,5 +1,5 @@
 <mk-reaction-picker>
-	<div class="backdrop" onclick={ unmount }></div>
+	<div class="backdrop" ref="backdrop" onclick={ close }></div>
 	<div class="popover" ref="popover">
 		<button onclick={ react.bind(null, 'like') } tabindex="1" title="いいね"><mk-reaction-icon reaction='like'></mk-reaction-icon></button>
 		<button onclick={ react.bind(null, 'love') } tabindex="2" title="ハート"><mk-reaction-icon reaction='love'></mk-reaction-icon></button>
@@ -30,6 +30,8 @@
 				border 1px solid rgba(27, 31, 35, 0.15)
 				border-radius 4px
 				box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
+				transform scale(0.5)
+				opacity 0
 
 				> button
 					width 40px
@@ -46,6 +48,8 @@
 
 	</style>
 	<script>
+		import anime from 'animejs';
+
 		this.mixin('api');
 
 		this.post = this.opts.post;
@@ -60,6 +64,13 @@
 			const height = this.refs.popover.offsetHeight;
 			this.refs.popover.style.left = (x - (width / 2)) + 'px';
 			this.refs.popover.style.top = (y - (height / 2)) + 'px';
+
+			anime({
+				targets: this.refs.popover,
+				opacity: [0, 1],
+				scale: [0.5, 1],
+				duration: 500
+			});
 		});
 
 		this.react = reaction => {
@@ -71,5 +82,25 @@
 				this.unmount();
 			});
 		};
+
+		this.close = () => {
+			this.refs.backdrop.style.pointerEvents = 'none';
+			anime({
+				targets: this.refs.backdrop,
+				opacity: 0,
+				duration: 200,
+				easing: 'linear'
+			});
+
+			this.refs.popover.style.pointerEvents = 'none';
+			anime({
+				targets: this.refs.popover,
+				opacity: 0,
+				scale: 0.5,
+				duration: 200,
+				easing: 'easeInBack',
+				complete: this.unmount
+			});
+		};
 	</script>
 </mk-reaction-picker>
diff --git a/src/web/app/common/tags/stream-indicator.tag b/src/web/app/common/tags/stream-indicator.tag
index 0a48459d87..96d9b0ec95 100644
--- a/src/web/app/common/tags/stream-indicator.tag
+++ b/src/web/app/common/tags/stream-indicator.tag
@@ -35,6 +35,8 @@
 
 	</style>
 	<script>
+		import anime from 'animejs';
+
 		this.mixin('i');
 		this.mixin('stream');
 
@@ -47,17 +49,23 @@
 		this.stream.on('_connected_', () => {
 			this.update();
 			setTimeout(() => {
-				Velocity(this.root, {
-					opacity: 0
-				}, 200, 'linear');
+				anime({
+					targets: this.root,
+					opacity: 0,
+					easing: 'linear',
+					duration: 200
+				});
 			}, 1000);
 		});
 
 		this.stream.on('_closed_', () => {
 			this.update();
-			Velocity(this.root, {
-				opacity: 1
-			}, 0);
+			anime({
+				targets: this.root,
+				opacity: 1,
+				easing: 'linear',
+				duration: 50
+			});
 		});
 	</script>
 </mk-stream-indicator>
diff --git a/src/web/app/desktop/tags/contextmenu.tag b/src/web/app/desktop/tags/contextmenu.tag
index 8d53772de7..c862f3f609 100644
--- a/src/web/app/desktop/tags/contextmenu.tag
+++ b/src/web/app/desktop/tags/contextmenu.tag
@@ -16,6 +16,7 @@
 			background #fff
 			border-radius 0 4px 4px 4px
 			box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
+			opacity 0
 
 			ul
 				display block
@@ -95,6 +96,7 @@
 
 	</style>
 	<script>
+		import anime from 'animejs';
 		import contains from '../../common/scripts/contains';
 
 		this.root.addEventListener('contextmenu', e => {
@@ -116,12 +118,9 @@
 			this.root.style.left = pos.x + 'px';
 			this.root.style.top = pos.y + 'px';
 
-			Velocity(this.root, 'finish', true);
-			Velocity(this.root, { opacity: 0 }, 0);
-			Velocity(this.root, {
-				opacity: 1
-			}, {
-				queue: false,
+			anime({
+				targets: this.root,
+				opacity: [0, 1],
 				duration: 100,
 				easing: 'linear'
 			});
diff --git a/src/web/app/desktop/tags/dialog.tag b/src/web/app/desktop/tags/dialog.tag
index c0df0b330f..8c2603b46d 100644
--- a/src/web/app/desktop/tags/dialog.tag
+++ b/src/web/app/desktop/tags/dialog.tag
@@ -36,6 +36,7 @@
 				padding 32px 42px
 				width 480px
 				background #fff
+				opacity 0
 
 				> header
 					margin 1em 0
@@ -79,6 +80,8 @@
 
 	</style>
 	<script>
+		import anime from 'animejs';
+
 		this.canThrough = opts.canThrough != null ? opts.canThrough : true;
 		this.opts.buttons.forEach(button => {
 			button._onclick = () => {
@@ -92,25 +95,17 @@
 			this.refs.body.innerHTML = this.opts.text;
 
 			this.refs.bg.style.pointerEvents = 'auto';
-			Velocity(this.refs.bg, 'finish', true);
-			Velocity(this.refs.bg, {
-				opacity: 1
-			}, {
-				queue: false,
+			anime({
+				targets: this.refs.bg,
+				opacity: 1,
 				duration: 100,
 				easing: 'linear'
 			});
 
-			Velocity(this.refs.main, {
-				opacity: 0,
-				scale: 1.2
-			}, {
-				duration: 0
-			});
-			Velocity(this.refs.main, {
+			anime({
+				targets: this.refs.main,
 				opacity: 1,
-				scale: 1
-			}, {
+				scale: [1.2, 1],
 				duration: 300,
 				easing: [ 0, 0.5, 0.5, 1 ]
 			});
@@ -118,25 +113,21 @@
 
 		this.close = () => {
 			this.refs.bg.style.pointerEvents = 'none';
-			Velocity(this.refs.bg, 'finish', true);
-			Velocity(this.refs.bg, {
-				opacity: 0
-			}, {
-				queue: false,
+			anime({
+				targets: this.refs.bg,
+				opacity: 0,
 				duration: 300,
-				easing: 'linear' 
+				easing: 'linear'
 			});
 
 			this.refs.main.style.pointerEvents = 'none';
-			Velocity(this.refs.main, 'finish', true);
-			Velocity(this.refs.main, {
+			anime({
+				targets: this.refs.main,
 				opacity: 0,
-				scale: 0.8
-			}, {
-				queue: false,
+				scale: 0.8,
 				duration: 300,
 				easing: [ 0.5, -0.5, 1, 0.5 ],
-				complete: () => this.unmount()
+				complete: this.unmount
 			});
 		};
 
diff --git a/src/web/app/desktop/tags/home-widgets/tips.tag b/src/web/app/desktop/tags/home-widgets/tips.tag
index 27268f3ed3..5a535099ab 100644
--- a/src/web/app/desktop/tags/home-widgets/tips.tag
+++ b/src/web/app/desktop/tags/home-widgets/tips.tag
@@ -29,6 +29,8 @@
 
 	</style>
 	<script>
+		import anime from 'animejs';
+
 		this.tips = [
 			'<kbd>t</kbd>でタイムラインにフォーカスできます',
 			'<kbd>p</kbd>または<kbd>n</kbd>で投稿フォームを開きます',
@@ -55,20 +57,22 @@
 		};
 
 		this.change = () => {
-			Velocity(this.refs.tip, {
-				opacity: 0
-			}, {
+			anime({
+				targets: this.refs.tip,
+				opacity: 0,
 				duration: 500,
 				easing: 'linear',
 				complete: this.set
 			});
 
-			Velocity(this.refs.tip, {
-				opacity: 1
-			}, {
-				duration: 500,
-				easing: 'linear'
-			});
+			setTimeout(() => {
+				anime({
+					targets: this.refs.tip,
+					opacity: 1,
+					duration: 500,
+					easing: 'linear'
+				});
+			}, 500);
 		};
 	</script>
 </mk-tips-home-widget>
diff --git a/src/web/app/desktop/tags/image-dialog.tag b/src/web/app/desktop/tags/image-dialog.tag
index 91245dac95..a2bed46b63 100644
--- a/src/web/app/desktop/tags/image-dialog.tag
+++ b/src/web/app/desktop/tags/image-dialog.tag
@@ -35,26 +35,27 @@
 
 	</style>
 	<script>
+		import anime from 'animejs';
+
 		this.image = this.opts.image;
 
 		this.on('mount', () => {
-			Velocity(this.root, {
-				opacity: 1
-			}, {
+			anime({
+				targets: this.root,
+				opacity: 1,
 				duration: 100,
 				easing: 'linear'
 			});
 		});
 
 		this.close = () => {
-			Velocity(this.root, {
-				opacity: 0
-			}, {
+			anime({
+				targets: this.root,
+				opacity: 0,
 				duration: 100,
 				easing: 'linear',
-				complete: () => this.unmount()
+				complete: this.unmount
 			});
 		};
-
 	</script>
 </mk-image-dialog>
diff --git a/src/web/app/desktop/tags/ui-notification.tag b/src/web/app/desktop/tags/ui-notification.tag
index 34f310844e..ec094edd60 100644
--- a/src/web/app/desktop/tags/ui-notification.tag
+++ b/src/web/app/desktop/tags/ui-notification.tag
@@ -22,21 +22,23 @@
 
 	</style>
 	<script>
+		import anime from 'animejs';
+
 		this.on('mount', () => {
-			Velocity(this.root, {
-				top: '0px' 
-			}, {
+			anime({
+				tagrets: this.root,
+				top: '0px',
 				duration: 500,
-				easing: 'ease-out' 
+				easing: 'easeOutQuad'
 			})
 
 			setTimeout(() => {
-				Velocity(this.root, {
-					top: '-64px' 
-				}, {
+				anime({
+					targets: this.root,
+					top: '-64px',
 					duration: 500,
-					easing: 'ease-out',
-					complete: () => this.unmount()
+					easing: 'easeOutQuad',
+					complete: this.unmount
 				});
 			}, 6000);
 		});
diff --git a/src/web/app/desktop/tags/user-preview.tag b/src/web/app/desktop/tags/user-preview.tag
index 4285f15ef8..1ed6853e4a 100644
--- a/src/web/app/desktop/tags/user-preview.tag
+++ b/src/web/app/desktop/tags/user-preview.tag
@@ -99,6 +99,8 @@
 
 	</style>
 	<script>
+		import anime from 'animejs';
+
 		this.mixin('i');
 		this.mixin('api');
 
@@ -124,23 +126,23 @@
 		});
 
 		this.open = () => {
-			Velocity(this.root, {
+			anime({
+				targets: this.root,
 				opacity: 1,
-				'margin-top': 0
-			}, {
+				'margin-top': 0,
 				duration: 200,
-				easing: 'ease-out'
+				easing: 'easeOutQuad'
 			});
 		};
 
 		this.close = () => {
-			Velocity(this.root, {
+			anime({
+				targets: this.root,
 				opacity: 0,
-				'margin-top': '-8px'
-			}, {
+				'margin-top': '-8px',
 				duration: 200,
-				easing: 'ease-out',
-				complete: () => this.unmount()
+				easing: 'easeOutQuad',
+				complete: this.unmount
 			});
 		};
 	</script>
diff --git a/src/web/app/desktop/tags/window.tag b/src/web/app/desktop/tags/window.tag
index 9e48958a11..aefb6499b7 100644
--- a/src/web/app/desktop/tags/window.tag
+++ b/src/web/app/desktop/tags/window.tag
@@ -173,6 +173,7 @@
 
 	</style>
 	<script>
+		import anime from 'animejs';
 		import contains from '../../common/scripts/contains';
 
 		this.minHeight = 40;
@@ -222,26 +223,21 @@
 
 			if (this.isModal) {
 				this.refs.bg.style.pointerEvents = 'auto';
-				Velocity(this.refs.bg, 'finish', true);
-				Velocity(this.refs.bg, {
-					opacity: 1
-				}, {
-					queue: false,
+				anime({
+					targets: this.refs.bg,
+					opacity: 1,
 					duration: 100,
 					easing: 'linear'
 				});
 			}
 
 			this.refs.main.style.pointerEvents = 'auto';
-			Velocity(this.refs.main, 'finish', true);
-			Velocity(this.refs.main, { scale: 1.1 }, 0);
-			Velocity(this.refs.main, {
+			anime({
+				targets: this.refs.main,
 				opacity: 1,
-				scale: 1
-			}, {
-				queue: false,
+				scale: [1.1, 1],
 				duration: 200,
-				easing: 'ease-out'
+				easing: 'easeOutQuad'
 			});
 
 			//this.refs.main.focus();
@@ -256,25 +252,22 @@
 
 			if (this.isModal) {
 				this.refs.bg.style.pointerEvents = 'none';
-				Velocity(this.refs.bg, 'finish', true);
-				Velocity(this.refs.bg, {
-					opacity: 0
-				}, {
-					queue: false,
+				anime({
+					targets: this.refs.bg,
+					opacity: 0,
 					duration: 300,
 					easing: 'linear'
 				});
 			}
 
 			this.refs.main.style.pointerEvents = 'none';
-			Velocity(this.refs.main, 'finish', true);
-			Velocity(this.refs.main, {
+
+			anime({
+				targets: this.refs.main,
 				opacity: 0,
-				scale: 0.8
-			}, {
-				queue: false,
+				scale: 0.8,
 				duration: 300,
-				easing: [ 0.5, -0.5, 1, 0.5 ]
+				easing: [0.5, -0.5, 1, 0.5]
 			});
 
 			setTimeout(() => {
diff --git a/src/web/app/mobile/tags/notify.tag b/src/web/app/mobile/tags/notify.tag
index c97e70696c..6bbf337de2 100644
--- a/src/web/app/mobile/tags/notify.tag
+++ b/src/web/app/mobile/tags/notify.tag
@@ -16,20 +16,22 @@
 
 	</style>
 	<script>
+		import anime from 'animejs';
+
 		this.on('mount', () => {
-			Velocity(this.root, {
-				bottom: '0px'
-			}, {
+			anime({
+				targets: this.root,
+				bottom: '0px',
 				duration: 500,
-				easing: 'ease-out'
+				easing: 'easeOutQuad'
 			});
 
 			setTimeout(() => {
-				Velocity(this.root, {
-					bottom: '-64px'
-				}, {
+				anime({
+					targets: this.root,
+					bottom: '-64px',
 					duration: 500,
-					easing: 'ease-out',
+					easing: 'easeOutQuad',
 					complete: () => this.unmount()
 				});
 			}, 6000);