This commit is contained in:
syuilo
2017-02-20 09:53:57 +09:00
parent 6a4ea35e28
commit 204ad535c0
164 changed files with 2979 additions and 2966 deletions

View File

@@ -21,6 +21,6 @@
text-decoration underline
</style>
<script>
@mixin \i
this.mixin('i');
</script>
</mk-api-info>

View File

@@ -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>

View File

@@ -57,8 +57,8 @@
</style>
<script>
@retry = ~>
@unmount!
@opts.retry!
retry() {
this.unmount();
this.opts.retry!
</script>
</mk-core-error>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 != ''
}

View File

@@ -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++

View File

@@ -4,5 +4,5 @@
display inline
</style>
<script>@root.innerHTML = @opts.content</script>
<script>this.root.innerHTML = this.opts.content</script>
</mk-raw>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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

View File

@@ -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>

View File

@@ -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>

View File

@@ -24,6 +24,6 @@
color #8899a6
</style>
<script>
@mixin \i
this.mixin('i');
</script>
</mk-twitter-setting>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>