рони,
Не подскажите, почему у меня this не берется, а документ передается в функцию prototype?
window.onload = function() {
var defaults = {
'childrenElements' : '.filter__option',//дочерние элементы, больше числа которых появляется кнопка раскрытия
'count' : '3',//число, после которого появится раскрытие
'speed' : '250',//скорость раскрытия блока по нажатию на кнопку показа
'textMore' : '+ Показать все',//Текст для кнопки "Показать все"
'textLess' : '- Скрыть'//Текст для кнопки "Cкрыть"
}
function LoadElements(element, options) {
var extend = function(out) {
out = out || {};
for (var i = 1; i < arguments.length; i++) {
if (!arguments[i])
continue;
for (var key in arguments[i]) {
if (arguments[i].hasOwnProperty(key))
out[key] = arguments[i][key];
}
}
return out;
};
this.options = extend({}, defaults, options);
this.element = element;
this.init();
}
LoadElements.prototype.init = function() {
var self = this;
//Переменные, используемые в плагине
var elList = document.querySelectorAll(self); //находим все элементы на странице, к которым нужно применить метод
Array.prototype.forEach.call(elList, function(el, i) { //Обходим в цикле все элементы
var countChildren = elList[i].querySelectorAll(self.options.childrenElements);
if(countChildren.length > self.options.count) {
//Создаем контейнер, куда будем перемещать все элементы, которые нужно скрыть.
var container = document.createElement('div');
container.className = 'loadContainer';
//Создаем кнопку для раскрытия списка
var showAll = document.createElement('div');
showAll.className = 'loadMore';
showAll.innerHTML = self.options.textMore;
//Присваиваем контейнер в наш элемент
elList[i].appendChild(container);
//Присваиваем кнопку в наш элемент
elList[i].appendChild(showAll);
//Выбираем все элементы, которые будем скрывать и отправлем их в контейнер
for(var j = 0; j < countChildren.length; j++) {
if(j > self.options.count - 1) {
container.appendChild(countChildren[j]);
}
}
//Поочередно разворачиваем и сворачиваем контейнер при нажатии
showAll.onclick = function() {
this.previousElementSibling.classList.toggle('active');
}
}
});
}
(function(window) {
window.loadElements = function(element, options) {
this.element = element;
new LoadElements(this, options);
}
return this;
})(window);
document.querySelectorAll('.filter__item').loadElements();
}
<div class="filter__wrapper">
<form action="" class="filter">
<div class="filter__item">
<div class="filter__name">Производители</div>
<div class="filter__option--wrapper">
<div class="filter__option">
<input id="check1" type="checkbox"/>
<label for="check1">ACV</label>
</div>
<div class="filter__option">
<input id="check2" type="checkbox"/>
<label for="check2">AE&T</label>
</div>
<div class="filter__option">
<input id="check3" type="checkbox"/>
<label for="check3">Ariston</label>
</div>
<div class="filter__option">
<input id="check4" type="checkbox"/>
<label for="check4">Armada</label>
</div>
<div class="filter__option">
<input id="check5" type="checkbox"/>
<label for="check5">Baxi</label>
</div>
<div class="filter__option">
<input id="check6" type="checkbox"/>
<label for="check6">Buderus</label>
</div>
<div class="filter__option">
<input id="check7" type="checkbox"/>
<label for="check7">Chaffoteaux</label>
</div>
<div class="filter__option">
<input id="check8" type="checkbox"/>
<label for="check8">Matrix</label>
</div>
<div class="filter__option">
<input id="check9" type="checkbox"/>
<label for="check9">MATRIX</label>
</div>
</div>
</div>
</form>
</div>