Implement #888
This commit is contained in:
syuilo
parent
860a322c36
commit
d4f7617b3b
5 changed files with 283 additions and 0 deletions
|
|
@ -2,6 +2,10 @@ ChangeLog (Release Notes)
|
|||
=========================
|
||||
主に notable な changes を書いていきます
|
||||
|
||||
unreleased
|
||||
----------
|
||||
* スライドショーウィジェットを追加
|
||||
|
||||
2974 (2017/11/08)
|
||||
-----------------
|
||||
* ホームのカスタマイズを実装するなど
|
||||
|
|
|
|||
164
src/web/app/desktop/tags/home-widgets/slideshow.tag
Normal file
164
src/web/app/desktop/tags/home-widgets/slideshow.tag
Normal 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>
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
<option value="rss-reader">RSSリーダー</option>
|
||||
<option value="trends">トレンド</option>
|
||||
<option value="photo-stream">フォトストリーム</option>
|
||||
<option value="slideshow">スライドショー</option>
|
||||
<option value="version">バージョン</option>
|
||||
<option value="broadcast">ブロードキャスト</option>
|
||||
<option value="notifications">通知</option>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ require('./drive/nav-folder.tag');
|
|||
require('./drive/browser-window.tag');
|
||||
require('./drive/browser.tag');
|
||||
require('./select-file-from-drive-window.tag');
|
||||
require('./select-folder-from-drive-window.tag');
|
||||
require('./crop-window.tag');
|
||||
require('./settings.tag');
|
||||
require('./settings-window.tag');
|
||||
|
|
@ -38,6 +39,7 @@ require('./home-widgets/recommended-polls.tag');
|
|||
require('./home-widgets/trends.tag');
|
||||
require('./home-widgets/activity.tag');
|
||||
require('./home-widgets/server.tag');
|
||||
require('./home-widgets/slideshow.tag');
|
||||
require('./timeline.tag');
|
||||
require('./messaging/window.tag');
|
||||
require('./messaging/room-window.tag');
|
||||
|
|
|
|||
112
src/web/app/desktop/tags/select-folder-from-drive-window.tag
Normal file
112
src/web/app/desktop/tags/select-folder-from-drive-window.tag
Normal 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>
|
||||
Loading…
Reference in a new issue