/* ========================================================================
* 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);
}());
2015年4月4日土曜日
[Ratchet] popoverをみる
ラベル:
ratchet
登録:
コメントの投稿 (Atom)
0 件のコメント:
コメントを投稿