From 55b684c6f1df2d34f4c00e70318b519089038e82 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Wed, 24 Apr 2019 09:28:20 -0700 Subject: [PATCH] Adding a simple image expander instead of iframes. - Fixes #91 --- README.md | 5 +++-- docs/goals.md | 5 +++++ ui/src/components/post-listing.tsx | 32 +++++++++++++++++------------- ui/src/utils.ts | 7 +++++++ 4 files changed, 33 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 177d9ce23..94238136f 100644 --- a/README.md +++ b/README.md @@ -87,8 +87,9 @@ and goto http://localhost:8536 - [Ranking Algorithm](docs/ranking.md) ## Support -Support the development, and help cover hosting costs. -- [Patreon](https://www.patreon.com/dessalines) +Lemmy is free, open-source software, meaning no advertising, monetizing, or venture capital, ever. Your donations directly support full-time development of the project. +- [Support on Patreon](https://www.patreon.com/dessalines). +- [Sponsor List](https://dev.lemmy.ml/#/sponsors). - bitcoin: `bc1queu73nwuheqtsp65nyh5hf4jr533r8rr5nsj75` - ethereum: `0x400c96c96acbC6E7B3B43B1dc1BB446540a88A01` diff --git a/docs/goals.md b/docs/goals.md index e569b1f79..1c627df83 100644 --- a/docs/goals.md +++ b/docs/goals.md @@ -33,5 +33,10 @@ - [Hierarchical tree building javascript](https://stackoverflow.com/a/40732240/1655478) - [Hot sorting discussion](https://meta.stackexchange.com/questions/11602/what-formula-should-be-used-to-determine-hot-questions) [2](https://medium.com/hacking-and-gonzo/how-reddit-ranking-algorithms-work-ef111e33d0d9) - [Classification types.](https://www.reddit.com/r/ModeratorDuck/wiki/subreddit_classification) +- [RES expando - Possibly make this into a switching react component.](https://github.com/honestbleeps/Reddit-Enhancement-Suite/tree/d21f55c21e734f47d8ed03fe0ebce5b16653b0bd/lib/modules/hosts) - [Temp Icon](https://www.flaticon.com/free-icon/mouse_194242) +- Activitypub guides + - https://blog.joinmastodon.org/2018/06/how-to-implement-a-basic-activitypub-server/ + - https://raw.githubusercontent.com/w3c/activitypub/gh-pages/activitypub-tutorial.txt + - https://github.com/tOkeshu/activitypub-example diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index 73395fa8e..babb8605d 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -4,13 +4,13 @@ import { WebSocketService, UserService } from '../services'; import { Post, CreatePostLikeForm, PostForm as PostFormI, SavePostForm, CommunityUser, UserView } from '../interfaces'; import { MomentTime } from './moment-time'; import { PostForm } from './post-form'; -import { mdToHtml, canMod, isMod } from '../utils'; +import { mdToHtml, canMod, isMod, isImage } from '../utils'; interface PostListingState { showEdit: boolean; showRemoveDialog: boolean; removeReason: string; - iframeExpanded: boolean; + imageExpanded: boolean; } interface PostListingProps { @@ -29,7 +29,7 @@ export class PostListing extends Component { showEdit: false, showRemoveDialog: false, removeReason: null, - iframeExpanded: false + imageExpanded: false } constructor(props: any, context: any) { @@ -78,15 +78,19 @@ export class PostListing extends Component { } {(new URL(post.url)).hostname} - { !this.state.iframeExpanded - ? + - : - - - -
- -
-
+ { isImage(post.url) && + <> + { !this.state.imageExpanded + ? + + : + + - +
+ +
+
+ } + } :
{post.name} @@ -292,8 +296,8 @@ export class PostListing extends Component { WebSocketService.Instance.editPost(form); } - handleIframeExpandClick(i: PostListing) { - i.state.iframeExpanded = !i.state.iframeExpanded; + handleImageExpandClick(i: PostListing) { + i.state.imageExpanded = !i.state.imageExpanded; i.setState(i.state); } } diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 3a8e25760..f8bf6ea62 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -59,4 +59,11 @@ export function isMod(modIds: Array, creator_id: number): boolean { return modIds.includes(creator_id); } + +var imageRegex = new RegExp(`(http)?s?:?(\/\/[^"']*\.(?:png|jpg|jpeg|gif|png|svg))`); + +export function isImage(url: string) { + return imageRegex.test(url); +} + export let fetchLimit: number = 20;