[Ratchet] segmented-controllersを見る

/* ========================================================================
 * Ratchet: segmented-controllers.js v2.0.2
 * http://goratchet.com/components#segmentedControls
 * ========================================================================
 * Copyright 2014 Connor Sears
 * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
 * ======================================================================== */

!(function () {
  'use strict';

  var getTarget = function (target) {
    var i;

//modal.js,popover.jsとちがい直接的に指定することで限定している。
    var segmentedControls = document.querySelectorAll('.segmented-control .control-item');

    for (; target && target !== document; target = target.parentNode) {
      for (i = segmentedControls.length; i--;) {
        if (segmentedControls[i] === target) {
          return target;
        }
      }
    }
  };

//touchendEventに紐付け
  window.addEventListener('touchend', function (e) {
    var activeTab;
    var activeBodies;
    var targetBody;
    var targetTab     = getTarget(e.target);
    var className     = 'active';
    var classSelector = '.' + className;

    if (!targetTab) {
      return;
    }

//activeなものを検索
    activeTab = targetTab.parentNode.querySelector(classSelector);

    if (activeTab) {
//一旦削除
//一つしかactiveがない想定（変なhtmlはだめ）
      activeTab.classList.remove(className);
    }

//自分をactiveに
    targetTab.classList.add(className);

    if (!targetTab.hash) {
      return;
    }

//href でターゲットを指定
    targetBody = document.querySelector(targetTab.hash);

    if (!targetBody) {
      return;
    }

// 大きなくくりの中に、各ページが用意されている必要がある
    activeBodies = targetBody.parentNode.querySelectorAll(classSelector);

    for (var i = 0; i < activeBodies.length; i++) {
      activeBodies[i].classList.remove(className);
    }
//activeを一つへ
    targetBody.classList.add(className);
  });

  window.addEventListener('click', function (e) { if (getTarget(e.target)) {e.preventDefault();} });
}());