Replace the share popup with a component

This commit is contained in:
Robin Ward 2016-11-11 14:13:19 -05:00
parent 2a25136ecf
commit 93403b0af6
7 changed files with 200 additions and 199 deletions

View File

@ -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');
}
}
}
});

View File

@ -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);
}
});

View File

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

View File

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

View File

@ -221,7 +221,7 @@
</div>
{{/if}}
{{render "share"}}
{{share-popup topic=model replyAsNewTopic="replyAsNewTopic"}}
{{#if currentUser.enable_quoting}}
{{render "quote-button"}}

View File

@ -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');
}
});

View File

@ -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");