summaryrefslogtreecommitdiff
path: root/src/web/app/desktop/views/components/widgets/slideshow.vue
diff options
context:
space:
mode:
authorsyuilo <syuilotan@yahoo.co.jp>2018-02-24 02:46:09 +0900
committersyuilo <syuilotan@yahoo.co.jp>2018-02-24 02:46:09 +0900
commitdf8a2aea358ca3bcec60c878a6399df46390e3e1 (patch)
tree2e187e34a53d9372a797fb9d5882069545f1f03f /src/web/app/desktop/views/components/widgets/slideshow.vue
parentv3840 (diff)
downloadmisskey-df8a2aea358ca3bcec60c878a6399df46390e3e1.tar.gz
misskey-df8a2aea358ca3bcec60c878a6399df46390e3e1.tar.bz2
misskey-df8a2aea358ca3bcec60c878a6399df46390e3e1.zip
Implement #1098
Diffstat (limited to 'src/web/app/desktop/views/components/widgets/slideshow.vue')
-rw-r--r--src/web/app/desktop/views/components/widgets/slideshow.vue153
1 files changed, 0 insertions, 153 deletions
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>