2015年4月4日土曜日

[Ratchet] popoverをみる

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

!(function () {
  'use strict'; //厳密モード

  var popover;

/*
Modalと同じ
*/
  var findPopovers = function (target) {
    var i;
    var popovers = document.querySelectorAll('a');

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

/*
閉じる
*/
  var onPopoverHidden = function () {
    popover.style.display = 'none';
    popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
  };

/*
後ろに薄い背景のこと
*/
  var backdrop = (function () {
    var element = document.createElement('div');
    element.classList.add('backdrop');

/*
backdropをタッチでクローズ処理
*/
    element.addEventListener('touchend', function () {
//element.addEventListener('touchend', function (e) {
      popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
      popover.classList.remove('visible');
      popover.parentNode.removeChild(backdrop);
//e.preventDefault(); 
    });

    return element;
  }());

/*
Modalと基本ロジック同じだが、例外処理(try/catch)をしている
*/
  var getPopover = function (e) {
    var anchor = findPopovers(e.target);

    if (!anchor || !anchor.hash || (anchor.hash.indexOf('/') > 0)) {
      return;
    }

    try {
      popover = document.querySelector(anchor.hash);
    }
    catch (error) {
      popover = null;
    }

    if (popover === null) {
      return;
    }

    if (!popover || !popover.classList.contains('popover')) {
      return;
    }
    return popover;
  };

/*
PopOverを表示するよう登録
*/
  var showHidePopover = function (e) {
    var popover = getPopover(e);

    if (!popover) {
      return;
    }

    popover.style.display = 'block';
    popover.offsetHeight;
    popover.classList.add('visible');

    popover.parentNode.appendChild(backdrop);
  };

//touchendイベントにbind
  window.addEventListener('touchend', showHidePopover);

}());

0 件のコメント:

コメントを投稿