diff --git a/src/index.ts b/src/index.ts index 5313f98..5e724a7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -21,3 +21,4 @@ export * from './lib/users'; export * from './lib/translations'; export * from './lib/pipes'; export * from './lib/permissions'; +export * from './lib/directives'; diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts index d855ea6..c247376 100644 --- a/src/lib/common-ui.module.ts +++ b/src/lib/common-ui.module.ts @@ -4,7 +4,7 @@ import { MatIconModule, MatIconRegistry } from '@angular/material/icon'; import { TranslateModule } from '@ngx-translate/core'; import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner'; import { CommonUiOptions, IqserAppConfig, ModuleOptions } from './utils'; -import { HiddenActionComponent, ToastComponent } from './shared'; +import { ToastComponent } from './shared'; import { ConnectionStatusComponent, FullPageErrorComponent } from './error'; import { IqserListingModule } from './listing'; import { IqserFiltersModule } from './filtering'; @@ -33,7 +33,7 @@ const matModules = [ MatProgressBarModule, ]; const modules = [IqserListingModule, IqserFiltersModule, IqserInputsModule, IqserScrollbarModule, HttpClientModule]; -const components = [ConnectionStatusComponent, FullPageErrorComponent, HiddenActionComponent, ConfirmationDialogComponent, ToastComponent]; +const components = [ConnectionStatusComponent, FullPageErrorComponent, ConfirmationDialogComponent, ToastComponent]; @NgModule({ declarations: [...components], diff --git a/src/lib/directives/hidden-action.directive.ts b/src/lib/directives/hidden-action.directive.ts new file mode 100644 index 0000000..23940c6 --- /dev/null +++ b/src/lib/directives/hidden-action.directive.ts @@ -0,0 +1,46 @@ +import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core'; + +@Directive({ + selector: '[iqserHiddenAction]', + standalone: true, +}) +export class HiddenActionDirective { + @Input() requiredClicks = 4; + @Output() readonly iqserHiddenAction = new EventEmitter(); + + #dPressed = false; + #clickCount = 0; + #clickCountTimeout?: ReturnType; + + @HostListener('window:keydown.D') + onKeydownD() { + this.#dPressed = true; + } + + @HostListener('window:keyup.D') + onKeyupD() { + this.#dPressed = false; + } + + @HostListener('click', ['$event']) + countActions($event: MouseEvent): void { + if (!this.#dPressed) { + this.#clickCount = 0; + clearTimeout(this.#clickCountTimeout); + return; + } + + $event.stopPropagation(); + $event.preventDefault(); + + this.#clickCount += 1; + + if (this.#clickCount === this.requiredClicks) { + this.#clickCount = 0; + this.iqserHiddenAction.emit(); + } + + clearTimeout(this.#clickCountTimeout); + this.#clickCountTimeout = setTimeout(() => (this.#clickCount = 0), 1000); + } +} diff --git a/src/lib/directives/index.ts b/src/lib/directives/index.ts new file mode 100644 index 0000000..b8bc41b --- /dev/null +++ b/src/lib/directives/index.ts @@ -0,0 +1,3 @@ +export * from './hidden-action.directive'; +export * from './stop-propagation.directive'; +export * from './prevent-default.directive'; diff --git a/src/lib/directives/prevent-default.directive.ts b/src/lib/directives/prevent-default.directive.ts new file mode 100644 index 0000000..f9e34ec --- /dev/null +++ b/src/lib/directives/prevent-default.directive.ts @@ -0,0 +1,12 @@ +import { Directive, HostListener } from '@angular/core'; + +@Directive({ + selector: '[preventDefault]', + standalone: true, +}) +export class PreventDefaultDirective { + @HostListener('click', ['$event']) + onClick($event: Event) { + $event.preventDefault(); + } +} diff --git a/src/lib/directives/stop-propagation.directive.ts b/src/lib/directives/stop-propagation.directive.ts new file mode 100644 index 0000000..85818ee --- /dev/null +++ b/src/lib/directives/stop-propagation.directive.ts @@ -0,0 +1,12 @@ +import { Directive, HostListener } from '@angular/core'; + +@Directive({ + selector: '[stopPropagation]', + standalone: true, +}) +export class StopPropagationDirective { + @HostListener('click', ['$event']) + onClick($event: Event) { + $event.stopPropagation(); + } +} diff --git a/src/lib/shared/hidden-action/hidden-action.component.html b/src/lib/shared/hidden-action/hidden-action.component.html deleted file mode 100644 index 6aa8b5c..0000000 --- a/src/lib/shared/hidden-action/hidden-action.component.html +++ /dev/null @@ -1,3 +0,0 @@ -
- -
diff --git a/src/lib/shared/hidden-action/hidden-action.component.ts b/src/lib/shared/hidden-action/hidden-action.component.ts deleted file mode 100644 index 4f6123f..0000000 --- a/src/lib/shared/hidden-action/hidden-action.component.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output } from '@angular/core'; -import { BehaviorSubject } from 'rxjs'; - -@Component({ - selector: 'iqser-hidden-action', - templateUrl: './hidden-action.component.html', - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class HiddenActionComponent { - @Input() requiredClicks = 4; - @Output() readonly action = new EventEmitter(); - #dPressed = new BehaviorSubject(false); - #clickCount = 0; - #clickCountTimeout?: ReturnType; - - @HostListener('window:keydown.D', ['$event']) - onKeydownD() { - this.#dPressed.next(true); - } - - @HostListener('window:keyup.D', ['$event']) - onKeyupD() { - this.#dPressed.next(false); - } - - countActions($event: MouseEvent): void { - if (!this.#dPressed.value) { - this.#clickCount = 0; - clearTimeout(this.#clickCountTimeout); - return; - } - - $event.stopPropagation(); - $event.preventDefault(); - - this.#clickCount += 1; - if (this.#clickCount === this.requiredClicks) { - this.#clickCount = 0; - this.action.emit(); - } - clearTimeout(this.#clickCountTimeout); - this.#clickCountTimeout = setTimeout(() => { - this.#clickCount = 0; - }, 1000); - } -} diff --git a/src/lib/shared/index.ts b/src/lib/shared/index.ts index 4201eb4..49f0fb9 100644 --- a/src/lib/shared/index.ts +++ b/src/lib/shared/index.ts @@ -1,4 +1,3 @@ -export * from './hidden-action/hidden-action.component'; export * from './logo/logo.component'; export * from './side-nav/side-nav.component'; export * from './status-bar/status-bar.component';