wip
This commit is contained in:
@@ -21,6 +21,6 @@
|
||||
text-decoration underline
|
||||
</style>
|
||||
<script>
|
||||
@mixin \i
|
||||
this.mixin('i');
|
||||
</script>
|
||||
</mk-api-info>
|
||||
|
||||
@@ -17,18 +17,18 @@
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@mixin \api
|
||||
this.mixin('api');
|
||||
|
||||
@apps = []
|
||||
@fetching = true
|
||||
this.apps = []
|
||||
this.fetching = true
|
||||
|
||||
@on \mount ~>
|
||||
@api \i/authorized_apps
|
||||
.then (apps) ~>
|
||||
@apps = apps
|
||||
@fetching = false
|
||||
@update!
|
||||
.catch (err) ~>
|
||||
this.on('mount', () => {
|
||||
this.api 'i/authorized_apps'
|
||||
.then (apps) =>
|
||||
this.apps = apps
|
||||
this.fetching = false
|
||||
this.update();
|
||||
.catch (err) =>
|
||||
console.error err
|
||||
</script>
|
||||
</mk-authorized-apps>
|
||||
|
||||
@@ -57,8 +57,8 @@
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@retry = ~>
|
||||
@unmount!
|
||||
@opts.retry!
|
||||
retry() {
|
||||
this.unmount();
|
||||
this.opts.retry!
|
||||
</script>
|
||||
</mk-core-error>
|
||||
|
||||
@@ -5,6 +5,6 @@
|
||||
display inline
|
||||
</style>
|
||||
<script>
|
||||
@kind = @opts.type.split \/ .0
|
||||
this.kind = this.opts.type.split '/' .0
|
||||
</script>
|
||||
</mk-file-type-icon>
|
||||
|
||||
@@ -2,9 +2,15 @@
|
||||
<textarea ref="text" onkeypress={ onkeypress } onpaste={ onpaste } placeholder="ここにメッセージを入力"></textarea>
|
||||
<div class="files"></div>
|
||||
<mk-uploader ref="uploader"></mk-uploader>
|
||||
<button class="send" onclick={ send } disabled={ sending } title="メッセージを送信"><i class="fa fa-paper-plane" if={ !sending }></i><i class="fa fa-spinner fa-spin" if={ sending }></i></button>
|
||||
<button class="attach-from-local" type="button" title="PCから画像を添付する"><i class="fa fa-upload"></i></button>
|
||||
<button class="attach-from-drive" type="button" title="アルバムから画像を添付する"><i class="fa fa-folder-open"></i></button>
|
||||
<button class="send" onclick={ send } disabled={ sending } title="メッセージを送信">
|
||||
<i class="fa fa-paper-plane" if={ !sending }></i><i class="fa fa-spinner fa-spin" if={ sending }></i>
|
||||
</button>
|
||||
<button class="attach-from-local" type="button" title="PCから画像を添付する">
|
||||
<i class="fa fa-upload"></i>
|
||||
</button>
|
||||
<button class="attach-from-drive" type="button" title="アルバムから画像を添付する">
|
||||
<i class="fa fa-folder-open"></i>
|
||||
</button>
|
||||
<input name="file" type="file" accept="image/*"/>
|
||||
<style>
|
||||
:scope
|
||||
@@ -111,49 +117,56 @@
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@mixin \api
|
||||
this.mixin('api');
|
||||
|
||||
@onpaste = (e) ~>
|
||||
data = e.clipboard-data
|
||||
items = data.items
|
||||
for i from 0 to items.length - 1
|
||||
item = items[i]
|
||||
switch (item.kind)
|
||||
| \file =>
|
||||
@upload item.get-as-file!
|
||||
onpaste(e) {
|
||||
const data = e.clipboardData;
|
||||
const items = data.items;
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const item = items[i];
|
||||
if (item.kind == 'file') {
|
||||
this.upload(item.getAsFile());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@onkeypress = (e) ~>
|
||||
if (e.which == 10 || e.which == 13) && e.ctrl-key
|
||||
@send!
|
||||
onkeypress(e) {
|
||||
if ((e.which == 10 || e.which == 13) && e.ctrlKey) {
|
||||
this.send();
|
||||
}
|
||||
}
|
||||
|
||||
@select-file = ~>
|
||||
@refs.file.click!
|
||||
selectFile() {
|
||||
this.refs.file.click();
|
||||
}
|
||||
|
||||
@select-file-from-drive = ~>
|
||||
browser = document.body.append-child document.create-element \mk-select-file-from-drive-window
|
||||
event = riot.observable!
|
||||
riot.mount browser, do
|
||||
multiple: true
|
||||
selectFileFromDrive() {
|
||||
const browser = document.body.appendChild(document.createElement('mk-select-file-from-drive-window'));
|
||||
const event = riot.observable();
|
||||
riot.mount(browser, {
|
||||
multiple: true,
|
||||
event: event
|
||||
event.one \selected (files) ~>
|
||||
files.for-each @add-file
|
||||
});
|
||||
event.one('selected', files => {
|
||||
files.forEach(this.addFile);
|
||||
});
|
||||
|
||||
@send = ~>
|
||||
@sending = true
|
||||
@api \messaging/messages/create do
|
||||
user_id: @opts.user.id
|
||||
text: @refs.text.value
|
||||
.then (message) ~>
|
||||
send() {
|
||||
this.sending = true
|
||||
this.api 'messaging/messages/create' do
|
||||
user_id: this.opts.user.id
|
||||
text: this.refs.text.value
|
||||
.then (message) =>
|
||||
@clear!
|
||||
.catch (err) ~>
|
||||
.catch (err) =>
|
||||
console.error err
|
||||
.then ~>
|
||||
@sending = false
|
||||
@update!
|
||||
.then =>
|
||||
this.sending = false
|
||||
this.update();
|
||||
|
||||
@clear = ~>
|
||||
@refs.text.value = ''
|
||||
@files = []
|
||||
@update!
|
||||
clear() {
|
||||
this.refs.text.value = ''
|
||||
this.files = []
|
||||
this.update();
|
||||
</script>
|
||||
</mk-messaging-form>
|
||||
|
||||
@@ -286,72 +286,72 @@
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@mixin \i
|
||||
@mixin \api
|
||||
this.mixin('i');
|
||||
this.mixin('api');
|
||||
|
||||
@search-result = []
|
||||
this.search-result = []
|
||||
|
||||
@on \mount ~>
|
||||
@api \messaging/history
|
||||
.then (history) ~>
|
||||
@is-loading = false
|
||||
history.for-each (message) ~>
|
||||
this.on('mount', () => {
|
||||
this.api 'messaging/history'
|
||||
.then (history) =>
|
||||
this.is-loading = false
|
||||
history.for-each (message) =>
|
||||
message.is_me = message.user_id == @I.id
|
||||
message._click = ~>
|
||||
message._click = =>
|
||||
if message.is_me
|
||||
@trigger \navigate-user message.recipient
|
||||
this.trigger 'navigate-user' message.recipient
|
||||
else
|
||||
@trigger \navigate-user message.user
|
||||
@history = history
|
||||
@update!
|
||||
.catch (err) ~>
|
||||
this.trigger 'navigate-user' message.user
|
||||
this.history = history
|
||||
this.update();
|
||||
.catch (err) =>
|
||||
console.error err
|
||||
|
||||
@search = ~>
|
||||
q = @refs.search.value
|
||||
search() {
|
||||
q = this.refs.search.value
|
||||
if q == ''
|
||||
@search-result = []
|
||||
this.search-result = []
|
||||
else
|
||||
@api \users/search do
|
||||
this.api 'users/search' do
|
||||
query: q
|
||||
max: 5
|
||||
.then (users) ~>
|
||||
users.for-each (user) ~>
|
||||
user._click = ~>
|
||||
@trigger \navigate-user user
|
||||
@search-result = []
|
||||
@search-result = users
|
||||
@update!
|
||||
.catch (err) ~>
|
||||
.then (users) =>
|
||||
users.for-each (user) =>
|
||||
user._click = =>
|
||||
this.trigger 'navigate-user' user
|
||||
this.search-result = []
|
||||
this.search-result = users
|
||||
this.update();
|
||||
.catch (err) =>
|
||||
console.error err
|
||||
|
||||
@on-search-keydown = (e) ~>
|
||||
on-search-keydown(e) {
|
||||
key = e.which
|
||||
switch (key)
|
||||
| 9, 40 => # Key[TAB] or Key[↓]
|
||||
| 9, 40 => // Key[TAB] or Key[↓]
|
||||
e.prevent-default!
|
||||
e.stop-propagation!
|
||||
@refs.search-result.child-nodes[0].focus!
|
||||
this.refs.search-result.child-nodes[0].focus();
|
||||
|
||||
@on-search-result-keydown = (i, e) ~>
|
||||
on-search-result-keydown(i, e) {
|
||||
key = e.which
|
||||
switch (key)
|
||||
| 10, 13 => # Key[ENTER]
|
||||
| 10, 13 => // Key[ENTER]
|
||||
e.prevent-default!
|
||||
e.stop-propagation!
|
||||
@search-result[i]._click!
|
||||
| 27 => # Key[ESC]
|
||||
| 27 => // Key[ESC]
|
||||
e.prevent-default!
|
||||
e.stop-propagation!
|
||||
@refs.search.focus!
|
||||
| 38 => # Key[↑]
|
||||
this.refs.search.focus();
|
||||
| 38 => // Key[↑]
|
||||
e.prevent-default!
|
||||
e.stop-propagation!
|
||||
(@refs.search-result.child-nodes[i].previous-element-sibling || @refs.search-result.child-nodes[@search-result.length - 1]).focus!
|
||||
| 9, 40 => # Key[TAB] or Key[↓]
|
||||
(this.refs.search-result.child-nodes[i].previous-element-sibling || this.refs.search-result.child-nodes[@search-result.length - 1]).focus();
|
||||
| 9, 40 => // Key[TAB] or Key[↓]
|
||||
e.prevent-default!
|
||||
e.stop-propagation!
|
||||
(@refs.search-result.child-nodes[i].next-element-sibling || @refs.search-result.child-nodes[0]).focus!
|
||||
(this.refs.search-result.child-nodes[i].next-element-sibling || this.refs.search-result.child-nodes[0]).focus();
|
||||
|
||||
</script>
|
||||
</mk-messaging>
|
||||
|
||||
@@ -203,27 +203,27 @@
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@mixin \i
|
||||
@mixin \text
|
||||
this.mixin('i');
|
||||
this.mixin('text');
|
||||
|
||||
@message = @opts.message
|
||||
this.message = this.opts.message
|
||||
@message.is_me = @message.user.id == @I.id
|
||||
|
||||
@on \mount ~>
|
||||
this.on('mount', () => {
|
||||
if @message.text?
|
||||
tokens = @analyze @message.text
|
||||
|
||||
@refs.text.innerHTML = @compile tokens
|
||||
this.refs.text.innerHTML = @compile tokens
|
||||
|
||||
@refs.text.children.for-each (e) ~>
|
||||
if e.tag-name == \MK-URL
|
||||
this.refs.text.children.for-each (e) =>
|
||||
if e.tag-name == 'MK-URL'
|
||||
riot.mount e
|
||||
|
||||
# URLをプレビュー
|
||||
// URLをプレビュー
|
||||
tokens
|
||||
.filter (t) -> t.type == \link
|
||||
.map (t) ~>
|
||||
@preview = @refs.text.append-child document.create-element \mk-url-preview
|
||||
.filter (t) -> t.type == 'link'
|
||||
.map (t) =>
|
||||
this.preview = this.refs.text.appendChild document.createElement 'mk-url-preview'
|
||||
riot.mount @preview, do
|
||||
url: t.content
|
||||
</script>
|
||||
|
||||
@@ -124,101 +124,101 @@
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@mixin \i
|
||||
@mixin \api
|
||||
@mixin \messaging-stream
|
||||
this.mixin('i');
|
||||
this.mixin('api');
|
||||
this.mixin('messaging-stream');
|
||||
|
||||
@user = @opts.user
|
||||
@init = true
|
||||
@sending = false
|
||||
@messages = []
|
||||
this.user = this.opts.user
|
||||
this.init = true
|
||||
this.sending = false
|
||||
this.messages = []
|
||||
|
||||
@connection = new @MessagingStreamConnection @I, @user.id
|
||||
this.connection = new @MessagingStreamConnection @I, @user.id
|
||||
|
||||
@on \mount ~>
|
||||
@connection.event.on \message @on-message
|
||||
@connection.event.on \read @on-read
|
||||
this.on('mount', () => {
|
||||
@connection.event.on 'message' this.on-message
|
||||
@connection.event.on 'read' this.on-read
|
||||
|
||||
document.add-event-listener \visibilitychange @on-visibilitychange
|
||||
document.add-event-listener 'visibilitychange' this.on-visibilitychange
|
||||
|
||||
@api \messaging/messages do
|
||||
this.api 'messaging/messages' do
|
||||
user_id: @user.id
|
||||
.then (messages) ~>
|
||||
@init = false
|
||||
@messages = messages.reverse!
|
||||
@update!
|
||||
.then (messages) =>
|
||||
this.init = false
|
||||
this.messages = messages.reverse!
|
||||
this.update();
|
||||
@scroll-to-bottom!
|
||||
.catch (err) ~>
|
||||
.catch (err) =>
|
||||
console.error err
|
||||
|
||||
@on \unmount ~>
|
||||
@connection.event.off \message @on-message
|
||||
@connection.event.off \read @on-read
|
||||
this.on('unmount', () => {
|
||||
@connection.event.off 'message' this.on-message
|
||||
@connection.event.off 'read' this.on-read
|
||||
@connection.close!
|
||||
|
||||
document.remove-event-listener \visibilitychange @on-visibilitychange
|
||||
document.remove-event-listener 'visibilitychange' this.on-visibilitychange
|
||||
|
||||
@on \update ~>
|
||||
@messages.for-each (message) ~>
|
||||
this.on('update', () => {
|
||||
@messages.for-each (message) =>
|
||||
date = (new Date message.created_at).get-date!
|
||||
month = (new Date message.created_at).get-month! + 1
|
||||
message._date = date
|
||||
message._datetext = month + '月 ' + date + '日'
|
||||
|
||||
@on-message = (message) ~>
|
||||
on-message(message) {
|
||||
is-bottom = @is-bottom!
|
||||
|
||||
@messages.push message
|
||||
if message.user_id != @I.id and not document.hidden
|
||||
@connection.socket.send JSON.stringify do
|
||||
type: \read
|
||||
type: 'read'
|
||||
id: message.id
|
||||
@update!
|
||||
this.update();
|
||||
|
||||
if is-bottom
|
||||
# Scroll to bottom
|
||||
// Scroll to bottom
|
||||
@scroll-to-bottom!
|
||||
else if message.user_id != @I.id
|
||||
# Notify
|
||||
// Notify
|
||||
@notify '新しいメッセージがあります'
|
||||
|
||||
@on-read = (ids) ~>
|
||||
on-read(ids) {
|
||||
if not Array.isArray ids then ids = [ids]
|
||||
ids.for-each (id) ~>
|
||||
if (@messages.some (x) ~> x.id == id)
|
||||
ids.for-each (id) =>
|
||||
if (@messages.some (x) => x.id == id)
|
||||
exist = (@messages.map (x) -> x.id).index-of id
|
||||
@messages[exist].is_read = true
|
||||
@update!
|
||||
this.update();
|
||||
|
||||
@is-bottom = ~>
|
||||
current = @root.scroll-top + @root.offset-height
|
||||
max = @root.scroll-height
|
||||
is-bottom() {
|
||||
current = this.root.scroll-top + this.root.offset-height
|
||||
max = this.root.scroll-height
|
||||
current > (max - 32)
|
||||
|
||||
@scroll-to-bottom = ~>
|
||||
@root.scroll-top = @root.scroll-height
|
||||
scroll-to-bottom() {
|
||||
this.root.scroll-top = this.root.scroll-height
|
||||
|
||||
@notify = (message) ~>
|
||||
n = document.create-element \p
|
||||
notify(message) {
|
||||
n = document.createElement 'p'
|
||||
n.inner-HTML = '<i class="fa fa-arrow-circle-down"></i>' + message
|
||||
n.onclick = ~>
|
||||
n.onclick = =>
|
||||
@scroll-to-bottom!
|
||||
n.parent-node.remove-child n
|
||||
@refs.notifications.append-child n
|
||||
this.refs.notifications.appendChild n
|
||||
|
||||
set-timeout ~>
|
||||
setTimeout =>
|
||||
n.style.opacity = 0
|
||||
set-timeout ~>
|
||||
setTimeout =>
|
||||
n.parent-node.remove-child n
|
||||
, 1000ms
|
||||
, 4000ms
|
||||
|
||||
@on-visibilitychange = ~>
|
||||
on-visibilitychange() {
|
||||
if document.hidden then return
|
||||
@messages.for-each (message) ~>
|
||||
@messages.for-each (message) =>
|
||||
if message.user_id != @I.id and not message.is_read
|
||||
@connection.socket.send JSON.stringify do
|
||||
type: \read
|
||||
type: 'read'
|
||||
id: message.id
|
||||
</script>
|
||||
</mk-messaging-room>
|
||||
|
||||
@@ -5,14 +5,14 @@
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@on \mount ~>
|
||||
# バグ? https://github.com/riot/riot/issues/2103
|
||||
#value = @opts.value
|
||||
value = @opts.riot-value
|
||||
max = @opts.max
|
||||
this.on('mount', () => {
|
||||
// バグ? https://github.com/riot/riot/issues/2103
|
||||
#value = this.opts.value
|
||||
value = this.opts.riot-value
|
||||
max = this.opts.max
|
||||
|
||||
if max? then if value > max then value = max
|
||||
|
||||
@root.innerHTML = value.to-locale-string!
|
||||
this.root.innerHTML = value.to-locale-string!
|
||||
</script>
|
||||
</mk-number>
|
||||
|
||||
@@ -86,24 +86,24 @@
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@choices = ['', '']
|
||||
this.choices = ['', '']
|
||||
|
||||
@oninput = (i, e) ~>
|
||||
oninput(i, e) {
|
||||
@choices[i] = e.target.value
|
||||
|
||||
@add = ~>
|
||||
add() {
|
||||
@choices.push ''
|
||||
@update!
|
||||
@refs.choices.child-nodes[@choices.length - 1].child-nodes[0].focus!
|
||||
this.update();
|
||||
this.refs.choices.child-nodes[@choices.length - 1].child-nodes[0].focus();
|
||||
|
||||
@remove = (i) ~>
|
||||
@choices = @choices.filter((_, _i) -> _i != i)
|
||||
@update!
|
||||
remove(i) {
|
||||
this.choices = @choices.filter((_, _i) -> _i != i)
|
||||
this.update();
|
||||
|
||||
@destroy = ~>
|
||||
@opts.ondestroy!
|
||||
destroy() {
|
||||
this.opts.ondestroy!
|
||||
|
||||
@get = ~>
|
||||
get() {
|
||||
return {
|
||||
choices: @choices.filter (choice) -> choice != ''
|
||||
}
|
||||
|
||||
@@ -68,23 +68,23 @@
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@mixin \api
|
||||
this.mixin('api');
|
||||
|
||||
@post = @opts.post
|
||||
@poll = @post.poll
|
||||
@total = @poll.choices.reduce ((a, b) -> a + b.votes), 0
|
||||
@is-voted = @poll.choices.some (c) -> c.is_voted
|
||||
@result = @is-voted
|
||||
this.post = this.opts.post
|
||||
this.poll = @post.poll
|
||||
this.total = @poll.choices.reduce ((a, b) -> a + b.votes), 0
|
||||
this.is-voted = @poll.choices.some (c) -> c.is_voted
|
||||
this.result = @is-voted
|
||||
|
||||
@toggle-result = ~>
|
||||
@result = !@result
|
||||
toggle-result() {
|
||||
this.result = !@result
|
||||
|
||||
@vote = (id) ~>
|
||||
vote(id) {
|
||||
if (@poll.choices.some (c) -> c.is_voted) then return
|
||||
@api \posts/polls/vote do
|
||||
this.api 'posts/polls/vote' do
|
||||
post_id: @post.id
|
||||
choice: id
|
||||
.then ~>
|
||||
.then =>
|
||||
@poll.choices.for-each (c) ->
|
||||
if c.id == id
|
||||
c.votes++
|
||||
|
||||
@@ -4,5 +4,5 @@
|
||||
display inline
|
||||
|
||||
</style>
|
||||
<script>@root.innerHTML = @opts.content</script>
|
||||
<script>this.root.innerHTML = this.opts.content</script>
|
||||
</mk-raw>
|
||||
|
||||
@@ -14,13 +14,13 @@
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@on \mount ~>
|
||||
text = @root.innerHTML
|
||||
@root.innerHTML = ''
|
||||
(text.split '').for-each (c, i) ~>
|
||||
ce = document.create-element \span
|
||||
this.on('mount', () => {
|
||||
text = this.root.innerHTML
|
||||
this.root.innerHTML = ''
|
||||
(text.split '').for-each (c, i) =>
|
||||
ce = document.createElement 'span'
|
||||
ce.innerHTML = c
|
||||
ce.style.animation-delay = (i / 10) + 's'
|
||||
@root.append-child ce
|
||||
ce.style.animationDelay = (i / 10) + 's'
|
||||
this.root.appendChild ce
|
||||
</script>
|
||||
</mk-ripple-string>
|
||||
|
||||
@@ -48,28 +48,28 @@
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@mixin \api
|
||||
@mixin \stream
|
||||
this.mixin('api');
|
||||
this.mixin('stream');
|
||||
|
||||
@history = []
|
||||
@fetching = true
|
||||
this.history = []
|
||||
this.fetching = true
|
||||
|
||||
@on \mount ~>
|
||||
@api \i/signin_history
|
||||
.then (history) ~>
|
||||
@history = history
|
||||
@fetching = false
|
||||
@update!
|
||||
.catch (err) ~>
|
||||
this.on('mount', () => {
|
||||
this.api 'i/signin_history'
|
||||
.then (history) =>
|
||||
this.history = history
|
||||
this.fetching = false
|
||||
this.update();
|
||||
.catch (err) =>
|
||||
console.error err
|
||||
|
||||
@stream.on \signin @on-signin
|
||||
@stream.on 'signin' this.on-signin
|
||||
|
||||
@on \unmount ~>
|
||||
@stream.off \signin @on-signin
|
||||
this.on('unmount', () => {
|
||||
@stream.off 'signin' this.on-signin
|
||||
|
||||
@on-signin = (signin) ~>
|
||||
on-signin(signin) {
|
||||
@history.unshift signin
|
||||
@update!
|
||||
this.update();
|
||||
</script>
|
||||
</mk-signin-history>
|
||||
|
||||
@@ -97,41 +97,41 @@
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@mixin \api
|
||||
this.mixin('api');
|
||||
|
||||
@user = null
|
||||
@signing = false
|
||||
this.user = null
|
||||
this.signing = false
|
||||
|
||||
@oninput = ~>
|
||||
@api \users/show do
|
||||
username: @refs.username.value
|
||||
.then (user) ~>
|
||||
@user = user
|
||||
@trigger \user user
|
||||
@update!
|
||||
oninput() {
|
||||
this.api 'users/show' do
|
||||
username: this.refs.username.value
|
||||
.then (user) =>
|
||||
this.user = user
|
||||
this.trigger 'user' user
|
||||
this.update();
|
||||
|
||||
@onsubmit = (e) ~>
|
||||
onsubmit(e) {
|
||||
e.prevent-default!
|
||||
|
||||
if @refs.username.value == ''
|
||||
@refs.username.focus!
|
||||
if this.refs.username.value == ''
|
||||
this.refs.username.focus();
|
||||
return false
|
||||
if @refs.password.value == ''
|
||||
@refs.password.focus!
|
||||
if this.refs.password.value == ''
|
||||
this.refs.password.focus();
|
||||
return false
|
||||
|
||||
@signing = true
|
||||
@update!
|
||||
this.signing = true
|
||||
this.update();
|
||||
|
||||
@api \signin do
|
||||
username: @refs.username.value
|
||||
password: @refs.password.value
|
||||
.then ~>
|
||||
this.api 'signin' do
|
||||
username: this.refs.username.value
|
||||
password: this.refs.password.value
|
||||
.then =>
|
||||
location.reload!
|
||||
.catch ~>
|
||||
.catch =>
|
||||
alert 'something happened'
|
||||
@signing = false
|
||||
@update!
|
||||
this.signing = false
|
||||
this.update();
|
||||
|
||||
false
|
||||
</script>
|
||||
|
||||
@@ -174,117 +174,117 @@
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@mixin \api
|
||||
@mixin \get-password-strength
|
||||
this.mixin('api');
|
||||
this.mixin('get-password-strength');
|
||||
|
||||
@username-state = null
|
||||
@password-strength = ''
|
||||
@password-retype-state = null
|
||||
@recaptchaed = false
|
||||
this.username-state = null
|
||||
this.password-strength = ''
|
||||
this.password-retype-state = null
|
||||
this.recaptchaed = false
|
||||
|
||||
window.on-recaptchaed = ~>
|
||||
@recaptchaed = true
|
||||
@update!
|
||||
window.on-recaptchaed = =>
|
||||
this.recaptchaed = true
|
||||
this.update();
|
||||
|
||||
window.on-recaptcha-expired = ~>
|
||||
@recaptchaed = false
|
||||
@update!
|
||||
window.on-recaptcha-expired = =>
|
||||
this.recaptchaed = false
|
||||
this.update();
|
||||
|
||||
@on \mount ~>
|
||||
head = (document.get-elements-by-tag-name \head).0
|
||||
script = document.create-element \script
|
||||
..set-attribute \src \https://www.google.com/recaptcha/api.js
|
||||
head.append-child script
|
||||
this.on('mount', () => {
|
||||
head = (document.get-elements-by-tag-name 'head).0'
|
||||
script = document.createElement 'script'
|
||||
..set-attribute 'src' \https://www.google.com/recaptcha/api.js
|
||||
head.appendChild script
|
||||
|
||||
@on-change-username = ~>
|
||||
username = @refs.username.value
|
||||
on-change-username() {
|
||||
username = this.refs.username.value
|
||||
|
||||
if username == ''
|
||||
@username-state = null
|
||||
@update!
|
||||
this.username-state = null
|
||||
this.update();
|
||||
return
|
||||
|
||||
err = switch
|
||||
| not username.match /^[a-zA-Z0-9\-]+$/ => \invalid-format
|
||||
| username.length < 3chars => \min-range
|
||||
| username.length > 20chars => \max-range
|
||||
| not username.match /^[a-zA-Z0-9\-]+$/ => 'invalid-format'
|
||||
| username.length < 3chars => 'min-range'
|
||||
| username.length > 20chars => 'max-range'
|
||||
| _ => null
|
||||
|
||||
if err?
|
||||
@username-state = err
|
||||
@update!
|
||||
this.username-state = err
|
||||
this.update();
|
||||
else
|
||||
@username-state = \wait
|
||||
@update!
|
||||
this.username-state = 'wait'
|
||||
this.update();
|
||||
|
||||
@api \username/available do
|
||||
this.api 'username/available' do
|
||||
username: username
|
||||
.then (result) ~>
|
||||
.then (result) =>
|
||||
if result.available
|
||||
@username-state = \ok
|
||||
this.username-state = 'ok'
|
||||
else
|
||||
@username-state = \unavailable
|
||||
@update!
|
||||
.catch (err) ~>
|
||||
@username-state = \error
|
||||
@update!
|
||||
this.username-state = 'unavailable'
|
||||
this.update();
|
||||
.catch (err) =>
|
||||
this.username-state = 'error'
|
||||
this.update();
|
||||
|
||||
@on-change-password = ~>
|
||||
password = @refs.password.value
|
||||
on-change-password() {
|
||||
password = this.refs.password.value
|
||||
|
||||
if password == ''
|
||||
@password-strength = ''
|
||||
this.password-strength = ''
|
||||
return
|
||||
|
||||
strength = @get-password-strength password
|
||||
|
||||
if strength > 0.3
|
||||
@password-strength = \medium
|
||||
this.password-strength = 'medium'
|
||||
if strength > 0.7
|
||||
@password-strength = \high
|
||||
this.password-strength = 'high'
|
||||
else
|
||||
@password-strength = \low
|
||||
this.password-strength = 'low'
|
||||
|
||||
@update!
|
||||
this.update();
|
||||
|
||||
@refs.password-metar.style.width = (strength * 100) + \%
|
||||
this.refs.password-metar.style.width = (strength * 100) + '%'
|
||||
|
||||
@on-change-password-retype = ~>
|
||||
password = @refs.password.value
|
||||
retyped-password = @refs.password-retype.value
|
||||
on-change-password-retype() {
|
||||
password = this.refs.password.value
|
||||
retyped-password = this.refs.password-retype.value
|
||||
|
||||
if retyped-password == ''
|
||||
@password-retype-state = null
|
||||
this.password-retype-state = null
|
||||
return
|
||||
|
||||
if password == retyped-password
|
||||
@password-retype-state = \match
|
||||
this.password-retype-state = 'match'
|
||||
else
|
||||
@password-retype-state = \not-match
|
||||
this.password-retype-state = 'not-match'
|
||||
|
||||
@onsubmit = (e) ~>
|
||||
onsubmit(e) {
|
||||
e.prevent-default!
|
||||
|
||||
username = @refs.username.value
|
||||
password = @refs.password.value
|
||||
username = this.refs.username.value
|
||||
password = this.refs.password.value
|
||||
|
||||
locker = document.body.append-child document.create-element \mk-locker
|
||||
locker = document.body.appendChild document.createElement 'mk-locker'
|
||||
|
||||
@api \signup do
|
||||
this.api 'signup' do
|
||||
username: username
|
||||
password: password
|
||||
'g-recaptcha-response': grecaptcha.get-response!
|
||||
.then ~>
|
||||
@api \signin do
|
||||
.then =>
|
||||
this.api 'signin' do
|
||||
username: username
|
||||
password: password
|
||||
.then ~>
|
||||
.then =>
|
||||
location.href = CONFIG.url
|
||||
.catch ~>
|
||||
.catch =>
|
||||
alert '何らかの原因によりアカウントの作成に失敗しました。再度お試しください。'
|
||||
|
||||
grecaptcha.reset!
|
||||
@recaptchaed = false
|
||||
this.recaptchaed = false
|
||||
|
||||
locker.parent-node.remove-child locker
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
</style>
|
||||
<script>
|
||||
now = new Date!
|
||||
@d = now.get-date!
|
||||
@m = now.get-month! + 1
|
||||
this.d = now.get-date!
|
||||
this.m = now.get-month! + 1
|
||||
</script>
|
||||
</mk-special-message>
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
<mk-time>
|
||||
<time datetime={ opts.time }><span if={ mode == 'relative' }>{ relative }</span><span if={ mode == 'absolute' }>{ absolute }</span><span if={ mode == 'detail' }>{ absolute } ({ relative })</span></time>
|
||||
<script>
|
||||
@time = new Date @opts.time
|
||||
@mode = @opts.mode || \relative
|
||||
@tickid = null
|
||||
this.time = new Date this.opts.time
|
||||
this.mode = this.opts.mode || 'relative'
|
||||
this.tickid = null
|
||||
|
||||
@absolute =
|
||||
@time.get-full-year! + \年 +
|
||||
@time.get-month! + 1 + \月 +
|
||||
@time.get-date! + \日 +
|
||||
this.absolute =
|
||||
@time.get-full-year! + '年' +
|
||||
@time.get-month! + 1 + '月' +
|
||||
@time.get-date! + '日' +
|
||||
' ' +
|
||||
@time.get-hours! + \時 +
|
||||
@time.get-minutes! + \分
|
||||
@time.get-hours! + '時' +
|
||||
@time.get-minutes! + '分'
|
||||
|
||||
@on \mount ~>
|
||||
if @mode == \relative or @mode == \detail
|
||||
this.on('mount', () => {
|
||||
if @mode == 'relative' or @mode == 'detail'
|
||||
@tick!
|
||||
@tickid = set-interval @tick, 1000ms
|
||||
this.tickid = set-interval @tick, 1000ms
|
||||
|
||||
@on \unmount ~>
|
||||
if @mode == \relative or @mode == \detail
|
||||
this.on('unmount', () => {
|
||||
if @mode == 'relative' or @mode == 'detail'
|
||||
clear-interval @tickid
|
||||
|
||||
@tick = ~>
|
||||
tick() {
|
||||
now = new Date!
|
||||
ago = (now - @time) / 1000ms
|
||||
@relative = switch
|
||||
this.relative = switch
|
||||
| ago >= 31536000s => ~~(ago / 31536000s) + '年前'
|
||||
| ago >= 2592000s => ~~(ago / 2592000s) + 'ヶ月前'
|
||||
| ago >= 604800s => ~~(ago / 604800s) + '週間前'
|
||||
@@ -36,6 +36,6 @@
|
||||
| ago >= 0s => 'たった今'
|
||||
| ago < 0s => '未来'
|
||||
| _ => 'なぞのじかん'
|
||||
@update!
|
||||
this.update();
|
||||
</script>
|
||||
</mk-time>
|
||||
|
||||
@@ -24,6 +24,6 @@
|
||||
color #8899a6
|
||||
</style>
|
||||
<script>
|
||||
@mixin \i
|
||||
this.mixin('i');
|
||||
</script>
|
||||
</mk-twitter-setting>
|
||||
|
||||
@@ -140,55 +140,55 @@
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@mixin \i
|
||||
this.mixin('i');
|
||||
|
||||
@uploads = []
|
||||
this.uploads = []
|
||||
|
||||
|
||||
@upload = (file, folder) ~>
|
||||
upload(file, folder) {
|
||||
id = Math.random!
|
||||
|
||||
ctx =
|
||||
id: id
|
||||
name: file.name || \untitled
|
||||
name: file.name || 'untitled'
|
||||
progress: undefined
|
||||
|
||||
@uploads.push ctx
|
||||
@trigger \change-uploads @uploads
|
||||
@update!
|
||||
this.trigger 'change-uploads' @uploads
|
||||
this.update();
|
||||
|
||||
reader = new FileReader!
|
||||
reader.onload = (e) ~>
|
||||
reader.onload = (e) =>
|
||||
ctx.img = e.target.result
|
||||
@update!
|
||||
this.update();
|
||||
reader.read-as-data-URL file
|
||||
|
||||
data = new FormData!
|
||||
data.append \i @I.token
|
||||
data.append \file file
|
||||
data.append 'i' @I.token
|
||||
data.append 'file' file
|
||||
|
||||
if folder?
|
||||
data.append \folder_id folder
|
||||
data.append 'folder_id' folder
|
||||
|
||||
xhr = new XMLHttpRequest!
|
||||
xhr.open \POST CONFIG.apiUrl + '/drive/files/create' true
|
||||
xhr.onload = (e) ~>
|
||||
xhr.open 'POST' CONFIG.apiUrl + '/drive/files/create' true
|
||||
xhr.onload = (e) =>
|
||||
drive-file = JSON.parse e.target.response
|
||||
|
||||
@trigger \uploaded drive-file
|
||||
this.trigger 'uploaded' drive-file
|
||||
|
||||
@uploads = @uploads.filter (x) -> x.id != id
|
||||
@trigger \change-uploads @uploads
|
||||
this.uploads = @uploads.filter (x) -> x.id != id
|
||||
this.trigger 'change-uploads' @uploads
|
||||
|
||||
@update!
|
||||
this.update();
|
||||
|
||||
xhr.upload.onprogress = (e) ~>
|
||||
xhr.upload.onprogress = (e) =>
|
||||
if e.length-computable
|
||||
if ctx.progress == undefined
|
||||
ctx.progress = {}
|
||||
ctx.progress.max = e.total
|
||||
ctx.progress.value = e.loaded
|
||||
@update!
|
||||
this.update();
|
||||
|
||||
xhr.send data
|
||||
</script>
|
||||
|
||||
@@ -91,22 +91,22 @@
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@mixin \api
|
||||
this.mixin('api');
|
||||
|
||||
@url = @opts.url
|
||||
@loading = true
|
||||
this.url = this.opts.url
|
||||
this.loading = true
|
||||
|
||||
@on \mount ~>
|
||||
this.on('mount', () => {
|
||||
fetch CONFIG.url + '/api:url?url=' + @url
|
||||
.then (res) ~>
|
||||
.then (res) =>
|
||||
info <~ res.json!.then
|
||||
@title = info.title
|
||||
@description = info.description
|
||||
@thumbnail = info.thumbnail
|
||||
@icon = info.icon
|
||||
@sitename = info.sitename
|
||||
this.title = info.title
|
||||
this.description = info.description
|
||||
this.thumbnail = info.thumbnail
|
||||
this.icon = info.icon
|
||||
this.sitename = info.sitename
|
||||
|
||||
@loading = false
|
||||
@update!
|
||||
this.loading = false
|
||||
this.update();
|
||||
</script>
|
||||
</mk-url-preview>
|
||||
|
||||
@@ -30,19 +30,19 @@
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@url = @opts.href
|
||||
this.url = this.opts.href
|
||||
|
||||
@on \before-mount ~>
|
||||
parser = document.create-element \a
|
||||
this.on('before-mount', () => {
|
||||
parser = document.createElement 'a'
|
||||
parser.href = @url
|
||||
|
||||
@schema = parser.protocol
|
||||
@hostname = parser.hostname
|
||||
@port = parser.port
|
||||
@pathname = parser.pathname
|
||||
@query = parser.search
|
||||
@hash = parser.hash
|
||||
this.schema = parser.protocol
|
||||
this.hostname = parser.hostname
|
||||
this.port = parser.port
|
||||
this.pathname = parser.pathname
|
||||
this.query = parser.search
|
||||
this.hash = parser.hash
|
||||
|
||||
@update!
|
||||
this.update();
|
||||
</script>
|
||||
</mk-url>
|
||||
|
||||
Reference in New Issue
Block a user