This commit is contained in:
		
							parent
							
								
									711ddc03af
								
							
						
					
					
						commit
						f849dcb7b9
					
				
					 4 changed files with 60 additions and 87 deletions
				
			
		|  | @ -591,7 +591,6 @@ mobile: | |||
|       submit: "Post" | ||||
|       reply-placeholder: "Reply to this post..." | ||||
|       post-placeholder: "What's happening?" | ||||
|       attach-media-from-local: "Attach media from your device" | ||||
| 
 | ||||
|     mk-search-posts: | ||||
|       empty: "There is no post related to the 「{}」" | ||||
|  |  | |||
|  | @ -591,7 +591,6 @@ mobile: | |||
|       submit: "投稿" | ||||
|       reply-placeholder: "この投稿への返信..." | ||||
|       post-placeholder: "いまどうしてる?" | ||||
|       attach-media-from-local: "デバイスからメディアを添付" | ||||
| 
 | ||||
|     mk-search-posts: | ||||
|       empty: "「{}」に関する投稿は見つかりませんでした。" | ||||
|  |  | |||
|  | @ -1,13 +1,12 @@ | |||
| <mk-post-form ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }> | ||||
| 	<div class="content"> | ||||
| 		<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 }> | ||||
| 			<ul> | ||||
| 				<li each={ files }> | ||||
| 		<div class="medias { with: poll }" show={ files.length != 0 }> | ||||
| 			<ul ref="media"> | ||||
| 				<li each={ files } data-id={ id }> | ||||
| 					<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=""/> | ||||
| 				</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> | ||||
| 			<p class="remain">{ 4 - files.length }/4</p> | ||||
| 		</div> | ||||
|  | @ -118,8 +117,9 @@ | |||
| 						> li | ||||
| 							display block | ||||
| 							float left | ||||
| 							margin 4px | ||||
| 							margin 0 | ||||
| 							padding 0 | ||||
| 							border solid 4px transparent | ||||
| 							cursor move | ||||
| 
 | ||||
| 							&:hover > .remove | ||||
|  | @ -140,29 +140,6 @@ | |||
| 								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) | ||||
| 
 | ||||
| 								> 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 | ||||
| 					background lighten($theme-color, 98%) | ||||
| 					border solid 1px rgba($theme-color, 0.1) | ||||
|  | @ -306,6 +283,7 @@ | |||
| 
 | ||||
| 	</style> | ||||
| 	<script> | ||||
| 		import Sortable from 'sortablejs'; | ||||
| 		import getKao from '../../common/scripts/get-kao'; | ||||
| 		import notify from '../scripts/notify'; | ||||
| 		import Autocomplete from '../scripts/autocomplete'; | ||||
|  | @ -365,6 +343,10 @@ | |||
| 				this.trigger('change-files', this.files); | ||||
| 				this.update(); | ||||
| 			} | ||||
| 
 | ||||
| 			new Sortable(this.refs.media, { | ||||
| 				animation: 150 | ||||
| 			}); | ||||
| 		}); | ||||
| 
 | ||||
| 		this.on('unmount', () => { | ||||
|  | @ -413,14 +395,17 @@ | |||
| 			const data = e.dataTransfer.getData('text'); | ||||
| 			if (data == null) return false; | ||||
| 
 | ||||
| 			// パース | ||||
| 			// TODO: Validate JSON | ||||
| 			const obj = JSON.parse(data); | ||||
| 			try { | ||||
| 				// パース | ||||
| 				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.wait = true; | ||||
| 
 | ||||
| 			const files = this.files && this.files.length > 0 | ||||
| 				? this.files.map(f => f.id) | ||||
| 				: undefined; | ||||
| 			const files = []; | ||||
| 
 | ||||
| 			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', { | ||||
| 				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, | ||||
| 				repost_id: this.repost ? this.repost.id : undefined, | ||||
| 				poll: this.poll ? this.refs.poll.get() : undefined | ||||
|  |  | |||
|  | @ -9,12 +9,11 @@ | |||
| 	<div class="form"> | ||||
| 		<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> | ||||
| 		<div class="attaches" if={ files.length != 0 }> | ||||
| 		<div class="attaches" show={ files.length != 0 }> | ||||
| 			<ul class="files" ref="attaches"> | ||||
| 				<li class="file" each={ files }> | ||||
| 					<div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div> | ||||
| 				<li class="file" each={ files } data-id={ id }> | ||||
| 					<div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name } onclick={ removeFile }></div> | ||||
| 				</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> | ||||
| 		</div> | ||||
| 		<mk-poll-editor if={ poll } ref="poll" ondestroy={ onPollDestroyed }/> | ||||
|  | @ -93,12 +92,9 @@ | |||
| 						> .file | ||||
| 							display block | ||||
| 							float left | ||||
| 							margin 4px | ||||
| 							margin 0 | ||||
| 							padding 0 | ||||
| 							cursor move | ||||
| 
 | ||||
| 							&:hover > .remove | ||||
| 								display block | ||||
| 							border solid 4px transparent | ||||
| 
 | ||||
| 							> .img | ||||
| 								width 64px | ||||
|  | @ -106,38 +102,6 @@ | |||
| 								background-size cover | ||||
| 								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 | ||||
| 					margin 8px 0 0 0 | ||||
| 					padding 8px | ||||
|  | @ -181,6 +145,7 @@ | |||
| 
 | ||||
| 	</style> | ||||
| 	<script> | ||||
| 		import Sortable from 'sortablejs'; | ||||
| 		import getKao from '../../common/scripts/get-kao'; | ||||
| 
 | ||||
| 		this.mixin('api'); | ||||
|  | @ -200,6 +165,10 @@ | |||
| 			}); | ||||
| 
 | ||||
| 			this.refs.text.focus(); | ||||
| 
 | ||||
| 			new Sortable(this.refs.attaches, { | ||||
| 				animation: 150 | ||||
| 			}); | ||||
| 		}); | ||||
| 
 | ||||
| 		this.onkeydown = e => { | ||||
|  | @ -247,6 +216,13 @@ | |||
| 			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.poll = true; | ||||
| 		}; | ||||
|  | @ -258,15 +234,23 @@ | |||
| 		}; | ||||
| 
 | ||||
| 		this.post = () => { | ||||
| 			this.wait = true; | ||||
| 			this.update({ | ||||
| 				wait: true | ||||
| 			}); | ||||
| 
 | ||||
| 			const files = this.files && this.files.length > 0 | ||||
| 				? this.files.map(f => f.id) | ||||
| 				: undefined; | ||||
| 			const files = []; | ||||
| 
 | ||||
| 			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', { | ||||
| 				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, | ||||
| 				poll: this.poll ? this.refs.poll.get() : undefined | ||||
| 			}).then(data => { | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue