Adding a simple image expander instead of iframes.

- Fixes #91
This commit is contained in:
Dessalines 2019-04-24 09:28:20 -07:00
parent 93ea888568
commit a5664c75ba
4 changed files with 33 additions and 16 deletions

View file

@ -87,8 +87,9 @@ and goto http://localhost:8536
- [Ranking Algorithm](docs/ranking.md) - [Ranking Algorithm](docs/ranking.md)
## Support ## Support
Support the development, and help cover hosting costs. Lemmy is free, open-source software, meaning no advertising, monetizing, or venture capital, ever. Your donations directly support full-time development of the project.
- [Patreon](https://www.patreon.com/dessalines) - [Support on Patreon](https://www.patreon.com/dessalines).
- [Sponsor List](https://dev.lemmy.ml/#/sponsors).
- bitcoin: `bc1queu73nwuheqtsp65nyh5hf4jr533r8rr5nsj75` - bitcoin: `bc1queu73nwuheqtsp65nyh5hf4jr533r8rr5nsj75`
- ethereum: `0x400c96c96acbC6E7B3B43B1dc1BB446540a88A01` - ethereum: `0x400c96c96acbC6E7B3B43B1dc1BB446540a88A01`

View file

@ -33,5 +33,10 @@
- [Hierarchical tree building javascript](https://stackoverflow.com/a/40732240/1655478) - [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) - [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) - [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) - [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

View file

@ -4,13 +4,13 @@ import { WebSocketService, UserService } from '../services';
import { Post, CreatePostLikeForm, PostForm as PostFormI, SavePostForm, CommunityUser, UserView } from '../interfaces'; import { Post, CreatePostLikeForm, PostForm as PostFormI, SavePostForm, CommunityUser, UserView } from '../interfaces';
import { MomentTime } from './moment-time'; import { MomentTime } from './moment-time';
import { PostForm } from './post-form'; import { PostForm } from './post-form';
import { mdToHtml, canMod, isMod } from '../utils'; import { mdToHtml, canMod, isMod, isImage } from '../utils';
interface PostListingState { interface PostListingState {
showEdit: boolean; showEdit: boolean;
showRemoveDialog: boolean; showRemoveDialog: boolean;
removeReason: string; removeReason: string;
iframeExpanded: boolean; imageExpanded: boolean;
} }
interface PostListingProps { interface PostListingProps {
@ -29,7 +29,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
showEdit: false, showEdit: false,
showRemoveDialog: false, showRemoveDialog: false,
removeReason: null, removeReason: null,
iframeExpanded: false imageExpanded: false
} }
constructor(props: any, context: any) { constructor(props: any, context: any) {
@ -78,16 +78,20 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
} }
</h5> </h5>
<small><a className="ml-2 text-muted font-italic" href={post.url} title={post.url}>{(new URL(post.url)).hostname}</a></small> <small><a className="ml-2 text-muted font-italic" href={post.url} title={post.url}>{(new URL(post.url)).hostname}</a></small>
{ !this.state.iframeExpanded { isImage(post.url) &&
? <span class="badge badge-light pointer ml-2 text-muted small" title="Expand here" onClick={linkEvent(this, this.handleIframeExpandClick)}>+</span> <>
{ !this.state.imageExpanded
? <span class="badge badge-light pointer ml-2 text-muted small" title="Expand here" onClick={linkEvent(this, this.handleImageExpandClick)}>+</span>
: :
<span> <span>
<span class="pointer ml-2 badge badge-light text-muted small" onClick={linkEvent(this, this.handleIframeExpandClick)}>-</span> <span class="pointer ml-2 badge badge-light text-muted small" onClick={linkEvent(this, this.handleImageExpandClick)}>-</span>
<div class="embed-responsive embed-responsive-1by1"> <div>
<iframe scrolling="yes" class="embed-responsive-item" src={post.url}></iframe> <img class="img-fluid" src={post.url} />
</div> </div>
</span> </span>
} }
</>
}
</div> </div>
: <h5 className="mb-0"><Link className="text-white" to={`/post/${post.id}`}>{post.name}</Link> : <h5 className="mb-0"><Link className="text-white" to={`/post/${post.id}`}>{post.name}</Link>
{post.removed && {post.removed &&
@ -292,8 +296,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
WebSocketService.Instance.editPost(form); WebSocketService.Instance.editPost(form);
} }
handleIframeExpandClick(i: PostListing) { handleImageExpandClick(i: PostListing) {
i.state.iframeExpanded = !i.state.iframeExpanded; i.state.imageExpanded = !i.state.imageExpanded;
i.setState(i.state); i.setState(i.state);
} }
} }

View file

@ -59,4 +59,11 @@ export function isMod(modIds: Array<number>, creator_id: number): boolean {
return modIds.includes(creator_id); 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; export let fetchLimit: number = 20;