\n モーダルの中身\n
\n\n 実行\n default\n const simplemodal = new Simplemodal();\n\n custom Example\n const simplemodal = new Simplemodal(\".hoge\",{\n trigger: \"data-hoge-trigger\",\n backFixed: false,\n });\n*/\n\nconst simplemodal = (() => {\n //https://gist.github.com/ark-tds/cf5e0ecbf9311043823c869defa70b28\n const FOCUSABLE_ELEMENTS = [\n 'a[href]',\n 'area[href]',\n 'input:not([disabled]):not([type=\"hidden\"]):not([aria-hidden])',\n 'select:not([disabled]):not([aria-hidden])',\n 'textarea:not([disabled]):not([aria-hidden])',\n 'button:not([disabled]):not([aria-hidden])',\n 'iframe',\n 'object',\n 'embed',\n '[contenteditable]',\n '[tabindex]:not([tabindex^=\"-\"])'\n ]\n\n return class Simplemodal {\n constructor(options) {\n\n const defaultOptions = {\n triggers: [],\n trigger: \"data-simplemodal-trigger\",\n backFixed: true,\n multipleOpen: false,\n clickOutSideClose: false,\n onOpen: () => { },\n onClose: () => { }\n }\n\n this.options = this.mergeOptions(defaultOptions, options)\n\n this.initialized = false;\n\n this.triggerEvent = [];\n this.windowResizeEvent = null;\n this.onKeydown = this.onKeydown.bind(this)\n\n this.transitionendEvent = null\n\n this.clickOutSideCloseEvent = null\n\n this.expanded = {\n trigger: [],\n content: []\n }\n\n this.popoverUpdateReizeEvent = null\n this.popoverUpdateScrollEvent = null\n\n this.init()\n }\n\n init() {\n //トリガーとパネルに属性を付与\n this.setUpAttribute(this.options.triggers);\n\n this.triggerEvent = [];\n this.triggerEvent = this.registerTriggerEvent();\n\n this.initialized = true;\n }\n\n mergeOptions(defaultOptions, options) {\n const mergeOptions = Object.assign(defaultOptions, options || {});\n mergeOptions.triggers = [...document.querySelectorAll(`[${mergeOptions.trigger}]`)]\n\n return mergeOptions\n }\n\n setUpAttribute(triggers) {\n triggers.forEach((trigger, index) => {\n let id = trigger.getAttribute(this.options.trigger);\n let content = document.getElementById(id);\n if (!id || !content) return\n trigger.setAttribute('aria-expanded', \"false\");\n trigger.setAttribute('aria-controls', id);\n content.setAttribute('aria-hidden', \"true\");\n });\n }\n\n registerTriggerEvent() {\n //トリガーをクリックしたときのイベント設定\n let register = [];\n this.options.triggers.forEach((trigger, index) => {\n register.push(this.attachEvent(trigger, 'click', this.triggerClick.bind(this, trigger)))\n register[index].addEvent();\n });\n return register;\n }\n\n triggerClick(trigger, event) {\n //defaultのクリックイベントを無効にするか\n if(!event.currentTarget.dataset.prevent) {\n event.preventDefault();\n }\n // const trigger = event.target;\n const content = document.querySelector(`#${trigger.getAttribute('aria-controls')}`)\n\n if (trigger.getAttribute('aria-expanded') == \"false\") {\n this.modalOpen(trigger, content, event);\n } else {\n this.modalClose(trigger, content, event);\n }\n\n }\n\n modalOpen(trigger, content, event) {\n\n //複数モーダルを開かない場合は全てのモーダルを閉じる\n if (!this.options.multipleOpen) this.closeAllModal();\n\n this.attachEvent(document, \"keydown\", this.onKeydown).addEvent();\n\n if(event) {\n if(event.currentTarget.dataset.popover) this.popover(true, trigger, content, event);\n }\n\n //モーダル外側クリック時のイベント登録\n if (this.options.clickOutSideClose) {\n this.clickOutSideCloseEvent = this.attachEvent(document, \"click\", this.clickOutSideClose.bind(this, trigger, content))\n this.clickOutSideCloseEvent.addEvent();\n }\n\n this.options.triggers.forEach((t, index) => {\n if (t.getAttribute('aria-controls') == trigger.getAttribute('aria-controls')) {\n t.setAttribute('aria-expanded', \"true\");\n t.classList.remove(\"is-close\");\n t.classList.add(\"is-open\");\n }\n });\n content.setAttribute('aria-hidden', \"false\");\n content.classList.remove(\"is-close\");\n content.classList.add(\"is-open\");\n\n if (this.options.backFixed) this.backFixed(true);\n\n\n this.expanded.trigger.push(trigger);\n this.expanded.content.push(content);\n\n this.options.onOpen(trigger, content)\n\n }\n\n popover(popover, trigger, content, event) {\n\n if(popover) {\n\n content.style.position = \"absolute\"\n // content.style.zIndex = \"1000\"\n // content.style.width = \"200px\"\n\n this.setPopoverPosition(trigger, content)\n \n // `${event.currentTarget.getBoundingClientRect().left + event.currentTarget.clientWidth - content.getBoundingClientRect().width + 1}px`\n this.popoverUpdateReizeEvent = this.attachEvent(window, \"resize\", this.setPopoverPosition.bind(this, trigger, content))\n this.popoverUpdateScrollevent = this.attachEvent(window, \"scroll\", this.setPopoverPosition.bind(this, trigger, content))\n\n this.popoverUpdateReizeEvent.addEvent()\n this.popoverUpdateScrollevent.addEvent()\n\n } else {\n if(this.popoverUpdateReizeEvent) this.popoverUpdateReizeEvent.removeEvent()\n if(this.popoverUpdateScrollevent) this.popoverUpdateScrollevent.removeEvent()\n content.style.position = \"\"\n content.style.top = \"\"\n content.style.left = \"\"\n }\n \n\n }\n\n setPopoverPosition(trigger, content) {\n // console.log(event.currentTarget.clientHeight + this.getScrollY())\n const triggerWidth = trigger.getBoundingClientRect().width\n const triggerHeight = trigger.getBoundingClientRect().height\n const triggerLeft = trigger.getBoundingClientRect().left\n const triggerRight = window.innerWidth - trigger.getBoundingClientRect().right\n const triggerTop = trigger.getBoundingClientRect().top\n\n const offset = trigger.dataset.popoverOffset ? Number(trigger.dataset.popoverOffset) : 0\n\n const scrollPosition = this.getScrollY()\n \n const contentWidth = content.getBoundingClientRect().width\n\n\n //画面外にはみ出た分のモーダル（popover）の長さ\n const rightOffScreenContent = (contentWidth / 2) - (triggerRight + triggerWidth / 2) >= 0\n ? (contentWidth / 2) - (triggerRight + triggerWidth / 2)\n : 0\n const leftOffScreenContent = (contentWidth / 2) - (triggerLeft + triggerWidth / 2) >= 0\n ? (contentWidth / 2) - (triggerLeft + triggerWidth / 2)\n : 0\n\n // console.log(rightOffScreenContent)\n // console.log(leftOffScreenContent)\n\n content.style.top = triggerTop + triggerHeight + scrollPosition + offset + \"px\"\n content.style.left = triggerLeft + triggerWidth - (triggerWidth / 2 + contentWidth / 2) - rightOffScreenContent + leftOffScreenContent + \"px\"\n\n }\n\n\n modalClose(trigger, content, event) {\n\n this.options.triggers.forEach((t, index) => {\n if (t.getAttribute('aria-controls') == trigger.getAttribute('aria-controls')) {\n t.setAttribute('aria-expanded', \"false\");\n t.classList.remove(\"is-open\");\n t.classList.add(\"is-close\");\n }\n });\n\n content.setAttribute('aria-hidden', \"true\");\n content.classList.remove(\"is-open\");\n content.classList.add(\"is-close\");\n\n if (this.options.backFixed) this.backFixed();\n\n this.expanded.trigger.pop();\n this.expanded.content.pop();\n\n if (!this.expanded.content.length) {\n this.attachEvent(document, \"keydown\", this.onKeydown).removeEvent();\n }\n\n //モーダル外側クリック時のイベント削除\n if (this.options.clickOutSideClose) {\n this.clickOutSideCloseEvent.removeEvent();\n }\n\n this.popover(false, trigger, content, event);\n\n this.options.onClose(trigger, content)\n }\n\n\n\n closeAllModal() {\n // console.log(this.expanded.trigger.length)\n if (this.expanded.trigger.length) {\n this.expanded.trigger.forEach((trigger) => {\n const content = document.querySelector(`#${trigger.getAttribute('aria-controls')}`)\n this.modalClose(trigger, content);\n })\n }\n }\n\n onKeydown(event) {\n // esc\n if (event.keyCode === 27) {\n // console.log(this.expanded.content[this.expanded.content.length - 1])\n this.expanded.trigger[this.expanded.trigger.length - 1].focus()\n this.modalClose(this.expanded.trigger[this.expanded.trigger.length - 1], this.expanded.content[this.expanded.content.length - 1], event)\n }\n //tab\n if (event.keyCode === 9) {\n this.retainFocus(event)\n }\n }\n\n retainFocus(event) {\n let focusableNodes = this.getFocusableNodes()\n\n if (focusableNodes.length === 0) return\n\n const focusedItemIndex = focusableNodes.indexOf(document.activeElement)\n\n //外側にフォーカスしている場合は強制的にモーダルの最初の要素をフォーカス\n if (focusedItemIndex === -1) {\n focusableNodes[0].focus()\n event.preventDefault()\n }\n\n if (event.shiftKey && focusedItemIndex === 0) {\n focusableNodes[focusableNodes.length - 1].focus()\n event.preventDefault()\n }\n\n if (!event.shiftKey && focusableNodes.length > 0 && focusedItemIndex === focusableNodes.length - 1) {\n focusableNodes[0].focus()\n event.preventDefault()\n }\n\n }\n\n getFocusableNodes() {\n const nodes = this.expanded.content[this.expanded.content.length - 1].querySelectorAll(FOCUSABLE_ELEMENTS)\n return [...nodes]\n }\n\n backFixed(fixed) {\n\n //固定するスクロール要素を取得(htmlもしくはbody)\n /**\n * @see {@link https://canonono.com/web/js/scrolling-element}\n */\n const scrollElement = 'scrollingElement' in document\n ? document.scrollingElement\n : document.documentElement;\n\n //現在のスクロール量をセット、すでに固定されている場合はscrollElementにセットされているtopの値を使用\n const scrollY = fixed\n ? this.getScrollY()\n : parseInt(scrollElement.style.top);\n\n //固定用CSS\n const styles = {\n position: 'fixed',\n top: `${scrollY * -1}px`,\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n };\n\n //scrollElementに固定用CSSを反映\n for (const key in styles) {\n scrollElement.style[key] = fixed\n ? styles[key]\n : '';\n }\n\n !fixed ? scrollElement.classList.remove(\"is-backFixed\") : scrollElement.classList.add(\"is-backFixed\");\n\n //固定解除で元の位置にスクロール\n if (!fixed) window.scrollTo(0, scrollY * -1);\n };\n\n\n \n open(modalID, options) {\n if (!document.querySelector(`[${this.options.trigger}=\"${modalID}\"]`)) return\n // console.log(document.querySelector(`[${this.options.trigger}=\"${modalID}\"]`))\n const trigger = document.querySelector(`[${this.options.trigger}=\"${modalID}\"]`)\n const content = document.querySelector(`#${trigger.getAttribute('aria-controls')}`)\n // console.log(this.options);\n this.options = this.mergeOptions(this.options, options)\n this.modalOpen(trigger, content)\n }\n \n close(modalID, options) {\n if (!document.querySelector(`[${this.options.trigger}=\"${modalID}\"]`)) return\n // console.log(document.querySelector(`[${this.options.trigger}=\"${modalID}\"]`))\n const trigger = document.querySelector(`[${this.options.trigger}=\"${modalID}\"]`)\n const content = document.querySelector(`#${trigger.getAttribute('aria-controls')}`)\n // console.log(this.options);\n this.options = this.mergeOptions(this.options, options)\n this.modalClose(trigger, content)\n }\n\n updateOptions(modalID, options) {\n if (!document.querySelector(`[${this.options.trigger}=\"${modalID}\"]`)) return\n this.options = this.mergeOptions(this.options, options)\n }\n\n clickOutSideClose(trigger, content, e) {\n\n const id = trigger.getAttribute(this.options.trigger)\n\n if (!e.target.closest(`#${id}`) && !e.target.closest(`[${this.options.trigger}]`)) {\n\n if (!this.expanded.content.includes(content)) return\n\n this.modalClose(trigger, content)\n }\n }\n\n\n\n /**\n * @see {@link https://gist.github.com/think49/4431f6909b31b0c154c2054f94c546c0}\n */\n getScrollY() {\n if ('scrollY' in window) return window.scrollY;\n if ('pageYOffset' in window) return window.pageYOffset;\n\n const doc = window.document;\n\n return doc.compatMode === 'CSS1Compat' ? doc.documentElement.scrollTop : doc.body.scrollTop;\n }\n\n\n\n attachEvent(element, type, listener, options) {\n return {\n addEvent() {\n element.addEventListener(type, listener, options);\n },\n removeEvent() {\n element.removeEventListener(type, listener);\n }\n }\n }\n\n }\n\n function convertElement(obj) {\n if (obj instanceof HTMLElement) {\n return obj\n }\n if (obj instanceof jQuery) {\n return obj[0]\n }\n return document.querySelector(obj);\n }\n\n})();\n\nexport default simplemodal;\n\n\n// const simplemodal = new Simplemodal()\n// window.simplemodal = simplemodal\n\n\n// const simplepopover = new Simplemodal({\n// trigger : \"data-popover-trigger\",\n// clickOutSideClose : true,\n// backFixed : false\n// })\n\n// const fullScreenMenu = new Simplemodal({\n// trigger : \"data-fullScreenMenu-trigger\",\n// clickOutSideClose : true\n// })\n\n// const sideFixedMenuButtons = new Simplemodal({\n// trigger : \"data-sideFixedMenuButtons-trigger\",\n// clickOutSideClose : true,\n// backFixed : false\n// })\n","const tab = (() => {\r\n return class Tab {\r\n constructor(rootElement = \".js-tab\", options) {\r\n // console.log(isElement(rootElement[0]))\r\n this.tabRootElement = convertElement(rootElement);\r\n this.options = {\r\n tabWrapper: \".js-tab-list\",\r\n tabs: \".js-tab-button\",\r\n panelWrapper: \".js-tab-panel-wrapper\",\r\n panels: \".js-tab-panel\",\r\n defaultOpenPanel: 0\r\n }\r\n this.tabEvent = [];\r\n\r\n this.initialized = false;\r\n\r\n //外部から入力された設定をマージ\r\n this.mergedOptions(options);\r\n\r\n //タブの親要素がない場合は終了\r\n if(!this.tabRootElement) return;\r\n\r\n this.init()\r\n\r\n }\r\n\r\n init() {\r\n this.options.tabWrapper = this.tabRootElement.querySelector(this.options.tabWrapper);\r\n this.options.tabs = [...this.tabRootElement.querySelectorAll(this.options.tabs)];\r\n this.options.panelWrapper = this.tabRootElement.querySelector(this.options.panelWrapper);\r\n this.options.panels = [...this.tabRootElement.querySelectorAll(this.options.panels)];\r\n\r\n //トリガーとパネルに属性を付与\r\n this.setUpAttribute(this.options.tabs, this.options.panels)\r\n\r\n if (!(this.tabEvent.length == this.options.tabs.length)) {\r\n //トリガーをクリックしたときのイベント設定\r\n this.options.tabs.forEach((tab, index) => {\r\n this.tabEvent.push(this.attachEvent(tab, 'click', this.switchContent.bind(this)))\r\n this.tabEvent[index].addEvent();\r\n });\r\n }\r\n\r\n this.initialized = true;\r\n }\r\n\r\n mergedOptions(options) {\r\n this.options = Object.assign(this.options, options || {});\r\n }\r\n\r\n setUpAttribute(tabs, panels) {\r\n const randomId = Math.random().toString(36).slice(2);\r\n this.options.tabWrapper.setAttribute(\"role\", \"tab-list\")\r\n tabs.forEach((tab, index) => {\r\n tab.setAttribute(\"id\", `tab-button-${randomId}-${index}`);\r\n tab.setAttribute(\"role\", \"tab\");\r\n tab.setAttribute(\"aria-controls\", `tab-panel-${randomId}-${index}`);\r\n tab.setAttribute(\"aria-selected\", \"false\");\r\n });\r\n panels.forEach((panel, index) => {\r\n panel.setAttribute(\"id\", `tab-panel-${randomId}-${index}`);\r\n panel.setAttribute(\"role\", \"tab-panel\");\r\n panel.setAttribute(\"aria-hidden\", \"true\");\r\n panel.style.display = \"none\";\r\n });\r\n //最初に開きたいパネルを開く\r\n this.defaultOpenPanel(this.options.defaultOpenPanel)\r\n }\r\n\r\n switchContent(e) {\r\n e.preventDefault();\r\n const tab = e.target;\r\n const panel = document.querySelector(`#${e.target.getAttribute('aria-controls')}`)\r\n\r\n if (tab.getAttribute('aria-selected') == \"false\") {\r\n this.hideContents();\r\n this.showContent(tab, panel);\r\n }\r\n\r\n }\r\n\r\n showContent(tab, panel) {\r\n tab.setAttribute(\"aria-selected\", \"true\");\r\n panel.setAttribute(\"aria-hidden\", \"false\");\r\n panel.style.display = \"\";\r\n }\r\n\r\n hideContents() {\r\n this.options.tabs.forEach((tab, index) => {\r\n tab.setAttribute(\"aria-selected\", \"false\");\r\n });\r\n this.options.panels.forEach((panel, index) => {\r\n panel.setAttribute(\"aria-hidden\", \"true\");\r\n panel.style.display = \"none\";\r\n });\r\n }\r\n\r\n defaultOpenPanel(index) {\r\n const tab = this.options.tabs[index];\r\n const panel = this.options.panels[index]\r\n this.showContent(tab, panel);\r\n }\r\n\r\n attachEvent(element, type, listener, options) {\r\n return {\r\n addEvent() {\r\n element.addEventListener(type, listener, options);\r\n },\r\n removeEvent() {\r\n element.removeEventListener(type, listener);\r\n }\r\n }\r\n }\r\n }\r\n\r\n function convertElement(obj) {\r\n if(obj instanceof HTMLElement) {\r\n return obj\r\n }\r\n if(obj instanceof jQuery) {\r\n return obj[0]\r\n }\r\n return document.querySelector(obj);\r\n }\r\n\r\n})();\r\n\r\nexport default tab;\r\n","const UAParser = require('ua-parser-js');\r\n\r\nconst ua = (() => {\r\n \r\n class UA {\r\n constructor() {\r\n this.uaParser = UAParser();\r\n this.body = document.querySelector('body');\r\n }\r\n\r\n init() {\r\n this.setUA();\r\n }\r\n\r\n getBrowser() {\r\n return this.uaParser.browser.name.replace(/\\s+/g, \"\").toLowerCase();\r\n }\r\n\r\n getDevice() {\r\n const type = this.uaParser.device.type;\r\n let type_result = \"\";\r\n if (type == 'mobile') {\r\n type_result = 'sp';\r\n } else if (type == 'tablet') {\r\n type_result = 'tb';\r\n } else {\r\n type_result = 'pc';\r\n }\r\n return type_result;\r\n }\r\n\r\n getModel() {\r\n return this.uaParser.device.model ? this.uaParser.device.model.replace(/\\s+/g, \"\").toLowerCase() : \"\";\r\n }\r\n\r\n getOS() {\r\n return this.uaParser.os.name.replace(/\\s+/g, \"\").toLowerCase();\r\n }\r\n\r\n setUA() {\r\n this.body.classList.add(`ua-${this.getBrowser()}`);\r\n this.body.classList.add(`ua-${this.getDevice()}`);\r\n if (this.getModel()) {\r\n this.body.classList.add(`ua-${this.getModel()}`);\r\n }\r\n this.body.classList.add(`ua-${this.getOS()}`);\r\n }\r\n\r\n }\r\n return new UA();\r\n\r\n})();\r\n\r\nexport default ua;\r\n\r\n\r\n//使い方\r\n// import ua from '../../plugins/userAgent.js';\r\n// ua.init();\r\n\r\n\r\n\r\n// var result = UAParser();\r\n// console.log(result)\r\n// console.log(result.browser.name.replace(/\\s+/g, \"\").toLowerCase())\r\n\r\n\r\n// var bs = result.browser.name.replace(/\\s+/g, \"\").toLowerCase();\r\n// var ua_type = function () {\r\n// var type = result.device.type;\r\n// var type_result = \"\";\r\n// if (type == 'mobile') {\r\n// type_result = 'sp';\r\n// } else if (type == 'tablet') {\r\n// type_result = 'tb';\r\n// } else {\r\n// type_result = 'pc';\r\n// }\r\n// return type_result;\r\n// }\r\n// var ua_model = result.device.model ? result.device.model.replace(/\\s+/g, \"\").toLowerCase() : \"\";\r\n// var ua_os = result.os.name.replace(/\\s+/g, \"\").toLowerCase();\r\n\r\n// $(\"body\").addClass(\"ua-\" + bs);\r\n// $(\"body\").addClass(\"ua-\" + ua_type());\r\n// if (ua_model) {\r\n// $(\"body\").addClass(\"ua-\" + ua_model);\r\n// }\r\n// $(\"body\").addClass(\"ua-\" + ua_os);\r\n\r\n","//https://developer.mozilla.org/ja/docs/Web/API/Element/closest#Polyfill\nif (!Element.prototype.matches) {\n Element.prototype.matches = Element.prototype.msMatchesSelector || \n Element.prototype.webkitMatchesSelector;\n}\n\nif (!Element.prototype.closest) {\n Element.prototype.closest = function(s) {\n var el = this;\n\n do {\n if (el.matches(s)) return el;\n el = el.parentElement || el.parentNode;\n } while (el !== null && el.nodeType === 1);\n return null;\n };\n}","function common(context: any) {\r\n context.keys().forEach(context)\r\n}\r\n\r\ncommon(require.context('./modules/', true, /\\.ts$/))\r\n\r\n\r\n\r\n","var map = {\n\t\"./common/hoge.ts\": \"./src/ts/modules/common/hoge.ts\"\n};\n\n\nfunction webpackContext(req) {\n\tvar id = webpackContextResolve(req);\n\treturn __webpack_require__(id);\n}\nfunction webpackContextResolve(req) {\n\tvar id = map[req];\n\tif(!(id + 1)) { // check for number or string\n\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\te.code = 'MODULE_NOT_FOUND';\n\t\tthrow e;\n\t}\n\treturn id;\n}\nwebpackContext.keys = function webpackContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackContext.resolve = webpackContextResolve;\nmodule.exports = webpackContext;\nwebpackContext.id = \"./src/ts/modules sync recursive \\\\.ts$\";","// import pagePositionNav from '../../plugins/pagePositionNav';\r\n// pagePositionNav.init();\r\n// class Hoge {\r\n\r\n// aaaa;\r\n// b: string;\r\n\r\n// constructor() {\r\n// this.aaaa = document.querySelectorAll(\".js-scrollNav-section\")\r\n// this.b = \"3\"\r\n// }\r\n\r\n// init() {\r\n// console.log(this.b)\r\n// }\r\n// }\r\n\r\n// let ccc = new Hoge;\r\n// ccc.init();\r\n\r\n// type Coin = 10 | 50 | 100 | 500;\r\n// type Bill = 1000;\r\n// type Money = Coin | Bill;\r\n\r\n// function insertMoney (money: Money) { \r\n\r\n// console.log(money);\r\n// }\r\n\r\n// insertMoney(1000);"],"sourceRoot":""}