Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

stimulus-use

Package Overview
Dependencies
Maintainers
1
Versions
64
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

stimulus-use - npm Package Compare versions

Comparing version 0.12.1 to 0.13.0

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

0

dist/index.d.ts

@@ -0,0 +0,0 @@ export { useIntersection, IntersectionController } from './use-intersection';

2

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,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),u=c.dispatchEvent,a=c.eventPrefix,l=(null==(s=n)?void 0:s.element)||e.element,v=e.disconnect.bind(e);Object.assign(e,{isVisible:!1,observer:new IntersectionObserver(function(n){var r=n[0];r.isIntersecting?function(n){if(e.isVisible=!0,e.appear&&t(e,"appear").call(e,n),u){var r=i("appear",e,a),s=o(r,null,{controller:e,entry:n});l.dispatchEvent(s)}}(r):e.isVisible&&function(n){if(e.isVisible=!1,e.disappear&&t(e,"disappear").call(e,n),u){var r=i("disappear",e,a),s=o(r,null,{controller:e,entry:n});l.dispatchEvent(s)}}(r)},n),observe:function(){this.observer.observe(l)},unObserve:function(){this.observer.unobserve(l)},disconnect:function(){e.unObserve(),v()}}),e.observe()};function c(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var a=function(e){function n(n){var t;return(t=e.call(this,n)||this).isVisible=!1,t.options={},requestAnimationFrame(function(){s(u(t),t.options)}),t}c(n,e);var t=n.prototype;return t.observe=function(){},t.unObserve=function(){},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()},v=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(u(t),t.options)}),t}c(n,e);var t=n.prototype;return t.observe=function(){},t.unObserve=function(){},t.loading=function(e){},t.loaded=function(e){},n}(n.Controller),d={dispatchEvent:!0,eventPrefix:!0},f=function(e,n){var r;void 0===n&&(n={});var s=Object.assign(d,n),c=s.dispatchEvent,u=s.eventPrefix,a=(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),c){var s=i("resize",e,u),l=o(s,null,{controller:e,entry:r});a.dispatchEvent(l)}}),observe:function(){this.observer.observe(a)},unObserve:function(){this.observer.unobserve(a)},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(){f(u(t),t.options)}),t}c(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),s=r.onlyVisible,c=r.dispatchEvent,u=r.events,a=r.eventPrefix,l=function(r){var u,l,v=(null==(u=n)?void 0:u.element)||e.element;if(!v.contains(r.target)&&((l=v.getBoundingClientRect()).top>=0&&l.left>=0&&l.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&l.right<=(window.innerWidth||document.documentElement.clientWidth)||!s)&&(e.clickOutside&&t(e,"clickOutside").call(e,r),c)){var d=i("click:outside",e,a),f=o(d,r,{controller:e});v.dispatchEvent(f)}};null==u||u.forEach(function(e){window.addEventListener(e,l,!1)});var v=e.disconnect.bind(e);Object.assign(e,{disconnect:function(){null==u||u.forEach(function(e){window.removeEventListener(e,l,!1)}),v()}})},h=function(e){function n(n){var t;return t=e.call(this,n)||this,requestAnimationFrame(function(){m(u(t),t.options)}),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,u=i.bubbles,a=void 0===u||u,l=i.cancelable,v=void 0===l||l;Object.assign(c,{controller:e});var d=new CustomEvent(e.identifier+":"+n,{detail:c,bubbles:a,cancelable:v});return r.dispatchEvent(d),d},metaValue:function(e){var n=document.head.querySelector('meta[name="'+e+'"]');return n&&n.getAttribute("content")}})},O=function(e){function n(n){var t;return(t=e.call(this,n)||this).isPreview=!1,t.csrfToken="",g(u(t)),t}c(n,e);var t=n.prototype;return t.dispatch=function(e,n){},t.metaValue=function(e){return""},n}(n.Controller),E={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(E,n),s=r.ms,c=r.events,u=r.dispatchEvent,a=r.eventPrefix,l=r.initialState,v=setTimeout(function(){l=!0,d()},s),d=function(n){var r=i("away",e,a);if(e.isIdle=!0,e.away&&t(e,"away").call(e,n),u){var s=o(r,n||null,{controller:e});e.element.dispatchEvent(s)}},f=function(n){var r=i("back",e,a);if(e.isIdle=!1,e.back&&t(e,"back").call(e,n),u){var s=o(r,n||null,{controller:e});e.element.dispatchEvent(s)}},b=function(e){l&&f(e),l=!1,clearTimeout(v),v=setTimeout(function(){l=!0,d(e)},s)},p=function(e){document.hidden||b(e)};l?d():f();var m=e.disconnect.bind(e);Object.assign(e,{observe:function(){c.forEach(function(e){window.addEventListener(e,b)}),document.addEventListener("visibilitychange",p)},unObserve:function(){c.forEach(function(e){window.removeEventListener(e,b)}),document.removeEventListener("visibilitychange",p)},disconnect:function(){this.unObserve(),m()}}),e.observe()},y=function(e){function n(n){var t;return(t=e.call(this,n)||this).isIdle=!1,requestAnimationFrame(function(){w(u(t))}),t}c(n,e);var t=n.prototype;return t.observe=function(){},t.unObserve=function(){},t.away=function(){},t.back=function(){},n}(n.Controller);e.ApplicationController=O,e.ClickOutsideController=h,e.IdleController=y,e.IntersectionController=a,e.LazyLoadController=v,e.ResizeController=b,e.useApplication=g,e.useClickOutside=m,e.useIdle=w,e.useIntersection=s,e.useLazyLoad=l,e.useResize=f});
!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});
//# sourceMappingURL=index.umd.js.map

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

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

