anthonynahas / ngx-long-press2 Goto Github PK

View Code? Open in Web Editor NEW

4.0 3.0 2.0 3.67 MB

Angular Library to handle long mouse clicks event for desktop and long touch events for mobile and tablets

Home Page: https://anthonynahas.github.io/ngx-long-press2/

License: MIT License

JavaScript 6.35% TypeScript 29.30% HTML 63.88% SCSS 0.47%

angular library ng ngx pressing mouse click

ngx-long-press2's Introduction

ngx-long-press2 - Angular Library to handle long mouse clicks event for desktop and long touch events for mobile and tablets

Built by and for developers ❤️

Do you have any question or suggestion ? Please do not hesitate to contact us! Alternatively, provide a PR | open an appropriate issue here

If you like this project, support angular-material-extensions by starring ⭐ and sharing it 📢

Demo
Dependencies
Installation
API
Usage
Run Demo App Locally
Other Angular Libraries
Support
License

Demo

View all the directives and components in action at https://anthonynahass.github.io/ngx-long-press2

Library's directive

ngxLongPress2

Dependencies

Angular developed and tested with 16.x

Installation

Install via npm.

Install peer dependencies

npm i -s ngx-long-press2

Import the library

import { NgxLongPress2Module } from 'ngx-long-press2'; 

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgxLongPress2Module, ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application like for lazy loading import NgxLongPress2Module into your feature module:

API

option	bind	type	default	description
minTime	`Input()`	`number`	`500`	the minimum time to fire onLongPress event (in ms)
maxTime	`Input()`	`number`	`2000`	the maximum time to fire onReleasePressing event (in ms)
onLongPress	`Output()`	`EventEmitter<void>`	-	emits when the minTime is exceeded
onLongPressing	`Output()`	`EventEmitter<number>`	-	emits when the user is pressing and the time lapsed in ms will be emitted
onReleasePressing	`Output()`	`EventEmitter<void>`	-	emits when the maxTime is exceeded or touchend, mouseup and mouseleave haven been emitted

Usage

  <button mat-raised-button
          ngxLongPress2
          [color]="this.timeLapsed1 > 1000? 'primary' : 'warn'"
          (onLongPress)="onLongPress()"
          (onLongPressing)="onLongPressing($event)"
          (onReleasePressing)="onReleasePressing()">
  {{ this.timeLapsed1 > 0 ? this.timeLapsed1 + ' ms' : 'PRESS ME'}}
</button>

<button ngxLongPress2></button>

images

Run Demo App Locally after cloning the github project

Build the library

$ npm run build:lib

Serve the demo app

$ npm start

Other Angular Libraries

Support

Drop an email to: Anthony Nahas
or open an appropriate issue
let us chat on Gitter

Built by and for developers ❤️ we will help you 👊

Who is using ngx-long-press2? Awesome apps?

Nahaus.de

Are you missing your project or you app? PR me to publish it on the README

This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm

License

ngx-long-press2's People

Contributors

Stargazers

Watchers

Forkers

daveek sultanmyrza

ngx-long-press2's Issues

Support for Angular 16?

Bug Report or Feature Request (mark with an `x`)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Desired functionality

Will this be upgraded to support Angular 16 ? Thanks a lot !

How to prevent (click) from firing

First, congrats on this amazing project!
I have an issue when using this directive with (click) event.
When triggering the (onLongPress) output, the (click) method is still being executed.

Is there any way to suppress (click) when using (onLongPress)?

Angular 17 Compatibility

- [ ] bug report -> please search issues before submitting
- [x] feature request

Will this package be upgraded to support Angular 17? Many thanks.

Support for Angular 15?

Will this be upgraded to support Angular 15?

Could not resolve dependency

Is it my environment or need to update ngx-long-press2 project desp?

# npm resolution error report

2022-01-28T08:07:31.362Z

While resolving: [email protected]
Found: @angular/[email protected]
node_modules/@angular/common
  @angular/common@"^12.2.4" from the root project

Could not resolve dependency:
peer @angular/common@"^10.0.14" from [email protected]
node_modules/ngx-long-press2
  ngx-long-press2@"^2.0.0" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "current": {
    "name": "@angular/common",
    "version": "12.2.16",
    "whileInstalling": {
      "name": "my-awesome-project",
      "version": "0.47.0",
      "path": "/Users/sultanmyrza/Clients/project/my-awesome-project"
    },
    "location": "node_modules/@angular/common",
    "isWorkspace": false,
    "dependents": [
      {
        "type": "prod",
        "name": "@angular/common",
        "spec": "^12.2.4",
        "from": {
          "location": "/Users/sultanmyrza/Clients/project/my-awesome-project"
        }
      }
    ]
  },
  "currentEdge": {
    "type": "prod",
    "name": "@angular/common",
    "spec": "^12.2.4",
    "from": {
      "location": "/Users/sultanmyrza/Clients/project/my-awesome-project"
    }
  },
  "edge": {
    "type": "peer",
    "name": "@angular/common",
    "spec": "^10.0.14",
    "error": "INVALID",
    "from": {
      "name": "ngx-long-press2",
      "version": "2.0.0",
      "whileInstalling": {
        "name": "my-awesome-project",
        "version": "0.47.0",
        "path": "/Users/sultanmyrza/Clients/project/my-awesome-project"
      },
      "location": "node_modules/ngx-long-press2",
      "isWorkspace": false,
      "dependents": [
        {
          "type": "prod",
          "name": "ngx-long-press2",
          "spec": "^2.0.0",
          "from": {
            "location": "/Users/sultanmyrza/Clients/project/my-awesome-project"
          }
        }
      ]
    }
  },
  "strictPeerDeps": false,
  "force": false
}

Chrome Warning about touchstart event

For a few months now, I've got this warning in my JS console when using ngx-longpress2.

Topic is related to this