Hide mobile cards when user scrolls (#7291)
This commit is contained in:
parent
9510f3d737
commit
8b8d528b88
|
@ -63,6 +63,11 @@ export default Ember.Mixin.create({
|
||||||
|
|
||||||
this._showCallback(username, $target);
|
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;
|
return false;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -75,12 +80,14 @@ export default Ember.Mixin.create({
|
||||||
const clickDataExpand = `click.discourse-${id}`;
|
const clickDataExpand = `click.discourse-${id}`;
|
||||||
const clickMention = `click.discourse-${id}-${triggeringLinkClass}`;
|
const clickMention = `click.discourse-${id}-${triggeringLinkClass}`;
|
||||||
const previewClickEvent = `click.discourse-preview-${id}-${triggeringLinkClass}`;
|
const previewClickEvent = `click.discourse-preview-${id}-${triggeringLinkClass}`;
|
||||||
|
const mobileScrollEvent = "scroll.mobile-card-cloak";
|
||||||
|
|
||||||
this.setProperties({
|
this.setProperties({
|
||||||
clickOutsideEventName,
|
clickOutsideEventName,
|
||||||
clickDataExpand,
|
clickDataExpand,
|
||||||
clickMention,
|
clickMention,
|
||||||
previewClickEvent
|
previewClickEvent,
|
||||||
|
mobileScrollEvent
|
||||||
});
|
});
|
||||||
|
|
||||||
$("html")
|
$("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) {
|
_previewClick($target) {
|
||||||
this.set("isFixed", true);
|
this.set("isFixed", true);
|
||||||
return this._show($target.text().replace(/^@/, ""), $target);
|
return this._show($target.text().replace(/^@/, ""), $target);
|
||||||
|
@ -237,6 +259,11 @@ export default Ember.Mixin.create({
|
||||||
isFixed: false,
|
isFixed: false,
|
||||||
isDocked: false
|
isDocked: false
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Card will be removed, so we unbind mobile scrolling
|
||||||
|
if (this.site.mobileView) {
|
||||||
|
this._unbindMobileScroll();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
willDestroyElement() {
|
willDestroyElement() {
|
||||||
|
@ -245,6 +272,7 @@ export default Ember.Mixin.create({
|
||||||
const clickDataExpand = this.get("clickDataExpand");
|
const clickDataExpand = this.get("clickDataExpand");
|
||||||
const clickMention = this.get("clickMention");
|
const clickMention = this.get("clickMention");
|
||||||
const previewClickEvent = this.get("previewClickEvent");
|
const previewClickEvent = this.get("previewClickEvent");
|
||||||
|
|
||||||
$("html").off(clickOutsideEventName);
|
$("html").off(clickOutsideEventName);
|
||||||
$("#main")
|
$("#main")
|
||||||
.off(clickDataExpand)
|
.off(clickDataExpand)
|
||||||
|
|
Loading…
Reference in New Issue