Vladyslav_Prykhodko
2 years ago
12 changed files with 146 additions and 59 deletions
@ -0,0 +1,35 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Directive, ElementRef, EventEmitter, OnDestroy, Output } from '@angular/core'; |
|||
import { TbContextMenuEvent } from '@shared/models/jquery-event.models'; |
|||
|
|||
@Directive({ |
|||
selector: '[tbcontextmenu]' |
|||
}) |
|||
export class ContextMenuDirective implements OnDestroy { |
|||
|
|||
@Output() |
|||
tbcontextmenu = new EventEmitter<TbContextMenuEvent>(); |
|||
|
|||
constructor(private el: ElementRef) { |
|||
$(this.el.nativeElement).on('tbcontextmenu', (e: TbContextMenuEvent) => this.tbcontextmenu.emit(e)); |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
$(this.el.nativeElement).off('tbcontextmenu'); |
|||
} |
|||
} |
|||
@ -0,0 +1,74 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import Timeout = NodeJS.Timeout; |
|||
|
|||
export interface TbContextMenuEvent extends Event { |
|||
clientX: number; |
|||
clientY: number; |
|||
} |
|||
|
|||
const isIOSDevice = (): boolean => |
|||
/iPhone|iPad|iPod/i.test(navigator.userAgent) || (navigator.userAgent.includes('Mac') && 'ontouchend' in document); |
|||
|
|||
export const initCustomJQueryEvents = () => { |
|||
$.event.special.tbcontextmenu = { |
|||
setup(this: HTMLElement) { |
|||
const el = $(this); |
|||
if (isIOSDevice()) { |
|||
let timeoutId: Timeout; |
|||
|
|||
el.on('touchstart', (e) => { |
|||
e.stopPropagation(); |
|||
timeoutId = setTimeout(() => { |
|||
timeoutId = null; |
|||
e.stopPropagation(); |
|||
const touch = e.originalEvent.changedTouches[0]; |
|||
const event = $.Event('tbcontextmenu', { |
|||
clientX: touch.clientX, |
|||
clientY: touch.clientY |
|||
}); |
|||
el.trigger(event, e); |
|||
}, 500); |
|||
}); |
|||
|
|||
el.on('touchend touchmove', () => { |
|||
if (timeoutId) { |
|||
clearTimeout(timeoutId); |
|||
} |
|||
}); |
|||
} else { |
|||
el.on('contextmenu', (e) => { |
|||
e.preventDefault(); |
|||
e.stopPropagation(); |
|||
const event = $.Event('tbcontextmenu', { |
|||
clientX: e.originalEvent.clientX, |
|||
clientY: e.originalEvent.clientY |
|||
}); |
|||
el.trigger(event, e); |
|||
}); |
|||
} |
|||
}, |
|||
teardown(this: HTMLElement) { |
|||
const el = $(this); |
|||
if (isIOSDevice()) { |
|||
el.off('touchstart touchend touchmove'); |
|||
} else { |
|||
el.off('contextmenu'); |
|||
} |
|||
} |
|||
}; |
|||
}; |
|||
Loading…
Reference in new issue