keith/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey synced 2024-11-22 11:25:13 +00:00
Code Issues Projects Releases Packages Wiki Activity

やった

Browse source
This commit is contained in:
syuilo 2017-11-14 08:50:55 +09:00
parent 107ecfb07f
commit 1a72e8b95c
8 changed files with 269 additions and 241 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
locales/en.yml
View file

@ -347,7 +347,7 @@ desktop:
title: "Server info"
toggle: "Toggle views"
mk-activity-home-widget:
mk-activity-widget:
title: "Activity"
toggle: "Toggle views"
@ -379,7 +379,7 @@ desktop:
settings: "Widget settings"
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}"
prev: "Previous month"
next: "Next month"

4
locales/ja.yml
View file

@ -347,7 +347,7 @@ desktop:
title: "サーバー情報"
toggle: "表示を切り替え"
mk-activity-home-widget:
mk-activity-widget:
title: "アクティビティ"
toggle: "表示を切り替え"
@ -379,7 +379,7 @@ desktop:
settings: "ウィジェットの設定"
get-started: "右上の歯車をクリックして受信するチャンネルを指定してください"
mk-timemachine-home-widget:
mk-calendar-widget:
title: "{1}年 {2}月"
prev: "先月"
next: "来月"

234
src/web/app/desktop/tags/home-widgets/activity.tag
View file

@ -1,59 +1,10 @@
<mk-activity-home-widget data-melt={ data.design == 2 }>
<virtual if={ data.design == 0 }>
<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) }/>
<mk-activity-home-widget>
<mk-activity-widget design={ data.design } view={ data.view } user={ I } ref="activity"/>
<style>
:scope
display block
background #fff
&[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
background transparent !important
border none !important
</style>
<script>
this.data = {
@ -66,186 +17,15 @@
this.initializing = true;
this.on('mount', () => {
this.api('aggregation/users/activity', {
user_id: this.I.id,
limit: 20 * 7
}).then(activity => {
this.update({
initializing: false,
activity
});
this.refs.activity.on('view-changed', view => {
this.data.view = view;
this.save();
});
});
this.toggle = () => {
this.data.view++;
if (this.data.view == 2) this.data.view = 0;
// Save view state
this.save();
};
this.func = () => {
if (++this.data.design == 3) this.data.design = 0;
this.save();
};
</script>
</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>

4
src/web/app/desktop/tags/home-widgets/timemachine.tag
View file

@ -1,5 +1,5 @@
<mk-timemachine-home-widget>
<mk-calendar design={ data.design } warp={ warp }/>
<mk-calendar-widget design={ data.design } warp={ warp }/>
<style>
:scope
display block
@ -21,5 +21,5 @@
if (++this.data.design == 6) this.data.design = 0;
this.save();
};
</script>
</script>
</mk-timemachine-home-widget>

3
src/web/app/desktop/tags/index.ts
View file

@ -88,4 +88,5 @@ require('./user-following-window.tag');
require('./user-followers-window.tag');
require('./list-user.tag');
require('./detailed-post-window.tag');
require('./calendar.tag');
require('./widgets/calendar.tag');
require('./widgets/activity.tag');

3
src/web/app/desktop/tags/user.tag
View file

@ -398,7 +398,8 @@
<mk-user-timeline ref="tl" user={ user }/>
</main>
<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>
<style>
:scope

246
src/web/app/desktop/tags/widgets/activity.tag Normal file
View 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>

12
src/web/app/desktop/tags/calendar.tag → src/web/app/desktop/tags/widgets/calendar.tag
View file

@ -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 }>
<button onclick={ prev } title="%i18n:desktop.tags.mk-calendar.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>
<button onclick={ next } title="%i18n:desktop.tags.mk-calendar.next%"><i class="fa fa-chevron-circle-right"></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-widget.title%'.replace('{1}', year).replace('{2}', month) }</p>
<button onclick={ next } title="%i18n:desktop.tags.mk-calendar-widget.next%"><i class="fa fa-chevron-circle-right"></i></button>
</virtual>
<div class="calendar">
@ -16,7 +16,7 @@
data-is-out-of-range={ isOutOfRange(i + 1) }
data-is-donichi={ isDonichi(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>
<style>
:scope
@ -238,4 +238,4 @@
this.opts.warp(date);
};
</script>
</mk-calendar>
</mk-calendar-widget>