stimulus-use - npm Package Compare versions

Comparing version 0.13.0 to 0.14.0

dist/index.d.ts

@@ -7,2 +7,3 @@ export { useIntersection, IntersectionController } from './use-intersection';
 export { useIdle, IdleController } from './use-idle';
+export { useVisibility, VisibilityController } from './use-visibility';
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -7,2 +7,3 @@ export { useIntersection, IntersectionController } from './use-intersection';
 export { useIdle, IdleController } from './use-idle';
+export { useVisibility, VisibilityController } from './use-visibility';
 //# sourceMappingURL=index.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("stimulus")):"function"==typeof define&&define.amd?define(["exports","stimulus"],n):n((e=e||self).StimulusUse={},e.Stimulus)}(this,function(e,n){var t=function(e,n){var t=e[n];if("function"==typeof t)return t;throw new Error('undefined method "'+n+'"')},i=function(e,n,t){var i=e;return!0===t?i=n.identifier+":"+e:"string"==typeof t&&(i=t+":"+e),i},o=function(e,n,t){var i=n||{bubbles:!0,cancelable:!0,composed:!0},o=i.bubbles,r=i.cancelable,c=i.composed;return n&&Object.assign(t,{originalEvent:n}),new CustomEvent(e,{bubbles:o,cancelable:r,composed:c,detail:t})},r={dispatchEvent:!0,eventPrefix:!0},c=function(e,n){var c;void 0===n&&(n={});var s=Object.assign(r,n),a=s.dispatchEvent,u=s.eventPrefix,l=(null==(c=n)?void 0:c.element)||e.element,d=e.disconnect.bind(e),f=new IntersectionObserver(function(n){var r=n[0];r.isIntersecting?function(n){if(e.isVisible=!0,e.appear&&t(e,"appear").call(e,n),a){var r=i("appear",e,u),c=o(r,null,{controller:e,entry:n});l.dispatchEvent(c)}}(r):e.isVisible&&function(n){if(e.isVisible=!1,e.disappear&&t(e,"disappear").call(e,n),a){var r=i("disappear",e,u),c=o(r,null,{controller:e,entry:n});l.dispatchEvent(c)}}(r)},n),v=function(){f.observe(l)},b=function(){f.unobserve(l)};return Object.assign(e,{isVisible:!1,disconnect:function(){b(),d()}}),v(),[v,b]};function s(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var u=function(e){function n(n){var t;return(t=e.call(this,n)||this).isVisible=!1,requestAnimationFrame(function(){c(a(t),t.options)}),t}s(n,e);var t=n.prototype;return t.appear=function(e){},t.disappear=function(e){},n}(n.Controller),l=function(e,n){var i=e.disconnect;Object.assign(e,{isVisible:!1,observer:new IntersectionObserver(function(n){n[0].isIntersecting&&!e.isLoaded&&function(n){var i=e.data.get("src");if(i){var o=e.element;e.isLoading=!0,e.loading&&t(e,"loading").call(e,i),o.onload=function(){!function(n){e.isLoading=!1,e.isLoaded=!0,e.loading&&t(e,"loaded").call(e,n)}(i)},o.src=i}}()},n),observe:function(){this.observer.observe(e.element)},unObserve:function(){this.observer.unobserve(e.element)},disconnect:function(){e.unObserve(),i()}}),e.observe()},d=function(e){function n(n){var t;return(t=e.call(this,n)||this).isLoading=!1,t.isLoaded=!1,t.options={rootMargin:"10%"},requestAnimationFrame(function(){l(a(t),t.options)}),t}s(n,e);var t=n.prototype;return t.observe=function(){},t.unObserve=function(){},t.loading=function(e){},t.loaded=function(e){},n}(n.Controller),f={dispatchEvent:!0,eventPrefix:!0},v=function(e,n){var r;void 0===n&&(n={});var c=Object.assign(f,n),s=c.dispatchEvent,a=c.eventPrefix,u=(null==(r=n)?void 0:r.element)||e.element,l=e.disconnect.bind(e);Object.assign(e,{observer:new ResizeObserver(function(n){var r=n[0];if(e.resize&&t(e,"resize").call(e,r.contentRect),s){var c=i("resize",e,a),l=o(c,null,{controller:e,entry:r});u.dispatchEvent(l)}}),observe:function(){this.observer.observe(u)},unObserve:function(){this.observer.unobserve(u)},disconnect:function(){e.unObserve(),l()}}),e.observe()},b=function(e){function n(n){var t;return(t=e.call(this,n)||this).options={},requestAnimationFrame(function(){v(a(t),t.options)}),t}s(n,e);var t=n.prototype;return t.observe=function(){},t.unObserve=function(){},t.resize=function(e){},n}(n.Controller),p={events:["click","touchend"],onlyVisible:!0,dispatchEvent:!0,eventPrefix:!0},m=function(e,n){void 0===n&&(n={});var r=Object.assign(p,n),c=r.onlyVisible,s=r.dispatchEvent,a=r.events,u=r.eventPrefix,l=function(r){var a,l,d=(null==(a=n)?void 0:a.element)||e.element;if(!d.contains(r.target)&&((l=d.getBoundingClientRect()).top>=0&&l.left>=0&&l.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&l.right<=(window.innerWidth||document.documentElement.clientWidth)||!c)&&(e.clickOutside&&t(e,"clickOutside").call(e,r),s)){var f=i("click:outside",e,u),v=o(f,r,{controller:e});d.dispatchEvent(v)}},d=function(){null==a||a.forEach(function(e){window.addEventListener(e,l,!1)})},f=function(){null==a||a.forEach(function(e){window.removeEventListener(e,l,!1)})},v=e.disconnect.bind(e);return Object.assign(e,{disconnect:function(){f(),v()}}),d(),[d,f]},h=function(e){function n(n){var t;return t=e.call(this,n)||this,requestAnimationFrame(function(){m(a(t),t.options)}),t}return s(n,e),n.prototype.clickOutside=function(e){},n}(n.Controller),g=function(e){Object.defineProperty(e,"isPreview",{get:function(){return document.documentElement.hasAttribute("data-turbolinks-preview")}}),Object.defineProperty(e,"csrfToken",{get:function(){return this.metaValue("csrf-token")}}),Object.assign(e,{dispatch:function(n,t){var i=void 0===t?{}:t,o=i.target,r=void 0===o?e.element:o,c=i.detail,s=void 0===c?{}:c,a=i.bubbles,u=void 0===a||a,l=i.cancelable,d=void 0===l||l;Object.assign(s,{controller:e});var f=new CustomEvent(e.identifier+":"+n,{detail:s,bubbles:u,cancelable:d});return r.dispatchEvent(f),f},metaValue:function(e){var n=document.head.querySelector('meta[name="'+e+'"]');return n&&n.getAttribute("content")}})},E=function(e){function n(n){var t;return(t=e.call(this,n)||this).isPreview=!1,t.csrfToken="",g(a(t)),t}s(n,e);var t=n.prototype;return t.dispatch=function(e,n){},t.metaValue=function(e){return""},n}(n.Controller),w={ms:6e4,initialState:!1,events:["mousemove","mousedown","resize","keydown","touchstart","wheel"],dispatchEvent:!0,eventPrefix:!0},y=function(e,n){void 0===n&&(n={});var r=Object.assign(w,n),c=r.ms,s=r.events,a=r.dispatchEvent,u=r.eventPrefix,l=r.initialState,d=setTimeout(function(){l=!0,f()},c),f=function(n){var r=i("away",e,u);if(e.isIdle=!0,e.away&&t(e,"away").call(e,n),a){var c=o(r,n||null,{controller:e});e.element.dispatchEvent(c)}},v=function(n){var r=i("back",e,u);if(e.isIdle=!1,e.back&&t(e,"back").call(e,n),a){var c=o(r,n||null,{controller:e});e.element.dispatchEvent(c)}},b=function(e){l&&v(e),l=!1,clearTimeout(d),d=setTimeout(function(){l=!0,f(e)},c)},p=function(e){document.hidden||b(e)};l?f():v();var m=e.disconnect.bind(e),h=function(){s.forEach(function(e){window.addEventListener(e,b)}),document.addEventListener("visibilitychange",p)},g=function(){s.forEach(function(e){window.removeEventListener(e,b)}),document.removeEventListener("visibilitychange",p)};return Object.assign(e,{disconnect:function(){g(),m()}}),h(),[h,g]},O=function(e){function n(n){var t;return(t=e.call(this,n)||this).isIdle=!1,requestAnimationFrame(function(){y(a(t))}),t}s(n,e);var t=n.prototype;return t.away=function(){},t.back=function(){},n}(n.Controller);e.ApplicationController=E,e.ClickOutsideController=h,e.IdleController=O,e.IntersectionController=u,e.LazyLoadController=d,e.ResizeController=b,e.useApplication=g,e.useClickOutside=m,e.useIdle=y,e.useIntersection=c,e.useLazyLoad=l,e.useResize=v});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("stimulus")):"function"==typeof define&&define.amd?define(["exports","stimulus"],n):n((e=e||self).StimulusUse={},e.Stimulus)}(this,function(e,n){var t=function(e,n){var t=e[n];if("function"==typeof t)return t;throw new Error('undefined method "'+n+'"')},i=function(e,n,t){var i=e;return!0===t?i=n.identifier+":"+e:"string"==typeof t&&(i=t+":"+e),i},o=function(e,n,t){var i=n||{bubbles:!0,cancelable:!0,composed:!0},o=i.bubbles,r=i.cancelable,s=i.composed;return n&&Object.assign(t,{originalEvent:n}),new CustomEvent(e,{bubbles:o,cancelable:r,composed:s,detail:t})},r={dispatchEvent:!0,eventPrefix:!0},s=function(e,n){var s;void 0===n&&(n={});var c=Object.assign(r,n),a=c.dispatchEvent,l=c.eventPrefix,u=(null==(s=n)?void 0:s.element)||e.element,d=e.disconnect.bind(e),v=new IntersectionObserver(function(n){var r=n[0];r.isIntersecting?function(n){if(e.isVisible=!0,e.appear&&t(e,"appear").call(e,n),a){var r=i("appear",e,l),s=o(r,null,{controller:e,entry:n});u.dispatchEvent(s)}}(r):e.isVisible&&function(n){if(e.isVisible=!1,e.disappear&&t(e,"disappear").call(e,n),a){var r=i("disappear",e,l),s=o(r,null,{controller:e,entry:n});u.dispatchEvent(s)}}(r)},n),f=function(){v.observe(u)},b=function(){v.unobserve(u)};return Object.assign(e,{isVisible:!1,disconnect:function(){b(),d()}}),f(),[f,b]};function c(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var l=function(e){function n(n){var t;return(t=e.call(this,n)||this).isVisible=!1,requestAnimationFrame(function(){var e=s(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}return c(n,e),n}(n.Controller),u=function(e,n){var i=e.disconnect.bind(e),o=new IntersectionObserver(function(n){n[0].isIntersecting&&!e.isLoaded&&function(n){var i=e.data.get("src");if(i){var o=e.element;e.isLoading=!0,e.loading&&t(e,"loading").call(e,i),o.onload=function(){!function(n){e.isLoading=!1,e.isLoaded=!0,e.loading&&t(e,"loaded").call(e,n)}(i)},o.src=i}}()},n),r=function(){o.observe(e.element)},s=function(){o.unobserve(e.element)};return Object.assign(e,{isVisible:!1,disconnect:function(){s(),i()}}),r(),[r,s]},d=function(e){function n(n){var t;return(t=e.call(this,n)||this).isLoading=!1,t.isLoaded=!1,t.options={rootMargin:"10%"},requestAnimationFrame(function(){var e=u(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}c(n,e);var t=n.prototype;return t.loading=function(e){},t.loaded=function(e){},n}(n.Controller),v={dispatchEvent:!0,eventPrefix:!0},f=function(e,n){var r;void 0===n&&(n={});var s=Object.assign(v,n),c=s.dispatchEvent,a=s.eventPrefix,l=(null==(r=n)?void 0:r.element)||e.element,u=e.disconnect.bind(e),d=new ResizeObserver(function(n){var r=n[0];if(e.resize&&t(e,"resize").call(e,r.contentRect),c){var s=i("resize",e,a),u=o(s,null,{controller:e,entry:r});l.dispatchEvent(u)}}),f=function(){d.observe(l)},b=function(){d.unobserve(l)};return Object.assign(e,{disconnect:function(){b(),u()}}),f(),[f,b]},b=function(e){function n(n){var t;return t=e.call(this,n)||this,requestAnimationFrame(function(){var e=f(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}return c(n,e),n.prototype.resize=function(e){},n}(n.Controller),h={events:["click","touchend"],onlyVisible:!0,dispatchEvent:!0,eventPrefix:!0},p=function(e,n){void 0===n&&(n={});var r=Object.assign(h,n),s=r.onlyVisible,c=r.dispatchEvent,a=r.events,l=r.eventPrefix,u=function(r){var a,u,d=(null==(a=n)?void 0:a.element)||e.element;if(!d.contains(r.target)&&((u=d.getBoundingClientRect()).top>=0&&u.left>=0&&u.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&u.right<=(window.innerWidth||document.documentElement.clientWidth)||!s)&&(e.clickOutside&&t(e,"clickOutside").call(e,r),c)){var v=i("click:outside",e,l),f=o(v,r,{controller:e});d.dispatchEvent(f)}},d=function(){null==a||a.forEach(function(e){window.addEventListener(e,u,!1)})},v=function(){null==a||a.forEach(function(e){window.removeEventListener(e,u,!1)})},f=e.disconnect.bind(e);return Object.assign(e,{disconnect:function(){v(),f()}}),d(),[d,v]},m=function(e){function n(n){var t;return t=e.call(this,n)||this,requestAnimationFrame(function(){var e=p(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}return c(n,e),n.prototype.clickOutside=function(e){},n}(n.Controller),g=function(e){Object.defineProperty(e,"isPreview",{get:function(){return document.documentElement.hasAttribute("data-turbolinks-preview")}}),Object.defineProperty(e,"csrfToken",{get:function(){return this.metaValue("csrf-token")}}),Object.assign(e,{dispatch:function(n,t){var i=void 0===t?{}:t,o=i.target,r=void 0===o?e.element:o,s=i.detail,c=void 0===s?{}:s,a=i.bubbles,l=void 0===a||a,u=i.cancelable,d=void 0===u||u;Object.assign(c,{controller:e});var v=new CustomEvent(e.identifier+":"+n,{detail:c,bubbles:l,cancelable:d});return r.dispatchEvent(v),v},metaValue:function(e){var n=document.head.querySelector('meta[name="'+e+'"]');return n&&n.getAttribute("content")}})},E=function(e){function n(n){var t;return(t=e.call(this,n)||this).isPreview=!1,t.csrfToken="",g(a(t)),t}c(n,e);var t=n.prototype;return t.dispatch=function(e,n){},t.metaValue=function(e){return""},n}(n.Controller),y={ms:6e4,initialState:!1,events:["mousemove","mousedown","resize","keydown","touchstart","wheel"],dispatchEvent:!0,eventPrefix:!0},w=function(e,n){void 0===n&&(n={});var r=Object.assign(y,n),s=r.ms,c=r.events,a=r.dispatchEvent,l=r.eventPrefix,u=r.initialState,d=setTimeout(function(){u=!0,v()},s),v=function(n){var r=i("away",e,l);if(e.isIdle=!0,e.away&&t(e,"away").call(e,n),a){var s=o(r,n||null,{controller:e});e.element.dispatchEvent(s)}},f=function(n){var r=i("back",e,l);if(e.isIdle=!1,e.back&&t(e,"back").call(e,n),a){var s=o(r,n||null,{controller:e});e.element.dispatchEvent(s)}},b=function(e){u&&f(e),u=!1,clearTimeout(d),d=setTimeout(function(){u=!0,v(e)},s)},h=function(e){document.hidden||b(e)};u?v():f();var p=e.disconnect.bind(e),m=function(){c.forEach(function(e){window.addEventListener(e,b)}),document.addEventListener("visibilitychange",h)},g=function(){c.forEach(function(e){window.removeEventListener(e,b)}),document.removeEventListener("visibilitychange",h)};return Object.assign(e,{disconnect:function(){g(),p()}}),m(),[m,g]},O=function(e){function n(n){var t;return(t=e.call(this,n)||this).isIdle=!1,requestAnimationFrame(function(){var e=w(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}c(n,e);var t=n.prototype;return t.away=function(){},t.back=function(){},n}(n.Controller),j={dispatchEvent:!0,eventPrefix:!0},C=function(e,n){var r=this;void 0===n&&(n={}),this.observe=function(){r.delegate.isVisible=!document.hidden,document.addEventListener("visibilitychange",r.handleVisibilityChange)},this.unobserve=function(){document.removeEventListener("visibilitychange",r.handleVisibilityChange)},this.dispatchInvisible=function(e){var n=i("invisible",r.delegate,r.eventPrefix);if(r.delegate.isVisible=!1,r.delegate.invisible&&t(r.delegate,"invisible").call(r.delegate,e),r.dispatchEvent){var s=o(n,e||null,{controller:r.delegate});r.delegate.element.dispatchEvent(s)}},this.dispatchVisible=function(e){var n=i("Visible",r.delegate,r.eventPrefix);if(r.delegate.isVisible=!0,r.delegate.visible&&t(r.delegate,"visible").call(r.delegate,e),r.dispatchEvent){var s=o(n,e||null,{controller:r.delegate});r.delegate.element.dispatchEvent(s)}},this.handleVisibilityChange=function(e){document.hidden?r.dispatchInvisible(e):r.dispatchVisible(e)};var s=Object.assign(j,n);Object.assign(this,{dispatchEvent:s.dispatchEvent,eventPrefix:s.eventPrefix}),this.delegate=e;var c=e.disconnect.bind(e),a=this.unobserve;Object.assign(e,{disconnect:function(){a(),c()}}),this.observe()},V=function(e,n){void 0===n&&(n={});var t=new C(e,n);return[t.observe,t.unobserve]},L=function(e){function n(n){var t;return t=e.call(this,n)||this,requestAnimationFrame(function(){var e=V(a(t),t.options),n=e[0],i=e[1];Object.assign(a(t),{observe:n,unobserve:i})}),t}return c(n,e),n}(n.Controller);e.ApplicationController=E,e.ClickOutsideController=m,e.IdleController=O,e.IntersectionController=l,e.LazyLoadController=d,e.ResizeController=b,e.VisibilityController=L,e.useApplication=g,e.useClickOutside=p,e.useIdle=w,e.useIntersection=s,e.useLazyLoad=u,e.useResize=f,e.useVisibility=V});
 //# sourceMappingURL=index.umd.js.map