export { useApplication } from './use-application';
export { ApplicationController } from './application-controller';
//# sourceMappingURL=index.d.ts.map
import { Controller } from 'stimulus';
export declare const useApplication: (controller: Controller) => void;
//# sourceMappingURL=use-application.d.ts.map
import { Controller, Context } from 'stimulus';
import { ClickOutsideOptions } from './use-click-outside';
export declare class ClickOutsideController extends Controller {
observer: ResizeObserver;
options: ClickOutsideOptions;
observe: () => void;
unobserve: () => void;
constructor(context: Context);

@@ -7,0 +8,0 @@ clickOutside(event: Event): void;

@@ -21,3 +21,4 @@ var __extends = (this && this.__extends) || (function () {

requestAnimationFrame(function () {
useClickOutside(_this, _this.options);
var _a = useClickOutside(_this, _this.options), observe = _a[0], unobserve = _a[1];
Object.assign(_this, { observe: observe, unobserve: unobserve });
});

@@ -24,0 +25,0 @@ return _this;

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

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

}
export declare const useClickOutside: (controller: ClickOutsideController, options?: ClickOutsideOptions) => void;
export declare const useClickOutside: (controller: ClickOutsideController, options?: ClickOutsideOptions) => readonly [() => void, () => void];
export {};
//# sourceMappingURL=use-click-outside.d.ts.map

@@ -25,5 +25,12 @@ import { method, extendedEvent, isElementInViewport, composeEventName } from '../support';

};
events === null || events === void 0 ? void 0 : events.forEach(function (event) {
window.addEventListener(event, onEvent, false);
});
var observe = function () {
events === null || events === void 0 ? void 0 : events.forEach(function (event) {
window.addEventListener(event, onEvent, false);
});
};
var unobserve = function () {
events === null || events === void 0 ? void 0 : events.forEach(function (event) {
window.removeEventListener(event, onEvent, false);
});
};
// keep a copy of the current disconnect() function of the controller

@@ -34,9 +41,9 @@ // to support composing several behaviors

disconnect: function () {
events === null || events === void 0 ? void 0 : events.forEach(function (event) {
window.removeEventListener(event, onEvent, false);
});
unobserve();
controllerDisconnect();
},
});
observe();
return [observe, unobserve];
};
//# sourceMappingURL=use-click-outside.js.map
import { Controller, Context } from 'stimulus';
import { IdleOptions } from './use-idle';
export declare class IdleController extends Controller {
isIdle: boolean;
options: IdleOptions;
observe: () => void;
unobserve: () => void;
constructor(context: Context);
observe(): void;
unObserve(): void;
away(): void;

@@ -8,0 +10,0 @@ back(): void;

@@ -23,7 +23,7 @@ var __extends = (this && this.__extends) || (function () {

useIdle(_this);
var _a = useIdle(_this, _this.options), observe = _a[0], unobserve = _a[1];
Object.assign(_this, { observe: observe, unobserve: unobserve });
});
return _this;
}
IdleController.prototype.observe = function () { };
IdleController.prototype.unObserve = function () { };
IdleController.prototype.away = function () { };

