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: `
		<input 
			class="tm__field" 
			type="text" 
			maxlength="27" 
			placeholer="Input text">
		<input 
			class="tm__add" 
			type="button">
	`,
	events: ({self, o}) => {
		o(self.el)
			.first('.tm__add')
			.on('click', () => {
				const rowsObjs = 
					o.take('.tm__row') 
					|| o.init(rowState);
				const i = self.rowID 
					|| rowsObjs.length;
				self.rowID = i + 1;

				rowsObjs.add(
					o.init(rowState).render({
						i: i,
						text: o(self.el)
							.first('.tm__field')
							.el
							.value
					}).el
				)
					.select()
					.events()
					.appendInside('.tm__list')
					.all();

				o(self.el)
					.first('.tm__field')
					.el
					.value = '';
			});
	}
};

o.initState({
	tag: 'ul',
	class: 'tm__list',
	append: o.init(rowState)
		.render(listData)
		.events()
		.els,
}).add(
	o.initState(formState)
		.events()
		.el
).appendInside('#taskManager');
	

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

// создание объекта состояний из элемента страницы
const menuStates = {
	render: () => {
		// проверка, в курсе ли сервер о кеше
		if (!getCookie('exampleMenuCache')) {
			localStorage
				.setItem(
					'exampleMenuCache', 
					o('.exampleMenu').html()
				);
			setCookie('exampleMenuCache', true);
		}
		return localStorage.getItem('exampleMenuCache');
	},
	// добавление динамического элемента
	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;

const results = o('.testResult').on('change', () => {
	// HTML стиль
	o.tStyled = o('#testStyled').el.checked;
	// функция тестирования
	o.test(
		'Название теста',
		// просто логический результат
		[
			'Первый checkbox', 
			results.els[0].checked
		],
		// возврат ошибки текстом
		[
			'Второй checkbox', 
			results.els[1].checked || 'Не отмечен'
		],
		// тестирование функцией
		[
			'Третий checkbox', 
			() => {
				return results.els[2].checked;
			}
		],
		// асинхронный тест
		[
			'Четвертый checkbox', 
			(info) => {
				setTimeout(() => o
					.testUpdate(
						info, 
						results.els[3].checked), 
				100);
		}],
		// асинхронный тест с ошибкой таймаута
		['Пятый checkbox', (info) => {
			if (results.els[4].checked) {
				setTimeout(() => o.testUpdate(
					info, 
					true), 
				100);
			}
		}],
		// функция вывода после всех тестов или таймаута
		(n) => {
			o('#exampleTests')
				.html(
					o.tLog[n].replaceAll('\n', '<br>') + 
					'<br>' + 
					JSON.stringify(o.tStatus[n])
				);
		}
	);
});