dist/support/index.d.ts

@@ -0,0 +0,0 @@ import { Controller } from 'stimulus';

dist/use-application/application-controller.d.ts

@@ -0,0 +0,0 @@ import { Controller, Context } from 'stimulus';

dist/use-application/index.d.ts

 export { useApplication } from './use-application';
 export { ApplicationController } from './application-controller';
 //# sourceMappingURL=index.d.ts.map

dist/use-application/use-application.d.ts

 import { Controller } from 'stimulus';
 export declare const useApplication: (controller: Controller) => void;
 //# sourceMappingURL=use-application.d.ts.map

dist/use-click-outside/click-outside-controller.d.ts

@@ -0,0 +0,0 @@ import { Controller, Context } from 'stimulus';

dist/use-click-outside/index.d.ts

 export { useClickOutside } from './use-click-outside';
 export { ClickOutsideController } from './click-outside-controller';
 //# sourceMappingURL=index.d.ts.map

dist/use-click-outside/use-click-outside.d.ts

@@ -0,0 +0,0 @@ import { Controller } from 'stimulus';

dist/use-idle/idle-controller.d.ts

@@ -0,0 +0,0 @@ import { Controller, Context } from 'stimulus';

dist/use-idle/idle-controller.js

@@ -22,3 +22,2 @@ var __extends = (this && this.__extends) || (function () {
         requestAnimationFrame(function () {
-            useIdle(_this);
             var _a = useIdle(_this, _this.options), observe = _a[0], unobserve = _a[1];
@@ -25,0 +24,0 @@ Object.assign(_this, { observe: observe, unobserve: unobserve });

dist/use-idle/index.d.ts

 export { useIdle } from './use-idle';
 export { IdleController } from './idle-controller';
 //# sourceMappingURL=index.d.ts.map

dist/use-idle/use-idle.d.ts

@@ -0,0 +0,0 @@ import { IdleController } from './idle-controller';

dist/use-intersection/index.d.ts

 export { useIntersection } from './use-intersection';
 export { IntersectionController } from './intersection-controller';
 //# sourceMappingURL=index.d.ts.map

dist/use-intersection/intersection-controller.d.ts

@@ -8,6 +8,6 @@ import { Controller, Context } from 'stimulus';
     unobserve: () => void;
+    appear: (entry: IntersectionObserverEntry) => void;
+    disappear: (entry: IntersectionObserverEntry) => void;
     constructor(context: Context);
-    appear(entry: IntersectionObserverEntry): void;
-    disappear(entry: IntersectionObserverEntry): void;
 }
 //# sourceMappingURL=intersection-controller.d.ts.map

dist/use-intersection/intersection-controller.js

@@ -27,4 +27,2 @@ var __extends = (this && this.__extends) || (function () {
     }
-    IntersectionController.prototype.appear = function (entry) { };
-    IntersectionController.prototype.disappear = function (entry) { };
     return IntersectionController;
@@ -31,0 +29,0 @@ }(Controller));

dist/use-intersection/use-intersection.d.ts

@@ -0,0 +0,0 @@ import { IntersectionController } from './intersection-controller';

dist/use-lazy-load/index.d.ts

 export { useLazyLoad } from './useLazyLoad';
 export { LazyLoadController } from './lazy-load-controller';
 //# sourceMappingURL=index.d.ts.map

dist/use-lazy-load/lazy-load-controller.d.ts

@@ -0,0 +0,0 @@ import { Controller, Context } from 'stimulus';

dist/use-lazy-load/useLazyLoad.d.ts

 import { LazyLoadController } from './lazy-load-controller';
 export declare const useLazyLoad: (controller: LazyLoadController, options?: IntersectionObserverInit | undefined) => readonly [() => void, () => void];
 //# sourceMappingURL=useLazyLoad.d.ts.map

dist/use-resize/index.d.ts

 export { useResize } from './use-resize';
 export { ResizeController } from './resize-controller';
 //# sourceMappingURL=index.d.ts.map

dist/use-resize/resize-controller.d.ts

@@ -0,0 +0,0 @@ import { Controller, Context } from 'stimulus';

dist/use-resize/use-resize.d.ts

@@ -0,0 +0,0 @@ import { ResizeController } from './resize-controller';

dist/use-visibility/index.d.ts

 export { useVisibility } from './use-visibility';
 export { VisibilityController } from './visibility-controller';
 //# sourceMappingURL=index.d.ts.map

dist/use-visibility/use-visibility.d.ts

@@ -6,3 +6,14 @@ import { VisibilityController } from './visibility-controller';
 }
+export declare class UseVisibility {
+    delegate: VisibilityController;
+    eventPrefix: boolean | string;
+    dispatchEvent: boolean;
+    constructor(controller: VisibilityController, options?: VisibilityOptions);
+    observe: () => void;
+    unobserve: () => void;
+    private dispatchInvisible;
+    private dispatchVisible;
+    private handleVisibilityChange;
+}
 export declare const useVisibility: (controller: VisibilityController, options?: VisibilityOptions) => readonly [() => void, () => void];
 //# sourceMappingURL=use-visibility.d.ts.map

dist/use-visibility/use-visibility.js

 import { extendedEvent, method, composeEventName } from '../support';
 var defaultOptions = {
     dispatchEvent: true,
-    eventPrefix: true,
+    eventPrefix: true
 };
+var UseVisibility = /** @class */ (function () {
+    function UseVisibility(controller, options) {
+        var _this = this;
+        if (options === void 0) { options = {}; }
+        this.observe = function () {
+            _this.delegate.isVisible = !document.hidden;
+            document.addEventListener('visibilitychange', _this.handleVisibilityChange);
+        };
+        this.unobserve = function () {
+            document.removeEventListener('visibilitychange', _this.handleVisibilityChange);
+        };
+        this.dispatchInvisible = function (event) {
+            var eventName = composeEventName('invisible', _this.delegate, _this.eventPrefix);
+            _this.delegate.isVisible = false;
+            _this.delegate.invisible && method(_this.delegate, 'invisible').call(_this.delegate, event);
+            if (_this.dispatchEvent) {
+                var invisibleEvent = extendedEvent(eventName, event || null, { controller: _this.delegate });
+                _this.delegate.element.dispatchEvent(invisibleEvent);
+            }
+        };
+        this.dispatchVisible = function (event) {
+            var eventName = composeEventName('Visible', _this.delegate, _this.eventPrefix);
+            _this.delegate.isVisible = true;
+            _this.delegate.visible && method(_this.delegate, 'visible').call(_this.delegate, event);
+            if (_this.dispatchEvent) {
+                var visibleEvent = extendedEvent(eventName, event || null, { controller: _this.delegate });
+                _this.delegate.element.dispatchEvent(visibleEvent);
+            }
+        };
+        this.handleVisibilityChange = function (event) {
+            if (document.hidden) {
+                _this.dispatchInvisible(event);
+            }
+            else {
+                _this.dispatchVisible(event);
+            }
+        };
+        var _a = Object.assign(defaultOptions, options), dispatchEvent = _a.dispatchEvent, eventPrefix = _a.eventPrefix;
+        Object.assign(this, { dispatchEvent: dispatchEvent, eventPrefix: eventPrefix });
+        this.delegate = controller;
+        var controllerDisconnect = controller.disconnect.bind(controller);
+        var unobserve = this.unobserve;
+        Object.assign(controller, {
+            disconnect: function () {
+                unobserve();
+                controllerDisconnect();
+            }
+        });
+        this.observe();
+    }
+    return UseVisibility;
+}());
+export { UseVisibility };
 export var useVisibility = function (controller, options) {
     if (options === void 0) { options = {}; }
-    var _a = Object.assign(defaultOptions, options), dispatchEvent = _a.dispatchEvent, eventPrefix = _a.eventPrefix;
-    var dispatchInvisible = function (event) {
-        var eventName = composeEventName('invisible', controller, eventPrefix);
-        controller.isVisible = false;
-        controller.invisible && method(controller, 'invisible').call(controller, event);
-        if (dispatchEvent) {
-            var invisibleEvent = extendedEvent(eventName, event || null, { controller: controller });
-            controller.element.dispatchEvent(invisibleEvent);
-        }
-    };
-    var dispatchVisible = function (event) {
-        var eventName = composeEventName('Visible', controller, eventPrefix);
-        controller.isVisible = true;
-        controller.visible && method(controller, 'visible').call(controller, event);
-        if (dispatchEvent) {
-            var visibleEvent = extendedEvent(eventName, event || null, { controller: controller });
-            controller.element.dispatchEvent(visibleEvent);
-        }
-    };
-    var handleVisibilityChange = function (event) {
-        if (document.hidden) {
-            dispatchInvisible(event);
-        }
-        else {
-            dispatchVisible(event);
-        }
-    };
-    var controllerDisconnect = controller.disconnect.bind(controller);
-    var observe = function () {
-        controller.isVisible = !document.hidden;
-        document.addEventListener('visibilitychange', handleVisibilityChange);
-    };
-    var unobserve = function () {
-        document.removeEventListener('visibilitychange', handleVisibilityChange);
-    };
-    Object.assign(controller, {
-        disconnect: function () {
-            unobserve();
-            controllerDisconnect();
-        },
-    });
-    observe();
-    return [observe, unobserve];
+    var observer = new UseVisibility(controller, options);
+    return [observer.observe, observer.unobserve];
 };
 //# sourceMappingURL=use-visibility.js.map

dist/use-visibility/visibility-controller.d.ts

@@ -0,0 +0,0 @@ import { Controller, Context } from 'stimulus';

package.json

 {
   "name": "stimulus-use",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "A collection of standard controllers and utilities for Stimulus",
@@ -25,7 +25,6 @@ "main": "dist/index.umd.js",
   "devDependencies": {
-    "@babel/core": "^7.11.1",
+    "@babel/core": "^7.11.6",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.11.0",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-modules": "^0.1.3",
+    "@babel/plugin-transform-runtime": "^7.11.5",
+    "@babel/preset-modules": "^0.1.4",
     "babel-loader": "^8.1.0",
@@ -35,6 +34,8 @@ "chai": "^4.2.0",
     "html2js": "^0.2.0",
-    "karma": "^5.1.1",
+    "intersection-observer": "^0.11.0",
+    "karma": "^5.2.1",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^2.0.3",
+    "karma-firefox-launcher": "^1.3.0",
     "karma-fixture": "^0.2.6",
@@ -44,4 +45,5 @@ "karma-html2js-preprocessor": "^1.1.0",
     "karma-mocha-reporter": "^2.2.5",
+    "karma-sauce-launcher": "^4.1.5",
     "karma-sinon-chai": "^2.0.2",
-    "karma-sourcemap-loader": "^0.3.7",
+    "karma-sourcemap-loader": "^0.3.8",
     "karma-typescript": "^5.1.0",
@@ -51,4 +53,4 @@ "karma-webpack": "^4.0.2",
     "microbundle": "^0.12.3",
-    "mocha": "^8.1.1",
-    "np": "^6.4.0",
+    "mocha": "^8.1.3",
+    "np": "^6.5.0",
     "rimraf": "^3.0.2",
@@ -59,3 +61,3 @@ "sinon": "^9.0.3",
     "stimulus": "^1.1.1",
-    "ts-loader": "^8.0.2",
+    "ts-loader": "^8.0.3",
     "typescript": "^3.9.7",
@@ -62,0 +64,0 @@ "webpack": "^4.44.1",

README.md

@@ -48,9 +48,12 @@ <p align="center">
 
-  This set of controllers is built around the [`Observer APIs`](https://developer.mozilla.org/en-US/docs/Web/API)
+  This set of controllers is built around the [`Observer APIs`](https://developer.mozilla.org/en-US/docs/Web/API) and custom events
   | useFunction/Controller| Description | NEW Callbacks |
   |-----------------------|-------------|---------------------|
-  | [`useIntersection`](./docs/use-intersection.md) </br> `IntersectionController` | Tracks the element's intersection and adds **appear**, **disappear** callbacks to your controller.|`appear`</br> `disappear`|
-  |[`useResize`](./docs/use-resize.md) </br>`ResizeController`|Tracks the element's size and adds a new lifecyle callback **resize**.|`resize`|
-  |[`useClickOutside`](./docs/use-click-outside.md) </br>`ClickOutsideController`|Tracks the clicks outside of the element and adds a new lifecyle callback **clickOutside**.|`clickOutside`|
+  |[`useClickOutside`](./docs/use-click-outside.md)|Tracks the clicks outside of the element and adds a new lifecyle callback **clickOutside**.|`clickOutside`|
+  | [`useIdle`](./docs/use-idle.md)| Tracks if the user is idle on your page and adds **away** and **back** callbacks to your controller.|`away`</br> `back`|
+  | [`useIntersection`](./docs/use-intersection.md) | Tracks the element's intersection and adds **appear**, **disappear** callbacks to your controller.|`appear`</br> `disappear`|
+  | [`useVisibility`](./docs/use-visibility.md) </br>| Tracks the page visibility and adds **visible**, **invisible** callbacks to your controller.|`visible`</br> `invisible`|
+  |[`useResize`](./docs/use-resize.md)|Tracks the element's size and adds a new lifecyle callback **resize**.|`resize`|
 
+
 - **Application**
@@ -60,6 +63,2 @@ - [`useApplication, ApplicationController`](./docs/application-controller.md) &mdash; supercharged controller for your application.
 
-- **Idle**
-  - [`useIdle, IdleController`](./docs/use-idle.md) &mdash;  Tracks if the user is idle on your page and adds **away** and **back** callbacks to your controller.
-
-
 ## Extend or compose
@@ -168,1 +167,11 @@
 [![Testing Powered By SauceLabs](https://opensource.saucelabs.com/images/opensauce/powered-by-saucelabs-badge-white.png?sanitize=true "Testing Powered By SauceLabs")](https://saucelabs.com)
+
+## 🚧 in construction
+
+matrix
+
+[![Sauce Test Status](https://app.saucelabs.com/browser-matrix/adrienpoly.svg)](https://app.saucelabs.com/u/adrienpoly)
+
+badge
+
+[![Sauce Test Status](https://app.saucelabs.com/buildstatus/YOUR_SAUCE_USERNAME)](https://app.saucelabs.com/u/adrienpoly)

src/index.ts

@@ -7,1 +7,2 @@ export { useIntersection, IntersectionController } from './use-intersection'
 export { useIdle, IdleController } from './use-idle'
+export { useVisibility, VisibilityController } from './use-visibility'

src/use-idle/idle-controller.ts

@@ -13,3 +13,2 @@ import { Controller, Context } from 'stimulus'
     requestAnimationFrame(() => {
-      useIdle(this)
       const [observe, unobserve] = useIdle(this, this.options)
@@ -16,0 +15,0 @@ Object.assign(this, { observe, unobserve })

src/use-intersection/intersection-controller.ts

@@ -9,2 +9,4 @@ import { Controller, Context } from 'stimulus'
   unobserve!: () => void
+  appear!: (entry: IntersectionObserverEntry) => void
+  disappear!: (entry: IntersectionObserverEntry) => void
 
@@ -18,6 +20,2 @@ constructor(context: Context) {
   }
-
-  appear(entry: IntersectionObserverEntry) {}
-
-  disappear(entry: IntersectionObserverEntry) {}
 }

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

150704

increased by6.07%

Lines of code

1675

increased by2.13%

Number of lines in readme file

174

increased by4.82%

Worsened metrics

Dev dependency count

37

increased by5.71%

Number of package files

127

decreased by-3.05%

No dependency changes