webkul / micron Goto Github PK

Hello,
Is there a way to use micron when hovering a respective element (without using js) by using an attribute like triggering-micron="hover" ... and then using "visited" or "active" ... ?
best

great idea btw !

Really cool project!

IMO the console.log() calls in micron/dist/script/micron.min.js should be removed and if something hasn't been set up correctly, it just fails silently. Will save some KBs as well.

Happy to raise a PR if you'd like 😃

All of the examples on the docs page cause my Chrome browser on Android to jump to the top of the page. (I know that the Micron library itself works on mobile because all of the examples on the main webpage work properly and don't exhibit this behavior.) The behavior in question can be reproduced by a desktop version of Chrome when placed in mobile emulation mode via DevTools.

I did a little digging and according to the HTML5 standard describing how to navigate to a fragment, an empty fragment should refer to the top of the document.

1. Apply the URL parser algorithm to the URL, and let fragid be the fragment component of the resulting URL record.
2. If fragid is the empty string, then the indicated part of the document is the top of the document; stop the algorithm here.

(More curious, then, is why in desktop mode Chrome doesn't do the same thing.)

Therefore, any anchor tag that resembles <a href="#"></a> is at risk of sending the viewport to the top of the document.

Going to the example page on iPhone 7, iOS 11 Safari, None on the grid of examples do anything on press.

When I add the data-micron attribute to an element, the event listeners I attached to the element only fire once.

After installing this package, I ran npm audit fix to resolve any issue. High vulnerabilities were fixed but some dependencies are not resolved:

=== npm audit security report ===


                                Manual Review
            Some vulnerabilities require your attention to resolve

         Visit https://go.npm.me/audit-guide for additional guidance


 Moderate        Prototype Pollution

 Package         hoek

 Patched in      > 4.2.0 < 5.0.0 || >= 5.0.3

 Dependency of   webkul-micron

 Path            webkul-micron > gulp-less > less > request > hawk > boom >
                 hoek

 More info       https://npmjs.com/advisories/566


 Moderate        Prototype Pollution

 Package         hoek

 Patched in      > 4.2.0 < 5.0.0 || >= 5.0.3

 Dependency of   webkul-micron

 Path            webkul-micron > gulp-less > less > request > hawk >
                 cryptiles > boom > hoek

 More info       https://npmjs.com/advisories/566


 Moderate        Prototype Pollution

 Package         hoek

 Patched in      > 4.2.0 < 5.0.0 || >= 5.0.3

 Dependency of   webkul-micron

 Path            webkul-micron > gulp-less > less > request > hawk > hoek

 More info       https://npmjs.com/advisories/566


 Moderate        Prototype Pollution

 Package         hoek

 Patched in      > 4.2.0 < 5.0.0 || >= 5.0.3

 Dependency of   webkul-micron

 Path            webkul-micron > gulp-less > less > request > hawk > sntp >
                 hoek

 More info       https://npmjs.com/advisories/566

found 4 moderate severity vulnerabilities in 24674 scanned packages
 4 vulnerabilities require manual review. See the full report for details.

I am unsure if this packaging for NPM needs to be fixed at this level.

Hello and thank you for sharing your work!

Reading through the announcement on the home page one would expect micron to be a dead easy way to add simple animations (Just add data attributes to DOM/SVG elements) amd voila!

<link href="https://unpkg.com/[email protected]/dist/css/micron.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/script/micron.min.js" type="text/javascript"></script>

Went quickly through the docs, tried a couple of examples and nothing works!
I even went ahead and copied the custom CSS from the demo page but things still did not work (BTW, No mention of any specific CSS. I.e other than 'micron.min.css' ).

The way I see it, the value of micron is supposed to be ease of use. If this is the case, a more thorough and tested walk through would go a long way in promoting micron.

Here's a link to my testing of micron:
https://jsfiddle.net/7gbsnvLf/
Could you be nice and point out what's missing for it to work (I'm using the latest Chrome on a Windows 10 pro-machine)

Thank you again and good luck!

Hi.

It would be better to receive parent node as a second argument, I think.
This change will be beneficial for those who use web application framework / library such as Angular, React, Vue and so on.

micron.getEle("", parentNode).interaction("").duration("").timing("")

// and
function getEle(query, parentNode = document) {
 //
}