Ihor Bratukh

function parseHTML(text, callback) {
	var $html = $($.parseHTML('<div>'+ text +'</div>'));
	if (callback) callback($html);
	return $html.children().unwrap();
}

parseHTML($('#contenteditable').text(), function($html) {
	var $p = $('p', $html);
	console.log({
		p: $p.text(),
		data: $p.data('test'),
		html: $html.html()
	});
});

function parseHTML(text, callback) {
	var html = function() {
		var template = document.implementation.createHTMLDocument();
		template.body.innerHTML = text;
		return template.body.children;
	}();
	if (callback) callback(html[0]);
	return html;
}

parseHTML(document.getElementById('contenteditable').innerText, function(html) {
	console.log({
		p: html.innerText,
		data: html.getAttribute('data-test'),
		html: html.outerHTML
	});
});

$('.elem', $('.content')).on('click', function() {
	// ...
});

init: function() {
	this.element.on('click', this.options.show);
}

(function($, window, undefined) {
	'use strict';

	var plugin = {
		name: 'plugin',
		data: {
			setting: 'setting'
		}
	}, defaults = {
		color: 'red',
		background: 'black'
	};

	var methods = {
		init: function($this, setting, type) {
			var setting = function() {
				var params = $.extend({}, defaults, setting);
				$this.data(plugin.data.setting, params);
				return params;
			}();
			/* START */
			$this.css({
				color: setting.color,
				background: setting.background
			});
			/* END */
		},
		set: function(key, value) {
			var setting = $(this).data(plugin.data.setting);
			switch (typeof key) {
				case 'string':
					setting[key] = value;
					break;
				case 'object':
					setting = $.extend(true, {}, setting, key);
					break;
			}
			methods.init($(this), setting, 'update');
		},
		get: function(key) {
			var setting = $(this).data(plugin.data.setting);
			if (key) {
				return Object.getOwnPropertyDescriptor(setting, key).value;
			} else {
				return setting;
			}
		},
		destroy: function() {
			$(this).removeData(plugin.data.setting).fadeOut(200, function() {
				$(this).empty().show();
			});
		}
	};

	$.fn[plugin.name] = function(setting, key, value) {
		if (typeof setting === 'object' || !setting) {
			return $.each(this, function() {
				methods.init($(this), setting, 'init');
			});
		} else if (typeof setting === 'string') {
			switch(setting.toLowerCase()) {
				case 'set':
					return methods.set.call(this, key, value);
				case 'get':
					return methods.get.call(this, key);
				case 'destroy':
					return methods.destroy.call(this);
			}
		}
	};

})(jQuery, window);

// Инициализация с параметрами по умолчанию
$('.block').plugin();
// или своими параметрами
$('.block').plugin({
	color: 'green',
	background: 'white'
});

// Метод SET, изменить параметры и переинциализировать плагин
$('.block').plugin('set', 'color', 'red');
// или передать объект новых параметров
$('.block').plugin('set', {
	color: 'yellow',
	background: 'black'
});

// Метод GET, получить параметры плагина
$('.block').plugin('get', 'color');
// или получить все параметры
$('.block').plugin('get');

// Метод DESTROY, отвязать плагин
$('.block').destory();

$(function() {
	$('.video-item').clone().appendTo('.video-list');
	$('.video-list select').select2({
		width: '100%',
		language: 'ru',
		placeholder: 'Не указано',
	});
});

