This commit is contained in:
syuilo 2017-02-21 20:05:03 +09:00
parent 2d3e27b60d
commit 8647c1d71c
14 changed files with 198 additions and 267 deletions

View file

@ -309,49 +309,64 @@
const q = this.refs.search.value; const q = this.refs.search.value;
if (q == '') { if (q == '') {
this.searchResult = []; this.searchResult = [];
} else { return;
this.api('users/search', { }
query: q this.api('users/search', {
max: 5 query: q,
}).then((users) => { max: 5
users.forEach (user) => }).then(users => {
user._click = => users.forEach(user => {
this.trigger 'navigate-user' user user._click = () => {
this.searchResult = [] this.trigger('navigate-user', user);
this.searchResult = users this.searchResult = [];
this.update(); };
.catch (err) => });
console.error err this.update({
searchResult: users
});
});
}; };
this.on-search-keydown = e => { this.onSearchKeydown = e => {
const key = e.which; switch (e.which) {
switch (key) case 9: // [TAB]
| 9, 40 => // Key[TAB] or Key[↓] case 40: // [↓]
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
this.refs.searchResult.childNodes[0].focus(); this.refs.searchResult.childNodes[0].focus();
break;
}
}; };
this.on-searchResult-keydown = (i, e) => { this.onSearchResultKeydown = (i, e) => {
key = e.which const cancel = () => {
switch (key) e.preventDefault();
| 10, 13 => // Key[ENTER] e.stopPropagation();
e.preventDefault(); };
e.stopPropagation(); switch (true) {
case e.which == 10: // [ENTER]
case e.which == 13: // [ENTER]
cancel();
this.searchResult[i]._click(); this.searchResult[i]._click();
| 27 => // Key[ESC] break;
e.preventDefault();
e.stopPropagation(); case e.which == 27: // [ESC]
cancel();
this.refs.search.focus(); this.refs.search.focus();
| 38 => // Key[↑] break;
e.preventDefault();
e.stopPropagation(); case e.which == 9 && e.shiftKey: // [TAB] + [Shift]
case e.which == 38: // [↑]
cancel();
(this.refs.searchResult.childNodes[i].previousElementSibling || this.refs.searchResult.childNodes[this.searchResult.length - 1]).focus(); (this.refs.searchResult.childNodes[i].previousElementSibling || this.refs.searchResult.childNodes[this.searchResult.length - 1]).focus();
| 9, 40 => // Key[TAB] or Key[↓] break;
e.preventDefault();
e.stopPropagation(); case e.which == 9: // [TAB]
case e.which == 40: // [↓]
cancel();
(this.refs.searchResult.childNodes[i].nextElementSibling || this.refs.searchResult.childNodes[0]).focus(); (this.refs.searchResult.childNodes[i].nextElementSibling || this.refs.searchResult.childNodes[0]).focus();
break;
}
}; };
</script> </script>

View file

@ -63,18 +63,24 @@
</style> </style>
<script> <script>
this.mode = 'signin' this.mode = 'signin';
this.signup = () => { this.signup = () => {
this.mode = 'signup' this.update({
this.update(); mode: 'signup'
});
};
this.signin = () => { this.signin = () => {
this.mode = 'signin' this.update({
this.update(); mode: 'signin'
});
};
this.introduction = () => { this.introduction = () => {
this.mode = 'introduction' this.update({
this.update(); mode: 'introduction'
});
};
</script> </script>
</mk-entrance> </mk-entrance>

View file

@ -120,11 +120,15 @@
</style> </style>
<script> <script>
this.on('mount', () => { this.on('mount', () => {
this.refs.signin.on('user', (user) => { this.refs.signin.on('user', user => {
@update do this.update({
user: user user: user
});
});
});
this.introduction = () => { this.introduction = () => {
this.parent.introduction! this.parent.introduction();
};
</script> </script>
</mk-entrance-signin> </mk-entrance-signin>

View file

@ -43,9 +43,5 @@
> i > i
padding 14px padding 14px
</style> </style>
</mk-entrance-signup> </mk-entrance-signup>

View file

@ -5,7 +5,6 @@
<style> <style>
:scope :scope
display block display block
</style> </style>
<script> <script>
this.mixin('i'); this.mixin('i');
@ -14,34 +13,37 @@
this.mixin('stream'); this.mixin('stream');
this.mixin('get-post-summary'); this.mixin('get-post-summary');
this.unread-count = 0 this.unreadCount = 0;
this.page = switch this.opts.mode this.page = this.opts.mode || 'timeline';
| 'timelie' => 'home'
| 'mentions' => 'mentions'
| _ => 'home'
this.on('mount', () => { this.on('mount', () => {
this.refs.ui.refs.home.on('loaded', () => { this.refs.ui.refs.home.on('loaded', () => {
this.Progress.done(); this.Progress.done();
});
document.title = 'Misskey' document.title = 'Misskey';
this.Progress.start(); this.Progress.start();
this.stream.on 'post' this.on-stream-post this.stream.on('post', this.onStreamPost);
document.addEventListener 'visibilitychange' @window-onVisibilitychange, false document.addEventListener('visibilitychange', this.windowOnVisibilitychange, false);
});
this.on('unmount', () => { this.on('unmount', () => {
this.stream.off 'post' this.on-stream-post this.stream.off('post', this.onStreamPost);
document.removeEventListener 'visibilitychange' @window-onVisibilitychange document.removeEventListener('visibilitychange', this.windowOnVisibilitychange);
});
this.on-stream-post = (post) => { this.onStreamPost = post => {
if document.hidden and post.user_id !== this.I.id if (document.hidden && post.user_id != this.I.id) {
@unread-count++ this.unreadCount++;
document.title = '(' + @unread-count + ') ' + @get-post-summary post document.title = `(${this.unreadCount}) ${this.getPostSummary(post)}`;
}
};
this.window-onVisibilitychange = () => { this.windowOnVisibilitychange = () => {
if !document.hidden if (!document.hidden) {
this.unread-count = 0 this.unreadCount = 0;
document.title = 'Misskey' document.title = 'Misskey';
}
};
</script> </script>
</mk-home-page> </mk-home-page>

View file

@ -1,54 +1,11 @@
<mk-not-found> <mk-not-found>
<mk-ui> <mk-ui>
<main> <main>
<h1>Not Found</h1><img src="/_/resources/rogge.jpg" alt=""/> <h1>Not Found</h1>
<div class="mask"></div>
</main> </main>
</mk-ui> </mk-ui>
<style> <style>
:scope :scope
display block display block
main
display block
width 600px
margin 32px auto
> img
display block
width 600px
height 459px
pointer-events none
user-select none
border-radius 16px
box-shadow 0 0 16px rgba(0, 0, 0, 0.1)
> h1
display block
margin 0
padding 0
position absolute
top 260px
left 225px
transform rotate(-12deg)
z-index 2
color #444
font-size 24px
line-height 20px
> .mask
position absolute
top 262px
left 217px
width 126px
height 18px
transform rotate(-12deg)
background #D6D5DA
border-radius 2px 6px 7px 6px
</style> </style>
</mk-not-found> </mk-not-found>

View file

@ -18,15 +18,18 @@
<script> <script>
this.mixin('ui-progress'); this.mixin('ui-progress');
this.post = this.opts.post this.post = this.opts.post;
this.on('mount', () => { this.on('mount', () => {
this.Progress.start(); this.Progress.start();
this.refs.ui.refs.detail.on('post-fetched', () => { this.refs.ui.refs.detail.on('post-fetched', () => {
this.Progress.set(0.5); this.Progress.set(0.5);
});
this.refs.ui.refs.detail.on('loaded', () => { this.refs.ui.refs.detail.on('loaded', () => {
this.Progress.done(); this.Progress.done();
});
});
</script> </script>
</mk-post-page> </mk-post-page>

View file

@ -5,7 +5,6 @@
<style> <style>
:scope :scope
display block display block
</style> </style>
<script> <script>
this.mixin('ui-progress'); this.mixin('ui-progress');
@ -15,5 +14,7 @@
this.refs.ui.refs.search.on('loaded', () => { this.refs.ui.refs.search.on('loaded', () => {
this.Progress.done(); this.Progress.done();
});
});
</script> </script>
</mk-search-page> </mk-search-page>

View file

@ -5,21 +5,23 @@
<style> <style>
:scope :scope
display block display block
</style> </style>
<script> <script>
this.mixin('ui-progress'); this.mixin('ui-progress');
this.user = this.opts.user this.user = this.opts.user;
this.on('mount', () => { this.on('mount', () => {
this.Progress.start(); this.Progress.start();
this.refs.ui.refs.user.on('user-fetched', (user) => { this.refs.ui.refs.user.on('user-fetched', user => {
this.Progress.set(0.5); this.Progress.set(0.5);
document.title = user.name + ' | Misskey' document.title = user.name + ' | Misskey'
});
this.refs.ui.refs.user.on('loaded', () => { this.refs.ui.refs.user.on('loaded', () => {
this.Progress.done(); this.Progress.done();
});
});
</script> </script>
</mk-user-page> </mk-user-page>

View file

@ -31,56 +31,61 @@
this.mixin('api'); this.mixin('api');
this.mixin('get-post-summary'); this.mixin('get-post-summary');
this.query = this.opts.query this.query = this.opts.query;
this.is-loading = true this.isLoading = true;
this.is-empty = false this.isEmpty = false;
this.more-loading = false this.moreLoading = false;
this.page = 0 this.page = 0;
this.on('mount', () => { this.on('mount', () => {
document.addEventListener 'keydown' this.on-document-keydown document.addEventListener('keydown', this.onDocumentKeydown);
window.addEventListener 'scroll' this.on-scroll window.addEventListener('scroll', this.onScroll);
this.api('posts/search', { this.api('posts/search', {
query: this.query query: this.query
}).then((posts) => { }).then(posts => {
this.is-loading = false this.update({
this.is-empty = posts.length == 0 isLoading: false,
this.update(); isEmpty: posts.length == 0
this.refs.timeline.set-posts posts });
this.refs.timeline.setPosts(posts);
this.trigger('loaded'); this.trigger('loaded');
.catch (err) => });
console.error err });
this.on('unmount', () => { this.on('unmount', () => {
document.removeEventListener 'keydown' this.on-document-keydown document.removeEventListener('keydown', this.onDocumentKeydown);
window.removeEventListener 'scroll' this.on-scroll window.removeEventListener('scroll', this.onScroll);
});
this.on-document-keydown = (e) => { this.onDocumentKeydown = e => {
tag = e.target.tag-name.to-lower-case! if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
if tag != 'input' and tag != 'textarea' if (e.which == 84) { // t
if e.which == 84 // t
this.refs.timeline.focus(); this.refs.timeline.focus();
}
}
};
this.more = () => { this.more = () => {
if @more-loading or @is-loading or this.timeline.posts.length == 0 if (this.moreLoading || this.isLoading || this.timeline.posts.length == 0) return;
return this.update({
this.more-loading = true moreLoading: true
this.update(); });
this.api('posts/search', { this.api('posts/search', {
query: this.query query: this.query,
page: this.page + 1 page: this.page + 1
}).then((posts) => { }).then(posts => {
this.more-loading = false this.update({
this.page++ moreLoading: false,
this.update(); page: page + 1
this.refs.timeline.prepend-posts posts });
.catch (err) => this.refs.timeline.prependPosts(posts);
console.error err });
};
this.on-scroll = () => { this.onScroll = () => {
current = window.scrollY + window.inner-height const current = window.scrollY + window.innerHeight;
if current > document.body.offset-height - 16 // 遊び if (current > document.body.offsetHeight - 16) this.more();
@more! };
</script> </script>
</mk-search-posts> </mk-search-posts>

View file

@ -23,10 +23,12 @@
</style> </style>
<script> <script>
this.query = this.opts.query this.query = this.opts.query;
this.on('mount', () => { this.on('mount', () => {
this.refs.posts.on('loaded', () => { this.refs.posts.on('loaded', () => {
this.trigger('loaded'); this.trigger('loaded');
});
});
</script> </script>
</mk-search> </mk-search>

View file

@ -60,27 +60,33 @@
this.mixin('api'); this.mixin('api');
this.mixin('is-promise'); this.mixin('is-promise');
this.images = [] this.images = [];
this.initializing = true this.initializing = true;
this.user = null;
this.user = null this.userPromise = this.isPromise(this.opts.user)
this.user-promise = if @is-promise this.opts.user then this.opts.user else Promise.resolve this.opts.user ? this.opts.user
: Promise.resolve(this.opts.user);
this.on('mount', () => { this.on('mount', () => {
this.user-promise}).then((user) => { this.userPromise.then(user => {
this.user = user this.update({
this.update(); user: user
});
this.api('users/posts', { this.api('users/posts', {
user_id: this.user.id user_id: this.user.id,
with_media: true with_media: true,
limit: 9posts limit: 9
}).then((posts) => { }).then(posts => {
this.initializing = false this.initializing = false;
posts.forEach (post) => posts.forEach(post => {
post.media.forEach (image) => post.media.forEach(media => {
if @images.length < 9 if (this.images.length < 9) this.images.push(image);
@images.push image });
});
this.update(); this.update();
});
});
});
</script> </script>
</mk-user-photos> </mk-user-photos>

View file

@ -1,71 +0,0 @@
<mk-user-posts-graph>
<canvas ref="canv" width="750" height="250"></canvas>
<style>
:scope
display block
width 750px
height 250px
</style>
<script>
this.mixin('api');
this.mixin('is-promise');
this.user = null
this.user-promise = if @is-promise this.opts.user then this.opts.user else Promise.resolve this.opts.user
this.on('mount', () => {
user <~ this.user-promise.then
this.user = user
this.update();
this.api('aggregation/users/post', {
user_id: this.user.id
limit: 30days
}).then((data) => {
data = data.reverse!
new Chart this.refs.canv, do
type: 'line'
data:
labels: data.map (x, i) => if i % 3 == 2 then x.date.day + '日' else ''
datasets: [
{
label: '投稿'
data: data.map (x) => x.posts
line-tension: 0
point-radius: 0
background-color: '#555'
border-color: 'transparent'
},
{
label: 'Repost'
data: data.map (x) => x.reposts
line-tension: 0
point-radius: 0
background-color: '#a2d61e'
border-color: 'transparent'
},
{
label: '返信'
data: data.map (x) => x.replies
line-tension: 0
point-radius: 0
background-color: '#F7796C'
border-color: 'transparent'
}
]
options:
responsive: false
scales:
x-axes: [
{
stacked: true
}
]
y-axes: [
{
stacked: true
}
]
</script>
</mk-user-posts-graph>

View file

@ -100,44 +100,47 @@
this.mixin('i'); this.mixin('i');
this.mixin('api'); this.mixin('api');
this.u = this.opts.user this.u = this.opts.user;
this.user = null this.user = null;
this.user-promise = this.userPromise =
if typeof @u == 'string' typeof this.u == 'string' ?
new Promise (resolve, reject) => new Promise((resolve, reject) => {
this.api('users/show', { this.api('users/show', {
user_id: if @u.0 == '@' then undefined else @u user_id: this.u[0] == '@' ? undefined : this.u,
username: if @u.0 == '@' then @u.substr 1 else undefined username: this.u[0] == '@' ? this.u.substr(1) : undefined
}).then((user) => { }).then(resolve);
resolve user })
else : Promise.resolve(this.u);
Promise.resolve @u
this.on('mount', () => { this.on('mount', () => {
this.user-promise}).then((user) => { this.userPromise.then(user => {
this.user = user this.update({
this.update(); user: user
});
});
Velocity(this.root, { Velocity(this.root, {
opacity: 0 opacity: 0,
'margin-top': '-8px' 'margin-top': '-8px'
} 0ms }, 0);
Velocity(this.root, { Velocity(this.root, {
opacity: 1 opacity: 1,
'margin-top': 0 'margin-top': 0
}, { }, {
duration: 200ms duration: 200,
easing: 'ease-out' easing: 'ease-out'
} });
});
this.close = () => { this.close = () => {
Velocity(this.root, { Velocity(this.root, {
opacity: 0 opacity: 0,
'margin-top': '-8px' 'margin-top': '-8px'
}, { }, {
duration: 200ms duration: 200,
easing: 'ease-out' easing: 'ease-out',
complete: => this.unmount(); complete: () => this.unmount()
} });
};
</script> </script>
</mk-user-preview> </mk-user-preview>