diff --git a/src/app/components/episodes-list/episodes-list.component.scss b/src/app/components/episodes-list/episodes-list.component.scss
index 9736aab2..9fb17101 100644
--- a/src/app/components/episodes-list/episodes-list.component.scss
+++ b/src/app/components/episodes-list/episodes-list.component.scss
@@ -148,7 +148,7 @@
}
}
- &:host-context(.hoverEnabled) &:hover, &:focus
+ &:host-context(.hoverEnabled) &:hover, &:host-context(.hoverEnabled) &:focus
{
.moreBtn
{
@@ -176,11 +176,6 @@
}
}
-.moreBtn:focus
-{
- display: block !important;
-}
-
.playIcon
{
font-size: 64px;
diff --git a/src/app/components/episodes-list/episodes-list.component.ts b/src/app/components/episodes-list/episodes-list.component.ts
index db9bf040..927a52cd 100644
--- a/src/app/components/episodes-list/episodes-list.component.ts
+++ b/src/app/components/episodes-list/episodes-list.component.ts
@@ -1,6 +1,7 @@
-import { Component, Input, ViewChild } from "@angular/core";
+import { Component, Input, QueryList, ViewChild, ViewChildren } from "@angular/core";
import { MatMenuTrigger } from "@angular/material/menu";
import { DomSanitizer } from "@angular/platform-browser";
+import { first } from "rxjs/operators";
import { Episode } from "../../models/resources/episode";
import { HorizontalScroller } from "../../misc/horizontal-scroller";
import { Page } from "../../models/page";
@@ -15,7 +16,8 @@ export class EpisodesListComponent extends HorizontalScroller
{
@Input() displayShowTitle: boolean = false;
@Input() episodes: Page;
- @ViewChild(MatMenuTrigger) menu: MatMenuTrigger;
+ @ViewChildren(MatMenuTrigger) menus: QueryList;
+ openedIndex: number = undefined;
constructor(private sanitizer: DomSanitizer, public client: HttpClient)
{
@@ -27,8 +29,10 @@ export class EpisodesListComponent extends HorizontalScroller
return this.sanitizer.bypassSecurityTrustStyle("url(" + url + ")");
}
- openMenu(): void
+ openMenu(index: number): void
{
- this.menu.openMenu();
+ const menu = this.menus.find((x, i) => i === index);
+ menu.focus();
+ menu.openMenu();
}
}
diff --git a/src/app/misc/long-press.directive.ts b/src/app/misc/long-press.directive.ts
index 0eadff62..692e92e7 100644
--- a/src/app/misc/long-press.directive.ts
+++ b/src/app/misc/long-press.directive.ts
@@ -1,8 +1,14 @@
-import { Directive, Output, EventEmitter, HostListener, HostBinding } from "@angular/core";
+import { Directive, Output, EventEmitter, HostListener, HostBinding, ElementRef } from "@angular/core";
import MouseDownEvent = JQuery.MouseDownEvent;
import TouchStartEvent = JQuery.TouchStartEvent;
-import MouseMoveEvent = JQuery.MouseMoveEvent;
-import TouchMoveEvent = JQuery.TouchMoveEvent;
+
+function cancelClick(event): void
+{
+ console.log("Cancel click")
+ event.preventDefault();
+ event.stopPropagation();
+ this.removeEventListener("click", cancelClick, true);
+}
@Directive({
selector: `[appLongPress]`
@@ -12,6 +18,8 @@ export class LongPressDirective
@Output() longPressed = new EventEmitter();
private _timer: NodeJS.Timeout = null;
+ constructor(private ref: ElementRef) {}
+
@HostBinding('class.longpress')
get longPress(): boolean
{
@@ -30,16 +38,35 @@ export class LongPressDirective
return;
this.longPressed.emit();
this._timer = null;
+ // We must use the nativeElement ref and can't use a HostListener
+ // since Angular does not support capture phase listener.
+ // TODO this is used for firefox since firefox still trigger a click event
+ // FIXME find the best way to make it work for all, use a cancelclick like
+ // so or find a way to prevent the event from ever happenning.
+ this.ref.nativeElement.addEventListener("click", cancelClick, true);
}, 500);
}
@HostListener("touchend", ["$event"])
@HostListener("mouseup", ["$event"])
+ end(): void
+ {
+ console.log("test");
+ // TODO this timeout is for chrome, chrome do not output a click event so the cancelClick should be removed.
+ // FIXME Chrome does not trigger a touchend event ether. So this is never called.
+ setTimeout(() =>
+ {
+ console.log("Timeout");
+ this.ref.nativeElement.removeEventListener("click", cancelClick, true);
+ }, 50);
+ this.cancel();
+ }
+
@HostListener("wheel", ["$event"])
@HostListener("scroll", ["$event"])
@HostListener("document.scroll", ["$event"])
@HostListener("window.scroll", ["$event"])
- end(): void
+ cancel(): void
{
clearTimeout(this._timer);
this._timer = null;