This commit is contained in:
syuilo 2017-11-11 14:27:39 +09:00
parent 3e62884f72
commit 7d390b4fa5
3 changed files with 94 additions and 18 deletions

View File

@ -378,6 +378,12 @@ desktop:
title: "Channel" title: "Channel"
settings: "Widget settings" settings: "Widget settings"
mk-timemachine-home-widget:
title: "{1} / {2}"
prev: "Previous month"
next: "Next month"
go: "Click to travel"
mk-repost-form: mk-repost-form:
quote: "Quote..." quote: "Quote..."
cancel: "Cancel" cancel: "Cancel"

View File

@ -378,6 +378,12 @@ desktop:
title: "チャンネル" title: "チャンネル"
settings: "ウィジェットの設定" settings: "ウィジェットの設定"
mk-timemachine-home-widget:
title: "{1}月 {2}日"
prev: "先月"
next: "来月"
go: "クリックして時間遡行"
mk-repost-form: mk-repost-form:
quote: "引用する..." quote: "引用する..."
cancel: "キャンセル" cancel: "キャンセル"

View File

@ -1,12 +1,20 @@
<mk-timemachine-home-widget> <mk-timemachine-home-widget>
<button onclick={ prev }><i class="fa fa-chevron-circle-left"></i></button> <button onclick={ prev } title="%i18n:desktop.tags.mk-timemachine-home-widget.prev%"><i class="fa fa-chevron-circle-left"></i></button>
<p class="title">{ year }/{ month }</p> <p class="title">{ '%i18n:desktop.tags.mk-timemachine-home-widget.title%'.replace('{1}', year).replace('{2}', month) }</p>
<button onclick={ next }><i class="fa fa-chevron-circle-right"></i></button> <button onclick={ next } title="%i18n:desktop.tags.mk-timemachine-home-widget.next%"><i class="fa fa-chevron-circle-right"></i></button>
<div class="calendar"> <div class="calendar">
<div class="weekday" each={ day, i in Array(7).fill(0) }>{ weekdayText[i] }</div> <div class="weekday" each={ day, i in Array(7).fill(0) }
data-today={ year == today.getFullYear() && month == today.getMonth() + 1 && today.getDay() == i }
data-is-donichi={ i == 0 || i == 6 }>{ weekdayText[i] }</div>
<div each={ day, i in Array(paddingDays).fill(0) }></div> <div each={ day, i in Array(paddingDays).fill(0) }></div>
<div class="day" each={ day, i in Array(days).fill(0) } data-today={ isToday(i + 1) } onclick={ go.bind(null, i + 1) }>{ i + 1 }</div> <div class="day" each={ day, i in Array(days).fill(0) }
data-today={ isToday(i + 1) }
data-selected={ isSelected(i + 1) }
data-is-future={ isFuture(i + 1) }
data-is-donichi={ isDonichi(i + 1) }
onclick={ go.bind(null, i + 1) }
title={ isFuture(i + 1) ? null : '%i18n:desktop.tags.mk-timemachine-home-widget.go%' }><div>{ i + 1 }</div></div>
</div> </div>
<style> <style>
:scope :scope
@ -55,6 +63,9 @@
flex-wrap wrap flex-wrap wrap
padding 16px padding 16px
*
user-select none
> div > div
width calc(100% * (1/7)) width calc(100% * (1/7))
text-align center text-align center
@ -64,23 +75,57 @@
&.weekday &.weekday
color #19a2a9 color #19a2a9
&[data-is-donichi]
color #ef95a0
&[data-today]
box-shadow 0 0 0 1px #19a2a9 inset
border-radius 6px
&[data-is-donichi]
box-shadow 0 0 0 1px #ef95a0 inset
&.day &.day
cursor pointer cursor pointer
color #777
&:hover > div
border-radius 6px
&:hover > div
background rgba(0, 0, 0, 0.025) background rgba(0, 0, 0, 0.025)
&:active &:active > div
background rgba(0, 0, 0, 0.05)
&[data-is-donichi]
color #ef95a0
&[data-is-future]
cursor default
color rgba(#777, 0.5)
&[data-is-donichi]
color rgba(#ef95a0, 0.5)
&[data-selected]
font-weight bold
> div
background rgba(0, 0, 0, 0.025)
&:active > div
background rgba(0, 0, 0, 0.05) background rgba(0, 0, 0, 0.05)
&[data-today] &[data-today]
> div
color $theme-color-foreground color $theme-color-foreground
background $theme-color background $theme-color
&:hover &:hover > div
background lighten($theme-color, 10%) background lighten($theme-color, 10%)
&:active &:active > div
background darken($theme-color, 10%) background darken($theme-color, 10%)
</style> </style>
@ -97,6 +142,7 @@
this.today = new Date(); this.today = new Date();
this.year = this.today.getFullYear(); this.year = this.today.getFullYear();
this.month = this.today.getMonth() + 1; this.month = this.today.getMonth() + 1;
this.selected = this.today;
this.weekdayText = [ this.weekdayText = [
'%i18n:common.weekday-short.sunday%', '%i18n:common.weekday-short.sunday%',
'%i18n:common.weekday-short.monday%', '%i18n:common.weekday-short.monday%',
@ -115,6 +161,19 @@
return this.year == this.today.getFullYear() && this.month == this.today.getMonth() + 1 && day == this.today.getDate(); return this.year == this.today.getFullYear() && this.month == this.today.getMonth() + 1 && day == this.today.getDate();
}; };
this.isSelected = day => {
return this.year == this.selected.getFullYear() && this.month == this.selected.getMonth() + 1 && day == this.selected.getDate();
};
this.isFuture = day => {
return (new Date(this.year, this.month - 1, day)).getTime() > this.today.getTime();
};
this.isDonichi = day => {
const weekday = (new Date(this.year, this.month - 1, day)).getDay();
return weekday == 0 || weekday == 6;
};
this.calc = () => { this.calc = () => {
let days = eachMonthDays[this.month - 1]; let days = eachMonthDays[this.month - 1];
@ -159,7 +218,12 @@
}; };
this.go = day => { this.go = day => {
this.opts.tl.warp(new Date(this.year, this.month - 1, day, 23, 59, 59, 999)); if (this.isFuture(day)) return;
const date = new Date(this.year, this.month - 1, day, 23, 59, 59, 999);
this.update({
selected: date
});
this.opts.tl.warp(date);
}; };
</script> </script>
</mk-timemachine-home-widget> </mk-timemachine-home-widget>