Ihor Bratukh

.slider {
  padding: relative;
}

.slider img {
  display: block;
  width: 100%;
  height: 100%;
}

.slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 0;
}

if (localStorage.getItem('popup') !== null) {
	var timestamp = localStorage.getItem('popup');
	if (Date.now() > Number(timestamp) + 5000) { // 5 секунд
		// показываем окно
		$('.popup').fadeIn();
	}
}

$('button').on('click', function() {
	localStorage.setItem('popup', Date.now());
});

reverseString('hello, world'); //> "dlrow ,olleh"

function reverseString(string) {
	return string.split('').reverse().join('');
}

JSON.parse(JSON.stringify({'id': 50, 'text': 'j', 'datetime': '2018-07-04 12:15:56.154427+00:00', 'sender': 'test', 'thread': 1}))

var string = JSON.stringify({'id': 50, 'text': 'j', 'datetime': '2018-07-04 12:15:56.154427+00:00', 'sender': 'test', 'thread': 1});
var object = JSON.parse(string, function(key, value) {
	return key === 'datetime' ? new Date(value) : value;
});

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

	/* Общие настройки плагина */
	var plugin = {
		name: 'plugin',
		version: '1.0.0',
		data: {
			setting: 'setting',
			general: 'general'
		}
	};

	/* Настройки инициализации по умолчанию */
	var defaults = {
		color: 'red',
		background: 'black',
		padding: '10px'
	};

	var methods = {};

	methods.init = function($this, options, common) {
		/**
		 * Записываем настройки плагина в $.data элемента,
		 * чтобы потом в любой момент достать настройки 
		**/
		var setting = function() {
			var params = $.extend(true, {}, defaults, options);
			$this.data(plugin.data.setting, params);
			return params;
		}();

		/**
		 * Создаем общий объект свойств, которыми будем пользоватся
		 * в методе init. Общий объект заменяет глобальные переменные в методе init,
		 * так удобней и чище, все в одном месте. Не нужно на этом уровне создавать
		 * var flag = true; и использовать его по всему коду init и в функциях замыкания,
		 * лучше объект
		**/
		var general = function() {
			var params = $.extend(true, {}, {
				time: Date.now(),
				context: $this.get(0)
			}, common);
			$this.data(plugin.data.general, params);
			return params;
		}();

		/* Начало инициализации плагина */
		$this.css({
			color: setting.color,
			background: setting.background
		});

		setPadding();
		/* Конец инициализации плагина */

		/* Функции в замыкании для видимости: $this, setting, general */
		function setPadding() {
			general.context.style.padding = setting.padding;
		}
	};

	/**
	 * Метод SET. Логика его в том, чтобы взять текущие настройки
	 * плагина из $.data элемента, присоеденить свои
	 * и переинициализировать плагин уже с новыми настройками
	**/
	methods.set = function(key, value) {
		var setting = $(this).data(plugin.data.setting);
		switch (typeof key) {
			case 'string':
				if (key.includes('.')) {
					nestedObjectPath(setting, key, value);
				} else {
					setting[key] = value;
				}
				break;
			case 'object':
				setting = $.extend(true, {}, setting, key);
				break;
		}
		return methods.init($(this), setting, {
			type: 'update',
			method: 'set'
		});
	};

	methods.get = function(category, key) {
		var section = $(this).data(category);
		if (key) {
			if (key.includes('.')) {
				return nestedObjectPath(section, key);
			} else {
				return Object.getOwnPropertyDescriptor(section, key).value;
			}
		}
		return section;
	};

	methods.destroy = function() {
		$(this).removeData(plugin.data.setting).fadeOut(200, function() {
			$(this).empty().show();
		});
	};

	methods.version = function() {
		return plugin.version;
	};

	/* Все остальные общие функции, которым не нужна область видимости init метода */
	/**
	 * Получить/установить значение объекта передав путь строкой ('price.current.USD')
	 * @param {object} object - объект
	 * @param {string} key - путь к свойству
	 * @param {any} value - значение
	 * @returns {any} - значение свойства объекта
	**/
	function nestedObjectPath(object, key, value) {
		var path = key.split('.');
		var get = function(path, object) {
			return path.reduce(function(previous, current) {
				return previous[current];
			}, object);
		};
		if (value) {
			var way = path.pop();
			get(path, object)[way] = value;
			return object;
		} else {
			return get(path, object);
		}
	}
	/* Конец объявления общих функций */

	/* Инициализации плагина и запуск методов */
	$.fn[plugin.name] = function(setting) {
		if (typeof setting === 'object' || !setting) {
			return $.each(this, function() {
				methods.init($(this), setting, {
					type: 'init',
					method: 'init'
				});
			});
		} else if (typeof setting === 'string') {
			var params = Array.prototype.slice.call(arguments, 1);
			var context = this.get(0);
			switch(setting.toLowerCase()) {
				case 'set':
					return methods.set.apply(context, params);
				case 'get':
					return methods.get.apply(context, params);
				case 'destroy':
					return methods.destroy.call(context);
				case 'version':
					return methods.version();
			}
		}
	};

})(jQuery, window);

/* Инициализация плагина с параметрами по умолчанию */
$('div').plugin();

/* Инициализация плагина с параметрами */
$('div').plugin({
	color: 'green',
	background: 'white'
});

/* Изменим параметры плагина, например по клику кнопке */
$('button').on('click', function() {
	$('div').plugin('set', 'color', 'yellow');
});

/* Или передадим больше параметров для изменения */
$('button').on('click', function() {
	$('div').plugin('set', {
		color: 'black',
		background: 'white'
	});
});

/**
 * Если у нас в настройках вложенные объекты
 * то для этого мы объявили функцию nestedObjectPath
 * и описали логику в методах set и get
 * У нас появилась возможность одной строкой 
 * имзенить/получить свойства вложеных объектов
**/
$('div').plugin('set', 'color.theme.light', 'white');

/* Или передадим объектом */
$('div').plugin('set', {
	color: {
		theme: {
			light: 'white'
		}
	}
});

/* Получить настройки/параметры плагина */
var color = $('div').plugin('get', 'setting', 'color');

/* Или получим general объект */
var time = $('div').plugin('get', 'general', 'time');

/**
 * Отвяжем/разрушим плагин.
 * Этот метод индивидуальный для каждого плагина
 * и данный пример не является универсальным для всех плагинов
**/
$('div').pluign('destroy');

/* Получить текущюю версию плагина */
$().plugin('version');

item.append(inputFile).append(inputText).append(preview);
this.append(item);

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() {
	// ...
});