111 lines
		
	
	
	
		
			2.7 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			111 lines
		
	
	
	
		
			2.7 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <style>
 | |
| 	.new-blurb-container {
 | |
| 		margin-bottom: 2rem;
 | |
| 	}
 | |
| 
 | |
| 	.new-blurb-container input[type="file"] {
 | |
| 		display: none;
 | |
| 		visibility: hidden;
 | |
| 		opacity: 0;
 | |
| 	}
 | |
| 
 | |
| 	.new-blurb-container .blurb-limit-counter {
 | |
| 		font-size: smaller;
 | |
| 		margin-left: 0.5rem;
 | |
| 	}
 | |
| 
 | |
| 	.new-blurb-container .file-attach-label {
 | |
| 		display: block;
 | |
| 		text-align: right;
 | |
| 		margin-top: -2.5rem;
 | |
| 		padding: 0.5rem;
 | |
| 	}
 | |
| 
 | |
| 	.new-blurb-container .file-attach-label .icon {
 | |
| 		display: inline-block;
 | |
| 	}
 | |
| </style>
 | |
| <div class="new-blurb-container" data-requires-permission="topics.blurbs.create">
 | |
| 	<label>
 | |
| 		<input type="checkbox" collapse-toggle />
 | |
| 		<i class="icon plus" style="display: inline-block; margin-right: 0.5rem"></i>
 | |
| 		<span>New Blurb</span>
 | |
| 	</label>
 | |
| 	<form
 | |
| 		data-smart="true"
 | |
| 		method="POST"
 | |
| 		class="blurb-creation-form collapsible"
 | |
| 		style="
 | |
| 			margin-top: 1rem
 | |
| 			width: 100%;
 | |
| 			transition: all 0.5s;
 | |
| 		"
 | |
| 		url="/api/topics/${ document.body.dataset.topic }/events"
 | |
| 		on_reply="async (event) => { await document.getElementById( 'blurbs-list' ).__render(event); document.getElementById(event.id)?.classList.remove('sending'); }"
 | |
| 		on_parsed="async (event) => { await document.getElementById( 'blurbs-list' ).__render(event); document.getElementById(event.id)?.classList.add('sending'); }"
 | |
| 	>
 | |
| 		<input type="hidden" name="type" value="blurb" />
 | |
| 
 | |
| 		<input
 | |
| 			type="hidden"
 | |
| 			name="id"
 | |
| 			generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
 | |
| 			reset-on-submit
 | |
| 		/>
 | |
| 		<input
 | |
| 			type="hidden"
 | |
| 			name="meta.temp_id"
 | |
| 			generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
 | |
| 			reset-on-submit
 | |
| 		/>
 | |
| 
 | |
| 		<input
 | |
| 			type="hidden"
 | |
| 			name="creator_id"
 | |
| 			generator="() => { return APP.user?.id; }"
 | |
| 		/>
 | |
| 
 | |
| 		<input
 | |
| 			type="hidden"
 | |
| 			name="timestamps.created"
 | |
| 			generator="(_input, form) => form.__submitted_at.toISOString()"
 | |
| 			reset-on-submit
 | |
| 		/>
 | |
| 		<input
 | |
| 			type="hidden"
 | |
| 			name="timestamps.updated"
 | |
| 			generator="(_input, form) => form.__submitted_at.toISOString()"
 | |
| 			reset-on-submit
 | |
| 		/>
 | |
| 
 | |
| 		<input
 | |
| 			type="hidden"
 | |
| 			name="parent_id"
 | |
| 			generator="(_input, form) => { const parent_blurb = form.closest( '.blurb-container' ); return parent_blurb?.dataset?.blurb_id; }"
 | |
| 		/>
 | |
| 
 | |
| 		<textarea
 | |
| 			type="text"
 | |
| 			name="data.blurb"
 | |
| 			value=""
 | |
| 			maxlength="256"
 | |
| 			rows="4"
 | |
| 			placeholder=" ... "
 | |
| 			reset-on-submit
 | |
| 		></textarea>
 | |
| 		<div class="blurb-limit-counter" data-limit-counter-for="data.blurb">0 / 256</div>
 | |
| 
 | |
| 		<label class="file-attach-label">
 | |
| 			<input
 | |
| 				aria-label="Upload and share file"
 | |
| 				type="file"
 | |
| 				multiple
 | |
| 				data-smartforms-save-to-home="true"
 | |
| 				name="data.media"
 | |
| 				reset-on-submit
 | |
| 			/>
 | |
| 			<div class="icon attachment"></div>
 | |
| 		</label>
 | |
| 		<input type="submit" value="Blurb It!" />
 | |
| 	</form>
 | |
| </div>
 |