https://higashimaru.co.jp/recipe/common/js/script.js

1/**
2 * レシピページ 共通JS script.js
3 *
4 */
5
6/* ----------------------------------------------------------
7 共通設定
8---------------------------------------------------------- */
9var $window = $(window);
10var breakPoint = 768;
11var headerHeightPC = 67;
12var headerHeightSP = 85;
13var beforeDevice = "";
14var isMobile = false;
15
16
17/* ----------------------------------------------------------
18 init
19---------------------------------------------------------- */
20var scrollPosNow = 0;
21
22$(function () {
23
24  // モバイル端末からのアクセスかチェック
25  chkMobile();
26
27  // デバイスサイズ取得
28  chkDeviceWidth();
29  window.onresize = function() {
30      chkDeviceWidth();
31  };
32
33  // iPad対応
34  viewport();
35
36  // SP時ハンバーガーメニュー
37  headerMenu();
38
39  // SP時フロートバナー
40  floatNavFunc();
41
42  // SP時検索窓
43  spSearchFunc();
44
45  // SP時フロートバナー内ページトップボタン押下時処理
46  pagetopFunc();
47
48  // PCのページトップボタン位置調整処理
49  pagetopPcPosition();
50
51  // SP時アンカーリンク押下時処理
52  anchorFunc();
53
54  // レシピページポップアップ（/recipe/udonsoup/udon11045.html）
55  recipePop();
56
57  // もっとみる機能 (/recipe/include/area-recipe-theme.html
58  recipeMore();
59
60  // モーダル
61  recipeModal();
62});
63
64/* ----------------------------------------------------------
65 chkMobile
66---------------------------------------------------------- */
67var chkMobile = function () {
68  $(window).on('load', function(){
69    var ua = navigator.userAgent.toLowerCase();
70    isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua);
71  });
72}
73
74/* ----------------------------------------------------------
75 chkDeviceWidth
76---------------------------------------------------------- */
77var chkDeviceWidth = function () {
78    var innerWidth = window.innerWidth;
79    // タブレットにも対応できるよう真偽判定を用いない
80    if (innerWidth <= breakPoint) {
81      beforeDevice = "sp";
82    } else {
83      beforeDevice = "pc";
84    }
85}
86
87/* ----------------------------------------------------------
88 viewport
89---------------------------------------------------------- */
90var viewport = function(){
91  $(window).on("load resize", function () {
92    var ua = navigator.userAgent.toLowerCase();
93    var isiPad = ua.indexOf('ipad') > -1 || ua.indexOf('macintosh') > -1 && 'ontouchend' in document;
94    if (isiPad) {
95      $("meta[name='viewport']").attr('content', 'target-densitydpi=device-dpi, width=1200px, maximum-scale=1.0, user-scalable=yes.0');
96    } else {
97      $("meta[name='viewport']").attr('content', 'width=device-width,initial-scale=1.0,user-scalable=no');
98    }
99  });
100}
101
102/* ----------------------------------------------------------
103 headerMenu
104---------------------------------------------------------- */
105var headerMenu = function () {
106  var $w = $(window);
107  var $h = $("html");
108
109  var toggle = $(".nav_toggle");
110  var top_before_open = 0;
111  toggle.click(function(){
112    if($h.is(".navOpened")){
113      $h.css("top", 0).removeClass("navOpened");
114      $("html,body").scrollTop(top_before_open);
115    }else{
116      // メニュー展開前のスクロール位置を保存
117      top_before_open = $w.scrollTop();
118
119      $h.css("top", -top_before_open).addClass("navOpened");
120      var gNavBody = $('.nav-global-wrap');
121      var windowHeight = window.innerHeight;
122      gNavBody.css({"max-height": windowHeight - 88 + "px"});
123    }
124    return false;
125  });
126
127  $(".nav-global-wrap a").click(function(){
128    toggle.click();
129    if($(this).attr("href").substr(0, 1) !== "#") { return true; }
130
131    return false;
132  });
133}
134
135/* ----------------------------------------------------------
136 floatNavFunc
137---------------------------------------------------------- */
138var floatNavFunc = function () {
139  (function () {
140    var btnFooterNav = $(".nav-float");
141
142    $window.scroll(function () {
143      var offsetBottom = 329;
144      if ($window.scrollTop() > $(document).height() - $(window).height() - offsetBottom) {
145        btnFooterNav.addClass("notFixed")
146      }
147      else {
148        btnFooterNav.removeClass("notFixed");
149      }
150    });
151  })();
152}
153
154/* ----------------------------------------------------------
155 spSearchFunc
156 SP時フロートバナー内検索ボタンで検索窓展開表示
157---------------------------------------------------------- */
158var spSearchFunc = function () {
159  var openSearch = $(".nav-float__btn--search.closed");
160  var hiddenOpenSearch = $(".nav-float__btn--search");
161  var closeSearch = $(".nav-float__btn--search-close");
162  var floatSearch = $(".nav-float-search");
163
164  openSearch.click(function () {
165    openSearch.removeClass("closed");
166    closeSearch.addClass("visible");
167    floatSearch.addClass("visible");
168  });
169
170  closeSearch.click(function () {
171    hiddenOpenSearch.addClass("closed");
172    closeSearch.removeClass("visible");
173    floatSearch.removeClass("visible");
174  });
175}
176
177/* ----------------------------------------------------------
178 pagetopFunc
179 ページトップ処理
180---------------------------------------------------------- */
181var pagetopFunc = function () {
182  var pagetopPc = $(".footer .pageTop a");
183  pagetopPc.click(function () {
184    var href = $(this).attr("href");
185    var target = $(href == "#" || href == "" ? 'html' : href);
186    var position = pagetopPc.offset().top;
187    $("html, body").animate({
188        scrollTop: position
189    }, 500, "swing");
190    return false;

191  });
192
193  var pagetopSp = $(".nav-float__btn--pagetop a");
194  pagetopSp.click(function () {
195    var href = $(this).attr("href");
196    var target = $(href == "#" || href == "" ? 'html' : href);
197    var position = target.offset().top;
198    $("html, body").animate({
199        scrollTop: position
200    }, 500, "swing");
201    return false;
202  });
203}
204
205/* ----------------------------------------------------------
206 pagetopPcPosition
207 PCのページトップボタン位置調整処理
208---------------------------------------------------------- */
209var pagetopPcPosition = function () {
210  var pagetop = $(".wrapper > .footer .pageTop");
211  pagetop.hide();
212  $(window).scroll(function () {
213    if($(window).innerWidth() > 767) {
214      if ($(this).scrollTop() > 100) {
215          //100pxスクロールしたら表示
216          pagetop.fadeIn();
217      } else {
218          pagetop.fadeOut();
219      }
220    }
221  });
222  pagetop.click(function () {
223      $("body,html").animate(
224          {
225              scrollTop: 0
226          },
227          500
228      ); //0.5秒かけてトップへ移動
229      return false;
230  });
231
232  $(document).ready(function () {
233    var pagetop = $(".wrapper > .footer .pageTop");
234    pagetop.hide();
235    $(window).on("load resize scroll", function () {
236      if($(window).innerWidth() > 767) {
237        var footerHeightAdjust = 50;
238
239        if ($(this).scrollTop() > 100) {
240            pagetop.fadeIn("fast");
241        } else {
242            pagetop.fadeOut("fast");
243        }
244        var scrollHeight = $(document).height(); //ドキュメントの高さ
245        var scrollPosition = $(window).height() + $(window).scrollTop(); //現在地
246        var footer = $(".wrapper > .footer"); //footerの高さ（＝止めたい位置）
247        var footHeight = footer.innerHeight(); //footerの高さ（＝止めたい位置）
248
249        if (scrollHeight - scrollPosition <= footHeight) {
250        } else {
251            //それ以外の場合は
252            pagetop.css({
253                bottom: "50px",
254            });
255        }
256      } else {
257        pagetop.fadeOut("fast");
258      }
259    });
260  });
261};
262
263/* ----------------------------------------------------------
264 anchorFunc
265 SP時アンカーリンク押下時処理
266---------------------------------------------------------- */
267var anchorFunc = function () {
268  var urlHash = location.hash;
269  if(urlHash) {
270      var $target = $(urlHash);
271      if($target.length){
272        $(document).on('scrollFunction', function (){
273          var position = $target.offset().top;
274          $('body,html').stop().animate({scrollTop:position}, 500);
275          $(document).off('scrollFunction');
276        });
277        $(window).on('load', function (){
278          $(document).trigger('scrollFunction');
279        });
280        setTimeout(function(){
281          $(document).trigger('scrollFunction');
282        }, 1000);
283      }
284  }
285  $('a[href="#pagetop"]').click(function() {
286      var href= $(this).attr("href");
287      var target = $(href);
288      $('body,html').stop().animate({scrollTop:0}, 500);   
289  });
290}
291
292/* ----------------------------------------------------------
293 recipePop
294 レシピページポップアップ（/recipe/udonsoup/udon11045.html）
295---------------------------------------------------------- */
296var recipePop = function () {
297  $("#triggerPop").click(function(){
298    $(".box-contents-pop").toggleClass("activePop");
299  });
300  $(".mod-recipedetail-point_icon").click(function(){
301    $(".box-contents-pop").removeClass("activePop");
302  });
303}
304
305/* ----------------------------------------------------------
306 recipeMore
307 もっとみる機能
308---------------------------------------------------------- */
309var recipeMore = function () {
310  var $root = $('[data-js-more]');
311  var $item = $('[data-js-more-item]');
312  var $button = $('[data-js-more-button]');
313
314  $root.each(function (){
315    var $this = $(this);
316    var $thisItem = $this.find($item);
317    var $thisButton = $this.find($button);
318    var resetLength = function (){
319      return Number(window.innerWidth >= breakPoint ? $this.attr('data-reset-pc'): $this.attr('data-reset-sp'));
320    };
321    var showLength = function (){
322      return Number(window.innerWidth >= breakPoint ? $this.attr('data-show-pc'): $this.attr('data-show-sp'));
323    };
324
325    var moreFunction = function (_arg) {
326      if(_arg.action === 'reset') {
327        $thisItem.not(':lt(' + resetLength() + ')').hide();
328      } else if(_arg.action === 'toggle') {
329        var itemLength = $thisItem.length;
330        var itemLengthCurrent = $thisItem.filter(':visible').length;
331        var itemLengthNext = itemLengthCurrent + showLength();
332        console.log(itemLength, itemLengthNext)
333        if(itemLength > itemLengthCurrent) {
334          for (let i = 0; i < showLength(); i++) {
335            setTimeout(function () {
336              $thisItem.eq(itemLengthCurrent + i).fadeIn();
337            }, i * 70)
338          }
339          if(itemLength <= itemLengthNext) {
340            $button.addClass('close');
341          }
342        } else {
343          $thisItem.not(':lt(' + resetLength() + ')').fadeOut();
344          $button.removeClass('close');
345          $("html, body").animate({ scrollTop: $this.offset().top - 30 }, 500, "swing");
346        }
347      }
348    }
349
350    // 初期時
351    moreFunction({action: 'reset'});
352
353    // ボタン押下時
354    $thisButton.on('click', function (){
355      moreFunction({action: 'toggle'});
356    });
357
358  });
359}
360
361/* ----------------------------------------------------------
362 recipeModal
363 モーダル
364---------------------------------------------------------- */
365var recipeModal = function () {
366  if($('[data-js-modal]').length && $181){
367    (function($){
368      var $button = $('[data-js-modal]');
369      console.log(beforeDevice === 'pc' ? '750': '100%')
370      $button.fancybox({
371        type          : 'iframe',
372        titlePosition : 'inside',
373        transitionIn  : 'elastic',
374        transitionOut : 'elastic',
375        width         : beforeDevice === 'pc' ? 750: '100%',
376		height        : beforeDevice === 'pc' ? 440: '50%',
377        padding       : 0,
378        margin       : 10,
379      })
380    })($181)
381  }
382}
383
384