K. Zemtsovsky imkost

imkost / slender2_boxClick.js

Last active November 9, 2016 23:35

	function Box() {
	return `
	<div class="box" onClick="Box.onClick(this)"></div>
	`;
	}

	Box.onClick = (box) => {
	box.classList.toggle('box_big');
	};

imkost / slender2_nameEditor.js

Last active November 18, 2016 18:22

	function NameEditor() {
	return `
	<div class="nameEditor">
	<div>Enter you name:</div>
	<input onKeyUp="NameEditor.onKeyUp(this)" />
	<div>
	Hello, <span></span>
	</div>
	</div>
	`;

imkost / slender2_nameEditorId.js

Last active November 18, 2016 18:23

	function NameEditor({ instanceIndex }) {
	return `
	<div class="nameEditor">
	<div>Enter you name:</div>
	<input onKeyUp="NameEditor.onKeyUp(this, ${instanceIndex})" />
	<div>
	Hello, <span id="nameEditor__name-${instanceIndex}"></span>
	</div>
	</div>
	`;

imkost / slender2_App2.js

Last active November 18, 2016 17:47

imkost / slender2_id.html

Created November 18, 2016 11:56

	<div>
	Hello, <span id="nameEditor__name"></span>
	</div>

imkost / slender3_Box.js

Created December 5, 2016 19:33

	function Box({ text }) {
	return `
	<div class="box" onClick="Box.onClick()">
	${text}
	</div>
	`;
	}

	Box.onClick = () => {
	alert('box was clicked');

imkost / slender3_NameEditor.js

Created December 5, 2016 19:39

imkost / slender3_NameEditor2.js

Created December 5, 2016 19:40

	function NameEditor({ id }) {
	// Add color to distinguish name editors
	const color = {
	0: '#b6e1c1',
	1: '#b7c4ed',
	}[id];

	return `
	<div class="nameEditor" style="background: ${color}">
	...

imkost / slender3_live.js

Created December 5, 2016 19:41

	const Box = () => '<div class="box"></div>';
	const boxes = document.getElementsByClassName('box');

	document.body.innerHTML = `${Box()}${Box()}${Box()}`;
	console.log(boxes.length); // 3

	document.body.innerHTML = `${Box()}`;
	console.log(boxes.length); // 1

imkost / slender3_NameEditor3.js

Created December 5, 2016 19:42

	const nameElems = {};

	function getNameElems(id) {
	return nameElems[id] \|\| (
	nameElems[id] = document.getElementsByClassName(`nameEditor__name-${id}`)
	);
	}

	NameEditor.onKeyUp = (input, id) => {
	for (const elem of getNameElems(id)) {