diff options
-rw-r--r-- | doc/developer/tests/test-links.md | 2 | ||||
-rw-r--r-- | web/react/components/post_attachment_oembed.jsx | 35 | ||||
-rw-r--r-- | web/react/components/post_body.jsx | 12 | ||||
-rw-r--r-- | web/react/components/post_body_additional_content.jsx | 6 | ||||
-rw-r--r-- | web/react/components/post_info.jsx | 81 | ||||
-rw-r--r-- | web/react/components/providers.json | 158 | ||||
-rw-r--r-- | web/react/utils/utils.jsx | 20 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_post.scss | 4 |
8 files changed, 208 insertions, 110 deletions
diff --git a/doc/developer/tests/test-links.md b/doc/developer/tests/test-links.md index 011542c82..91e3e9403 100644 --- a/doc/developer/tests/test-links.md +++ b/doc/developer/tests/test-links.md @@ -39,6 +39,8 @@ http:// @example.com ./make-compiled-client.sh test.:test +https://<your-mattermost-url>/signup/gitlab +https://your-mattermost-url>/signup/gitlab #### Only the links within these sentences should auto-link: diff --git a/web/react/components/post_attachment_oembed.jsx b/web/react/components/post_attachment_oembed.jsx index f544dbc88..13c32f744 100644 --- a/web/react/components/post_attachment_oembed.jsx +++ b/web/react/components/post_attachment_oembed.jsx @@ -20,8 +20,11 @@ export default class PostAttachmentOEmbed extends React.Component { fetchData(link) { if (!this.isLoading) { this.isLoading = true; + let url = 'https://noembed.com/embed?nowrap=on'; + url += '&url=' + encodeURIComponent(link); + url += '&maxheight=' + this.props.provider.height; return $.ajax({ - url: 'https://noembed.com/embed?nowrap=on&url=' + encodeURIComponent(link), + url, dataType: 'jsonp', success: (result) => { this.isLoading = false; @@ -39,8 +42,18 @@ export default class PostAttachmentOEmbed extends React.Component { } render() { + let data = {}; + let content; if ($.isEmptyObject(this.state.data)) { - return <div></div>; + content = <div style={{height: this.props.provider.height}}/>; + } else { + data = this.state.data; + content = ( + <div + style={{height: this.props.provider.height}} + dangerouslySetInnerHTML={{__html: data.html}} + /> + ); } return ( @@ -57,18 +70,17 @@ export default class PostAttachmentOEmbed extends React.Component { > <a className='attachment__title-link' - href={this.state.data.url} + href={data.url} target='_blank' > - {this.state.data.title} + {data.title} </a> </h1> - <div> - <div className={'attachment__body attachment__body--no_thumb'}> - <div - dangerouslySetInnerHTML={{__html: this.state.data.html}} - > - </div> + <div > + <div + className={'attachment__body attachment__body--no_thumb'} + > + {content} </div> </div> </div> @@ -79,5 +91,6 @@ export default class PostAttachmentOEmbed extends React.Component { } PostAttachmentOEmbed.propTypes = { - link: React.PropTypes.string.isRequired + link: React.PropTypes.string.isRequired, + provider: React.PropTypes.object.isRequired }; diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index 27f7ad2de..3e335b901 100644 --- a/web/react/components/post_body.jsx +++ b/web/react/components/post_body.jsx @@ -109,10 +109,11 @@ export default class PostBody extends React.Component { const trimmedLink = link.trim(); - if (this.checkForOembedContent(trimmedLink)) { + const provider = this.getOembedProvider(trimmedLink); + if (provider != null) { post.props.oEmbedLink = trimmedLink; post.type = 'oEmbed'; - this.setState({post}); + this.setState({post, provider}); return ''; } @@ -133,15 +134,15 @@ export default class PostBody extends React.Component { return null; } - checkForOembedContent(link) { + getOembedProvider(link) { for (let i = 0; i < providers.length; i++) { for (let j = 0; j < providers[i].patterns.length; j++) { if (link.match(providers[i].patterns[j])) { - return true; + return providers[i]; } } } - return false; + return null; } loadImg(src) { @@ -399,6 +400,7 @@ export default class PostBody extends React.Component { </div> <PostBodyAdditionalContent post={this.state.post} + provider={this.state.provider} /> {fileAttachmentHolder} {this.embed} diff --git a/web/react/components/post_body_additional_content.jsx b/web/react/components/post_body_additional_content.jsx index e19bf51eb..7e6f3f037 100644 --- a/web/react/components/post_body_additional_content.jsx +++ b/web/react/components/post_body_additional_content.jsx @@ -32,6 +32,7 @@ export default class PostBodyAdditionalContent extends React.Component { return ( <PostAttachmentOEmbed key={'post_body_additional_content' + this.props.post.id} + provider={this.props.provider} link={link} /> ); @@ -68,5 +69,6 @@ export default class PostBodyAdditionalContent extends React.Component { } PostBodyAdditionalContent.propTypes = { - post: React.PropTypes.object.isRequired -};
\ No newline at end of file + post: React.PropTypes.object.isRequired, + provider: React.PropTypes.object +}; diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index cedb2b59b..0b8b07d8c 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -9,14 +9,15 @@ import * as EventHelpers from '../dispatcher/event_helpers.jsx'; import Constants from '../utils/constants.jsx'; -const OverlayTrigger = ReactBootstrap.OverlayTrigger; +const Overlay = ReactBootstrap.Overlay; const Popover = ReactBootstrap.Popover; export default class PostInfo extends React.Component { constructor(props) { super(props); this.state = { - copiedLink: false + copiedLink: false, + show: false }; this.handlePermalinkCopy = this.handlePermalinkCopy.bind(this); @@ -41,30 +42,37 @@ export default class PostInfo extends React.Component { dataComments = this.props.commentCount; } - if (isOwner) { + if (this.props.allowReply === 'true') { dropdownContents.push( <li - key='editPost' + key='replyLink' role='presentation' > <a + className='link__reply theme' href='#' - role='menuitem' - data-toggle='modal' - data-target='#edit_post' - data-refocusid='#post_textbox' - data-title={type} - data-message={post.message} - data-postid={post.id} - data-channelid={post.channel_id} - data-comments={dataComments} + onClick={this.props.handleCommentClick} > - {'Edit'} + {'Reply'} </a> </li> ); } + dropdownContents.push( + <li + key='copyLink' + role='presentation' + > + <a + href='#' + onClick={(e) => this.setState({target: e.target, show: !this.state.show})} + > + {'Permalink'} + </a> + </li> + ); + if (isOwner || isAdmin) { dropdownContents.push( <li @@ -82,18 +90,25 @@ export default class PostInfo extends React.Component { ); } - if (this.props.allowReply === 'true') { + if (isOwner) { dropdownContents.push( <li - key='replyLink' + key='editPost' role='presentation' > <a - className='link__reply theme' href='#' - onClick={this.props.handleCommentClick} + role='menuitem' + data-toggle='modal' + data-target='#edit_post' + data-refocusid='#post_textbox' + data-title={type} + data-message={post.message} + data-postid={post.id} + data-channelid={post.channel_id} + data-comments={dataComments} > - {'Reply'} + {'Edit'} </a> </li> ); @@ -121,6 +136,7 @@ export default class PostInfo extends React.Component { </div> ); } + handlePermalinkCopy() { const textBox = $(ReactDOM.findDOMNode(this.refs.permalinkbox)); textBox.select(); @@ -128,7 +144,7 @@ export default class PostInfo extends React.Component { try { const successful = document.execCommand('copy'); if (successful) { - this.setState({copiedLink: true}); + this.setState({copiedLink: true, show: false}); } else { this.setState({copiedLink: false}); } @@ -197,6 +213,8 @@ export default class PostInfo extends React.Component { </Popover> ); + const containerPadding = 20; + return ( <ul className='post__header post__header--info'> <li className='col'> @@ -206,18 +224,23 @@ export default class PostInfo extends React.Component { </li> <li className='col col__reply'> {comments} - <OverlayTrigger - trigger='click' - placement='left' - rootClose={true} - overlay={permalinkOverlay} + <div + className='dropdown' + ref='dotMenu' > - <i className={'permalink-icon fa fa-link ' + showCommentClass}/> - </OverlayTrigger> - - <div className='dropdown'> {dropdown} </div> + <Overlay + show={this.state.show} + target={() => ReactDOM.findDOMNode(this.refs.dotMenu)} + onHide={() => this.setState({show: false})} + placement='left' + container={this} + containerPadding={containerPadding} + rootClose={true} + > + {permalinkOverlay} + </Overlay> </li> </ul> ); diff --git a/web/react/components/providers.json b/web/react/components/providers.json index 5e4cbd656..33e377a39 100644 --- a/web/react/components/providers.json +++ b/web/react/components/providers.json @@ -3,265 +3,308 @@ "patterns": [ "http://(?:www\\.)?xkcd\\.com/\\d+/?" ], - "name": "XKCD" + "name": "XKCD", + "height": 110 }, { "patterns": [ "https?://soundcloud.com/.*/.*" ], - "name": "SoundCloud" + "name": "SoundCloud", + "height": 110 }, { "patterns": [ "https?://(?:www\\.)?flickr\\.com/.*", "https?://flic\\.kr/p/[a-zA-Z0-9]+" ], - "name": "Flickr" + "name": "Flickr", + "height": 110 }, { "patterns": [ "http://www\\.ted\\.com/talks/.+\\.html" ], - "name": "TED" + "name": "TED", + "height": 110 }, { "patterns": [ "http://(?:www\\.)?theverge\\.com/\\d{4}/\\d{1,2}/\\d{1,2}/\\d+/[^/]+/?$" ], - "name": "The Verge" + "name": "The Verge", + "height": 110 }, { "patterns": [ "http://.*\\.viddler\\.com/.*" ], - "name": "Viddler" + "name": "Viddler", + "height": 110 }, { "patterns": [ "https?://(?:www\\.)?avclub\\.com/article/[^/]+/?$" ], - "name": "The AV Club" + "name": "The AV Club", + "height": 110 }, { "patterns": [ "https?://(?:www\\.)?wired\\.com/([^/]+/)?\\d+/\\d+/[^/]+/?$" ], - "name": "Wired" + "name": "Wired", + "height": 110 }, { "patterns": [ "http://www\\.theonion\\.com/articles/[^/]+/?" ], - "name": "The Onion" + "name": "The Onion", + "height": 110 }, { "patterns": [ "http://yfrog\\.com/[0-9a-zA-Z]+/?$" ], - "name": "YFrog" + "name": "YFrog", + "height": 110 }, { "patterns": [ "http://www\\.duffelblog\\.com/\\d{4}/\\d{1,2}/[^/]+/?$" ], - "name": "The Duffel Blog" + "name": "The Duffel Blog", + "height": 110 }, { "patterns": [ "http://www\\.clickhole\\.com/article/[^/]+/?" ], - "name": "Clickhole" + "name": "Clickhole", + "height": 110 }, { "patterns": [ "https?://(?:www.)?skitch.com/([^/]+)/[^/]+/.+", "http://skit.ch/[^/]+" ], - "name": "Skitch" + "name": "Skitch", + "height": 110 }, { "patterns": [ "https?://(alpha|posts|photos)\\.app\\.net/.*" ], - "name": "ADN" + "name": "ADN", + "height": 110 }, { "patterns": [ "https?://gist\\.github\\.com/(?:[-0-9a-zA-Z]+/)?([0-9a-fA-f]+)" ], - "name": "Gist" + "name": "Gist", + "height": 110 }, { "patterns": [ "https?://www\\.(dropbox\\.com/s/.+\\.(?:jpg|png|gif))", "https?://db\\.tt/[a-zA-Z0-9]+" ], - "name": "Dropbox" + "name": "Dropbox", + "height": 110 }, { "patterns": [ "https?://[^\\.]+\\.wikipedia\\.org/wiki/(?!Talk:)[^#]+(?:#(.+))?" ], - "name": "Wikipedia" + "name": "Wikipedia", + "height": 110 }, { "patterns": [ "http://www.traileraddict.com/trailer/[^/]+/trailer" ], - "name": "TrailerAddict" + "name": "TrailerAddict", + "height": 110 }, { "patterns": [ "http://lockerz\\.com/[sd]/\\d+" ], - "name": "Lockerz" + "name": "Lockerz", + "height": 110 }, { "patterns": [ "http://gifuk\\.com/s/[0-9a-f]{16}" ], - "name": "GIFUK" + "name": "GIFUK", + "height": 110 }, { "patterns": [ "http://trailers\\.apple\\.com/trailers/[^/]+/[^/]+" ], - "name": "iTunes Movie Trailers" + "name": "iTunes Movie Trailers", + "height": 110 }, { "patterns": [ "http://gfycat\\.com/([a-zA-Z]+)" ], - "name": "Gfycat" + "name": "Gfycat", + "height": 110 }, { "patterns": [ "http://bash\\.org/\\?(\\d+)" ], - "name": "Bash.org" + "name": "Bash.org", + "height": 110 }, { "patterns": [ "http://arstechnica\\.com/[^/]+/\\d+/\\d+/[^/]+/?$" ], - "name": "Ars Technica" + "name": "Ars Technica", + "height": 110 }, { "patterns": [ "http://imgur\\.com/gallery/[0-9a-zA-Z]+" ], - "name": "Imgur" + "name": "Imgur", + "height": 110 }, { "patterns": [ "http://www\\.asciiartfarts\\.com/[0-9]+\\.html" ], - "name": "ASCII Art Farts" + "name": "ASCII Art Farts", + "height": 110 }, { "patterns": [ "http://www\\.monoprice\\.com/products/product\\.asp\\?.*p_id=\\d+" ], - "name": "Monoprice" + "name": "Monoprice", + "height": 110 }, { "patterns": [ "http://boingboing\\.net/\\d{4}/\\d{2}/\\d{2}/[^/]+\\.html" ], - "name": "Boing Boing" + "name": "Boing Boing", + "height": 110 }, { "patterns": [ "https?://github\\.com/([^/]+)/([^/]+)/commit/(.+)", "http://git\\.io/[_0-9a-zA-Z]+" ], - "name": "Github Commit" + "name": "Github Commit", + "height": 110 }, { "patterns": [ "https?://open\\.spotify\\.com/(track|album)/([0-9a-zA-Z]{22})" ], - "name": "Spotify" + "name": "Spotify", + "height": 110 }, { "patterns": [ "https?://path\\.com/p/([0-9a-zA-Z]+)$" ], - "name": "Path" + "name": "Path", + "height": 110 }, { "patterns": [ "http://www.funnyordie.com/videos/[^/]+/.+" ], - "name": "Funny or Die" + "name": "Funny or Die", + "height": 110 }, { "patterns": [ "http://(?:www\\.)?twitpic\\.com/([^/]+)" ], - "name": "Twitpic" + "name": "Twitpic", + "height": 110 }, { "patterns": [ "https?://www\\.giantbomb\\.com/videos/[^/]+/\\d+-\\d+/?" ], - "name": "GiantBomb" + "name": "GiantBomb", + "height": 110 }, { "patterns": [ "http://(?:www\\.)?beeradvocate\\.com/beer/profile/\\d+/\\d+" ], - "name": "Beer Advocate" + "name": "Beer Advocate", + "height": 110 }, { "patterns": [ "http://(?:www\\.)?imdb.com/title/(tt\\d+)" ], - "name": "IMDB" + "name": "IMDB", + "height": 110 }, { "patterns": [ "http://cl\\.ly/(?:image/)?[0-9a-zA-Z]+/?$" ], - "name": "CloudApp" + "name": "CloudApp", + "height": 110 }, { "patterns": [ "http://clyp\\.it/.*" ], - "name": "Clyp" + "name": "Clyp", + "height": 110 }, { "patterns": [ "http://www\\.hulu\\.com/watch/.*" ], - "name": "Hulu" + "name": "Hulu", + "height": 110 }, { "patterns": [ "https?://(?:www|mobile\\.)?twitter\\.com/(?:#!/)?[^/]+/status(?:es)?/(\\d+)/?$", "https?://t\\.co/[a-zA-Z0-9]+" ], - "name": "Twitter" + "name": "Twitter", + "height": 110 }, { "patterns": [ "https?://(?:www\\.)?vimeo\\.com/.+" ], - "name": "Vimeo" + "name": "Vimeo", + "height": 110 }, { "patterns": [ "http://www\\.amazon\\.com/(?:.+/)?[gd]p/(?:product/)?(?:tags-on-product/)?([a-zA-Z0-9]+)", "http://amzn\\.com/([^/]+)" ], - "name": "Amazon" + "name": "Amazon", + "height": 110 }, { "patterns": [ "http://qik\\.com/video/.*" ], - "name": "Qik" + "name": "Qik", + "height": 110 }, { "patterns": [ @@ -269,56 +312,65 @@ "http://www\\.rdio\\.com/artist/[^/]+/album/[^/]+/track/[^/]+/?", "http://www\\.rdio\\.com/people/[^/]+/playlists/\\d+/[^/]+" ], - "name": "Rdio" + "name": "Rdio", + "height": 110 }, { "patterns": [ "http://www\\.slideshare\\.net/.*/.*" ], - "name": "SlideShare" + "name": "SlideShare", + "height": 110 }, { "patterns": [ "http://imgur\\.com/([0-9a-zA-Z]+)$" ], - "name": "Imgur" + "name": "Imgur", + "height": 110 }, { "patterns": [ "https?://instagr(?:\\.am|am\\.com)/p/.+" ], - "name": "Instagram" + "name": "Instagram", + "height": 110 }, { "patterns": [ "http://www\\.twitlonger\\.com/show/[a-zA-Z0-9]+", "http://tl\\.gd/[^/]+" ], - "name": "Twitlonger" + "name": "Twitlonger", + "height": 110 }, { "patterns": [ "https?://vine.co/v/[a-zA-Z0-9]+" ], - "name": "Vine" + "name": "Vine", + "height": 110 }, { "patterns": [ "http://www\\.urbandictionary\\.com/define\\.php\\?term=.+" ], - "name": "Urban Dictionary" + "name": "Urban Dictionary", + "height": 110 }, { "patterns": [ "http://picplz\\.com/user/[^/]+/pic/[^/]+" ], - "name": "Picplz" + "name": "Picplz", + "height": 110 }, { "patterns": [ "https?://(?:www\\.)?twitter\\.com/(?:#!/)?[^/]+/status(?:es)?/(\\d+)/photo/\\d+(?:/large|/)?$", "https?://pic\\.twitter\\.com/.+" ], - "name": "Twitter" + "name": "Twitter", + "height": 110 } -]
\ No newline at end of file +] diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index afe27ef96..f80da8415 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -252,13 +252,6 @@ export function getTimestamp() { // extracts links not styled by Markdown export function extractLinks(text) { - const urlMatcher = new Autolinker.matchParser.MatchParser({ - urls: true, - emails: false, - twitter: false, - phone: false, - hashtag: false - }); const links = []; let replaceText = text; @@ -271,7 +264,7 @@ export function extractLinks(text) { } } - function replaceFn(match) { + function replaceFn(autolinker, match) { let link = ''; const matchText = match.getMatchedText(); const tempText = replaceText; @@ -304,7 +297,16 @@ export function extractLinks(text) { links.push(link); } - urlMatcher.replace(text, replaceFn, this); + + Autolinker.link(text, { + replaceFn, + urls: true, + emails: false, + twitter: false, + phone: false, + hashtag: false + }); + return {links, text}; } diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 4376b43a4..af603f692 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -568,7 +568,6 @@ body.ios { display: inline-block; visibility: hidden; top: -1px; - float: right; .dropdown-menu { right: 0; @@ -751,6 +750,7 @@ body.ios { width: 80%; padding-right: 5px; overflow-x: auto; + overflow-y: hidden; &.attachment__body--no_thumb { width: 100%; } @@ -765,6 +765,7 @@ body.ios { margin: 5px 0; padding: 0; line-height: 16px; + height: 22px; font-size: 16px; a { font-size: 16px; @@ -805,4 +806,5 @@ body.ios { .permalink-popover { min-width: 320px; + margin-left: 50px !important; } |