UX: Remove share as link fallback on touch devices (#9332)

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

@@ -1,10 +1,10 @@
 import { isEmpty } from "@ember/utils";
 import { alias } from "@ember/object/computed";
-import { schedule } from "@ember/runloop";
 import Component from "@ember/component";
 import { escapeExpression } from "discourse/lib/utilities";
 import discourseComputed from "discourse-common/utils/decorators";
 import Sharing from "discourse/lib/sharing";
+import { later } from "@ember/runloop";
 
 export default Component.extend({
   tagName: null,
@@ -43,31 +43,14 @@ export default Component.extend({
 
   didInsertElement() {
     this._super(...arguments);
-
-    const shareUrl = this.shareUrl;
-    const $linkInput = $(this.element.querySelector(".topic-share-url"));
-    const $linkForTouch = $(
-      this.element.querySelector(".topic-share-url-for-touch a")
-    );
-
-    schedule("afterRender", () => {
-      if (!this.capabilities.touch) {
-        $linkForTouch.parent().remove();
-
-        $linkInput
-          .val(shareUrl)
-          .select()
-          .focus();
-      } else {
-        $linkInput.remove();
-
-        $linkForTouch.attr("href", shareUrl).text(shareUrl);
-
-        const range = window.document.createRange();
-        range.selectNode($linkForTouch[0]);
-        window.getSelection().addRange(range);
+    later(() => {
+      if (this.element) {
+        const textArea = this.element.querySelector(".topic-share-url");
+        textArea.style.height = textArea.scrollHeight + "px";
+        textArea.focus();
+        textArea.setSelectionRange(0, this.shareUrl.length);
       }
-    });
+    }, 200);
   },
 
   actions: {

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

@@ -1,5 +1,5 @@
 import { isEmpty } from "@ember/utils";
-import { bind, scheduleOnce } from "@ember/runloop";
+import { bind, scheduleOnce, later } from "@ember/runloop";
 import Component from "@ember/component";
 import { wantsNewWindow } from "discourse/lib/intercept-click";
 import { longDateNoYear } from "discourse/lib/formatter";
@@ -35,21 +35,15 @@ export default Component.extend({
   },
 
   _focusUrl() {
-    const link = this.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);
-    }
+    // Wait for the fade-in transition to finish before selecting the link:
+    later(() => {
+      if (this.element) {
+        const linkInput = this.element.querySelector("#share-link input");
+        linkInput.value = this.link;
+        linkInput.setSelectionRange(0, this.link.length);
+        linkInput.focus();
+      }
+    }, 200);
   },
 
   _showUrl($target, url) {

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

@@ -4,7 +4,6 @@
 
 <div class="body">
   {{textarea value=shareUrl class="topic-share-url"}}
-  <div class="topic-share-url-for-touch"><a></a></div>
 
   <div class="sources">
     {{#each sources as |source|}}

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

@@ -8,7 +8,6 @@
 
 <div>
   <input type="text">
-  <div class="share-for-touch"><div class="overflow-ellipsis"><a></a></div></div>
 </div>
 
 <div class="actions">

app/assets/stylesheets/common/base/share_link.scss

@@ -15,12 +15,6 @@
   input[type="text"] {
     width: 100%;
   }
-  .share-for-touch .overflow-ellipsis {
-    clear: both;
-  }
-  .share-for-touch {
-    margin: 14px 0;
-  }
 
   .title {
     margin-bottom: s(1);
@@ -107,11 +101,3 @@
     }
   }
 }
-
-.discourse-no-touch #share-link .share-for-touch {
-  display: none;
-}
-
-.discourse-touch #share-link input[type="text"] {
-  display: none;
-}

app/assets/stylesheets/common/components/share-and-invite-modal.scss

@@ -44,14 +44,6 @@
       box-sizing: border-box;
     }
 
-    .topic-share-url-for-touch {
-      a {
-        word-break: break-all;
-        font-size: $font-up-1;
-      }
-    }
-
-    .topic-share-url-for-touch,
     .topic-share-url {
       margin-bottom: s(2);
     }