misskey-awawa/src/web/app/common/views/widgets/slideshow.vue

154 lines
2.8 KiB
Vue
Raw Normal View History

2018-02-15 03:36:42 +00:00
<template>
<div class="mkw-slideshow">
<div @click="choose">
2018-02-21 16:08:49 +00:00
<p v-if="props.folder === undefined">クリックしてフォルダを指定してください</p>
<p v-if="props.folder !== undefined && images.length == 0 && !fetching">このフォルダには画像がありません</p>
2018-02-15 03:36:42 +00:00
<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';
2018-02-24 15:18:09 +00:00
import define from '../../../common/define-widget';
2018-02-15 03:36:42 +00:00
export default define({
name: 'slideshow',
2018-02-21 06:30:03 +00:00
props: () => ({
2018-02-15 03:36:42 +00:00
folder: undefined,
size: 0
2018-02-21 06:30:03 +00:00
})
2018-02-15 03:36:42 +00:00
}).extend({
data() {
return {
images: [],
fetching: true,
clock: null
};
},
mounted() {
2018-02-18 09:40:24 +00:00
this.$nextTick(() => {
2018-02-15 03:36:42 +00:00
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;
2018-02-18 03:35:18 +00:00
(this as any).api('drive/files', {
2018-02-15 03:36:42 +00:00
folder_id: this.props.folder,
type: 'image/*',
limit: 100
}).then(images => {
this.images = images;
2018-02-19 14:37:09 +00:00
this.fetching = false;
2018-02-15 03:36:42 +00:00
(this.$refs.slideA as any).style.backgroundImage = '';
(this.$refs.slideB as any).style.backgroundImage = '';
this.change();
});
},
choose() {
2018-02-18 03:35:18 +00:00
(this as any).apis.chooseDriveFolder().then(folder => {
2018-02-15 03:36:42 +00:00
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>