https://sk8-project.com/assets/js/vender/js-modal-module.js

1/*!
2 * @yama-dev/js-modal-module
3 * version 0.8.0
4 * repository https://github.com/yama-dev/js-modal-module
5 * copyright yama-dev
6 * licensed MIT
7 */
8!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}(window,function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(o,i,function(t){return e[t]}.bind(null,i));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";function o(e){try{return e instanceof HTMLElement}catch(e){return!1}}function i(e){if(!e)return!1;var t;if(!Array.isArray(e)&&!e.length||function(e){try{return"string"==typeof e}catch(e){return!1}}(e))t=o(e)?Array(e):Array.prototype.slice.call(document.querySelectorAll(e));else{if(!o(e[0]))return!1;t=Array.prototype.slice.call(e)}return 0===t.length&&(t=null),t}function a(e,t){var n=i(e);if(!n)return!1;n.map(function(e){e.classList.add(t)})}function l(e,t){var n=i(e);if(!n)return!1;n.map(function(e){e.classList.remove(t)})}function r(e,t,n){if(e===window)window.addEventListener(t,n);else{var o=i(e);if(!o)return!1;o.map(function(e){e.addEventListener(t,n)})}}function s(e,t,n){if(e===window)window.removeEventListener(t,n);else{var o=i(e);if(!o)return!1;o.map(function(e){e.removeEventListener(t,n)})}}function d(e,t){var n=i(e);if(!n)return!1;n.map(function(e){var n="";Object.keys(t).forEach(function(e){n+=e.replace(/([A-Z])/g,"-$1").toLowerCase()+":"+t[e]+";"}),e.setAttribute("style",n)})}function m(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];if(!e)return!1;for(var o in t){new RegExp("({{.?"+o+".?}})","g");var i=new RegExp("{{.?("+o+").?}}","g");e.match(i);var a=RegExp.$1;e=e.replace(i,t[a])}n&&(e=e.replace(/({{.*}})/g,""));return e}n.r(t);var u='\n<section class="m-modal {{ defaultClassName }}" id="{{ id }}" data-modal-type>\n  <div class="m-modal__bg"></div>\n  <div class="m-modal__content">\n    {{ content }}\n    <div class="m-modal__close-btn" data-modal-ui-close></div>\n  </div>\n</section>',c='\n<style id="{{ id }}-style" data-modal-type>\nbody.is-modal-open,\nbody.is-modal-overflow {\n  overflow: hidden;\n}\ntemplate {\n  display: none;\n}\n.m-modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: {{ zIndex }};\n\n  width: 100%;\n  height: 100%;\n\n  overflow: auto;\n\n  visibility: hidden;\n  -ms-touch-action: none;\n  touch-action: none;\n  pointer-events: none;\n\n  opacity: 0;\n  -webkit-transition: all {{ duration }}ms cubic-bezier(.215, .61, .355, 1) 0s;\n  transition: all {{ duration }}ms cubic-bezier(.215, .61, .355, 1) 0s;\n}\n.m-modal.is-open,\n.m-modal.is-load-start {\n  opacity: 1;\n\n  visibility: visible;\n  -ms-touch-action: auto;\n  touch-action: auto;\n  pointer-events: auto;\n}\n.m-modal.is-open {\n  -webkit-transition: all {{ duration }}ms cubic-bezier(.215, .61, .355, 1) 0s;\n  transition: all {{ duration }}ms cubic-bezier(.215, .61, .355, 1) 0s;\n}\n.m-modal.is-load-start {\n  -webkit-transition: all 0s cubic-bezier(.215, .61, .355, 1) 0s;\n  transition: all 0s cubic-bezier(.215, .61, .355, 1) 0s;\n}\n.m-modal.is-close {\n  visibility: hidden;\n  -ms-touch-action: none;\n  touch-action: none;\n  pointer-events: none;\n\n  opacity: 0;\n  -webkit-transition: all {{ duration }}ms cubic-bezier(.215, .61, .355, 1) 0s;\n  transition: all {{ duration }}ms cubic-bezier(.215, .61, .355, 1) 0s;\n}\n\n.m-modal .m-modal__bg {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.8);\n  cursor: pointer;\n}\n.is-modal-overflow .m-modal .m-modal__bg {\n  position: absolute;\n}\n.m-modal .m-modal__content {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 80%;\n  max-width: 1200px;\n  min-width: 500px;\n  height: auto;\n  text-align: center;\n}\n.is-modal-overflow-prep .m-modal .m-modal__content {\n  position: relative;\n  top: auto;\n  left: auto;\n  -webkit-transform: translate(0, 0);\n          transform: translate(0, 0);\n  margin: 50px auto;\n}\n.m-modal .m-modal__content > * {\n  width: 100%;\n  height: auto;\n}\n.m-modal .m-modal__content > * img {\n  backface-visibility: hidden;\n}\n.m-modal .m-modal__close-btn {\n  position: absolute;\n  top: -80px;\n  right: -80px;\n  width: 80px;\n  height: 80px;\n  cursor: pointer;\n}\n.m-modal .m-modal__close-btn::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 50%;\n  -webkit-transform: rotate(-45deg);\n          transform: rotate(-45deg);\n  background-color: #fff;\n  width: 1px;\n  height: 80px;\n}

8\n.m-modal .m-modal__close-btn::after {\n  content: "";\n  position: absolute;\n  top: 0px;\n  left: 50%;\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n  background-color: #fff;\n  width: 1px;\n  height: 80px;\n}\n\n@media screen and (max-height: 900px) {\n  .m-modal .m-modal__content {\n    max-width: 900px;\n  }\n}\n@media screen and (max-height: 800px) {\n  .m-modal .m-modal__content {\n    max-width: 800px;\n  }\n}\n@media screen and (max-height: 700px) {\n  .m-modal .m-modal__content {\n    max-width: 700px;\n  }\n}\n@media screen and (max-height: 600px) {\n  .m-modal .m-modal__content {\n    max-width: 600px;\n  }\n}\n\n@media screen and (max-width: 767px) {\n  .m-modal .m-modal__content {\n    width: 96%;\n    min-width: 0;\n  }\n  .m-modal .m-modal__content .m-modal__content-btn {\n    position: relative;\n    top: auto;\n    right: auto;\n    width: 84%;\n    height: auto;\n    margin: 20px auto 0;\n  }\n}\n\n@media screen and (min-width: 768px) {\n  .m-modal .is-pc { display: block; }\n  .m-modal .is-sp { display: none; }\n}\n@media screen and (max-width: 767px) {\n  .m-modal .is-pc { display: none; }\n  .m-modal .is-sp { display: block; }\n}\n{{ custom_style }}\n</style>\n';function f(){return(f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function h(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}n.d(t,"MODAL_MODULE",function(){return p});var p=function(){function e(){var t=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e);var o={id:"jmm-"+Date.now(),elem:null,elemContentId:null,elemOutputSelector:"body",elemContent:".m-modal__content",elemBg:".m-modal__bg",elemClose:"[data-modal-ui-close]",elemBtn:"[data-modal]",elemYoutubePlayerId:null,elemYoutubePlayerAspectRatio:"16:9",movie:{youtube:{height:"360",width:"640",playerVars:{autoplay:1,playsinline:1,controls:1,disablekb:0,fs:1,loop:0,rel:0}}},defaultClassName:"",duration:500,zIndex:100,removeWrapperTag:!1,defaultModalStyle:!0,customModalHtml:null,customModalStyle:null,loadStart:!1,on:{init:null,prepOpen:null,beforeOpen:null,afterOpen:null,prepClose:null,beforeClose:null,afterClose:null}};if(this.Elem={modal:null,modalContent:null,modalBg:null,modalClose:null,modalBtns:null},this.State={data:null,elemOpen:null,elemOpenHtml:"",elemOpenType:"",flg:!0},this.Events=[],this.Config=f(o,n),this.Config.elem="#".concat(this.Config.id),this.Config.elemContentId="#".concat(this.Config.id,"__content"),this.Config.elemYoutubePlayerId="".concat(this.Config.id,"__youtube"),this.Config.loadStart&&(this.Config.defaultClassName+=" is-load-start"),this.Html="",this.Player=null,this.Config.customModalHtml?this.Html+=m(this.Config.customModalHtml,{id:this.Config.id,zIndex:this.Config.zIndex,duration:this.Config.duration,content:'<div id="'.concat(this.Config.id,'__content"></div>'),defaultClassName:this.Config.defaultClassName}):this.Html+=m(u,{id:this.Config.id,zIndex:this.Config.zIndex,duration:this.Config.duration,content:'<div id="'.concat(this.Config.id,'__content"></div>'),defaultClassName:this.Config.defaultClassName}),this.Config.defaultModalStyle){var i="";i=this.Config.customModalStyle?m(c,{id:this.Config.id,zIndex:this.Config.zIndex,duration:this.Config.duration,defaultClassName:this.Config.defaultClassName,custom_style:this.Config.customModalStyle}):c,this.Html+=m(i,{id:this.Config.id,zIndex:this.Config.zIndex,defaultClassName:this.Config.defaultClassName,duration:this.Config.duration})}else this.Config.customModalStyle&&(this.Html+=m(this.Config.customModalStyle,{id:this.Config.id,zIndex:this.Config.zIndex,defaultClassName:this.Config.defaultClassName,duration:this.Config.duration}));document.querySelector("body")&&this.Config.loadStart&&this._render(),"complete"==document.readyState||"interactive"==document.readyState?(this.Config.loadStart||this._render(),this._attachEvent(),this.onInit()):(document.addEventListener("DOMContentLoaded",function(){t.Config.loadStart||t._render(),t._attachEvent(),t.onInit()}),window.addEventListener("load",function(){t._updateSize()}))}var t,n,o;return t=e,o=[{key:"outerHeight",value:function(e){var t=(e=document.querySelector(e)).offsetHeight,n=getComputedStyle(e);return t+=parseInt(n.marginTop)+parseInt(n.marginBottom)}}],(n=[{key:"_updateDom",value:function(){this.Elem.modal=i(this.Config.elem),this.Elem.modalBg=i(this.Config.elemBg),this.Elem.modalClose=i(this.Config.elemClose),this.Elem.modalBtns=i(this.Config.elemBtn)}},{key:"_updateSize",value:function(){this.State.win_w=window.innerWidth,this.State.win_h=window.innerHeight}},{key:"_render",value:function(){document.querySelector(this.Config.elemOutputSelector).insertAdjacentHTML("beforeend",this.Html)}},{key:"_attachEvent",value:function(){var e=this;if(this._updateDom(),this._updateSize(),!this.Elem.modal)throw new Error("Not Found Modal Element.");if(!this.Elem.modalBg)throw new Error("Not Found ModalBg Element.");r(this.Elem.modalBtns,"click",function(t){var n=t.currentTarget.getAttribute(e.Config.elemBtn.replace(/(\[|\])/g,""));e.State.elemOpen=t.currentTarget,e.Open(n,t.currentTarget)})}},{key:"_setContent",value:function(e){!function(e,t){var n=i(e);if(!n)return!1;n.map(function(e){e.innerHTML=t})}("".concat(this.Config.elem," ").concat(this.Config.elemContentId),e)}},{key:"_youtube",value:function(e){var t=this,n={height:"360",width:"640",videoId:e,playerVars:{autoplay:1,playsinline:1,rel:0},events:{onReady:function(e){n.playerVars.autoplay&&e.target.playVideo()},onStateChange:function(e){e.data==YT.PlayerState.ENDED&&t.Close()}}};if(n=f(n,this.Config.movie.youtube),window.YT)t.Player=new YT.Player(t.Config.elemYoutubePlayerId,n);else{var o=document.createElement("script");o.src="https://www.youtube.com/iframe_api";var i=document.getElementsByTagName("script")[0];i.parentNode.insertBefore(o,i),o.onload=function(){window.onYouTubeIframeAPIReady=function(){t.Player=new YT.Player(t.Config.elemYoutubePlayerId,n)}}}}},{key:"Open",value:function(e,t){var n=this;if(!e)throw new Error("Not Found Modal data.");

8if(!this.State.flg)return!1;if(this.State.flg=!1,this.State.data=e,this.State.elemOpenHtml="",this.onPrepOpen(e,t),a(document.body,"is-modal-open"),a(this.Elem.modal,"is-open"),l(this.Elem.modal,"is-close"),/img:/.test(this.State.data)){var o=this.State.data.match(/d*:(.*)$/)[1];this.State.elemOpenHtml='<img src="'.concat(o,'">'),this.State.elemOpenType="img"}if(/youtube:/.test(this.State.data)){var s=this.Config.elemYoutubePlayerAspectRatio.split(/[\/:]/),d=56.25;2==s.length&&(d=Number(s[1])/Number(s[0])*100),this.State.elemOpenHtml='<div id="'.concat(this.Config.elemYoutubePlayerId,'-wrap">\n        <style>\n        #').concat(this.Config.elemYoutubePlayerId,"-wrap {\n          position: relative;\n        }\n        #").concat(this.Config.elemYoutubePlayerId,"-wrap::before {\n          content: '';\n          display: block;\n          width: 100%;\n          padding-top: ").concat(d,"%;\n        }\n        #").concat(this.Config.elemYoutubePlayerId,' {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n        }\n        </style>\n        <div id="').concat(this.Config.elemYoutubePlayerId,'"></div>\n        </div>'),this.State.elemOpenType="youtube"}if(/^(\.|\#)/.test(this.State.data)){var m=this.State.data.match(/(.*)$/)[1];if(!this.State.elemOpen){if(1!==i(m).length)throw new Error("Not Found append data.");this.State.elemOpen=document.body}this.State.elemOpen.querySelector(m)?this.Config.removeWrapperTag?this.State.elemOpenHtml=this.State.elemOpen.querySelector(m).innerHTML:this.State.elemOpenHtml=this.State.elemOpen.querySelector(m).outerHTML:this.State.elemOpen.parentNode.querySelector(m)&&(this.Config.removeWrapperTag?this.State.elemOpenHtml=this.State.elemOpen.parentNode.querySelector(m).innerHTML:this.State.elemOpenHtml=this.State.elemOpen.parentNode.querySelector(m).outerHTML),this.State.elemOpenType="element"}if(/^(template)/.test(this.State.data)){var u=this.State.data.match(/(.*)$/)[1];if(!this.State.elemOpen){if(1!==i(u).length)throw new Error("Not Found append data.");this.State.elemOpen=document.body}this.State.elemOpen.querySelector(u)?this.State.elemOpenHtml=this.State.elemOpen.querySelector(u).innerHTML:this.State.elemOpen.parentNode.querySelector(u)&&(this.State.elemOpenHtml=this.State.elemOpen.parentNode.querySelector(u).innerHTML),this.State.elemOpenType="template"}if(/^(group:)/.test(this.State.data)){var c=this.State.data.match(/d*:(.*)$/)[1];if(!this.State.elemOpen){if(1!==i(c).length)throw new Error("Not Found append data.");this.State.elemOpen=document.body}this.State.elemOpen.parentNode.querySelector(c)&&i(this.State.elemOpen.parentNode.querySelectorAll(c)).map(function(e){n.State.elemOpenHtml+=e.innerHTML}),this.State.elemOpenType="group"}if(this.onBeforeOpen(e,t),this._setContent(this.State.elemOpenHtml),"youtube"==this.State.elemOpenType){var f=this.State.data.match(/d*:(.*)$/)[1];this._youtube(f)}this.Elem.modal[0].setAttribute("data-modal-type",this.State.elemOpenType),this.Events.modalBg=function(){n.Close()},this.Events.modalClose=function(){n.Close()},r(this.Elem.modalBg,"click",this.Events.modalBg),r(this.Elem.modalClose,"click",this.Events.modalClose),setTimeout(function(){n.onAfterOpen(e,t)},this.Config.duration),/<img.*?src\s*=\s*[\"|\'](.*?)[\"|\'].*?>/.test(this.State.elemOpenHtml)?i("".concat(this.Config.elem," ").concat(this.Config.elemContentId," img"))[0].addEventListener("load",function(){n.UpdateModal()}):this.UpdateModal()}},{key:"Close",value:function(){var e=this;this.onPrepClose(),l(document.body,"is-modal-open"),l(this.Elem.modal,"is-load-start"),l(this.Elem.modal,"is-open"),a(this.Elem.modal,"is-close"),l(document.body,"is-modal-overflow"),this.onBeforeClose(),s(this.Elem.modalBg,"click",this.Events.modalBgClose),s(this.Elem.modalClose,"click",this.Events.modalClose),setTimeout(function(){e.onAfterClose(),e._setContent("\x3c!-- none --\x3e"),e.Elem.modal[0].setAttribute("data-modal-type",""),l(document.body,"is-modal-overflow-prep"),d("".concat(e.Config.elem," ").concat(e.Config.elemContent),{height:""}),e.State.flg=!0},this.Config.duration)}},{key:"UpdateModal",value:function(){var t=document.querySelector("".concat(this.Config.elem," ").concat(this.Config.elemContentId)).clientHeight;if(t>=this.State.win_h){a(document.body,"is-modal-overflow-prep"),a(document.body,"is-modal-overflow"),d("".concat(this.Config.elem," ").concat(this.Config.elemContent),{height:"".concat(t,"px")});var n=e.outerHeight("".concat(this.Config.elem," ").concat(this.Config.elemContent));d("".concat(this.Config.elem," ").concat(this.Config.elemBg),{height:"".concat(n,"px")})}else a(document.body,"is-modal-overflow-prep"),l(document.body,"is-modal-overflow-prep"),l(document.body,"is-modal-overflow"),d("".concat(this.Config.elem," ").concat(this.Config.elemBg),{height:""}),d("".concat(this.Config.elem," ").concat(this.Config.elemContent),{height:""})}},{key:"onInit",value:function(){this.Config.on.init&&this.Config.on.init()}},{key:"onPrepOpen",value:function(e,t){this.Config.on.prepOpen&&this.Config.on.prepOpen(e,t,this.State,this.Elem)}},{key:"onBeforeOpen",value:function(e,t){this.Config.on.beforeOpen&&this.Config.on.beforeOpen(e,t,this.State,this.Elem)}},{key:"onAfterOpen",value:function(e,t){this.Config.on.afterOpen&&this.Config.on.afterOpen(e,t,this.State,this.Elem)}},{key:"onPrepClose",value:function(){this.Config.on.prepClose&&this.Config.on.prepClose()}},{key:"onBeforeClose",value:function(){this.Config.on.beforeClose&&this.Config.on.beforeClose()}},{key:"onAfterClose",value:function(){this.Config.on.afterClose&&this.Config.on.afterClose()}}])&&h(t.prototype,n),o&&h(t,o),e}()}])});