https://wagyu-yakuniku.jp/assets/js/search.js

1const AREAID_JAPAN = 200;
2var apiServer = "https://eternal-api.jp/";
3
4(function($) {
5  $(function() {
6    var levelFlag = 0;
7    var parentPrefecture = 0;
8    var Parray = new Array();
9    //var Pflag = false;
10
11    // エリア取得
12    function getAreaRegion(arealevel, paid) {
13      // 地方取得
14      if (paid == "" || paid == undefined || paid == null) paid = 0;
15      var levelArray = arealevel.toString().split(",");
16      var parentidArray = paid.toString().split(",");
17      var getlevel = arealevel;
18      var parentAreaId = paid;
19      var json = "";
20      brandids = [1];
21      $.ajax({
22        url: apiServer + "Search2/brandarea",
23        type: "post",
24        cache: false,
25        dataType: "json",
26        async: false,
27        data: {
28          brand: JSON.stringify(brandids),
29          level: JSON.stringify(levelArray),
30          parent: JSON.stringify(parentidArray)
31        }
32      })
33        .done(function(rel) {
34          data = rel["data"];
35          if (data) {
36            var html = "";
37            if (arealevel == 3) {
38              for (var i in data) {
39                html +=
40                  '<li><label class="s-checkbox_label" data-id="' +
41                  data[i].id +
42                  '"><input type="radio" name="region" value="' +
43                  data[i].id +
44                  '">' +
45                  data[i].name +
46                  "</label></li>";
47              }
48              $(".s-search_region ul").html(html);
49            }
50          }
51
52          $(".s-search_region .s-checkbox_label").on("click", function() {
53            // 地方をクリック
54            if (!$(this).hasClass("cur")) {
55              $(".s-search_region .s-checkbox_label").removeClass("cur");
56              $(this).addClass("cur");
57              $(this)
58                .find("input")
59                .prop("checked", true);
60              $(".s-search_prefecture .s-search_area_select_not").hide();
61              $(
62                ".s-search_prefecture ul, .s-search_district .s-search_area_select_not, .s-search_district .s-search_area_select_not_wrap"
63              ).show();
64              var parentID = $(this).data("id");
65              Parray = [];
66              getAreaPrefecture(5, parentID);
67              $(".s-search_area_select").addClass("move01");
68              $(".m-search_back span").removeClass("close");
69              $(".s-search_area_submit").removeClass("none");
70              levelFlag++;
71              $("input[name=level]").val(1);
72              return false;
73            }
74          });
75        })
76        .fail(function(xhr, textStatus, errorThrown) {
77          console.log("ajax通信に失敗しました");
78        });
79    }
80
81    function getAreaPrefecture(arealevel, paid) {
82      // 都道府県取得
83      if (paid == "" || paid == undefined || paid == null) paid = 0;
84      var levelArray = arealevel.toString().split(",");
85      var parentidArray = paid.toString().split(",");
86      var getlevel = arealevel;
87      var parentAreaId = paid;
88      var json = "";
89      brandids = [1];
90      $.ajax({

91        url: apiServer + "Search2/brandarea",
92        type: "post",
93        cache: false,
94        dataType: "json",
95        async: false,
96        data: {
97          brand: JSON.stringify(brandids),
98          level: JSON.stringify(levelArray),
99          parent: JSON.stringify(parentidArray)
100        }
101      })
102        .done(function(rel) {
103          data = rel["data"];
104          if (data) {
105            var html = "";
106            if (arealevel == 5) {
107              for (var i in data) {
108                html +=
109                  '<li><label class="s-checkbox_label" id="p-' +
110                  data[i].id +
111                  '" data-id="' +
112                  data[i].id +
113                  '"><input type="checkbox" name="prefecture[]" value="' +
114                  data[i].name +
115                  '"><span>' +
116                  data[i].name +
117                  "</span></label></li>";
118              }
119              $(".s-search_prefecture ul").html(html);
120            }
121          }
122          $(".s-search_prefecture .s-checkbox_label").on("click", function() {
123            $(".s-search_prefecture .s-checkbox_label").removeClass("cur");
124
125            $(this).addClass("cur");
126            $(this)
127              .find("input")
128              .prop("checked", true);
129
130            $(".s-search_district .s-search_area_select_not").hide();
131            $(".s-search_district ul").show();
132
133            var parentID = $(this).data("id");
134            parentPrefecture = parentID;
135            console.log(parentID);
136            if (Parray.indexOf(parentID) >= 0) {
137              Pflag = true;
138            } else {
139              Parray.push(parentID);
140              Pflag = false;
141            }
142            getAreaDistrict(6, parentID);
143            $(".s-search_area_select").addClass("move02");
144            $("#all_area").prop("checked", false);
145            levelFlag++;
146            $("input[name=level]").val(2);
147            return false;
148          });
149        })
150        .fail(function(xhr, textStatus, errorThrown) {
151          console.log("ajax通信に失敗しました");
152        });
153    }
154    function getAreaDistrict(arealevel, paid) {
155      // 地区取得
156      if (paid == "" || paid == undefined || paid == null) paid = 0;
157      var levelArray = arealevel.toString().split(",");
158      var parentidArray = paid.toString().split(",");
159      var getlevel = arealevel;
160      var parentAreaId = paid;
161      var json = "";
162      brandids = [1];
163      $.ajax({

164        url: apiServer + "Search2/brandarea",
165        type: "post",
166        cache: false,
167        dataType: "json",
168        async: false,
169        data: {
170          brand: JSON.stringify(brandids),
171          level: JSON.stringify(levelArray),
172          parent: JSON.stringify(parentidArray)
173        }
174      })
175        .done(function(rel) {
176          data = rel["data"];
177          if (data) {
178            var html = "";
179            if (arealevel == 6) {
180              if (!Pflag) {
181                if (Parray.length == 1) {
182                  html +=
183                    '<li class="s-checkbox_all_area_item"><label class="s-checkbox_label s-checkbox_all_area"><input type="checkbox" name="" value="" id="all_area"><span>すべての地域</span></label></li>';
184                }
185                for (var i in data) {
186                  html +=
187                    '<li><label class="s-checkbox_label" data-parent="' +
188                    parentAreaId +
189                    '"><input type="checkbox" name="district[]" value="' +
190                    data[i].name +
191                    '"><span>' +
192                    data[i].name +
193                    "</span></label></li>";
194                }
195                $(".s-search_district ul").show();
196                if (Parray.length == 1) {
197                  $(".s-search_district ul").html(html);
198                } else {
199                  $(".s-search_district li")
200                    .not(".s-checkbox_all_area_item")
201                    .hide();
202                  $(".s-search_district ul").append(html);
203                }
204              } else {
205                $(".s-search_district li")
206                  .not(".s-checkbox_all_area_item")
207                  .hide();
208                $(".s-search_district li").each(function() {
209                  if (
210                    !$(this).hasClass("s-checkbox_all_area_item") ||
211                    $(this)
212                      .find(".s-checkbox_label")
213                      .data("parent") == parentPrefecture
214                  ) {
215                    $(this).show();
216                  }
217                });
218              }
219            }
220          }
221          $(".s-checkbox_all_area").on("click", function() {
222            setTimeout(function() {
223              allArea();
224            }, 100);
225          });
226          $(
227            ".s-search_district .s-checkbox_label:not(.s-checkbox_all_area)"
228          ).on("click", function() {
229            if (!$(this).hasClass("cur")) {
230              $(this).addClass("cur");
231              $(this)
232                .find("input")
233                .prop("checked", true);
234            } else {
235              $(this).removeClass("cur");
236              $(this)
237                .find("input")
238                .prop("checked", false);
239            }
240            /*
241					var parentID = $('.s-search_district input:checked').map(function(){
242						return $(this).val();
243					}).get();*/
244            levelFlag++;
245            $("input[name=level]").val(3);
246            return false;
247          });
248        })
249        .fail(function(xhr, textStatus, errorThrown) {
250          console.log("ajax通信に失敗しました");
251        });
252    }
253
254    if ($(".s-search_area_select").length) {
255      getAreaRegion(3, AREAID_JAPAN); // 初期
256    }
257
258    // すべての地域
259    //allArea();
260    function allArea() {
261      var allFlag = true;
262      if ($("#all_area").prop("checked")) {
263        $(".s-search_district .s-checkbox_label").each(function() {
264          if ($(this).data("parent") == parentPrefecture) {
265            $(this).addClass("cur");
266            $(this)
267              .find("input")
268              .prop("checked", true);
269          }
270        });
271      } else {
272        $(".s-search_district .s-checkbox_label").each(function() {
273          if ($(this).data("parent") == parentPrefecture) {
274            $(this).removeClass("cur");
275            $(this)
276              .find("input")
277              .prop("checked", false);
278          }
279        });
280        allFlag = false;
281      }
282      if (allFlag) {
283        $("#p-" + parentPrefecture).addClass("allcur");
284      } else {
285        $("#p-" + parentPrefecture).removeClass("allcur");
286      }
287    }
288
289    $(".s-search_area_submit, .m-search_keyword_btn").on("click", function() {
290      if (!$(this).hasClass("none")) {
291        $(".s-search_prefecture .s-checkbox_label").each(function() {
292          if ($(this).hasClass("allcur")) {
293            var pID = $(this).data("id");
294            $(".s-search_district .s-checkbox_label").each(function() {
295              if ($(this).data("parent") == pID) {
296                $(this)
297                  .find("input")
298                  .prop("checked", false);
299              }
300            });
301          }
302        });
303        var districtP = new Array();
304        var districtPName = new Array();
305        $(".s-search_district .s-checkbox_label").each(function() {
306          if (
307            !$(this).hasClass("s-checkbox_all_area") &&
308            $(this)
309              .find("input")
310              .prop("checked")
311          ) {
312            if (districtP.indexOf($(this).data("parent")) == -1) {
313              districtP.push($(this).data("parent"));
314            }
315            //$('input[name=level]').val(2.5);
316          }
317        });
318        if (districtP.length > 0) {
319          $(".s-search_prefecture .s-checkbox_label").each(function() {
320            if (districtP.indexOf($(this).data("id")) >= 0) {
321              $(this)
322                .find("input")
323                .prop("checked", false);
324              //$('.s-search_area').append('<input name="type" value="area" type="hidden">');
325            }
326          });
327          $("input[name=level]").val(2.5);
328        }
329
330        document.searchform.submit();
331        return false;
332      } else {
333        return false;
334      }
335    });

336
337    $(".m-search_back span").on("click", function() {
338      if (!$(this).hasClass("close")) {
339        levelFlag--;
340        console.log(levelFlag);
341        if (levelFlag == 1) {
342          $(".s-search_area_select").removeClass("move02");
343        }
344        if (levelFlag == 0) {
345          $(".s-search_area_select").removeClass("move01");
346          $(this).addClass("close");
347        }
348      }
349    });
350
351    $(window).on("scroll resize touchnmove", function() {
352      fixSubmit();
353    });
354    function fixSubmit() {
355      if ($(".s-search_area_submit").length) {
356        var targetHeight = $(".s-search_area_submit").innerHeight();
357        $(".s-search_area_submit_wrap").height(targetHeight);
358        var scrollTop = $(window).scrollTop();
359        var submitOffset =
360          $(".s-search_area_submit_wrap").offset().top -
361          $(window).innerHeight() +
362          targetHeight;
363        if (scrollTop >= submitOffset) {
364          $(".s-search_area_submit").addClass("fixation");
365        } else {
366          $(".s-search_area_submit").removeClass("fixation");
367        }
368      }
369    }
370
371    // -----------------------
372    // result Google Map
373    // -----------------------
374    if ($("#map_canvas").length) {
375      mapInit(positions, balloons);
376    }
377    function mapInit(positions, balloons) {
378      var map;
379      var marker = [];
380      var infoWindow = [];
381      var currentWindow = null;
382
383      var infoboxContent = [];
384      var infoboxOptions = [];
385      var infobox = [];
386
387      if ($("#map_canvas").length) {
388        // APIから該当店舗分拾う
389        var myMarkers = positions;
390        // APIから該当店舗分のMAX MIN値拾って計算する　 // default：東京駅
391        var myLatlng = new google.maps.LatLng(35.681167, 139.767052);
392
393        // MAP オプション
394        var mapOptions = {
395          zoom: 13,
396          center: myLatlng,
397          clickableIcons: false,
398          mapTypeControl: false,
399          styles: [
400            {
401              featureType: "poi.business",
402              elementType: "labels",
403              stylers: [{ visibility: "off" }]
404            }
405          ]
406        };
407
408        // MAP 埋め込み
409
410        var map = new google.maps.Map(
411          document.getElementById("map_canvas"),
412          mapOptions
413        );
414
415        // 該当店舗分 ピンを刺す
416        for (var i in myMarkers) {
417          var markerData = myMarkers[i];
418          var iconPath = balloons[i].imgpath;
419          // マーカー処理
420          marker[i] = new google.maps.Marker({
421            position: new google.maps.LatLng(
422              markerData.position[0],
423              markerData.position[1]
424            ),
425            icon: iconPath
426          });
427
428          // 吹き出し処理
429          // infobox用のDOMを生成
430          var infoboxElements = '<div class="gmap-info-window-inner">';
431
432          // ブランド名
433          if (balloons[i].brandname != null) {
434            infoboxElements +=
435              '<p class="gmap-info-window-title" brandid="' +
436              balloons[i].brandid +
437              '">' +
438              balloons[i].brandname +
439              "</p>";
440          }
441          // 店舗名（店舗詳細へのリンク付き）
442          if (
443            balloons[i].shopid != "" &&
444            balloons[i].shopid != null &&
445            balloons[i].shopid != "undefined"
446          ) {
447            infoboxElements +=
448              '<a href="' +
449              balloons[i].url +
450              '" target="_blank" class="gmap-info-window-shop" to_type="to_shopdetail" oldno="' +
451              balloons[i].oldcode +
452              '" shopid="' +
453              balloons[i].shopid +
454              '" onClick="dispatchGtagOfMapShopBtnClick(this)">' +
455              balloons[i].shopname +
456              "</a>";
457          } else {
458            infoboxElements +=
459              '<p class="gmap-info-window-shop" to_type="to_shopdetail" oldno="none" shopid="' +
460              balloons[i].shopid +
461              '">' +
462              balloons[i].shopname +
463              "</p>";
464          }
465          // 住所
466          if (balloons[i].address != null) {
467            infoboxElements +=
468              '<p class="gmap-info-window-address">' +
469              balloons[i].address +
470              "</p>";
471          }
472          // 電話番号
473          if (balloons[i].telno != null) {
474            infoboxElements +=
475              '<p class="gmap-info-window-telno">' + balloons[i].telno + "</p>";
476          }
477
478          infoboxElements += "</div>";
479
480          infoboxContent[i] = infoboxElements;
481
482          var offsetW = $(".gmap-info-window").width() / 2;
483
484          // infoboxのオプション
485          infoboxOptions[i] = {
486            content: infoboxContent[i], // 生成したDOMを割り当てる
487            pixelOffset: new google.maps.Size(-145, -65), // オフセット値
488            alignBottom: true, // 位置の基準
489            noSuppress: true, // POIではないことを表す
490            position: new google.maps.LatLng(
491              markerData.position[0],
492              markerData.position[1]
493            ), // 位置の座標
494            boxClass: "gmap-info-window", // 生成したDOMをラップするdivのclass名
495            closeBoxMargin: "-20px -30px 0px 0px", // 閉じるボタンの位置調整
496            closeBoxURL: "/assets/img/close.jpg" // 閉じるボタンの画像パス
497          };
498
499          // infoboxを生成して表示
500          infobox[i] = new InfoBox(infoboxOptions[i]);
501
502          // マーカーにクリックイベントを追加
503          //                    markerEvent(i);//今回はいらないので

504          marker[i].setMap(map);
505        }
506
507        // マーカーにクリックイベントを追加
508        function markerEvent(i) {
509          marker[i].addListener("click", function() {
510            if (currentWindow) {
511              currentWindow.close();
512            }
513
514            infobox[i].open(map, marker[i]);
515            currentWindow = infobox[i];
516          });
517        }
518
519        // 範囲内に収める
520        var minX;
521        var minY;
522        var maxX;
523        var maxY;
524
525        var makerKeys = Object.keys(marker);
526
527        minX = marker[makerKeys[0]].getPosition().lng();
528        minY = marker[makerKeys[0]].getPosition().lat();
529        maxX = marker[makerKeys[0]].getPosition().lng();
530        maxY = marker[makerKeys[0]].getPosition().lat();
531
532        for (var i = 0, len = makerKeys.length; i < len; i++) {
533          var lt = marker[makerKeys[i]].getPosition().lat();
534          var lg = marker[makerKeys[i]].getPosition().lng();
535
536          if (lg <= minX) {
537            minX = lg;
538          }
539          if (lg > maxX) {
540            maxX = lg;
541          }
542
543          if (lt <= minY) {
544            minY = lt;
545          }
546          if (lt > maxY) {
547            maxY = lt;
548          }
549        }
550
551        var sw = new google.maps.LatLng(maxY, minX);
552        var ne = new google.maps.LatLng(minY, maxX);
553        var bounds = new google.maps.LatLngBounds(sw, ne);
554
555        // ズームを変更
556
557        //var latlng = new google.maps.LatLng(selectedLocation.latitude, selectedLocation.longitude);
558        map.setCenter(latlng);
559        map.setZoom(14);
560
561        if (makerKeys.length <= 1) {
562          var x = marker[makerKeys[0]].getPosition().lat();
563          var y = marker[makerKeys[0]].getPosition().lng();
564          var latlng = new google.maps.LatLng(x, y);
565          map.setCenter(latlng);
566        } else {
567          map.fitBounds(bounds);
568          setTimeout(function() {
569            if (map.getZoom() > 16) {
570              map.setZoom(16);
571            }
572          }, 500);
573        }
574      }
575    }
576  });
577})(jQuery);