@@ -30,0 +30,0 @@ IdleController.prototype.back = function () { };

export { useIdle } from './use-idle';
export { IdleController } from './idle-controller';
//# sourceMappingURL=index.d.ts.map
import { IdleController } from './idle-controller';
interface IdleOptions {
export interface IdleOptions {
ms?: number;

@@ -9,4 +9,3 @@ initialState?: boolean;

}
export declare const useIdle: (controller: IdleController, options?: IdleOptions) => void;
export {};
export declare const useIdle: (controller: IdleController, options?: IdleOptions) => readonly [() => void, () => void];
//# sourceMappingURL=use-idle.d.ts.map

@@ -58,22 +58,23 @@ import { extendedEvent, method, composeEventName } from '../support';

var controllerDisconnect = controller.disconnect.bind(controller);
var observe = function () {
events.forEach(function (event) {
window.addEventListener(event, onEvent);
});
document.addEventListener('visibilitychange', onVisibility);
};
var unobserve = function () {
events.forEach(function (event) {
window.removeEventListener(event, onEvent);
});
document.removeEventListener('visibilitychange', onVisibility);
};
Object.assign(controller, {
observe: function () {
events.forEach(function (event) {
window.addEventListener(event, onEvent);
});
document.addEventListener('visibilitychange', onVisibility);
},
unObserve: function () {
events.forEach(function (event) {
window.removeEventListener(event, onEvent);
});
document.removeEventListener('visibilitychange', onVisibility);
},
disconnect: function () {
this.unObserve();
unobserve();
controllerDisconnect();
},
});
controller.observe();
observe();
return [observe, unobserve];
};
//# sourceMappingURL=use-idle.js.map
export { useIntersection } from './use-intersection';
export { IntersectionController } from './intersection-controller';
//# sourceMappingURL=index.d.ts.map

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

options: IntersectionOptions;
observer: IntersectionObserver;
observe: () => void;
unobserve: () => void;
constructor(context: Context);
observe(): void;
unObserve(): void;
appear(entry: IntersectionObserverEntry): void;

@@ -12,0 +11,0 @@ disappear(entry: IntersectionObserverEntry): void;

@@ -21,10 +21,8 @@ var __extends = (this && this.__extends) || (function () {

_this.isVisible = false;
_this.options = {};
requestAnimationFrame(function () {
useIntersection(_this, _this.options);
var _a = useIntersection(_this, _this.options), observe = _a[0], unobserve = _a[1];
Object.assign(_this, { observe: observe, unobserve: unobserve });
});
return _this;
}
IntersectionController.prototype.observe = function () { };
IntersectionController.prototype.unObserve = function () { };
IntersectionController.prototype.appear = function (entry) { };

@@ -31,0 +29,0 @@ IntersectionController.prototype.disappear = function (entry) { };

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

}
export declare const useIntersection: (controller: IntersectionController, options?: IntersectionOptions) => void;
export declare const useIntersection: (controller: IntersectionController, options?: IntersectionOptions) => readonly [() => void, () => void];
//# sourceMappingURL=use-intersection.d.ts.map

@@ -42,18 +42,19 @@ import { method, extendedEvent, composeEventName } from '../support';

var controllerDisconnect = controller.disconnect.bind(controller);
var observer = new IntersectionObserver(callback, options);
var observe = function () {
observer.observe(targetElement);
};
var unobserve = function () {
observer.unobserve(targetElement);
};
Object.assign(controller, {
isVisible: false,
observer: new IntersectionObserver(callback, options),
observe: function () {
this.observer.observe(targetElement);
},
unObserve: function () {
this.observer.unobserve(targetElement);
},
disconnect: function () {
controller.unObserve();
unobserve();
controllerDisconnect();
},
});
controller.observe();
observe();
return [observe, unobserve];
};
//# sourceMappingURL=use-intersection.js.map
export { useLazyLoad } from './useLazyLoad';
export { LazyLoadController } from './lazy-load-controller';
//# sourceMappingURL=index.d.ts.map

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

