Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-23 15:30:34 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixing the long press directive

Browse Source
This commit is contained in:
Zoe Roux 2021-01-10 21:11:03 +01:00
parent 7cbe936e15
commit 50fda7a205
3 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/components/episodes-list/episodes-list.component.html
View File

@ -1,10 +1,10 @@
<div class="root">
<div class="episodes" #scrollView
(scroll)="onScroll()" infinite-scroll (scrolled)="this.episodes?.loadNext(this.client)"
[horizontal]="true" [scrollWindow]="false"
appLongPress (longPressed)="this.openMenu()">
[horizontal]="true" [scrollWindow]="false">
<a *ngFor="let episode of this.episodes?.items" draggable="false"
routerLink="/watch/{{episode.slug}}" href="/watch/{{episode.slug}}"
appLongPress (longPressed)="this.openMenu()"
class="episode" #itemsDom>
<button mat-icon-button class="moreBtn" tabindex="-1"
[matMenuTriggerFor]="more" [matMenuTriggerData]="{episode: episode}"

3
src/app/components/episodes-list/episodes-list.component.scss
View File

@ -49,7 +49,7 @@
{
visibility: visible;
display: inline-block;
padding: .25rem;
margin: .25rem .25rem 1.25rem;
flex-shrink: 0;
width: 55%;
outline: none;
@ -135,6 +135,7 @@
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 0;
}
.subtitle

27
src/app/misc/long-press.directive.ts
View File

@ -1,4 +1,8 @@
import { Directive, Output, EventEmitter, HostListener, HostBinding } from "@angular/core";
import MouseDownEvent = JQuery.MouseDownEvent;
import TouchStartEvent = JQuery.TouchStartEvent;
import MouseMoveEvent = JQuery.MouseMoveEvent;
import TouchMoveEvent = JQuery.TouchMoveEvent;
@Directive({
selector: `[appLongPress]`
@ -6,29 +10,39 @@ import { Directive, Output, EventEmitter, HostListener, HostBinding } from "@ang
export class LongPressDirective
{
@Output() longPressed = new EventEmitter();
timer: NodeJS.Timeout = null;
private _timer: NodeJS.Timeout = null;
@HostBinding('class.longpress')
get longPress(): boolean
{
return this.timer !== null;
return this._timer !== null;
}
@HostListener("touchstart", ["$event"])
@HostListener("mousedown", ["$event"])
start(): void
start(event: MouseDownEvent | TouchStartEvent): void
{
this.timer = setTimeout(() => {
const startBox = event.target.getBoundingClientRect();
this._timer = setTimeout(() =>
{
const endBox = event.target.getBoundingClientRect();
if (startBox.top !== endBox.top || startBox.left !== endBox.left)
return;
this.longPressed.emit();
this._timer = null;
}, 500);
}
@HostListener("touchend", ["$event"])
@HostListener("mouseup", ["$event"])
@HostListener("wheel", ["$event"])
@HostListener("scroll", ["$event"])
@HostListener("document.scroll", ["$event"])
@HostListener("window.scroll", ["$event"])
end(): void
{
clearTimeout(this.timer);
this.timer = null;
clearTimeout(this._timer);
this._timer = null;
}
@HostListener("contextmenu", ["$event"])
@ -39,5 +53,4 @@ export class LongPressDirective
@HostBinding("style.-webkit-touch-callout")
defaultLongTouchEvent: string = "none";
}