svelte-fast-marquee - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

dist/index.js

@@ -68,2 +68,20 @@ (function (global, factory) {
     }
+    function exclude_internal_props(props) {
+        const result = {};
+        for (const k in props)
+            if (k[0] !== '$')
+                result[k] = props[k];
+        return result;
+    }
+    function compute_rest_props(props, keys) {
+        const rest = {};
+        keys = new Set(keys);
+        for (const k in props)
+            if (!keys.has(k) && k[0] !== '$')
+                rest[k] = props[k];
+        return rest;
+    }
+    function null_to_empty(value) {
+        return value == null ? '' : value;
+    }
     function append(target, node) {
@@ -397,16 +415,38 @@ target.appendChild(node);
     function add_css(target) {
-    	append_styles(target, "svelte-xy1rj0", ".marquee-container.svelte-xy1rj0.svelte-xy1rj0{display:flex;width:100%;overflow-x:hidden;flex-direction:row;position:relative}.marquee-container.svelte-xy1rj0:hover .marquee.svelte-xy1rj0{animation-play-state:var(--pause-on-hover)}.marquee-container.svelte-xy1rj0:active .marquee.svelte-xy1rj0{animation-play-state:var(--pause-on-click)}.marquee.svelte-xy1rj0.svelte-xy1rj0{flex:0 0 auto;min-width:100%;z-index:1;display:flex;flex-direction:row;align-items:center;animation:svelte-xy1rj0-scroll var(--duration) linear 0s infinite;animation-play-state:var(--play);animation-direction:normal;animation-direction:var(--direction)}@keyframes svelte-xy1rj0-scroll{0%{transform:translateX(0%)}100%{transform:translateX(-100%)}}");
+    	append_styles(target, "svelte-nbo9dd", ".marquee-container.svelte-nbo9dd.svelte-nbo9dd{display:flex;width:100%;overflow-x:hidden;flex-direction:row;position:relative}.marquee-container.svelte-nbo9dd:hover .marquee.svelte-nbo9dd{animation-play-state:var(--pause-on-hover)}.marquee-container.svelte-nbo9dd:active .marquee.svelte-nbo9dd{animation-play-state:var(--pause-on-click)}.marquee.svelte-nbo9dd.svelte-nbo9dd{flex:0 0 auto;min-width:100%;z-index:1;display:flex;flex-direction:row;align-items:center;animation:svelte-nbo9dd-scroll var(--duration) linear infinite;animation-play-state:var(--play);animation-direction:var(--direction)}@keyframes svelte-nbo9dd-scroll{0%{transform:translateX(0%)}100%{transform:translateX(-100%)}}.initial-child-container.svelte-nbo9dd.svelte-nbo9dd{flex:0 0 auto;display:flex;min-width:auto;flex-direction:row}.gradient.svelte-nbo9dd.svelte-nbo9dd::after,.gradient.svelte-nbo9dd.svelte-nbo9dd::before{background:linear-gradient(to right, white, transparent);content:\"\";height:100%;position:absolute;width:10%;z-index:2}.gradient.svelte-nbo9dd.svelte-nbo9dd::before{left:0;top:0}.gradient.svelte-nbo9dd.svelte-nbo9dd::after{right:0;top:0;transform:rotateZ(180deg)}");
     }
 
+    // (61:1) {#if gradient}
+    function create_if_block(ctx) {
+    	let div;
+
+    	return {
+    		c() {
+    			div = element("div");
+    			attr(div, "class", "gradient svelte-nbo9dd");
+    		},
+    		m(target, anchor) {
+    			insert(target, div, anchor);
+    		},
+    		d(detaching) {
+    			if (detaching) detach(div);
+    		}
+    	};
+    }
+
     function create_fragment(ctx) {
     	let div2;
+    	let t0;
     	let div0;
-    	let t;
+    	let div0_resize_listener;
+    	let t1;
     	let div1;
+    	let div2_class_value;
     	let div2_resize_listener;
     	let current;
-    	const default_slot_template = /*#slots*/ ctx[10].default;
-    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[9], null);
-    	const default_slot_template_1 = /*#slots*/ ctx[10].default;
-    	const default_slot_1 = create_slot(default_slot_template_1, ctx, /*$$scope*/ ctx[9], null);
+    	let if_block = /*gradient*/ ctx[0] && create_if_block();
+    	const default_slot_template = /*#slots*/ ctx[13].default;
+    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[12], null);
+    	const default_slot_template_1 = /*#slots*/ ctx[13].default;
+    	const default_slot_1 = create_slot(default_slot_template_1, ctx, /*$$scope*/ ctx[12], null);
 
@@ -416,17 +456,22 @@ return {
     			div2 = element("div");
+    			if (if_block) if_block.c();
+    			t0 = space();
     			div0 = element("div");
     			if (default_slot) default_slot.c();
-    			t = space();
+    			t1 = space();
     			div1 = element("div");
     			if (default_slot_1) default_slot_1.c();
-    			attr(div0, "class", "marquee svelte-xy1rj0");
-    			attr(div0, "style", /*_marqueeStyle*/ ctx[1]);
-    			attr(div1, "class", "marquee svelte-xy1rj0");
-    			attr(div1, "style", /*_marqueeStyle*/ ctx[1]);
-    			attr(div2, "class", "marquee-container svelte-xy1rj0");
-    			attr(div2, "style", /*_style*/ ctx[2]);
-    			add_render_callback(() => /*div2_elementresize_handler*/ ctx[11].call(div2));
+    			attr(div0, "class", "marquee svelte-nbo9dd");
+    			attr(div0, "style", /*_marqueeStyle*/ ctx[3]);
+    			add_render_callback(() => /*div0_elementresize_handler*/ ctx[14].call(div0));
+    			attr(div1, "class", "marquee svelte-nbo9dd");
+    			attr(div1, "style", /*_marqueeStyle*/ ctx[3]);
+    			attr(div2, "class", div2_class_value = "" + (null_to_empty(`marquee-container ${/*$$restProps*/ ctx[5].class ?? ""}`) + " svelte-nbo9dd"));
+    			attr(div2, "style", /*_style*/ ctx[4]);
+    			add_render_callback(() => /*div2_elementresize_handler*/ ctx[15].call(div2));
     		},
     		m(target, anchor) {
     			insert(target, div2, anchor);
+    			if (if_block) if_block.m(div2, null);
+    			append(div2, t0);
     			append(div2, div0);
@@ -438,3 +483,4 @@
 
-    			append(div2, t);
+    			div0_resize_listener = add_resize_listener(div0, /*div0_elementresize_handler*/ ctx[14].bind(div0));
+    			append(div2, t1);
     			append(div2, div1);
@@ -446,29 +492,44 @@
 
-    			div2_resize_listener = add_resize_listener(div2, /*div2_elementresize_handler*/ ctx[11].bind(div2));
+    			div2_resize_listener = add_resize_listener(div2, /*div2_elementresize_handler*/ ctx[15].bind(div2));
     			current = true;
     		},
     		p(ctx, [dirty]) {
+    			if (/*gradient*/ ctx[0]) {
+    				if (if_block) ; else {
+    					if_block = create_if_block();
+    					if_block.c();
+    					if_block.m(div2, t0);
+    				}
+    			} else if (if_block) {
+    				if_block.d(1);
+    				if_block = null;
+    			}
+
     			if (default_slot) {
-    				if (default_slot.p && (!current || dirty & /*$$scope*/ 512)) {
-    					update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[9], !current ? -1 : dirty, null, null);
+    				if (default_slot.p && (!current || dirty & /*$$scope*/ 4096)) {
+    					update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[12], !current ? -1 : dirty, null, null);
     				}
     			}
 
-    			if (!current || dirty & /*_marqueeStyle*/ 2) {
-    				attr(div0, "style", /*_marqueeStyle*/ ctx[1]);
+    			if (!current || dirty & /*_marqueeStyle*/ 8) {
+    				attr(div0, "style", /*_marqueeStyle*/ ctx[3]);
     			}
 
     			if (default_slot_1) {
-    				if (default_slot_1.p && (!current || dirty & /*$$scope*/ 512)) {
-    					update_slot(default_slot_1, default_slot_template_1, ctx, /*$$scope*/ ctx[9], !current ? -1 : dirty, null, null);
+    				if (default_slot_1.p && (!current || dirty & /*$$scope*/ 4096)) {
+    					update_slot(default_slot_1, default_slot_template_1, ctx, /*$$scope*/ ctx[12], !current ? -1 : dirty, null, null);
     				}
     			}
 
-    			if (!current || dirty & /*_marqueeStyle*/ 2) {
-    				attr(div1, "style", /*_marqueeStyle*/ ctx[1]);
+    			if (!current || dirty & /*_marqueeStyle*/ 8) {
+    				attr(div1, "style", /*_marqueeStyle*/ ctx[3]);
     			}
 
-    			if (!current || dirty & /*_style*/ 4) {
-    				attr(div2, "style", /*_style*/ ctx[2]);
+    			if (!current || dirty & /*$$restProps*/ 32 && div2_class_value !== (div2_class_value = "" + (null_to_empty(`marquee-container ${/*$$restProps*/ ctx[5].class ?? ""}`) + " svelte-nbo9dd"))) {
+    				attr(div2, "class", div2_class_value);
     			}
+
+    			if (!current || dirty & /*_style*/ 16) {
+    				attr(div2, "style", /*_style*/ ctx[4]);
+    			}
     		},
@@ -488,3 +549,5 @@ i(local) {
     			if (detaching) detach(div2);
+    			if (if_block) if_block.d();
     			if (default_slot) default_slot.d(detaching);
+    			div0_resize_listener();
     			if (default_slot_1) default_slot_1.d(detaching);
@@ -500,40 +563,54 @@ div2_resize_listener();
     	let _marqueeStyle;
+    	const omit_props_names = ["pauseOnHover","pauseOnClick","direction","speed","play","gradient"];
+    	let $$restProps = compute_rest_props($$props, omit_props_names);
     	let { $$slots: slots = {}, $$scope } = $$props;
     	let { pauseOnHover = false } = $$props;
     	let { pauseOnClick = false } = $$props;
-    	let { direction = 'left' } = $$props;
+    	let { direction = "left" } = $$props;
     	let { speed = 100 } = $$props;
     	let { play = true } = $$props;
+    	let { gradient = false } = $$props;
     	let containerWidth;
+    	let marqueeWidth;
 
+    	function div0_elementresize_handler() {
+    		marqueeWidth = this.clientWidth;
+    		$$invalidate(2, marqueeWidth);
+    	}
+
     	function div2_elementresize_handler() {
     		containerWidth = this.clientWidth;
-    		$$invalidate(0, containerWidth);
+    		$$invalidate(1, containerWidth);
     	}
 
-    	$$self.$$set = $$props => {
-    		if ('pauseOnHover' in $$props) $$invalidate(3, pauseOnHover = $$props.pauseOnHover);
-    		if ('pauseOnClick' in $$props) $$invalidate(4, pauseOnClick = $$props.pauseOnClick);
-    		if ('direction' in $$props) $$invalidate(5, direction = $$props.direction);
-    		if ('speed' in $$props) $$invalidate(6, speed = $$props.speed);
-    		if ('play' in $$props) $$invalidate(7, play = $$props.play);
-    		if ('$$scope' in $$props) $$invalidate(9, $$scope = $$props.$$scope);
+    	$$self.$$set = $$new_props => {
+    		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
+    		$$invalidate(5, $$restProps = compute_rest_props($$props, omit_props_names));
+    		if ('pauseOnHover' in $$new_props) $$invalidate(6, pauseOnHover = $$new_props.pauseOnHover);
+    		if ('pauseOnClick' in $$new_props) $$invalidate(7, pauseOnClick = $$new_props.pauseOnClick);
+    		if ('direction' in $$new_props) $$invalidate(8, direction = $$new_props.direction);
+    		if ('speed' in $$new_props) $$invalidate(9, speed = $$new_props.speed);
+    		if ('play' in $$new_props) $$invalidate(10, play = $$new_props.play);
+    		if ('gradient' in $$new_props) $$invalidate(0, gradient = $$new_props.gradient);
+    		if ('$$scope' in $$new_props) $$invalidate(12, $$scope = $$new_props.$$scope);
     	};
 
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*containerWidth, speed*/ 65) {
-    			$$invalidate(8, duration = containerWidth / speed);
+    		if ($$self.$$.dirty & /*marqueeWidth, containerWidth, speed*/ 518) {
+    			$$invalidate(11, duration = marqueeWidth < containerWidth
+    			? containerWidth / speed
+    			: marqueeWidth / speed);
     		}
 
-    		if ($$self.$$.dirty & /*pauseOnHover, pauseOnClick*/ 24) {
-    			$$invalidate(2, _style = `
-		--pause-on-hover: ${pauseOnHover ? 'paused' : 'running'};
-		--pause-on-click: ${pauseOnClick ? 'paused' : 'running'};
+    		if ($$self.$$.dirty & /*pauseOnHover, pauseOnClick*/ 192) {
+    			$$invalidate(4, _style = `
+		--pause-on-hover: ${pauseOnHover ? "paused" : "running"};
+		--pause-on-click: ${pauseOnClick ? "paused" : "running"};
 	`);
     		}
 
-    		if ($$self.$$.dirty & /*play, direction, duration*/ 416) {
-    			$$invalidate(1, _marqueeStyle = `
-		--play: ${play ? 'running' : 'paused'};
-		--direction: ${direction === 'left' ? 'normal' : 'reverse'};
+    		if ($$self.$$.dirty & /*play, direction, duration*/ 3328) {
+    			$$invalidate(3, _marqueeStyle = `
+		--play: ${play ? "running" : "paused"};
+		--direction: ${direction === "left" ? "normal" : "reverse"};
 		--duration: ${duration}s;
@@ -545,5 +622,8 @@ `);
     	return [
+    		gradient,
     		containerWidth,
+    		marqueeWidth,
     		_marqueeStyle,
     		_style,
+    		$$restProps,
     		pauseOnHover,
@@ -557,2 +637,3 @@ pauseOnClick,
     		slots,
+    		div0_elementresize_handler,
     		div2_elementresize_handler
@@ -573,7 +654,8 @@ ];
     			{
-    				pauseOnHover: 3,
-    				pauseOnClick: 4,
-    				direction: 5,
-    				speed: 6,
-    				play: 7
+    				pauseOnHover: 6,
+    				pauseOnClick: 7,
+    				direction: 8,
+    				speed: 9,
+    				play: 10,
+    				gradient: 0
     			},
@@ -580,0 +662,0 @@ add_css

package.json

 {
 	"name": "svelte-fast-marquee",
-	"version": "0.4.1",
+	"version": "0.5.0",
 	"description": "A Marquee component for Svelte inspired by react-fast-marquee.",
@@ -13,4 +13,6 @@ "main": "dist/index.js",
 		"build:watch": "rollup -c -w",
+		"test": "jest",
+		"test:watch": "npm run test -- --watch",
 		"svelte-check": "svelte-check",
-		"prepublishOnly": "npm run svelte-check && npm run build"
+		"prepublishOnly": "npm run svelte-check && npm run test && npm run build"
 	},
@@ -43,3 +45,9 @@ "files": [
 	"devDependencies": {
+		"@babel/core": "^7.14.8",
+		"@babel/preset-env": "^7.14.8",
 		"@rollup/plugin-node-resolve": "^13.0.4",
+		"@testing-library/jest-dom": "^5.14.1",
+		"@testing-library/svelte": "^3.0.3",
+		"babel-jest": "^27.0.6",
+		"jest": "^27.0.6",
 		"rollup": "^2.53.3",
@@ -49,4 +57,22 @@ "rollup-plugin-svelte": "^7.1.0",
 		"svelte": "^3.40.2",
-		"svelte-check": "^2.2.3"
+		"svelte-check": "^2.2.3",
+		"svelte-jester": "^1.7.0"
+	},
+	"jest": {
+		"transform": {
+			"^.+\\.js$": "babel-jest",
+			"^.+\\.svelte$": "svelte-jester"
+		},
+		"testMatch": [
+			"**/?(*.)spec.js?(x)"
+		],
+		"testEnvironment": "jsdom",
+		"moduleFileExtensions": [
+			"js",
+			"svelte"
+		],
+		"setupFilesAfterEnv": [
+			"@testing-library/jest-dom/extend-expect"
+		]
 	}
 }

README.md

@@ -66,1 +66,2 @@ # Svelte Fast Marquee
 | `direction`     | `"left"` or `"right"`       | `"left"`          | The direction the marquee is sliding                     |
+| `gradient`      | `boolean`                   | `false`           | Whether to show a gradient on right and left             |

types/Marquee.d.ts

@@ -19,3 +19,3 @@ /// <reference types="svelte" />
    * Animation direction
-   * @default 'left'
+   * @default "left"
    */
@@ -35,2 +35,8 @@ direction?: "left" | "right";
   play?: boolean;
+
+  /**
+   * Show lateral gradient
+   * @default false
+   */
+  gradient?: boolean;
 }
@@ -37,0 +43,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52721

increased by17.38%

Lines of code

1299

increased by14.35%

Number of lines in readme file

67

increased by1.52%

Worsened metrics

Dev dependency count

13

increased by116.67%

No dependency changes