options: IntersectionObserverInit;
observer: IntersectionObserver;
observe: () => void;
unobserve: () => void;
constructor(context: Context);
observe(): void;
unObserve(): void;
loading(src: string): void;

@@ -12,0 +11,0 @@ loaded(src: string): void;

@@ -24,8 +24,7 @@ var __extends = (this && this.__extends) || (function () {

requestAnimationFrame(function () {
useLazyLoad(_this, _this.options);
var _a = useLazyLoad(_this, _this.options), observe = _a[0], unobserve = _a[1];
Object.assign(_this, { observe: observe, unobserve: unobserve });
});
return _this;
}
LazyLoadController.prototype.observe = function () { };
LazyLoadController.prototype.unObserve = function () { };
LazyLoadController.prototype.loading = function (src) { };

@@ -32,0 +31,0 @@ LazyLoadController.prototype.loaded = function (src) { };

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

@@ -27,19 +27,20 @@ import { method } from '../support';

// keep a copy of the current disconnect() function of the controller to not override it
var controllerDisconnect = controller.disconnect;
var controllerDisconnect = controller.disconnect.bind(controller);
var observer = new IntersectionObserver(callback, options);
var observe = function () {
observer.observe(controller.element);
};
var unobserve = function () {
observer.unobserve(controller.element);
};
Object.assign(controller, {
isVisible: false,
observer: new IntersectionObserver(callback, options),
observe: function () {
this.observer.observe(controller.element);
},
unObserve: function () {
this.observer.unobserve(controller.element);
},
disconnect: function () {
controller.unObserve();
unobserve();
controllerDisconnect();
},
});
controller.observe();
observe();
return [observe, unobserve];
};
//# sourceMappingURL=useLazyLoad.js.map
export { useResize } from './use-resize';
export { ResizeController } from './resize-controller';
//# sourceMappingURL=index.d.ts.map
import { Controller, Context } from 'stimulus';
import { ResizeOptions } from './use-resize';
export declare class ResizeController extends Controller {
observer: ResizeObserver;
options: ResizeOptions;
observe: () => void;
unobserve: () => void;
constructor(context: Context);
observe(): void;
unObserve(): void;
resize(contentRect: DOMRectReadOnly): void;
}
//# sourceMappingURL=resize-controller.d.ts.map

@@ -20,10 +20,8 @@ var __extends = (this && this.__extends) || (function () {

var _this = _super.call(this, context) || this;
_this.options = {};
requestAnimationFrame(function () {
useResize(_this, _this.options);
var _a = useResize(_this, _this.options), observe = _a[0], unobserve = _a[1];
Object.assign(_this, { observe: observe, unobserve: unobserve });
});
return _this;
}
ResizeController.prototype.observe = function () { };
ResizeController.prototype.unObserve = function () { };
ResizeController.prototype.resize = function (contentRect) { };

@@ -30,0 +28,0 @@ return ResizeController;

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

}
export declare const useResize: (controller: ResizeController, options?: ResizeOptions) => void;
export declare const useResize: (controller: ResizeController, options?: ResizeOptions) => readonly [() => void, () => void];
//# sourceMappingURL=use-resize.d.ts.map

@@ -24,17 +24,18 @@ import { method, extendedEvent, composeEventName } from '../support';

