https://www.city.hachinohe.aomori.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  return {
76    /**
77     * レイアウトタイプ指定
78     * @public
79     * @return モジュール(※メソッドチェーン用)
80     */
81    setLyaoutType: function (type) {
82      config.layoutType = type;
83      return MutualSwitching.config;
84    },
85    /**
86     * レスポンシブレイアウトであることを定義する
87     * @public
88     * @return モジュール(※メソッドチェーン用)
89     */
90    setLayoutIsResponsive: function () {
91      config.layoutType = 0;
92      return MutualSwitching.config;
93    },
94    /**
95     * 個別(デバイス別)レイアウトであることを定義する
96     * @public
97     * @return モジュール(※メソッドチェーン用)
98     */
99    setLayoutIsIndividual: function () {
100      config.layoutType = 1;
101      return MutualSwitching.config;
102    },
103    /**
104     * フレキシブル(リキッド + レスポンシブ)レイアウトであることを定義する
105     * @public
106     * @return モジュール(※メソッドチェーン用)
107     */
108    setLayoutIsFlexible: function () {
109      config.layoutType = 2;
110      return MutualSwitching.config;
111    },
112    /**
113     * 個別設定をもつパスを登録する
114     * @public
115     * @param {Object} pathSetting JSON形式
116     * @return モジュール(※メソッドチェーン用)
117     */
118    setPathSettings: function (pathSetting) {
119      config.pathSettings = pathSetting;
120      return MutualSwitching.config;
121    },
122    /**
123     * PC用ビューポートの幅を設定する
124     * @public
125     * @param {Int} width 幅
126     * @return モジュール(※メソッドチェーン用)
127     */
128    setViewPortWIdthPc: function (width) {
129      config.viewPortWidthPc = width;
130      return MutualSwitching.config;
131    },
132    /**
133     * スマホ用ビューポートの幅を設定する
134     * @public
135     * @param {Int} width 幅
136     * @return モジュール(※メソッドチェーン用)
137     */
138    setViewPortWIdthSp: function (width) {
139      config.viewPortWidthSp = width;
140      return MutualSwitching.config;
141    },
142    /**
143     * [setViewPcBySp description]
144     * @return モジュール(※メソッドチェーン用)
145     */
146    setViewPcBySp: function () {
147      config.viewPcBySp = true;
148      return MutualSwitching.config;
149    },
150    /**
151     * スマホ用ページが存在を認識させる設定
152     * @param {Boolean} existsFlag true: 存在する, false: 存在しない
153     * @return モジュール(※メソッドチェーン用)
154     */
155    setExistsSpPage: function (existsFlag) {
156      config.existsSpPage = existsFlag;
157      return MutualSwitching.config;
158    },
159    /**
160     * プレビュー画面かどうかを判断する設定
161     * @param {Boolean} isPreview true: プレビュー, false: その他
162     * @return モジュール(※メソッドチェーン用)
163     */
164    setPreviewMode: function (isPreview) {
165      config.isPreview = isPreview;
166      return MutualSwitching.config;
167    },
168    /**
169     * レスポンシブレイアウトであるか
170     * @public
171     * @return {Boolean} true: レスポンシブレイアウト, false: その他
172     */
173    isResponsiveLayout: function () {
174      return config.layoutType === 0;
175    },
176    /**
177     * 個別レイアウトであるか
178     * @public
179     * @return {Boolean} true: 個別レイアウト, false: その他
180     */
181    isIndividualLayout: function () {
182      return config.layoutType === 1;
183    },
184    /**
185     * フレキシブルレイアウトであるか
186     * @public
187     * @return {Boolean} true: フレキシブルレイアウト, false: その他
188     */
189    isFlexibleLayout: function () {
190      return config.layoutType === 2;
191    },
192    /**
193     * PC用ビューポートの幅を取得
194     * @public
195     * @return {Int} 幅
196     */
197    getViewPortWidthPc: function () {
198      return config.viewPortWidthPc;
199    },
200    /**
201     * スマホ用ビューポートの幅を取得
202     * @public
203     * @return {Int} 幅
204     */
205    getViewPortWidthSp: function () {
206      return config.viewPortWidthSp;
207    },
208    /**
209     * PCレイアウト時のビューポート値を取得
210     * @public
211     * @return {String} ビューポート値
212     */
213    getViewPortPc: function () {
214      return 'width=' + config.viewPortWidthPc + ',user-scalable=yes';
215    },
216    /**
217     * スマホレイアウト時のビューポート値を取得
218     * @public
219     * @return {String} ビューポート値
220     */
221    getViewPortSp: function () {
222      return 'width=' + config.viewPortWidthSp + ',user-scalable=yes';
223    },
224    /**
225     * フレキシブルレイアウト時のビューポート値を取得
226     * @public
227     * @return {String} ビューポート値
228     */
229    getViewPortFlexible: function () {
230      return 'width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0';
231    },
232    /**
233     * パス毎の設定を取得
234     * @public
235     * @return {Object} パスと設定データ
236     */
237    getPathSettings: function () {
238      return config.pathSettings;
239    },
240    /**
241     * PC用CSSファイル名を取得
242     * @public
243     * @return {String} ファイル名
244     */
245    getPcCssName: function () {
246      return config.pcCssName;
247    },
248    /**
249     * スマホ用CSSファイル名を取得
250     * @public
251     * @return {String} ファイル名
252     */
253    getSpCssName: function () {
254      return config.spCssName;
255    },
256    /**
257     * [getViewPcBySp description]
258     * @return {[type]} [description]
259     */
260    getViewPcBySp: function () {
261      return config.viewPcBySp;
262    },
263    /**
264     * スマホ用ページが存在するか
265     * @return {Boolean}
266     */
267    isExistsSpPage: function () {
268      return config.existsSpPage;
269    },
270    /**
271     * プレビュー画面での閲覧かどうか
272     * @return {Boolean} [description]
273     */
274    isPreviewMode: function () {
275      return config.isPreview;
276    }
277  }
278})();
279
280//==============================================================================
281// ユーティリティモジュール
282//==============================================================================
283MutualSwitching.util = (function () {
284  return {
285    /**
286     * ドメイン名を取得
287     * @public
288     * @return {String} ドメイン名
289     */
290    getDomain: function () {
291      return document.domain;
292    },
293    /**
294     * ディレクトリパス(URL)を取得
295     * @public
296     * @return {String} パス
297     */
298    getFileName: function () {
299      return location.pathname.split('/').pop();
300    },
301    /**
302     * 自身のページファイル名を取得
303     * @public
304     * @return {String} ファイル名
305     */
306    getDirPath: function () {
307      return location.pathname.replace(MutualSwitching.util.getFileName(), '').replace(/\/$/, '');
308    },
309    /**
310     * 閲覧端末がスマホである
311     * @return {Boolean} true: スマホ, false:その他
312     */
313    isDeviceSp: function () {
314      // ユーザーエージェント取得
315      var ua = navigator.userAgent.toLowerCase();
316      return (ua.indexOf('iphone') > -1) || (ua.indexOf('ipad') > -1) || (ua.indexOf('android') > -1);
317    },
318    /**
319     * デバッグ情報描画
320     * @public
321     * @return {[type]} [description]
322     */
323    debugPrint: function () {
324      $('#debug').text($("meta[name='viewport']").attr('content'));
325    }
326  };
327})();
328
329//==============================================================================
330// メイン処理モジュール
331//==============================================================================
332MutualSwitching.run = (function () {
333  // jQuery読込み確認
334  if (typeof $ === "undefined") {
335    console.warn("jQuery required.");
336    return;
337  }
338
339  // Cookie利用の可否を確認
340  if (!navigator.cookieEnabled) {
341    console.warn("Please allow use of cookies.");
342    return;
343  }
344
345  /**
346   * ビューポート書換え
347   * @private
348   * @param  {String} value ビューポート設定
349   */
350  function rewriteViewPort(value) {
351    var srcViewPort = $("meta[name='viewport']").attr('content');
352    var destViewPort = value;
353    if (srcViewPort !== destViewPort) {
354      $("meta[name='viewport']").attr('content', destViewPort);
355    }
356  }
357
358  /**
359   * PC用CSSの読込みをスマホ用CSS読込みに書換え
360   * @private
361   */
362  function rewriteCssPcToSp() {
363    var deviceCss = $("link[href$='/" + MutualSwitching.config.getPcCssName() + "']");
364    if (deviceCss.attr('href') != null) {
365      var deviceCssDest = deviceCss.attr('href').replace(MutualSwitching.config.getPcCssName(), MutualSwitching.config.getSpCssName());
366      deviceCss.attr('href', deviceCssDest);
367    }
368  }
369
370  /**
371   * PC用デザインでページを閲覧しているか
372   * @private
373   * @return {Boolean} true: PCデザイン, false: それ以外
374   */
375  function isPcView() {
376    return $.cookie('view_mode') === 'pc';
377  }
378
379  /**
380   * スマホ用デザインでページを閲覧しているか
381   * @private
382   * @return {Boolean} true: スマホデザイン, false: それ以外
383   */
384  function isSpView() {
385    return $.cookie('view_mode') === 'sp' || !$.cookie('view_mode');
386  }
387
388  /**
389   * PCページからSPページへのリダイレクトURLを取得する
390   * @private
391   * @return {String} リダイレクト先URL
392   */
393  function getRedirectUrlPcToSp() {
394    var redirectUrl;
395    if (location.href.split('/').pop().length === 0) {
396      redirectUrl = 'index.html';
397    } else {
398      redirectUrl = location.href.split('/').pop();
399    }
400    return redirectUrl;
401  }
402
403  /**
404   * パス毎に設定されたレイアウト情報を設定する
405   * @private
406   * @return {[type]} [description]
407   */
408  function applySettingsForEachPath() {
409    var settings = MutualSwitching.config.getPathSettings();
410    if (!settings) {
411      return;
412    }
413
414    // 自身のパスから遡って設定を探す
415    var pathParts = MutualSwitching.util.getDirPath().split('/');
416    for (var ii = pathParts.length - 1; ii >= 0; ii--) {
417      var searchPath = '';
418      var tmpPathParts = [];
419      for (var jj = 0; jj <= ii; jj++) {
420        tmpPathParts.push(pathParts[jj]);
421      }
422      searchPath = tmpPathParts.join('/').length > 0 ? tmpPathParts.join('/') : '/';
423
424      // 個別指定されている
425      if (settings.hasOwnProperty(searchPath)) {
426        // レイアウトが指定されていれば適用する
427        if (settings[searchPath].layout_type != null) {
428          MutualSwitching.config.setLyaoutType(settings[searchPath].layout_type);
429        }
430
431        // PC用Widthが設定されていれば適用する

432        if (settings[searchPath].pc_width != null) {
433          MutualSwitching.config.setViewPortWIdthPc(settings[searchPath].pc_width);
434        }
435
436        // スマホ用Widthが設定されていれば適用する
437        if (settings[searchPath].sp_width != null) {
438          MutualSwitching.config.setViewPortWIdthSp(settings[searchPath].sp_width);
439        }
440        break;
441      }
442    }
443  }
444
445  return {
446    /**
447     * メイン処理
448     * @public
449     */
450    ready: function () {
451      $(document).ready(function () {
452        // デバッグ
453        MutualSwitching.util.debugPrint();
454
455        // PCサイト表示を実行
456        $('.jqs-go-to-pc').on({
457          'click': function () {
458            $.cookie('view_mode', 'pc', {expires: 0, path: '/', domain: MutualSwitching.util.getDomain()});
459          }
460        });
461
462        // スマホサイト表示を実行
463        $('.jqs-go-to-sp').on({
464          'click': function () {
465            $.cookie('view_mode', 'sp', {expires: 0, path: '/', domain: MutualSwitching.util.getDomain()});
466          }
467        });
468
469        // パス毎に定義された設定を適用する
470        applySettingsForEachPath();
471
472        // プレビュー画面から閲覧中
473        if (MutualSwitching.config.isPreviewMode()) {
474          if (MutualSwitching.config.isFlexibleLayout()) {
475            //------------------------------------------------------------------
476            // フレキシブルレイアウト
477            //------------------------------------------------------------------
478            // ビューポート書換え
479            rewriteViewPort(MutualSwitching.config.getViewPortFlexible());
480          } else if (MutualSwitching.config.isIndividualLayout()) {
481            // CSS書換え
482            rewriteCssPcToSp();
483            // ビューポート書換え
484            rewriteViewPort(MutualSwitching.config.getViewPortSp());
485          } else {
486            //------------------------------------------------------------------
487            // レスポンシブレイアウト
488            //------------------------------------------------------------------
489            // ビューポート書換え
490            rewriteViewPort(MutualSwitching.config.getViewPortSp());
491          }
492        }
493
494        // PCページ閲覧中
495        if (isPcView() && MutualSwitching.util.isDeviceSp()) {
496          // スマホページへの切替ボタン表示
497          $('.jqs-go-to-sp').show();
498          // レイアウトの種類で分岐
499          if (MutualSwitching.config.isFlexibleLayout()) {
500            //------------------------------------------------------------------
501            // フレキシブルレイアウト
502            //------------------------------------------------------------------
503            // ビューポート書換え
504            rewriteViewPort(MutualSwitching.config.getViewPortFlexible());
505          } else if (MutualSwitching.config.isIndividualLayout()) {
506            //------------------------------------------------------------------
507            // 個別レイアウト
508            //------------------------------------------------------------------
509            // ビューポート書換え
510            rewriteViewPort(MutualSwitching.config.getViewPortSp());
511          } else {
512            //------------------------------------------------------------------
513            // レスポンシブレイアウト
514            //------------------------------------------------------------------
515            // ビューポート書換え
516            rewriteViewPort(MutualSwitching.config.getViewPortPc());
517          }
518        }
519
520        // スマホページ閲覧中
521        if (isSpView() && MutualSwitching.util.isDeviceSp()) {
522          // レイアウトの種類で分岐
523          if (MutualSwitching.config.isFlexibleLayout()) {
524            //------------------------------------------------------------------
525            // フレキシブルレイアウト
526            //------------------------------------------------------------------
527            // ビューポート書換え
528            rewriteViewPort(MutualSwitching.config.getViewPortFlexible());
529          } else if (MutualSwitching.config.isIndividualLayout()) {
530            //------------------------------------------------------------------
531            // 個別レイアウト
532            //------------------------------------------------------------------

533            // PCページへの切替ボタン表示
534            $('.jqs-go-to-pc').show();
535
536            if (MutualSwitching.config.getViewPcBySp()) {
537              if (location.href.indexOf('.sp.') <= 0 && MutualSwitching.config.isExistsSpPage()) {
538                $.cookie('view_mode', 'sp', {expires: 0, path: '/', domain: MutualSwitching.util.getDomain()});
539                location.href = getRedirectUrlPcToSp().replace('.html', '.sp.html');
540              } else {
541                // CSS書換え
542                rewriteCssPcToSp();
543                // ビューポート書換え
544                rewriteViewPort(MutualSwitching.config.getViewPortSp());
545              }
546            } else if (MutualSwitching.config.isExistsSpPage && (location.href.indexOf('.sp.') <= 0)) {
547              location.href = getRedirectUrlPcToSp().replace('.html', '.sp.html');
548            } else {
549              // CSS書換え
550              rewriteCssPcToSp();
551              // ビューポート書換え
552              rewriteViewPort(MutualSwitching.config.getViewPortSp());
553            }
554          } else {
555            //------------------------------------------------------------------
556            // レスポンシブレイアウト
557            //------------------------------------------------------------------
558            // ビューポート書換え
559            rewriteViewPort(MutualSwitching.config.getViewPortSp());
560          }
561        }
562      });
563    }
564  };
565})();