UX: puts back share-panel as floating pane on post actions (#7066)

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

@@ -1,15 +1,12 @@
 import { escapeExpression } from "discourse/lib/utilities";
-import { longDateNoYear } from "discourse/lib/formatter";
 import { default as computed } from "ember-addons/ember-computed-decorators";
 import Sharing from "discourse/lib/sharing";
 
 export default Ember.Component.extend({
   tagName: null,
 
-  date: Ember.computed.alias("panel.model.date"),
   type: Ember.computed.alias("panel.model.type"),
-  postNumber: Ember.computed.alias("panel.model.postNumber"),
-  postId: Ember.computed.alias("panel.model.postId"),
+
   topic: Ember.computed.alias("panel.model.topic"),
 
   @computed
@@ -17,21 +14,9 @@ export default Ember.Component.extend({
     return Sharing.activeSources(this.siteSettings.share_links);
   },
 
-  @computed("date")
-  postDate(date) {
-    return date ? longDateNoYear(new Date(date)) : null;
-  },
-
-  @computed("type", "postNumber", "postDate", "topic.title")
-  shareTitle(type, postNumber, postDate, topicTitle) {
+  @computed("type", "topic.title")
+  shareTitle(type, topicTitle) {
     topicTitle = escapeExpression(topicTitle);
-
-    if (type === "topic") {
-      return I18n.t("share.topic_html", { topicTitle });
-    }
-    if (postNumber) {
-      return I18n.t("share.post_html", { postNumber, postDate });
-    }
     return I18n.t("share.topic_html", { topicTitle });
   },
 
@@ -81,27 +66,10 @@ export default Ember.Component.extend({
 
   actions: {
     share(source) {
-      const url = source.generateUrl(
-        this.get("shareUrl"),
-        this.get("topic.title")
-      );
-      const options = {
-        menubar: "no",
-        toolbar: "no",
-        resizable: "yes",
-        scrollbars: "yes",
-        width: 600,
-        height: source.popupHeight || 315
-      };
-      const stringOptions = Object.keys(options)
-        .map(k => `${k}=${options[k]}`)
-        .join(",");
-
-      if (source.shouldOpenInPopup) {
-        window.open(url, "", stringOptions);
-      } else {
-        window.open(url, "_blank");
-      }
+      Sharing.shareSource(source, {
+        url: this.get("shareUrl"),
+        title: this.get("topic.title")
+      });
     }
   }
 });

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

@@ -0,0 +1,173 @@
+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";
+import { nativeShare } from "discourse/lib/pwa-utils";
+
+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.text(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", encodeURI(url));
+    this.set("visible", true);
+
+    Ember.run.scheduleOnce("afterRender", this, this._focusUrl);
+  },
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    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.discourse-share-link",
+      "button[data-share-url], .post-info .post-date[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 });
+
+        // use native webshare only when the user clicks on the "chain" icon
+        if (!$currentTarget.hasClass("post-date")) {
+          nativeShare({ url }).then(null, () =>
+            this._showUrl($currentTarget, url)
+          );
+        } else {
+          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(...arguments);
+    $("html")
+      .off("click.discourse-share-link")
+      .off("mousedown.outside-share-link")
+      .off("keydown.share-view");
+  },
+
+  actions: {
+    close() {
+      this.setProperties({
+        link: null,
+        postNumber: null,
+        postId: null,
+        visible: false
+      });
+    },
+
+    share(source) {
+      Sharing.shareSource(source, {
+        url: this.get("link"),
+        title: this.get("topic.title")
+      });
+    }
+  }
+});

app/assets/javascripts/discourse/lib/sharing.js.es6

@@ -47,6 +47,27 @@ export default {
     _sources[source.id] = source;
   },
 
+  shareSource(source, data) {
+    const url = source.generateUrl(data.url, data.title);
+    const options = {
+      menubar: "no",
+      toolbar: "no",
+      resizable: "yes",
+      scrollbars: "yes",
+      width: 600,
+      height: source.popupHeight || 315
+    };
+    const stringOptions = Object.keys(options)
+      .map(k => `${k}=${options[k]}`)
+      .join(",");
+
+    if (source.shouldOpenInPopup) {
+      window.open(url, "", stringOptions);
+    } else {
+      window.open(url, "_blank");
+    }
+  },
+
   activeSources(linksSetting = "") {
     return linksSetting
       .split("|")

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

@@ -0,0 +1,24 @@
+<div class="title">
+  <h3>{{{shareTitle}}}</h3>
+
+  {{#if date}}
+    <span class="date">{{displayDate}}</span>
+  {{/if}}
+</div>
+
+<div>
+  <input type="text">
+  <div class="share-for-touch"><div class="overflow-ellipsis"><a></a></div></div>
+</div>
+
+<div class="actions">
+  {{#each sources as |s|}}
+    {{share-source source=s title=model.title action=(action "share")}}
+  {{/each}}
+
+  <div class="link">
+    <a href {{action "close"}} class="close-share" aria-label={{i18n "share.close"}} title={{i18n "share.close"}}>
+      {{d-icon "times"}}
+    </a>
+  </div>
+</div>

app/assets/javascripts/discourse/templates/topic.hbs

@@ -318,6 +318,8 @@
     </div>
   {{/if}}
 
+  {{share-popup topic=model}}
+
   {{#if embedQuoteButton}}
     {{quote-button quoteState=quoteState selectText=(action "selectText")}}
   {{/if}}

app/assets/javascripts/discourse/widgets/post.js.es6

@@ -2,7 +2,6 @@ import PostCooked from "discourse/widgets/post-cooked";
 import DecoratorHelper from "discourse/widgets/decorator-helper";
 import { createWidget, applyDecorators } from "discourse/widgets/widget";
 import { iconNode } from "discourse-common/lib/icon-library";
-import { nativeShare } from "discourse/lib/pwa-utils";
 import { transformBasicPost } from "discourse/lib/transform-post";
 import { postTransformCallbacks } from "discourse/widgets/post-stream";
 import { h } from "virtual-dom";
@@ -14,7 +13,6 @@ import {
   formatUsername
 } from "discourse/lib/utilities";
 import hbs from "discourse/widgets/hbs-compiler";
-import showModal from "discourse/lib/show-modal";
 
 function transformWithCallbacks(post) {
   let transformed = transformBasicPost(post);
@@ -221,72 +219,6 @@ function showReplyTab(attrs, siteSettings) {
   );
 }
 
-createWidget("post-date", {
-  tagName: "div.post-info.post-date",
-
-  buildClasses(attrs) {
-    let classes = "post-date";
-
-    const lastWikiEdit =
-      attrs.wiki && attrs.lastWikiEdit && new Date(attrs.lastWikiEdit);
-
-    if (lastWikiEdit) {
-      classes = `${classes} last-wiki-edit`;
-    }
-
-    return classes;
-  },
-
-  html(attrs) {
-    return h(
-      "a",
-      {
-        attributes: {
-          class: "post-date",
-          href: attrs.shareUrl,
-          "data-share-url": attrs.shareUrl,
-          "data-post-number": attrs.post_number
-        }
-      },
-      dateNode(this._date(attrs))
-    );
-  },
-
-  _date(attrs) {
-    const lastWikiEdit =
-      attrs.wiki && attrs.lastWikiEdit && new Date(attrs.lastWikiEdit);
-    const createdAt = new Date(attrs.created_at);
-    return lastWikiEdit ? lastWikiEdit : createdAt;
-  },
-
-  click(event) {
-    event.preventDefault();
-
-    const post = this.findAncestorModel();
-
-    const modalFallback = () => {
-      showModal("share-and-invite", {
-        modalClass: "share-and-invite",
-        panels: [
-          {
-            id: "share",
-            title: "topic.share.extended_title",
-            model: {
-              postNumber: this.attrs.post_number,
-              shareUrl: this.attrs.shareUrl,
-              date: this._date(this.attrs),
-              postId: post.get("id"),
-              topic: post.get("topic")
-            }
-          }
-        ]
-      });
-    };
-
-    nativeShare({ url: this.attrs.shareUrl }).then(null, modalFallback);
-  }
-});
-
 createWidget("post-meta-data", {
   tagName: "div.topic-meta-data",
 
@@ -309,6 +241,21 @@ createWidget("post-meta-data", {
       );
     }
 
+    const lastWikiEdit =
+      attrs.wiki && attrs.lastWikiEdit && new Date(attrs.lastWikiEdit);
+    const createdAt = new Date(attrs.created_at);
+    const date = lastWikiEdit ? dateNode(lastWikiEdit) : dateNode(createdAt);
+    const attributes = {
+      class: "post-date",
+      href: attrs.shareUrl,
+      "data-share-url": attrs.shareUrl,
+      "data-post-number": attrs.post_number
+    };
+
+    if (lastWikiEdit) {
+      attributes["class"] += " last-wiki-edit";
+    }
+
     if (attrs.via_email) {
       postInfo.push(this.attach("post-email-indicator", attrs));
     }
@@ -329,7 +276,7 @@ createWidget("post-meta-data", {
       postInfo.push(this.attach("reply-to-tab", attrs));
     }
 
-    postInfo.push(this.attach("post-date", attrs));
+    postInfo.push(h("div.post-info.post-date", h("a", { attributes }, date)));
 
     postInfo.push(
       h(
@@ -451,31 +398,6 @@ createWidget("post-contents", {
     return lastWikiEdit ? lastWikiEdit : createdAt;
   },
 
-  share() {
-    const post = this.findAncestorModel();
-
-    const modalFallback = () => {
-      showModal("share-and-invite", {
-        modalClass: "share-and-invite",
-        panels: [
-          {
-            id: "share",
-            title: "topic.share.extended_title",
-            model: {
-              postNumber: this.attrs.post_number,
-              shareUrl: this.attrs.shareUrl,
-              date: this._date(this.attrs),
-              postId: post.get("id"),
-              topic: post.get("topic")
-            }
-          }
-        ]
-      });
-    };
-
-    nativeShare({ url: this.attrs.shareUrl }).then(null, modalFallback);
-  },
-
   toggleRepliesBelow(goToPost = "false") {
     if (this.state.repliesBelow.length) {
       this.state.repliesBelow = [];