snowfall-js-plugin - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

__tests__/validateParams.test.js

CHANGELOG.md

		@@ -5,2 +5,12 @@ # Changelog

		## [0.0.3] - 2024-01-27

		### Added

		- Adds the ability to add element attributes to the text label element of the toggle switches.

		### Changed

		- Bug fixe for issue TG-11. Resizing the window when the animation is stopped no longer generates errors.

		## [0.0.2] - 2024-01-26
		@@ -7,0 +17,0 @@

config/defaultParams.js

		@@ -35,2 +35,3 @@ export function getDefaultParams() {
		txt: "Snow on/off",
		txtElemAttributes: [],
		injectCSS: true,
		@@ -37,0 +38,0 @@ styles: {

config/validateParams.js

		@@ -20,3 +20,3 @@ import { getDefaultParams } from "./defaultParams.js";
		logWarn(
		`Warning: '${key}' does not exist in the default configuration. Using default value.`
		`Warning: '${key}' does not exist in the default configuration and will be ignored.`
		);
		@@ -36,3 +36,8 @@ continue;
		// Recursive merge for nested objects
		if (configValue instanceof Object && defaultValue instanceof Object) {
		if (
		configValue instanceof Object &&
		!Array.isArray(configValue) &&
		defaultValue instanceof Object &&
		!Array.isArray(defaultValue)
		) {
		mergedConfig[key] = deepMergeWithValidation(defaultValue, configValue);
		@@ -58,5 +63,4 @@ } else {
		);
		console.log(mergedConfig.snowfall.count);
		}
		return mergedConfig;
		}

package.json

		{
		"name": "snowfall-js-plugin",
		"description": "Snowfall-js-plugin is a JavaScript library to add some winter magic to your project. This package creates animated snowflakes on a web page using HTML5 canvas and JavaScript classes, no dependencies. You can customize the number, size, speed, color and text of the snowflakes, and enjoy the beautiful snow falling effect on your website or app. Snowfall.js-plugin is easy to use and compatible with most browsers and devices. The plugins comes with optional features: keyboard focusable and customizable switches to allow the users to toggle the animation on/off — simply add one or more containers with the proper class name; store the user preferences in local storage; enable hardware restriction to automatically disable the animation on low end devices; enable a date range: for example, only activate the animation during winter months.",
		"version": "0.0.2",
		"version": "0.0.3",
		"main": "index.js",
		@@ -6,0 +6,0 @@ "type": "module",

README.md

		@@ -85,2 +85,3 @@ # Snowfall-js-plugin
		txt: "Snow on/off",
		txtElemAttributes: [],
		injectCSS: true,
		@@ -163,2 +164,4 @@ styles: {

		#### Styles

		You can also configure the styles (colors) that will be applied to the different element components of each switch.
		@@ -250,2 +253,21 @@

		#### Text element attributes

		If you want more control over the label text that accompanies the switches, you can add element attributes. For example:

		```js
		{
		txtElemAttributes: [
		{ type: "attribute", name: "id", value: "snow-switch-text" },
		{ type: "data-attribute", name: "txt_id", value: "33" },
		];

		// -> <span id="snow-switch-text" data-txt_id="33"></span>
		}
		```

		Note the distinction between regular element attributes and data-attributes. The latter is set via the dataset property of the element.

		#### No switches

		If you only want the snow animation without the ability for the users to turn the animation on or off, you can set the option:
		@@ -252,0 +274,0 @@

snowfall.js

		@@ -150,7 +150,6 @@ /*!
		// Add an event handler to resize the canvas when the window size changes
		window.addEventListener("resize", () => {
		// Use requestAnimationFrame to optimize the resizing
		window.addEventListener("resize", this.resizeHandler);
		this.resizeHandler = () => {
		requestAnimationFrame(this.resizeCanvas.bind(this));
		});

		};
		// Create an array to store the snowflakes
		@@ -255,2 +254,5 @@ this.snowflakes = [];
		destroy = () => {
		// Remove the event listener for resize
		window.removeEventListener("resize", this.resizeHandler);
		// Remove the canvas and animation frame
		cancelAnimationFrame(this.requestAnimationFrame);
		@@ -263,5 +265,3 @@ document.getElementById("snowfall").remove();
		this.snowflakes = [];
		// Remove the event listener for resize
		window.removeEventListener("resize", this.resizeCanvas);
		};
		}

switch.js

		@@ -48,2 +48,5 @@ import { setUserSettings } from "./userSettings.js";
		textElem.textContent = params.switches.txt;
		if (params.switches.txtElemAttributes.length > 0) {
		setElemAttributes(textElem, params.switches.txtElemAttributes);
		}

		@@ -53,2 +56,12 @@ return [inputElem, label, textElem];

		function setElemAttributes(elem, attributes) {
		attributes.forEach((attr) => {
		if (attr.type === "data-attribute") {
		elem.dataset[attr.name] = attr.value;
		} else {
		elem[attr.name] = attr.value;
		}
		});
		}

		function injectCSS(params) {
		@@ -55,0 +68,0 @@ const linkElement = document.createElement("link");

New alerts