整理した

2018-03-29 20:32:18 +09:00
parent 8a279a4656
commit cf33e483f7
552 changed files with 360 additions and 1311 deletions
--- a/src/client/app/common/views/widgets/slideshow.vue
+++ b/src/client/app/common/views/widgets/slideshow.vue
@ -0,0 +1,159 @@
+<template>
+<div class="mkw-slideshow" :data-mobile="isMobile">
+	<div @click="choose">
+		<p v-if="props.folder === undefined">
+			<template v-if="isCustomizeMode">フォルダを指定するには、カスタマイズモードを終了してください</template>
+			<template v-else>クリックしてフォルダを指定してください</template>
+		</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>
+</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: {
+		func() {
+			this.resize();
+		},
+		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: () => {
+					// 既にこのウィジェットがunmountされていたら要素がない
+					if ((this.$refs.slideA as any) == null) return;
+
+					(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', {
+				folderId: 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
+
+	&[data-mobile]
+		border none
+		border-radius 8px
+		box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+
+	> div
+		width 100%
+		height 100%
+		cursor pointer
+
+		> p
+			display block
+			margin 1em
+			text-align center
+			color #888
+
+		> *
+			pointer-events none
+
+		> .slide
+			position absolute
+			top 0
+			left 0
+			width 100%
+			height 100%
+			background-size cover
+			background-position center
+
+			&.b
+				opacity 0
+
+</style>