forked from cory/tildefriends
		
	Hide too-new messages, and cycle between message, raw, and markdown views of messages.
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4394 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
		| @@ -11,7 +11,7 @@ class TfMessageElement extends LitElement { | ||||
| 			message: {type: Object}, | ||||
| 			users: {type: Object}, | ||||
| 			drafts: {type: Object}, | ||||
| 			raw: {type: Boolean}, | ||||
| 			format: {type: String}, | ||||
| 			blog_data: {type: String}, | ||||
| 			expanded: {type: Object}, | ||||
| 			decrypted: {type: Object}, | ||||
| @@ -27,7 +27,7 @@ class TfMessageElement extends LitElement { | ||||
| 		this.message = {}; | ||||
| 		this.users = {}; | ||||
| 		this.drafts = {}; | ||||
| 		this.raw = false; | ||||
| 		this.format = 'message'; | ||||
| 		this.expanded = {}; | ||||
| 		this.decrypted = undefined; | ||||
| 	} | ||||
| @@ -255,16 +255,30 @@ class TfMessageElement extends LitElement { | ||||
| 			content = this.decrypted; | ||||
| 		} | ||||
| 		let self = this; | ||||
| 		let raw_button = this.raw ? | ||||
| 				html`<input type="button" value="Message" @click=${() => self.raw = false}></input>` : | ||||
| 				html`<input type="button" value="Raw" @click=${() => self.raw = true}></input>`; | ||||
| 		let raw_button; | ||||
| 		switch (this.format) { | ||||
| 			case 'raw': | ||||
| 				if (content?.type == 'post' || content?.type == 'blog') { | ||||
| 					raw_button = html`<input type="button" value="Markdown" @click=${() => self.format = 'md'}></input>`; | ||||
| 				} else { | ||||
| 					raw_button = html`<input type="button" value="Message" @click=${() => self.format = 'message'}></input>`;  | ||||
| 				} | ||||
| 				break; | ||||
| 			case 'md': | ||||
| 				raw_button = html`<input type="button" value="Message" @click=${() => self.format = 'message'}></input>`; | ||||
| 				break; | ||||
| 			default: | ||||
| 				raw_button = html`<input type="button" value="Raw" @click=${() => self.format = 'raw'}></input>`; | ||||
| 				break; | ||||
| 		} | ||||
| 		function small_frame(inner) { | ||||
| 			let body; | ||||
| 			return html` | ||||
| 				<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere"> | ||||
| 					<tf-user id=${self.message.author} .users=${self.users}></tf-user> | ||||
| 					<span style="padding-right: 8px"><a tfarget="_top" href=${'#' + self.message.id}>%</a> ${new Date(self.message.timestamp).toLocaleString()}</span> | ||||
| 					${raw_button} | ||||
| 					${self.raw ? self.render_raw() : inner} | ||||
| 					${self.format == 'raw' ? self.render_raw() : inner} | ||||
| 					${self.render_votes()} | ||||
| 				</div> | ||||
| 			`; | ||||
| @@ -342,9 +356,18 @@ class TfMessageElement extends LitElement { | ||||
| 					<input type="button" value="Reply" @click=${this.show_reply}></input> | ||||
| 				`; | ||||
| 				let self = this; | ||||
| 				let body = this.raw ? | ||||
| 					this.render_raw() : | ||||
| 					unsafeHTML(tfutils.markdown(content.text)); | ||||
| 				let body; | ||||
| 				switch (this.format) { | ||||
| 					case 'raw': | ||||
| 						body = this.render_raw(); | ||||
| 						break; | ||||
| 					case 'md': | ||||
| 						body = html`<code style="white-space: pre-wrap; overflow-wrap: anywhere">${content.text}</code>`; | ||||
| 						break; | ||||
| 					case 'message': | ||||
| 						body = unsafeHTML(tfutils.markdown(content.text)); | ||||
| 						break; | ||||
| 				} | ||||
| 				let content_warning = html` | ||||
| 					<div class="content_warning" @click=${x => this.toggle_expanded(':cw')}>${content.contentWarning}</div> | ||||
| 					`; | ||||
| @@ -406,9 +429,16 @@ class TfMessageElement extends LitElement { | ||||
| 						this.expanded[(this.message.id || '') + ':blog'] ? | ||||
| 						html`<div>${this.blog_data ? unsafeHTML(tfutils.markdown(this.blog_data)) : 'Loading...'}</div>` : | ||||
| 						undefined; | ||||
| 				let body = this.raw ? | ||||
| 						this.render_raw() : | ||||
| 						html` | ||||
| 				let body; | ||||
| 				switch (this.format) { | ||||
| 					case 'raw': | ||||
| 						body = this.render_raw(); | ||||
| 						break; | ||||
| 					case 'md': | ||||
| 						body = content.summary; | ||||
| 						break; | ||||
| 					case 'message': | ||||
| 						body = html` | ||||
| 							<div | ||||
| 								style="border: 1px solid #fff; border-radius: 1em; padding: 8px; margin: 4px; cursor: pointer" | ||||
| 								@click=${x => self.toggle_expanded(':blog')}> | ||||
| @@ -420,6 +450,8 @@ class TfMessageElement extends LitElement { | ||||
| 							</div> | ||||
| 							${payload} | ||||
| 						`; | ||||
| 						break; | ||||
| 				} | ||||
| 				return html` | ||||
| 					<style> | ||||
| 						code { | ||||
|   | ||||
| @@ -70,7 +70,7 @@ class TfTabNewsFeedElement extends LitElement { | ||||
| 					WITH news AS (SELECT messages.* | ||||
| 					FROM messages | ||||
| 					JOIN json_each(?) AS following ON messages.author = following.value | ||||
| 					WHERE messages.timestamp > ? | ||||
| 					WHERE messages.timestamp > ? AND messages.timestamp < ? | ||||
| 					ORDER BY messages.timestamp DESC) | ||||
| 					SELECT messages.* | ||||
| 						FROM news | ||||
| @@ -87,6 +87,11 @@ class TfTabNewsFeedElement extends LitElement { | ||||
| 				[ | ||||
| 					JSON.stringify(this.following), | ||||
| 					this.start_time, | ||||
| 					/* | ||||
| 					** Don't show messages more than a day into the future to prevent | ||||
| 					** messages with far-future timestamps from staying at the top forever. | ||||
| 					*/ | ||||
| 					new Date().valueOf() + 24 * 60 * 60 * 1000, | ||||
| 				]); | ||||
| 		} | ||||
| 	} | ||||
|   | ||||
		Reference in New Issue
	
	Block a user