From 3261d54cd34468f3ddbf555fd79b199ba90b131f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 8 Nov 2018 02:09:15 +0900
Subject: Resolve #2320

---
 .../app/common/views/components/image-viewer.vue   | 69 ++++++++++++++++++++++
 src/client/app/desktop/views/components/index.ts   |  2 -
 .../views/components/media-image-dialog.vue        | 69 ----------------------
 .../app/desktop/views/components/media-image.vue   |  4 +-
 .../app/mobile/views/components/media-image.vue    | 10 +++-
 5 files changed, 80 insertions(+), 74 deletions(-)
 create mode 100644 src/client/app/common/views/components/image-viewer.vue
 delete mode 100644 src/client/app/desktop/views/components/media-image-dialog.vue

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/image-viewer.vue b/src/client/app/common/views/components/image-viewer.vue
new file mode 100644
index 0000000000..b86a110337
--- /dev/null
+++ b/src/client/app/common/views/components/image-viewer.vue
@@ -0,0 +1,69 @@
+<template>
+<div class="dkjvrdxtkvqrwmhfickhndpmnncsgacq">
+	<div class="bg" @click="close"></div>
+	<img :src="image.url" :alt="image.name" :title="image.name" @click="close"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+
+export default Vue.extend({
+	props: ['image'],
+	mounted() {
+		anime({
+			targets: this.$el,
+			opacity: 1,
+			duration: 100,
+			easing: 'linear'
+		});
+	},
+	methods: {
+		close() {
+			anime({
+				targets: this.$el,
+				opacity: 0,
+				duration: 100,
+				easing: 'linear',
+				complete: () => this.destroyDom()
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.dkjvrdxtkvqrwmhfickhndpmnncsgacq
+	display block
+	position fixed
+	z-index 2048
+	top 0
+	left 0
+	width 100%
+	height 100%
+	opacity 0
+
+	> .bg
+		display block
+		position fixed
+		z-index 1
+		top 0
+		left 0
+		width 100%
+		height 100%
+		background rgba(#000, 0.7)
+
+	> img
+		position fixed
+		z-index 2
+		top 0
+		right 0
+		bottom 0
+		left 0
+		max-width 100%
+		max-height 100%
+		margin auto
+		cursor zoom-out
+
+</style>
diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts
index 38b1547448..ff4e845f62 100644
--- a/src/client/app/desktop/views/components/index.ts
+++ b/src/client/app/desktop/views/components/index.ts
@@ -10,7 +10,6 @@ import window from './window.vue';
 import noteFormWindow from './post-form-window.vue';
 import renoteFormWindow from './renote-form-window.vue';
 import mediaImage from './media-image.vue';
-import mediaImageDialog from './media-image-dialog.vue';
 import mediaVideo from './media-video.vue';
 import notifications from './notifications.vue';
 import noteForm from './post-form.vue';
@@ -39,7 +38,6 @@ Vue.component('mk-window', window);
 Vue.component('mk-post-form-window', noteFormWindow);
 Vue.component('mk-renote-form-window', renoteFormWindow);
 Vue.component('mk-media-image', mediaImage);
-Vue.component('mk-media-image-dialog', mediaImageDialog);
 Vue.component('mk-media-video', mediaVideo);
 Vue.component('mk-notifications', notifications);
 Vue.component('mk-post-form', noteForm);
diff --git a/src/client/app/desktop/views/components/media-image-dialog.vue b/src/client/app/desktop/views/components/media-image-dialog.vue
deleted file mode 100644
index 89a340d3ae..0000000000
--- a/src/client/app/desktop/views/components/media-image-dialog.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-<div class="mk-media-image-dialog">
-	<div class="bg" @click="close"></div>
-	<img :src="image.url" :alt="image.name" :title="image.name" @click="close"/>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import * as anime from 'animejs';
-
-export default Vue.extend({
-	props: ['image'],
-	mounted() {
-		anime({
-			targets: this.$el,
-			opacity: 1,
-			duration: 100,
-			easing: 'linear'
-		});
-	},
-	methods: {
-		close() {
-			anime({
-				targets: this.$el,
-				opacity: 0,
-				duration: 100,
-				easing: 'linear',
-				complete: () => this.destroyDom()
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-media-image-dialog
-	display block
-	position fixed
-	z-index 2048
-	top 0
-	left 0
-	width 100%
-	height 100%
-	opacity 0
-
-	> .bg
-		display block
-		position fixed
-		z-index 1
-		top 0
-		left 0
-		width 100%
-		height 100%
-		background rgba(#000, 0.7)
-
-	> img
-		position fixed
-		z-index 2
-		top 0
-		right 0
-		bottom 0
-		left 0
-		max-width 100%
-		max-height 100%
-		margin auto
-		cursor zoom-out
-
-</style>
diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
index 9e1a293336..510fdbc4ee 100644
--- a/src/client/app/desktop/views/components/media-image.vue
+++ b/src/client/app/desktop/views/components/media-image.vue
@@ -17,7 +17,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import MkMediaImageDialog from './media-image-dialog.vue';
+import ImageViewer from '../../../common/views/components/image-viewer.vue';
 
 export default Vue.extend({
 	props: {
@@ -58,7 +58,7 @@ export default Vue.extend({
 		},
 
 		onClick() {
-			(this as any).os.new(MkMediaImageDialog, {
+			(this as any).os.new(ImageViewer, {
 				image: this.image
 			});
 		}
diff --git a/src/client/app/mobile/views/components/media-image.vue b/src/client/app/mobile/views/components/media-image.vue
index 5da888984c..c555d6a611 100644
--- a/src/client/app/mobile/views/components/media-image.vue
+++ b/src/client/app/mobile/views/components/media-image.vue
@@ -5,11 +5,12 @@
 		<span>%i18n:@click-to-show%</span>
 	</div>
 </div>
-<a class="gqnyydlzavusgskkfvwvjiattxdzsqlf" v-else :href="image.url" target="_blank" :style="style" :title="image.name"></a>
+<a class="gqnyydlzavusgskkfvwvjiattxdzsqlf" v-else :href="image.url" target="_blank" :style="style" :title="image.name" @click.prevent="onClick"></a>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import ImageViewer from '../../../common/views/components/image-viewer.vue';
 
 export default Vue.extend({
 	props: {
@@ -41,6 +42,13 @@ export default Vue.extend({
 				'background-image': url
 			};
 		}
+	},
+	methods: {
+		onClick() {
+			(this as any).os.new(ImageViewer, {
+				image: this.image
+			});
+		}
 	}
 });
 </script>
-- 
cgit v1.2.3-freya