mirror of
https://github.com/hotomoe/hotomoe
synced 2024-11-25 15:46:17 +09:00
やった
This commit is contained in:
syuilo
parent
107ecfb07f
commit
1a72e8b95c
@ -347,7 +347,7 @@ desktop:
|
|||||||
title: "Server info"
|
title: "Server info"
|
||||||
toggle: "Toggle views"
|
toggle: "Toggle views"
|
||||||
|
|
||||||
mk-activity-home-widget:
|
mk-activity-widget:
|
||||||
title: "Activity"
|
title: "Activity"
|
||||||
toggle: "Toggle views"
|
toggle: "Toggle views"
|
||||||
|
|
||||||
@ -379,7 +379,7 @@ desktop:
|
|||||||
settings: "Widget settings"
|
settings: "Widget settings"
|
||||||
get-started: "Please click the cog in the upper right to specify the channel to receive"
|
get-started: "Please click the cog in the upper right to specify the channel to receive"
|
||||||
|
|
||||||
mk-timemachine-home-widget:
|
mk-calendar-widget:
|
||||||
title: "{1} / {2}"
|
title: "{1} / {2}"
|
||||||
prev: "Previous month"
|
prev: "Previous month"
|
||||||
next: "Next month"
|
next: "Next month"
|
||||||
|
|||||||
@ -347,7 +347,7 @@ desktop:
|
|||||||
title: "サーバー情報"
|
title: "サーバー情報"
|
||||||
toggle: "表示を切り替え"
|
toggle: "表示を切り替え"
|
||||||
|
|
||||||
mk-activity-home-widget:
|
mk-activity-widget:
|
||||||
title: "アクティビティ"
|
title: "アクティビティ"
|
||||||
toggle: "表示を切り替え"
|
toggle: "表示を切り替え"
|
||||||
|
|
||||||
@ -379,7 +379,7 @@ desktop:
|
|||||||
settings: "ウィジェットの設定"
|
settings: "ウィジェットの設定"
|
||||||
get-started: "右上の歯車をクリックして受信するチャンネルを指定してください"
|
get-started: "右上の歯車をクリックして受信するチャンネルを指定してください"
|
||||||
|
|
||||||
mk-timemachine-home-widget:
|
mk-calendar-widget:
|
||||||
title: "{1}年 {2}月"
|
title: "{1}年 {2}月"
|
||||||
prev: "先月"
|
prev: "先月"
|
||||||
next: "来月"
|
next: "来月"
|
||||||
|
|||||||
@ -1,59 +1,10 @@
|
|||||||
<mk-activity-home-widget data-melt={ data.design == 2 }>
|
<mk-activity-home-widget>
|
||||||
<virtual if={ data.design == 0 }>
|
<mk-activity-widget design={ data.design } view={ data.view } user={ I } ref="activity"/>
|
||||||
<p class="title"><i class="fa fa-bar-chart"></i>%i18n:desktop.tags.mk-activity-home-widget.title%</p>
|
|
||||||
<button onclick={ toggle } title="%i18n:desktop.tags.mk-activity-home-widget.toggle%"><i class="fa fa-sort"></i></button>
|
|
||||||
</virtual>
|
|
||||||
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
|
|
||||||
<mk-activity-home-widget-calender if={ !initializing && data.view == 0 } data={ [].concat(activity) }/>
|
|
||||||
<mk-activity-home-widget-chart if={ !initializing && data.view == 1 } data={ [].concat(activity) }/>
|
|
||||||
<style>
|
<style>
|
||||||
:scope
|
:scope
|
||||||
display block
|
display block
|
||||||
background #fff
|
background transparent !important
|
||||||
|
border none !important
|
||||||
&[data-melt]
|
|
||||||
background transparent !important
|
|
||||||
border none !important
|
|
||||||
|
|
||||||
> .title
|
|
||||||
z-index 1
|
|
||||||
margin 0
|
|
||||||
padding 0 16px
|
|
||||||
line-height 42px
|
|
||||||
font-size 0.9em
|
|
||||||
font-weight bold
|
|
||||||
color #888
|
|
||||||
box-shadow 0 1px rgba(0, 0, 0, 0.07)
|
|
||||||
|
|
||||||
> i
|
|
||||||
margin-right 4px
|
|
||||||
|
|
||||||
> button
|
|
||||||
position absolute
|
|
||||||
z-index 2
|
|
||||||
top 0
|
|
||||||
right 0
|
|
||||||
padding 0
|
|
||||||
width 42px
|
|
||||||
font-size 0.9em
|
|
||||||
line-height 42px
|
|
||||||
color #ccc
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
color #aaa
|
|
||||||
|
|
||||||
&:active
|
|
||||||
color #999
|
|
||||||
|
|
||||||
> .initializing
|
|
||||||
margin 0
|
|
||||||
padding 16px
|
|
||||||
text-align center
|
|
||||||
color #aaa
|
|
||||||
|
|
||||||
> i
|
|
||||||
margin-right 4px
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
this.data = {
|
this.data = {
|
||||||
@ -66,186 +17,15 @@
|
|||||||
this.initializing = true;
|
this.initializing = true;
|
||||||
|
|
||||||
this.on('mount', () => {
|
this.on('mount', () => {
|
||||||
this.api('aggregation/users/activity', {
|
this.refs.activity.on('view-changed', view => {
|
||||||
user_id: this.I.id,
|
this.data.view = view;
|
||||||
limit: 20 * 7
|
this.save();
|
||||||
}).then(activity => {
|
|
||||||
this.update({
|
|
||||||
initializing: false,
|
|
||||||
activity
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
this.toggle = () => {
|
|
||||||
this.data.view++;
|
|
||||||
if (this.data.view == 2) this.data.view = 0;
|
|
||||||
|
|
||||||
// Save view state
|
|
||||||
this.save();
|
|
||||||
};
|
|
||||||
|
|
||||||
this.func = () => {
|
this.func = () => {
|
||||||
if (++this.data.design == 3) this.data.design = 0;
|
if (++this.data.design == 3) this.data.design = 0;
|
||||||
this.save();
|
this.save();
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
</mk-activity-home-widget>
|
</mk-activity-home-widget>
|
||||||
|
|
||||||
<mk-activity-home-widget-calender>
|
|
||||||
<svg viewBox="0 0 21 7" preserveAspectRatio="none">
|
|
||||||
<rect each={ data } class="day"
|
|
||||||
width="1" height="1"
|
|
||||||
riot-x={ x } riot-y={ date.weekday }
|
|
||||||
rx="1" ry="1"
|
|
||||||
fill="transparent">
|
|
||||||
<title>{ date.year }/{ date.month }/{ date.day }<br/>Post: { posts }, Reply: { replies }, Repost: { reposts }</title>
|
|
||||||
</rect>
|
|
||||||
<rect each={ data }
|
|
||||||
width="1" height="1"
|
|
||||||
riot-x={ x } riot-y={ date.weekday }
|
|
||||||
rx="1" ry="1"
|
|
||||||
fill={ color }
|
|
||||||
style="pointer-events: none; transform: scale({ v });"/>
|
|
||||||
<rect class="today"
|
|
||||||
width="1" height="1"
|
|
||||||
riot-x={ data[data.length - 1].x } riot-y={ data[data.length - 1].date.weekday }
|
|
||||||
rx="1" ry="1"
|
|
||||||
fill="none"
|
|
||||||
stroke-width="0.1"
|
|
||||||
stroke="#f73520"/>
|
|
||||||
</svg>
|
|
||||||
<style>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
|
|
||||||
> svg
|
|
||||||
display block
|
|
||||||
padding 10px
|
|
||||||
width 100%
|
|
||||||
|
|
||||||
> rect
|
|
||||||
transform-origin center
|
|
||||||
|
|
||||||
&.day
|
|
||||||
&:hover
|
|
||||||
fill rgba(0, 0, 0, 0.05)
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script>
|
|
||||||
this.data = this.opts.data;
|
|
||||||
this.data.forEach(d => d.total = d.posts + d.replies + d.reposts);
|
|
||||||
const peak = Math.max.apply(null, this.data.map(d => d.total));
|
|
||||||
|
|
||||||
let x = 0;
|
|
||||||
this.data.reverse().forEach(d => {
|
|
||||||
d.x = x;
|
|
||||||
d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
|
|
||||||
|
|
||||||
d.v = d.total / (peak / 2);
|
|
||||||
if (d.v > 1) d.v = 1;
|
|
||||||
const ch = d.date.weekday == 0 || d.date.weekday == 6 ? 275 : 170;
|
|
||||||
const cs = d.v * 100;
|
|
||||||
const cl = 15 + ((1 - d.v) * 80);
|
|
||||||
d.color = `hsl(${ch}, ${cs}%, ${cl}%)`;
|
|
||||||
|
|
||||||
if (d.date.weekday == 6) x++;
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</mk-activity-home-widget-calender>
|
|
||||||
|
|
||||||
<mk-activity-home-widget-chart>
|
|
||||||
<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none" onmousedown={ onMousedown }>
|
|
||||||
<title>Black ... Total<br/>Blue ... Posts<br/>Red ... Replies<br/>Green ... Reposts</title>
|
|
||||||
<polyline
|
|
||||||
riot-points={ pointsPost }
|
|
||||||
fill="none"
|
|
||||||
stroke-width="1"
|
|
||||||
stroke="#41ddde"/>
|
|
||||||
<polyline
|
|
||||||
riot-points={ pointsReply }
|
|
||||||
fill="none"
|
|
||||||
stroke-width="1"
|
|
||||||
stroke="#f7796c"/>
|
|
||||||
<polyline
|
|
||||||
riot-points={ pointsRepost }
|
|
||||||
fill="none"
|
|
||||||
stroke-width="1"
|
|
||||||
stroke="#a1de41"/>
|
|
||||||
<polyline
|
|
||||||
riot-points={ pointsTotal }
|
|
||||||
fill="none"
|
|
||||||
stroke-width="1"
|
|
||||||
stroke="#555"
|
|
||||||
stroke-dasharray="2 2"/>
|
|
||||||
</svg>
|
|
||||||
<style>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
|
|
||||||
> svg
|
|
||||||
display block
|
|
||||||
padding 10px
|
|
||||||
width 100%
|
|
||||||
cursor all-scroll
|
|
||||||
</style>
|
|
||||||
<script>
|
|
||||||
this.viewBoxX = 140;
|
|
||||||
this.viewBoxY = 60;
|
|
||||||
this.zoom = 1;
|
|
||||||
this.pos = 0;
|
|
||||||
|
|
||||||
this.data = this.opts.data.reverse();
|
|
||||||
this.data.forEach(d => d.total = d.posts + d.replies + d.reposts);
|
|
||||||
const peak = Math.max.apply(null, this.data.map(d => d.total));
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
this.render();
|
|
||||||
});
|
|
||||||
|
|
||||||
this.render = () => {
|
|
||||||
this.update({
|
|
||||||
pointsPost: this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.posts / peak)) * this.viewBoxY}`).join(' '),
|
|
||||||
pointsReply: this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.replies / peak)) * this.viewBoxY}`).join(' '),
|
|
||||||
pointsRepost: this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.reposts / peak)) * this.viewBoxY}`).join(' '),
|
|
||||||
pointsTotal: this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ')
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
this.onMousedown = e => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const clickX = e.clientX;
|
|
||||||
const clickY = e.clientY;
|
|
||||||
const baseZoom = this.zoom;
|
|
||||||
const basePos = this.pos;
|
|
||||||
|
|
||||||
// 動かした時
|
|
||||||
dragListen(me => {
|
|
||||||
let moveLeft = me.clientX - clickX;
|
|
||||||
let moveTop = me.clientY - clickY;
|
|
||||||
|
|
||||||
this.zoom = baseZoom + (-moveTop / 20);
|
|
||||||
this.pos = basePos + moveLeft;
|
|
||||||
if (this.zoom < 1) this.zoom = 1;
|
|
||||||
if (this.pos > 0) this.pos = 0;
|
|
||||||
if (this.pos < -(((this.data.length - 1) * this.zoom) - this.viewBoxX)) this.pos = -(((this.data.length - 1) * this.zoom) - this.viewBoxX);
|
|
||||||
|
|
||||||
this.render();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
function dragListen(fn) {
|
|
||||||
window.addEventListener('mousemove', fn);
|
|
||||||
window.addEventListener('mouseleave', dragClear.bind(null, fn));
|
|
||||||
window.addEventListener('mouseup', dragClear.bind(null, fn));
|
|
||||||
}
|
|
||||||
|
|
||||||
function dragClear(fn) {
|
|
||||||
window.removeEventListener('mousemove', fn);
|
|
||||||
window.removeEventListener('mouseleave', dragClear);
|
|
||||||
window.removeEventListener('mouseup', dragClear);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</mk-activity-home-widget-chart>
|
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<mk-timemachine-home-widget>
|
<mk-timemachine-home-widget>
|
||||||
<mk-calendar design={ data.design } warp={ warp }/>
|
<mk-calendar-widget design={ data.design } warp={ warp }/>
|
||||||
<style>
|
<style>
|
||||||
:scope
|
:scope
|
||||||
display block
|
display block
|
||||||
@ -21,5 +21,5 @@
|
|||||||
if (++this.data.design == 6) this.data.design = 0;
|
if (++this.data.design == 6) this.data.design = 0;
|
||||||
this.save();
|
this.save();
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
</mk-timemachine-home-widget>
|
</mk-timemachine-home-widget>
|
||||||
|
|||||||
@ -88,4 +88,5 @@ require('./user-following-window.tag');
|
|||||||
require('./user-followers-window.tag');
|
require('./user-followers-window.tag');
|
||||||
require('./list-user.tag');
|
require('./list-user.tag');
|
||||||
require('./detailed-post-window.tag');
|
require('./detailed-post-window.tag');
|
||||||
require('./calendar.tag');
|
require('./widgets/calendar.tag');
|
||||||
|
require('./widgets/activity.tag');
|
||||||
|
|||||||
@ -398,7 +398,8 @@
|
|||||||
<mk-user-timeline ref="tl" user={ user }/>
|
<mk-user-timeline ref="tl" user={ user }/>
|
||||||
</main>
|
</main>
|
||||||
<div>
|
<div>
|
||||||
<mk-calendar warp={ warp } start={ new Date(user.created_at) }/>
|
<mk-calendar-widget warp={ warp } start={ new Date(user.created_at) }/>
|
||||||
|
<mk-activity-widget user={ user }/>
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
:scope
|
:scope
|
||||||
|
|||||||
246
src/web/app/desktop/tags/widgets/activity.tag
Normal file
246
src/web/app/desktop/tags/widgets/activity.tag
Normal file
@ -0,0 +1,246 @@
|
|||||||
|
<mk-activity-widget data-melt={ design == 2 }>
|
||||||
|
<virtual if={ design == 0 }>
|
||||||
|
<p class="title"><i class="fa fa-bar-chart"></i>%i18n:desktop.tags.mk-activity-widget.title%</p>
|
||||||
|
<button onclick={ toggle } title="%i18n:desktop.tags.mk-activity-widget.toggle%"><i class="fa fa-sort"></i></button>
|
||||||
|
</virtual>
|
||||||
|
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
|
||||||
|
<mk-activity-widget-calender if={ !initializing && view == 0 } data={ [].concat(activity) }/>
|
||||||
|
<mk-activity-widget-chart if={ !initializing && view == 1 } data={ [].concat(activity) }/>
|
||||||
|
<style>
|
||||||
|
:scope
|
||||||
|
display block
|
||||||
|
background #fff
|
||||||
|
border solid 1px rgba(0, 0, 0, 0.075)
|
||||||
|
border-radius 6px
|
||||||
|
|
||||||
|
&[data-melt]
|
||||||
|
background transparent !important
|
||||||
|
border none !important
|
||||||
|
|
||||||
|
> .title
|
||||||
|
z-index 1
|
||||||
|
margin 0
|
||||||
|
padding 0 16px
|
||||||
|
line-height 42px
|
||||||
|
font-size 0.9em
|
||||||
|
font-weight bold
|
||||||
|
color #888
|
||||||
|
box-shadow 0 1px rgba(0, 0, 0, 0.07)
|
||||||
|
|
||||||
|
> i
|
||||||
|
margin-right 4px
|
||||||
|
|
||||||
|
> button
|
||||||
|
position absolute
|
||||||
|
z-index 2
|
||||||
|
top 0
|
||||||
|
right 0
|
||||||
|
padding 0
|
||||||
|
width 42px
|
||||||
|
font-size 0.9em
|
||||||
|
line-height 42px
|
||||||
|
color #ccc
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color #aaa
|
||||||
|
|
||||||
|
&:active
|
||||||
|
color #999
|
||||||
|
|
||||||
|
> .initializing
|
||||||
|
margin 0
|
||||||
|
padding 16px
|
||||||
|
text-align center
|
||||||
|
color #aaa
|
||||||
|
|
||||||
|
> i
|
||||||
|
margin-right 4px
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
this.mixin('api');
|
||||||
|
|
||||||
|
this.design = this.opts.design || 0;
|
||||||
|
this.view = this.opts.view || 0;
|
||||||
|
|
||||||
|
this.user = this.opts.user;
|
||||||
|
this.initializing = true;
|
||||||
|
|
||||||
|
this.on('mount', () => {
|
||||||
|
this.api('aggregation/users/activity', {
|
||||||
|
user_id: this.user.id,
|
||||||
|
limit: 20 * 7
|
||||||
|
}).then(activity => {
|
||||||
|
this.update({
|
||||||
|
initializing: false,
|
||||||
|
activity
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.toggle = () => {
|
||||||
|
this.view++;
|
||||||
|
if (this.view == 2) this.view = 0;
|
||||||
|
this.update();
|
||||||
|
this.trigger('view-changed', this.view);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</mk-activity-widget>
|
||||||
|
|
||||||
|
<mk-activity-widget-calender>
|
||||||
|
<svg viewBox="0 0 21 7" preserveAspectRatio="none">
|
||||||
|
<rect each={ data } class="day"
|
||||||
|
width="1" height="1"
|
||||||
|
riot-x={ x } riot-y={ date.weekday }
|
||||||
|
rx="1" ry="1"
|
||||||
|
fill="transparent">
|
||||||
|
<title>{ date.year }/{ date.month }/{ date.day }<br/>Post: { posts }, Reply: { replies }, Repost: { reposts }</title>
|
||||||
|
</rect>
|
||||||
|
<rect each={ data }
|
||||||
|
width="1" height="1"
|
||||||
|
riot-x={ x } riot-y={ date.weekday }
|
||||||
|
rx="1" ry="1"
|
||||||
|
fill={ color }
|
||||||
|
style="pointer-events: none; transform: scale({ v });"/>
|
||||||
|
<rect class="today"
|
||||||
|
width="1" height="1"
|
||||||
|
riot-x={ data[data.length - 1].x } riot-y={ data[data.length - 1].date.weekday }
|
||||||
|
rx="1" ry="1"
|
||||||
|
fill="none"
|
||||||
|
stroke-width="0.1"
|
||||||
|
stroke="#f73520"/>
|
||||||
|
</svg>
|
||||||
|
<style>
|
||||||
|
:scope
|
||||||
|
display block
|
||||||
|
|
||||||
|
> svg
|
||||||
|
display block
|
||||||
|
padding 10px
|
||||||
|
width 100%
|
||||||
|
|
||||||
|
> rect
|
||||||
|
transform-origin center
|
||||||
|
|
||||||
|
&.day
|
||||||
|
&:hover
|
||||||
|
fill rgba(0, 0, 0, 0.05)
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
this.data = this.opts.data;
|
||||||
|
this.data.forEach(d => d.total = d.posts + d.replies + d.reposts);
|
||||||
|
const peak = Math.max.apply(null, this.data.map(d => d.total));
|
||||||
|
|
||||||
|
let x = 0;
|
||||||
|
this.data.reverse().forEach(d => {
|
||||||
|
d.x = x;
|
||||||
|
d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
|
||||||
|
|
||||||
|
d.v = d.total / (peak / 2);
|
||||||
|
if (d.v > 1) d.v = 1;
|
||||||
|
const ch = d.date.weekday == 0 || d.date.weekday == 6 ? 275 : 170;
|
||||||
|
const cs = d.v * 100;
|
||||||
|
const cl = 15 + ((1 - d.v) * 80);
|
||||||
|
d.color = `hsl(${ch}, ${cs}%, ${cl}%)`;
|
||||||
|
|
||||||
|
if (d.date.weekday == 6) x++;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</mk-activity-widget-calender>
|
||||||
|
|
||||||
|
<mk-activity-widget-chart>
|
||||||
|
<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none" onmousedown={ onMousedown }>
|
||||||
|
<title>Black ... Total<br/>Blue ... Posts<br/>Red ... Replies<br/>Green ... Reposts</title>
|
||||||
|
<polyline
|
||||||
|
riot-points={ pointsPost }
|
||||||
|
fill="none"
|
||||||
|
stroke-width="1"
|
||||||
|
stroke="#41ddde"/>
|
||||||
|
<polyline
|
||||||
|
riot-points={ pointsReply }
|
||||||
|
fill="none"
|
||||||
|
stroke-width="1"
|
||||||
|
stroke="#f7796c"/>
|
||||||
|
<polyline
|
||||||
|
riot-points={ pointsRepost }
|
||||||
|
fill="none"
|
||||||
|
stroke-width="1"
|
||||||
|
stroke="#a1de41"/>
|
||||||
|
<polyline
|
||||||
|
riot-points={ pointsTotal }
|
||||||
|
fill="none"
|
||||||
|
stroke-width="1"
|
||||||
|
stroke="#555"
|
||||||
|
stroke-dasharray="2 2"/>
|
||||||
|
</svg>
|
||||||
|
<style>
|
||||||
|
:scope
|
||||||
|
display block
|
||||||
|
|
||||||
|
> svg
|
||||||
|
display block
|
||||||
|
padding 10px
|
||||||
|
width 100%
|
||||||
|
cursor all-scroll
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
this.viewBoxX = 140;
|
||||||
|
this.viewBoxY = 60;
|
||||||
|
this.zoom = 1;
|
||||||
|
this.pos = 0;
|
||||||
|
|
||||||
|
this.data = this.opts.data.reverse();
|
||||||
|
this.data.forEach(d => d.total = d.posts + d.replies + d.reposts);
|
||||||
|
const peak = Math.max.apply(null, this.data.map(d => d.total));
|
||||||
|
|
||||||
|
this.on('mount', () => {
|
||||||
|
this.render();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.render = () => {
|
||||||
|
this.update({
|
||||||
|
pointsPost: this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.posts / peak)) * this.viewBoxY}`).join(' '),
|
||||||
|
pointsReply: this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.replies / peak)) * this.viewBoxY}`).join(' '),
|
||||||
|
pointsRepost: this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.reposts / peak)) * this.viewBoxY}`).join(' '),
|
||||||
|
pointsTotal: this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ')
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
this.onMousedown = e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const clickX = e.clientX;
|
||||||
|
const clickY = e.clientY;
|
||||||
|
const baseZoom = this.zoom;
|
||||||
|
const basePos = this.pos;
|
||||||
|
|
||||||
|
// 動かした時
|
||||||
|
dragListen(me => {
|
||||||
|
let moveLeft = me.clientX - clickX;
|
||||||
|
let moveTop = me.clientY - clickY;
|
||||||
|
|
||||||
|
this.zoom = baseZoom + (-moveTop / 20);
|
||||||
|
this.pos = basePos + moveLeft;
|
||||||
|
if (this.zoom < 1) this.zoom = 1;
|
||||||
|
if (this.pos > 0) this.pos = 0;
|
||||||
|
if (this.pos < -(((this.data.length - 1) * this.zoom) - this.viewBoxX)) this.pos = -(((this.data.length - 1) * this.zoom) - this.viewBoxX);
|
||||||
|
|
||||||
|
this.render();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
function dragListen(fn) {
|
||||||
|
window.addEventListener('mousemove', fn);
|
||||||
|
window.addEventListener('mouseleave', dragClear.bind(null, fn));
|
||||||
|
window.addEventListener('mouseup', dragClear.bind(null, fn));
|
||||||
|
}
|
||||||
|
|
||||||
|
function dragClear(fn) {
|
||||||
|
window.removeEventListener('mousemove', fn);
|
||||||
|
window.removeEventListener('mouseleave', dragClear);
|
||||||
|
window.removeEventListener('mouseup', dragClear);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</mk-activity-widget-chart>
|
||||||
|
|
||||||
@ -1,8 +1,8 @@
|
|||||||
<mk-calendar data-melt={ opts.design == 4 || opts.design == 5 }>
|
<mk-calendar-widget data-melt={ opts.design == 4 || opts.design == 5 }>
|
||||||
<virtual if={ opts.design == 0 || opts.design == 1 }>
|
<virtual if={ opts.design == 0 || opts.design == 1 }>
|
||||||
<button onclick={ prev } title="%i18n:desktop.tags.mk-calendar.prev%"><i class="fa fa-chevron-circle-left"></i></button>
|
<button onclick={ prev } title="%i18n:desktop.tags.mk-calendar-widget.prev%"><i class="fa fa-chevron-circle-left"></i></button>
|
||||||
<p class="title">{ '%i18n:desktop.tags.mk-calendar.title%'.replace('{1}', year).replace('{2}', month) }</p>
|
<p class="title">{ '%i18n:desktop.tags.mk-calendar-widget.title%'.replace('{1}', year).replace('{2}', month) }</p>
|
||||||
<button onclick={ next } title="%i18n:desktop.tags.mk-calendar.next%"><i class="fa fa-chevron-circle-right"></i></button>
|
<button onclick={ next } title="%i18n:desktop.tags.mk-calendar-widget.next%"><i class="fa fa-chevron-circle-right"></i></button>
|
||||||
</virtual>
|
</virtual>
|
||||||
|
|
||||||
<div class="calendar">
|
<div class="calendar">
|
||||||
@ -16,7 +16,7 @@
|
|||||||
data-is-out-of-range={ isOutOfRange(i + 1) }
|
data-is-out-of-range={ isOutOfRange(i + 1) }
|
||||||
data-is-donichi={ isDonichi(i + 1) }
|
data-is-donichi={ isDonichi(i + 1) }
|
||||||
onclick={ go.bind(null, i + 1) }
|
onclick={ go.bind(null, i + 1) }
|
||||||
title={ isOutOfRange(i + 1) ? null : '%i18n:desktop.tags.mk-calendar.go%' }><div>{ i + 1 }</div></div>
|
title={ isOutOfRange(i + 1) ? null : '%i18n:desktop.tags.mk-calendar-widget.go%' }><div>{ i + 1 }</div></div>
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
:scope
|
:scope
|
||||||
@ -238,4 +238,4 @@
|
|||||||
this.opts.warp(date);
|
this.opts.warp(date);
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
</mk-calendar>
|
</mk-calendar-widget>
|
||||||
Loading…
Reference in New Issue
Block a user