Custom element, Shadow DOM で作るジッパー縦

Shadow DOM

Shadow DOM

Custom element, Shadow DOM で作るジッパー縦

SVG埋め込みで持ち運ぶファイルはJavaScript1個のみ。カプセル化で記述すっきり。

記述コード: 機能をカプセル化していますので意識して書くのは以下の2行のみ。

<ce-zipper></ce-zipper>

<script defer src="./js/ce_zipper.js"></script>

現時点のコードは以下の通り:
/**
 * ジッパー縦
 *
 * <ce-zipper></ce-zipper>
 *
 * @author ao-system, Inc.
 * @date 2024-06-15
 */
(() => {
	'use strict';
	class Zipper {
		#svgHandle = `
			<path d="M25.2,41.96l.4-14.03c3-5.57,4.22-9.09,4.92-12.24,1.23-5.53.96-6.77-.62-8.76C26.64,2.81,19.1.6,16.36.61h-.76C12.86.61,4.95,2.8,2.06,6.93c-1.45,2.08-1.85,3.24-.62,8.76.7,3.15,1.92,6.67,4.62,12.24l.4,14.03h18.74Z"/>
			<path d="M26.5,13.3H4.87l.57,5.29h0l-2.61,55.65s1.55,3.15,12.91,3.15,13.43-3.16,13.43-3.16l-3.18-55.94s.51-4.99.51-4.99ZM22.85,62.15l1.65,9.78s-.61,2.59-8.63,2.29c-8.02.3-8.63-2.29-8.63-2.29l1.65-9.78h13.96ZM22.75,16.24v16.38h-13.97v-16.38h13.97Z"/>
			<rect x="11.37" y="3.7" width="9.27" height="25.63"/>
		`;
		#svgButtTop = `
			<rect x="4" y="0" width="6" height="7"/>
			<rect x="13" y="0" width="6" height="7"/>
		`;
		#svgButtBottom = `
			<rect x="4.5" y="0.5" width="6" height="7"/>
			<rect x="11.5" y="0.5" width="6" height="7"/>
			<rect x="0.5" y="8.5" width="20" height="10"/>
		`;
		#gradation1 = `
			<linearGradient id="gradation1" x1="0" y1="0" x2="100%" y2="0" gradientUnits="userSpaceOnUse">
				<stop offset="0" stop-color="#cb0"/>
				<stop offset="0.2" stop-color="#dd7"/>
				<stop offset="0.4" stop-color="#dd4"/>
				<stop offset="0.5" stop-color="#cb2"/>
				<stop offset="0.6" stop-color="#db3"/>
				<stop offset="0.8" stop-color="#dc5"/>
				<stop offset="0.9" stop-color="#cb5"/>
				<stop offset="1" stop-color="#ddb"/>
			</linearGradient>
		`;
		#shining = 'data:image/png;base64,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';
		#style = `
			:host > main {
				user-select: none;
				padding: 20px;
				background-color: #6f0505;
				max-width: 32px;
				display: grid;
				> svg {
					grid-area: 1/1/2/2;
					display: block;
					cursor: pointer;
					path,rect {
						stroke: #ff7;
						stroke-width: 0.5px;
						fill: url(#gradation1);
					}
					rect.inner {
						stroke: none;
						fill: #900;
					}
				}
				> img {
					grid-area: 1/1/2/2;
					transform: translate(-135px,80px);
					clip-path: xywh(150px 0 0px 200px);
				}
			}
		`;
		#slider;
		#teeth = [];
		#img;
		#openFlag = false;
		#busy = false;
		constructor() {
		}
		render(elm) {
			//style
			const style = document.createElement('style');
			style.innerHTML = this.#style;
			//main
			const main = document.createElement('main');
			const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
			svg.setAttribute('width',32);
			svg.setAttribute('height',385);
			svg.setAttribute('viewBox','0 0 32 385');
			svg.innerHTML = this.#gradation1;
			svg.addEventListener('click',() => {this.#toggle();});
			const inner = document.createElementNS('http://www.w3.org/2000/svg','rect');
			inner.setAttribute('class','inner');
			inner.setAttribute('width',6);
			inner.setAttribute('height',300);
			inner.style.transform = 'translate(13px,5px)';
			svg.appendChild(inner);
			for (let i = 0; i < 50; i++) {
				const tooth1 = document.createElementNS('http://www.w3.org/2000/svg','rect');
				tooth1.setAttribute('x',8);
				tooth1.setAttribute('y',i * 6 + 9);
				tooth1.setAttribute('width',10);
				tooth1.setAttribute('height',3);
				const tooth2 = document.createElementNS('http://www.w3.org/2000/svg','rect');
				tooth2.setAttribute('x',14);
				tooth2.setAttribute('y',i * 6 + 3 + 9);
				tooth2.setAttribute('width',10);
				tooth2.setAttribute('height',3);
				this.#teeth.push({'tooth1':tooth1,'tooth2':tooth2});
				svg.appendChild(tooth1);
				svg.appendChild(tooth2);
			}
			const stopperTop = document.createElementNS('http://www.w3.org/2000/svg','g');
			stopperTop.innerHTML = this.#svgButtTop;
			stopperTop.style.transform = 'translate(5px,0px)';
			svg.appendChild(stopperTop);
			const stopperBottom = document.createElementNS('http://www.w3.org/2000/svg','g');
			stopperBottom.innerHTML = this.#svgButtBottom;
			stopperBottom.style.transform = 'translate(5px,310px)';
			svg.appendChild(stopperBottom);
			this.#slider = document.createElementNS('http://www.w3.org/2000/svg','g');
			this.#slider.innerHTML = this.#svgHandle;
			svg.appendChild(this.#slider);
			main.appendChild(svg);
			this.#img = document.createElement('img');
			this.#img.src = this.#shining;
			main.appendChild(this.#img);
			//attachShadow
			const shadowRoot = elm.attachShadow({mode:'closed'});
			shadowRoot.appendChild(style);
			shadowRoot.appendChild(main);
		}
		#toggle() {
			if (this.#busy) {
				return;
			}
			this.#busy = true;
			if (this.#openFlag == false) {
				for (let i = 0; i < this.#teeth.length; i++) {
					this.#teeth[i].tooth1.animate([
						{transform: 'translateX(0px)'},
						{transform: 'translateX(-4px)'},
					],{delay: i * 20, duration: 200, fill: 'forwards'});
					this.#teeth[i].tooth2.animate([
						{transform: 'translateX(0px)'},
						{transform: 'translateX(4px)'},
					],{delay: i * 20, duration: 200, fill: 'forwards'});
				}
				this.#slider.animate([
					{transform: 'translate(0px,0px)'},
					{transform: 'translate(0px,305px)'},
				],{delay: 0, duration: 1100, fill: 'forwards'}).onfinish = () => {
					this.#img.animate([
						{transform: 'translate(-135px,80px)',clipPath: 'xywh(150px 0 0 200px)'},
						{transform: 'translate(16px,80px)',clipPath: 'xywh(0 0 150px 200px)'},
					],{delay: 0, duration: 1000, fill: 'forwards'}).onfinish = () => {
						this.#openFlag = true;
						this.#busy = false;
					}
				}
			} else {
				this.#img.animate([
					{transform: 'translate(16px,80px)',clipPath: 'xywh(0 0 150px 200px)'},
					{transform: 'translate(-135px,80px)',clipPath: 'xywh(150px 0 0 200px)'},
				],{delay: 0, duration: 1000, fill: 'forwards'}).onfinish = () => {
					for (let i = 0; i < this.#teeth.length; i++) {
						this.#teeth[i].tooth1.animate([
							{transform: 'translateX(-4px)'},
							{transform: 'translateX(0px)'},
						],{delay: (49 - i) * 20, duration: 200, fill: 'forwards'});
						this.#teeth[i].tooth2.animate([
							{transform: 'translateX(4px)'},
							{transform: 'translateX(0px)'},
						],{delay: (49 - i) * 20, duration: 200, fill: 'forwards'});
					}
					this.#slider.animate([
						{transform: 'translate(0px,305px)'},
						{transform: 'translate(0px,0px)'},
					],{delay: 0, duration: 1100, fill: 'forwards'}).onfinish = () => {
						this.#openFlag = false;
						this.#busy = false;
					}
				}
			}
		}
	}
	(() => {
		const zipper = new Zipper();
		customElements.define('ce-zipper',
			class extends HTMLElement {
				constructor() {
					super();
					zipper.render(this);
				}
			}
		);
	})();
})();
この記事は2024年6月当時の物です。
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。