Objs

o.init({
	render: {
		class: 'exampleTimer',
		html: 'Секунды: <span>0</span>',
	},
	events: ({self}) => {
		self.on('click', () => {
			// проверка статуса
			if (self.interval) {
				// использование другого состояния как метода
				self.stop();
			} else {
				self.start();
			}
		});
	},
	tick: ({self, o}) => {
		// сохранение информации в объекте
		self.n = self.n || 0;
		self.n++;
		// получение дочернего элемента и изменение
		o(self).first('span').html(self.n);
	},
	// управление таймером
	start: ({self}) => {
		// задание интервала для управления
		self.interval = setInterval(() => {
			self.tick();
		}, 1000);
		// удаление вывода статуса
		o(self).first('.status').remove();
	},
	stop: ({self, o}) => {
		// остановка интервала
		clearInterval(self.interval);
		delete self.interval;
		// вывод статуса
		o.initState(
			'<div class="status">(stopped)</div>'
		).appendInside(self.el);
	}
}).render()
	.events()
	.start()
	.appendInside('#exampleTimer');

const listData = [
	{
		text: 'Задача номер 1',
		checked: true,
	},
	{
		text: 'Задача номер 2',
		checked: false,
	},
];

const rowState = {
	render: ({checked,text,i}) => `
		<li class="tm__row" >
			<input type="checkbox" 
				${checked ? 'checked="1"':''} 
				id="task${i}">
			<label for="task${i}">
				${text}
			</label>
			<input 
				class="tm__delete" 
				type="button">
		</li>
	`,
	events: ({self, o, i}) => {
		o(self.els[i])
			.first('.tm__delete')
			.on('click', () => {
				self.remove(i);
			});
	},
};

const formState = {
	render: `
		<div class="tm__form">
			<input class="tm__field" type="text" maxlength="120" placeholder="Новая задача">
			<input class="tm__add" type="button" value="" aria-label="Добавить">
		</div>
	`,
	events: ({self, o}) => {
		o(self.el).first('.tm__add').on('click', () => {
			const text = o(self.el).first('.tm__field').el.value.trim();
			if (!text) return;
			const i = self.nextTaskId++;
			o.init(rowState)
				.render({ i, text, checked: false })
				.events()
				.appendInside('.tm__list');
			o(self.el).first('.tm__field').el.value = '';
		});
	}
};

const listObj = o.initState({
	tag: 'ul',
	class: 'tm__list',
	append: o.init(rowState).render(listData).events().els,
});
const formObj = o.initState(formState).events();
formObj.nextTaskId = listData.length;

formObj.appendInside('#taskManager');
listObj.appendInside('#taskManager');
	

const noticeState = ({title}) => {
	return `<div 
		class="exampleMenu__message">
			${title}
		</div>
	`;
};

const MENU_LS = 'objsMainPage_menuHtml_ru';
const MENU_CK = 'objsMainPage_menuCached_ru';

// создание объекта состояний из элемента страницы
const menuStates = {
	render: () => {
		// проверка, в курсе ли сервер о кеше
		if (!getCookie(MENU_CK)) {
			localStorage.setItem(MENU_LS, o('#exampleMenuServerPart .exampleMenu').html());
			setCookie(MENU_CK, true);
		}
		return localStorage.getItem(MENU_LS) || '';
	},
	// добавление динамического элемента
	newMessage: ({self, title}) => {
		o.init(noticeState)
			.render({title})
			.on('click', (e) => {
				o(e.target).remove();
			})
			.appendInside(self.el);
	}
};

o.init(menuStates)
	.render()
	.appendInside('#exampleMenu')
	.newMessage({
		title: 'Новое сообщение!'
	});

// card.js
let initCard = (query) => {
	return o.initState(`
		<div class="card">
			<img 
				class="card__img" 
				src="/objs/card.jpg">
			<div 
				class="card__text">
				It is a sea
			</div>
		</div>
	`).appendInside(query);
};

// пример
o.initState(
	'<button 
		class="example__btn">
		Загрузить
	</button>'
).on('click', () => {
	// ПОДГРУЗКА
	o.inc({
		'cardJS': 'card.js',
		'cardCSS': 'card.css',
		'cardJPG': 'card.jpg',
	}, () => {
		// ЗАПУСК
		initCard('#examplePreloading');
	});
}).appendInside('#examplePreloading');

o.initState(
	'<button 
		class="example__btn">
		Очистить кеш
	</button>'
).on('click', () => {
	o('#examplePreloading div').remove();
	o('.card').remove();
	o.incCacheClear(true);
}).appendInside('#examplePreloading');

// включаем отображение успешных тестов
o.tShowOk = true;

function clearObjsTestSession() {
	try {
		sessionStorage.removeItem('oTest-Run');
		sessionStorage.removeItem('oTest-Autorun');
	} catch (e) {}
}

const boxes = () =>
	document.querySelectorAll('#mainPageTestDemo input.testResult');

o('#mainPageTestDemo').on('change', () => {
	clearObjsTestSession();
	o.tStyled = o('#testStyled').el.checked;
	const b = boxes();
	o.test(
		'Название теста',
		['Первый checkbox', b[0].checked],
		['Второй checkbox', b[1].checked || 'Не отмечен'],
		['Третий checkbox', () => b[2].checked],
		[
			'Четвертый checkbox',
			() =>
				new Promise((resolve) => {
					setTimeout(() => resolve(b[3].checked), 100);
				}),
		],
		[
			'Пятый checkbox',
			() =>
				new Promise((resolve) => {
					const delay = b[4].checked ? 100 : o.tTime;
					setTimeout(() => resolve(!!b[4].checked), delay);
				}),
		],
		{ sync: true },
		(n) => {
			const log = o.tLog[n];
			const text =
				typeof log === 'string' && o.tStyled
					? log
					: String(log).replaceAll('\n', '<br>');
			o('#exampleTests').html(text + '<br>' + JSON.stringify(o.tStatus[n]));
		}
	);
});