https://www.insource.co.jp/common/js/gnavi_webins.js?date=260909

1var gNavWebins = gNavWebins || {};
2gNavWebins.popup = {
3  selectorBtn: '.js_webinBtn',
4  selectorBtnTarget: '.js_webinBtn__target',
5  elBtn: null,
6  elBtnTarget: null,
7  elCss: null,
8  fragment: null,
9  isShow: false,
10  type: 'bottom',
11  timerClose: null,
12  timeClose: 500,
13  template: '<div class="gnavWenbin">'
14    +   '<div class="gnavWenbin__inner">'
15    +     '<ul class="gnavWenbin__btns">'
16    +       '<li class="gnavWenbin__btn"><a class="gnavWenbin__btnTarget gnavWenbin__btnTarget--login" href="https://secure.insource.co.jp/webinsource/" target="_blank">会員ログイン</a></li>'
17    +       '<li class="gnavWenbin__btn"><a class="gnavWenbin__btnTarget gnavWenbin__btnTarget--regist" href="/webins/application.html" target="_blank">新規会員登録</a></li>'
18    +     '</ul>'
19    +     '<ul class="gnavWenbin__links">'
20    +       '<li class="gnavWenbin__link"><a class="gnavWenbin__linkTarget gnavWenbin__linkTarget--colorBup" href="/webins/index.html" target="_blank">WEBinsourceとは</a></li>'
21    +       '<li class="gnavWenbin__link"><a class="gnavWenbin__linkTarget gnavWenbin__linkTarget--colorBup" href="/webins/faq/index.html" target="_blank">よくあるご質問</a></li>'
22    +       '<li class="gnavWenbin__link"><a class="gnavWenbin__linkTarget gnavWenbin__linkTarget--colorBup" href="/webins/rule.html" target="_blank">WEBinsource利用規約</a></li>'
23    +     '</ul>'
24    +   '</div>'
25    + '</div>',
26  setEl: function(){
27    this.elBtn = document.querySelector(this.selectorBtn);
28    if(!this.elBtn){return;}
29    this.elBtnTarget = this.elBtn.querySelector(this.selectorBtnTarget);
30    this.elCss =  document.querySelector('[href*="gnavi_webins.css"]');
31  },
32  createEl: function(){
33    var tempDiv = document.createElement('div');
34    this.fragment = document.createDocumentFragment();
35    tempDiv.innerHTML = this.template;
36    this.el = tempDiv.firstElementChild;
37    this.fragment.appendChild(this.el);
38    if(this.type === 'top'){
39      this.fragment.firstElementChild.classList.add('is_top')
40    }
41  },
42  addEl: function(){
43    this.elBtn.appendChild(this.fragment);
44  },
45  setClass: function(){
46    if(this.isShow){
47      this.elBtnTarget.classList.add('is_show');
48      this.el.classList.add('is_show');
49    }else{
50      this.elBtnTarget.classList.remove('is_show');
51      this.el.classList.remove('is_show');
52    }
53  },
54  handleMouseenter: function(){
55    if(this.timerClose !== null){
56      clearTimeout(this.timerClose);
57      this.timerClose = null;
58    }
59    this.isShow = true;
60    this.setClass();
61  },
62  handleMouseleave: function(){
63    this.isMouseOn = false;
64    if(this.timerClose === null){
65      this.timerClose = setTimeout(function(){
66        this.isShow = false;
67        this.setClass();
68        clearTimeout(this.timerClose);
69        this.timerClose = null;
70      }.bind(this), this.timeClose);
71    }
72  },
73  handleClick: function(ev){
74    ev.preventDefault();
75    setTimeout(function(){
76      window.open('https://secure.insource.co.jp/webinsource/', '_blank');
77    }, 0);
78  },
79  setEv: function(){
80    this.elBtnTarget.addEventListener('click', this.handleClick.bind(this), false);
81    this.elBtnTarget.addEventListener('mouseenter', this.handleMouseenter.bind(this), false);
82    this.el.addEventListener('mouseenter', this.handleMouseenter.bind(this), false);
83    this.elBtnTarget.addEventListener('mouseleave', this.handleMouseleave.bind(this), false);
84    this.el.addEventListener('mouseleave', this.handleMouseleave.bind(this), false);
85  },
86  handleLoad: function(){
87    this.setEl();
88    if(!this.elBtn || !this.elBtnTarget || !this.elCss){return;}
89    this.createEl();
90    this.addEl();
91    this.setEv();
92  },
93  init: function(){
94    window.addEventListener('load', this.handleLoad.bind(this), false);
95  }
96};
97gNavWebins.popup.init();