Спойлеры в блоге

Вы знаете, что такое спойлер (англ. spoiler)? Нет, не тот, который на щетке лобового стекла автомобиля и не антикрыло для него же :-) Сейчас я говорю об элементе дизайна, что используется для сокрытия информации, которую читатель может увидеть лишь намеренно нажав на кнопку. Подобное может быть полезно, если спрятанную под спойлером информацию не нужно видеть всем (например, содержание фильма, на который читатель только еще собирается пойти). Или же, если текст статьи перемежается большими кусками вспомогательного материала, который не каждому интересен (например, сравнительные таблицы, куски кода, примеры).

Сейчас мы добавим возможность создания спойлеров и в наш блог!

Итак, в создании спойлеров нам как всегда помогут javascript и CSS. Сначала интегрируем скрипт. Для этого открываем шаблон на редактирование (Дизайн->Изменить HTML), находим закрывающий тэг </body> и прямо перед ним добавляем следующий код:

<script type='text/javascript'>
  WidgetSpoilerManager.setOption("defaultTitleText", "Подробнее");
</script>
<script src='https://drive.google.com/uc?export=download&amp;id=0B3_dGXEjBVdPMWFiaHhoQnhPc1k' type='text/javascript'/>

Видите в коде слово "Подробнее"? Этим словом будет по умолчанию озаглавлен наш спойлер, если мы явно не зададим ему заголовок.

Теперь совместим полезное с... не менее полезным! Увидим спойлер в действии, а заодно, желающие смогут ознакомиться с содержимым скрипта, доступным по адресу https://drive.google.com/uc?export=download&id=0B3_dGXEjBVdPMWFiaHhoQnhPc1k, к которому выше шло обращение:

WidgetSpoilerManager = {
  options: {
    mainSectionId: "Blog1",
    spoilerClassName: "spoiler",
    hiddenClassName: "spoiler-hidden",
    visibleClassName: "spoiler-visible",
    controlClassName: "bar",
    textClassName: "text",
    copyClassName: "copy",
    defaultTitleText: "Подробнее"
  },
  setOption: function (option, value){
    if (this.options[option] != undefined){this.options[option] = value}
  },
  getElementsByClassName: function (classname, node){
    if(!node) node = document.getElementsByTagName("body")[0];
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
      if(re.test(els[i].className))a.push(els[i]);
    return a;
  },
  toggle: function (elem){
    var parent = elem.parentNode;
    if (parent.className == this.options.hiddenClassName){
      parent.className = this.options.visibleClassName;
      return
    }
    parent.className = this.options.hiddenClassName;
  },
  init: function assignSpoilers(){
    var parentNode = document.getElementById(this.options.mainSectionId);
    var spoilers = this.getElementsByClassName(this.options.spoilerClassName, parentNode);
    for(var i=0,j=spoilers.length; i<j; i++){
      spoilers[i].className = "spoiler-hidden";
      var div1 = document.createElement("div");
      var div2 = document.createElement("div");
      div1.className = this.options.controlClassName;
      div1.innerHTML = spoilers[i].getAttribute("title") ? spoilers[i].getAttribute("title") : this.options.defaultTitleText;
      div1.onclick = function(){WidgetSpoilerManager.toggle(this)}
      spoilers[i].removeAttribute("title");
      div2.className = this.options.textClassName;
      div2.innerHTML = spoilers[i].innerHTML;
      spoilers[i].innerHTML = "";
      spoilers[i].appendChild(div1);
      spoilers[i].appendChild(div2);
    }
  }
}
WidgetSpoilerManager.init();

Добавим немного оформления для спойлера, чтобы он красиво выглядел. Для этого встроим необходимый CSS-код в шаблон под строку "/* Accents":

/* Accents
----------------------------------------------- */
.bar {
  background: #138FD8 url('https://lh5.googleusercontent.com/-SWOQVNt9y0M/TlT5KzL9cWI/AAAAAAAAAJw/TOt-RHHd4rg/spoiler-back.gif') no-repeat;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  box-shadow: 1px 1px 1px #bbb;
  -webkit-box-shadow: 1px 1px 1px #bbb;
  -moz-box-shadow: 1px 1px 1px #bbb;
  padding-left: 30px;
  color: #fff;
  font-size: 15px;
  font-family: 'Trebuchet MS', Trebuchet, sans-serif;
  cursor: pointer;
}

.spoiler-hidden .bar {
  background-position: 0 0;
}

.spoiler, .spoiler-hidden .text {
  display: none;
}

.spoiler-visible .bar {
  background-position: 0 -20px;
  border-radius: 3px 3px 0 0;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  box-shadow: 1px 0 1px #bbb;
  -webkit-box-shadow: 1px 0 1px #bbb;
  -moz-box-shadow: 1px 0 1px #bbb;
}

.spoiler-visible .text {
  display: visible;
  padding: 5px 1em 0;
  border: 1px solid #138FD8;
  border-top-width: 0;
  border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  box-shadow: 1px 1px 1px #bbb;
  -webkit-box-shadow: 1px 1px 1px #bbb;
  -moz-box-shadow: 1px 1px 1px #bbb;
}

С подгонкой цветовой гаммы, формы спойлера и шрифтов под свой блог, думаю, сложностей возникнуть не должно :-)

Теперь о самом главном: как же активировать сие чудо? Используем для этого простую конструкцию: <div class="spoiler" title="заголовок спойлера">спрятанный текст</div>.

Есть вопросы? Спрашивайте - буду рад помочь!