やった
This commit is contained in:
		
							parent
							
								
									107ecfb07f
								
							
						
					
					
						commit
						1a72e8b95c
					
				
					 8 changed files with 269 additions and 241 deletions
				
			
		|  | @ -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" | ||||
|  |  | |||
|  | @ -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: "来月" | ||||
|  |  | |||
|  | @ -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> | ||||
| 
 | ||||
|  |  | |||
|  | @ -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> | ||||
|  |  | |||
|  | @ -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'); | ||||
|  |  | |||
|  | @ -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
									
								
							
							
						
						
									
										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 }> | ||||
| 		<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> | ||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue