ten1seven / what-input

A global utility for tracking the current input method (mouse/pointer, keyboard or touch).
https://ten1seven.github.io/what-input
MIT License
1.35k stars 89 forks source link

Add option to add data attribute to target element not to html tag. #102

Open wisniewski94 opened 4 years ago

wisniewski94 commented 4 years ago

Hi!

(skip for TL;DR) I am working on open source project called Keyboard UI (Link: Keyboard_UI/develop) which is customizable UI kit with transparency effect using SASS. I wanted to fully controll outline so I made my own but problem was with focus on buttons and clicking (I don't want to have outlines when user is using mouse). Then I saw this awesome module (thanks!) but this one had another problem -> data attribute is saving to html tag not directly to target. Since my project has some limits when it comes to customization and I need to make it easy for user to use, I need to have data attribute in target element to make sass snippets like so:

@mixin somemixin($n)
      &:focus:enabled:not([data-whatintent='mouse']):not([data-whatinput='mouse'])
            @include outline($n, "default")

//user usage
button.ui
      @include somemixin(#000)

Right now there is no way to do that because data is stored in html tag (from what I know). So I made a fork and some changes (I know it's hard coded) and it works the way I would like it to be. Link to forked version:

Fork wisniewski94/what-input

Because I would like my project to be fully Open-Source there are few options to consider:

  1. I could publish forked version to npm. It's not elegant but it works.
  2. With some help (I didn't get much too deep into code) I could make it a feature.

Thanks!

wisniewski94 commented 4 years ago
  1. Fixed with patch-package from npm.