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 を書いていきます
|
主に notable な changes を書いていきます
|
||||||
|
|
||||||
|
unreleased
|
||||||
|
----------
|
||||||
|
* スライドショーウィジェットを追加
|
||||||
|
|
||||||
2974 (2017/11/08)
|
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="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>
|
||||||
|
|
|
||||||
|
|
@ -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');
|
||||||
|
|
|
||||||
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