From beb04e918ebe39a3cf97eeae7d44a209030915ea Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 21 Feb 2017 00:44:18 +0900
Subject: [PATCH] wip

---
 .../app/desktop/tags/ui-header-account.tag    |  66 +--
 src/web/app/desktop/tags/ui-header-clock.tag  |  39 +-
 src/web/app/desktop/tags/ui-header-nav.tag    | 198 ++++----
 .../desktop/tags/ui-header-notifications.tag  |  50 +-
 src/web/app/desktop/tags/ui-header-search.tag |   5 +-
 src/web/app/desktop/tags/window.tag           | 460 +++++++++---------
 6 files changed, 431 insertions(+), 387 deletions(-)

diff --git a/src/web/app/desktop/tags/ui-header-account.tag b/src/web/app/desktop/tags/ui-header-account.tag
index 334b69e21..c035529f7 100644
--- a/src/web/app/desktop/tags/ui-header-account.tag
+++ b/src/web/app/desktop/tags/ui-header-account.tag
@@ -159,54 +159,54 @@
 
 	</style>
 	<script>
+		const contains = require('../../common/scripts/contains');
+
 		this.mixin('i');
 		this.mixin('signout');
 
-		this.is-open = false
+		this.isOpen = false;
 
 		this.on('before-unmount', () => {
-			@close();
+			this.close();
+		});
 
 		this.toggle = () => {
-			if @is-open
-				@close();
-			else
-				@open!
+			this.isOpen ? this.close() : this.open();
+		};
 
 		this.open = () => {
-			this.is-open = true
-			this.update();
-			all = document.query-selector-all 'body *'
-			Array.prototype.forEach.call all, (el) =>
-				el.addEventListener 'mousedown' @mousedown
+			this.update({
+				isOpen: true
+			});
+			document.querySelectorAll('body *').forEach(el => {
+				el.addEventListener('mousedown', this.mousedown);
+			});
+		};
 
 		this.close = () => {
-			this.is-open = false
-			this.update();
-			all = document.query-selector-all 'body *'
-			Array.prototype.forEach.call all, (el) =>
-				el.removeEventListener 'mousedown' @mousedown
+			this.update({
+				isOpen: false
+			});
+			document.querySelectorAll('body *').forEach(el => {
+				el.removeEventListener('mousedown', this.mousedown);
+			});
+		};
 