var controllerDisconnect = controller.disconnect.bind(controller);
var observer = new ResizeObserver(callback);
var observe = function () {
observer.observe(targetElement);
};
var unobserve = function () {
observer.unobserve(targetElement);
};
Object.assign(controller, {
observer: new ResizeObserver(callback),
observe: function () {
this.observer.observe(targetElement);
},
unObserve: function () {
this.observer.unobserve(targetElement);
},
disconnect: function () {
controller.unObserve();
unobserve();
controllerDisconnect();
},
});
controller.observe();
observe();
return [observe, unobserve];
};
//# sourceMappingURL=use-resize.js.map
{
"name": "stimulus-use",
"version": "0.12.1",
"version": "0.13.0",
"description": "A collection of standard controllers and utilities for Stimulus",

@@ -15,3 +15,3 @@ "main": "dist/index.umd.js",

"start": "webpack-dev-server --mode development --open",
"prebuild": "yarn clean",
"prebuild": "$npm_execpath run clean",
"build": "tsc -b && microbundle src/index.ts -f umd --globals stimulus=Stimulus",

@@ -18,0 +18,0 @@ "test": "NODE_ENV=test karma start",

@@ -15,4 +15,4 @@ <p align="center">

<img src="https://badgen.net/npm/license/stimulus-use" alt="types included">
<img src="./docs/assets/example-buildstatus-badge.png" alt="Sauce test status">
</p>
<br />

@@ -141,12 +141,13 @@

<tr>
<td align="center"><a href="https://www.argpar.se"><img src="https://avatars3.githubusercontent.com/u/2124818?v=4" width="80" alt=""/><br /><sub><b>Jonathan Sundqvist</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/commits?author=jonathan-s" title="Documentation">📖</a></td>
<td align="center"><a href="http://www.rodloboz.com"><img src="https://avatars3.githubusercontent.com/u/23458442?v=4" width="80" alt=""/><br /><sub><b>Rui Freitas</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/commits?author=rodloboz" title="Documentation">📖</a></td>
<td align="center"><a href="https://koudetat.co"><img src="https://avatars0.githubusercontent.com/u/7533706?v=4" width="80" alt=""/><br /><sub><b>Nicolas Filzi</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/commits?author=nfilzi" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/bdarcet"><img src="https://avatars1.githubusercontent.com/u/9220278?v=4" width="80" alt=""/><br /><sub><b>Benjamin Darcet</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/commits?author=bdarcet" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/juancarlosasensio"><img src="https://avatars3.githubusercontent.com/u/37816105?v=4" width="80" alt=""/><br /><sub><b>juancarlosasensio</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/commits?author=juancarlosasensio" title="Documentation">📖</a></td>
<td align="center"><a href="https://marcoroth.dev"><img src="https://avatars2.githubusercontent.com/u/6411752?v=4" width="80" alt=""/><br /><sub><b>Marco Roth</b></sub></a><br /><a href="#infra-marcoroth" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/stimulus-use/stimulus-use/commits?author=marcoroth" title="Code">💻</a></td>
<td align="center"><a href="http://philippdaun.net"><img src="https://avatars3.githubusercontent.com/u/22225348?v=4" width="80" alt=""/><br /><sub><b>Philipp Daun</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/issues?q=author%3Adaun" title="Bug reports">🐛</a></td>
<td align="center"><a href="https://marcoroth.dev"><img src="https://avatars2.githubusercontent.com/u/6411752?v=4" width="80px;" alt=""/><br /><sub><b>Marco Roth</b></sub></a><br /><a href="#infra-marcoroth" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/stimulus-use/stimulus-use/commits?author=marcoroth" title="Code">💻</a></td>
<td align="center"><a href="http://philippdaun.net"><img src="https://avatars3.githubusercontent.com/u/22225348?v=4" width="80px;" alt=""/><br /><sub><b>Philipp Daun</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/issues?q=author%3Adaun" title="Bug reports">🐛</a></td>
<td align="center"><a href="http://code.digimonkey.com"><img src="https://avatars0.githubusercontent.com/u/74207?v=4" width="80px;" alt=""/><br /><sub><b>M. E. Patterson</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/issues?q=author%3Amepatterson" title="Bug reports">🐛</a></td>
<td align="center"><a href="https://www.argpar.se"><img src="https://avatars3.githubusercontent.com/u/2124818?v=4" width="80px;" alt=""/><br /><sub><b>Jonathan Sundqvist</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/commits?author=jonathan-s" title="Documentation">📖</a></td>
<td align="center"><a href="http://www.rodloboz.com"><img src="https://avatars3.githubusercontent.com/u/23458442?v=4" width="80px;" alt=""/><br /><sub><b>Rui Freitas</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/commits?author=rodloboz" title="Documentation">📖</a></td>
<td align="center"><a href="https://koudetat.co"><img src="https://avatars0.githubusercontent.com/u/7533706?v=4" width="80px;" alt=""/><br /><sub><b>Nicolas Filzi</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/commits?author=nfilzi" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/bdarcet"><img src="https://avatars1.githubusercontent.com/u/9220278?v=4" width="80px;" alt=""/><br /><sub><b>Benjamin Darcet</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/commits?author=bdarcet" title="Documentation">📖</a></td>
</tr>
<tr>
<td align="center"><a href="http://code.digimonkey.com"><img src="https://avatars0.githubusercontent.com/u/74207?v=4" width="80" alt=""/><br /><sub><b>M. E. Patterson</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/issues?q=author%3Amepatterson" title="Bug reports">🐛</a></td>
<td align="center"><a href="https://github.com/juancarlosasensio"><img src="https://avatars3.githubusercontent.com/u/37816105?v=4" width="80px;" alt=""/><br /><sub><b>juancarlosasensio</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/commits?author=juancarlosasensio" title="Documentation">📖</a></td>
<td align="center"><a href="https://lidqqq.dev/"><img src="https://avatars3.githubusercontent.com/u/39523918?v=4" width="80px;" alt=""/><br /><sub><b>lidqqq</b></sub></a><br /><a href="#infra-lidqqq" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/stimulus-use/stimulus-use/issues?q=author%3Alidqqq" title="Bug reports">🐛</a></td>
</tr>

@@ -160,1 +161,8 @@ </table>

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## Acknowledgments
Continuous integration and cross browser testing is generously provided Sauce Labs.
[![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)

@@ -5,4 +5,5 @@ import { Controller, Context } from 'stimulus'

export class ClickOutsideController extends Controller {
observer!: ResizeObserver
options!: ClickOutsideOptions
observe!: () => void
unobserve!: () => void

@@ -12,3 +13,4 @@ constructor(context: Context) {

requestAnimationFrame(() => {
useClickOutside(this, this.options)
const [observe, unobserve] = useClickOutside(this, this.options)
Object.assign(this, { observe, unobserve })
})

@@ -15,0 +17,0 @@ }

@@ -45,6 +45,14 @@ import { Controller } from 'stimulus'

events?.forEach(event => {
window.addEventListener(event, onEvent, false)
})
const observe = () => {
events?.forEach(event => {
window.addEventListener(event, onEvent, false)
})
}
const unobserve = () => {
events?.forEach(event => {
window.removeEventListener(event, onEvent, false)
})
}
// keep a copy of the current disconnect() function of the controller

@@ -56,8 +64,10 @@ // to support composing several behaviors

disconnect() {
events?.forEach(event => {
window.removeEventListener(event, onEvent, false)
})
unobserve()
controllerDisconnect()
},
})
observe()
return [observe, unobserve] as const
}
import { Controller, Context } from 'stimulus'
import { useIdle } from './use-idle'
import { useIdle, IdleOptions } from './use-idle'
export class IdleController extends Controller {
isIdle: boolean = false
options!: IdleOptions
observe!: () => void
unobserve!: () => void

@@ -11,9 +14,7 @@ constructor(context: Context) {

useIdle(this)
const [observe, unobserve] = useIdle(this, this.options)
Object.assign(this, { observe, unobserve })
})
}
observe() {}
unObserve() {}
away() {}

