stimulus-use
Advanced tools
Comparing version 0.12.1 to 0.13.0
@@ -0,0 +0,0 @@ export { useIntersection, IntersectionController } from './use-intersection'; |
@@ -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
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
142074
131
1640
166