@cocreate/random-color - npm Package Compare versions

Comparing version 1.10.1 to 1.11.0

CHANGELOG.md

@@ -0,1 +1,14 @@
+# [1.11.0](https://github.com/CoCreate-app/CoCreate-random-color/compare/v1.10.1...v1.11.0) (2024-06-12)
+
+
+### Bug Fixes
+
+* bump cocreate dependencies ([ea68b73](https://github.com/CoCreate-app/CoCreate-random-color/commit/ea68b739f79674aa5e9d0faedffa295da7becac2))
+* svg icon class ([befbc77](https://github.com/CoCreate-app/CoCreate-random-color/commit/befbc77995293c70f1194f0646ccf15608937c52))
+
+
+### Features
+
+* add observer to detect new element and add random color ([4bd9e32](https://github.com/CoCreate-app/CoCreate-random-color/commit/4bd9e32ef0791ac264878bc962e7b19bcd864735))
+
 ## [1.10.1](https://github.com/CoCreate-app/CoCreate-random-color/compare/v1.10.0...v1.10.1) (2024-04-29)
@@ -2,0 +15,0 @@

package.json

 {
   "name": "@cocreate/random-color",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "description": "A simple HTML5 and pure javascript component. Easy configuration using HTML5 attributes or Javscript api and/or JavaScript API. Highly customizable and styleable.",
@@ -57,3 +57,6 @@ "keywords": [
     "webpack-log": "^3.0.1"
+  },
+  "dependencies": {
+    "@cocreate/observer": "^1.16.1"
   }
 }

src/index.js

@@ -0,22 +1,35 @@
+import observer from '@cocreate/observer';
+
 function init() {
-  let elements = document.querySelectorAll("[background-color='random']");
-  initElements(elements);
+    let elements = document.querySelectorAll("[background-color='random']");
+    initElements(elements);
 }
 
 function initElements(elements) {
-  for (let el of elements) {
-    el.style.backgroundColor = randomColor();
-  }
+    for (let el of elements) {
+        el.style.backgroundColor = randomColor();
+    }
 }
 
 export function randomColor() {
-  let defaultSaturation = 75;
-  let defaultLightness = 58;
-  let defaultAlpha = 1;
-  let hash = Math.floor(Math.random() * (360));
-  return 'hsla(' + hash + ', ' + defaultSaturation + '%, ' + defaultLightness + '%, ' + defaultAlpha + ')';
+    let defaultSaturation = 75;
+    let defaultLightness = 58;
+    let defaultAlpha = 1;
+    let hash = Math.floor(Math.random() * (360));
+    return 'hsla(' + hash + ', ' + defaultSaturation + '%, ' + defaultLightness + '%, ' + defaultAlpha + ')';
 }
 
+observer.init({
+    name: 'CoCreateRandomColor',
+    observe: ['addedNodes'],
+    target: '[background-color="random"]',
+    callback: mutation => {
+        init(mutation.target);
+    }
+});
+
+
 init();
 
+
 export default { randomColor };

No alert changes

Improved metrics

Total package byte prevSize

83190

increased by0.24%

Lines of code

153

increased by6.25%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Added@cocreate/observer@^1.16.1

• + Added@cocreate/observer@1.17.1(transitive)

• + Added@cocreate/utils@1.37.3(transitive)

• + Addedcss-selector-parser@1.4.1(transitive)