From e8affdc730b39ba749f14cd7db05dfd68343e767 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 13 Feb 2018 09:27:57 +0900
Subject: [PATCH] wip

---
 .../app/common/views/components/post-menu.vue |  2 +-
 .../views/components/reaction-picker.vue      |  2 +-
 .../views/components/stream-indicator.vue     |  2 +-
 src/web/app/desktop/-tags/contextmenu.tag     |  2 +-
 .../desktop/-tags/detailed-post-window.tag    |  2 +-
 src/web/app/desktop/-tags/dialog.tag          |  2 +-
 src/web/app/desktop/-tags/drive/file.tag      |  2 +-
 .../desktop/-tags/home-widgets/slideshow.tag  |  2 +-
 .../app/desktop/-tags/home-widgets/tips.tag   |  2 +-
 src/web/app/desktop/-tags/user-preview.tag    |  2 +-
 .../views/components/images-image-dialog.vue  |  2 +-
 .../desktop/views/components/images-image.vue | 14 ++---
 .../app/desktop/views/components/images.vue   | 54 +++++++++----------
 src/web/app/desktop/views/components/index.ts |  6 +++
 .../app/desktop/views/components/posts.vue    |  2 +-
 .../views/components/ui-notification.vue      |  2 +-
 .../app/desktop/views/components/window.vue   |  2 +-
 src/web/app/mobile/tags/notify.tag            |  2 +-
 18 files changed, 56 insertions(+), 48 deletions(-)

