Показать сообщение отдельно
  #16 (permalink)  
Старый 21.03.2017, 18:29
Аватар для Stay_Strong
Аспирант
Отправить личное сообщение для Stay_Strong Посмотреть профиль Найти все сообщения от Stay_Strong
 
Регистрация: 14.10.2015
Сообщений: 37

рони,
Не подскажите, почему у меня 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>
Ответить с цитированием