https://www.town.moroyama.saitama.jp/theme/base/js/mutual_switching/mutual_switching.js

1'use strict';
2var MutualSwitching = MutualSwitching || {
3  config: {},
4  util: {},
5  run: {}
6};
7
8//==============================================================================
9// 設定に関するモジュール
10//==============================================================================
11MutualSwitching.config = (function () {
12  /**
13   * 設定値
14   * @type {Object}
15   */
16  var config = {};
17
18  /**
19   * PC用ビューポート幅
20   * @type {Number}
21   */
22  config.viewPortWidthPc = 0;
23
24  /**
25   * スマホ用ビューポート幅
26   * @type {Number}
27   */
28  config.viewPortWidthSp = 0;
29
30  /**
31   * ページのレイアウトタイプ
32   * @type {Number}
33   *       0: レスポンシブ
34   *       1: PC/SP個別デザイン
35   *       2: フレキシブル（リキッド + レスポンシブ）
36   */
37  config.layoutType = 0;
38
39  /**
40   * パス別設定
41   * @type {Object}
42   */
43  config.pathSettings = {};
44
45  /**
46   * PC用CSSファイル名
47   * @type {String}
48   */
49  config.pcCssName = 'theme/base/css/top.css';
50
51  /**
52   * スマホ用CSSファイル名
53   * @type {String}
54   */
55  config.spCssName = 'theme/base/css/sp_top.css';
56
57  /**
58   * スマホ用専用ページの有無
59   * @type {Boolean}
60   */
61  config.existsSpPage = false;
62
63  /**
64   * プレビューページでの参照であるか
65   * @type {Boolean}
66   */
67  config.isPreview = false;
68
69  /**
70   * [viewPcBySp description]
71   * @type {Boolean}
72   */
73  config.viewPcBySp = false;
74
75  /**
76   * タブレット端末の初期表示をSP表示にするか
77   * @type {Boolean}
78   */
79  config.viewSpByTb = false;
80
81  return {
82    /**
83     * レイアウトタイプ指定
84     * @public
85     * @return モジュール(※メソッドチェーン用)
86     */
87    setLyaoutType: function (type) {
88      config.layoutType = type;
89      return MutualSwitching.config;
90    },
91    /**
92     * レスポンシブレイアウトであることを定義する
93     * @public
94     * @return モジュール(※メソッドチェーン用)
95     */
96    setLayoutIsResponsive: function () {
97      config.layoutType = 0;
98      return MutualSwitching.config;
99    },
100    /**
101     * 個別(デバイス別)レイアウトであることを定義する
102     * @public
103     * @return モジュール(※メソッドチェーン用)
104     */
105    setLayoutIsIndividual: function () {
106      config.layoutType = 1;
107      return MutualSwitching.config;
108    },
109    /**
110     * フレキシブル(リキッド + レスポンシブ)レイアウトであることを定義する
111     * @public
112     * @return モジュール(※メソッドチェーン用)
113     */
114    setLayoutIsFlexible: function () {
115      config.layoutType = 2;
116      return MutualSwitching.config;
117    },
118    /**
119     * 個別設定をもつパスを登録する
120     * @public
121     * @param {Object} pathSetting JSON形式
122     * @return モジュール(※メソッドチェーン用)
123     */
124    setPathSettings: function (pathSetting) {
125      config.pathSettings = pathSetting;
126      return MutualSwitching.config;
127    },
128    /**
129     * PC用ビューポートの幅を設定する
130     * @public
131     * @param {Int} width 幅
132     * @return モジュール(※メソッドチェーン用)
133     */
134    setViewPortWIdthPc: function (width) {
135      config.viewPortWidthPc = width;
136      return MutualSwitching.config;
137    },
138    /**
139     * スマホ用ビューポートの幅を設定する
140     * @public
141     * @param {Int} width 幅
142     * @return モジュール(※メソッドチェーン用)
143     */
144    setViewPortWIdthSp: function (width) {
145      config.viewPortWidthSp = width;
146      return MutualSwitching.config;
147    },
148    /**
149     * [setViewPcBySp description]
150     * @return モジュール(※メソッドチェーン用)
151     */
152    setViewPcBySp: function () {
153      config.viewPcBySp = true;
154      return MutualSwitching.config;
155    },
156    /**
157     * タブレット端末の初期表示をSP表示にする
158     * @param {Boolean} bool true: SP表示, false: PC表示
159     * @return モジュール(※メソッドチェーン用)
160     */

161    setViewSpByTb: function (bool) {
162      config.viewSpByTb = bool;
163      return MutualSwitching.config;
164    },
165    /**
166     * スマホ用ページが存在を認識させる設定
167     * @param {Boolean} existsFlag true: 存在する, false: 存在しない
168     * @return モジュール(※メソッドチェーン用)
169     */
170    setExistsSpPage: function (existsFlag) {
171      config.existsSpPage = existsFlag;
172      return MutualSwitching.config;
173    },
174    /**
175     * プレビュー画面かどうかを判断する設定
176     * @param {Boolean} isPreview true: プレビュー, false: その他
177     * @return モジュール(※メソッドチェーン用)
178     */
179    setPreviewMode: function (isPreview) {
180      config.isPreview = isPreview;
181      return MutualSwitching.config;
182    },
183    /**
184     * レスポンシブレイアウトであるか
185     * @public
186     * @return {Boolean} true: レスポンシブレイアウト, false: その他
187     */
188    isResponsiveLayout: function () {
189      return config.layoutType === 0;
190    },
191    /**
192     * 個別レイアウトであるか
193     * @public
194     * @return {Boolean} true: 個別レイアウト, false: その他
195     */
196    isIndividualLayout: function () {
197      return config.layoutType === 1;
198    },
199    /**
200     * フレキシブルレイアウトであるか
201     * @public
202     * @return {Boolean} true: フレキシブルレイアウト, false: その他
203     */
204    isFlexibleLayout: function () {
205      return config.layoutType === 2;
206    },
207    /**
208     * PC用ビューポートの幅を取得
209     * @public
210     * @return {Int} 幅
211     */
212    getViewPortWidthPc: function () {
213      return config.viewPortWidthPc;
214    },
215    /**
216     * スマホ用ビューポートの幅を取得
217     * @public
218     * @return {Int} 幅
219     */
220    getViewPortWidthSp: function () {
221      return config.viewPortWidthSp;
222    },
223    /**
224     * PCレイアウト時のビューポート値を取得
225     * @public
226     * @return {String} ビューポート値
227     */
228    getViewPortPc: function () {
229      return 'width=' + config.viewPortWidthPc + ',user-scalable=yes';
230    },
231    /**
232     * スマホレイアウト時のビューポート値を取得
233     * @public
234     * @return {String} ビューポート値
235     */
236    getViewPortSp: function () {
237      return 'width=' + config.viewPortWidthSp + ',user-scalable=yes';
238    },
239    /**
240     * フレキシブルレイアウト時のビューポート値を取得
241     * @public
242     * @return {String} ビューポート値
243     */
244    getViewPortFlexible: function () {
245      return 'width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0';
246    },
247    /**
248     * パス毎の設定を取得
249     * @public
250     * @return {Object} パスと設定データ
251     */
252    getPathSettings: function () {
253      return config.pathSettings;
254    },
255    /**
256     * PC用CSSファイル名を取得
257     * @public
258     * @return {String} ファイル名
259     */
260    getPcCssName: function () {
261      return config.pcCssName;
262    },
263    /**
264     * スマホ用CSSファイル名を取得
265     * @public
266     * @return {String} ファイル名
267     */
268    getSpCssName: function () {
269      return config.spCssName;
270    },
271    /**
272     * [getViewPcBySp description]
273     * @return {[type]} [description]
274     */
275    getViewPcBySp: function () {
276      return config.viewPcBySp;
277    },
278    /**
279     * タブレット端末の初期表示をSP表示にするか
280     * @return {Boolean}
281     */
282    getViewSpByTb: function () {
283      return config.viewSpByTb;
284    },
285    /**
286     * スマホ用ページが存在するか
287     * @return {Boolean}
288     */
289    isExistsSpPage: function () {
290      return config.existsSpPage;
291    },
292    /**
293     * プレビュー画面での閲覧かどうか
294     * @return {Boolean} [description]
295     */
296    isPreviewMode: function () {
297      return config.isPreview;
298    }
299  }
300})();
301
302//==============================================================================
303// ユーティリティモジュール
304//==============================================================================
305MutualSwitching.util = (function () {
306  return {
307    /**
308     * ドメイン名を取得
309     * @public
310     * @return {String} ドメイン名
311     */
312    getDomain: function () {
313      return document.domain;
314    },
315    /**
316     * ディレクトリパス(URL)を取得
317     * @public
318     * @return {String} パス
319     */
320    getFileName: function () {
321      return location.pathname.split('/').pop();
322    },
323    /**
324     * 自身のページファイル名を取得
325     * @public
326     * @return {String} ファイル名
327     */
328    getDirPath: function () {
329      return location.pathname.replace(MutualSwitching.util.getFileName(), '').replace(/\/$/, '');
330    },
331    /**
332     * ユーザーエージェントがスマホか判定
333     * @public
334     * @return {Boolean}
335     */
336    isUaSp: function () {
337      // ユーザーエージェント取得
338      var ua = navigator.userAgent.toLowerCase();
339      return (ua.indexOf('iphone') > -1) || (ua.indexOf('android') > -1 && ua.indexOf('mobile') > -1);
340    },
341    /**
342     * ユーザーエージェントがタブレットか判定
343     * @public
344     * @return {Boolean}
345     */
346    isUaTb: function () {
347      // ユーザーエージェント取得
348      var ua = navigator.userAgent.toLowerCase();
349      return (ua.indexOf('ipad') > -1) || (ua.indexOf('macintosh') > -1 && 'ontouchend' in document) || (ua.indexOf('android') > -1 && ua.indexOf('mobile') === -1);
350    },
351    /**
352     * 閲覧端末がスマホである
353     * @return {Boolean} true: スマホ, false:その他
354     */
355    isDeviceSp: function () {
356      // タブレット端末の初期表示をSP表示にする場合、タブレット端末もスマホ端末として返す
357      if(MutualSwitching.config.getViewSpByTb()) {
358        return MutualSwitching.util.isUaSp() || MutualSwitching.util.isUaTb();
359      } else {
360        return MutualSwitching.util.isUaSp();
361      }
362    },
363    /**
364     * 閲覧端末がタブレットである
365     * @return {Boolean} true: タブレット, false:その他
366     */
367    isDeviceTb: function () {
368      // タブレット端末の初期表示をSP表示にする場合、falseを返す
369      if(MutualSwitching.config.getViewSpByTb()) {
370        return false;
371      } else {
372        return MutualSwitching.util.isUaTb();
373      }
374    },
375    /**
376     * デバッグ情報描画
377     * @public
378     * @return {[type]} [description]
379     */
380    debugPrint: function () {
381      $('#debug').text($("meta[name='viewport']").attr('content'));
382    }
383  };
384})();
385
386//==============================================================================
387// メイン処理モジュール
388//==============================================================================
389MutualSwitching.run = (function () {
390  // jQuery読込み確認
391  if (typeof $ === "undefined") {
392    console.warn("jQuery required.");
393    return;
394  }
395
396  // Cookie利用の可否を確認
397  if (!navigator.cookieEnabled) {
398    console.warn("Please allow use of cookies.");
399    return;
400  }
401
402  /**
403   * ビューポート書換え
404   * @private
405   * @param  {String} value ビューポート設定
406   */
407  function rewriteViewPort(value) {
408    var srcViewPort = $("meta[name='viewport']").attr('content');
409    var destViewPort = value;
410    if (srcViewPort !== destViewPort) {
411      $("meta[name='viewport']").attr('content', destViewPort);
412    }
413  }
414
415  /**
416   * PC用CSSの読込みをスマホ用CSS読込みに書換え
417   * @private
418   */
419  function rewriteCssPcToSp() {
420    var deviceCss = $("link[href$='/" + MutualSwitching.config.getPcCssName() + "']");
421    if (deviceCss.attr('href') != null) {
422      var deviceCssDest = deviceCss.attr('href').replace(MutualSwitching.config.getPcCssName(), MutualSwitching.config.getSpCssName());
423      deviceCss.attr('href', deviceCssDest);
424    }
425  }
426
427  /**
428   * PC用デザインでページを閲覧しているか
429   * @private
430   * @return {Boolean} true: PCデザイン, false: それ以外
431   */
432  function isPcView() {
433    return $.cookie('view_mode') === 'pc';
434  }
435
436  /**
437   * スマホ用デザインでページを閲覧しているか
438   * @private
439   * @return {Boolean} true: スマホデザイン, false: それ以外
440   */
441  function isSpView() {
442    return $.cookie('view_mode') === 'sp';
443  }
444
445  /**
446   * cookieにview_modeがあるか
447   * @private
448   * @return {Boolean} true: ある, false: ない
449   */
450  function hasViewMode() {
451    return !!$.cookie('view_mode');
452  }
453
454  /**
455   * PCページからSPページへのリダイレクトURLを取得する
456   * @private
457   * @return {String} リダイレクト先URL
458   */
459  function getRedirectUrlPcToSp() {
460    var redirectUrl;
461    if (location.href.split('/').pop().length === 0) {
462      redirectUrl = 'index.html';
463    } else {
464      redirectUrl = location.href.split('/').pop();
465    }
466    return redirectUrl;
467  }
468
469  /**
470   * パス毎に設定されたレイアウト情報を設定する
471   * @private
472   * @return {[type]} [description]
473   */
474  function applySettingsForEachPath() {
475    var settings = MutualSwitching.config.getPathSettings();

476    if (!settings) {
477      return;
478    }
479
480    // 自身のパスから遡って設定を探す
481    var pathParts = MutualSwitching.util.getDirPath().split('/');
482    for (var ii = pathParts.length - 1; ii >= 0; ii--) {
483      var searchPath = '';
484      var tmpPathParts = [];
485      for (var jj = 0; jj <= ii; jj++) {
486        tmpPathParts.push(pathParts[jj]);
487      }
488      searchPath = tmpPathParts.join('/').length > 0 ? tmpPathParts.join('/') : '/';
489
490      // 個別指定されている
491      if (settings.hasOwnProperty(searchPath)) {
492        // レイアウトが指定されていれば適用する
493        if (settings[searchPath].layout_type != null) {
494          MutualSwitching.config.setLyaoutType(settings[searchPath].layout_type);
495        }
496
497        // PC用Widthが設定されていれば適用する
498        if (settings[searchPath].pc_width != null) {
499          MutualSwitching.config.setViewPortWIdthPc(settings[searchPath].pc_width);
500        }
501
502        // スマホ用Widthが設定されていれば適用する
503        if (settings[searchPath].sp_width != null) {
504          MutualSwitching.config.setViewPortWIdthSp(settings[searchPath].sp_width);
505        }
506
507        // タブレット端末の初期表示をスマホ表示にする設定
508        if (settings[searchPath].viewSpByTb != null) {
509          MutualSwitching.config.setViewSpByTb(settings[searchPath].viewSpByTb);
510        }
511        break;
512      }
513    }
514  }
515
516  return {
517    /**
518     * メイン処理
519     * @public
520     */
521    ready: function () {
522      $(document).ready(function () {
523        // デバッグ
524        MutualSwitching.util.debugPrint();
525
526        // PCサイト表示を実行
527        $('.jqs-go-to-pc').on({
528          'click': function () {
529            $.cookie('view_mode', 'pc', {expires: 0, path: '/', domain: MutualSwitching.util.getDomain()});
530          }
531        });
532
533        // スマホサイト表示を実行
534        $('.jqs-go-to-sp').on({
535          'click': function () {
536            $.cookie('view_mode', 'sp', {expires: 0, path: '/', domain: MutualSwitching.util.getDomain()});
537          }
538        });
539
540        // パス毎に定義された設定を適用する
541        applySettingsForEachPath();
542
543        // プレビュー画面から閲覧中
544        if (MutualSwitching.config.isPreviewMode()) {
545          if (MutualSwitching.config.isFlexibleLayout()) {
546            //------------------------------------------------------------------
547            // フレキシブルレイアウト
548            //------------------------------------------------------------------
549            // ビューポート書換え
550            rewriteViewPort(MutualSwitching.config.getViewPortFlexible());
551          } else if (MutualSwitching.config.isIndividualLayout()) {
552            // CSS書換え
553            rewriteCssPcToSp();
554            // ビューポート書換え
555            rewriteViewPort(MutualSwitching.config.getViewPortSp());
556          } else {
557            //------------------------------------------------------------------
558            // レスポンシブレイアウト
559            //------------------------------------------------------------------
560            // ビューポート書換え
561            rewriteViewPort(MutualSwitching.config.getViewPortSp());
562          }
563        }
564
565        // PCページ閲覧中
566        if ((isPcView() && MutualSwitching.util.isDeviceSp()) || ((isPcView() || !hasViewMode()) && MutualSwitching.util.isDeviceTb())) {
567          // スマホページへの切替ボタン表示
568          $('.jqs-go-to-sp').show();
569          // レイアウトの種類で分岐
570          if (MutualSwitching.config.isFlexibleLayout()) {
571            //------------------------------------------------------------------
572            // フレキシブルレイアウト
573            //------------------------------------------------------------------
574            // ビューポート書換え
575            rewriteViewPort(MutualSwitching.config.getViewPortFlexible());
576          } else if (MutualSwitching.config.isIndividualLayout()) {
577            //------------------------------------------------------------------
578            // 個別レイアウト
579            //------------------------------------------------------------------
580            // ビューポート書換え
581            rewriteViewPort(MutualSwitching.config.getViewPortSp());
582          } else {
583            //------------------------------------------------------------------
584            // レスポンシブレイアウト
585            //------------------------------------------------------------------
586            // ビューポート書換え
587            rewriteViewPort(MutualSwitching.config.getViewPortPc());
588          }
589        }
590
591        // スマホページ閲覧中
592        if (((isSpView() || !hasViewMode()) && MutualSwitching.util.isDeviceSp()) || (isSpView() && MutualSwitching.util.isDeviceTb())) {
593          // レイアウトの種類で分岐
594          if (MutualSwitching.config.isFlexibleLayout()) {
595            //------------------------------------------------------------------
596            // フレキシブルレイアウト
597            //------------------------------------------------------------------
598            // ビューポート書換え
599            rewriteViewPort(MutualSwitching.config.getViewPortFlexible());
600          } else if (MutualSwitching.config.isIndividualLayout()) {
601            //------------------------------------------------------------------
602            // 個別レイアウト
603            //------------------------------------------------------------------

604            // PCページへの切替ボタン表示
605            $('.jqs-go-to-pc').show();
606
607            if (MutualSwitching.config.getViewPcBySp()) {
608              if (location.href.indexOf('.sp.') <= 0 && MutualSwitching.config.isExistsSpPage()) {
609                $.cookie('view_mode', 'sp', {expires: 0, path: '/', domain: MutualSwitching.util.getDomain()});
610                location.href = getRedirectUrlPcToSp().replace('.html', '.sp.html');
611              } else {
612                // CSS書換え
613                rewriteCssPcToSp();
614                // ビューポート書換え
615                rewriteViewPort(MutualSwitching.config.getViewPortSp());
616              }
617            } else if (MutualSwitching.config.isExistsSpPage && (location.href.indexOf('.sp.') <= 0)) {
618              location.href = getRedirectUrlPcToSp().replace('.html', '.sp.html');
619            } else {
620              // CSS書換え
621              rewriteCssPcToSp();
622              // ビューポート書換え
623              rewriteViewPort(MutualSwitching.config.getViewPortSp());
624            }
625          } else {
626            //------------------------------------------------------------------
627            // レスポンシブレイアウト
628            //------------------------------------------------------------------
629            // ビューポート書換え
630            rewriteViewPort(MutualSwitching.config.getViewPortSp());
631          }
632        }
633      });
634    }
635  };
636})();