Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
ember-resize-observer-service
Advanced tools
Use a single ResizeObserver instance for better performance.
ResizeObserverService
allows to use a single ResizeObserver
instance for observing multiple elements to achieve better performance.
Why? Using multiple ResizeObserver
instances can result in a noticeable performance penalty.
This service can be used to create any tools that can benefit from using a single centralized ResizeObserver
. For example, you can create a modifier for handling Element's size changes: <div {{on-resize @onResize}} />
(the full example in the usage section).
It has good test coverage and is ready for production👍
ember install ember-resize-observer-service
If you need a ResizeObserver polyfill (caniuse.com):
ember install ember-resize-observer-polyfill
isEnabled
It is true
if ResizeObserver
is available, otherwise the service will ignore any method calls (e.g. in FastBoot
environment).
observe(element, callback)
Initiates the observing of the provided element
or adds an additional callback
if the element
is already observed.
Parameters
HTMLElement
- An element which size changes we want to observe.function
- A function that will be called whenever the size of the element changes. It is called with ResizeObserverEntry
object for the given element.unobserve(element [, callback ])
Ends the observing of the given element
or just removes the provided callback
.
It will unobserve the element
if the callback
is not provided or there are no more callbacks left for this element
.
Parameters
HTMLElement
- An element to unobserve or remove callback for.function?
- A callback which will not respond to the element's size changes anymore.clear()
Unobserve all observed elements.
Here is a simplified example of {{on-resize}}
modifier using the ResizeObserverService
:
<div {{on-resize @onResize}}>
Resize me
</div>
import Modifier from 'ember-modifier';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';
export default class OnResizeModifier extends Modifier {
@service resizeObserver;
didInstall() {
this.resizeObserver.observe(this.element, this.handleResize);
}
willRemove() {
this.resizeObserver.unobserve(this.element, this.handleResize);
}
@action
handleResize(...args) {
let [callback] = this.args.positional;
callback(...args);
}
}
See the Contributing guide for details.
This project is licensed under the MIT License.
FAQs
Use a single ResizeObserver instance for better performance.
We found that ember-resize-observer-service demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.