This commit is contained in:
syuilo 2017-12-11 03:25:58 +09:00
parent 711ddc03af
commit f849dcb7b9
4 changed files with 60 additions and 87 deletions

View file

@ -591,7 +591,6 @@ mobile:
submit: "Post" submit: "Post"
reply-placeholder: "Reply to this post..." reply-placeholder: "Reply to this post..."
post-placeholder: "What's happening?" post-placeholder: "What's happening?"
attach-media-from-local: "Attach media from your device"
mk-search-posts: mk-search-posts:
empty: "There is no post related to the 「{}」" empty: "There is no post related to the 「{}」"

View file

@ -591,7 +591,6 @@ mobile:
submit: "投稿" submit: "投稿"
reply-placeholder: "この投稿への返信..." reply-placeholder: "この投稿への返信..."
post-placeholder: "いまどうしてる?" post-placeholder: "いまどうしてる?"
attach-media-from-local: "デバイスからメディアを添付"
mk-search-posts: mk-search-posts:
empty: "「{}」に関する投稿は見つかりませんでした。" empty: "「{}」に関する投稿は見つかりませんでした。"

View file

@ -1,13 +1,12 @@
<mk-post-form ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }> <mk-post-form ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }>
<div class="content"> <div class="content">
<textarea class={ with: (files.length != 0 || poll) } ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder={ placeholder }></textarea> <textarea class={ with: (files.length != 0 || poll) } ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder={ placeholder }></textarea>
<div class="medias { with: poll }" if={ files.length != 0 }> <div class="medias { with: poll }" show={ files.length != 0 }>
<ul> <ul ref="media">
<li each={ files }> <li each={ files } data-id={ id }>
<div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div> <div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div>
<img class="remove" onclick={ removeFile } src="/assets/desktop/remove.png" title="%i18n:desktop.tags.mk-post-form.attach-cancel%" alt=""/> <img class="remove" onclick={ removeFile } src="/assets/desktop/remove.png" title="%i18n:desktop.tags.mk-post-form.attach-cancel%" alt=""/>
</li> </li>
<li class="add" if={ files.length < 4 } title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }>%fa:plus%</li>
</ul> </ul>
<p class="remain">{ 4 - files.length }/4</p> <p class="remain">{ 4 - files.length }/4</p>
</div> </div>
@ -118,8 +117,9 @@
> li > li
display block display block
float left float left
margin 4px margin 0
padding 0 padding 0
border solid 4px transparent
cursor move cursor move
&:hover > .remove &:hover > .remove
@ -140,29 +140,6 @@
height 16px height 16px
cursor pointer cursor pointer
> .add
display block
float left
margin 4px
padding 0
border dashed 2px rgba($theme-color, 0.2)
cursor pointer
&:hover
border-color rgba($theme-color, 0.3)
> i
color rgba($theme-color, 0.4)
> i
display block
width 60px
height 60px
line-height 60px
text-align center
font-size 1.2em
color rgba($theme-color, 0.2)
> mk-poll-editor > mk-poll-editor
background lighten($theme-color, 98%) background lighten($theme-color, 98%)
border solid 1px rgba($theme-color, 0.1) border solid 1px rgba($theme-color, 0.1)
@ -306,6 +283,7 @@
</style> </style>
<script> <script>
import Sortable from 'sortablejs';
import getKao from '../../common/scripts/get-kao'; import getKao from '../../common/scripts/get-kao';
import notify from '../scripts/notify'; import notify from '../scripts/notify';
import Autocomplete from '../scripts/autocomplete'; import Autocomplete from '../scripts/autocomplete';
@ -365,6 +343,10 @@
this.trigger('change-files', this.files); this.trigger('change-files', this.files);
this.update(); this.update();
} }
new Sortable(this.refs.media, {
animation: 150
});
}); });
this.on('unmount', () => { this.on('unmount', () => {
@ -413,14 +395,17 @@
const data = e.dataTransfer.getData('text'); const data = e.dataTransfer.getData('text');
if (data == null) return false; if (data == null) return false;
// パース try {
// TODO: Validate JSON // パース
const obj = JSON.parse(data); const obj = JSON.parse(data);
// (ドライブの)ファイルだったら
if (obj.type == 'file') {
this.files.push(obj.file);
this.update();
}
} catch (e) {
// (ドライブの)ファイルだったら
if (obj.type == 'file') {
this.files.push(obj.file);
this.update();
} }
}; };
@ -483,13 +468,19 @@
this.post = e => { this.post = e => {
this.wait = true; this.wait = true;
const files = this.files && this.files.length > 0 const files = [];
? this.files.map(f => f.id)
: undefined; if (this.files.length > 0) {
Array.from(this.refs.media.children).forEach(el => {
const id = el.getAttribute('data-id');
const file = this.files.find(f => f.id == id);
files.push(file);
});
}
this.api('posts/create', { this.api('posts/create', {
text: this.refs.text.value == '' ? undefined : this.refs.text.value, text: this.refs.text.value == '' ? undefined : this.refs.text.value,
media_ids: files, media_ids: this.files.length > 0 ? files.map(f => f.id) : undefined,
reply_id: this.inReplyToPost ? this.inReplyToPost.id : undefined, reply_id: this.inReplyToPost ? this.inReplyToPost.id : undefined,
repost_id: this.repost ? this.repost.id : undefined, repost_id: this.repost ? this.repost.id : undefined,
poll: this.poll ? this.refs.poll.get() : undefined poll: this.poll ? this.refs.poll.get() : undefined

View file

@ -9,12 +9,11 @@
<div class="form"> <div class="form">
<mk-post-preview if={ opts.reply } post={ opts.reply }/> <mk-post-preview if={ opts.reply } post={ opts.reply }/>
<textarea ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder={ opts.reply ? '%i18n:mobile.tags.mk-post-form.reply-placeholder%' : '%i18n:mobile.tags.mk-post-form.post-placeholder%' }></textarea> <textarea ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder={ opts.reply ? '%i18n:mobile.tags.mk-post-form.reply-placeholder%' : '%i18n:mobile.tags.mk-post-form.post-placeholder%' }></textarea>
<div class="attaches" if={ files.length != 0 }> <div class="attaches" show={ files.length != 0 }>
<ul class="files" ref="attaches"> <ul class="files" ref="attaches">
<li class="file" each={ files }> <li class="file" each={ files } data-id={ id }>
<div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div> <div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name } onclick={ removeFile }></div>
</li> </li>
<li class="add" if={ files.length < 4 } title="%i18n:mobile.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }>%fa:plus%</li>
</ul> </ul>
</div> </div>
<mk-poll-editor if={ poll } ref="poll" ondestroy={ onPollDestroyed }/> <mk-poll-editor if={ poll } ref="poll" ondestroy={ onPollDestroyed }/>
@ -93,12 +92,9 @@
> .file > .file
display block display block
float left float left
margin 4px margin 0
padding 0 padding 0
cursor move border solid 4px transparent
&:hover > .remove
display block
> .img > .img
width 64px width 64px
@ -106,38 +102,6 @@
background-size cover background-size cover
background-position center center background-position center center
> .remove
display none
position absolute
top -6px
right -6px
width 16px
height 16px
cursor pointer
> .add
display block
float left
margin 4px
padding 0
border dashed 2px rgba($theme-color, 0.2)
cursor pointer
&:hover
border-color rgba($theme-color, 0.3)
> [data-fa]
color rgba($theme-color, 0.4)
> [data-fa]
display block
width 60px
height 60px
line-height 60px
text-align center
font-size 1.2em
color rgba($theme-color, 0.2)
> mk-uploader > mk-uploader
margin 8px 0 0 0 margin 8px 0 0 0
padding 8px padding 8px
@ -181,6 +145,7 @@
</style> </style>
<script> <script>
import Sortable from 'sortablejs';
import getKao from '../../common/scripts/get-kao'; import getKao from '../../common/scripts/get-kao';
this.mixin('api'); this.mixin('api');
@ -200,6 +165,10 @@
}); });
this.refs.text.focus(); this.refs.text.focus();
new Sortable(this.refs.attaches, {
animation: 150
});
}); });
this.onkeydown = e => { this.onkeydown = e => {
@ -247,6 +216,13 @@
this.update(); this.update();
}; };
this.removeFile = e => {
const file = e.item;
this.files = this.files.filter(x => x.id != file.id);
this.trigger('change-files', this.files);
this.update();
};
this.addPoll = () => { this.addPoll = () => {
this.poll = true; this.poll = true;
}; };
@ -258,15 +234,23 @@
}; };
this.post = () => { this.post = () => {
this.wait = true; this.update({
wait: true
});
const files = this.files && this.files.length > 0 const files = [];
? this.files.map(f => f.id)
: undefined; if (this.files.length > 0) {
Array.from(this.refs.attaches.children).forEach(el => {
const id = el.getAttribute('data-id');
const file = this.files.find(f => f.id == id);
files.push(file);
});
}
this.api('posts/create', { this.api('posts/create', {
text: this.refs.text.value == '' ? undefined : this.refs.text.value, text: this.refs.text.value == '' ? undefined : this.refs.text.value,
media_ids: files, media_ids: this.files.length > 0 ? files.map(f => f.id) : undefined,
reply_id: opts.reply ? opts.reply.id : undefined, reply_id: opts.reply ? opts.reply.id : undefined,
poll: this.poll ? this.refs.poll.get() : undefined poll: this.poll ? this.refs.poll.get() : undefined
}).then(data => { }).then(data => {