natty
/
misskey-awawa
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/web/app/common/tags/messaging/index.tag
View File

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

20
src/web/app/desktop/tags/pages/entrance.tag
View File

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

10
src/web/app/desktop/tags/pages/entrance/signin.tag
View File

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

4
src/web/app/desktop/tags/pages/entrance/signup.tag
View File

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

42
src/web/app/desktop/tags/pages/home.tag
View File

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

45
src/web/app/desktop/tags/pages/not-found.tag
View File

@ -1,54 +1,11 @@
<mk-not-found>
<mk-ui>
<main>
<h1>Not Found</h1><img src="/_/resources/rogge.jpg" alt=""/>
<div class="mask"></div>
<h1>Not Found</h1>
</main>
</mk-ui>
<style>
:scope
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>
</mk-not-found>

5
src/web/app/desktop/tags/pages/post.tag
View File

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

3
src/web/app/desktop/tags/pages/search.tag
View File

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

8
src/web/app/desktop/tags/pages/user.tag
View File

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

77
src/web/app/desktop/tags/search-posts.tag
View File

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

4
src/web/app/desktop/tags/search.tag
View File

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

40
src/web/app/desktop/tags/user-photos.tag
View File

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

71
src/web/app/desktop/tags/user-posts-graph.tag
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>

57
src/web/app/desktop/tags/user-preview.tag
View File

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