wip
This commit is contained in:
syuilo
parent
47ec35f81b
commit
beb04e918e
6 changed files with 431 additions and 387 deletions
|
|
@ -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'));
|
||||
this.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
|
||||
</script>
|
||||
</mk-ui-header-account>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
queue: false,
|
||||
duration: 100,
|
||||
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');
|
||||
, 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
|
||||
queue: false,
|
||||
duration: 300,
|
||||
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');
|
||||
, 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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue