https://www.kyoceradocumentsolutions.co.jp/common2/js/components.js

1(function(ns, $) {
2    'use strict';
3    var $window = $(window);
4    var isTouchDevice = (ns.ua.Mobile || ns.ua.Tablet);
5    var touchEvt = (isTouchDevice) ? 'touchstart' : 'click';
6
7    // Export
8    ns.touchEvt = touchEvt;
9
10    /**
11     * IE8-11 fixed JS
12     * IE特有のdocument.uniqueIDが存在する
13     */
14     (function(i,s,a,m){
15        if(typeof s.uniqueID === "undefined") return;
16        a=s.createElement('script'),
17        m=s.getElementsByTagName('head')[0],
18        a.src='/common/js/iefixed.js';
19        m.appendChild(a);
20    })(window,document);
21
22    /**
23     * トグル
24     * @param string selector
25     *
26     */
27    function Toggle(selector) {
28        this.$elem = $(selector);
29        this.openedClass = 'is-opened';
30        this.isOpened = false;
31    }
32    Toggle.prototype = {
33        /**
34         * 開く
35         */
36        open: function() {
37            this.$elem.addClass(this.openedClass);
38            this.isOpened = true;
39        },
40        /**
41         * 閉じる
42         */
43        close: function() {
44            this.$elem.removeClass(this.openedClass);
45            this.isOpened = false;
46        },
47        /**
48         * トグル操作
49         */
50        toggle: function() {
51            (this.isOpened) ? this.close() : this.open();
52        }
53    };
54    /**
55     * スクロールボックス
56     *
57     */
58      function scrollBox() {
59          $('.scroll-box').wrap('<div class="scroll-desc"><div class="scroll-wrapper"></div></div>');
60      }
61      // Export
62      ns.scrollBox = scrollBox;
63    /**
64     * イメージビューワー
65     *
66     */
67     function viewer() {
68        var $viewerTarget = $('#viewerTarget');
69        var $viewerItems = $('#viewerItems').find('a');
70        $viewerItems.eq(0).addClass('is-active');
71        $viewerTarget.on('click', function(evt){
72            evt.preventDefault();
73            $viewerItems.filter('.is-active').trigger('click');
74        });
75        $viewerItems.on('touchstart mouseenter', function(evt) {
76            evt.preventDefault();
77            var self = $(this);
78            if (!self.hasClass('is-active')) {
79                $viewerTarget.find('img').animate({
80                    opacity: 0
81                }, {
82                    duration: 200,
83                    queue: false,
84                    complete: function() {
85                        $(this).animate({
86                            opacity: 1
87                        }, {
88                            duration: 600,
89                            queue: false
90                        }).attr('src', self.attr('href'));
91                        //jquery cash fix
92                        $viewerTarget[0].setAttribute("data-title", self.attr('data-title'));
93                    }
94                });
95                $viewerItems.filter('.is-active').removeClass('is-active');
96                self.addClass('is-active');
97            }
98        });
99     }
100    /**
101     * DOM構築後に実行
102     *
103     */
104    $(function() {
105        var $gNav = $('#globalNav');
106        var $body = $("body");
107        //iOS8.4.1不具合対応
108        if (ns.ua.iOS) {
109            $body.addClass("iOS");
110        }
111        //エリア有無
112        var hasFixedNav = document.getElementById('fixedNav') ? true : false;
113        var hasLocalNav = document.getElementById('localNavButton') ? true : false;
114        //アクティブ化関連
115        if( $body.hasClass("dir-home") ) {
116            $gNav.find('.nav-home').addClass('is-active');
117        } else if( $body.hasClass("dir-products") ) {
118            $gNav.find('.nav-products').addClass('is-active');
119        } else if( $body.hasClass("dir-solutions") ) {
120            $gNav.find('.nav-solutions').addClass('is-active');
121        } else if( $body.hasClass("dir-support") ) {
122            $gNav.find('.nav-support').addClass('is-active');
123        } else if( $body.hasClass("dir-company") ) {
124            $gNav.find('.nav-company').addClass('is-active');
125        } else if( $body.hasClass("dir-information") ) {
126            $gNav.find('.nav-information').addClass('is-active');
127        }
128        //ナビゲーションのトグル実装（実有効範囲はスマホサイズ時）
129        var globalNav = new Toggle('#globalNav');
130        $('#globalNavButton').on(touchEvt, function(evt) {
131            evt.preventDefault();

132            globalNav.toggle();
133        });
134        var globalSearch = new Toggle('#globalSearch');
135        $('#globalSearchFoldedButton').on(touchEvt, function(evt) {
136            evt.preventDefault();
137            globalSearch.toggle();
138        });
139        if( hasFixedNav ) {
140            $body.addClass('has-fixed-nav');
141            var fixedNav = new Toggle('#fixedNav');
142            $('#fixedNavConsultationFoldedButton').on(touchEvt, function(evt) {
143                evt.preventDefault();
144                fixedNav.toggle();
145            });
146            if( hasLocalNav ) {
147                $body.addClass('has-local-nav');
148                $('#localNavButton').on(touchEvt, function(evt) {
149                    evt.preventDefault();
150                    fixedNav.toggle();
151                });
152            }
153        }
154        //touch有無分岐（タッチデバイスの場合）
155        if ( isTouchDevice ) {
156            $body.addClass('touch');
157            //グローバルメガメニューのトグル実装
158            var globalMegaMenuButton = [];
159            $('.has-global-mega-menu').each(function(i) {
160                globalMegaMenuButton[i] = new Toggle(this);
161                $('> a',this).on(touchEvt, function(evt) {
162                    evt.preventDefault();
163                    if ($window.width() > ns.screenSize.phone) {
164                        globalMegaMenuButton.forEach(function(t, j) {
165                            (i != j) && t.close();
166                        });
167                    }
168                    globalMegaMenuButton[i].toggle();
169                });
170            });
171            if( hasLocalNav ) {
172                //ローカルナビのトグル実装
173                var localSubMenuButton = [];
174                $('.has-sub-menu').each(function(i){
175                    localSubMenuButton[i] = new Toggle(this);
176                    $('> a',this).on(touchEvt, function(evt) {
177                        evt.preventDefault();
178                        localSubMenuButton[i].toggle();
179                    });
180                });
181            }
182        } else if ( !isTouchDevice && hasFixedNav ) {
183            //タッチデバイス以外の場合
184            //fixedNavエリアの追従
185            var navOffsetTop = $("#fixedNav").offset().top;
186            var navFixed = function() {
187                if ($window.scrollTop() > navOffsetTop) {
188                    $body.addClass('is-fixed');
189                } else {
190                    $body.removeClass('is-fixed');
191                }
192            }
193            $window.scroll(navFixed);
194            //hashがある場合にfixedNavエリア分のデフォルトオフセットを設定
195            if(location.hash && $window.width() > ns.screenSize.tablet){
196                var defaultOffset = hasLocalNav ? -70 : -105;
197                $.go(location.hash, {duration: 1500, easing: 'swing'}, true, defaultOffset);
198            }
199        }
200        //はみ出し可能なスクロールボックス（実有効範囲はスマホサイズ時）
201        if($('.scroll-box')[0]) scrollBox();
202        //イメージビューワー
203        if($('#viewer')[0]) viewer();
204        //スムーススクロール
205        $(document).on('click', '.go-to', function(evt) {
206            if($(this).hasClass('global-footer__btn-top')){
207                $.go(0, {duration: 400, easing: 'swing'});
208            }else{
209                var scrollOffset = -10;
210                if ( hasFixedNav && !isTouchDevice && $window.width() > ns.screenSize.tablet) {
211                    if( hasLocalNav ){
212                      scrollOffset = -70;
213                    }else{
214                      scrollOffset = -105;
215                    }
216                }
217                $.go($(this).attr('href'), {duration: 1000, easing: 'swing'}, true, scrollOffset);
218            }
219        });
220    });
221})(KD, jQuery);