mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-12-02 16:58:11 +09:00
Code

wip

Browse Source
This commit is contained in:
syuilo 2017-02-21 00:44:18 +09:00
parent 47ec35f81b
commit beb04e918e
6 changed files with 431 additions and 387 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/web/app/desktop/tags/ui-header-account.tag
View File

@ -159,54 +159,54 @@
</style> </style>
<script> <script>
const contains = require('../../common/scripts/contains');
this.mixin('i'); this.mixin('i');
this.mixin('signout'); this.mixin('signout');
this.is-open = false this.isOpen = false;
this.on('before-unmount', () => { this.on('before-unmount', () => {
@close(); this.close();
});
this.toggle = () => { this.toggle = () => {
if @is-open this.isOpen ? this.close() : this.open();
@close(); };
else
@open!
this.open = () => { this.open = () => {
this.is-open = true this.update({
this.update(); isOpen: true
all = document.query-selector-all 'body *' });
Array.prototype.forEach.call all, (el) => document.querySelectorAll('body *').forEach(el => {
el.addEventListener 'mousedown' @mousedown el.addEventListener('mousedown', this.mousedown);
});
};
this.close = () => { this.close = () => {
this.is-open = false this.update({
this.update(); isOpen: false
all = document.query-selector-all 'body *' });
Array.prototype.forEach.call all, (el) => document.querySelectorAll('body *').forEach(el => {
el.removeEventListener 'mousedown' @mousedown el.removeEventListener('mousedown', this.mousedown);
});
};
this.mousedown = (e) => { this.mousedown = e => {
e.preventDefault(); e.preventDefault();
if (!contains this.root, e.target) and (this.root != e.target) if (!contains(this.root, e.target) && this.root != e.target) this.close();
@close(); return false;
return false };
this.drive = () => { this.drive = () => {
@close(); this.close();
riot.mount document.body.appendChild(document.createElement('mk-drive-browser-window')); riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-window')));
};
this.settings = () => { this.settings = () => {
@close(); this.close();
riot.mount document.body.appendChild(document.createElement('mk-settings-window')); 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
</script> </script>
</mk-ui-header-account> </mk-ui-header-account>

39
src/web/app/desktop/tags/ui-header-clock.tag
View File

@ -1,6 +1,9 @@
<mk-ui-header-clock> <mk-ui-header-clock>
<div class="header"> <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>
<div class="content"> <div class="content">
<mk-analog-clock></mk-analog-clock> <mk-analog-clock></mk-analog-clock>
@ -13,7 +16,7 @@
> .header > .header
padding 0 12px padding 0 12px
text-align center text-align center
font-size 0.5em font-size 10px
&, * &, *
cursor: default cursor: default
@ -59,29 +62,21 @@
</style> </style>
<script> <script>
this.draw = () => { this.draw = () => {
const now = new Date(); this.now = new Date();
this.yyyy = now.getFullYear();
yyyy = now.getFullYear() this.mm = ('0' + (now.getMonth() + 1)).slice(-2);
mm = (\0 + (now.getMonth() + 1)).slice -2 this.dd = ('0' + now.getDate()).slice(-2);
dd = (\0 + now.getDate()).slice -2 this.hh = ('0' + now.getHours()).slice(-2);
yyyymmdd = "<span class='yyyymmdd'>#yyyy/#mm/#dd</span>" this.nn = ('0' + now.getMinutes()).slice(-2);
};
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.on('mount', () => { this.on('mount', () => {
@draw! this.draw();
this.clock = setInterval @draw, 1000ms this.clock = setInterval(this.draw, 1000);
});
this.on('unmount', () => { this.on('unmount', () => {
clearInterval @clock clearInterval(this.clock);
});
</script> </script>
</mk-ui-header-clock> </mk-ui-header-clock>

198
src/web/app/desktop/tags/ui-header-nav.tag
View File

@ -1,113 +1,139 @@
<mk-ui-header-nav> <mk-ui-header-nav>
<ul if={ SIGNIN }> <ul if={ SIGNIN }>
<li class="home { active: page == 'home' }"><a href={ CONFIG.url }><i class="fa fa-home"></i> <li class="home { active: page == 'home' }">
<p>ホーム</p></a></li> <a href={ CONFIG.url }>
<li class="messaging"><a onclick={ messaging }><i class="fa fa-comments"></i> <i class="fa fa-home"></i>
<p>メッセージ</p><i class="fa fa-circle" if={ hasUnreadMessagingMessages }></i></a></li> <p>ホーム</p>
<li class="info"><a href="https://twitter.com/misskey_xyz" target="_blank"><i class="fa fa-info"></i> </a>
<p>お知らせ</p></a></li> </li>
<li class="tv"><a href="https://misskey.tk" target="_blank"><i class="fa fa-television"></i> <li class="messaging">
<p>MisskeyTV™</p></a></li> <a onclick={ messaging }>
<style> <i class="fa fa-comments"></i>
:scope <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 display inline-block
margin 0 margin 0
padding 0 padding 0
line-height 3rem
vertical-align top vertical-align top
line-height 3rem
list-style none
> ul > li
display inline-block display inline-block
margin 0
padding 0
vertical-align top vertical-align top
line-height 3rem height 48px
list-style none line-height 48px
> li
display inline-block
vertical-align top
height 48px
line-height 48px
&.active
> a
border-bottom solid 3px $theme-color
&.active
> a > a
display inline-block border-bottom solid 3px $theme-color
z-index 1
height 100% > a
padding 0 24px display inline-block
font-size 1em z-index 1
font-variant small-caps height 100%
color #9eaba8 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 text-decoration none
transition none
cursor pointer
* > i:first-child
pointer-events none margin-right 8px
&:hover > i:last-child
color darken(#9eaba8, 20%) margin-left 5px
text-decoration none vertical-align super
font-size 10px
color $theme-color
> i:first-child @media (max-width 1100px)
margin-right 8px margin-left -5px
> i:last-child > p
margin-left 5px display inline
vertical-align super margin 0
font-size 10px
color $theme-color
@media (max-width 1100px) @media (max-width 1100px)
margin-left -5px display none
> p @media (max-width 700px)
display inline padding 0 12px
margin 0
@media (max-width 1100px) </style>
display none <script>
this.mixin('i');
this.mixin('api');
this.mixin('stream');
@media (max-width 700px) this.page = this.opts.page;
padding 0 12px
</style> this.on('mount', () => {
<script> this.stream.on('read_all_messaging_messages', this.onReadAllMessagingMessages);
this.mixin('i'); this.stream.on('unread_messaging_message', this.onUnreadMessagingMessage);
this.mixin('api');
this.mixin('stream');
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.on('unmount', () => {
this.stream.on 'read_all_messaging_messages' this.on-read-all-messaging-messages this.stream.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
this.stream.on 'unread_messaging_message' this.on-unread-messaging-message this.stream.off('unread_messaging_message', this.onUnreadMessagingMessage);
});
// Fetch count of unread messaging messages this.onReadAllMessagingMessages = () => {
this.api 'messaging/unread' this.update({
}).then((count) => { hasUnreadMessagingMessages: false
if count.count > 0 });
this.has-unread-messaging-messages = true };
this.update();
this.on('unmount', () => { this.onUnreadMessagingMessage = () => {
this.stream.off 'read_all_messaging_messages' this.on-read-all-messaging-messages this.update({
this.stream.off 'unread_messaging_message' this.on-unread-messaging-message hasUnreadMessagingMessages: true
});
};
this.on-read-all-messaging-messages = () => { this.messaging = () => {
this.has-unread-messaging-messages = false riot.mount(document.body.appendChild(document.createElement('mk-messaging-window')));
this.update(); };
</script>
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>
</mk-ui-header-nav> </mk-ui-header-nav>

50
src/web/app/desktop/tags/ui-header-notifications.tag
View File

@ -75,40 +75,36 @@
</style> </style>
<script> <script>
this.is-open = false const contains = require('../../common/scripts/contains');
this.isOpen = false;
this.toggle = () => { this.toggle = () => {
if @is-open this.isOpen ? this.close() : this.open();
@close(); };
else
@open!
this.open = () => { this.open = () => {
this.is-open = true this.update({
this.update(); isOpen: true
all = document.query-selector-all 'body *' });
Array.prototype.forEach.call all, (el) => document.querySelectorAll('body *').forEach(el => {
el.addEventListener 'mousedown' @mousedown el.addEventListener('mousedown', this.mousedown);
});
};
this.close = () => { this.close = () => {
this.is-open = false this.update({
this.update(); isOpen: false
all = document.query-selector-all 'body *' });
Array.prototype.forEach.call all, (el) => document.querySelectorAll('body *').forEach(el => {
el.removeEventListener 'mousedown' @mousedown el.removeEventListener('mousedown', this.mousedown);
});
};
this.mousedown = (e) => { this.mousedown = e => {
e.preventDefault(); e.preventDefault();
if (!contains this.root, e.target) and (this.root != e.target) if (!contains(this.root, e.target) && this.root != e.target) this.close();
@close(); return false;
return false };
function contains(parent, child)
node = child.parentNode
while node?
if node == parent
return true
node = node.parentNode
return false
</script> </script>
</mk-ui-header-notifications> </mk-ui-header-notifications>

5
src/web/app/desktop/tags/ui-header-search.tag
View File

@ -34,8 +34,9 @@
<script> <script>
this.mixin('page'); this.mixin('page');
this.onsubmit = (e) => { this.onsubmit = e => {
e.preventDefault(); e.preventDefault();
this.page '/search:' + this.refs.q.value this.page('/search:' + this.refs.q.value);
};
</script> </script>
</mk-ui-header-search> </mk-ui-header-search>

460
src/web/app/desktop/tags/window.tag
View File

@ -192,328 +192,354 @@
</style> </style>
<script> <script>
this.min-height = 40px const contains = require('../../common/scripts/contains');
this.min-width = 200px
this.is-modal = if this.opts.is-modal? then this.opts.is-modal else false this.minHeight = 40;
this.can-close = if this.opts.can-close? then this.opts.can-close else true this.minWidth = 200;
this.is-flexible = !this.opts.height?
this.can-resize = not @is-flexible 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.on('mount', () => {
this.refs.main.style.width = this.opts.width || '530px' this.refs.main.style.width = this.opts.width || '530px';
this.refs.main.style.height = this.opts.height || 'auto' this.refs.main.style.height = this.opts.height || 'auto';
this.refs.main.style.top = '15%' 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.left = (window.innerWidth / 2) - (this.refs.main.offsetWidth / 2) + 'px';
this.refs.header.addEventListener 'contextmenu' (e) => this.refs.header.addEventListener('contextmenu', e => {
e.preventDefault(); e.preventDefault();
});
window.addEventListener 'resize' this.on-browser-resize window.addEventListener('resize', this.onBrowserResize);
@open! this.open();
});
this.on('unmount', () => { this.on('unmount', () => {
window.removeEventListener 'resize' this.on-browser-resize window.removeEventListener('resize', this.onBrowserResize);
});
this.on-browser-resize = () => { this.onBrowserResize = () => {
position = this.refs.main.get-bounding-client-rect! const position = this.refs.main.getBoundingClientRect();
browser-width = window.inner-width const browserWidth = window.innerWidth;
browser-height = window.inner-height const browserHeight = window.innerHeight;
window-width = this.refs.main.offset-width const windowWidth = this.refs.main.offsetWidth;
window-height = this.refs.main.offset-height const windowHeight = this.refs.main.offsetHeight;
if (position.left < 0) this.refs.main.style.left = 0;
if position.left < 0 if (position.top < 0) this.refs.main.style.top = 0;
this.refs.main.style.left = 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';
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.open = () => { this.open = () => {
this.trigger('opening'); this.trigger('opening');
@top! this.top();
if @is-modal if (this.isModal) {
this.refs.bg.style.pointer-events = 'auto' this.refs.bg.style.pointerEvents = 'auto';
Velocity(this.refs.bg, 'finish' true Velocity(this.refs.bg, 'finish', true);
Velocity(this.refs.bg, { Velocity(this.refs.bg, {
opacity: 1 opacity: 1
}, { }, {
queue: false queue: false,
duration: 100ms duration: 100,
easing: 'linear' 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'
} }
#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'); this.trigger('opened');
, 300ms }, 300);
};
this.close = () => { this.close = () => {
this.trigger('closing'); this.trigger('closing');
if @is-modal if (this.isModal) {
this.refs.bg.style.pointer-events = 'none' this.refs.bg.style.pointerEvents = 'none';
Velocity(this.refs.bg, 'finish' true Velocity(this.refs.bg, 'finish', true);
Velocity(this.refs.bg, { Velocity(this.refs.bg, {
opacity: 0 opacity: 0
}, { }, {
queue: false queue: false,
duration: 300ms duration: 300,
easing: 'linear' 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 ]
} }
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'); this.trigger('closed');
, 300ms }, 300);
};
// 最前面へ移動します // 最前面へ移動します
this.top = () => { this.top = () => {
z = 0 let z = 0;
ws = document.query-selector-all 'mk-window' const ws = document.querySelectorAll('mk-window');
ws.forEach (w) !=> ws.forEach(w => {
if w == this.root then return if (w == this.root) return;
m = w.query-selector ':scope > .main' const m = w.querySelector(':scope > .main');
mz = Number(document.default-view.get-computed-style m, null .z-index) const mz = Number(document.defaultView.getComputedStyle(m, null).zIndex);
if mz > z then z := mz if (mz > z) z = mz;
});
if z > 0 if (z > 0) {
this.refs.main.style.z-index = z + 1 this.refs.main.style.zIndex = z + 1;
if @is-modal then this.refs.bg.style.z-index = z + 1 if (this.isModal) this.refs.bg.style.zIndex = z + 1;
}
};
this.repel-move = (e) => { this.repelMove = e => {
e.stopPropagation(); e.stopPropagation();
return true return true;
};
this.bg-click = () => { this.bgClick = () => {
if @can-close if (this.canClose) this.close();
@close(); };
this.on-body-mousedown = (e) => { this.onBodyMousedown = () => {
@top! this.top();
true };
// ヘッダー掴み時 // ヘッダー掴み時
this.on-header-mousedown = (e) => { this.onHeaderMousedown = e => {
e.preventDefault(); e.preventDefault();
if not contains this.refs.main, document.active-element if (!contains(this.refs.main, document.activeElement)) this.refs.main.focus();
this.refs.main.focus();
position = this.refs.main.get-bounding-client-rect! const position = this.refs.main.getBoundingClientRect();
click-x = e.client-x const clickX = e.clientX;
click-y = e.client-y const clickY = e.clientY;
move-base-x = click-x - position.left const moveBaseX = clickX - position.left;
move-base-y = click-y - position.top const moveBaseY = clickY - position.top;
browser-width = window.inner-width const browserWidth = window.innerWidth;
browser-height = window.inner-height const browserHeight = window.innerHeight;
window-width = this.refs.main.offset-width const windowWidth = this.refs.main.offsetWidth;
window-height = this.refs.main.offset-height const windowHeight = this.refs.main.offsetHeight;
// 動かした時 // 動かした時
drag-listen (me) => dragListen(me => {
move-left = me.client-x - move-base-x let moveLeft = me.clientX - moveBaseX;
move-top = me.client-y - move-base-y let moveTop = me.clientY - moveBaseY;
// 上はみ出し // 上はみ出し
if move-top < 0 if (moveTop < 0) moveTop = 0;
move-top = 0
// 左はみ出し // 左はみ出し
if move-left < 0 if (moveLeft < 0) moveLeft = 0;
move-left = 0
// 下はみ出し // 下はみ出し
if move-top + window-height > browser-height if (moveTop + windowHeight > browserHeight) moveTop = browserHeight - windowHeight;
move-top = browser-height - window-height
// 右はみ出し // 右はみ出し
if move-left + window-width > browser-width if (moveLeft + windowWidth > browserWidth) moveLeft = browserWidth - windowWidth;
move-left = browser-width - window-width
this.refs.main.style.left = move-left + 'px' this.refs.main.style.left = moveLeft + 'px';
this.refs.main.style.top = move-top + 'px' this.refs.main.style.top = moveTop + 'px';
});
};
// 上ハンドル掴み時 // 上ハンドル掴み時
this.on-top-handle-mousedown = (e) => { this.onTopHandleMousedown = e => {
e.preventDefault(); e.preventDefault();
base = e.client-y const base = e.clientY;
height = parse-int((get-computed-style this.refs.main, '').height, 10) const height = parseInt(getComputedStyle(this.refs.main, '').height, 10);
top = parse-int((get-computed-style this.refs.main, '').top, 10) const top = parseInt(getComputedStyle(this.refs.main, '').top, 10);
// 動かした時 // 動かした時
drag-listen (me) => dragListen(me => {
move = me.client-y - base const move = me.clientY - base;
if top + move > 0 if (top + move > 0) {
if height + -move > @min-height if (height + -move > this.minHeight) {
@apply-transform-height height + -move this.applyTransformHeight(height + -move);
@apply-transform-top top + move this.applyTransformTop(top + move);
else // 最小の高さより小さくなろうとした時 } else { // 最小の高さより小さくなろうとした時
@apply-transform-height @min-height this.applyTransformHeight(this.minHeight);
@apply-transform-top top + (height - @min-height) this.applyTransformTop(top + (height - this.minHeight));
else // 上のはみ出し時 }
@apply-transform-height top + height } else { // 上のはみ出し時
@apply-transform-top 0 this.applyTransformHeight(top + height);
this.applyTransformTop(0);
}
});
};
// 右ハンドル掴み時 // 右ハンドル掴み時
this.on-right-handle-mousedown = (e) => { this.onRightHandleMousedown = e => {
e.preventDefault(); e.preventDefault();
base = e.client-x const base = e.clientX;
width = parse-int((get-computed-style this.refs.main, '').width, 10) const width = parseInt(getComputedStyle(this.refs.main, '').width, 10);
left = parse-int((get-computed-style this.refs.main, '').left, 10) const left = parseInt(getComputedStyle(this.refs.main, '').left, 10);
browser-width = window.inner-width const browserWidth = window.innerWidth;
// 動かした時 // 動かした時
drag-listen (me) => dragListen(me => {
move = me.client-x - base const move = me.clientX - base;
if left + width + move < browser-width if (left + width + move < browserWidth) {
if width + move > @min-width if (width + move > this.minWidth) {
@apply-transform-width width + move this.applyTransformWidth(width + move);
else // 最小の幅より小さくなろうとした時 } else { // 最小の幅より小さくなろうとした時
@apply-transform-width @min-width this.applyTransformWidth(this.minWidth);
else // 右のはみ出し時 }
@apply-transform-width browser-width - left } else { // 右のはみ出し時
this.applyTransformWidth(browserWidth - left);
}
});
};
// 下ハンドル掴み時 // 下ハンドル掴み時
this.on-bottom-handle-mousedown = (e) => { this.onBottomHandleMousedown = e => {
e.preventDefault(); e.preventDefault();
base = e.client-y const base = e.clientY;
height = parse-int((get-computed-style this.refs.main, '').height, 10) const height = parseInt(getComputedStyle(this.refs.main, '').height, 10);
top = parse-int((get-computed-style this.refs.main, '').top, 10) const top = parseInt(getComputedStyle(this.refs.main, '').top, 10);
browser-height = window.inner-height const browserHeight = window.innerHeight;
// 動かした時 // 動かした時
drag-listen (me) => dragListen(me => {
move = me.client-y - base const move = me.clientY - base;
if top + height + move < browser-height if (top + height + move < browserHeight) {
if height + move > @min-height if (height + move > this.minHeight) {
@apply-transform-height height + move return this.applyTransformHeight(height + move);
else // 最小の高さより小さくなろうとした時 } else { // 最小の高さより小さくなろうとした時
@apply-transform-height @min-height return this.applyTransformHeight(this.minHeight);
else // 下のはみ出し時 }
@apply-transform-height browser-height - top } else { // 下のはみ出し時
return this.applyTransformHeight(browserHeight - top);
}
});
};
// 左ハンドル掴み時 // 左ハンドル掴み時
this.on-left-handle-mousedown = (e) => { this.onLeftHandleMousedown = e => {
e.preventDefault(); e.preventDefault();
base = e.client-x const base = e.clientX;
width = parse-int((get-computed-style this.refs.main, '').width, 10) const width = parseInt(getComputedStyle(this.refs.main, '').width, 10);
left = parse-int((get-computed-style this.refs.main, '').left, 10) const left = parseInt(getComputedStyle(this.refs.main, '').left, 10);
// 動かした時 // 動かした時
drag-listen (me) => dragListen(me => {
move = me.client-x - base const move = me.clientX - base;
if left + move > 0 if (left + move > 0) {
if width + -move > @min-width if (width + -move > this.minWidth) {
@apply-transform-width width + -move this.applyTransformWidth(width + -move);
@apply-transform-left left + move return this.applyTransformLeft(left + move);
else // 最小の幅より小さくなろうとした時 } else { // 最小の幅より小さくなろうとした時
@apply-transform-width @min-width this.applyTransformWidth(this.minWidth);
@apply-transform-left left + (width - @min-width) return this.applyTransformLeft(left + (width - this.minWidth));
else // 左のはみ出し時 }
@apply-transform-width left + width } else { // 左のはみ出し時
@apply-transform-left 0 this.applyTransformWidth(left + width);
return this.applyTransformLeft(0);
}
});
};
// 左上ハンドル掴み時 // 左上ハンドル掴み時
this.on-top-left-handle-mousedown = (e) => { this.onTopLeftHandleMousedown = e => {
this.on-top-handle-mousedown e this.onTopHandleMousedown(e);
this.on-left-handle-mousedown e this.onLeftHandleMousedown(e);
};
// 右上ハンドル掴み時 // 右上ハンドル掴み時
this.on-top-right-handle-mousedown = (e) => { this.onTopRightHandleMousedown = e => {
this.on-top-handle-mousedown e this.onTopHandleMousedown(e);
this.on-right-handle-mousedown e this.onRightHandleMousedown(e);
};
// 右下ハンドル掴み時 // 右下ハンドル掴み時
this.on-bottom-right-handle-mousedown = (e) => { this.onBottomRightHandleMousedown = e => {
this.on-bottom-handle-mousedown e this.onBottomHandleMousedown(e);
this.on-right-handle-mousedown e this.onRightHandleMousedown(e);
};
// 左下ハンドル掴み時 // 左下ハンドル掴み時
this.on-bottom-left-handle-mousedown = (e) => { this.onBottomLeftHandleMousedown = e => {
this.on-bottom-handle-mousedown e this.onBottomHandleMousedown(e);
this.on-left-handle-mousedown e this.onLeftHandleMousedown(e);
};
// 高さを適用 // 高さを適用
this.apply-transform-height = (height) => { this.applyTransformHeight = height => {
this.refs.main.style.height = height + 'px' this.refs.main.style.height = height + 'px';
};
// 幅を適用 // 幅を適用
this.apply-transform-width = (width) => { this.applyTransformWidth = width => {
this.refs.main.style.width = width + 'px' this.refs.main.style.width = width + 'px';
};
// Y座標を適用 // Y座標を適用
this.apply-transform-top = (top) => { this.applyTransformTop = top => {
this.refs.main.style.top = top + 'px' this.refs.main.style.top = top + 'px';
};
// X座標を適用 // X座標を適用
this.apply-transform-left = (left) => { this.applyTransformLeft = left => {
this.refs.main.style.left = left + 'px' this.refs.main.style.left = left + 'px';
};
function drag-listen fn function dragListen(fn) {
window.addEventListener 'mousemove' fn window.addEventListener('mousemove', fn);
window.addEventListener 'mouseleave' drag-clear.bind null fn window.addEventListener('mouseleave', dragClear.bind(null, fn));
window.addEventListener 'mouseup' drag-clear.bind null fn window.addEventListener('mouseup', dragClear.bind(null, fn));
}
function drag-clear fn function dragClear(fn) {
window.removeEventListener 'mousemove' fn window.removeEventListener('mousemove', fn);
window.removeEventListener 'mouseleave' drag-clear window.removeEventListener('mouseleave', dragClear);
window.removeEventListener 'mouseup' drag-clear window.removeEventListener('mouseup', dragClear);
}
this.ondragover = (e) => { this.ondragover = e => {
e.dataTransfer.dropEffect = 'none' e.dataTransfer.dropEffect = 'none';
};
this.onKeydown = (e) => { this.onKeydown = e => {
if e.which == 27 // Esc if (e.which == 27) { // Esc
if @can-close if (this.canClose) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); 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> </script>
</mk-window> </mk-window>