From df8a2aea358ca3bcec60c878a6399df46390e3e1 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 24 Feb 2018 02:46:09 +0900
Subject: Implement #1098

---
 .../desktop/views/components/widgets/slideshow.vue | 153 ---------------------
 1 file changed, 153 deletions(-)
 delete mode 100644 src/web/app/desktop/views/components/widgets/slideshow.vue

(limited to 'src/web/app/desktop/views/components/widgets/slideshow.vue')

diff --git a/src/web/app/desktop/views/components/widgets/slideshow.vue b/src/web/app/desktop/views/components/widgets/slideshow.vue
deleted file mode 100644
index c2f4eb70d3..0000000000
--- a/src/web/app/desktop/views/components/widgets/slideshow.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-<div class="mkw-slideshow">
-	<div @click="choose">
-		<p v-if="props.folder === undefined">クリックしてフォルダを指定してください</p>
-		<p v-if="props.folder !== undefined && images.length == 0 && !fetching">このフォルダには画像がありません</p>
-		<div ref="slideA" class="slide a"></div>
-		<div ref="slideB" class="slide b"></div>
-	</div>
-	<button @click="resize">%fa:expand%</button>
-</div>
-</template>
-
-<script lang="ts">
-import * as anime from 'animejs';
-import define from '../../../../common/define-widget';
-export default define({
-	name: 'slideshow',
-	props: () => ({
-		folder: undefined,
-		size: 0
-	})
-}).extend({
-	data() {
-		return {
-			images: [],
-			fetching: true,
-			clock: null
-		};
-	},
-	mounted() {
-		this.$nextTick(() => {
-			this.applySize();
-		});
-
-		if (this.props.folder !== undefined) {
-			this.fetch();
-		}
-
-		this.clock = setInterval(this.change, 10000);
-	},
-	beforeDestroy() {
-		clearInterval(this.clock);
-	},
-	methods: {
-		applySize() {
-			let h;
-
-			if (this.props.size == 1) {
-				h = 250;
-			} else {
-				h = 170;
-			}
-
-			this.$el.style.height = `${h}px`;
-		},
-		resize() {
-			if (this.props.size == 1) {
-				this.props.size = 0;
-			} else {
-				this.props.size++;
-			}
-
-			this.applySize();
-		},
-		change() {
-			if (this.images.length == 0) return;
-
-			const index = Math.floor(Math.random() * this.images.length);
-			const img = `url(${ this.images[index].url }?thumbnail&size=1024)`;
-
-			(this.$refs.slideB as any).style.backgroundImage = img;
-
-			anime({
-				targets: this.$refs.slideB,
-				opacity: 1,
-				duration: 1000,
-				easing: 'linear',
-				complete: () => {
-					(this.$refs.slideA as any).style.backgroundImage = img;
-					anime({
-						targets: this.$refs.slideB,
-						opacity: 0,
-						duration: 0
-					});
-				}
-			});
-		},
-		fetch() {
-			this.fetching = true;
-
-			(this as any).api('drive/files', {
-				folder_id: this.props.folder,
-				type: 'image/*',
-				limit: 100
-			}).then(images => {
-				this.images = images;
-				this.fetching = false;
-				(this.$refs.slideA as any).style.backgroundImage = '';
-				(this.$refs.slideB as any).style.backgroundImage = '';
-				this.change();
-			});
-		},
-		choose() {
-			(this as any).apis.chooseDriveFolder().then(folder => {
-				this.props.folder = folder ? folder.id : null;
-				this.fetch();
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mkw-slideshow
-	overflow hidden
-	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
-	border-radius 6px
-
-	&: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>
-- 
cgit v1.2.3-freya