(function() {
	'use strict';

	const Films = new Swapi('films')

	Films.init({
		category: ['planets', 'characters'],
		container() {
			return document.querySelector('.sw-list')
		},
		item(data) {
			return `
				<div class="sw-item">
					<div class="sw-item__info">
						<h3 class="title">${data.title}</h3>
						<h3 class="episode_id">${data.episode_id}</h3>
						<div class="director">${data.director}</div>
						<div class="producer">${data.producer}</div>
						<div class="release_date">${data.release_date}</div>
					</div>
					<br>
					<div class="opening_crawl">
						${Films.method('concat', data.characters, (character) => {
							return `
								<h4>Character</h4>
								<div class="name">Name: ${character.name}</div>
								<div class="birth">Birth: ${character.birth_year}</div>
								<hr>
							`
						})}
					</div>
					<div class="planets">
						${Films.method('concat', data.planets, (planet) => {
							return `
								<h4>Planet</h4>
								<div class="name">Name: ${planet.name}</div>
								<hr>
							`
						})}
					</div>
				</div>
			`
		}
	})

	/**
	  * Инициализация Swapi
	  * @param {string} endpoint - категория запроса: flims, ...
	**/
	function Swapi(endpoint) {
		this.init = (setting) => {
			const container = setting.container()
			makeRequest(`https://swapi.co/api/${endpoint}/`).then(response => {
				for (const item in response.results) {
					makeCategoryRequest(response.results[item], setting.category).then(results => {
						appendCollection(container, parseHtml(setting.item(results)))
					})
				}
			})
		},
		this.method = (name, value, callback) => {
			switch (name.toLowerCase()) {
				case 'concat':
					return filterStrings(value, callback)
			}
		}
	}

	/**
	  * Сделать все запросы на переданные категории
	  * @param {object} results - объект данных фильма
	  * @param {array} types - категории, которые нужно загрузить
	  * @returns {Promise}
	**/
	async function makeCategoryRequest(results, types = ['characters']) {
		const promises = {};
		for (const type of types) {
			promises[type] = makeDeepRequest(results[type])
		}
		for (const [type, promise] of Object.entries(promises)) {
			await promise.then(response => {
				results[type] = response;
			}).catch(console.error)
		}
		return results
	}

	/**
	  * Сделать запрос на url
	  * @param {string} url - ссылка
	  * @returns {Promise}
	**/
	function makeRequest(url) {
		return new Promise(resolve => {
			fetch(url, {
				method: 'GET',
				mode: 'cors'
			}).then(response => {
				return response.json()
			}).then(resolve).catch(error => {
				resolve(null)
			})
		})
	}

	/**
	  * Сделать запросы на переданные url
	  * @param {array} urls - массив ссылок
	  * @returns {Promise}
	**/
	function makeDeepRequest(urls) {
		return new Promise(resolve => {
			const promises = []
			for (const url of urls) {
				promises.push(makeRequest(url))
			}
			Promise.all(promises).then(resolve)
		})
	}


	/**
	  * Вставка HTMLCollection на страницу
	  * @param {Node} element - Node элемент, куда будет вставлятся коллекция
	  * @param {HTMLCollection} collection - масив HTMLCollection
	**/
	function appendCollection(element, collection) {
		element.appendChild(collection[0])
	}

	/**
	  * Парсинг HTML из строки
	  * @param {string} string - html строка
	  * @returns {HTMLCollection} - html коллекция node узлов
	**/
	function parseHtml(string) {
		const template = document.implementation.createHTMLDocument()
		template.body.innerHTML = string
		return template.body.children
	}

	/**
	  * Фильтрация массва, запись в строку
	  * @param {array} - массив данных
	  * @param {function} filter - функция фильтрации
	  * @returns {string} - строка с отфильтрованными данными из массива
	**/
	function filterStrings(array, filter) {
		let strings = ''
		if (filter) {
			for (let i = 0; i < array.length; i++) {
				strings += filter(array[i], i)
			}
		} else {
			for (let i = 0; i < array.length; i++) {
				strings += array[i]
			}
		}
		return strings
	}

	/**
	  * Фильтр и перебор по массиву
	  * @param {array} data - массив данных
	  * @param {function} filter - функция для фильтрации
	  * @returns {array} - отфильтрованный массив данных
	**/
	function filterArray(data, filter) {
		const array = []
		for (let i = 0; i < data.length; i++) {
			array.push(filter(data[i], i))
		}
		return array
	}

})()

