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: 'Не указано',
});
});$('#box-toggler').on('click', function (event) {
event.preventDefault();
$(this).toggleClass('_active');
$('#box').slideToggle();
});(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')
}@import './project/js/plugins/jquery.js'var style = '@@include('./modules/airbender/style.css')';
$('head').append('<style type="text/css">'+ style +'</style>');var data = JSON.parse(response, function(key, value) {
console.log(key, value);
});var lastnumb = '', timeout = 0;
$('[id*=fruit]').on({
mouseenter: function() {
timeout = setTimeout(function() {
lastnumb = $(this).prop('id').replace(/[^\d;]/g, '');
$('#num_words' + lastnumb).animate({
height: 'show'
}, 250);
}.bind(this), 1000);
},
mouseleave: function() {
clearTimeout(timeout);
$('#num_words' + lastnumb).animate({
height: 'hide'
}, 250);
}
});$(document).ready(function() {
$('.question__trigger').on('click', function(e) {
e.preventDefault();
var tab = $(this).data('tab');
$('.accordeon__list[data-tab!="'+ tab +'"]').hide();
$('.general__question_item').removeClass('active');
$('.accordeon__list[data-tab="'+ tab +'"]').show().parents('.general__question_item').addClass('active');
});
});