https://skin-m.com/js/common.js

1/* Google Map
2-------------------------------------------------------------------------- */
3$(function(){
4  function createGoogleMap(mapInfo){
5    var myMap = new google.maps.Map(document.getElementById(mapInfo.mapId), {
6      zoom: 17,// ズームレベル
7      center: new google.maps.LatLng(Number(mapInfo.lat), Number(mapInfo.lon)),// 中心点緯度経度
8      scaleControl: true,// 距離目盛りの表示
9      scrollwheel: false,// 地図の種類
10      mapTypeId: google.maps.MapTypeId.ROADMAP// マウススクロール
11    });
12    var myMarker = new google.maps.Marker({
13      position: new google.maps.LatLng(Number(mapInfo.lat), Number(mapInfo.lon)),// マーカーを置く緯度経度
14      map: myMap
15    });
16    var myInfoWindow = new google.maps.InfoWindow({
17      content: '<div><h1>'+mapInfo.content+'</h1></div>'
18    });
19    myInfoWindow.open(myMap, myMarker);
20
21    // 吹き出しが閉じられたら、マーカークリックで再び開くようにしておく
22    google.maps.event.addListener(myInfoWindow, "closeclick", function() {
23      google.maps.event.addListenerOnce(myMarker, "click", function(event) {
24        myInfoWindow.open(myMap, myMarker);
25      });
26    });
27  }
28
29  var mapInfo = new Array(
30    {
31      'mapId': 'map',
32      'lat': 34.6729761,
33      'lon': 135.4988188,
34      'content': 'skin 心斎橋店'
35    },
36    {
37      'mapId': 'map2',
38      'lat': 34.7047845,
39      'lon': 135.5023288,
40      'content': 'skin 梅田店'
41    }
42  );
43
44  if(Array.isArray(mapInfo)){
45    mapInfo.forEach(function(element, index, array){
46      createGoogleMap(element);
47    });
48  }
49});
50
51/* page top
52-------------------------------------------------------------------------- */
53$(function(){
54  // viewport
55  var viewport = document.createElement('meta');
56  viewport.setAttribute('name', 'viewport');
57  viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0');
58  document.getElementsByTagName('head')[0].appendChild(viewport);
59  $(window).scroll(function () {
60    if($(this).scrollTop() > 0) {
61      $('#pagetop').fadeIn('fast');
62    } else {
63      $('#pagetop').fadeOut('fast');
64    }
65  });
66});
67  $(document).ready(function() {
68  var pagetop = $('.pagetop');
69  $(window).scroll(function () {
70    if ($(this).scrollTop() > 700) {
71      pagetop.fadeIn();
72    } else {
73      pagetop.fadeOut();
74    }
75  });
76  pagetop.click(function () {
77    $('body, html').animate({ scrollTop: 0 }, 500);
78    return false;
79  });
80});
81
82/* modal
83-------------------------------------------------------------------------- */
84  $(function(){
85    //グローバル変数
86    var nowModalSyncer = null ;   //現在開かれているモーダルコンテンツ
87    var modalClassSyncer = "modal-syncer" ;   //モーダルを開くリンクに付けるクラス名
88
89    //モーダルのリンクを取得する
90    var modals = document.getElementsByClassName( modalClassSyncer ) ;
91
92    //モーダルウィンドウを出現させるクリックイベント
93    for(var i=0,l=modals.length; l>i; i++){
94
95      //全てのリンクにタッチイベントを設定する
96      modals[i].onclick = function(){
97
98        //ボタンからフォーカスを外す
99        this.blur() ;
100
101        //ターゲットとなるコンテンツを確認
102        var target = this.getAttribute( "data-target" ) ;
103
104        //ターゲットが存在しなければ終了
105        if( typeof( target )=="undefined" || !target || target==null ){
106          return false ;
107        }
108
109        //コンテンツとなる要素を取得
110        nowModalSyncer = document.getElementById( target ) ;
111
112        //ターゲットが存在しなければ終了
113        if( nowModalSyncer == null ){
114          return false ;
115        }
116
117        //キーボード操作などにより、オーバーレイが多重起動するのを防止する
118        if( $( "#modal-overlay" )[0] ) return false ;   //新しくモーダルウィンドウを起動しない
119        //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;   //現在のモーダルウィンドウを削除して新しく起動する
120
121        //オーバーレイを出現させる
122        $( "body" ).append( '<div id="modal-overlay"></div>' ) ;
123        $( "#modal-overlay" ).fadeIn( "fast" ) ;
124
125        //コンテンツをセンタリングする
126        centeringModalSyncer() ;
127

128        //コンテンツをフェードインする
129        $( nowModalSyncer ).fadeIn( "slow" ) ;
130
131        //[#modal-overlay]、または[#modal-close]をクリックしたら…
132        $( "#modal-overlay,#modal-close" ).unbind().click( function() {
133
134          //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
135          $( "#" + target + ",#modal-overlay" ).fadeOut( "fast" , function() {
136
137            //[#modal-overlay]を削除する
138            $( '#modal-overlay' ).remove() ;
139
140          } ) ;
141
142          //現在のコンテンツ情報を削除
143          nowModalSyncer = null ;
144
145        }) ;
146      }
147    }
148    //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
149    $( window ).resize( centeringModalSyncer ) ;
150
151    //センタリングを実行する関数
152    function centeringModalSyncer() {
153
154      //モーダルウィンドウが開いてなければ終了
155      if( nowModalSyncer == null ) return false ;
156
157      //画面(ウィンドウ)の幅、高さを取得
158      var w = $( window ).width() ;
159      var h = $( window ).height() ;
160
161      //コンテンツ(#modal-content)の幅、高さを取得
162      var cw = $( nowModalSyncer ).outerWidth( {margin:true} ) ;
163      var ch = $( nowModalSyncer ).outerHeight( {margin:true} ) ;
164
165      //センタリングを実行する
166      $( nowModalSyncer ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;
167    }
168  });
169
170
171/* drawer
172-------------------------------------------------------------------------- */
173  $(document).ready(function() {
174    $(".drawer").drawer();
175  });
176  // Option
177  $(".drawer").drawer({
178    apiToggleClass: "element"
179  });
180
181  // Open
182  $('.element').on(function() {
183    $('.drawer').drawer('open');
184  });
185
186  // close
187  $('.element').on(function() {
188    $('.drawer').drawer('close');
189  });
190
191  // toggle
192  $('.element').on(function() {
193    $('.drawer').drawer('toggle');
194  });
195
196  // destroy
197  $('.element').on(function() {
198    $('.drawer').drawer('destroy');
199  });
200
201  // Opened
202  $('#element').on('drawer.opened');
203
204  // Closed
205  $('#element').on('drawer.closed');
206
207  // $(document).ready(function(){
208  // $(".group1").colorbox({rel:'group1'});
209  // });
210