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>
|
</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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue