@ax-design/navigation - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

build/main.js

@@ -11,3 +11,3 @@ (function(a,b){"object"==typeof exports&&"undefined"!=typeof module?b(exports):"function"==typeof define&&define.amd?define(["exports"],b):(a=a||self,b(a.AxNavigation={}))})(this,function(a){'use strict';/**
 for(var o=n?new Float32Array(l):Array(l),p=0;p<l;++p)o[p]=e(p*m,a,c);return function(a){// Because JavaScript number are imprecise, we should guarantee the extremes are right.
-return 0===a?0:1===a?1:e(k(a),b,d)}};const p=o(.7,0,1,.5),q=o(.1,.9,.2,1),r=.3;class s{constructor(a,b){this.$container=a,this.animationStartTime=null,this.forceStopAnimation=!1,this.$from=b}getIndicatorStyle(){const a=this.$container.computedStyleMap();return{speed:1e3*a.get("--navigation-indicator-speed").value,color:a.get("--navigation-indicator-color").toString(),width:a.get("--navigation-indicator-width").value}}switch(a,b){this.$from=a,this.$to=b,this.forceStopAnimation=null!=this.animationStartTime,window.requestAnimationFrame(this.paintCanvas.bind(this))}paintCanvas(a){null===this.animationStartTime&&(this.animationStartTime=a);const b=this.$container.canvas.getBoundingClientRect();if(this.$from&&this.$to){this.$from.deHighlight();const c=a-this.animationStartTime,{speed:d,color:e}=this.getIndicatorStyle(),f=this.$container.hasAttribute("vertical"),g=f?"top":"left",h=f?"bottom":"right",i=f?"height":"width",j=this.$from.getBoundingClientRect(),k=this.$to.getBoundingClientRect(),l=this.$container.canvas,m=this.$container.ctx;if(!this.forceStopAnimation){const a=j[g]>k[g];let n,o,s,t,u,v,w;if(l.width=b.width,l.height=b.height,n=c/d,o=n<r?p(n/r):1,s=n>r?q((n-r)/(1-r)):0,v=t=j[g]-b[g],a?(t=j[g]-b[g]-(j[g]-k[g])*o,v=j[h]-b[g]-(j[h]-k[h])*s,u=(j[g]-k[g])*o+j[i],w=(j[h]-k[h])*s):(v=t=j[g]-b[g],u=j[i]+(k[h]-j[h])*o,w=(k[g]-j[g])*s),m.fillStyle=e,m.clearRect(0,0,b.width,b.height),f?(m.fillRect(0,t,b.width,u),m.clearRect(0,v,b.width,w)):(m.fillRect(t,0,u,b.height),m.clearRect(v,0,w,b.height)),1>n)return void window.requestAnimationFrame(this.paintCanvas.bind(this))}this.animationStartTime=null,this.forceStopAnimation=!1,m.clearRect(0,0,b.width,b.height),this.$to&&this.$to.highlight(),this.$from=void 0,this.$to=void 0}}}class t extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.handleClick=a=>{if(!a.target)return;const b=a.target,c=b.closest(u.ElementName);if(c&&c.container===this&&c!==this.$currentItem){this.indicatorManager.switch(this.$currentItem,c);const a=new CustomEvent("switch",{detail:{from:this.$currentItem,to:c}});this.dispatchEvent(a),this.$currentItem=c}};let a;this.root.innerHTML=`
+return 0===a?0:1===a?1:e(k(a),b,d)}};const p=o(.7,0,1,.5),q=o(.1,.9,.2,1),r=.3;class s{constructor(a,b){this.$container=a,this.animationStartTime=null,this.forceStopAnimation=!1,this.$from=b}getIndicatorStyle(){const a=this.$container.computedStyleMap();return{speed:1e3*a.get("--navigation-indicator-speed").value,color:a.get("--navigation-indicator-color").toString(),width:a.get("--navigation-indicator-width").value}}switch(a,b){this.$from=a,this.$to=b,this.forceStopAnimation=null!=this.animationStartTime,window.requestAnimationFrame(this.paintCanvas.bind(this))}paintCanvas(a){null===this.animationStartTime&&(this.animationStartTime=a);const b=this.$container.canvas.getBoundingClientRect();if(this.$from&&this.$to){this.$from.deHighlight();const c=a-this.animationStartTime,{speed:d,color:e}=this.getIndicatorStyle(),f=this.$container.hasAttribute("vertical"),g=f?"top":"left",h=f?"bottom":"right",i=f?"height":"width",j=this.$from.getBoundingClientRect(),k=this.$to.getBoundingClientRect(),l=this.$container.canvas,m=this.$container.ctx;if(!this.forceStopAnimation){const a=j[g]>k[g];let n,o,s,t,u,v,w;if(l.width=b.width,l.height=b.height,n=c/d,o=n<r?p(n/r):1,s=n>r?q((n-r)/(1-r)):0,a?(t=j[g]-b[g]-(j[g]-k[g])*o,v=j[h]-b[g]-(j[h]-k[h])*s,u=(j[g]-k[g])*o+j[i],w=(j[h]-k[h])*s):(v=t=j[g]-b[g],u=j[i]+(k[h]-j[h])*o,w=(k[g]-j[g])*s),m.fillStyle=e,m.clearRect(0,0,b.width,b.height),f?(m.fillRect(0,t,b.width,u),m.clearRect(0,v,b.width,w)):(m.fillRect(t,0,u,b.height),m.clearRect(v,0,w,b.height)),1>n)return void window.requestAnimationFrame(this.paintCanvas.bind(this))}this.animationStartTime=null,this.forceStopAnimation=!1,m.clearRect(0,0,b.width,b.height),this.$to&&this.$to.highlight(),this.$from=void 0,this.$to=void 0}}}class t extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.handleClick=a=>{if(!a.target)return;const b=a.target,c=b.closest(u.ElementName);if(c&&c.container===this&&c!==this.$currentItem){this.indicatorManager.switch(this.$currentItem,c);const a=new CustomEvent("switch",{detail:{from:this.$currentItem,to:c}});this.dispatchEvent(a),this.$currentItem=c}};let a;this.root.innerHTML=`
 <div id="out">
@@ -30,13 +30,13 @@ <div id="in">
     #in { display: block; position: relative; }
-    :host #in, :host([horizontal]) #in { margin-bottom: var(--navigation-indicator-width); }
+    canvas { pointer-events: none; position: absolute; image-rendering: pixelated; }
+    nav { display: flex; }
+    :host([horizontal]) #in { margin-bottom: var(--navigation-indicator-width); }
     :host([vertical]) #in { margin-left: var(--navigation-indicator-width); margin-bottom: auto;}
-    canvas { pointer-events: none; position: absolute; image-rendering: pixelated; }
-    :host canvas, :host([horizontal]) canvas { width: 100%; height: var(--navigation-indicator-width); bottom: calc(var(--navigation-indicator-width) * -1); }
+    :host([horizontal]) canvas { width: 100%; height: var(--navigation-indicator-width); bottom: calc(var(--navigation-indicator-width) * -1); }
     :host([vertical]) canvas { width: var(--navigation-indicator-width); height: 100%; left: calc(var(--navigation-indicator-width) * -1); }
-    :host nav, :host([horizontal]) nav { display: flex; }
     :host([vertical]) nav { flex-direction: column; }
-    :host ::slotted(ax-navigation-item), :host([horizontal]) ::slotted(ax-navigation-item) { --navigation-private-indicator-height: var(--navigation-indicator-width); --navigation-private-indicator-width: 100%; --navigation-private-indicator-left: 0; --navigation-private-indicator-bottom: calc(var(--navigation-indicator-width) * -1);}
-    :host([vertical]) ::slotted(ax-navigation-item) { --navigation-private-indicator-height: 100%; --navigation-private-indicator-width: var(--navigation-indicator-width); --navigation-private-indicator-left: calc(var(--navigation-indicator-width) * -1); --navigation-private-indicator-bottom: 0;}
+    :host([horizontal]) ::slotted(ax-navigation-item) { margin: 8px 16px; padding: 8px 0; margin-bottom: 0 !important; --navigation-private-indicator-height: var(--navigation-indicator-width); --navigation-private-indicator-width: 100%; --navigation-private-indicator-left: 0; --navigation-private-indicator-bottom: calc(var(--navigation-indicator-width) * -1);}
+    :host([vertical]) ::slotted(ax-navigation-item) { margin: 16px 16px; padding: 0 8px; margin-left: 0 !important; --navigation-private-indicator-height: 100%; --navigation-private-indicator-width: var(--navigation-indicator-width); --navigation-private-indicator-left: calc(var(--navigation-indicator-width) * -1); --navigation-private-indicator-bottom: 0;}
 </style>
-`,this.indicatorManager=new s(this,this.$currentItem),this.canvas=this.root.querySelector("canvas"),this.ctx=this.canvas.getContext("2d"),a=this.querySelector(`${u.ElementName}[default]`),this.$currentItem=a||this.querySelector(u.ElementName)||void 0,setTimeout(()=>this.$currentItem&&this.$currentItem.highlight(),0)}connectedCallback(){this.addEventListener("click",this.handleClick)}}t.ElementName="ax-navigation";class u extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.root.innerHTML=`
+`,null===this.attributes.getNamedItem("vertical")&&null===this.attributes.getNamedItem("horizontal")&&this.attributes.setNamedItem(document.createAttribute("horizontal")),this.indicatorManager=new s(this,this.$currentItem),this.canvas=this.root.querySelector("canvas"),this.ctx=this.canvas.getContext("2d"),a=this.querySelector(`${u.ElementName}[default]`),this.$currentItem=a||this.querySelector(u.ElementName)||void 0,setTimeout(()=>this.$currentItem&&this.$currentItem.highlight(),0)}connectedCallback(){this.addEventListener("click",this.handleClick)}}t.ElementName="ax-navigation";class u extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.root.innerHTML=`
 <div class="main">
@@ -49,3 +49,3 @@ <div id="slot">
 <style>
-    :host { display: inline-block; position: relative; box-sizing: border-box; margin-bottom: 0 !important; cursor: default; user-select: none; }
+    :host { display: inline-block; position: relative; box-sizing: border-box; cursor: default; user-select: none; }
     :host([block]) { display: block; }
@@ -52,0 +52,0 @@ :host([inline-block]) { display: inline-block; }

es/CustomElements.js

@@ -41,13 +41,17 @@ import IndicatorManager from './indicatorManager.js';
     #in { display: block; position: relative; }
-    :host #in, :host([horizontal]) #in { margin-bottom: var(--navigation-indicator-width); }
+    canvas { pointer-events: none; position: absolute; image-rendering: pixelated; }
+    nav { display: flex; }
+    :host([horizontal]) #in { margin-bottom: var(--navigation-indicator-width); }
     :host([vertical]) #in { margin-left: var(--navigation-indicator-width); margin-bottom: auto;}
-    canvas { pointer-events: none; position: absolute; image-rendering: pixelated; }
-    :host canvas, :host([horizontal]) canvas { width: 100%; height: var(--navigation-indicator-width); bottom: calc(var(--navigation-indicator-width) * -1); }
+    :host([horizontal]) canvas { width: 100%; height: var(--navigation-indicator-width); bottom: calc(var(--navigation-indicator-width) * -1); }
     :host([vertical]) canvas { width: var(--navigation-indicator-width); height: 100%; left: calc(var(--navigation-indicator-width) * -1); }
-    :host nav, :host([horizontal]) nav { display: flex; }
     :host([vertical]) nav { flex-direction: column; }
-    :host ::slotted(ax-navigation-item), :host([horizontal]) ::slotted(ax-navigation-item) { --navigation-private-indicator-height: var(--navigation-indicator-width); --navigation-private-indicator-width: 100%; --navigation-private-indicator-left: 0; --navigation-private-indicator-bottom: calc(var(--navigation-indicator-width) * -1);}
-    :host([vertical]) ::slotted(ax-navigation-item) { --navigation-private-indicator-height: 100%; --navigation-private-indicator-width: var(--navigation-indicator-width); --navigation-private-indicator-left: calc(var(--navigation-indicator-width) * -1); --navigation-private-indicator-bottom: 0;}
+    :host([horizontal]) ::slotted(ax-navigation-item) { margin: 8px 16px; padding: 8px 0; margin-bottom: 0 !important; --navigation-private-indicator-height: var(--navigation-indicator-width); --navigation-private-indicator-width: 100%; --navigation-private-indicator-left: 0; --navigation-private-indicator-bottom: calc(var(--navigation-indicator-width) * -1);}
+    :host([vertical]) ::slotted(ax-navigation-item) { margin: 16px 16px; padding: 0 8px; margin-left: 0 !important; --navigation-private-indicator-height: 100%; --navigation-private-indicator-width: var(--navigation-indicator-width); --navigation-private-indicator-left: calc(var(--navigation-indicator-width) * -1); --navigation-private-indicator-bottom: 0;}
 </style>
 `;
+        if (this.attributes.getNamedItem('vertical') === null
+            && this.attributes.getNamedItem('horizontal') === null) {
+            this.attributes.setNamedItem(document.createAttribute('horizontal'));
+        }
         this.indicatorManager = new IndicatorManager(this, this.$currentItem);
@@ -77,3 +81,3 @@ this.canvas = this.root.querySelector('canvas');
 <style>
-    :host { display: inline-block; position: relative; box-sizing: border-box; margin-bottom: 0 !important; cursor: default; user-select: none; }
+    :host { display: inline-block; position: relative; box-sizing: border-box; cursor: default; user-select: none; }
     :host([block]) { display: block; }
@@ -80,0 +84,0 @@ :host([inline-block]) { display: inline-block; }

es/indicatorManager.js

@@ -50,3 +50,2 @@ import BezierEasing from 'bezier-easing';
                 cutProgress = progress > animationBreakPoint ? cutAnimationFn((progress - animationBreakPoint) / (1 - animationBreakPoint)) : 0;
-                cutStart = barStart = fromBox[negSide] - canvasBox[negSide];
                 if (!reverse) {
@@ -53,0 +52,0 @@ cutStart = barStart = fromBox[negSide] - canvasBox[negSide];

package.json

 {
     "name": "@ax-design/navigation",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "Web component that implement Navigation Indicator animation of Axiom Design System.",
@@ -5,0 +5,0 @@ "main": "build/main.js",

README.md

@@ -12,2 +12,4 @@ <h1 align="center">
   <a href="https://travis-ci.com/ax-design/navigation"><img src="https://travis-ci.com/ax-design/navigation.svg?branch=master" alt="CI Status"></a>
+  <a href="https://deepscan.io/dashboard#view=project&tid=4412&pid=6183&bid=50118"><img src="https://deepscan.io/api/teams/4412/projects/6183/branches/50118/badge/grade.svg" alt="DeepScan grade"></a>
+  <a href="https://t.me/axiom_chat"><img src="https://img.shields.io/badge/chat-on%20Telegram-%230088cc.svg" alt="Telegram chat group" /></a>
   <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="MIT Licence" />
@@ -14,0 +16,0 @@ </p>

src/CustomElements.ts

@@ -48,13 +48,20 @@ import IndicatorManager from './indicatorManager.js';
     #in { display: block; position: relative; }
-    :host #in, :host([horizontal]) #in { margin-bottom: var(--navigation-indicator-width); }
+    canvas { pointer-events: none; position: absolute; image-rendering: pixelated; }
+    nav { display: flex; }
+    :host([horizontal]) #in { margin-bottom: var(--navigation-indicator-width); }
     :host([vertical]) #in { margin-left: var(--navigation-indicator-width); margin-bottom: auto;}
-    canvas { pointer-events: none; position: absolute; image-rendering: pixelated; }
-    :host canvas, :host([horizontal]) canvas { width: 100%; height: var(--navigation-indicator-width); bottom: calc(var(--navigation-indicator-width) * -1); }
+    :host([horizontal]) canvas { width: 100%; height: var(--navigation-indicator-width); bottom: calc(var(--navigation-indicator-width) * -1); }
     :host([vertical]) canvas { width: var(--navigation-indicator-width); height: 100%; left: calc(var(--navigation-indicator-width) * -1); }
-    :host nav, :host([horizontal]) nav { display: flex; }
     :host([vertical]) nav { flex-direction: column; }
-    :host ::slotted(ax-navigation-item), :host([horizontal]) ::slotted(ax-navigation-item) { --navigation-private-indicator-height: var(--navigation-indicator-width); --navigation-private-indicator-width: 100%; --navigation-private-indicator-left: 0; --navigation-private-indicator-bottom: calc(var(--navigation-indicator-width) * -1);}
-    :host([vertical]) ::slotted(ax-navigation-item) { --navigation-private-indicator-height: 100%; --navigation-private-indicator-width: var(--navigation-indicator-width); --navigation-private-indicator-left: calc(var(--navigation-indicator-width) * -1); --navigation-private-indicator-bottom: 0;}
+    :host([horizontal]) ::slotted(ax-navigation-item) { margin: 8px 16px; padding: 8px 0; margin-bottom: 0 !important; --navigation-private-indicator-height: var(--navigation-indicator-width); --navigation-private-indicator-width: 100%; --navigation-private-indicator-left: 0; --navigation-private-indicator-bottom: calc(var(--navigation-indicator-width) * -1);}
+    :host([vertical]) ::slotted(ax-navigation-item) { margin: 16px 16px; padding: 0 8px; margin-left: 0 !important; --navigation-private-indicator-height: 100%; --navigation-private-indicator-width: var(--navigation-indicator-width); --navigation-private-indicator-left: calc(var(--navigation-indicator-width) * -1); --navigation-private-indicator-bottom: 0;}
 </style>
 `
+        if (
+            this.attributes.getNamedItem('vertical') === null 
+            && this.attributes.getNamedItem('horizontal') === null
+        ) {
+            this.attributes.setNamedItem(document.createAttribute('horizontal'));
+        } 
+        
         this.indicatorManager = new IndicatorManager(this, this.$currentItem);
@@ -98,3 +105,3 @@ this.canvas = this.root.querySelector('canvas')!;
 <style>
-    :host { display: inline-block; position: relative; box-sizing: border-box; margin-bottom: 0 !important; cursor: default; user-select: none; }
+    :host { display: inline-block; position: relative; box-sizing: border-box; cursor: default; user-select: none; }
     :host([block]) { display: block; }
@@ -101,0 +108,0 @@ :host([inline-block]) { display: inline-block; }

src/indicatorManager.ts

@@ -77,4 +77,2 @@ import BezierEasing from 'bezier-easing';
 
-        cutStart = barStart = fromBox[negSide] - canvasBox[negSide];
-
         if (!reverse) {
@@ -81,0 +79,0 @@ cutStart = barStart = fromBox[negSide] - canvasBox[negSide];

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

197955

increased by0.5%

Lines of code

725

increased by1.12%

Number of lines in readme file

108

increased by1.89%

No dependency changes