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 e71637bc92
commit 55b684c6f1
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)
## 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`

View file

@ -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

View file

@ -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<PostListingProps, PostListingState> {
showEdit: false,
showRemoveDialog: false,
removeReason: null,
iframeExpanded: false
imageExpanded: false
}
constructor(props: any, context: any) {
@ -78,15 +78,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
}
</h5>
<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
? <span class="badge badge-light pointer ml-2 text-muted small" title="Expand here" onClick={linkEvent(this, this.handleIframeExpandClick)}>+</span>
:
<span>
<span class="pointer ml-2 badge badge-light text-muted small" onClick={linkEvent(this, this.handleIframeExpandClick)}>-</span>
<div class="embed-responsive embed-responsive-1by1">
<iframe scrolling="yes" class="embed-responsive-item" src={post.url}></iframe>
</div>
</span>
{ isImage(post.url) &&
<>
{ !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 class="pointer ml-2 badge badge-light text-muted small" onClick={linkEvent(this, this.handleImageExpandClick)}>-</span>
<div>
<img class="img-fluid" src={post.url} />
</div>
</span>
}
</>
}
</div>
: <h5 className="mb-0"><Link className="text-white" to={`/post/${post.id}`}>{post.name}</Link>
@ -292,8 +296,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
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);
}
}

View file

@ -59,4 +59,11 @@ export function isMod(modIds: Array<number>, 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;