Hide mobile cards when user scrolls (#7291)

discourse · Mar 31, 2019 · 8b8d528 · 8b8d528
1 parent 9510f3d
commit 8b8d528
Showing 1 changed file with 29 additions and 1 deletion.
diff --git a/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6 b/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6
@@ -63,6 +63,11 @@ export default Ember.Mixin.create({
 
     this._showCallback(username, $target);
 
+    // We bind scrolling on mobile after cards are shown to hide them if user scrolls
+    if (this.site.mobileView) {
+      this._bindMobileScroll();
+    }
+
     return false;
   },
 
@@ -75,12 +80,14 @@ export default Ember.Mixin.create({
     const clickDataExpand = `click.discourse-${id}`;
     const clickMention = `click.discourse-${id}-${triggeringLinkClass}`;
     const previewClickEvent = `click.discourse-preview-${id}-${triggeringLinkClass}`;
+    const mobileScrollEvent = "scroll.mobile-card-cloak";
 
     this.setProperties({
       clickOutsideEventName,
       clickDataExpand,
       clickMention,
-      previewClickEvent
+      previewClickEvent,
+      mobileScrollEvent
     });
 
     $("html")
@@ -126,6 +133,21 @@ export default Ember.Mixin.create({
     });
   },
 
+  _bindMobileScroll() {
+    const mobileScrollEvent = this.get("mobileScrollEvent");
+    const onScroll = () => {
+      Ember.run.throttle(this, this._close, 1000);
+    };
+
+    $(window).on(mobileScrollEvent, onScroll);
+  },
+
+  _unbindMobileScroll() {
+    const mobileScrollEvent = this.get("mobileScrollEvent");
+
+    $(window).off(mobileScrollEvent);
+  },
+
   _previewClick($target) {
     this.set("isFixed", true);
     return this._show($target.text().replace(/^@/, ""), $target);
@@ -237,6 +259,11 @@ export default Ember.Mixin.create({
       isFixed: false,
       isDocked: false
     });
+
+    // Card will be removed, so we unbind mobile scrolling
+    if (this.site.mobileView) {
+      this._unbindMobileScroll();
+    }
   },
 
   willDestroyElement() {
@@ -245,6 +272,7 @@ export default Ember.Mixin.create({
     const clickDataExpand = this.get("clickDataExpand");
     const clickMention = this.get("clickMention");
     const previewClickEvent = this.get("previewClickEvent");
+
     $("html").off(clickOutsideEventName);
     $("#main")
       .off(clickDataExpand)