@lit-labs/motion
Advanced tools
Comparing version 1.0.6 to 1.0.7
@@ -73,2 +73,3 @@ import { AttributePart } from 'lit/html.js'; | ||
export declare class Animate extends AsyncDirective { | ||
private _hostHasUpdated; | ||
private _host?; | ||
@@ -75,0 +76,0 @@ private _fromValues?; |
@@ -1,2 +0,2 @@ | ||
import{nothing as t}from"lit/html.js";import{directive as i,PartType as s}from"lit/directive.js";import{AsyncDirective as e}from"lit/async-directive.js";import{controllerMap as h}from"./animate-controller.js";export{AnimateController}from"./animate-controller.js";let o=0;const r=new Map,n=new WeakSet,a=()=>new Promise((t=>requestAnimationFrame(t))),c=[{transform:"translateY(100%) scale(0)",opacity:0}],l=[{transform:"translateY(-100%) scale(0)",opacity:0}],d=[{transform:"translateX(-100%) scale(0)",opacity:0}],u=[{transform:"translateX(100%) scale(0)",opacity:0}],m=[{}],f=[{opacity:0}],p=f,v=[{opacity:0},{opacity:1}],y=[{opacity:0},{opacity:.25,offset:.75},{opacity:1}],g=(t,i)=>{const s=t-i;return 0===s?void 0:s},w=(t,i)=>{const s=t/i;return 1===s?void 0:s},N={left:(t,i)=>{const s=g(t,i);return{value:s,transform:null==s||isNaN(s)?void 0:`translateX(${s}px)`}},top:(t,i)=>{const s=g(t,i);return{value:s,transform:null==s||isNaN(s)?void 0:`translateY(${s}px)`}},width:(t,i)=>{let s;0===i&&(i=1,s={width:"1px"});const e=w(t,i);return{value:e,overrideFrom:s,transform:null==e||isNaN(e)?void 0:`scaleX(${e})`}},height:(t,i)=>{let s;0===i&&(i=1,s={height:"1px"});const e=w(t,i);return{value:e,overrideFrom:s,transform:null==e||isNaN(e)?void 0:`scaleY(${e})`}}},A={duration:333,easing:"ease-in-out"},b=["left","top","width","height","opacity","color","background"],j=new WeakMap;class x extends e{constructor(t){if(super(t),this.t=null,this.i=null,this.o=!0,this.shouldLog=!1,t.type===s.CHILD)throw Error("The `animate` directive must be used in attribute position.");this.createFinished()}createFinished(){this.resolveFinished?.(),this.finished=new Promise((t=>{this.h=t}))}async resolveFinished(){this.h?.(),this.h=void 0}render(i){return t}getController(){return h.get(this.l)}isDisabled(){return this.options.disabled||this.getController()?.disabled}update(t,[i]){const s=void 0===this.l;return s&&(this.l=t.options?.host,this.l.addController(this),this.element=t.element,j.set(this.element,this)),this.optionsOrCallback=i,(s||"function"!=typeof i)&&this.u(i),this.render(i)}u(t){t=t??{};const i=this.getController();void 0!==i&&((t={...i.defaultOptions,...t}).keyframeOptions={...i.defaultOptions.keyframeOptions,...t.keyframeOptions}),t.properties??=b,this.options=t}p(){const t={},i=this.element.getBoundingClientRect(),s=getComputedStyle(this.element);return this.options.properties.forEach((e=>{const h=i[e]??(N[e]?void 0:s[e]),o=Number(h);t[e]=isNaN(o)?h+"":o})),t}m(){let t,i=!0;return this.options.guard&&(t=this.options.guard(),i=((t,i)=>{if(Array.isArray(t)){if(Array.isArray(i)&&i.length===t.length&&t.every(((t,s)=>t===i[s])))return!1}else if(i===t)return!1;return!0})(t,this.v)),this.o=this.l.hasUpdated&&!this.isDisabled()&&!this.isAnimating()&&i&&this.element.isConnected,this.o&&(this.v=Array.isArray(t)?Array.from(t):t),this.o}hostUpdate(){"function"==typeof this.optionsOrCallback&&this.u(this.optionsOrCallback()),this.m()&&(this.g=this.p(),this.t=this.t??this.element.parentNode,this.i=this.element.nextSibling)}async hostUpdated(){if(!this.o||!this.element.isConnected||this.options.skipInitial&&!this.isHostRendered)return;let t;this.prepare(),await a;const i=this._(),s=this.A(this.options.keyframeOptions,i),e=this.p();if(void 0!==this.g){const{from:s,to:h}=this.O(this.g,e,i);this.log("measured",[this.g,e,s,h]),t=this.calculateKeyframes(s,h)}else{const s=r.get(this.options.inId);if(s){r.delete(this.options.inId);const{from:h,to:n}=this.O(s,e,i);t=this.calculateKeyframes(h,n),t=this.options.in?[{...this.options.in[0],...t[0]},...this.options.in.slice(1),t[1]]:t,o++,t.forEach((t=>t.zIndex=o))}else this.options.in&&(t=[...this.options.in,{}])}this.animate(t,s)}resetStyles(){void 0!==this.j&&(this.element.setAttribute("style",this.j??""),this.j=void 0)}commitStyles(){this.j=this.element.getAttribute("style"),this.webAnimation?.commitStyles(),this.webAnimation?.cancel()}reconnected(){}async disconnected(){if(!this.o)return;if(void 0!==this.options.id&&r.set(this.options.id,this.g),void 0===this.options.out)return;if(this.prepare(),await a(),this.t?.isConnected){const t=this.i&&this.i.parentNode===this.t?this.i:null;if(this.t.insertBefore(this.element,t),this.options.stabilizeOut){const t=this.p();this.log("stabilizing out");const i=this.g.left-t.left,s=this.g.top-t.top;!("static"===getComputedStyle(this.element).position)||0===i&&0===s||(this.element.style.position="relative"),0!==i&&(this.element.style.left=i+"px"),0!==s&&(this.element.style.top=s+"px")}}const t=this.A(this.options.keyframeOptions);await this.animate(this.options.out,t),this.element.remove()}prepare(){this.createFinished()}start(){this.options.onStart?.(this)}didFinish(t){t&&this.options.onComplete?.(this),this.g=void 0,this.animatingProperties=void 0,this.frames=void 0,this.resolveFinished()}_(){const t=[];for(let i=this.element.parentNode;i;i=i?.parentNode){const s=j.get(i);s&&!s.isDisabled()&&s&&t.push(s)}return t}get isHostRendered(){const t=n.has(this.l);return t||this.l.updateComplete.then((()=>{n.add(this.l)})),t}A(t,i=this._()){const s={...A};return i.forEach((t=>Object.assign(s,t.options.keyframeOptions))),Object.assign(s,t),s}O(t,i,s){t={...t},i={...i};const e=s.map((t=>t.animatingProperties)).filter((t=>void 0!==t));let h=1,o=1;return void 0!==e&&(e.forEach((t=>{t.width&&(h/=t.width),t.height&&(o/=t.height)})),void 0!==t.left&&void 0!==i.left&&(t.left=h*t.left,i.left=h*i.left),void 0!==t.top&&void 0!==i.top&&(t.top=o*t.top,i.top=o*i.top)),{from:t,to:i}}calculateKeyframes(t,i,s=!1){const e={},h={};let o=!1;const r={};for(const s in i){const n=t[s],a=i[s];if(s in N){const t=N[s];if(void 0===n||void 0===a)continue;const i=t(n,a);void 0!==i.transform&&(r[s]=i.value,o=!0,e.transform=`${e.transform??""} ${i.transform}`,void 0!==i.overrideFrom&&Object.assign(e,i.overrideFrom))}else n!==a&&void 0!==n&&void 0!==a&&(o=!0,e[s]=n,h[s]=a)}return e.transformOrigin=h.transformOrigin=s?"center center":"top left",this.animatingProperties=r,o?[e,h]:void 0}async animate(t,i=this.options.keyframeOptions){this.start(),this.frames=t;let s=!1;if(!this.isAnimating()&&!this.isDisabled()&&(this.options.onFrames&&(this.frames=t=this.options.onFrames(this),this.log("modified frames",t)),void 0!==t)){this.log("animate",[t,i]),s=!0,this.webAnimation=this.element.animate(t,i);const e=this.getController();e?.add(this);try{await this.webAnimation.finished}catch(t){}e?.remove(this)}return this.didFinish(s),s}isAnimating(){return"running"===this.webAnimation?.playState||this.webAnimation?.pending}log(t,i){this.shouldLog&&!this.isDisabled()&&console.log(t,this.options.id,i)}}const F=i(x);export{x as Animate,F as animate,a as animationFrame,b as defaultCssProperties,A as defaultKeyframeOptions,p as fade,v as fadeIn,y as fadeInSlow,f as fadeOut,l as flyAbove,c as flyBelow,d as flyLeft,u as flyRight,m as none,N as transformProps}; | ||
import{nothing as t}from"lit/html.js";import{directive as i,PartType as s}from"lit/directive.js";import{AsyncDirective as e}from"lit/async-directive.js";import{controllerMap as h}from"./animate-controller.js";export{AnimateController}from"./animate-controller.js";let o=0;const r=new Map,n=new WeakSet,a=()=>new Promise((t=>requestAnimationFrame(t))),c=[{transform:"translateY(100%) scale(0)",opacity:0}],l=[{transform:"translateY(-100%) scale(0)",opacity:0}],d=[{transform:"translateX(-100%) scale(0)",opacity:0}],u=[{transform:"translateX(100%) scale(0)",opacity:0}],m=[{}],f=[{opacity:0}],p=f,v=[{opacity:0},{opacity:1}],y=[{opacity:0},{opacity:.25,offset:.75},{opacity:1}],g=(t,i)=>{const s=t-i;return 0===s?void 0:s},w=(t,i)=>{const s=t/i;return 1===s?void 0:s},N={left:(t,i)=>{const s=g(t,i);return{value:s,transform:null==s||isNaN(s)?void 0:`translateX(${s}px)`}},top:(t,i)=>{const s=g(t,i);return{value:s,transform:null==s||isNaN(s)?void 0:`translateY(${s}px)`}},width:(t,i)=>{let s;0===i&&(i=1,s={width:"1px"});const e=w(t,i);return{value:e,overrideFrom:s,transform:null==e||isNaN(e)?void 0:`scaleX(${e})`}},height:(t,i)=>{let s;0===i&&(i=1,s={height:"1px"});const e=w(t,i);return{value:e,overrideFrom:s,transform:null==e||isNaN(e)?void 0:`scaleY(${e})`}}},A={duration:333,easing:"ease-in-out"},b=["left","top","width","height","opacity","color","background"],j=new WeakMap;class x extends e{constructor(t){if(super(t),this.t=!1,this.i=null,this.o=null,this.h=!0,this.shouldLog=!1,t.type===s.CHILD)throw Error("The `animate` directive must be used in attribute position.");this.createFinished()}createFinished(){this.resolveFinished?.(),this.finished=new Promise((t=>{this.l=t}))}async resolveFinished(){this.l?.(),this.l=void 0}render(i){return t}getController(){return h.get(this.u)}isDisabled(){return this.options.disabled||this.getController()?.disabled}update(t,[i]){const s=void 0===this.u;return s&&(this.u=t.options?.host,this.u.addController(this),this.u.updateComplete.then((t=>this.t=!0)),this.element=t.element,j.set(this.element,this)),this.optionsOrCallback=i,(s||"function"!=typeof i)&&this.p(i),this.render(i)}p(t){t=t??{};const i=this.getController();void 0!==i&&((t={...i.defaultOptions,...t}).keyframeOptions={...i.defaultOptions.keyframeOptions,...t.keyframeOptions}),t.properties??=b,this.options=t}m(){const t={},i=this.element.getBoundingClientRect(),s=getComputedStyle(this.element);return this.options.properties.forEach((e=>{const h=i[e]??(N[e]?void 0:s[e]),o=Number(h);t[e]=isNaN(o)?h+"":o})),t}v(){let t,i=!0;return this.options.guard&&(t=this.options.guard(),i=((t,i)=>{if(Array.isArray(t)){if(Array.isArray(i)&&i.length===t.length&&t.every(((t,s)=>t===i[s])))return!1}else if(i===t)return!1;return!0})(t,this._)),this.h=this.t&&!this.isDisabled()&&!this.isAnimating()&&i&&this.element.isConnected,this.h&&(this._=Array.isArray(t)?Array.from(t):t),this.h}hostUpdate(){"function"==typeof this.optionsOrCallback&&this.p(this.optionsOrCallback()),this.v()&&(this.A=this.m(),this.i=this.i??this.element.parentNode,this.o=this.element.nextSibling)}async hostUpdated(){if(!this.h||!this.element.isConnected||this.options.skipInitial&&!this.isHostRendered)return;let t;this.prepare(),await a;const i=this.O(),s=this.j(this.options.keyframeOptions,i),e=this.m();if(void 0!==this.A){const{from:s,to:h}=this.N(this.A,e,i);this.log("measured",[this.A,e,s,h]),t=this.calculateKeyframes(s,h)}else{const s=r.get(this.options.inId);if(s){r.delete(this.options.inId);const{from:h,to:n}=this.N(s,e,i);t=this.calculateKeyframes(h,n),t=this.options.in?[{...this.options.in[0],...t[0]},...this.options.in.slice(1),t[1]]:t,o++,t.forEach((t=>t.zIndex=o))}else this.options.in&&(t=[...this.options.in,{}])}this.animate(t,s)}resetStyles(){void 0!==this.P&&(this.element.setAttribute("style",this.P??""),this.P=void 0)}commitStyles(){this.P=this.element.getAttribute("style"),this.webAnimation?.commitStyles(),this.webAnimation?.cancel()}reconnected(){}async disconnected(){if(!this.h)return;if(void 0!==this.options.id&&r.set(this.options.id,this.A),void 0===this.options.out)return;if(this.prepare(),await a(),this.i?.isConnected){const t=this.o&&this.o.parentNode===this.i?this.o:null;if(this.i.insertBefore(this.element,t),this.options.stabilizeOut){const t=this.m();this.log("stabilizing out");const i=this.A.left-t.left,s=this.A.top-t.top;!("static"===getComputedStyle(this.element).position)||0===i&&0===s||(this.element.style.position="relative"),0!==i&&(this.element.style.left=i+"px"),0!==s&&(this.element.style.top=s+"px")}}const t=this.j(this.options.keyframeOptions);await this.animate(this.options.out,t),this.element.remove()}prepare(){this.createFinished()}start(){this.options.onStart?.(this)}didFinish(t){t&&this.options.onComplete?.(this),this.A=void 0,this.animatingProperties=void 0,this.frames=void 0,this.resolveFinished()}O(){const t=[];for(let i=this.element.parentNode;i;i=i?.parentNode){const s=j.get(i);s&&!s.isDisabled()&&s&&t.push(s)}return t}get isHostRendered(){const t=n.has(this.u);return t||this.u.updateComplete.then((()=>{n.add(this.u)})),t}j(t,i=this.O()){const s={...A};return i.forEach((t=>Object.assign(s,t.options.keyframeOptions))),Object.assign(s,t),s}N(t,i,s){t={...t},i={...i};const e=s.map((t=>t.animatingProperties)).filter((t=>void 0!==t));let h=1,o=1;return e.length>0&&(e.forEach((t=>{t.width&&(h/=t.width),t.height&&(o/=t.height)})),void 0!==t.left&&void 0!==i.left&&(t.left=h*t.left,i.left=h*i.left),void 0!==t.top&&void 0!==i.top&&(t.top=o*t.top,i.top=o*i.top)),{from:t,to:i}}calculateKeyframes(t,i,s=!1){const e={},h={};let o=!1;const r={};for(const s in i){const n=t[s],a=i[s];if(s in N){const t=N[s];if(void 0===n||void 0===a)continue;const i=t(n,a);void 0!==i.transform&&(r[s]=i.value,o=!0,e.transform=`${e.transform??""} ${i.transform}`,void 0!==i.overrideFrom&&Object.assign(e,i.overrideFrom))}else n!==a&&void 0!==n&&void 0!==a&&(o=!0,e[s]=n,h[s]=a)}return e.transformOrigin=h.transformOrigin=s?"center center":"top left",this.animatingProperties=r,o?[e,h]:void 0}async animate(t,i=this.options.keyframeOptions){this.start(),this.frames=t;let s=!1;if(!this.isAnimating()&&!this.isDisabled()&&(this.options.onFrames&&(this.frames=t=this.options.onFrames(this),this.log("modified frames",t)),void 0!==t)){this.log("animate",[t,i]),s=!0,this.webAnimation=this.element.animate(t,i);const e=this.getController();e?.add(this);try{await this.webAnimation.finished}catch(t){}e?.remove(this)}return this.didFinish(s),s}isAnimating(){return"running"===this.webAnimation?.playState||this.webAnimation?.pending}log(t,i){this.shouldLog&&!this.isDisabled()&&console.log(t,this.options.id,i)}}const F=i(x);export{x as Animate,F as animate,a as animationFrame,b as defaultCssProperties,A as defaultKeyframeOptions,p as fade,v as fadeIn,y as fadeInSlow,f as fadeOut,l as flyAbove,c as flyBelow,d as flyLeft,u as flyRight,m as none,N as transformProps}; | ||
//# sourceMappingURL=animate.js.map |
@@ -73,2 +73,3 @@ import { AttributePart } from 'lit/html.js'; | ||
export declare class Animate extends AsyncDirective { | ||
private _hostHasUpdated; | ||
private _host?; | ||
@@ -75,0 +76,0 @@ private _fromValues?; |
@@ -109,2 +109,3 @@ import { nothing } from 'lit/html.js'; | ||
super(part); | ||
this._hostHasUpdated = false; | ||
this._parentNode = null; | ||
@@ -143,2 +144,3 @@ this._nextSibling = null; | ||
this._host.addController(this); | ||
this._host.updateComplete.then((_) => (this._hostHasUpdated = true)); | ||
this.element = part.element; | ||
@@ -197,3 +199,3 @@ nodeToAnimateMap.set(this.element, this); | ||
this._shouldAnimate = | ||
this._host.hasUpdated && | ||
this._hostHasUpdated && | ||
!this.isDisabled() && | ||
@@ -381,3 +383,3 @@ !this.isAnimating() && | ||
let dScaleY = 1; | ||
if (ancestorProps !== undefined) { | ||
if (ancestorProps.length > 0) { | ||
// gather scaling data for ancestors | ||
@@ -384,0 +386,0 @@ ancestorProps.forEach((a) => { |
{ | ||
"name": "@lit-labs/motion", | ||
"version": "1.0.6", | ||
"version": "1.0.7", | ||
"description": "Lit directives for making things move.", | ||
@@ -160,3 +160,3 @@ "license": "BSD-3-Clause", | ||
"dependencies": { | ||
"lit": "^2.0.0 || ^3.0.0" | ||
"lit": "^3.1.2" | ||
}, | ||
@@ -163,0 +163,0 @@ "publishConfig": { |
@@ -1,2 +0,2 @@ | ||
import{nothing as t}from"lit/html.js";import{directive as i,PartType as s}from"lit/directive.js";import{AsyncDirective as o}from"lit/async-directive.js";const r=["top","right","bottom","left"];class e extends o{constructor(t){if(super(t),t.type!==s.ELEMENT)throw Error("The `position` directive must be used in attribute position.")}render(i,s){return t}update(t,[i,s]){return void 0===this.l&&(this.l=t.options?.host,this.l.addController(this)),this.N=t.element,this.P=i,this.S=s??["left","top","width","height"],this.render(i,s)}hostUpdated(){this.C()}C(){const t="function"==typeof this.P?this.P():this.P?.value,i=t.offsetParent;if(void 0===t||!i)return;const s=t.getBoundingClientRect(),o=i.getBoundingClientRect();this.S?.forEach((t=>{const i=r.includes(t)?s[t]-o[t]:s[t];this.N.style[t]=i+"px"}))}}const h=i(e);export{e as Position,h as position}; | ||
import{nothing as t}from"lit/html.js";import{directive as i,PartType as s}from"lit/directive.js";import{AsyncDirective as o}from"lit/async-directive.js";const r=["top","right","bottom","left"];class e extends o{constructor(t){if(super(t),t.type!==s.ELEMENT)throw Error("The `position` directive must be used in attribute position.")}render(i,s){return t}update(t,[i,s]){return void 0===this.u&&(this.u=t.options?.host,this.u.addController(this)),this.S=t.element,this.C=i,this.F=s??["left","top","width","height"],this.render(i,s)}hostUpdated(){this.$()}$(){const t="function"==typeof this.C?this.C():this.C?.value,i=t.offsetParent;if(void 0===t||!i)return;const s=t.getBoundingClientRect(),o=i.getBoundingClientRect();this.F?.forEach((t=>{const i=r.includes(t)?s[t]-o[t]:s[t];this.S.style[t]=i+"px"}))}}const h=i(e);export{e as Position,h as position}; | ||
//# sourceMappingURL=position.js.map |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
159201
1158
Updatedlit@^3.1.2