This commit is contained in:
syuilo 2017-11-09 02:56:02 +09:00
parent 860a322c36
commit d4f7617b3b
5 changed files with 283 additions and 0 deletions

View file

@ -2,6 +2,10 @@ ChangeLog (Release Notes)
========================= =========================
主に notable な changes を書いていきます 主に notable な changes を書いていきます
unreleased
----------
* スライドショーウィジェットを追加
2974 (2017/11/08) 2974 (2017/11/08)
----------------- -----------------
* ホームのカスタマイズを実装するなど * ホームのカスタマイズを実装するなど

View file

@ -0,0 +1,164 @@
<mk-slideshow-home-widget>
<div onclick={ choose }>
<p if={ folder === undefined }>クリックしてフォルダを指定してください</p>
<p if={ folder !== undefined && images.length == 0 }>このフォルダには画像がありません</p>
<div ref="slideA" class="slide a"></div>
<div ref="slideB" class="slide b"></div>
</div>
<button onclick={ resize }><i class="fa fa-expand"></i></button>
<style>
:scope
display block
overflow hidden
background #fff
&: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>
<script>
import anime from 'animejs';
this.mixin('i');
this.mixin('api');
this.size = this.opts.data.hasOwnProperty('size') ? this.opts.data.size : 0;
this.folder = this.opts.data.hasOwnProperty('folder') ? this.opts.data.folder : undefined;
this.images = [];
this.fetching = false;
this.on('mount', () => {
this.applySize();
if (this.folder !== undefined) {
this.fetch();
}
this.clock = setInterval(this.change, 10000);
});
this.on('unmount', () => {
clearInterval(this.clock);
});
this.applySize = () => {
let h;
if (this.size == 1) {
h = 250;
} else {
h = 170;
}
this.root.style.height = `${h}px`;
};
this.resize = () => {
this.size++;
if (this.size == 2) this.size = 0;
this.applySize();
// Save state
this.I.client_settings.home.filter(w => w.id == this.opts.id)[0].data.size = this.size;
this.api('i/update_home', {
home: this.I.client_settings.home
}).then(() => {
this.I.update();
});
};
this.change = () => {
if (this.images.length == 0) return;
if (this.index >= this.images.length) this.index = 0;
const img = `url(${ this.images[this.index].url }?thumbnail&size=1024)`;
this.refs.slideB.style.backgroundImage = img;
this.index++;
anime({
targets: this.refs.slideB,
opacity: 1,
duration: 1000,
easing: 'linear',
complete: () => {
this.refs.slideA.style.backgroundImage = img;
anime({
targets: this.refs.slideB,
opacity: 0,
duration: 0
});
}
});
};
this.fetch = () => {
this.update({
fetching: true
});
this.api('drive/files', {
folder_id: this.folder,
type: 'image/*',
limit: 100
}).then(images => {
this.update({
fetching: false,
images: images,
index: 0
});
this.refs.slideA.style.backgroundImage = '';
this.refs.slideB.style.backgroundImage = '';
this.change();
});
};
this.choose = () => {
const i = riot.mount(document.body.appendChild(document.createElement('mk-select-folder-from-drive-window')))[0];
i.one('selected', folder => {
this.folder = folder ? folder.id : null;
this.fetch();
// Save state
this.I.client_settings.home.filter(w => w.id == this.opts.id)[0].data.folder = this.folder;
this.api('i/update_home', {
home: this.I.client_settings.home
}).then(() => {
this.I.update();
});
});
};
</script>
</mk-slideshow-home-widget>

View file

@ -9,6 +9,7 @@
<option value="rss-reader">RSSリーダー</option> <option value="rss-reader">RSSリーダー</option>
<option value="trends">トレンド</option> <option value="trends">トレンド</option>
<option value="photo-stream">フォトストリーム</option> <option value="photo-stream">フォトストリーム</option>
<option value="slideshow">スライドショー</option>
<option value="version">バージョン</option> <option value="version">バージョン</option>
<option value="broadcast">ブロードキャスト</option> <option value="broadcast">ブロードキャスト</option>
<option value="notifications">通知</option> <option value="notifications">通知</option>

View file

@ -12,6 +12,7 @@ require('./drive/nav-folder.tag');
require('./drive/browser-window.tag'); require('./drive/browser-window.tag');
require('./drive/browser.tag'); require('./drive/browser.tag');
require('./select-file-from-drive-window.tag'); require('./select-file-from-drive-window.tag');
require('./select-folder-from-drive-window.tag');
require('./crop-window.tag'); require('./crop-window.tag');
require('./settings.tag'); require('./settings.tag');
require('./settings-window.tag'); require('./settings-window.tag');
@ -38,6 +39,7 @@ require('./home-widgets/recommended-polls.tag');
require('./home-widgets/trends.tag'); require('./home-widgets/trends.tag');
require('./home-widgets/activity.tag'); require('./home-widgets/activity.tag');
require('./home-widgets/server.tag'); require('./home-widgets/server.tag');
require('./home-widgets/slideshow.tag');
require('./timeline.tag'); require('./timeline.tag');
require('./messaging/window.tag'); require('./messaging/window.tag');
require('./messaging/room-window.tag'); require('./messaging/room-window.tag');

View file

@ -0,0 +1,112 @@
<mk-select-folder-from-drive-window>
<mk-window ref="window" is-modal={ true } width={ '800px' } height={ '500px' }>
<yield to="header">
<mk-raw content={ parent.title }/>
</yield>
<yield to="content">
<mk-drive-browser ref="browser"/>
<div>
<button class="cancel" onclick={ parent.close }>キャンセル</button>
<button class="ok" onclick={ parent.ok }>決定</button>
</div>
</yield>
</mk-window>
<style>
:scope
> mk-window
[data-yield='header']
> mk-raw
> i
margin-right 4px
[data-yield='content']
> mk-drive-browser
height calc(100% - 72px)
> div
height 72px
background lighten($theme-color, 95%)
.ok
.cancel
display block
position absolute
bottom 16px
cursor pointer
padding 0
margin 0
width 120px
height 40px
font-size 1em
outline none
border-radius 4px
&:focus
&:after
content ""
pointer-events none
position absolute
top -5px
right -5px
bottom -5px
left -5px
border 2px solid rgba($theme-color, 0.3)
border-radius 8px
&:disabled
opacity 0.7
cursor default
.ok
right 16px
color $theme-color-foreground
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
border solid 1px lighten($theme-color, 15%)
&:not(:disabled)
font-weight bold
&:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
border-color $theme-color
&:active:not(:disabled)
background $theme-color
border-color $theme-color
.cancel
right 148px
color #888
background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
border solid 1px #e2e2e2
&:hover
background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
border-color #dcdcdc
&:active
background #ececec
border-color #dcdcdc
</style>
<script>
this.files = [];
this.title = this.opts.title || '<i class="fa fa-folder-o"></i>フォルダを選択';
this.on('mount', () => {
this.refs.window.on('closed', () => {
this.unmount();
});
});
this.close = () => {
this.refs.window.close();
};
this.ok = () => {
this.trigger('selected', this.refs.window.refs.browser.folder);
this.refs.window.close();
};
</script>
</mk-select-folder-from-drive-window>