Replace the share popup with a component

Author: eviltrout

app/assets/javascripts/discourse/components/share-popup.js.es6

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

app/assets/javascripts/discourse/controllers/share.js.es6

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

app/assets/javascripts/discourse/templates/components/share-popup.hbs

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