diff --git a/src/web/app/common/views/components/post-menu.vue b/src/web/app/common/views/components/post-menu.vue
index 078e4745a..7a33360f6 100644
--- a/src/web/app/common/views/components/post-menu.vue
+++ b/src/web/app/common/views/components/post-menu.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import anime from 'animejs';
+import * as anime from 'animejs';
 
 export default Vue.extend({
 	props: ['post', 'source', 'compact'],
diff --git a/src/web/app/common/views/components/reaction-picker.vue b/src/web/app/common/views/components/reaction-picker.vue
index 62ccbfdd0..b17558ba9 100644
--- a/src/web/app/common/views/components/reaction-picker.vue
+++ b/src/web/app/common/views/components/reaction-picker.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import anime from 'animejs';
+import * as anime from 'animejs';
 
 const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%';
 
diff --git a/src/web/app/common/views/components/stream-indicator.vue b/src/web/app/common/views/components/stream-indicator.vue
index 0721c77ad..564376bba 100644
--- a/src/web/app/common/views/components/stream-indicator.vue
+++ b/src/web/app/common/views/components/stream-indicator.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="typescript">
-	import anime from 'animejs';
+	import * as anime from 'animejs';
 	import Ellipsis from './ellipsis.vue';
 
 	export default {
diff --git a/src/web/app/desktop/-tags/contextmenu.tag b/src/web/app/desktop/-tags/contextmenu.tag
index ee4c48fbd..cb9db4f98 100644
--- a/src/web/app/desktop/-tags/contextmenu.tag
+++ b/src/web/app/desktop/-tags/contextmenu.tag
@@ -96,7 +96,7 @@
 
 	</style>
 	<script lang="typescript">
-		import anime from 'animejs';
+		import * as anime from 'animejs';
 		import contains from '../../common/scripts/contains';
 
 		this.root.addEventListener('contextmenu', e => {
diff --git a/src/web/app/desktop/-tags/detailed-post-window.tag b/src/web/app/desktop/-tags/detailed-post-window.tag
index 57e390d50..6803aeacf 100644
--- a/src/web/app/desktop/-tags/detailed-post-window.tag
+++ b/src/web/app/desktop/-tags/detailed-post-window.tag
@@ -35,7 +35,7 @@
 
 	</style>
 	<script lang="typescript">
-		import anime from 'animejs';
+		import * as anime from 'animejs';
 
 		this.mixin('api');
 
diff --git a/src/web/app/desktop/-tags/dialog.tag b/src/web/app/desktop/-tags/dialog.tag
index ba2fa514d..9a486dca5 100644
--- a/src/web/app/desktop/-tags/dialog.tag
+++ b/src/web/app/desktop/-tags/dialog.tag
@@ -83,7 +83,7 @@
 
 	</style>
 	<script lang="typescript">
-		import anime from 'animejs';
+		import * as anime from 'animejs';
 
 		this.canThrough = opts.canThrough != null ? opts.canThrough : true;
 		this.opts.buttons.forEach(button => {
diff --git a/src/web/app/desktop/-tags/drive/file.tag b/src/web/app/desktop/-tags/drive/file.tag
index a669f5fff..153a038f4 100644
--- a/src/web/app/desktop/-tags/drive/file.tag
+++ b/src/web/app/desktop/-tags/drive/file.tag
@@ -141,7 +141,7 @@
 
 	</style>
 	<script lang="typescript">
-		import anime from 'animejs';
+		import * as anime from 'animejs';
 		import bytesToSize from '../../../common/scripts/bytes-to-size';
 
 		this.mixin('i');
diff --git a/src/web/app/desktop/-tags/home-widgets/slideshow.tag b/src/web/app/desktop/-tags/home-widgets/slideshow.tag
index 817b138d3..a69ab74b7 100644
--- a/src/web/app/desktop/-tags/home-widgets/slideshow.tag
+++ b/src/web/app/desktop/-tags/home-widgets/slideshow.tag
@@ -49,7 +49,7 @@
 
 	</style>
 	<script lang="typescript">
-		import anime from 'animejs';
+		import * as anime from 'animejs';
 
 		this.data = {
 			folder: undefined,
diff --git a/src/web/app/desktop/-tags/home-widgets/tips.tag b/src/web/app/desktop/-tags/home-widgets/tips.tag
index a352253ce..efe9c90fc 100644
--- a/src/web/app/desktop/-tags/home-widgets/tips.tag
+++ b/src/web/app/desktop/-tags/home-widgets/tips.tag
@@ -27,7 +27,7 @@
 
 	</style>
 	<script lang="typescript">
-		import anime from 'animejs';
+		import * as anime from 'animejs';
 
 		this.mixin('widget');
 
diff --git a/src/web/app/desktop/-tags/user-preview.tag b/src/web/app/desktop/-tags/user-preview.tag
index 10c37de64..18465c224 100644
--- a/src/web/app/desktop/-tags/user-preview.tag
+++ b/src/web/app/desktop/-tags/user-preview.tag
@@ -99,7 +99,7 @@
 
 	</style>
 	<script lang="typescript">
-		import anime from 'animejs';
+		import * as anime from 'animejs';
 
 		this.mixin('i');
 		this.mixin('api');
diff --git a/src/web/app/desktop/views/components/images-image-dialog.vue b/src/web/app/desktop/views/components/images-image-dialog.vue
index 7975d8061..60afa7af8 100644
--- a/src/web/app/desktop/views/components/images-image-dialog.vue
+++ b/src/web/app/desktop/views/components/images-image-dialog.vue
@@ -7,7 +7,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import anime from 'animejs';
+import * as anime from 'animejs';
 
 export default Vue.extend({
 	props: ['image'],
diff --git a/src/web/app/desktop/views/components/images-image.vue b/src/web/app/desktop/views/components/images-image.vue
index ac662449f..8cb9d5e10 100644
--- a/src/web/app/desktop/views/components/images-image.vue
+++ b/src/web/app/desktop/views/components/images-image.vue
@@ -10,6 +10,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import MkImagesImageDialog from './images-image-dialog.vue';
 
 export default Vue.extend({
 	props: ['image'],
@@ -23,7 +24,7 @@ export default Vue.extend({
 	},
 	methods: {
 		onMousemove(e) {
-			const rect = this.$refs.view.getBoundingClientRect();
+			const rect = this.$el.getBoundingClientRect();
 			const mouseX = e.clientX - rect.left;
 			const mouseY = e.clientY - rect.top;
 			const xp = mouseX / this.$el.offsetWidth * 100;
@@ -36,11 +37,12 @@ export default Vue.extend({
 			this.$el.style.backgroundPosition = '';
 		},
 
-		onClick(ev) {
-			riot.mount(document.body.appendChild(document.createElement('mk-image-dialog')), {
-				image: this.image
-			});
-			return false;
+		onClick() {
+			document.body.appendChild(new MkImagesImageDialog({
+				propsData: {
+					image: this.image
+				}
+			}).$mount().$el);
 		}
 	}
 });
diff --git a/src/web/app/desktop/views/components/images.vue b/src/web/app/desktop/views/components/images.vue
index fb2532753..f02ecbaa8 100644
--- a/src/web/app/desktop/views/components/images.vue
+++ b/src/web/app/desktop/views/components/images.vue
@@ -20,40 +20,40 @@ export default Vue.extend({
 		const tags = this.$refs.image as Vue[];
 
 		if (this.images.length == 1) {
-			this.$el.style.gridTemplateRows = '1fr';
+			(this.$el.style as any).gridTemplateRows = '1fr';
 
-			tags[0].$el.style.gridColumn = '1 / 2';
-			tags[0].$el.style.gridRow = '1 / 2';
+			(tags[0].$el.style as any).gridColumn = '1 / 2';
+			(tags[0].$el.style as any).gridRow = '1 / 2';
 		} else if (this.images.length == 2) {
-			this.$el.style.gridTemplateColumns = '1fr 1fr';
-			this.$el.style.gridTemplateRows = '1fr';
+			(this.$el.style as any).gridTemplateColumns = '1fr 1fr';
+			(this.$el.style as any).gridTemplateRows = '1fr';
 
-			tags[0].$el.style.gridColumn = '1 / 2';
-			tags[0].$el.style.gridRow = '1 / 2';
-			tags[1].$el.style.gridColumn = '2 / 3';
-			tags[1].$el.style.gridRow = '1 / 2';
+			(tags[0].$el.style as any).gridColumn = '1 / 2';
+			(tags[0].$el.style as any).gridRow = '1 / 2';
+			(tags[1].$el.style as any).gridColumn = '2 / 3';
+			(tags[1].$el.style as any).gridRow = '1 / 2';
 		} else if (this.images.length == 3) {
-			this.$el.style.gridTemplateColumns = '1fr 0.5fr';
-			this.$el.style.gridTemplateRows = '1fr 1fr';
+			(this.$el.style as any).gridTemplateColumns = '1fr 0.5fr';
+			(this.$el.style as any).gridTemplateRows = '1fr 1fr';
 
-			tags[0].$el.style.gridColumn = '1 / 2';
-			tags[0].$el.style.gridRow = '1 / 3';
-			tags[1].$el.style.gridColumn = '2 / 3';
-			tags[1].$el.style.gridRow = '1 / 2';
-			tags[2].$el.style.gridColumn = '2 / 3';
-			tags[2].$el.style.gridRow = '2 / 3';
+			(tags[0].$el.style as any).gridColumn = '1 / 2';
+			(tags[0].$el.style as any).gridRow = '1 / 3';
+			(tags[1].$el.style as any).gridColumn = '2 / 3';
+			(tags[1].$el.style as any).gridRow = '1 / 2';
+			(tags[2].$el.style as any).gridColumn = '2 / 3';
+			(tags[2].$el.style as any).gridRow = '2 / 3';
 		} else if (this.images.length == 4) {
-			this.$el.style.gridTemplateColumns = '1fr 1fr';
-			this.$el.style.gridTemplateRows = '1fr 1fr';
+			(this.$el.style as any).gridTemplateColumns = '1fr 1fr';
+			(this.$el.style as any).gridTemplateRows = '1fr 1fr';
 
-			tags[0].$el.style.gridColumn = '1 / 2';
-			tags[0].$el.style.gridRow = '1 / 2';
-			tags[1].$el.style.gridColumn = '2 / 3';
-			tags[1].$el.style.gridRow = '1 / 2';
-			tags[2].$el.style.gridColumn = '1 / 2';
-			tags[2].$el.style.gridRow = '2 / 3';
-			tags[3].$el.style.gridColumn = '2 / 3';
-			tags[3].$el.style.gridRow = '2 / 3';
+			(tags[0].$el.style as any).gridColumn = '1 / 2';
+			(tags[0].$el.style as any).gridRow = '1 / 2';
+			(tags[1].$el.style as any).gridColumn = '2 / 3';
+			(tags[1].$el.style as any).gridRow = '1 / 2';
+			(tags[2].$el.style as any).gridColumn = '1 / 2';
+			(tags[2].$el.style as any).gridRow = '2 / 3';
+			(tags[3].$el.style as any).gridColumn = '2 / 3';
+			(tags[3].$el.style as any).gridRow = '2 / 3';
 		}
 	}
 });
diff --git a/src/web/app/desktop/views/components/index.ts b/src/web/app/desktop/views/components/index.ts
index a52953744..f212338e1 100644
--- a/src/web/app/desktop/views/components/index.ts
+++ b/src/web/app/desktop/views/components/index.ts
@@ -20,6 +20,9 @@ import postFormWindow from './post-form-window.vue';
 import repostFormWindow from './repost-form-window.vue';
 import analogClock from './analog-clock.vue';
 import ellipsisIcon from './ellipsis-icon.vue';
+import images from './images.vue';
+import imagesImage from './images-image.vue';
+import imagesImageDialog from './images-image-dialog.vue';
 
 Vue.component('mk-ui', ui);
 Vue.component('mk-ui-header', uiHeader);
@@ -41,3 +44,6 @@ Vue.component('mk-post-form-window', postFormWindow);
 Vue.component('mk-repost-form-window', repostFormWindow);
 Vue.component('mk-analog-clock', analogClock);
 Vue.component('mk-ellipsis-icon', ellipsisIcon);
+Vue.component('mk-images', images);
+Vue.component('mk-images-image', imagesImage);
+Vue.component('mk-images-image-dialog', imagesImageDialog);
diff --git a/src/web/app/desktop/views/components/posts.vue b/src/web/app/desktop/views/components/posts.vue
index b685bff6a..880ee5224 100644
--- a/src/web/app/desktop/views/components/posts.vue
+++ b/src/web/app/desktop/views/components/posts.vue
@@ -2,7 +2,7 @@
 <div class="mk-posts">
 	<template v-for="(post, i) in _posts">
 		<mk-posts-post :post.sync="post" :key="post.id"/>
-		<p class="date" :key="post.id + '-time'" v-if="i != _posts.length - 1 && _post._date != _posts[i + 1]._date"><span>%fa:angle-up%{{ post._datetext }}</span><span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span></p>
+		<p class="date" :key="post.id + '-time'" v-if="i != _posts.length - 1 && post._date != _posts[i + 1]._date"><span>%fa:angle-up%{{ post._datetext }}</span><span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span></p>
 	</template>
 	<footer>
 		<slot name="footer"></slot>
diff --git a/src/web/app/desktop/views/components/ui-notification.vue b/src/web/app/desktop/views/components/ui-notification.vue
index 6ca0cebfa..6f7b46cb7 100644
--- a/src/web/app/desktop/views/components/ui-notification.vue
+++ b/src/web/app/desktop/views/components/ui-notification.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import anime from 'animejs';
+import * as anime from 'animejs';
 
 export default Vue.extend({
 	props: ['message'],
diff --git a/src/web/app/desktop/views/components/window.vue b/src/web/app/desktop/views/components/window.vue
index 986b151c4..61a433b36 100644
--- a/src/web/app/desktop/views/components/window.vue
+++ b/src/web/app/desktop/views/components/window.vue
@@ -26,7 +26,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import anime from 'animejs';
+import * as anime from 'animejs';
 import contains from '../../../common/scripts/contains';
 
 const minHeight = 40;
diff --git a/src/web/app/mobile/tags/notify.tag b/src/web/app/mobile/tags/notify.tag
index 59d1e9dd8..ec3609497 100644
--- a/src/web/app/mobile/tags/notify.tag
+++ b/src/web/app/mobile/tags/notify.tag
@@ -16,7 +16,7 @@
 
 	</style>
 	<script lang="typescript">
-		import anime from 'animejs';
+		import * as anime from 'animejs';
 
 		this.on('mount', () => {
 			anime({