🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

@hydroperx/colorobserver

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@hydroperx/colorobserver - npm Package Compare versions

Comparing version
1.0.2
 to
1.0.3
+14
dist/index.d.ts
import Color from "color";
/**
* Detects character color used in an element.
*
* Make sure to use this class under an `useEffect` hook (using `[]` (empty) dependencies)
* and on cleanup, invoke `ColorObserver#cleanup()`.
*/
export declare class ColorObserver {
private _trigger_callback;
private m_animation_frame;
private m_animation_frame_fn;
constructor(element: HTMLElement | null, callback: (color: Color) => void);
cleanup(): void;
}
+31
dist/index.js
import Color from "color";
/**
* Detects character color used in an element.
*
* Make sure to use this class under an `useEffect` hook (using `[]` (empty) dependencies)
* and on cleanup, invoke `ColorObserver#cleanup()`.
*/
export class ColorObserver {
constructor(element, callback) {
this.m_animation_frame = -1;
const browser = typeof window == "object";
this._trigger_callback = () => {
if (!element)
return;
let color = window.getComputedStyle(element).getPropertyValue("color");
color = color ? color : "#fff";
callback(Color(color));
};
this.m_animation_frame_fn = () => {
this._trigger_callback();
this.m_animation_frame = requestAnimationFrame(this.m_animation_frame_fn);
};
if (browser && element)
this.m_animation_frame = requestAnimationFrame(this.m_animation_frame_fn);
this._trigger_callback();
}
cleanup() {
if (this.m_animation_frame !== -1)
window.cancelAnimationFrame(this.m_animation_frame);
}
}
+12
-3
package.json
{
"name": "@hydroperx/colorobserver",
"version": "1.0.2",
"version": "1.0.3",
"type": "module",
"scripts": {},
"main": "src/index.ts",
"files": ["/dist"],
"scripts": {
"build": "tsc",
"prepublishOnly": "npm run build"
},
"exports": {
".": {
"default": "./dist/index.js",
"types": "./dist/index.d.ts"
}
},
"dependencies": {

@@ -8,0 +17,0 @@ "color": "^4.2.3",

-94
src/index.recover.txt
import Color from "color";
const heardEvents = ["focusin", "focusout", "mousedown", "click", "mouseover", "mouseup", "mouseout"];
/**
* Detects character color used in an element.
*
* Make sure to use this class under an `useEffect` hook
* and on cleanup, invoke `ColorObserver#cleanup()`.
*/
export class ColorObserver
{
private _parents: HTMLElement[];
private _triggerCallback: Function;
private _contextMenu: Function;
private _mouseMoveFn: Function;
private _mouseOutFn: Function;
constructor(element: HTMLElement | null, callback: (color: Color) => void)
{
const browser = typeof window == "object";
this._triggerCallback = () => {
if (!element || !browser)
{
return;
}
const color = window.getComputedStyle(element).getPropertyValue("color");
callback(Color(color));
}
this._contextMenu = (e: Event) => {
this._triggerCallback();
const el = e.currentTarget as HTMLElement;
el.removeEventListener("mousemove", this._mouseMoveFn as any);
el.removeEventListener("mouseout", this._mouseOutFn as any);
el.addEventListener("mousemove", this._mouseMoveFn as any);
el.addEventListener("mouseout", this._mouseOutFn as any);
};
this._mouseMoveFn = () => {
this._triggerCallback();
};
this._mouseOutFn = (e: Event) => {
this._triggerCallback();
const el = e.currentTarget as HTMLElement;
el.removeEventListener("mousemove", this._mouseMoveFn as any);
el.removeEventListener("mouseout", this._mouseOutFn as any);
};
this._parents = [];
if (browser)
{
let p = element;
while (p !== null)
{
if (p === document.body)
{
break;
}
for (let eventType of heardEvents)
{
p.addEventListener(eventType, this._triggerCallback as any);
}
p.addEventListener("contextmenu", this._contextMenu as any);
this._parents.push(p);
p = p.parentElement;
}
}
this._triggerCallback();
}
cleanup()
{
for (let p of this._parents)
{
for (let eventType of heardEvents)
{
p.removeEventListener(eventType, this._triggerCallback as any);
}
p.removeEventListener("mousemove", this._mouseMoveFn as any);
p.removeEventListener("mouseout", this._mouseOutFn as any);
p.removeEventListener("contextmenu", this._contextMenu as any);
}
}
}
-42
src/index.ts
import Color from "color";
/**
* Detects character color used in an element.
*
* Make sure to use this class under an `useEffect` hook (using `[]` (empty) dependencies)
* and on cleanup, invoke `ColorObserver#cleanup()`.
*/
export class ColorObserver
{
private _trigger_callback: Function;
private m_animation_frame: number = -1;
private m_animation_frame_fn: Function;
constructor(element: HTMLElement | null, callback: (color: Color) => void)
{
const browser = typeof window == "object";
this._trigger_callback = () => {
if (!element) return;
let color = window.getComputedStyle(element).getPropertyValue("color");
color = color ? color : "#fff";
callback(Color(color));
};
this.m_animation_frame_fn = () => {
this._trigger_callback();
this.m_animation_frame = requestAnimationFrame(this.m_animation_frame_fn as any);
};
if (browser && element)
this.m_animation_frame = requestAnimationFrame(this.m_animation_frame_fn as any);
this._trigger_callback();
}
cleanup()
{
if (this.m_animation_frame !== -1)
window.cancelAnimationFrame(this.m_animation_frame);
}
}
-23
tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}