@@ -20,0 +21,0 @@

@@ -7,3 +7,3 @@ import { IdleController } from './idle-controller'

interface IdleOptions {
export interface IdleOptions {
ms?: number

@@ -80,18 +80,19 @@ initialState?: boolean

const controllerDisconnect = controller.disconnect.bind(controller)
const observe = () => {
events.forEach(event => {
window.addEventListener(event, onEvent)
})
document.addEventListener('visibilitychange', onVisibility)
}
const unobserve = () => {
events.forEach(event => {
window.removeEventListener(event, onEvent)
})
document.removeEventListener('visibilitychange', onVisibility)
}
Object.assign(controller, {
observe() {
events.forEach(event => {
window.addEventListener(event, onEvent)
})
document.addEventListener('visibilitychange', onVisibility)
},
unObserve() {
events.forEach(event => {
window.removeEventListener(event, onEvent)
})
document.removeEventListener('visibilitychange', onVisibility)
},
disconnect() {
this.unObserve()
unobserve()
controllerDisconnect()

@@ -101,3 +102,5 @@ },

controller.observe()
observe()
return [observe, unobserve] as const
}

@@ -6,4 +6,5 @@ import { Controller, Context } from 'stimulus'

isVisible: boolean = false
options: IntersectionOptions = {}
observer!: IntersectionObserver
options!: IntersectionOptions
observe!: () => void
unobserve!: () => void

@@ -13,10 +14,7 @@ constructor(context: Context) {

requestAnimationFrame(() => {
useIntersection(this, this.options)
const [observe, unobserve] = useIntersection(this, this.options)
Object.assign(this, { observe, unobserve })
})
}
observe() {}
unObserve() {}
appear(entry: IntersectionObserverEntry) {}

@@ -23,0 +21,0 @@

@@ -58,13 +58,16 @@ import { IntersectionController } from './intersection-controller'

const observer = new IntersectionObserver(callback, options)
const observe = () => {
observer.observe(targetElement)
}
const unobserve = () => {
observer.unobserve(targetElement)
}
Object.assign(controller, {
isVisible: false,
observer: new IntersectionObserver(callback, options),
observe() {
this.observer.observe(targetElement)
},
unObserve() {
this.observer.unobserve(targetElement)
},
disconnect() {
controller.unObserve()
unobserve()
controllerDisconnect()

@@ -74,3 +77,5 @@ },

controller.observe()
observe()
return [observe, unobserve] as const
}

@@ -8,3 +8,4 @@ import { Controller, Context } from 'stimulus'

options: IntersectionObserverInit = { rootMargin: '10%' }
observer!: IntersectionObserver
observe!: () => void
unobserve!: () => void

@@ -14,10 +15,7 @@ constructor(context: Context) {

requestAnimationFrame(() => {
useLazyLoad(this, this.options)
const [observe, unobserve] = useLazyLoad(this, this.options)
Object.assign(this, { observe, unobserve })
})
}
observe() {}
unObserve() {}
loading(src: string) {}

@@ -24,0 +22,0 @@

@@ -33,15 +33,18 @@ import { LazyLoadController } from './lazy-load-controller'

// keep a copy of the current disconnect() function of the controller to not override it
const controllerDisconnect = controller.disconnect
const controllerDisconnect = controller.disconnect.bind(controller)
const observer = new IntersectionObserver(callback, options)
const observe = () => {
observer.observe(controller.element)
}
const unobserve = () => {
observer.unobserve(controller.element)
}
Object.assign(controller, {
isVisible: false,
observer: new IntersectionObserver(callback, options),
observe() {
this.observer.observe(controller.element)
},
unObserve() {
this.observer.unobserve(controller.element)
},
disconnect() {
controller.unObserve()
unobserve()
controllerDisconnect()

@@ -51,3 +54,5 @@ },

controller.observe()
observe()
return [observe, unobserve] as const
}

@@ -5,4 +5,5 @@ import { Controller, Context } from 'stimulus'

export class ResizeController extends Controller {
observer!: ResizeObserver
options: ResizeOptions = {}
options!: ResizeOptions
observe!: () => void
unobserve!: () => void

@@ -12,11 +13,8 @@ constructor(context: Context) {

requestAnimationFrame(() => {
useResize(this, this.options)
const [observe, unobserve] = useResize(this, this.options)
Object.assign(this, { observe, unobserve })
})
}
observe() {}
unObserve() {}
resize(contentRect: DOMRectReadOnly) {}
}

@@ -36,12 +36,14 @@ import { ResizeController } from './resize-controller'

const observer = new ResizeObserver(callback)
const observe = () => {
observer.observe(targetElement)
}
const unobserve = () => {
observer.unobserve(targetElement)
}
Object.assign(controller, {
observer: new ResizeObserver(callback),
observe() {
this.observer.observe(targetElement)
},
unObserve() {
this.observer.unobserve(targetElement)
},
disconnect() {
controller.unObserve()
unobserve()
controllerDisconnect()

@@ -51,3 +53,5 @@ },

controller.observe()
observe()
return [observe, unobserve] as const
}

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

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

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

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc