Replace the share popup with a component
This commit is contained in:
Robin Ward
parent
2a25136ecf
commit
93403b0af6
|
|
@ -0,0 +1,157 @@
|
|||
import { wantsNewWindow } from 'discourse/lib/intercept-click';
|
||||
import { longDateNoYear } from 'discourse/lib/formatter';
|
||||
import computed from 'ember-addons/ember-computed-decorators';
|
||||
import Sharing from 'discourse/lib/sharing';
|
||||
|
||||
export default Ember.Component.extend({
|
||||
elementId: 'share-link',
|
||||
classNameBindings: ['visible'],
|
||||
link: null,
|
||||
visible: null,
|
||||
|
||||
@computed
|
||||
sources() {
|
||||
return Sharing.activeSources(this.siteSettings.share_links);
|
||||
},
|
||||
|
||||
@computed('type', 'postNumber')
|
||||
shareTitle(type, postNumber) {
|
||||
if (type === 'topic') { return I18n.t('share.topic'); }
|
||||
if (postNumber) {
|
||||
return I18n.t('share.post', { postNumber });
|
||||
}
|
||||
return I18n.t('share.topic');
|
||||
},
|
||||
|
||||
@computed('date')
|
||||
displayDate(date) {
|
||||
return longDateNoYear(new Date(date));
|
||||
},
|
||||
|
||||
_focusUrl() {
|
||||
const link = this.get('link');
|
||||
if (!this.capabilities.touch) {
|
||||
const $linkInput = $('#share-link input');
|
||||
$linkInput.val(link);
|
||||
|
||||
// Wait for the fade-in transition to finish before selecting the link:
|
||||
window.setTimeout(() => $linkInput.select().focus(), 160);
|
||||
} else {
|
||||
const $linkForTouch = $('#share-link .share-for-touch a');
|
||||
$linkForTouch.attr('href', link);
|
||||
$linkForTouch.html(link);
|
||||
const range = window.document.createRange();
|
||||
range.selectNode($linkForTouch[0]);
|
||||
window.getSelection().addRange(range);
|
||||
}
|
||||
},
|
||||
|
||||
_showUrl($target, url) {
|
||||
const $currentTargetOffset = $target.offset();
|
||||
const $this = this.$();
|
||||
|
||||
if (Ember.isEmpty(url)) { return; }
|
||||
|
||||
// Relative urls
|
||||
if (url.indexOf("/") === 0) {
|
||||
url = window.location.protocol + "//" + window.location.host + url;
|
||||
}
|
||||
|
||||
const shareLinkWidth = $this.width();
|
||||
let x = $currentTargetOffset.left - (shareLinkWidth / 2);
|
||||
if (x < 25) { x = 25; }
|
||||
if (x + shareLinkWidth > $(window).width()) {
|
||||
x -= shareLinkWidth / 2;
|
||||
}
|
||||
|
||||
const header = $('.d-header');
|
||||
let y = $currentTargetOffset.top - ($this.height() + 20);
|
||||
if (y < header.offset().top + header.height()) {
|
||||
y = $currentTargetOffset.top + 10;
|
||||
}
|
||||
|
||||
$this.css({top: "" + y + "px"});
|
||||
|
||||
if (!this.site.mobileView) {
|
||||
$this.css({left: "" + x + "px"});
|
||||
}
|
||||
this.set('link', url);
|
||||
this.set('visible', true);
|
||||
|
||||
Ember.run.scheduleOnce('afterRender', this, this._focusUrl);
|
||||
},
|
||||
|
||||
didInsertElement() {
|
||||
this._super();
|
||||
|
||||
const $html = $('html');
|
||||
$html.on('mousedown.outside-share-link', e => {
|
||||
// Use mousedown instead of click so this event is handled before routing occurs when a
|
||||
// link is clicked (which is a click event) while the share dialog is showing.
|
||||
if (this.$().has(e.target).length !== 0) { return; }
|
||||
this.send('close');
|
||||
return true;
|
||||
});
|
||||
|
||||
$html.on('click.discoure-share-link', '[data-share-url]', e => {
|
||||
// if they want to open in a new tab, let it so
|
||||
if (wantsNewWindow(e)) { return true; }
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
const $currentTarget = $(e.currentTarget);
|
||||
const url = $currentTarget.data('share-url');
|
||||
const postNumber = $currentTarget.data('post-number');
|
||||
const postId = $currentTarget.closest('article').data('post-id');
|
||||
const date = $currentTarget.children().data('time');
|
||||
|
||||
this.setProperties({ postNumber, date, postId });
|
||||
this._showUrl($currentTarget, url);
|
||||
return false;
|
||||
});
|
||||
|
||||
$html.on('keydown.share-view', e => {
|
||||
if (e.keyCode === 27) {
|
||||
this.send('close');
|
||||
}
|
||||
});
|
||||
|
||||
this.appEvents.on('share:url', (url, $target) => this._showUrl($target, url));
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
this._super();
|
||||
$('html').off('click.discoure-share-link')
|
||||
.off('mousedown.outside-share-link')
|
||||
.off('keydown.share-view');
|
||||
},
|
||||
|
||||
actions: {
|
||||
replyAsNewTopic() {
|
||||
const postStream = this.get("topic.postStream");
|
||||
const postId = this.get("postId") || postStream.findPostIdForPostNumber(1);
|
||||
const post = postStream.findLoadedPost(postId);
|
||||
this.sendAction('replyAsNewTopic', post);
|
||||
this.send("close");
|
||||
},
|
||||
|
||||
close() {
|
||||
this.setProperties({
|
||||
link: null,
|
||||
postNumber: null,
|
||||
postId: null,
|
||||
visible: false
|
||||
});
|
||||
},
|
||||
|
||||
share(source) {
|
||||
var url = source.generateUrl(this.get('link'), this.get('title'));
|
||||
if (source.shouldOpenInPopup) {
|
||||
window.open(url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=600,height=' + (source.popupHeight || 315));
|
||||
} else {
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
import Sharing from 'discourse/lib/sharing';
|
||||
import { longDateNoYear } from 'discourse/lib/formatter';
|
||||
import computed from 'ember-addons/ember-computed-decorators';
|
||||
|
||||
export default Ember.Controller.extend({
|
||||
topic: Ember.inject.controller(),
|
||||
|
||||
title: Ember.computed.alias('topic.model.title'),
|
||||
canReplyAsNewTopic: Ember.computed.alias('topic.model.details.can_reply_as_new_topic'),
|
||||
|
||||
@computed('type', 'postNumber')
|
||||
shareTitle(type, postNumber) {
|
||||
if (type === 'topic') { return I18n.t('share.topic'); }
|
||||
if (postNumber) {
|
||||
return I18n.t('share.post', { postNumber });
|
||||
} else {
|
||||
return I18n.t('share.topic');
|
||||
}
|
||||
},
|
||||
|
||||
@computed('date')
|
||||
displayDate(date) {
|
||||
return longDateNoYear(new Date(date));
|
||||
},
|
||||
|
||||
// Close the share controller
|
||||
actions: {
|
||||
close() {
|
||||
this.setProperties({ link: null, postNumber: null, postId: null });
|
||||
return false;
|
||||
},
|
||||
|
||||
replyAsNewTopic() {
|
||||
const topicController = this.get("topic");
|
||||
const postStream = topicController.get("model.postStream");
|
||||
const postId = this.get("postId") || postStream.findPostIdForPostNumber(1);
|
||||
const post = postStream.findLoadedPost(postId);
|
||||
topicController.send("replyAsNewTopic", post);
|
||||
this.send("close");
|
||||
},
|
||||
|
||||
share(source) {
|
||||
var url = source.generateUrl(this.get('link'), this.get('title'));
|
||||
if (source.shouldOpenInPopup) {
|
||||
window.open(url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=600,height=' + (source.popupHeight || 315));
|
||||
} else {
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@computed
|
||||
sources() {
|
||||
return Sharing.activeSources(this.siteSettings.share_links);
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<h3>{{shareTitle}}</h3>
|
||||
|
||||
{{#if date}}
|
||||
<span class="date">{{displayDate}}</span>
|
||||
{{/if}}
|
||||
|
||||
<div>
|
||||
<input type='text'>
|
||||
<div class="share-for-touch"><div class="overflow-ellipsis"><a></a></div></div>
|
||||
</div>
|
||||
|
||||
{{#each sources as |s|}}
|
||||
{{share-source source=s title=model.title action="share"}}
|
||||
{{/each}}
|
||||
|
||||
{{#if topic.details.can_reply_as_new_topic}}
|
||||
<div class='reply-as-new-topic'>
|
||||
<a href {{action "replyAsNewTopic"}} aria-label={{i18n 'post.reply_as_new_topic'}} title={{i18n 'post.reply_as_new_topic'}}>{{fa-icon "plus"}}{{i18n 'topic.create'}}</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class='link'>
|
||||
<a href {{action "close"}} class="close-share" aria-label={{i18n 'share.close'}} title={{i18n 'share.close'}}>{{fa-icon "close"}}</a>
|
||||
</div>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
{{#if link}}
|
||||
<h3>{{shareTitle}}</h3>
|
||||
|
||||
{{#if date}}
|
||||
<span class="date">{{displayDate}}</span>
|
||||
{{/if}}
|
||||
|
||||
<div>
|
||||
<input type='text'>
|
||||
<div class="share-for-touch"><div class="overflow-ellipsis"><a></a></div></div>
|
||||
</div>
|
||||
|
||||
{{#each sources as |s|}}
|
||||
{{share-source source=s title=title action="share"}}
|
||||
{{/each}}
|
||||
|
||||
{{#if canReplyAsNewTopic}}
|
||||
<div class='reply-as-new-topic'>
|
||||
<a href {{action "replyAsNewTopic"}} aria-label='{{i18n 'post.reply_as_new_topic'}}' title='{{i18n 'post.reply_as_new_topic'}}'>{{fa-icon "plus"}}{{i18n 'topic.create'}}</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class='link'>
|
||||
<a href {{action "close"}} aria-label='{{i18n 'share.close'}}' title='{{i18n 'share.close'}}'>{{fa-icon "close"}}</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -221,7 +221,7 @@
|
|||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{render "share"}}
|
||||
{{share-popup topic=model replyAsNewTopic="replyAsNewTopic"}}
|
||||
|
||||
{{#if currentUser.enable_quoting}}
|
||||
{{render "quote-button"}}
|
||||
|
|
|
|||
|
|
@ -1,116 +0,0 @@
|
|||
import computed from 'ember-addons/ember-computed-decorators';
|
||||
import { observes } from 'ember-addons/ember-computed-decorators';
|
||||
import { wantsNewWindow } from 'discourse/lib/intercept-click';
|
||||
|
||||
export default Ember.View.extend({
|
||||
templateName: 'share',
|
||||
elementId: 'share-link',
|
||||
classNameBindings: ['hasLink'],
|
||||
|
||||
@computed('controller.link')
|
||||
hasLink(link) {
|
||||
return !Ember.isEmpty(link) ? 'visible' : null;
|
||||
},
|
||||
|
||||
@observes('controller.link')
|
||||
linkChanged() {
|
||||
const link = this.get('controller.link');
|
||||
if (!Ember.isEmpty(link)) {
|
||||
Ember.run.next(() => {
|
||||
if (!this.capabilities.touch) {
|
||||
const $linkInput = $('#share-link input');
|
||||
$linkInput.val(link);
|
||||
|
||||
// Wait for the fade-in transition to finish before selecting the link:
|
||||
window.setTimeout(() => $linkInput.select().focus(), 160);
|
||||
} else {
|
||||
const $linkForTouch = $('#share-link .share-for-touch a');
|
||||
$linkForTouch.attr('href', link);
|
||||
$linkForTouch.html(link);
|
||||
const range = window.document.createRange();
|
||||
range.selectNode($linkForTouch[0]);
|
||||
window.getSelection().addRange(range);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
didInsertElement() {
|
||||
const self = this;
|
||||
const $html = $('html');
|
||||
|
||||
$html.on('mousedown.outside-share-link', e => {
|
||||
// Use mousedown instead of click so this event is handled before routing occurs when a
|
||||
// link is clicked (which is a click event) while the share dialog is showing.
|
||||
if (this.$().has(e.target).length !== 0) { return; }
|
||||
this.get('controller').send('close');
|
||||
return true;
|
||||
});
|
||||
|
||||
function showPanel($target, url, postNumber, date, postId) {
|
||||
const $currentTargetOffset = $target.offset();
|
||||
const $shareLink = $('#share-link');
|
||||
|
||||
// Relative urls
|
||||
if (url.indexOf("/") === 0) {
|
||||
url = window.location.protocol + "//" + window.location.host + url;
|
||||
}
|
||||
|
||||
const shareLinkWidth = $shareLink.width();
|
||||
let x = $currentTargetOffset.left - (shareLinkWidth / 2);
|
||||
if (x < 25) { x = 25; }
|
||||
if (x + shareLinkWidth > $(window).width()) {
|
||||
x -= shareLinkWidth / 2;
|
||||
}
|
||||
|
||||
const header = $('.d-header');
|
||||
let y = $currentTargetOffset.top - ($shareLink.height() + 20);
|
||||
if (y < header.offset().top + header.height()) {
|
||||
y = $currentTargetOffset.top + 10;
|
||||
}
|
||||
|
||||
$shareLink.css({top: "" + y + "px"});
|
||||
|
||||
if (!self.site.mobileView) {
|
||||
$shareLink.css({left: "" + x + "px"});
|
||||
}
|
||||
|
||||
self.set('controller.link', url);
|
||||
self.set('controller.postNumber', postNumber);
|
||||
self.set('controller.postId', postId);
|
||||
self.set('controller.date', date);
|
||||
}
|
||||
|
||||
this.appEvents.on('share:url', (url, $target) => showPanel($target, url));
|
||||
|
||||
$html.on('click.discoure-share-link', '[data-share-url]', e => {
|
||||
// if they want to open in a new tab, let it so
|
||||
if (wantsNewWindow(e)) { return true; }
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
const $currentTarget = $(e.currentTarget),
|
||||
url = $currentTarget.data('share-url'),
|
||||
postNumber = $currentTarget.data('post-number'),
|
||||
postId = $currentTarget.closest('article').data('post-id'),
|
||||
date = $currentTarget.children().data('time');
|
||||
showPanel($currentTarget, url, postNumber, date, postId);
|
||||
return false;
|
||||
});
|
||||
|
||||
$html.on('keydown.share-view', e => {
|
||||
if (e.keyCode === 27) {
|
||||
this.get('controller').send('close');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
this.get('controller').send('close');
|
||||
|
||||
$('html').off('click.discoure-share-link')
|
||||
.off('mousedown.outside-share-link')
|
||||
.off('keydown.share-view');
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -1,6 +1,24 @@
|
|||
import { acceptance } from "helpers/qunit-helpers";
|
||||
acceptance("Topic", { loggedIn: true });
|
||||
|
||||
test("Share Popup", () => {
|
||||
visit("/t/internationalization-localization/280");
|
||||
andThen(() => {
|
||||
ok(!exists('#share-link.visible'), 'it is not visible');
|
||||
});
|
||||
|
||||
click("[data-share-url]:eq(0)");
|
||||
andThen(() => {
|
||||
ok(exists('#share-link.visible'), 'it shows the popup');
|
||||
ok(find('input[type=text]').val().length, 'it has the URL in the input box');
|
||||
});
|
||||
|
||||
click('#share-link .close-share');
|
||||
andThen(() => {
|
||||
ok(!exists('#share-link.visible'), 'it closes the popup');
|
||||
});
|
||||
});
|
||||
|
||||
test("Showing and hiding the edit controls", () => {
|
||||
visit("/t/internationalization-localization/280");
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue