0

I'm trying to do a zoom on hover in my list of products. If I do a long press on a product it works, but only the first time. The second time I do a long press it doesn't work because the div is on hover state I think.

I want that it works on a mobile phone, the app is built on Cordova and Angular.

How can I resolve this problem?

Here is my code

<div id="endtouch" class="container-fluid">
    <div class="conte_product_view_ind" *ngFor="let product of items_list" (mouseover)="opencard(product)">
        <a style="text-decoration: none; color: #000;" (click)="opencard(product)">
            <img id='img-{{product.id}}' class="lazyload col_img_prod_ind" data-src="{{product.smallImage}}"
                alt="{{product.title}}" style="min-height: 200px;">
            <div class="conte_datos_general_product-view" id='title-{{product.id}}'>
                {{product.title.toLowerCase().charAt(0).toUpperCase()  + product.title.toLowerCase().slice(1)}}
            </div>
            <div class="conte_price" id='price-{{product.id}}'>
                {{getInteger(product.price)}} <span class="conte_price_decimal">€{{getDecimal(product.price)}} </span>
            </div>
        </a>
    </div>
</div>

opencard(product) {
    console.log('entra');
    this.click = false;
    this.cardToShow = product;
    setTimeout(() => {
        if (this.click == false) {
            this._renderer.setStyle(this.card.nativeElement, 'display', 'block');
            setTimeout(() => {
                this._renderer.setStyle(this.productcard.nativeElement, 'transform', 'translate(0%,60%) scale(1.5)');
            }, 100);

            document.body.appendChild(this.card.nativeElement);
        } else {
            this._router.navigate(['/comprar-producto/' + product.title.trim().split(' ').join('-') + '/' + product.id]);
        }
    }, 400);
}

closecard() {
    this._renderer.setStyle(this.productcard.nativeElement, 'transform', 'translate(0%,60%)');
    setTimeout(() => {
        this._renderer.setStyle(this.card.nativeElement, 'display', 'none');
        this.cardToShow = {
            price: null,
            smallImage: null,
            title: "",
        };
    }, 250);
}

onload() {
    var element = document.getElementById('endtouch');
    element.addEventListener('touchend', this.process_touchend, false);
}

private process_touchend = (ev) => {
    setTimeout(() => {
        this.click = true;
        this.closecard();
    }, 100);
}
nash11
  • 8,220
  • 3
  • 19
  • 55
Javi Irigoyen
  • 1

1 Answers1

0

Try this: instead of setStyle try to put your "touched" styles in a class and detect when the user stops clicking or when you need to change state and remove the class using ngClass (see documentation: https://angular.io/api/common/NgClass)

And here is another way to detect clicks and long press: https://stackoverflow.com/a/43071404/2161172

It seems strange to me that you use addEventListener while using Angular at the same time.

Gabo
  • 359
  • 5
  • 20
  • But this works everytime that i mouseover in diferents divs, if i mouseover in the same div twice in a row it doesn`t work because in the second time the div is already hover(i think) – Javi Irigoyen Sep 02 '19 at 11:34
  • I'm sorry I was thinking only in the mobile behaviour. In that case you need to use also `(mouseleave) ="closecard(product)"` to return the card to its original state when mouse is not over anymore you can see more info here: https://angular.io/guide/attribute-directives#respond-to-user-initiated-events – Gabo Sep 02 '19 at 23:10