윅스 (Wix) 코딩 강의 고급 (Advanced) - 드랍다운 다루기 (Dropdown Custom Element) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 드랍다운 다루기 (Dropdown Custom Element) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 드랍다운 다루기 (Dropdown Custom Element) - 상호작용 (Interactions)

강의 내용 요약

다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.

 

웩스 웹사이트에서 드랍다운 메뉴를 만듭니다.

 

예제 보러가기 (View Example)

Dropdown | Dropdown CE S

 

예제 에디터 확인하기 (Edit Now)

Log In | Wix

 

 

강의 내용 만드는법

만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.

 

코드 (Code)

dropdown-design.js

export function renderDropdownItem(item) {
	return `<div class="dropdown-option">
				<img src=${item.flag}>
				<span>${item.title}</span>
			</div>`;
}

export function renderDropdown(itemsHtml) {
	return `<div id="wrapper">
			<div id="myDropdown" class="dropdown-content">
				<div id="selectButton">Select country</div>
				<div id="options" style="display: none">
				${itemsHtml.join('')}
				</div>
			</div>
		</div>`;
}

export const css = `
        #wrapper {
			width: 300px;
			display: flex;
			flex-direction: column;
			padding: 20px;
		}

		#selectButton {
			width: 100%;
			box-sizing: border-box;
			font-size: 16px;
			padding: 12px 16px;
			border: 2px solid lightgrey;
			background-color: #ffffff;
		}

		#selectButton:hover {
			border: 2px solid #0080ff;
			box-shadow: blur;
		}

		.dropdown-content {
			background-color: #f6f6f6;
			border: 1px solid #ddd;
			margin-bottom: 30px;
		}

		.dropdown-content #options {
			max-height: 250px;
			overflow: scroll;
		}

		.option-selected {
			display: flex;
			align-items: center;
		}

		.dropdown-option {
			color: black;
			padding: 12px 16px;
			text-decoration: none;
			border-top: 1px solid #ddd;
			display: flex;
			align-items: center;
		}

		.dropdown-option:hover {
			background-color: #f1f1f1;
		}	
			
		.dropdown-option img,
		.option-selected img
		{
			width: 20px;
			height: 20px;
			margin-right: 20px;
		}
`;

 

dropdown-api.js

export class DropdownAPI {

	constructor(elem, globalTemplate, itemTemplate) {
		this.elem = elem;
		this._globalTemplate = globalTemplate;
		this._itemTemplate = itemTemplate;
	}

	get data() {
		return this._data;
	}

	set data(d) {
		this._data = d;
		this.render();
	}

	get css() {
		return this._css;
	}

	set css(s) {
		this._css = s;
		this.elem.setAttribute('css', s);
	}

	render() {
		let countries = this._data.map(_ => this._itemTemplate(_));
		let html = this._globalTemplate(countries);
		this.elem.setAttribute('html', html);
		this.elem.seoMarkup = html;
	}
}

 

dropdown.js

class Dropdown extends HTMLElement {

	constructor() {
		super();
		this._shadow = this.attachShadow({ mode: 'open' });
		this._styleElem = document.createElement('style');
		this._styleElem.textContent = ``;
		this._root = document.createElement('div');
		this._shadow.appendChild(this._styleElem);
		this._shadow.appendChild(this._root);
	}

	static get observedAttributes() {
		return ['html', 'css'];
	}

	attributeChangedCallback(name, oldValue, newValue) {
		if (name === 'html')
			this.html = newValue;
		if (name === 'css')
			this.css = newValue;
	}

	get html() {
		return this._html;
	}

	set html(t) {
		this._html = t;
		sessionStorage.setItem('html', t);
		if (this._connected)
			this.render();
	}

	get css() {
		return this._css;
	}

	set css(s) {
		this._css = s;
		sessionStorage.setItem('css', s);
		this._styleElem.textContent = s;
	}

	toggleDropdownItems(container) {
		if (!container.style.display) {
			container.style.display = 'none';
		} else {
			container.style.display = '';
		}
	};

	openDropdown(e) {
		e.preventDefault();
		let optionsContainer = this._root.querySelector('#options');

		if (optionsContainer) {
			this.toggleDropdownItems(optionsContainer);
		}
		return false;
	}

	async selectOption(e, option) {
		e.preventDefault();

		let optionsContainer = this._root.querySelector('#options');
		let selectButton = this._root.querySelector('#selectButton');

		let countryIconNode = option.querySelector("img");
		let countryIconSrc = countryIconNode.src;

		countryIconNode.src = await fetch(countryIconSrc)
			.then(res => res.blob())
			.then(blob => URL.createObjectURL(blob));

		const [iconNode, nameNode] = option.children;
		const optionHTML = `<div class="option-selected">${iconNode.outerHTML}${nameNode.outerHTML}</div>`;

		if (optionsContainer && selectButton && optionHTML) {
			selectButton.innerHTML = optionHTML;
			this.toggleDropdownItems(optionsContainer);
		}

		return false;
	}

	connectedCallback() {
		let savedHtml = sessionStorage.getItem('html');
		let savedCss = sessionStorage.getItem('css');
		if (savedCss && savedCss !== 'undefined' && !this._css)
			this.css = savedCss;
		if (savedHtml && savedHtml !== 'undefined' && !this._html)
			this._html = savedHtml;
		this._connected = true;
		if (this._html) {
			this.render();
		}
	}

	render() {
		this._root.innerHTML = this._html;

		let selectButton = this._root.querySelector('#selectButton');
		selectButton.addEventListener('click', e => this.openDropdown(e));

		let options = this.shadowRoot.querySelectorAll('.dropdown-option');
		for (let option of options) {
			option.addEventListener('click', e => this.selectOption(e, option));
		}
	}
}

customElements.define('dropdown-elem', Dropdown);

 

Dropdown

import { DropdownAPI } from 'public/dropdown-api';
import { renderDropdown, renderDropdownItem, css } from 'public/dropdown-design';
import { fetch } from 'wix-fetch';
import wixData from 'wix-data';

$w.onReady(async function () {
	let dropdown = new DropdownAPI($w('#CustomElement1'), renderDropdown, renderDropdownItem);
	dropdown.css = css;

	let data = await wixData.query("Countries").find();
	let countries = data.items.map(item => {
		return {
			title: item.title,
			flag: item.externalUrl
		}
	});

	dropdown.data = countries;
});

API

$w.CustomElement API

Wix Data API

 

Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

 

 

연관된 토픽)

윅스 (Wix) 코딩 강의 고급 (Advanced) - Chart.js 다루기 (Chart.js Custom Element) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 고급 (Advanced) - Chart.js 다루기 (Chart.js Custom Element) - 상호작용 (Interactions)

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

콜비드 - 윅스 코딩 (Corvid - Wix coding)

Dropdown Custom Element | Corvid by Wix Examples | Wix.com