-		this.mousedown = (e) => {
+		this.mousedown = e => {
 			e.preventDefault();
-			if (!contains this.root, e.target) and (this.root != e.target)
-				@close();
-			return false
+			if (!contains(this.root, e.target) && this.root != e.target) this.close();
+			return false;
+		};
 
 		this.drive = () => {
-			@close();
-			riot.mount document.body.appendChild(document.createElement('mk-drive-browser-window'));
- 
+			this.close();
+			riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-window')));
+		};
+
 		this.settings = () => {
-			@close();
-			riot.mount document.body.appendChild(document.createElement('mk-settings-window'));
- 
-		function contains(parent, child)
-			node = child.parentNode
-			while node?
-				if node == parent
-					return true
-				node = node.parentNode
-			return false
+			this.close();
+			riot.mount(document.body.appendChild(document.createElement('mk-settings-window')));
+		};
+
 	</script>
 </mk-ui-header-account>
diff --git a/src/web/app/desktop/tags/ui-header-clock.tag b/src/web/app/desktop/tags/ui-header-clock.tag
index 74336b460..ce41083fc 100644
--- a/src/web/app/desktop/tags/ui-header-clock.tag
+++ b/src/web/app/desktop/tags/ui-header-clock.tag
@@ -1,6 +1,9 @@
 <mk-ui-header-clock>
 	<div class="header">
-		<time ref="time"></time>
+		<time ref="time">
+			<span class="yyyymmdd">{ yyyy }/{ mm }/{ dd }</span>
+			<span class="hhnn">{ hh }<span style="visibility:{ now.getSeconds() % 2 == 0 ? 'visible' : 'hidden' }">:</span>{ nn }</span>
+		</time>
 	</div>
 	<div class="content">
 		<mk-analog-clock></mk-analog-clock>
@@ -13,7 +16,7 @@
 			> .header
 				padding 0 12px
 				text-align center
-				font-size 0.5em
+				font-size 10px
 
 				&, *
 					cursor: default
@@ -59,29 +62,21 @@
 	</style>
 	<script>
 		this.draw = () => {
-			const now = new Date();
-
-			yyyy = now.getFullYear()
-			mm = (\0 + (now.getMonth() + 1)).slice -2
-			dd = (\0 + now.getDate()).slice -2
-			yyyymmdd = "<span class='yyyymmdd'>#yyyy/#mm/#dd</span>"
-
-			hh = (\0 + now.getHours()).slice -2
-			mm = (\0 + now.getMinutes()).slice -2
-			hhmm = "<span class='hhmm'>#hh:#mm</span>"
-
-			if now.get-seconds! % 2 == 0
-				hhmm .= replace ':' '<span style=\'visibility:visible\'>:</span>'
-			else
-				hhmm .= replace ':' '<span style=\'visibility:hidden\'>:</span>'
-
-			this.refs.time.innerHTML = "#yyyymmdd<br>#hhmm"
+			this.now = new Date();
+			this.yyyy = now.getFullYear();
+			this.mm = ('0' + (now.getMonth() + 1)).slice(-2);
+			this.dd = ('0' + now.getDate()).slice(-2);
+			this.hh = ('0' + now.getHours()).slice(-2);
+			this.nn = ('0' + now.getMinutes()).slice(-2);
+		};
 
 		this.on('mount', () => {
-			@draw!
-			this.clock = setInterval @draw, 1000ms
+			this.draw();
+			this.clock = setInterval(this.draw, 1000);
+		});
 
 		this.on('unmount', () => {
-			clearInterval @clock
+			clearInterval(this.clock);
+		});
 	</script>
 </mk-ui-header-clock>
diff --git a/src/web/app/desktop/tags/ui-header-nav.tag b/src/web/app/desktop/tags/ui-header-nav.tag
index 93819963e..9be1edea8 100644
--- a/src/web/app/desktop/tags/ui-header-nav.tag
+++ b/src/web/app/desktop/tags/ui-header-nav.tag
@@ -1,113 +1,139 @@
 <mk-ui-header-nav>
 	<ul if={ SIGNIN }>
-		<li class="home { active: page == 'home' }"><a href={ CONFIG.url }><i class="fa fa-home"></i>
-				<p>ホーム</p></a></li>
-		<li class="messaging"><a onclick={ messaging }><i class="fa fa-comments"></i>
-				<p>メッセージ</p><i class="fa fa-circle" if={ hasUnreadMessagingMessages }></i></a></li>
-		<li class="info"><a href="https://twitter.com/misskey_xyz" target="_blank"><i class="fa fa-info"></i>
-				<p>お知らせ</p></a></li>
-		<li class="tv"><a href="https://misskey.tk" target="_blank"><i class="fa fa-television"></i>
-				<p>MisskeyTV™</p></a></li>
-		<style>
-			:scope
+		<li class="home { active: page == 'home' }">
+			<a href={ CONFIG.url }>
+				<i class="fa fa-home"></i>
+				<p>ホーム</p>
+			</a>
+		</li>
+		<li class="messaging">
+			<a onclick={ messaging }>
+				<i class="fa fa-comments"></i>
+				<p>メッセージ</p>
+				<i class="fa fa-circle" if={ hasUnreadMessagingMessages }></i>
+			</a>
+		</li>
+		<li class="info">
+			<a href="https://twitter.com/misskey_xyz" target="_blank">
+				<i class="fa fa-info"></i>
+				<p>お知らせ</p>
+			</a>
+		</li>
+		<li class="tv">
+			<a href="https://misskey.tk" target="_blank">
+				<i class="fa fa-television"></i>
+				<p>MisskeyTV™</p>
+			</a>
+		</li>
+	</ul>
+	<style>
+		:scope
+			display inline-block
+			margin 0
+			padding 0
+			line-height 3rem
+			vertical-align top
+
+			> ul
 				display inline-block
 				margin 0
 				padding 0
-				line-height 3rem
 				vertical-align top
+				line-height 3rem
+				list-style none
 
-				> ul
+				> li
 					display inline-block
-					margin 0
-					padding 0
 					vertical-align top
-					line-height 3rem
-					list-style none
-
-					> li
-						display inline-block
-						vertical-align top
-						height 48px
-						line-height 48px
-
-						&.active
-							> a
-								border-bottom solid 3px $theme-color
+					height 48px
+					line-height 48px
 
+					&.active
 						> a
-							display inline-block
-							z-index 1
-							height 100%
-							padding 0 24px
-							font-size 1em
-							font-variant small-caps
-							color #9eaba8
+							border-bottom solid 3px $theme-color
+
+					> a
+						display inline-block
+						z-index 1
+						height 100%
+						padding 0 24px
+						font-size 1em
+						font-variant small-caps
+						color #9eaba8
+						text-decoration none
+						transition none
+						cursor pointer
+
+						*
+							pointer-events none
+
+						&:hover
+							color darken(#9eaba8, 20%)
 							text-decoration none
-							transition none
-							cursor pointer
 
-							*
-								pointer-events none
+						> i:first-child
+							margin-right 8px
 
-							&:hover
-								color darken(#9eaba8, 20%)
-								text-decoration none
+						> i:last-child
+							margin-left 5px
+							vertical-align super
+							font-size 10px
+							color $theme-color
 
-							> i:first-child
-								margin-right 8px
+							@media (max-width 1100px)
+								margin-left -5px
 
-							> i:last-child
-								margin-left 5px
-								vertical-align super
-								font-size 10px
-								color $theme-color
+						> p
+							display inline
+							margin 0
 
-								@media (max-width 1100px)
-									margin-left -5px
+							@media (max-width 1100px)
+								display none
 
-							> p
-								display inline
-								margin 0
+						@media (max-width 700px)
+							padding 0 12px
 
-								@media (max-width 1100px)
-									display none
+	</style>
+	<script>
+		this.mixin('i');
+		this.mixin('api');
+		this.mixin('stream');
 
-							@media (max-width 700px)
-								padding 0 12px
+		this.page = this.opts.page;
 
-		</style>
-		<script>
-			this.mixin('i');
-			this.mixin('api');
-			this.mixin('stream');
+		this.on('mount', () => {
+			this.stream.on('read_all_messaging_messages', this.onReadAllMessagingMessages);
+			this.stream.on('unread_messaging_message', this.onUnreadMessagingMessage);
 
-			this.page = this.opts.page
+			// Fetch count of unread messaging messages
+			this.api('messaging/unread').then(res => {
+				if (res.count > 0) {
+					this.update({
+						hasUnreadMessagingMessages: true
+					});
+				}
+			});
+		});
 
-			this.on('mount', () => {
-				this.stream.on 'read_all_messaging_messages' this.on-read-all-messaging-messages
-				this.stream.on 'unread_messaging_message' this.on-unread-messaging-message
+		this.on('unmount', () => {
+			this.stream.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
+			this.stream.off('unread_messaging_message', this.onUnreadMessagingMessage);
+		});
 
-				// Fetch count of unread messaging messages
-				this.api 'messaging/unread' 
-				}).then((count) => {
-					if count.count > 0
-						this.has-unread-messaging-messages = true
-						this.update();
+		this.onReadAllMessagingMessages = () => {
+			this.update({
+				hasUnreadMessagingMessages: false
+			});
+		};
 
-			this.on('unmount', () => {
-				this.stream.off 'read_all_messaging_messages' this.on-read-all-messaging-messages
-				this.stream.off 'unread_messaging_message' this.on-unread-messaging-message
+		this.onUnreadMessagingMessage = () => {
+			this.update({
+				hasUnreadMessagingMessages: true
+			});
+		};
 
-			this.on-read-all-messaging-messages = () => {
-				this.has-unread-messaging-messages = false
-				this.update();
-
-			this.on-unread-messaging-message = () => {
-				this.has-unread-messaging-messages = true
-				this.update();
-
-			this.messaging = () => {
-				riot.mount document.body.appendChild(document.createElement('mk-messaging-window'));
- 		</script>
-	</ul>
+		this.messaging = () => {
+			riot.mount(document.body.appendChild(document.createElement('mk-messaging-window')));
+		};
+	</script>
 </mk-ui-header-nav>
diff --git a/src/web/app/desktop/tags/ui-header-notifications.tag b/src/web/app/desktop/tags/ui-header-notifications.tag
index 31dc45d0d..05a9e6d77 100644
--- a/src/web/app/desktop/tags/ui-header-notifications.tag
+++ b/src/web/app/desktop/tags/ui-header-notifications.tag
@@ -75,40 +75,36 @@
 
 	</style>
 	<script>
-		this.is-open = false
+		const contains = require('../../common/scripts/contains');
+
+		this.isOpen = false;
 
 		this.toggle = () => {
-			if @is-open
-				@close();
-			else
-				@open!
+			this.isOpen ? this.close() : this.open();
+		};
 
 		this.open = () => {
-			this.is-open = true
-			this.update();
-			all = document.query-selector-all 'body *'
-			Array.prototype.forEach.call all, (el) =>
-				el.addEventListener 'mousedown' @mousedown
+			this.update({
+				isOpen: true
+			});
+			document.querySelectorAll('body *').forEach(el => {
+				el.addEventListener('mousedown', this.mousedown);
+			});
+		};
 
 		this.close = () => {
-			this.is-open = false
-			this.update();
-			all = document.query-selector-all 'body *'
-			Array.prototype.forEach.call all, (el) =>
-				el.removeEventListener 'mousedown' @mousedown
+			this.update({
+				isOpen: false
+			});
+			document.querySelectorAll('body *').forEach(el => {
+				el.removeEventListener('mousedown', this.mousedown);
+			});
+		};
 
-		this.mousedown = (e) => {
+		this.mousedown = e => {
 			e.preventDefault();
-			if (!contains this.root, e.target) and (this.root != e.target)
-				@close();
-			return false
-
-		function contains(parent, child)
-			node = child.parentNode
-			while node?
-				if node == parent
-					return true
-				node = node.parentNode
-			return false
+			if (!contains(this.root, e.target) && this.root != e.target) this.close();
+			return false;
+		};
 	</script>
 </mk-ui-header-notifications>
diff --git a/src/web/app/desktop/tags/ui-header-search.tag b/src/web/app/desktop/tags/ui-header-search.tag
index f7e2842c7..ff1a313ce 100644
--- a/src/web/app/desktop/tags/ui-header-search.tag
+++ b/src/web/app/desktop/tags/ui-header-search.tag
@@ -34,8 +34,9 @@
 	<script>
 		this.mixin('page');
 
-		this.onsubmit = (e) => {
+		this.onsubmit = e => {
 			e.preventDefault();
-			this.page '/search:' + this.refs.q.value
+			this.page('/search:' + this.refs.q.value);
+		};
 	</script>
 </mk-ui-header-search>
diff --git a/src/web/app/desktop/tags/window.tag b/src/web/app/desktop/tags/window.tag
index bd9df8823..d2b3edb4d 100644
--- a/src/web/app/desktop/tags/window.tag
+++ b/src/web/app/desktop/tags/window.tag
@@ -192,328 +192,354 @@
 
 	</style>
 	<script>
-		this.min-height = 40px
-		this.min-width = 200px
+		const contains = require('../../common/scripts/contains');
 
-		this.is-modal = if this.opts.is-modal? then this.opts.is-modal else false
-		this.can-close = if this.opts.can-close? then this.opts.can-close else true
-		this.is-flexible = !this.opts.height?
-		this.can-resize = not @is-flexible
+		this.minHeight = 40;
+		this.minWidth = 200;
+
+		this.isModal = this.opts.isModal != null ? this.opts.isModal : false;
+		this.canClose = this.opts.canClose != null ? this.opts.canClose : true;
+		this.isFlexible = this.opts.height == null;
+		this.canResize = !this.isFlexible;
 
 		this.on('mount', () => {
-			this.refs.main.style.width = this.opts.width || '530px' 
-			this.refs.main.style.height = this.opts.height || 'auto' 
+			this.refs.main.style.width = this.opts.width || '530px';
+			this.refs.main.style.height = this.opts.height || 'auto';
 
-			this.refs.main.style.top = '15%' 
-			this.refs.main.style.left = (window.inner-width / 2) - (this.refs.main.offset-width / 2) + 'px' 
+			this.refs.main.style.top = '15%';
+			this.refs.main.style.left = (window.innerWidth / 2) - (this.refs.main.offsetWidth / 2) + 'px';
 
-			this.refs.header.addEventListener 'contextmenu' (e) =>
+			this.refs.header.addEventListener('contextmenu', e => {
 				e.preventDefault();
+			});
 
-			window.addEventListener 'resize' this.on-browser-resize
+			window.addEventListener('resize', this.onBrowserResize);
 
-			@open!
+			this.open();
+		});
 
 		this.on('unmount', () => {
-			window.removeEventListener 'resize' this.on-browser-resize
+			window.removeEventListener('resize', this.onBrowserResize);
+		});
 
-		this.on-browser-resize = () => {
-			position = this.refs.main.get-bounding-client-rect!
-			browser-width = window.inner-width
-			browser-height = window.inner-height
-			window-width = this.refs.main.offset-width
-			window-height = this.refs.main.offset-height
-
-			if position.left < 0
-				this.refs.main.style.left = 0
-
-			if position.top < 0
-				this.refs.main.style.top = 0
-
-			if position.left + window-width > browser-width
-				this.refs.main.style.left = browser-width - window-width + 'px' 
-
-			if position.top + window-height > browser-height
-				this.refs.main.style.top = browser-height - window-height + 'px' 
+		this.onBrowserResize = () => {
+			const position = this.refs.main.getBoundingClientRect();
+			const browserWidth = window.innerWidth;
+			const browserHeight = window.innerHeight;
+			const windowWidth = this.refs.main.offsetWidth;
+			const windowHeight = this.refs.main.offsetHeight;
+			if (position.left < 0) this.refs.main.style.left = 0;
+			if (position.top < 0) this.refs.main.style.top = 0;
+			if (position.left + windowWidth > browserWidth) this.refs.main.style.left = browserWidth - windowWidth + 'px';
+			if (position.top + windowHeight > browserHeight) this.refs.main.style.top = browserHeight - windowHeight + 'px';
+		};
 
 		this.open = () => {
 			this.trigger('opening');
 
-			@top!
+			this.top();
 
-			if @is-modal
-				this.refs.bg.style.pointer-events = 'auto' 
-				Velocity(this.refs.bg, 'finish' true
+			if (this.isModal) {
+				this.refs.bg.style.pointerEvents = 'auto';
+				Velocity(this.refs.bg, 'finish', true);
 				Velocity(this.refs.bg, {
 					opacity: 1
 				}, {
-					queue: false
-					duration: 100ms
-					easing: 'linear' 
-				}
-
-			this.refs.main.style.pointer-events = 'auto' 
-			Velocity(this.refs.main, 'finish' true
-			Velocity(this.refs.main, {scale: 1.1} 0ms
-			Velocity(this.refs.main, {
-				opacity: 1
-				scale: 1
-			}, {
-				queue: false
-				duration: 200ms
-				easing: 'ease-out' 
+					queue: false,
+					duration: 100,
+					easing: 'linear'
+				});
 			}
 
-			#this.refs.main.focus();
+			this.refs.main.style.pointerEvents = 'auto';
+			Velocity(this.refs.main, 'finish', true);
+			Velocity(this.refs.main, { scale: 1.1 }, 0);
+			Velocity(this.refs.main, {
+				opacity: 1,
+				scale: 1
+			}, {
+				queue: false,
+				duration: 200,
+				easing: 'ease-out'
+			});
 
-			setTimeout =>
+			//this.refs.main.focus();
+
+			setTimeout(() => {
 				this.trigger('opened');
-			, 300ms
+			}, 300);
+		};
 
 		this.close = () => {
 			this.trigger('closing');
 
-			if @is-modal
-				this.refs.bg.style.pointer-events = 'none' 
-				Velocity(this.refs.bg, 'finish' true
+			if (this.isModal) {
+				this.refs.bg.style.pointerEvents = 'none';
+				Velocity(this.refs.bg, 'finish', true);
 				Velocity(this.refs.bg, {
 					opacity: 0
 				}, {
-					queue: false
-					duration: 300ms
-					easing: 'linear' 
-				}
-
-			this.refs.main.style.pointer-events = 'none' 
-			Velocity(this.refs.main, 'finish' true
-			Velocity(this.refs.main, {
-				opacity: 0
-				scale: 0.8
-			}, {
-				queue: false
-				duration: 300ms
-				easing: [ 0.5, -0.5, 1, 0.5 ]
+					queue: false,
+					duration: 300,
+					easing: 'linear'
+				});
 			}
 
-			setTimeout =>
+			this.refs.main.style.pointerEvents = 'none';
+			Velocity(this.refs.main, 'finish', true);
+			Velocity(this.refs.main, {
+				opacity: 0,
+				scale: 0.8
+			}, {
+				queue: false,
+				duration: 300,
+				easing: [ 0.5, -0.5, 1, 0.5 ]
+			});
+
+			setTimeout(() => {
 				this.trigger('closed');
-			, 300ms
+			}, 300);
+		};
 
 		// 最前面へ移動します
 		this.top = () => {
-			z = 0
+			let z = 0;
 
-			ws = document.query-selector-all 'mk-window' 
-			ws.forEach (w) !=>
-				if w == this.root then return
-				m = w.query-selector ':scope > .main'
-				mz = Number(document.default-view.get-computed-style m, null .z-index)
-				if mz > z then z := mz
+			const ws = document.querySelectorAll('mk-window');
+			ws.forEach(w => {
+				if (w == this.root) return;
+				const m = w.querySelector(':scope > .main');
+				const mz = Number(document.defaultView.getComputedStyle(m, null).zIndex);
+				if (mz > z) z = mz;
+			});
 
-			if z > 0
-				this.refs.main.style.z-index = z + 1
-				if @is-modal then this.refs.bg.style.z-index = z + 1
+			if (z > 0) {
+				this.refs.main.style.zIndex = z + 1;
+				if (this.isModal) this.refs.bg.style.zIndex = z + 1;
+			}
+		};
 
-		this.repel-move = (e) => {
+		this.repelMove = e => {
 			e.stopPropagation();
-			return true
+			return true;
+		};
 
-		this.bg-click = () => {
-			if @can-close
-				@close();
+		this.bgClick = () => {
+			if (this.canClose) this.close();
+		};
 
-		this.on-body-mousedown = (e) => {
-			@top!
-			true
+		this.onBodyMousedown = () => {
+			this.top();
+		};
 
 		// ヘッダー掴み時
-		this.on-header-mousedown = (e) => {
+		this.onHeaderMousedown = e => {
 			e.preventDefault();
 
-			if not contains this.refs.main, document.active-element
-				this.refs.main.focus();
+			if (!contains(this.refs.main, document.activeElement)) this.refs.main.focus();
 
-			position = this.refs.main.get-bounding-client-rect!
+			const position = this.refs.main.getBoundingClientRect();
 
-			click-x = e.client-x
-			click-y = e.client-y
-			move-base-x = click-x - position.left
-			move-base-y = click-y - position.top
-			browser-width = window.inner-width
-			browser-height = window.inner-height
-			window-width = this.refs.main.offset-width
-			window-height = this.refs.main.offset-height
+			const clickX = e.clientX;
+			const clickY = e.clientY;
+			const moveBaseX = clickX - position.left;
+			const moveBaseY = clickY - position.top;
+			const browserWidth = window.innerWidth;
+			const browserHeight = window.innerHeight;
+			const windowWidth = this.refs.main.offsetWidth;
+			const windowHeight = this.refs.main.offsetHeight;
 
 			// 動かした時
-			drag-listen (me) =>
-				move-left = me.client-x - move-base-x
-				move-top = me.client-y - move-base-y
+			dragListen(me => {
+				let moveLeft = me.clientX - moveBaseX;
+				let moveTop = me.clientY - moveBaseY;
 
 				// 上はみ出し
-				if move-top < 0
-					move-top = 0
+				if (moveTop < 0) moveTop = 0;
 
 				// 左はみ出し
-				if move-left < 0
-					move-left = 0
+				if (moveLeft < 0) moveLeft = 0;
 
 				// 下はみ出し
-				if move-top + window-height > browser-height
-					move-top = browser-height - window-height
+				if (moveTop + windowHeight > browserHeight) moveTop = browserHeight - windowHeight;
 
 				// 右はみ出し
-				if move-left + window-width > browser-width
-					move-left = browser-width - window-width
+				if (moveLeft + windowWidth > browserWidth) moveLeft = browserWidth - windowWidth;
 
-				this.refs.main.style.left = move-left + 'px' 
-				this.refs.main.style.top = move-top + 'px' 
+				this.refs.main.style.left = moveLeft + 'px';
+				this.refs.main.style.top = moveTop + 'px';
+			});
+		};
 
 		// 上ハンドル掴み時
-		this.on-top-handle-mousedown = (e) => {
+		this.onTopHandleMousedown = e => {
 			e.preventDefault();
 
-			base = e.client-y
-			height = parse-int((get-computed-style this.refs.main, '').height, 10)
-			top = parse-int((get-computed-style this.refs.main, '').top, 10)
+			const base = e.clientY;
+			const height = parseInt(getComputedStyle(this.refs.main, '').height, 10);
+			const top = parseInt(getComputedStyle(this.refs.main, '').top, 10);
 
 			// 動かした時
-			drag-listen (me) =>
-				move = me.client-y - base
-				if top + move > 0
-					if height + -move > @min-height
-						@apply-transform-height height + -move
-						@apply-transform-top top + move
-					else // 最小の高さより小さくなろうとした時
-						@apply-transform-height @min-height
-						@apply-transform-top top + (height - @min-height)
-				else // 上のはみ出し時
-					@apply-transform-height top + height
-					@apply-transform-top 0
+			dragListen(me => {
+				const move = me.clientY - base;
+				if (top + move > 0) {
+					if (height + -move > this.minHeight) {
+						this.applyTransformHeight(height + -move);
+						this.applyTransformTop(top + move);
+					} else { // 最小の高さより小さくなろうとした時
+						this.applyTransformHeight(this.minHeight);
+						this.applyTransformTop(top + (height - this.minHeight));
+					}
+				} else { // 上のはみ出し時
+					this.applyTransformHeight(top + height);
+					this.applyTransformTop(0);
+				}
+			});
+		};
 
 		// 右ハンドル掴み時
-		this.on-right-handle-mousedown = (e) => {
+		this.onRightHandleMousedown = e => {
 			e.preventDefault();
 
-			base = e.client-x
-			width = parse-int((get-computed-style this.refs.main, '').width, 10)
-			left = parse-int((get-computed-style this.refs.main, '').left, 10)
-			browser-width = window.inner-width
+			const base = e.clientX;
+			const width = parseInt(getComputedStyle(this.refs.main, '').width, 10);
+			const left = parseInt(getComputedStyle(this.refs.main, '').left, 10);
+			const browserWidth = window.innerWidth;
 
 			// 動かした時
-			drag-listen (me) =>
-				move = me.client-x - base
-				if left + width + move < browser-width
-					if width + move > @min-width
-						@apply-transform-width width + move
-					else // 最小の幅より小さくなろうとした時
-						@apply-transform-width @min-width
-				else // 右のはみ出し時
-					@apply-transform-width browser-width - left
+			dragListen(me => {
+				const move = me.clientX - base;
+				if (left + width + move < browserWidth) {
+					if (width + move > this.minWidth) {
+						this.applyTransformWidth(width + move);
+					} else { // 最小の幅より小さくなろうとした時
+						this.applyTransformWidth(this.minWidth);
+					}
+				} else { // 右のはみ出し時
+					this.applyTransformWidth(browserWidth - left);
+				}
+			});
+		};
 
 		// 下ハンドル掴み時
-		this.on-bottom-handle-mousedown = (e) => {
+		this.onBottomHandleMousedown = e => {
 			e.preventDefault();
 
-			base = e.client-y
-			height = parse-int((get-computed-style this.refs.main, '').height, 10)
-			top = parse-int((get-computed-style this.refs.main, '').top, 10)
-			browser-height = window.inner-height
+			const base = e.clientY;
+			const height = parseInt(getComputedStyle(this.refs.main, '').height, 10);
+			const top = parseInt(getComputedStyle(this.refs.main, '').top, 10);
+			const browserHeight = window.innerHeight;
 
 			// 動かした時
-			drag-listen (me) =>
-				move = me.client-y - base
-				if top + height + move < browser-height
-					if height + move > @min-height
-						@apply-transform-height height + move
-					else // 最小の高さより小さくなろうとした時
-						@apply-transform-height @min-height
-				else // 下のはみ出し時
-					@apply-transform-height browser-height - top
+			dragListen(me => {
+				const move = me.clientY - base;
+				if (top + height + move < browserHeight) {
+					if (height + move > this.minHeight) {
+						return this.applyTransformHeight(height + move);
+					} else { // 最小の高さより小さくなろうとした時
+						return this.applyTransformHeight(this.minHeight);
+					}
+				} else { // 下のはみ出し時
+					return this.applyTransformHeight(browserHeight - top);
+				}
+			});
+		};
 
 		// 左ハンドル掴み時
-		this.on-left-handle-mousedown = (e) => {
+		this.onLeftHandleMousedown = e => {
 			e.preventDefault();
 
-			base = e.client-x
-			width = parse-int((get-computed-style this.refs.main, '').width, 10)
-			left = parse-int((get-computed-style this.refs.main, '').left, 10)
+			const base = e.clientX;
+			const width = parseInt(getComputedStyle(this.refs.main, '').width, 10);
+			const left = parseInt(getComputedStyle(this.refs.main, '').left, 10);
 
 			// 動かした時
-			drag-listen (me) =>
-				move = me.client-x - base
-				if left + move > 0
-					if width + -move > @min-width
-						@apply-transform-width width + -move
-						@apply-transform-left left + move
-					else // 最小の幅より小さくなろうとした時
-						@apply-transform-width @min-width
-						@apply-transform-left left + (width - @min-width)
-				else // 左のはみ出し時
-					@apply-transform-width left + width
-					@apply-transform-left 0
+			dragListen(me => {
+				const move = me.clientX - base;
+				if (left + move > 0) {
+					if (width + -move > this.minWidth) {
+						this.applyTransformWidth(width + -move);
+						return this.applyTransformLeft(left + move);
+					} else { // 最小の幅より小さくなろうとした時
+						this.applyTransformWidth(this.minWidth);
+						return this.applyTransformLeft(left + (width - this.minWidth));
+					}
+				} else { // 左のはみ出し時
+					this.applyTransformWidth(left + width);
+					return this.applyTransformLeft(0);
+				}
+			});
+		};
 
 		// 左上ハンドル掴み時
-		this.on-top-left-handle-mousedown = (e) => {
-			this.on-top-handle-mousedown e
-			this.on-left-handle-mousedown e
+		this.onTopLeftHandleMousedown = e => {
+			this.onTopHandleMousedown(e);
+			this.onLeftHandleMousedown(e);
+		};
 
 		// 右上ハンドル掴み時
-		this.on-top-right-handle-mousedown = (e) => {
-			this.on-top-handle-mousedown e
-			this.on-right-handle-mousedown e
+		this.onTopRightHandleMousedown = e => {
+			this.onTopHandleMousedown(e);
+			this.onRightHandleMousedown(e);
+		};
 
 		// 右下ハンドル掴み時
-		this.on-bottom-right-handle-mousedown = (e) => {
-			this.on-bottom-handle-mousedown e
-			this.on-right-handle-mousedown e
+		this.onBottomRightHandleMousedown = e => {
+			this.onBottomHandleMousedown(e);
+			this.onRightHandleMousedown(e);
+		};
 
 		// 左下ハンドル掴み時
-		this.on-bottom-left-handle-mousedown = (e) => {
-			this.on-bottom-handle-mousedown e
-			this.on-left-handle-mousedown e
+		this.onBottomLeftHandleMousedown = e => {
+			this.onBottomHandleMousedown(e);
+			this.onLeftHandleMousedown(e);
+		};
 
 		// 高さを適用
-		this.apply-transform-height = (height) => {
-			this.refs.main.style.height = height + 'px' 
+		this.applyTransformHeight = height => {
+			this.refs.main.style.height = height + 'px';
+		};
 
 		// 幅を適用
-		this.apply-transform-width = (width) => {
-			this.refs.main.style.width = width + 'px' 
+		this.applyTransformWidth = width => {
+			this.refs.main.style.width = width + 'px';
+		};
 
 		// Y座標を適用
-		this.apply-transform-top = (top) => {
-			this.refs.main.style.top = top + 'px' 
+		this.applyTransformTop = top => {
+			this.refs.main.style.top = top + 'px';
+		};
 
 		// X座標を適用
-		this.apply-transform-left = (left) => {
-			this.refs.main.style.left = left + 'px' 
+		this.applyTransformLeft = left => {
+			this.refs.main.style.left = left + 'px';
+		};
 
-		function drag-listen fn
-			window.addEventListener 'mousemove'  fn
-			window.addEventListener 'mouseleave' drag-clear.bind null fn
-			window.addEventListener 'mouseup'    drag-clear.bind null fn
+		function dragListen(fn) {
+			window.addEventListener('mousemove',  fn);
+			window.addEventListener('mouseleave', dragClear.bind(null, fn));
+			window.addEventListener('mouseup',    dragClear.bind(null, fn));
+		}
 
-		function drag-clear fn
-			window.removeEventListener 'mousemove'  fn
-			window.removeEventListener 'mouseleave' drag-clear
-			window.removeEventListener 'mouseup'    drag-clear
+		function dragClear(fn) {
+			window.removeEventListener('mousemove',  fn);
+			window.removeEventListener('mouseleave', dragClear);
+			window.removeEventListener('mouseup',    dragClear);
+		}
 
-		this.ondragover = (e) => {
-			e.dataTransfer.dropEffect = 'none' 
+		this.ondragover = e => {
+			e.dataTransfer.dropEffect = 'none';
+		};
 
-		this.onKeydown = (e) => {
-			if e.which == 27 // Esc
-				if @can-close
+		this.onKeydown = e => {
+			if (e.which == 27) { // Esc
+				if (this.canClose) {
 					e.preventDefault();
 					e.stopPropagation();
-					@close();
+					this.close();
+				}
+			}
+		};
 
-		function contains(parent, child)
-			node = child.parentNode
-			while node?
-				if node == parent
-					return true
-				node = node.parentNode
-			return false
 	</script>
 </mk-window>