stacky.js - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/stacky.js

@@ -71,1 +71,5 @@ class Stacky {
 }
+
+if (typeof window !== 'undefined') {
+  window.Stacky = Stacky;
+}

dist/stacky.min.js

@@ -1,1 +0,1 @@
-class Stacky{constructor(t="header"){this.headers=document.querySelectorAll(t),this.headerArray=[]}init(){let t=0,e=this.headers.length-1;this.headers.forEach(o=>{o.setAttribute("data-stacky-id",`${t}`),o.setAttribute("data-stacky-top",`${t}`),o.setAttribute("data-stacky-bottom",`${e}`),this.headerArray.push({el:o,id:t,orderTop:t,orderBottom:e,parent:o.parentElement,height:o.clientHeight,position:"",offsetTop:o.clientHeight*t,offsetBottom:o.clientHeight*e}),t++,e--}),window.addEventListener("scroll",t=>{this.headerArray.forEach(t=>{this.updateStack(t)})})}updateStack(t){let e="";const o=document.querySelector(`[data-stacky-id="${t.id}"]`),i=o.parentElement.getBoundingClientRect().top;i-o.clientHeight*t.orderTop<=0?e="top":i+o.clientHeight*(t.orderBottom+1)>=document.documentElement.clientHeight&&(e="bottom"),e?"top"===e?(t.position="top",o.style.position="fixed",o.style.top=`${t.offsetTop}px`,o.style.bottom="",o.parentElement.style.paddingTop=`${t.height}px`):"bottom"===e&&(t.position="bottom",o.style.position="fixed",o.style.top="",o.style.bottom=`${t.offsetBottom}px`,o.parentElement.style.paddingTop=`${t.height}px`):(o.style.position="",o.style.top="",o.style.width="",o.parentElement.style.paddingTop="")}}
+class Stacky{constructor(t="header"){this.headers=document.querySelectorAll(t),this.headerArray=[]}init(){let t=0,e=this.headers.length-1;this.headers.forEach((o=>{o.setAttribute("data-stacky-id",`${t}`),o.setAttribute("data-stacky-top",`${t}`),o.setAttribute("data-stacky-bottom",`${e}`),this.headerArray.push({el:o,id:t,orderTop:t,orderBottom:e,parent:o.parentElement,height:o.clientHeight,position:"",offsetTop:o.clientHeight*t,offsetBottom:o.clientHeight*e}),t++,e--})),window.addEventListener("scroll",(t=>{this.headerArray.forEach((t=>{this.updateStack(t)}))}))}updateStack(t){let e="";const o=document.querySelector(`[data-stacky-id="${t.id}"]`),i=o.parentElement.getBoundingClientRect().top;i-o.clientHeight*t.orderTop<=0?e="top":i+o.clientHeight*(t.orderBottom+1)>=document.documentElement.clientHeight&&(e="bottom"),e?"top"===e?(t.position="top",o.style.position="fixed",o.style.top=`${t.offsetTop}px`,o.style.bottom="",o.parentElement.style.paddingTop=`${t.height}px`):"bottom"===e&&(t.position="bottom",o.style.position="fixed",o.style.top="",o.style.bottom=`${t.offsetBottom}px`,o.parentElement.style.paddingTop=`${t.height}px`):(o.style.position="",o.style.top="",o.style.width="",o.parentElement.style.paddingTop="")}}"undefined"!=typeof window&&(window.Stacky=Stacky);

index.js

@@ -72,9 +72,2 @@ class Stacky {
 
-export {
-  Stacky as default,
-  Stacky
-};
-
-if (typeof window !== 'undefined') {
-  window.Stacky = Stacky;
-}
+module.exports.Stacky = Stacky

package.json

 {
   "name": "stacky.js",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Stacking scrolling navigation, modern alternative to Slinky.js without no dependencies",
@@ -13,2 +13,3 @@ "main": "index.js",
   },
+  "module": "index.mjs",
   "keywords": [
@@ -15,0 +16,0 @@ "sticky",

README.md

@@ -15,8 +15,22 @@ # Stacky.js
 
-Instal with `npm install stacky.js` and import into your project `import Stacky from "stacky.js"`
+Instal with
 
+```
+npm install stacky.js
+```
+
+and import into your project
+
+```javascript
+import Stacky from "stacky.js"
+```
+
 #### Browser
 
-Download the files from the [dist folder](https://github.com/matronator/stacky.js/tree/master/dist) and include in your HTML file `<script src="path/to/stacky.min.js"></script>`
+Download files from the [dist folder](https://github.com/matronator/stacky.js/tree/master/dist) and include in your HTML file
 
+```html
+<script src="path/to/stacky.min.js"></script>
+```
+
 ### Example
@@ -52,6 +66,12 @@
 
-Stacky.js initializes on `<header>` tags by default, but you can change it to any CSS selector you want.
+Stacky.js looks for `<header>` tags by default, but you can change it to any CSS selector you want.
 
-For example if you want initialize on headings with a specific class, like `<h2 class="stack-me">Heading</h2>` you just have to specify the selector like this:
+For example if you want to use Stacky on headings with some custom class like this one:
 
+```html
+<h2 class="stack-me">Heading</h2>
+```
+
+You just have to specify the selector when declaring Stacky like so:
+
 ```javascript
@@ -58,0 +78,0 @@ const stacky = new Stacky('h2.stack-me')

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17664

15.76%

Number of package files

11

10%

Lines of code

330

23.13%

Number of lines in readme file

83

31.75%

Number of medium supply chain risk alerts

0

-100%

No dependency changes