@realsee/dnalogel 2.0.2 → 2.1.0-alpha.10

package/libs/PanoTagPlugin/Components/Tag/MarketingTag.js

@@ -0,0 +1,614 @@
+/* generated by Svelte v3.50.1 */
+import {
+	SvelteComponent,
+	append,
+	append_styles,
+	attr,
+	create_component,
+	destroy_component,
+	destroy_each,
+	detach,
+	element,
+	empty,
+	init,
+	insert,
+	mount_component,
+	safe_not_equal,
+	set_data,
+	set_style,
+	space,
+	src_url_equal,
+	text,
+	toggle_class,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+import Shadow from '../Common/Shadow';
+
+function add_css(target) {
+	append_styles(target, "svelte-1dqrka8", ".svelte-1dqrka8.svelte-1dqrka8{box-sizing:border-box}.marketing.svelte-1dqrka8.svelte-1dqrka8{transform:translateY(-100%)}.content.svelte-1dqrka8 .headerImage.svelte-1dqrka8{position:absolute;width:100%;top:0.25rem;transform:translateY(-100%);border-top-left-radius:0.25rem;border-top-right-radius:0.25rem}.line.svelte-1dqrka8.svelte-1dqrka8{position:absolute;height:2.0625rem;width:0.0625rem;left:50%;transform:translateX(-50%);background-color:white;bottom:0;transform-origin:bottom;transition:all 500ms}.content.svelte-1dqrka8.svelte-1dqrka8{background-color:white;position:relative;display:flex;flex-direction:column;min-width:11.125rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content;border-radius:0.25rem;top:-1.875rem;left:-1rem;padding:0.5rem 0rem 0.5625rem;transition:all 500ms}.title.svelte-1dqrka8.svelte-1dqrka8{position:absolute;background-color:white;border-radius:0.25rem;width:100%;top:0.5rem;padding-left:0.75rem;padding-right:0.75rem}.title.svelte-1dqrka8 .text.svelte-1dqrka8{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.75rem;font-weight:bold;line-height:1.125rem;color:#000}.footer.svelte-1dqrka8.svelte-1dqrka8{position:relative;padding-left:0.75rem;padding-right:0.75rem;width:100%;height:1.375rem;display:flex;align-items:center}.footer.svelte-1dqrka8 .goto-button.svelte-1dqrka8{flex-shrink:0;white-space:nowrap;background-image:linear-gradient(to right, rgba(87, 144, 253, 1) 0, rgba(42, 114, 254, 1) 100%);color:#fff;font-size:0.625rem;border-radius:0.875rem;font-weight:bold;padding-left:0.5rem;padding-right:0.5rem;height:1.25rem;margin-left:auto;display:flex;align-items:center}.footer.svelte-1dqrka8 .goto-icon.svelte-1dqrka8::after{content:'';display:inline-block;width:0.75rem;height:0.75rem;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAeFBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////GqOSsAAAAJ3RSTlMAFNO2pYt4bErz8uP6ysawgVtBPDcR5C4s2L6ZmJBzZGJXUyEeDws/0G2zAAAAkklEQVQ4y+3TRw6DMBAF0OAeJ3QCpCe0uf8NwRILLBYfiS1/aT3JoymnI+sERZ5VCH0iVto3QDfBLmeSSMUTogRV9bBEpJAKaYpGijn13aTSLeraeG9D0NZFZv4/rRL5FDHnITlllqjv6tykWsmX4JHr05y7j6oFKq2P8He48B0tAM0EY0EDxquClw6vLz6EI35GmwwSZpe+WOgAAAAASUVORK5CYII=);background-size:100% auto;background-repeat:no-repeat}.price.svelte-1dqrka8.svelte-1dqrka8{flex-shrink:0;margin-right:0.75rem;white-space:nowrap;color:#ff6600;display:flex;align-items:baseline}.price.svelte-1dqrka8 .value.svelte-1dqrka8{position:relative;top:0.0625rem;font-size:1.125rem;line-height:1.375rem;font-family:TG-TYPE, PingFangSC, Segoe UI, Rototo, sans-serif;letter-spacing:0rem}.price.svelte-1dqrka8 .unit.svelte-1dqrka8{padding-left:0.125rem;font-size:0.625rem}.tag.svelte-1dqrka8.svelte-1dqrka8{position:relative;background-color:white;display:flex;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding-left:0.75rem;padding-right:0.75rem;min-height:1.75rem}.tag.svelte-1dqrka8 .base-tag.svelte-1dqrka8{height:1rem;margin-top:1.375rem;margin-bottom:0.5rem;margin-right:0.25rem;font-size:0.625rem;line-height:0.875rem;padding:0.0625rem 0.25rem;border-radius:0.125rem;overflow:hidden}.tag.svelte-1dqrka8 .primary-tag.svelte-1dqrka8{background:#e5eefe;color:#0055ff}.tag.svelte-1dqrka8 .secondary-tag.svelte-1dqrka8{background:rgba(255, 102, 0, 0.08);color:rgba(255, 102, 0, 1)}.unfolded.svelte-1dqrka8 .line.svelte-1dqrka8{transform:translateX(-50%) scale(1, 1)}.folded.svelte-1dqrka8 .line.svelte-1dqrka8{transform:translateX(-50%) scale(1, 0);transition-timing-function:ease-in}.unfolded.svelte-1dqrka8 .content.svelte-1dqrka8{opacity:1}.folded.svelte-1dqrka8 .content.svelte-1dqrka8{opacity:0;transform:translateY(0.425rem);transition-timing-function:ease-in}");
+}
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[0] = list[i];
+	return child_ctx;
+}
+
+function get_each_context_1(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[0] = list[i];
+	return child_ctx;
+}
+
+// (28:8) {#if tag}
+function create_if_block_4(ctx) {
+	let div;
+	let t_value = /*tag*/ ctx[0] + "";
+	let t;
+
+	return {
+		c() {
+			div = element("div");
+			t = text(t_value);
+			attr(div, "class", "base-tag primary-tag svelte-1dqrka8");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*data*/ 4 && t_value !== (t_value = /*tag*/ ctx[0] + "")) set_data(t, t_value);
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (27:6) {#each data.brandTags || [] as tag}
+function create_each_block_1(ctx) {
+	let if_block_anchor;
+	let if_block = /*tag*/ ctx[0] && create_if_block_4(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+		},
+		p(ctx, dirty) {
+			if (/*tag*/ ctx[0]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block_4(ctx);
+					if_block.c();
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+// (33:8) {#if tag}
+function create_if_block_3(ctx) {
+	let div;
+	let t_value = /*tag*/ ctx[0] + "";
+	let t;
+
+	return {
+		c() {
+			div = element("div");
+			t = text(t_value);
+			attr(div, "class", "base-tag secondary-tag svelte-1dqrka8");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*data*/ 4 && t_value !== (t_value = /*tag*/ ctx[0] + "")) set_data(t, t_value);
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (32:6) {#each data.tags || [] as tag}
+function create_each_block(ctx) {
+	let if_block_anchor;
+	let if_block = /*tag*/ ctx[0] && create_if_block_3(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+		},
+		p(ctx, dirty) {
+			if (/*tag*/ ctx[0]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block_3(ctx);
+					if_block.c();
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+// (45:6) {#if data.price?.value !== undefined && data.price?.value !== null}
+function create_if_block_1(ctx) {
+	let div;
+	let span;
+	let t0_value = /*data*/ ctx[2].price.value + "";
+	let t0;
+	let t1;
+	let if_block = /*data*/ ctx[2].price.unit && create_if_block_2(ctx);
+
+	return {
+		c() {
+			div = element("div");
+			span = element("span");
+			t0 = text(t0_value);
+			t1 = space();
+			if (if_block) if_block.c();
+			attr(span, "class", "value svelte-1dqrka8");
+			attr(div, "class", "price svelte-1dqrka8");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, span);
+			append(span, t0);
+			append(div, t1);
+			if (if_block) if_block.m(div, null);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*data*/ 4 && t0_value !== (t0_value = /*data*/ ctx[2].price.value + "")) set_data(t0, t0_value);
+
+			if (/*data*/ ctx[2].price.unit) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block_2(ctx);
+					if_block.c();
+					if_block.m(div, null);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			if (if_block) if_block.d();
+		}
+	};
+}
+
+// (50:10) {#if data.price.unit}
+function create_if_block_2(ctx) {
+	let span;
+	let t_value = /*data*/ ctx[2].price.unit + "";
+	let t;
+
+	return {
+		c() {
+			span = element("span");
+			t = text(t_value);
+			attr(span, "class", "unit svelte-1dqrka8");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*data*/ 4 && t_value !== (t_value = /*data*/ ctx[2].price.unit + "")) set_data(t, t_value);
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+// (57:6) {#if data.highlightText}
+function create_if_block(ctx) {
+	let div;
+	let t_value = /*data*/ ctx[2].highlightText + "";
+	let t;
+
+	return {
+		c() {
+			div = element("div");
+			t = text(t_value);
+			attr(div, "class", "goto-button goto-icon svelte-1dqrka8");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*data*/ 4 && t_value !== (t_value = /*data*/ ctx[2].highlightText + "")) set_data(t, t_value);
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div6;
+	let shadow;
+	let t0;
+	let div0;
+	let t1;
+	let div5;
+	let img;
+	let img_src_value;
+	let t2;
+	let div1;
+	let t3;
+	let t4;
+	let div3;
+	let div2;
+	let t5_value = /*data*/ ctx[2].title + "";
+	let t5;
+	let t6;
+	let div4;
+	let t7;
+	let current;
+
+	shadow = new Shadow({
+			props: {
+				visible: /*unfolded*/ ctx[1],
+				outDelay: 500,
+				left: 61,
+				bottom: 87,
+				blurRadius: 150,
+				spreadRadius: 75
+			}
+		});
+
+	let each_value_1 = /*data*/ ctx[2].brandTags || [];
+	let each_blocks_1 = [];
+
+	for (let i = 0; i < each_value_1.length; i += 1) {
+		each_blocks_1[i] = create_each_block_1(get_each_context_1(ctx, each_value_1, i));
+	}
+
+	let each_value = /*data*/ ctx[2].tags || [];
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
+
+	let if_block0 = /*data*/ ctx[2].price?.value !== undefined && /*data*/ ctx[2].price?.value !== null && create_if_block_1(ctx);
+	let if_block1 = /*data*/ ctx[2].highlightText && create_if_block(ctx);
+
+	return {
+		c() {
+			div6 = element("div");
+			create_component(shadow.$$.fragment);
+			t0 = space();
+			div0 = element("div");
+			t1 = space();
+			div5 = element("div");
+			img = element("img");
+			t2 = space();
+			div1 = element("div");
+
+			for (let i = 0; i < each_blocks_1.length; i += 1) {
+				each_blocks_1[i].c();
+			}
+
+			t3 = space();
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			t4 = space();
+			div3 = element("div");
+			div2 = element("div");
+			t5 = text(t5_value);
+			t6 = space();
+			div4 = element("div");
+			if (if_block0) if_block0.c();
+			t7 = space();
+			if (if_block1) if_block1.c();
+			attr(div0, "class", "line svelte-1dqrka8");
+
+			set_style(
+				div0,
+				"transition-delay",
+				/*unfolded*/ ctx[1]
+				? bigSmallDotChange + 'ms'
+				: tagContentShowWhenLineStartGrow + tagContentShow - lineGrow - 40 + 'ms',
+				false
+			);
+
+			attr(img, "class", "headerImage svelte-1dqrka8");
+			if (!src_url_equal(img.src, img_src_value = /*data*/ ctx[2].headerPictureUrl)) attr(img, "src", img_src_value);
+			attr(img, "alt", "");
+			attr(div1, "class", "tag svelte-1dqrka8");
+			attr(div2, "class", "text svelte-1dqrka8");
+			attr(div3, "class", "title svelte-1dqrka8");
+			attr(div4, "class", "footer svelte-1dqrka8");
+
+			set_style(
+				div4,
+				"height",
+				/*data*/ ctx[2].price?.value !== undefined && /*data*/ ctx[2].price?.value !== null && /*data*/ ctx[2].highlightText
+				? undefined
+				: '1rem',
+				false
+			);
+
+			attr(div5, "class", "content svelte-1dqrka8");
+
+			set_style(
+				div5,
+				"transition-delay",
+				/*unfolded*/ ctx[1]
+				? bigSmallDotChange + tagContentShowWhenLineStartGrow + 'ms'
+				: '0ms',
+				false
+			);
+
+			attr(div6, "class", "marketing svelte-1dqrka8");
+			toggle_class(div6, "unfolded", /*unfolded*/ ctx[1]);
+			toggle_class(div6, "folded", /*folded*/ ctx[3]);
+		},
+		m(target, anchor) {
+			insert(target, div6, anchor);
+			mount_component(shadow, div6, null);
+			append(div6, t0);
+			append(div6, div0);
+			append(div6, t1);
+			append(div6, div5);
+			append(div5, img);
+			append(div5, t2);
+			append(div5, div1);
+
+			for (let i = 0; i < each_blocks_1.length; i += 1) {
+				each_blocks_1[i].m(div1, null);
+			}
+
+			append(div1, t3);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div1, null);
+			}
+
+			append(div5, t4);
+			append(div5, div3);
+			append(div3, div2);
+			append(div2, t5);
+			append(div5, t6);
+			append(div5, div4);
+			if (if_block0) if_block0.m(div4, null);
+			append(div4, t7);
+			if (if_block1) if_block1.m(div4, null);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			const shadow_changes = {};
+			if (dirty & /*unfolded*/ 2) shadow_changes.visible = /*unfolded*/ ctx[1];
+			shadow.$set(shadow_changes);
+
+			if (dirty & /*unfolded*/ 2) {
+				set_style(
+					div0,
+					"transition-delay",
+					/*unfolded*/ ctx[1]
+					? bigSmallDotChange + 'ms'
+					: tagContentShowWhenLineStartGrow + tagContentShow - lineGrow - 40 + 'ms',
+					false
+				);
+			}
+
+			if (!current || dirty & /*data*/ 4 && !src_url_equal(img.src, img_src_value = /*data*/ ctx[2].headerPictureUrl)) {
+				attr(img, "src", img_src_value);
+			}
+
+			if (dirty & /*data*/ 4) {
+				each_value_1 = /*data*/ ctx[2].brandTags || [];
+				let i;
+
+				for (i = 0; i < each_value_1.length; i += 1) {
+					const child_ctx = get_each_context_1(ctx, each_value_1, i);
+
+					if (each_blocks_1[i]) {
+						each_blocks_1[i].p(child_ctx, dirty);
+					} else {
+						each_blocks_1[i] = create_each_block_1(child_ctx);
+						each_blocks_1[i].c();
+						each_blocks_1[i].m(div1, t3);
+					}
+				}
+
+				for (; i < each_blocks_1.length; i += 1) {
+					each_blocks_1[i].d(1);
+				}
+
+				each_blocks_1.length = each_value_1.length;
+			}
+
+			if (dirty & /*data*/ 4) {
+				each_value = /*data*/ ctx[2].tags || [];
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(div1, null);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
+			}
+
+			if ((!current || dirty & /*data*/ 4) && t5_value !== (t5_value = /*data*/ ctx[2].title + "")) set_data(t5, t5_value);
+
+			if (/*data*/ ctx[2].price?.value !== undefined && /*data*/ ctx[2].price?.value !== null) {
+				if (if_block0) {
+					if_block0.p(ctx, dirty);
+				} else {
+					if_block0 = create_if_block_1(ctx);
+					if_block0.c();
+					if_block0.m(div4, t7);
+				}
+			} else if (if_block0) {
+				if_block0.d(1);
+				if_block0 = null;
+			}
+
+			if (/*data*/ ctx[2].highlightText) {
+				if (if_block1) {
+					if_block1.p(ctx, dirty);
+				} else {
+					if_block1 = create_if_block(ctx);
+					if_block1.c();
+					if_block1.m(div4, null);
+				}
+			} else if (if_block1) {
+				if_block1.d(1);
+				if_block1 = null;
+			}
+
+			if (dirty & /*data*/ 4) {
+				set_style(
+					div4,
+					"height",
+					/*data*/ ctx[2].price?.value !== undefined && /*data*/ ctx[2].price?.value !== null && /*data*/ ctx[2].highlightText
+					? undefined
+					: '1rem',
+					false
+				);
+			}
+
+			if (dirty & /*unfolded*/ 2) {
+				set_style(
+					div5,
+					"transition-delay",
+					/*unfolded*/ ctx[1]
+					? bigSmallDotChange + tagContentShowWhenLineStartGrow + 'ms'
+					: '0ms',
+					false
+				);
+			}
+
+			if (!current || dirty & /*unfolded*/ 2) {
+				toggle_class(div6, "unfolded", /*unfolded*/ ctx[1]);
+			}
+
+			if (!current || dirty & /*folded*/ 8) {
+				toggle_class(div6, "folded", /*folded*/ ctx[3]);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(shadow.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(shadow.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div6);
+			destroy_component(shadow);
+			destroy_each(each_blocks_1, detaching);
+			destroy_each(each_blocks, detaching);
+			if (if_block0) if_block0.d();
+			if (if_block1) if_block1.d();
+		}
+	};
+}
+
+const bigSmallDotChange = 400;
+
+// 线条生长时长
+const lineGrow = 500;
+
+// 线条开始生长后x秒标签开始出现
+const tagContentShowWhenLineStartGrow = 180;
+
+// 标签出现时长
+const tagContentShow = 500;
+
+function instance($$self, $$props, $$invalidate) {
+	let unfolded;
+	let folded;
+	let data;
+	var _a, _b;
+	let { tag } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('tag' in $$props) $$invalidate(0, tag = $$props.tag);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*tag, _a, _b*/ 49) {
+			$: $$invalidate(1, unfolded = $$invalidate(5, _b = $$invalidate(4, _a = tag.state) === null || _a === void 0
+			? void 0
+			: _a.unfolded) !== null && _b !== void 0
+			? _b
+			: false);
+		}
+
+		if ($$self.$$.dirty & /*unfolded*/ 2) {
+			$: $$invalidate(3, folded = !unfolded);
+		}
+
+		if ($$self.$$.dirty & /*tag*/ 1) {
+			$: $$invalidate(2, data = tag.data);
+		}
+	};
+
+	return [tag, unfolded, data, folded, _a, _b];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { tag: 0 }, add_css);
+	}
+}
+
+export default Component;