(function() {
	'use strict';

	setTimeout(function() {
		fadeIn(document.querySelector('.swapi'), 1500);
	}, 1000);

	function fadeIn(el, time) {
		el.style.opacity = 0;
		var last = +new Date();
		var tick = function(time) {
			el.style.opacity = +el.style.opacity + (new Date() - last) / (time || 300);
			last = +new Date();
			if (+el.style.opacity < 1) {
				(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
			}
		};
		tick(time);
	}

})()

(function() {
    'use strict';

    // Инициализируем объект методов swapi
    const swapi = {
        // Метод инициализации, принимает массив объектов данных из API и объект настроек
        init(response, setting) {
            // Зададим основной контейнер куда будут вставлятся данные
            // Можно явно указать в свойстве container или создать и вернуть в свойстве create()
            const element = setting.container || setting.create()
            // Выводим данные на страницу
            appendCollectionOutput(element, filterArray(response, (data, index) => {
                return parseHtml(setting.items(data, index))
            }))
        }
    }

    // Инициализация запроса к API
    ajax({
        url: 'https://swapi.co/api/films/',
        method: 'GET',
        contentType: 'application/json; charset=UTF-8',
        success(response) {
            // Инициализируем плагин, передаем данные из API и пишем объект настроек
            swapi.init(JSON.parse(response).results, {
                // Определяем куда будет вставлятся html из функции items(data)
                container: document.querySelector('.swapi-container'),
                // Определяем шаблон вывода
                items(data) {
                    return `
                        <div class="sw-wrap">
                            <div class="sw-list">
                                <div class="sw-item">
                                    <div class="sw-item__info">
                                        <h3 class="title">${data.title}</h3>
                                        <h3 class="episode_id">${data.episode_id}</h3>
                                        <div class="director">${data.director}</div>
                                        <div class="producer">${data.producer}</div>
                                        <div class="release_date">${data.release_date}</div>
                                    </div>
                                    <div class="opening_crawl">.</div>
                                </div>
                            </div>
                        </div>
                    `
                }
            })
        }
    })

    /**
      * Вставка HTMLCollection на страницу
      * @param {Node} element - Node элемент, куда будет вставлятся коллекция
      * @param {HTMLCollection} collection - масив HTMLCollection
    **/
    function appendCollectionOutput(element, collection) {
        for (let i = 0; i < collection.length; i++) {
            element.appendChild(collection[i][0])
        }
    }

    /**
      * Парсинг HTML из строки
      * @param {string} string - html строка
      * @returns {HTMLCollection} - html коллекция node узлов
    **/
    function parseHtml(string) {
        const template = document.implementation.createHTMLDocument();
        template.body.innerHTML = string;
        return template.body.children;
    }

    /**
      * Фильтр и перебор по массиву
      * @param {array} data - массив данных
      * @param {function} filter - функция для фильтрации
      * @returns {array} - отфильтрованный массив данных
    **/
    function filterArray(data, filter) {
        const array = [];
        for (let i = 0; i < data.length; i++) {
            array.push(filter(data[i], i));
        }
        return array;
    }

    /**
      * XMLHttpRequest
      * @param {object} params - параметры запроса
      * url (string), method (string), contentType (string), data (any), async (boolean), success (function), error (function)
    **/
    function ajax(params) {
        var request = new XMLHttpRequest();
        request.open(params.method || 'GET', params.url || window.location.href, params.async || true);
        request.setRequestHeader('Content-Type', params.contentType || 'application/x-www-form-urlencoded; charset=UTF-8');
        request.onreadystatechange = function() {
            if (this.readyState === 4) {
                if (this.status >= 200 && this.status < 400) {
                    if (params.success) params.success(this.response, this.statusText, this.status);
                } else {
                    if (params.error) params.error(this);
                }
            }
        };
        request.send(params.data ? JSON.stringify(params.data) : '');
        request = null;
    }

})()

container: document.querySelector('.swapi-container')

create() {
	document.body.insertAdjacentHTML('afterBegin', function() {
		return '<div class="swapi-container"></div>'
	}())
	return document.querySelector('.swapi-container')
}