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>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{render "share"}}
|
{{share-popup topic=model replyAsNewTopic="replyAsNewTopic"}}
|
||||||
|
|
||||||
{{#if currentUser.enable_quoting}}
|
{{#if currentUser.enable_quoting}}
|
||||||
{{render "quote-button"}}
|
{{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";
|
import { acceptance } from "helpers/qunit-helpers";
|
||||||
acceptance("Topic", { loggedIn: true });
|
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", () => {
|
test("Showing and hiding the edit controls", () => {
|
||||||
visit("/t/internationalization-localization/280");
|
visit("/t/internationalization-localization/280");
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue