Skip to content
This repository has been archived by the owner on Dec 14, 2019. It is now read-only.

Touch Update #84

Closed
codewithkyle opened this issue Jan 10, 2019 · 3 comments
Closed

Touch Update #84

codewithkyle opened this issue Jan 10, 2019 · 3 comments
Labels
enhancement New feature
Projects
Papertrain Beta
Milestone
1.1.0

Comments

@codewithkyle
Copy link
Contributor

This will allow us to tag elements with js-hover so we can create a fake hover effect for mobile. Using :hover sticks on mobile so this solution fixes it by adding and removing a custom has-hover status class.

private _elements: Array<Element>;

this._elements = Array.from(this.el.querySelectorAll('.js-hover'));

init(){
    this._elements.forEach((el)=>{
        if(html.classList.contains('has-touch')){
            // Touch events
            el.addEventListener('touchstart', e => this.addFakeHover(e) );
            el.addEventListener('touchend', e => this.removeFakeHover(e) );
            el.addEventListener('touchcancel', e => this.removeFakeHover(e) );
            el.addEventListener('touchleave', e => this.removeFakeHover(e) );
        }else{
            // Mouse events
            el.addEventListener('mouseenter', e => this.addFakeHover(e) );
            el.addEventListener('mouseleave', e => this.removeFakeHover(e) );
        }
    });
}

private addFakeHover(e:Event): void{
    const target = <Element>e.currentTarget;
    target.classList.add('has-hover');
}

private removeFakeHover(e:Event): void{
    const target = <Element>e.currentTarget;
    if(target.classList.contains('has-hover')){
        target.classList.remove('has-hover');
    }
}
@codewithkyle codewithkyle added the enhancement New feature label Jan 10, 2019
@codewithkyle codewithkyle added this to the 1.1.0 milestone Jan 10, 2019
@codewithkyle codewithkyle added this to To do in Papertrain Beta via automation Jan 10, 2019
@codewithkyle
Copy link
Contributor Author

We can also update our @include active mixin to use the new status class on mobile:

@mixin active
{
    &:active
    {
        html.has-no-touch & {
            @content;
        }
    }

    &.has-hover{
        html.has-touch & {
            @content;
        }
    }
}

@codewithkyle
Copy link
Contributor Author

Rework to always listen to events & gather new events and store old ones just like we do with modules but ONLY when devices have touch input.

this._elements.forEach((el)=>{
    if(html.classList.contains('has-touch')){
        // Touch events
        el.addEventListener('touchstart', e => this.addFakeHover(e) );
        el.addEventListener('touchend', e => this.removeFakeHover(e) );
        el.addEventListener('touchcancel', e => this.removeFakeHover(e) );
        el.addEventListener('touchleave', e => this.removeFakeHover(e) );
    }
});

private addFakeHover(e:Event): void{
    const target = <Element>e.currentTarget;
    target.classList.add('has-touch');
}

private removeFakeHover(e:Event): void{
    const target = <Element>e.currentTarget;
    if(target.classList.contains('has-touch')){
        target.classList.remove('has-touch');
}

Updated mixins

@mixin touch{
    &.has-touch{
        html.has-touch & {
            @content;
        }
    }
}

@mixin hover{
    &:hover{
        html.has-no-touch & {
            @content;
        }
    }
}

@mixin active{
    &:active{
        html.has-no-touch & {
            @content;
        }
    }
}

@codewithkyle codewithkyle changed the title Faux Hover Module Touch Update Feb 6, 2019
@codewithkyle
Copy link
Contributor Author

Add to App.ts

if(this._touchSupport){
    html.classList.add('is-touch-device');
    html.classList.remove('is-not-touch-device');
    document.body.addEventListener('touchstart', this.userTouched);
}

Also add the new custom event listener for touch input

private userTouched: EventListener = ()=>{
    document.body.removeEventListener('touchstart', this.userTouched);
    html.classList.add('has-touched');
    html.classList.remove('has-not-touched');
}

The <html> element's class needs to be updated to include class="has-no-js is-not-touch-device has-not-touched"

@codewithkyle codewithkyle moved this from To do to In progress in Papertrain Beta Feb 9, 2019
@codewithkyle codewithkyle moved this from In progress to Done in Papertrain Beta Feb 9, 2019
@codewithkyle codewithkyle moved this from Done to Released in Papertrain Beta Mar 4, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
enhancement New feature
Projects
No open projects
Papertrain Beta
  
Released
Milestone
1.1.0
Development

No branches or pull requests
1 participant
@codewithkyle